@gemboss/gem-framework 0.18.16 → 0.20.0

package/dist/runtime-core.js

@@ -4,7 +4,8 @@
 // that body the names it expects (`document`, `window`, `target`, `mark`, `canListen`, `registerPlugin`) scoped to
 // one root, and keeps a ledger of what the body did so unmount() can undo it:
 //   - listeners (the module wraps every `x.addEventListener(` of the body as `__gemListen(x, `), timers,
-//     animation frames and IntersectionObservers made through `window` / `target`;
+//     animation frames and Intersection / Resize observers made through `window` / `target`;
+//   - what the body hands to onUnmount(fn) (0.19.0);
 //   - the `data-gem-bound-<key>` marks it set, so the same root can be mounted again after an unmount.
 // Importing this file does nothing: no global is read or written until mount() is called.
 
@@ -52,6 +53,21 @@ function scopedDocument(root, doc) {
   });
 }
 
+// An observer class whose instances the ledger disconnects at unmount.
+function trackedObserver(Base, ledger) {
+  if (typeof Base !== "function") return undefined;
+  return class extends Base {
+    constructor(callback, init) {
+      super(callback, init);
+      ledger.observers.add(this);
+    }
+    disconnect() {
+      ledger.observers.delete(this);
+      super.disconnect();
+    }
+  };
+}
+
 // `window` / `target` for a plugin: the real window, except that timers, frames and observers made through it are
 // remembered so unmount() can stop them.
 function trackedWindow(win, ledger) {
@@ -75,18 +91,9 @@ function trackedWindow(win, ledger) {
           return id;
         }
       : undefined,
-    IntersectionObserver: typeof win.IntersectionObserver === "function"
-      ? class extends win.IntersectionObserver {
-          constructor(callback, init) {
-            super(callback, init);
-            ledger.observers.add(this);
-          }
-          disconnect() {
-            ledger.observers.delete(this);
-            super.disconnect();
-          }
-        }
-      : undefined,
+    IntersectionObserver: trackedObserver(win.IntersectionObserver, ledger),
+    // 0.19.0: the motion effects watch their root's size.
+    ResizeObserver: trackedObserver(win.ResizeObserver, ledger),
   };
   return new Proxy(win, {
     get: (real, prop) => (Object.prototype.hasOwnProperty.call(own, prop) ? own[prop] : bindMethod(real, Reflect.get(real, prop), prop)),
@@ -116,7 +123,7 @@ export function mountPlugin(key, install, root, options = {}, guard) {
   const doc = scope.nodeType === 9 ? scope : scope.ownerDocument || globalThis.document;
   const win = options.window || (doc && doc.defaultView) || globalThis;
   const api = options.api || (doc === globalThis.document ? gemApi() : createGemApi(doc));
-  const ledger = { listeners: [], marks: [], timeouts: new Set(), intervals: new Set(), frames: new Set(), observers: new Set() };
+  const ledger = { listeners: [], marks: [], timeouts: new Set(), intervals: new Set(), frames: new Set(), observers: new Set(), cleanups: [] };
   const window = trackedWindow(win, ledger);
   const document = scope === doc ? doc : scopedDocument(scope, doc);
   // `data-gem-bound-<key>` with ANY value means bound, including one the markup carries to claim an element for its own
@@ -140,7 +147,11 @@ export function mountPlugin(key, install, root, options = {}, guard) {
   };
   const unguarded = guard ? Array.from(document.querySelectorAll(guard.selector)).filter((element) => !element[guard.prop]) : [];
 
+  // 0.19.0: a plugin hands back what is not a listener, timer or observer (the motion effects' scheduler tasks, host API).
+  const onUnmount = (fn) => { if (typeof fn === "function") ledger.cleanups.push(fn); };
+
   const teardown = () => {
+    ledger.cleanups.splice(0).reverse().forEach((fn) => fn());
     ledger.timeouts.forEach((id) => win.clearTimeout(id));
     ledger.intervals.forEach((id) => win.clearInterval(id));
     ledger.frames.forEach((id) => win.cancelAnimationFrame && win.cancelAnimationFrame(id));
@@ -150,7 +161,7 @@ export function mountPlugin(key, install, root, options = {}, guard) {
     if (guard) unguarded.forEach((element) => { delete element[guard.prop]; });
   };
   try {
-    install({ document, window, target: window, mark, canListen, listen, registerPlugin, registerNoopPlugin });
+    install({ document, window, target: window, mark, canListen, listen, registerPlugin, registerNoopPlugin, onUnmount });
     if (typeof setup === "function") {
       setup({ api, config: { planId: "gem-plugin-module", plugins: [{ key, loadStrategy: "mount", dependsOn: [] }] }, reason: "mount" });
     }