Is lit has diff mechanism when render ?

[happy-little-one]

lit-html only updates the parts of the template that have changed since the last render.

Is that mean lit will diff new template result to the old one ? can I treat it like a virtual-dom ?

If the answer is 'Yes', can I just use it with a state management lib like mobx to develop large apps? I am tired of frameworks .

What I do will like this:

const store = {a: {b: {c: 1}}}

const tmpl = store => html`<span>${data.a.b.c}</span>`

render(tmpl(store), document.body)

// after update data, I will call the render again
store.a.b.c += 1
render(tmpl(store ), document.body)

I will put the whole data of the app in the stroe, so it could be very large, will this cause performance problems ?

[bicknellr]

Yes, lit-html (the core rendering part of Lit) can be used in effectively the same way you would use a virtual DOM in that it isn't going to recreate that <span> every time you call render. However, Lit's html template tag doesn't return a tree of virtual nodes, but a TemplateResult, which render uses to decide if all the static pieces of that html call are already rendered into the destination container.

const f = (x) => html`<div>${x}</div>`;
render(f('This is the first render.'), document.body);
await new Promise(r => setTimeout(r, 3000));
render(f('This is the second render.'), document.body);

In the example above, lit-html will recognize that it was asked to render a TemplateResult that was produced by the same html call expression as the one from the first render¹, so it will know that it doesn't need to do anything with the <div> it rendered earlier - it only needs to consider the dynamic parts of that template (i.e. any ${...}). This is true regardless of how big the static part of your template becomes.

const f = (x) => html`
  <div> You
    <div> can
      <div> do
        <div> this
          <div> and
            <div> only
              <div> the value of "${x}" </div>
            </div> will
          </div> ever
        </div> be
      </div> compared
    </div> or
  </div> updated.
`;
render(f('this text'), document.body);
await new Promise(r => setTimeout(r, 3000));
render(f('the thing here'), document.body);

However, if your TemplateResult was produced by a different html call in the source text, it will recreate the tree:

render(html`<div>${'This is the first render.'}</div>`, document.body);
await new Promise(r => setTimeout(r, 3000));
render(html`<div>${'This is the second render.'}</div>`, document.body);

... but it also isn't walking a structure that scales with the number of nodes it represents on every render to figure that out.

You might be interested in this talk from CDS 2017 given by @justinfagnani. The timestamp in that link is when he describes how lit-html's coarser diffing compares with a virtual DOM and the rest of the video has more details about how it works.

Footnotes

1. "For any particular tagged template literal expression, the tag function will always be called with the exact same literal array, no matter how many times the literal is evaluated." ↩

[happy-little-one]

awesome, thanks! by the way, Is lit has an official discord channel ?

[bicknellr]

No official Discord channel but we have a Slack workspace that's fairly active: https://lit.dev/slack-invite/. Also, https://lit.dev/docs/resources/community/ has a couple other links.

[augustjk]

The wiki also has a good written explanation: https://github.com/lit/lit/wiki/How-it-Works

[bicknellr]

If you joined the Slack you probably saw this but we just switched to Discord: https://lit.dev/discord