Syntactic analogy between components and tags.

[quimt]

It would be helpful in general if components placement in the DSL worked as if the component were an extended tag.

For instance, components might be some kind of complicated flex-container, or a fancy button with some of its styling dependent on the state of some remembered vars.

Then might want to say

component FancyButton:
    `template`: tButton

appRoutes(...)
  "/":
        component FancyButton:
          "fancyText"

In analogy with

Approutes(...)
  "/":
        tButton:
          "unfancyText"

to set the text child of the button component. Currently it does not work this way: the "fancyText" does not bind as child of the button. I predict this logic would be hard to code in a fully automated way since there are a couple different cases. Karax handles this in part with a distinction between VNodes, which are the actual elements of the VDOM, and VComponents, which render by producing a VNode which renders the exact same way as other literal VNodes.

But perhaps the template macro in this framework could be extended to explicitly declare where children should attach when the component is placed this way in some other template or route. Maybe something in line with how the nim{.importjs .} pragma works.. For example, maybe:

component FancyButton:
  fancyParam: complexType = initComplexType(2)
    `template`: tButton:
       parse(@@1).recode.toText()
       @@rest

to apply some kind of fancy processing to the first child, but leave the @click part that comes after untouched.

[Ethosa]

to set the text child of the button component. Currently it does not work this way: the "fancyText" does not bind as child of the button. I predict this logic would be hard to code in a fully automated way since there are a couple different cases

component FancyButton:
  `template`:
    tButton:
      slot

...

builtHtml:
  component FancyButton:
    "hello"
  component FancyButton:
    "world"

[Ethosa]

slots allow this. You can also use it like this

component Button:
  flat: bool = true
  `template`:
    if self.flat:
      tButton:
        slot
    else:
     tButton(...):
       slot

[quimt]

Ah, thanks for clarifying about the slots! At a glance I had thought they were part of some other declaration.