[bennypowers]

Why JSXBelPack when you can

  import { html, render } from 'https://unpkg.com/lit-html';

  const benefitTpl = ({name, desc}) => html`
    <dt>${name}</dt>
    <dd>${desc}</dd>
  `;
  
  render(html`
    <lit-rocks>
      <dl>${benefits.map(benefitTpl)}</dl>
    </lit-rocks>`, document.body)

And updates are fast without any VDOM overhead.

[zemptime]

I'm popping in here to say, I've had people from both Vue and React join my team where we're using lit-html. Transitions have been seamless, mental models map over quite well.

[hyperpress]

There's so much less cruft and overhead with lit-html, and you get speed that's akin to vanilla JavaScript. As for JSX, I think we can all get used to something non-standard, which after enough time feels normal, but the benefits of a lit-html are so immediately apparent. The transition is super easy.

[westbrookj]

Yes, this!

Also, don't forget your `?module` at the end of your unpkg link to get that running

[tracker1]

Is this doing a full re-render on each change? Having not seen the state management piece... but could be nice for progressive enhancement modules in a server-rendered app. I've done similar in JS.

[zemptime]

Nope! It doesn't visit each node like vdom. VDOM visits every virtual node. lit-html looks at only the expressions. That's where a lot of the speed/performance comes from

[spankalee]

zeptime's correct. lit-html places markers in the HTML where the expressions are. Then it renders the HTML once, and updates the expressions directly. That's how it avoids a full re-render and avoids building am in-memory VDOM and doing any diffing.