@ipxjs/refract 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ipxjs/refract",
-  "version": "0.4.1",
+  "version": "0.5.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-jsx-runtime.ts

@@ -4,6 +4,19 @@ import type { VNode, VNodeType } from "../types.js";
 type JsxProps = Record<string, unknown> | null | undefined;
 type JsxChild = VNode | string | number | boolean | null | undefined | JsxChild[];
 
+// React compat: normalize props.children on the returned VNode so that
+// a single child is stored directly (not in an array).  Libraries like
+// MUI access `props.children.props` expecting a single React element.
+// Refract's core createElement always stores children as an array, but
+// the renderer's normalizeChildrenProp handles both formats, so this is safe.
+function normalizeVNodeChildren(vnode: VNode): VNode {
+  const c = vnode.props.children;
+  if (Array.isArray(c) && c.length === 1) {
+    vnode.props.children = c[0];
+  }
+  return vnode;
+}
+
 function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): ReturnType<typeof createElement> {
   const props = { ...(rawProps ?? {}) };
   if (key !== undefined) {
@@ -12,13 +25,15 @@ function createJsxElement(type: VNodeType, rawProps: JsxProps, key?: string): Re
   const children = props.children as JsxChild | JsxChild[] | undefined;
   delete props.children;
 
+  let vnode: VNode;
   if (children === undefined) {
-    return createElement(type, props);
-  }
-  if (Array.isArray(children)) {
-    return createElement(type, props, ...(children as JsxChild[]));
+    vnode = createElement(type, props);
+  } else if (Array.isArray(children)) {
+    vnode = createElement(type, props, ...(children as JsxChild[]));
+  } else {
+    vnode = createElement(type, props, children as JsxChild);
   }
-  return createElement(type, props, children as JsxChild);
+  return normalizeVNodeChildren(vnode);
 }
 
 export function jsx(type: VNodeType, props: JsxProps, key?: string): ReturnType<typeof createElement> {

package/src/refract/compat/react.ts

@@ -36,6 +36,7 @@ export function forwardRef<T, P extends Record<string, unknown> = Record<string,
     const { ref, ...rest } = props as Props & { ref?: { current: T | null } | ((value: T | null) => void) | null };
     return render(rest as unknown as P, ref ?? null);
   };
+  (ForwardRefComponent as any).displayName = `ForwardRef(${(render as any).name || 'anonymous'})`;
   return ForwardRefComponent;
 }
 
@@ -69,7 +70,13 @@ export function cloneElement(
   const nextChildren = normalizeChildren(mergedProps.children);
   delete mergedProps.children;
 
-  return createElement(element.type, mergedProps, ...(nextChildren as ElementChild[]));
+  const vnode = createElement(element.type, mergedProps, ...(nextChildren as ElementChild[]));
+  // React compat: single child should not be wrapped in array
+  const c = vnode.props.children;
+  if (Array.isArray(c) && c.length === 1) {
+    vnode.props.children = c[0];
+  }
+  return vnode;
 }
 
 function childrenToArray(children: unknown): unknown[] {

package/src/refract/coreRenderer.ts

@@ -17,6 +17,9 @@ import {
 /** Module globals for hook system */
 export let currentFiber: Fiber | null = null;
 
+/** True while performWork() is executing (render phase) */
+export let isRendering = false;
+
 /** Store root fiber per container */
 const roots = new WeakMap<Node, Fiber>();
 let deletions: Fiber[] = [];
@@ -43,7 +46,9 @@ export function renderFiber(vnode: VNode, container: Node): void {
     flags: UPDATE,
   };
   deletions = [];
+  isRendering = true;
   performWork(rootFiber);
+  isRendering = false;
   const committedDeletions = deletions.slice();
   commitRoot(rootFiber);
   runAfterCommitHandlers();
@@ -51,15 +56,16 @@ export function renderFiber(vnode: VNode, container: Node): void {
   runCommitHandlers(rootFiber, committedDeletions);
 }
 
-/** Depth-first work loop: call components, diff children */
-function performWork(fiber: Fiber): void {
+/** Process a single fiber: call component, diff children.
+ *  Returns true if bailed out (children should be skipped). */
+function processWorkUnit(fiber: Fiber): boolean {
   const isComponent = typeof fiber.type === "function";
   const isFragment = fiber.type === Fragment;
   const isPortal = fiber.type === Portal;
 
   if (isComponent) {
     if (fiber.alternate && fiber.flags === UPDATE && shouldBailoutComponent(fiber)) {
-      return advanceWork(fiber);
+      return true;
     }
 
     currentFiber = fiber;
@@ -95,13 +101,35 @@ function performWork(fiber: Fiber): void {
     }
   }
 
-  // Traverse: child first, then sibling, then uncle
-  if (fiber.child) {
-    performWork(fiber.child);
-    return;
-  }
+  return false;
+}
+
+/** Iterative depth-first work loop (avoids stack overflow on deep trees) */
+function performWork(rootFiber: Fiber): void {
+  let fiber: Fiber | null = rootFiber;
+
+  while (fiber) {
+    const bailedOut = processWorkUnit(fiber);
+
+    // Descend to child unless bailed out
+    if (!bailedOut && fiber.child) {
+      fiber = fiber.child;
+      continue;
+    }
 
-  advanceWork(fiber);
+    // No child or bailed out — walk up to find next sibling
+    if (fiber === rootFiber) break;
+    while (fiber) {
+      if (fiber.sibling) {
+        fiber = fiber.sibling;
+        break;
+      }
+      fiber = fiber.parent;
+      if (!fiber || fiber === rootFiber) {
+        fiber = null;
+      }
+    }
+  }
 }
 
 type RenderedChild = VNode | string | number | boolean | null | undefined | RenderedChild[];
@@ -139,17 +167,6 @@ function isPortalFiber(fiber: Fiber): boolean {
   return fiber.type === Portal;
 }
 
-function advanceWork(fiber: Fiber): void {
-  let next: Fiber | null = fiber;
-  while (next) {
-    if (next.sibling) {
-      performWork(next.sibling);
-      return;
-    }
-    next = next.parent;
-  }
-}
-
 /** Find the next DOM sibling for insertion (skips siblings being placed/moved) */
 function getNextDomSibling(fiber: Fiber): Node | null {
   let sib: Fiber | null = fiber.sibling;
@@ -266,9 +283,15 @@ function commitWork(fiber: Fiber): void {
     }
   }
 
-  // Handle ref prop
+  // Handle ref prop — only on mount or when ref changes (like React)
   if (fiber.dom && fiber.props.ref) {
-    setRef(fiber.props.ref, fiber.dom);
+    const oldRef = fiber.alternate?.props.ref;
+    if (fiber.flags & PLACEMENT || fiber.props.ref !== oldRef) {
+      if (oldRef && oldRef !== fiber.props.ref) {
+        setRef(oldRef, null);
+      }
+      setRef(fiber.props.ref, fiber.dom);
+    }
   }
 
   fiber.flags = 0;
@@ -331,12 +354,29 @@ export function scheduleRender(fiber: Fiber): void {
   }
 }
 
+const MAX_NESTED_RENDERS = 50;
+const renderCounts = new Map<Node, number>();
+
 function flushRenders(): void {
   flushScheduled = false;
-  for (const container of pendingContainers) {
+  // Snapshot and clear pendingContainers BEFORE processing,
+  // so effects that call scheduleRender during commit add to a fresh set.
+  const containers = [...pendingContainers];
+  pendingContainers.clear();
+  for (const container of containers) {
     const currentRoot = roots.get(container);
     if (!currentRoot) continue;
 
+    // Re-render guard: detect infinite loops (matches React's limit of 50)
+    const count = (renderCounts.get(container) ?? 0) + 1;
+    if (count > MAX_NESTED_RENDERS) {
+      renderCounts.delete(container);
+      throw new Error(
+        "Too many re-renders. Refract limits the number of renders to prevent an infinite loop.",
+      );
+    }
+    renderCounts.set(container, count);
+
     const newRoot: Fiber = {
       type: currentRoot.type,
       props: currentRoot.props,
@@ -351,14 +391,20 @@ function flushRenders(): void {
       flags: UPDATE,
     };
     deletions = [];
+    isRendering = true;
     performWork(newRoot);
+    isRendering = false;
     const committedDeletions = deletions.slice();
     commitRoot(newRoot);
     runAfterCommitHandlers();
     roots.set(container, newRoot);
     runCommitHandlers(newRoot, committedDeletions);
   }
-  pendingContainers.clear();
+
+  // Reset counters when no more pending renders (loop resolved)
+  if (pendingContainers.size === 0) {
+    renderCounts.clear();
+  }
 }
 
 export function flushPendingRenders(): void {

package/src/refract/dom.ts

@@ -120,7 +120,11 @@ export function applyProps(
         break;
       }
       case "className":
-        el.setAttribute("class", newProps[key] as string);
+        if (newProps[key] == null || newProps[key] === false) {
+          el.removeAttribute("class");
+        } else {
+          el.setAttribute("class", String(newProps[key]));
+        }
         break;
       case "style":
         if (typeof newProps[key] === "object" && newProps[key] !== null) {
@@ -148,11 +152,18 @@ export function applyProps(
           }
           el.addEventListener(event, getEventListener(newProps[key]));
         } else {
-          if (unsafeUrlPropChecker(key, newProps[key])) {
+          const value = newProps[key];
+          if (unsafeUrlPropChecker(key, value)) {
             el.removeAttribute(key);
             continue;
           }
-          el.setAttribute(key, String(newProps[key]));
+          if (value == null || value === false) {
+            el.removeAttribute(key);
+          } else if (value === true) {
+            el.setAttribute(key, "true");
+          } else {
+            el.setAttribute(key, String(value));
+          }
         }
         break;
     }

package/src/refract/features/context.ts

@@ -20,7 +20,11 @@ export function createContext<T>(defaultValue: T): Context<T> {
     fiber._contexts.set(id, props.value);
 
     const children = props.children ?? [];
-    return children.length === 1 ? children[0] : createElement(Fragment, null, ...children);
+    if (Array.isArray(children)) {
+      return children.length === 1 ? children[0] : createElement(Fragment, null, ...children);
+    }
+    // Single child (React compat: children may be a VNode, not an array)
+    return children;
   };
 
   return { Provider, _id: id, _defaultValue: defaultValue };

package/src/refract/features/hooks.ts

@@ -33,15 +33,21 @@ export function useState<T>(initial: T | (() => T)): [T, (value: T | ((prev: T)
   }
   hook.queue = [];
 
-  const setState = (value: T | ((prev: T) => T)) => {
-    const action = typeof value === "function"
-      ? value as (prev: T) => T
-      : () => value;
-    (hook.queue as ((prev: T) => T)[]).push(action);
-    scheduleRender(fiber);
-  };
+  // Create a stable setter that is reused across renders (like React)
+  if (!hook._setter) {
+    hook._setter = (value: T | ((prev: T) => T)) => {
+      const action = typeof value === "function"
+        ? value as (prev: T) => T
+        : () => value;
+      (hook.queue as ((prev: T) => T)[]).push(action);
+      scheduleRender(hook._fiber!);
+    };
+  }
+  // Update fiber reference each render so the setter always schedules
+  // against the current fiber (fibers are recreated on re-render)
+  hook._fiber = fiber;
 
-  return [hook.state as T, setState];
+  return [hook.state as T, hook._setter as (value: T | ((prev: T) => T)) => void];
 }
 
 type EffectCleanup = void | (() => void);
@@ -162,15 +168,33 @@ export function useReducer<S, A, I>(
   initialArg: S | I,
   init?: (arg: I) => S,
 ): [S, (action: A) => void] {
-  const [state, setState] = useState<S>(() => (
-    init
-      ? init(initialArg as I)
-      : initialArg as S
-  ));
-  const dispatch = (action: A) => {
-    setState((prev) => reducer(prev, action));
-  };
-  return [state, dispatch];
+  const hook = getHook();
+  const fiber = currentFiber!;
+
+  if (hook.queue === undefined) {
+    hook.state = init ? init(initialArg as I) : initialArg as S;
+    hook.queue = [];
+  }
+
+  // Process queued actions
+  for (const action of hook.queue as A[]) {
+    hook.state = reducer(hook.state as S, action);
+  }
+  hook.queue = [];
+
+  // Store current reducer ref (may change between renders)
+  hook._reducer = reducer;
+
+  // Create stable dispatch (like React)
+  if (!hook._dispatch) {
+    hook._dispatch = (action: A) => {
+      (hook.queue as A[]).push(action);
+      scheduleRender(hook._fiber!);
+    };
+  }
+  hook._fiber = fiber;
+
+  return [hook.state as S, hook._dispatch as (action: A) => void];
 }
 
 export function createRef<T = unknown>(): { current: T | null } {
@@ -229,11 +253,13 @@ export function useSyncExternalStore<T>(
   getSnapshot: () => T,
   _getServerSnapshot?: () => T,
 ): T {
-  const [snapshot, setSnapshot] = useState<T>(getSnapshot());
+  // Wrap in arrow functions to prevent useState from treating function-valued
+  // snapshots (e.g. zustand selectors returning store actions) as updaters.
+  const [snapshot, setSnapshot] = useState<T>(() => getSnapshot());
 
   useEffect(() => {
     const handleStoreChange = () => {
-      setSnapshot(getSnapshot());
+      setSnapshot(() => getSnapshot());
     };
     const unsubscribe = subscribe(handleStoreChange);
     handleStoreChange();

package/src/refract/types.ts

@@ -7,7 +7,7 @@ export type VNodeType = string | symbol | Component;
 /** Props passed to elements and components */
 export interface Props {
   [key: string]: unknown;
-  children?: VNode[];
+  children?: VNode[] | VNode;
   key?: string | number;
 }
 
@@ -27,6 +27,10 @@ export const DELETION = 4;
 export interface Hook {
   state: unknown;
   queue?: unknown[];
+  _setter?: Function;
+  _dispatch?: Function;
+  _reducer?: Function;
+  _fiber?: Fiber;
 }
 
 /** Internal fiber node — represents a mounted VNode */