@ipxjs/refract 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A minimal React-like virtual DOM library with an optional React compat layer",
   "type": "module",
   "main": "src/refract/index.ts",

package/src/refract/compat/react.ts

@@ -91,11 +91,13 @@ function childrenToArray(children: unknown): unknown[] {
   if (children === undefined || children === null) return [];
   if (!Array.isArray(children)) return [children];
   const out: unknown[] = [];
-  const stack = [...children];
+  const stack: unknown[] = [children];
   while (stack.length > 0) {
-    const child = stack.shift();
+    const child = stack.pop();
     if (Array.isArray(child)) {
-      stack.unshift(...child);
+      for (let i = child.length - 1; i >= 0; i--) {
+        stack.push(child[i]);
+      }
       continue;
     }
     if (child === undefined || child === null || typeof child === "boolean") {

package/src/refract/compat/sharedInternals.ts

@@ -107,6 +107,7 @@ const secretInternals: ReactSecretInternalsCompat = {
 const externalClientInternals = new Set<ReactClientInternalsCompat>();
 const externalSecretInternals = new Set<ReactSecretInternalsCompat>();
 const dispatcherStack: (RefractHookDispatcher | null)[] = [];
+const MAX_EXTERNAL_INTERNALS = 8;
 
 let runtimeInitialized = false;
 
@@ -135,7 +136,7 @@ export function registerExternalReactModule(moduleValue: unknown): void {
 
   const candidateClient = moduleRecord.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
   if (candidateClient && typeof candidateClient === "object" && "H" in (candidateClient as Record<string, unknown>)) {
-    externalClientInternals.add(candidateClient as ReactClientInternalsCompat);
+    addBoundedInternal(externalClientInternals, candidateClient as ReactClientInternalsCompat);
   }
 
   const candidateSecret = moduleRecord.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -147,12 +148,23 @@ export function registerExternalReactModule(moduleValue: unknown): void {
     && typeof dispatcherHolder.ReactCurrentDispatcher === "object"
     && "current" in (dispatcherHolder.ReactCurrentDispatcher as Record<string, unknown>)
   ) {
-    externalSecretInternals.add(candidateSecret as ReactSecretInternalsCompat);
+    addBoundedInternal(externalSecretInternals, candidateSecret as ReactSecretInternalsCompat);
   }
 
   syncDispatcherToExternal();
 }
 
+function addBoundedInternal<T>(set: Set<T>, value: T): void {
+  if (set.has(value)) return;
+  if (set.size >= MAX_EXTERNAL_INTERNALS) {
+    const oldest = set.values().next().value as T | undefined;
+    if (oldest !== undefined) {
+      set.delete(oldest);
+    }
+  }
+  set.add(value);
+}
+
 function beforeComponentRender(): void {
   dispatcherStack.push(clientInternals.H);
   setDispatcher(dispatcher);

package/src/refract/coreRenderer.ts

@@ -54,8 +54,12 @@ export function renderFiber(vnode: VNode, container: Node): void {
   };
   deletions = [];
   isRendering = true;
-  performWork(rootFiber);
-  isRendering = false;
+  try {
+    performWork(rootFiber);
+  } finally {
+    isRendering = false;
+    currentFiber = null;
+  }
   const committedDeletions = deletions.slice();
   commitRoot(rootFiber);
   clearAlternates(rootFiber);
@@ -90,6 +94,7 @@ function processWorkUnit(fiber: Fiber): boolean {
       if (!tryHandleRenderError(fiber, error)) throw error;
     } finally {
       runAfterComponentRenderHandlers(fiber);
+      currentFiber = null;
     }
   } else if (isFragment) {
     reconcileChildren(fiber, normalizeChildrenProp(fiber.props.children));
@@ -254,33 +259,57 @@ function getNextDomSibling(fiber: Fiber): Node | null {
 /** Collect all DOM nodes from a component/fragment fiber's subtree */
 function collectChildDomNodes(fiber: Fiber): Node[] {
   const nodes: Node[] = [];
-  function walk(f: Fiber | null): void {
-    while (f) {
-      if (isPortalFiber(f)) {
-        f = f.sibling;
-        continue;
-      }
-      if (f.dom) {
-        nodes.push(f.dom);
-      } else {
-        walk(f.child);
-      }
-      f = f.sibling;
+  const stack: Fiber[] = [];
+  const rootChildren: Fiber[] = [];
+  let child = fiber.child;
+  while (child) {
+    rootChildren.push(child);
+    child = child.sibling;
+  }
+  for (let i = rootChildren.length - 1; i >= 0; i--) {
+    stack.push(rootChildren[i]);
+  }
+
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      continue;
+    }
+    if (current.dom) {
+      nodes.push(current.dom);
+      continue;
+    }
+    const children: Fiber[] = [];
+    let next = current.child;
+    while (next) {
+      children.push(next);
+      next = next.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
     }
   }
-  walk(fiber.child);
   return nodes;
 }
 
 /** Get the first committed DOM node in a fiber subtree */
 function getFirstCommittedDom(fiber: Fiber): Node | null {
-  if (isPortalFiber(fiber)) return null;
-  if (fiber.dom && !(fiber.flags & PLACEMENT)) return fiber.dom;
-  let child = fiber.child;
-  while (child) {
-    const dom = getFirstCommittedDom(child);
-    if (dom) return dom;
-    child = child.sibling;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) continue;
+    if (current.dom && !(current.flags & PLACEMENT)) {
+      return current.dom;
+    }
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
   }
   return null;
 }
@@ -296,69 +325,74 @@ function commitRoot(rootFiber: Fiber): void {
 }
 
 function commitWork(fiber: Fiber): void {
-  if (isPortalFiber(fiber)) {
-    fiber.flags = 0;
-    if (fiber.child) commitWork(fiber.child);
-    if (fiber.sibling) commitWork(fiber.sibling);
-    return;
-  }
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    if (isPortalFiber(current)) {
+      current.flags = 0;
+      if (current.sibling) stack.push(current.sibling);
+      if (current.child) stack.push(current.child);
+      continue;
+    }
 
-  let parentFiber = fiber.parent;
-  while (parentFiber && !parentFiber.dom) {
-    parentFiber = parentFiber.parent;
-  }
-  const parentDom = parentFiber!.dom!;
-
-  if (fiber.flags & PLACEMENT) {
-    if (fiber.dom) {
-      const before = getNextDomSibling(fiber);
-      if (before) {
-        parentDom.insertBefore(fiber.dom, before);
-      } else {
-        parentDom.appendChild(fiber.dom);
-      }
-    } else {
-      // Component/fragment: move all child DOM nodes
-      const domNodes = collectChildDomNodes(fiber);
-      const before = getNextDomSibling(fiber);
-      for (const dom of domNodes) {
-        if (before) {
-          parentDom.insertBefore(dom, before);
+    let parentFiber = current.parent;
+    while (parentFiber && !parentFiber.dom) {
+      parentFiber = parentFiber.parent;
+    }
+    const parentDom = parentFiber?.dom;
+
+    if (parentDom) {
+      if (current.flags & PLACEMENT) {
+        if (current.dom) {
+          const before = getNextDomSibling(current);
+          if (before) {
+            parentDom.insertBefore(current.dom, before);
+          } else {
+            parentDom.appendChild(current.dom);
+          }
         } else {
-          parentDom.appendChild(dom);
+          // Component/fragment: move all child DOM nodes
+          const domNodes = collectChildDomNodes(current);
+          const before = getNextDomSibling(current);
+          for (const dom of domNodes) {
+            if (before) {
+              parentDom.insertBefore(dom, before);
+            } else {
+              parentDom.appendChild(dom);
+            }
+          }
+        }
+      } else if (current.flags & UPDATE && current.dom) {
+        if (current.type === "TEXT") {
+          const oldValue = current.alternate?.props.nodeValue;
+          if (oldValue !== current.props.nodeValue) {
+            current.dom.textContent = current.props.nodeValue as string;
+          }
+        } else {
+          applyProps(
+            current.dom as HTMLElement,
+            current.alternate?.props ?? {},
+            current.props,
+          );
         }
       }
     }
-  } else if (fiber.flags & UPDATE && fiber.dom) {
-    if (fiber.type === "TEXT") {
-      const oldValue = fiber.alternate?.props.nodeValue;
-      if (oldValue !== fiber.props.nodeValue) {
-        fiber.dom.textContent = fiber.props.nodeValue as string;
-      }
-    } else {
-      applyProps(
-        fiber.dom as HTMLElement,
-        fiber.alternate?.props ?? {},
-        fiber.props,
-      );
-    }
-  }
 
-  // Handle ref prop — only on mount or when ref changes (like React)
-  if (fiber.dom && fiber.props.ref) {
-    const oldRef = fiber.alternate?.props.ref;
-    if (fiber.flags & PLACEMENT || fiber.props.ref !== oldRef) {
-      if (oldRef && oldRef !== fiber.props.ref) {
-        setRef(oldRef, null);
+    // Handle ref prop — only on mount or when ref changes (like React)
+    if (current.dom && current.props.ref) {
+      const oldRef = current.alternate?.props.ref;
+      if (current.flags & PLACEMENT || current.props.ref !== oldRef) {
+        if (oldRef && oldRef !== current.props.ref) {
+          setRef(oldRef, null);
+        }
+        setRef(current.props.ref, current.dom);
       }
-      setRef(fiber.props.ref, fiber.dom);
     }
-  }
-
-  fiber.flags = 0;
 
-  if (fiber.child) commitWork(fiber.child);
-  if (fiber.sibling) commitWork(fiber.sibling);
+    current.flags = 0;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
+  }
 }
 
 function setRef(ref: unknown, value: Node | null): void {
@@ -373,41 +407,51 @@ function setRef(ref: unknown, value: Node | null): void {
  *  Alternates are only needed during reconciliation; retaining them
  *  creates an ever-growing chain of old fiber trees. */
 function clearAlternates(fiber: Fiber | null): void {
-  while (fiber) {
-    fiber.alternate = null;
-    if (fiber.child) clearAlternates(fiber.child);
-    fiber = fiber.sibling;
+  if (!fiber) return;
+  const stack: Fiber[] = [fiber];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    current.alternate = null;
+    if (current.sibling) stack.push(current.sibling);
+    if (current.child) stack.push(current.child);
   }
 }
 
 function commitDeletion(fiber: Fiber): void {
   runCleanups(fiber);
-  // Clear ref on unmount
-  if (fiber.dom && fiber.props.ref) {
-    setRef(fiber.props.ref, null);
-  }
-  if (isPortalFiber(fiber)) {
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  walkSubtree(fiber, (node) => {
+    if (node.dom && node.props.ref) {
+      setRef(node.props.ref, null);
     }
-  } else if (fiber.dom) {
-    fiber.dom.parentNode?.removeChild(fiber.dom);
-  } else if (fiber.child) {
-    // Fragment/component — delete children
-    let child: Fiber | null = fiber.child;
-    while (child) {
-      commitDeletion(child);
-      child = child.sibling;
+  });
+  walkSubtree(fiber, (node) => {
+    if (!isPortalFiber(node) && node.dom) {
+      node.dom.parentNode?.removeChild(node.dom);
     }
-  }
+  });
 }
 
 function runCleanups(fiber: Fiber): void {
-  runFiberCleanupHandlers(fiber);
-  if (fiber.child) runCleanups(fiber.child);
-  if (fiber.sibling) runCleanups(fiber.sibling);
+  walkSubtree(fiber, (node) => {
+    runFiberCleanupHandlers(node);
+  });
+}
+
+function walkSubtree(root: Fiber, visit: (fiber: Fiber) => void): void {
+  const stack: Fiber[] = [root];
+  while (stack.length > 0) {
+    const current = stack.pop()!;
+    visit(current);
+    const children: Fiber[] = [];
+    let child = current.child;
+    while (child) {
+      children.push(child);
+      child = child.sibling;
+    }
+    for (let i = children.length - 1; i >= 0; i--) {
+      stack.push(children[i]);
+    }
+  }
 }
 
 const pendingContainers = new Set<Node>();
@@ -473,8 +517,12 @@ function flushRenders(): void {
       };
       deletions = [];
       isRendering = true;
-      performWork(newRoot);
-      isRendering = false;
+      try {
+        performWork(newRoot);
+      } finally {
+        isRendering = false;
+        currentFiber = null;
+      }
       const committedDeletions = deletions.slice();
       commitRoot(newRoot);
       clearAlternates(newRoot);

package/src/refract/features/hooks.ts

@@ -36,9 +36,11 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   // Create a stable setter that is reused across renders (like React)
   if (!hook._setter) {
     hook._setter = (value: T | ((prev: T) => T)) => {
+      if (!hook._fiber) return;
       const action = typeof value === "function"
         ? value as (prev: T) => T
         : () => value;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as ((prev: T) => T)[]).push(action);
       scheduleRender(hook._fiber!);
     };
@@ -191,6 +193,8 @@ export function useReducer<S, A, I>(
   // Create stable dispatch (like React)
   if (!hook._dispatch) {
     hook._dispatch = (action: A) => {
+      if (!hook._fiber) return;
+      if (!hook.queue) hook.queue = [];
       (hook.queue as A[]).push(action);
       scheduleRender(hook._fiber!);
     };

package/src/refract/hooksRuntime.ts

@@ -33,6 +33,8 @@ function cleanupFiberEffects(fiber: Fiber): void {
   if (!fiber.hooks) return;
 
   for (const hook of fiber.hooks) {
+    hook.queue = undefined;
+    hook._fiber = undefined;
     const state = hook.state;
     if (!state || typeof state !== "object") continue;
     const effectState = state as { cleanup?: () => void; pending?: boolean };

package/tests/hooks.test.ts

@@ -71,6 +71,25 @@ describe("hooks", () => {
       expect(renderCount).toBe(2);
       expect(container.querySelector("span")!.textContent).toBe("3");
     });
+
+    it("ignores setState after unmount", async () => {
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => setCount(1)).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
   });
 
   describe("useEffect", () => {
@@ -269,5 +288,69 @@ describe("hooks", () => {
       await new Promise((r) => setTimeout(r, 10));
       expect(container.querySelector("span")!.textContent).toBe("2");
     });
+
+    it("ignores dispatch after unmount", async () => {
+      type Action = { type: "inc" };
+      let dispatch!: (action: Action) => void;
+      let renders = 0;
+      function Counter() {
+        const [count, d] = useReducer((state: number, action: Action) => {
+          if (action.type === "inc") return state + 1;
+          return state;
+        }, 0);
+        dispatch = d;
+        renders++;
+        return createElement("span", null, String(count));
+      }
+
+      render(createElement(Counter, null), container);
+      render(createElement("div", null, "gone"), container);
+
+      expect(() => dispatch({ type: "inc" })).not.toThrow();
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.textContent).toBe("gone");
+      expect(renders).toBe(1);
+    });
+  });
+
+  describe("cleanup scoping", () => {
+    it("only cleans up deleted subtree effects", async () => {
+      const leftCleanup = vi.fn();
+      const rightCleanup = vi.fn();
+      let setShowLeft!: (v: boolean) => void;
+
+      function Left() {
+        useEffect(() => leftCleanup, []);
+        return createElement("span", null, "left");
+      }
+
+      function Right() {
+        useEffect(() => rightCleanup, []);
+        return createElement("span", null, "right");
+      }
+
+      function App() {
+        const [showLeft, ss] = useState(true);
+        setShowLeft = ss;
+        return createElement(
+          "div",
+          null,
+          showLeft ? createElement(Left, { key: "left" }) : null,
+          createElement(Right, { key: "right" }),
+        );
+      }
+
+      render(createElement(App, null), container);
+      flushPassiveEffects();
+      expect(leftCleanup).toHaveBeenCalledTimes(0);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+
+      setShowLeft(false);
+      await new Promise((r) => setTimeout(r, 10));
+      flushPassiveEffects();
+
+      expect(leftCleanup).toHaveBeenCalledTimes(1);
+      expect(rightCleanup).toHaveBeenCalledTimes(0);
+    });
   });
 });