Question about dom-tagger and observables

[danny-andrews]

Hi Andrea,

I've been playing around with the dom-tagger, trying to get observables to render. Here's a simple example below:

import { custom } from "lighterhtml";
import Atom from "kefir.atom";

const { html, render } = custom({
  any: (callback) => (node, childNodes) => {
    const cb = callback.call({ type: "html" }, node, childNodes);

    return (value) => {
      if (value.observe) {
        value.observe({
          value: (newValue) => {
            cb(newValue);
          },
        });
      } else {
        cb(value);
      }
    };
  },
});

const mySimpleComp = (name = Atom("Dan")) => {
  const changeName = () => name.set("Mark");

  return html`
    <h1>Hello 👋 ${name}</h1>
    <button onClick=${changeName}>Change Name</button>
  `;
};

This all works great! However, this results in a memory leak, because I never close the subscription to the observable. Is there anyway to do "cleanup" on primitives rendered inside templates?

Related issue in lit-html: https://github.com/Polymer/lit-html/issues/283.

Thanks!

[WebReflection]

You can either use lighterhtml-plus or simply observe the node via uconnect and frop the observer on disconnected 👋