Logic block shorthand for single elements

[Ocean-OS]

Describe the problem

Often, when using an #if, #each, or especially a #key block, you'd want to only use one element as the child of the logic block, and it feels unnecessary to create a logic block, just to wrap it around one element.

Describe the proposed solution

It would be useful to have shorthand for these logic blocks if you only want to encapsulate the logic to one element. Here's an example:

<div #key={thing}></div>

In the attribute's value, you'd use the same syntax as you would for the block equivalent. So, for #each you would do something like this:

<ul>
<li #each={list as item}>{item}</li>
</ul>

And for #if:

<p #if={condition}>This will only show up if <code>condition</code> is truthy</p>

I think this would provide a simple and aesthetically pleasing solution.

Concerns / Bikesheddable Details

• I'm not sure how #await would work— perhaps Await expressions #1857 could be implemented as a solution?
• I'm not sure how :else would work for #if and #each blocks
• I don't think #snippet would be useful in this format; I don't really see many cases where only one element is used in a snippet, as that kind of defeats the purpose of a snippet. Additionally, the syntax that that would entail, #snippet={stuff(param1, param2)}, is less than ideal in both aesthetics and logic— it would be confusing as people might assume that stuff is an already existing function, and that the entire thing is a function call.
• There is also the implication that these attributes would be reserved, and as such wouldn't be allowed as props accessible by a component. However, I'm not sure how much of an impact that would have (if any). Nonetheless, we could start by warning if props like this (maybe any prop starting with a #, to avoid future naming conflicts?) are taken by a component (eg let {'#if': prop} = $props()), and then throwing in 6.0, since you can use components in logic blocks. However, these props would be an outlier in that they apply to both regular elements and components, but the component doesn't have access or knowledge of their appliance— components don't have knowledge of being inside logic blocks, and it would be implied that that behavior is reflected here.

Importance

would make my life easier

[paoloricciuti]

There are way too many downsides (also as you've mentioned this would be a breaking change so we definitely can't do it now), this would also introduce two ways of doing the same thing for very little gain in terms of character count and with a bunch of caveats (no snippet or await).

I'm gonna close this but share it with the others maintainers in case they think we should do it but I'm pretty sure they'll share my vision. Thanks for proposing tho 😁