Fix #107 - Export a detach utility for reactivivity

Author: WebReflection

README.md

@@ -47,7 +47,7 @@ const {
 ### uhtml/preactive example
 
 ```js
-import { render, html, signal } from 'uhtml/preactive';
+import { render, html, signal, detach } from 'uhtml/preactive';
 
 const count = signal(0);
 
@@ -56,4 +56,9 @@ render(document.body, () => html`
     Clicks: ${count.value}
   </button>
 `);
-```
+
+// stop reacting to signals in the future
+setTimeout(() => {
+  detach(document.body);
+}, 10000);
+```

esm/reactive.js

@@ -1,5 +1,5 @@
 import { Hole, html, svg, htmlFor, svgFor, attr } from './keyed.js';
 
-import reactive from './render/reactive.js';
+import { detach, attach } from './render/reactive.js';
 
-export { Hole, reactive, html, svg, htmlFor, svgFor, attr };
+export { Hole, detach, attach, html, svg, htmlFor, svgFor, attr };

esm/reactive/preact.js

@@ -1,6 +1,6 @@
 export * from '@preact/signals-core';
-export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
+export { Hole, html, svg, htmlFor, svgFor, detach, attr } from '../reactive.js';
 
 import { effect } from '@preact/signals-core';
-import { reactive } from '../reactive.js';
-export const render = reactive(effect);
+import { attach } from '../reactive.js';
+export const render = attach(effect);

esm/reactive/signal.js

@@ -1,6 +1,6 @@
 export * from '@webreflection/signal';
-export { Hole, html, svg, htmlFor, svgFor, attr } from '../reactive.js';
+export { Hole, html, svg, htmlFor, svgFor, detach, attr } from '../reactive.js';
 
 import { effect } from '@webreflection/signal';
-import { reactive } from '../reactive.js';
-export const render = reactive(effect);
+import { attach } from '../reactive.js';
+export const render = attach(effect);

esm/render/reactive.js

@@ -13,7 +13,13 @@ const effects = new WeakMap;
  */
 const onGC = dispose => dispose();
 
-export default effect => {
+let remove = true;
+
+/**
+ * @param {Function} effect the reactive `effect` callback provided by a 3rd party library.
+ * @returns 
+ */
+export const attach = effect => {
   /**
    * Render with smart updates within a generic container.
    * If the `what` is a function, it automatically create
@@ -24,20 +30,28 @@ export default effect => {
    * @returns {T}
    */
   return (where, what) => {
-    let dispose = effects.get(where);
-    if (dispose) {
-      drop(dispose);
-      dispose();
-    }
-    if (typeof what === 'function') {
-      const wr = new WeakRef(where);
-      dispose = effect(() => { render(wr.deref(), what(), false) });
-      effects.set(where, dispose);
-      return create(dispose, onGC, { return: where });
-    }
-    else {
-      effects.delete(where);
-      return render(where, what, false);
-    }
+    remove = typeof what !== 'function';
+    detach(where);
+
+    if (remove) return render(where, what, false);
+    remove = true;
+
+    const wr = new WeakRef(where);
+    const dispose = effect(() => { render(wr.deref(), what(), false) });
+    effects.set(where, dispose);
+    return create(dispose, onGC, { return: where });
   };
 };
+
+/**
+ * Allow manual cleanup of subscribed signals.
+ * @param {Element} where a reference container previously used to render signals.
+ */
+export const detach = where => {
+  const dispose = effects.get(where);
+  if (dispose) {
+    if (remove) effects.delete(where);
+    drop(dispose);
+    dispose();
+  }
+};

esm/render/shared.js

@@ -10,6 +10,7 @@ const known = new WeakMap;
   * @template T
   * @param {T} where the DOM node where to render content
   * @param {(() => Hole) | Hole} what the hole to render
+  * @param {boolean} check does a `typeof` check (internal usage).
   * @returns
   */
 export default (where, what, check) => {