proc calls in component misbehaving when in slot of another component: Found Bug 🐛

[quimt]

Describe the bug 🐛
Analogous to previous issues like #139 with nested loops, we are now having problems with iteration in nested components.

To Reproduce 👨‍🔬

import happyx
import std / [random]

component withRandom:
  n: int = rand(99)
  `template`:
    tDiv: "self random: {self.n.val}"
    tDiv: "random in template: {rand(99)}"

var counter: int = 0
var counter2: int = 0
proc nextCounter(c: var int = counter): int =
  c += 1
  result = c

component withCounter:
  count: int = nextCounter()
  `template`:
    tDiv: "self count: {self.count}"
    tDiv: "count in template: {nextCounter(counter2)}"

component withReps:
  n: int = 5
  `template`:
    for i in 1..self.n.val:
      tDiv(style="border: 0.2em dotted gray;"): slot

appRoutes("ROOT"):
  "/":
    component withReps():
      withCounter()
      withRandom()
      "non-component rand {rand(99)}"

Expected behavior 🤔
We should see self count and self random independently varying between repetitions, since they are declared in a loop inside of a component.

We should see the count in template starting from 1, since it depends on an independent counter and the first output of nextCounter() should be 1. Though it is correctly changing as the global variable increases, it is being pre-incremented by the internal logic of the loop even though not all of the values are displayed.

Please complete the following information 📃

• HappyX version @#head, nim v. 2.0.0

Additional context ✌
Add any other context about the problem here.

[abhishekkumartiwari049]

import strformat

proc rand(max: int): int =
result = Random(max + 1)

component withRandom:
n: int = rand(99)
template:
tDiv: fmt"self random: {self.n}"
tDiv: fmt"random in template: {rand(99)}"

var counter: int = 0
var counter2: int = 0
proc nextCounter(c: var int = counter): int =
c += 1
result = c

component withCounter:
count: int = nextCounter()
template:
tDiv: fmt"self count: {self.count}"
tDiv: fmt"count in template: {nextCounter(counter2)}"

component withReps:
n: int = 5
template:
for i in 1..self.n:
tDiv(style="border: 0.2em dotted gray;"): slot

component wGrid:
ncols: int = 1
stretch: float = 1.0
nrows: int = 1
template:
ProbGrid(self.ncols, self.stretch):
for i in 1 .. self.ncols * self.nrows:
slot

appRoutes("ROOT"):
"/":
component withReps():
withCounter()
withRandom()
"non-component rand {rand(99)}"

[Ethosa]

Reason - slot procedure not handle outer cycles and components. Solved in the next commit.

[Ethosa]

import
  ../src/happyx,
  random


randomize()

component withRandom:
  n: int = rand(99)
  `template`:
    tDiv: "self random: {self.n.val}"
    tDiv: "random in template: {rand(99)}"

var counter: int = 0
var counter2: int = 0
proc nextCounter(c: var int = counter): int =
  c += 1
  result = c

component withCounter:
  count: int = nextCounter()
  `template`:
    tDiv: "self count: {self.count}"
    tDiv: "count in template: {nextCounter(counter2)}"

component withReps:
  n: int = 5
  `template`:
    for i in 1..self.n.val:
      tDiv(style="border: 0.2em dotted gray;"):
        slot


appRoutes "app":
  "/":
    component withReps():
      withCounter()
      withRandom()
      "non-component rand {rand(99)}"