Nue JS: Fragment support <></>

[goblinfactory]

I might be wrong, but i think that currently the parent component that get's named, must be an HTML element.

Breaks here if you try to use a fragment;

nue/packages/nuejs/src/fn.js

Line 34 in d670714

export function getComponentName(root) {

My question is, Should Nue's reactive components support fragment elements <></> ?

Advantages

instead of

<div @name="my-dialog">
  <dialog if:="resultOK">...</dialog>
  <dialog if:="resultFail">...</dialog>
  <list if:="dialogClosed"> ... </list>
</div>

something more similar to react's empty element <></> as follows

<@name="my-dialog">
  <dialog if:="resultOK">...</dialog>
  <dialog if:="resultFail">...</dialog>
  <list if:="dialogClosed"> ... </list>
</>

Rationale

• Be more semantic and avoid just defaulting to have a useless parent <DIV> for anchor purposes only.
• cleaner DOM
• Allow designers to have more semantic options for expressing intent, thus improving code cohesion.

If this isn't possible then maybe just use a div, and have an attribute ( for example render-contents-only ??) , meaning it's not rendered into the dom but it's contents are. For example;

<div @name="my-dialog" render-contents-only>
  <dialog if:="resultOK">...</dialog>
  <dialog if:="resultFail">...</dialog>
  <list if:="dialogClosed"> ... </list>
</div>

Naming stuff is hard, so please take my suggested attribute name with a pinch of salt. Only there to help this discussion.

Please note, I do appreciate that in many cases the recommended approach would be to design your system with a

<dialog @name="my-dialog"> 
</dialog>

and have the parent/host resposible for displaying either the dialog or the list. I do appreciate that. However, there are genuine requirements for clean controls to render different types of elements, and this is a very contrived example to limit the amount of example html to include. Having to have more nested controls for each combination of semantic parents might technically be "cleaner" but would break cohesion. So there's a trade off when your design can be too pure, too abstracted and the resulting code lacks cohesion. (that ability to easily reason about code and a system.)

[tipiirai]

Yes. There are several use cases for this. I think Vue uses a <template> element as the parent component for this purpose.