@inc2734/unitone-css 1.4.0 → 1.4.1

package/src/observer-scope.js

@@ -0,0 +1,53 @@
+/**
+ * Owns the resources and queued work of one layout observer initialization.
+ *
+ * @param {Element} target Target element.
+ * @returns {object} Observer lifetime and cleanup helpers.
+ */
+export const createObserverScope = (target) => {
+  const defaultView = target.ownerDocument.defaultView;
+  const cleanups = new Set();
+  const frames = new Set();
+  let disposed = false;
+
+  return {
+    get disposed() {
+      return disposed;
+    },
+    addCleanup(cleanup) {
+      if (disposed) {
+        cleanup();
+      } else {
+        cleanups.add(cleanup);
+      }
+    },
+    requestAnimationFrame(callback) {
+      if (disposed) {
+        return 0;
+      }
+      if (!defaultView?.requestAnimationFrame) {
+        callback();
+        return 0;
+      }
+
+      const id = defaultView.requestAnimationFrame((time) => {
+        frames.delete(id);
+        if (!disposed) {
+          callback(time);
+        }
+      });
+      frames.add(id);
+      return id;
+    },
+    dispose() {
+      if (disposed) {
+        return;
+      }
+      disposed = true;
+      frames.forEach((id) => defaultView.cancelAnimationFrame(id));
+      frames.clear();
+      cleanups.forEach((cleanup) => cleanup());
+      cleanups.clear();
+    },
+  };
+};

package/src/register-layout-initializer.js

@@ -23,7 +23,7 @@ const getRegistry = () => {
 };
 
 const initializeInitializer = (initializer, root) => {
-  if (!initializer.enabled() || root?.nodeType !== Node.ELEMENT_NODE) {
+  if (!root?.isConnected || !initializer.enabled() || root.nodeType !== Node.ELEMENT_NODE) {
     return;
   }
 
@@ -42,8 +42,11 @@ const initializeInitializer = (initializer, root) => {
       return;
     }
 
-    initializer.initialize(target);
+    const cleanup = initializer.initialize(target);
     initializer.initialized.add(target);
+    if ('function' === typeof cleanup) {
+      initializer.cleanups.set(target, cleanup);
+    }
   });
 };
 
@@ -58,6 +61,27 @@ const initializeNode = (root) => {
   });
 };
 
+// Inspect detached subtrees without relying on selectors that may have changed before removal.
+const disposeNode = (root) => {
+  const registry = getRegistry();
+  if (!registry || root?.isConnected || root?.nodeType !== Node.ELEMENT_NODE) {
+    return;
+  }
+
+  [root, ...root.querySelectorAll('*')].forEach((target) => {
+    registry.initializers.forEach((initializer) => {
+      const cleanup = initializer.cleanups?.get(target);
+      if (!cleanup || target.isConnected) {
+        return;
+      }
+
+      initializer.cleanups.delete(target);
+      initializer.initialized.delete(target);
+      cleanup();
+    });
+  });
+};
+
 const flushPendingNodes = () => {
   const registry = getRegistry();
   if (!registry) {
@@ -82,13 +106,20 @@ const observeDocument = () => {
 
   registry.observer = new MutationObserver((entries) => {
     entries.forEach((entry) => {
+      entry.removedNodes.forEach(disposeNode);
       entry.addedNodes.forEach((addedNode) => {
-        if (addedNode?.nodeType === Node.ELEMENT_NODE) {
+        if (addedNode?.isConnected && addedNode.nodeType === Node.ELEMENT_NODE) {
           registry.pendingNodes.add(addedNode);
         }
       });
     });
 
+    registry.pendingNodes.forEach((node) => {
+      if (!node.isConnected) {
+        registry.pendingNodes.delete(node);
+      }
+    });
+
     if (!registry.rafId && 0 < registry.pendingNodes.size) {
       registry.rafId = requestAnimationFrame(flushPendingNodes);
     }
@@ -111,6 +142,7 @@ export const registerLayoutInitializer = ({ key, selector, initialize, enabled =
     initialize,
     enabled,
     initialized: new WeakSet(),
+    cleanups: new WeakMap(),
   };
 
   registry.initializers.set(key, initializer);