Re: [WICG/webcomponents] [templates] A declarative JavaScript templating API (Issue #1069)

justinfagnani left a comment (WICG/webcomponents#1069)

@NullVoxPopuli 

> what if I want just one `{}` region to update?

In the proposed API, a directive can update its part directly. The whole template does _not_ have to update.

If signals support isn't not built-in to the native API, then this is a rough sketch of a directive that can directly watch signals

<details>
 <summary>Watch Directive implementation sketch</summary>

```ts
class WatchDirective<T> extends Directive {
  #signal: Signal.State<T> | Signal.Computed<T> | undefined;
  #watcher?: Signal.subtle.Watcher;

  update(signal: Signal.State<T> | Signal.Computed<T>) {
    if (signal !== this.#signal && this.#signal !== undefined) {
      // The signal changed. Unwatch the old signal.
      this.#watcher?.unwatch(this.#signal!);
      this.#watcher = undefined;
    }
    this.#signal = signal;
    this.#watch();
    // We need to return a value to the template, but we use untrack() so that
    // the signal access is not tracked in case the template is run inside an effect.
    // This decoupling allows mixins fine-grained reactivity with direct accessing
    // signals in template functions that cause a template re-render.
    return Signal.subtle.untrack(() => this.#signal?.get());
  }

  #watch() {
    if (this.#watcher !== undefined) {
      return;
    }
    const watcher = this.#watcher = new Signal.subtle.Watcher(() => {
      // this.part is set in the constructor
      const node = this.part.startNode ?? this.part.element; // TODO: we need a consistent way to get the anchor node
      scheduler.postDOMTask(node, () => {
        this.part.setValue(this.#signal?.get());
      });
      watcher.watch();
    });
    watcher.watch(this.#signal!);
  }
}
export const watch = directive(WatchDirective);
```

_Note: this is mostly off the top of my head, so there could be problems. Adding signals integration, both via directive and built in to ChildPart, is on my todo list for the prototypes._

</details>

Usage:
```ts
const name = new Signal.State('World');
document.body.render(html`<h1>Hello ${watch(name)}</h1>`);

// Some time later...
name.set('Signals');
```


But I hope we can build Signals support directly into ChildPart, so that we can just do:

```ts
document.body.render(html`<h1>Hello ${name}</h1>`);
```

without any directive.

> I don't quite grok how a framework author gets access to the "parts" to update the parts of the DOM that changes.

Directives get passed to the Part they're connected to in their constructor.



-- 
Reply to this email directly or view it on GitHub:
https://github.com/WICG/webcomponents/issues/1069#issuecomment-3508887597
You are receiving this because you are subscribed to this thread.

Message ID: <WICG/webcomponents/issues/1069/3508887597@github.com>