@inc2734/unitone-css 1.4.1 → 1.4.2

package/src/register-layout-initializer.js

@@ -22,32 +22,29 @@ const getRegistry = () => {
   return globalThis[INITIALIZER_REGISTRY_KEY];
 };
 
-const initializeInitializer = (initializer, root) => {
-  if (!root?.isConnected || !initializer.enabled() || root.nodeType !== Node.ELEMENT_NODE) {
-    return;
-  }
-
-  const targets = new Set();
-
-  if (root.matches?.(initializer.selector)) {
-    targets.add(root);
-  }
-
-  root.querySelectorAll?.(initializer.selector).forEach((target) => {
-    targets.add(target);
-  });
-
-  targets.forEach((target) => {
+const initializeTarget = (initializer, target) => {
+  if (!target?.isConnected || target.nodeType !== Node.ELEMENT_NODE) return;
+  if (!initializer.enabled() || !target.matches?.(initializer.selector)) {
     if (initializer.initialized.has(target)) {
-      return;
+      initializer.cleanups.get(target)?.();
+      initializer.cleanups.delete(target);
+      initializer.initialized.delete(target);
+      initializer.reset?.(target);
     }
+    return;
+  }
+  if (initializer.initialized.has(target)) return;
+  const cleanup = initializer.initialize(target);
+  initializer.initialized.add(target);
+  if (typeof cleanup === 'function') initializer.cleanups.set(target, cleanup);
+};
 
-    const cleanup = initializer.initialize(target);
-    initializer.initialized.add(target);
-    if ('function' === typeof cleanup) {
-      initializer.cleanups.set(target, cleanup);
-    }
-  });
+const initializeInitializer = (initializer, root) => {
+  if (!root?.isConnected || root.nodeType !== Node.ELEMENT_NODE) return;
+  initializeTarget(initializer, root);
+  root
+    .querySelectorAll?.(initializer.selector)
+    .forEach((target) => initializeTarget(initializer, target));
 };
 
 const initializeNode = (root) => {
@@ -106,6 +103,10 @@ const observeDocument = () => {
 
   registry.observer = new MutationObserver((entries) => {
     entries.forEach((entry) => {
+      if (entry.type === 'attributes') {
+        registry.initializers.forEach((initializer) => initializeTarget(initializer, entry.target));
+        return;
+      }
       entry.removedNodes.forEach(disposeNode);
       entry.addedNodes.forEach((addedNode) => {
         if (addedNode?.isConnected && addedNode.nodeType === Node.ELEMENT_NODE) {
@@ -126,12 +127,20 @@ const observeDocument = () => {
   });
 
   registry.observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['data-unitone-layout', 'data-unitone-react-layout'],
     childList: true,
     subtree: true,
   });
 };
 
-export const registerLayoutInitializer = ({ key, selector, initialize, enabled = () => true }) => {
+export const registerLayoutInitializer = ({
+  key,
+  selector,
+  initialize,
+  reset,
+  enabled = () => true,
+}) => {
   const registry = getRegistry();
   if (!registry || registry.initializers.has(key)) {
     return;
@@ -140,6 +149,7 @@ export const registerLayoutInitializer = ({ key, selector, initialize, enabled =
   const initializer = {
     selector,
     initialize,
+    reset,
     enabled,
     initialized: new WeakSet(),
     cleanups: new WeakMap(),

package/src/use-layout-behaviors.js

@@ -0,0 +1,60 @@
+'use client';
+
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef } from 'react';
+import { dividersResizeObserver, stairsResizeObserver, verticalsResizeObserver } from './library';
+import { layoutRefreshEvent, resetLayoutBehavior } from './layout-behavior-state';
+
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
+const observers = {
+  divider: dividersResizeObserver,
+  stairs: stairsResizeObserver,
+  vertical: verticalsResizeObserver,
+};
+
+/** React owns observer lifetimes; calculations and resize handling remain shared with HTML. */
+export const useLayoutBehaviors = (enabled, forwardedRef) => {
+  const targetRef = useRef(null);
+  const lifetimeRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => targetRef.current);
+
+  const dispose = () => {
+    const lifetime = lifetimeRef.current;
+    if (!lifetime) return;
+    lifetime.target.removeEventListener(layoutRefreshEvent, lifetime.refresh);
+    lifetime.controllers.forEach((controller, name) => {
+      controller.dispose();
+      resetLayoutBehavior(lifetime.target, name);
+    });
+    lifetimeRef.current = null;
+  };
+
+  useBrowserLayoutEffect(() => dispose, []);
+  useBrowserLayoutEffect(() => {
+    const target = targetRef.current;
+    if (lifetimeRef.current?.target !== target) dispose();
+    if (!target) return;
+    if (!lifetimeRef.current) {
+      const controllers = new Map();
+      const refresh = () => controllers.forEach((controller) => controller.refresh());
+      lifetimeRef.current = { target, controllers, refresh };
+      target.addEventListener(layoutRefreshEvent, refresh);
+    }
+    const { controllers } = lifetimeRef.current;
+    for (const [name, observe] of Object.entries(observers)) {
+      if (!enabled[name]) {
+        if (controllers.has(name)) {
+          controllers.get(name).dispose();
+          controllers.delete(name);
+          resetLayoutBehavior(target, name);
+        }
+      } else if (!controllers.has(name)) {
+        const stop = observe(target, { reactOwned: true });
+        controllers.set(name, { dispose: stop, refresh: stop.refresh });
+      } else {
+        controllers.get(name).refresh();
+      }
+    }
+  });
+
+  return targetRef;
+};