Re: [whatwg/dom] Proposal to improve the DOM creation api (#150)

I've been working on a similar library recently and was pointed to this issue as a place that might be interested.

The library is called lit-html, and it uses template literals, but not to create Nodes immediately, but to create templates that can be efficiently updated with new data later.

https://github.com/PolymerLabs/lit-html

The syntax is quite similar, though the templates are usually going to be in a function:

```js
const template(data) => html`<ul>${data.map(d=>html`<li>${d}</li>`}</ul>`;
```

The big difference is that the result of the tag is a `TemplateResult` containing a Template and the expression values. This can then be rendered multiple times to the same container:

```js
render(data) {
  const result = html`<ul>${data.map(d=>html`<li>${d}</li>`}</ul>`;
  result.renderTo(document.body);
}
```

You can call `render()` multiple times and only the dynamic parts/expressions will be updated.

The updating strategy and API is based on discussion on standardizing `<template>` expressions had here: https://github.com/whatwg/html/issues/2254 When a template is cloned/instantiated, it creates both nodes and `Part` objects, which can be updated independently of the rest of the template instance.

lit-html is really a layering of two parts which could be looked at for platform support:

1. Parsing special JS template literals as `<template>` with placeholders for expressions.
2. Something like https://github.com/whatwg/html/issues/2254 to allow efficient updates of `<template>` clones.

I've tried to make the design extensible so that additional opinionated features can be layered on top. There's an included extension that allows templates to set properties on elements by default instead of attributes, and supports declarative event handlers.

```js
const button = (data) => html`
  <my-button
      class$="${data.isPrimary ? 'primary' : 'secondary'"
      on-click=${_=>data.onClick}
      someProperty=${data.state}>
    ${data.label}
  </my-button>
`;
```

(you can see that here: https://github.com/PolymerLabs/lit-html/blob/master/src/labs/lit-extended.ts )

I also prototyped stateful template helpers, with an implementation of a `repeat()` function that renders a list of keyed data and will reuse and reorder the DOM nodes from previous renders:

```js
const list = (items) => html`
  <ul>
    ${repeat(items, (i) => i.uniqueId, (i, index) => html`
      <li>${index}. ${i.title}</li>
    `}
  </ul>
`;
```

(repeat is here: https://github.com/PolymerLabs/lit-html/blob/master/src/labs/repeat.ts )

Definitely looking for feedback. As far as standardization, I know we'd need to get this to be popular first, which I think is possible...

/cc @rniwa

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/whatwg/dom/issues/150#issuecomment-317908532