COMP-007: component calls itself

Error: the page doesn't build until this is fixed.

Components are written into the page when it compiles, before any data is there. A component that uses itself would never stop, so a menu with submenus is written as levels.

Fails

component Menu(items: List) {
  ul {
    for item in items {
      li {
        a(item.url) "{item.title}"
        Menu(items: item.children)
      }
    }
  }
}

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  props(menu: List)
  h1 "Shoes"
  Menu(items: menu)
}

error[COMP-007]: `Menu` calls itself
 --> page.hypra:6:9
  |
6 |         Menu(items: item.children)
  |         ^^^^
  = help: components are expanded into the page, so they can't be recursive; use a for loop
  = docs: https://hypralang.dev/rules/comp-007/

1 error, 0 warnings

Fixed

component Menu(items: List) {
  ul {
    for item in items {
      li {
        a(item.url) "{item.title}"
        ul {
          for child in item.children { li { a(child.url) "{child.title}" } }
        }
      }
    }
  }
}

page(title: "Shoes", description: "All our running shoes, from light racers to trail shoes.") {
  props(menu: List)
  h1 "Shoes"
  Menu(items: menu)
}