top | item 44438815

(no title)

throwitaway1123 | 8 months ago

> This is why both SolidJS and Vue Vapor both have helpers for rendering lists and conditional elements

Haven't these tagged template libraries coalesced around the html`<${SomeComponent}><//>` syntax for custom components (including control flow components like Solid's `For` component)? The readme for Ryan Carniato's Lit DOM Expressions library includes this example for instance [1]:

  const view = html`
    <table class="table table-hover table-striped test-data">
      <tbody>
        <${For} each=${() => state.data}
          >${row => html`
            <tr>
              <td class="col-md-1" textContent=${row.id} />
              <td class="col-md-4">
                <a onClick=${[select, row.id]}>${() => row.label}</a>
              </td>
              <td class="col-md-1">
                <a onClick=${[remove, row.id]}
                  ><span class="glyphicon glyphicon-remove"
                /></a>
              </td>
              <td class="col-md-6" />
            </tr>
          `}<//
        >
      </tbody>
    </table>
  `;
The author of the article mentions this very briefly, where he writes "For JSX-style references you would need to use binding syntax like <${MyComponent}>". The Preact author's htm tagged template library uses this convention as well [2].

[1] https://github.com/ryansolid/dom-expressions/tree/7fd9f86f1b...

[2] https://github.com/developit/htm

discuss

order

MrJohz|8 months ago

The syntax exists, yes, but the intention of the proposal seems to be that users will use standard JS conditional/looping constructs, and even pushes this as one of the reasons that this style of template works so well here. But these are exactly the type of constructs that you need to avoid if you want fine-grained reactive DOM updates.

throwitaway1123|8 months ago

JSX was also created with the intention of using traditional conditional/looping constructs, but that hasn't stopped Solid and Preact from repurposing it for fine grained reactivity. Preact's signal implementation has Solid-like Show/For components [1].

I won't speak for the author of the proposal, but given that Lit itself has special control flow mechanisms for conditionals and loops (the cache and repeat directives respectively [2][3]), I can't imagine the proposal being too opposed to these mechanisms.

[1] https://github.com/preactjs/signals/blob/eae850a9f3aa62e505a...

[2] https://lit.dev/docs/templates/conditionals/#caching-templat...

[3] https://lit.dev/docs/templates/lists/#the-repeat-directive