@ipxjs/refract 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 James Polera
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,308 @@
+![](assets/lens-syntax-refract.svg "=x200")
+
+# Refract
+
+A minimal React-like virtual DOM library, written in TypeScript with split entrypoints
+so you can keep bundles small and targetetd.
+
+Refract implements the core ideas behind React in TypeScript
+- a virtual DOM
+- createElement
+- render
+- reconciliation
+- hooks
+- context
+- memo
+
+## LLM Disclosure
+This project is an experiment and uses code generated with both Claude Opus 4.6 and gpt-5.3-codex.
+
+## Features
+
+- **createElement / JSX** -- builds virtual DOM nodes from tags, props, and children
+- **Fragments** -- group children without extra DOM nodes
+- **render** -- mounts a VNode tree into a real DOM container
+- **Fiber-based reconciliation** -- keyed and positional diffing with minimal DOM patches
+- **Hooks** -- useState, useEffect, useRef, useMemo, useCallback, useReducer, useErrorBoundary
+- **Context API** -- createContext / Provider for dependency injection
+- **memo** -- skip re-renders when props are unchanged
+- **Refs** -- createRef and callback refs via the `ref` prop
+- **Error boundaries** -- catch and recover from render errors
+- **SVG support** -- automatic SVG namespace handling
+- **dangerouslySetInnerHTML** -- raw HTML injection with sanitizer defaults in `refract/full` and configurable `setHtmlSanitizer` override
+- **Automatic batching** -- state updates are batched via microtask queue
+- **DevTools hook support** -- emits commit/unmount snapshots to a global hook or explicit hook instance
+
+No JSX transform is required, but the library works with one. The tsconfig maps
+`jsxFactory` to `createElement` so JSX can be used if desired.
+
+## Project Structure
+
+```
+refract/
+  src/refract/
+    createElement.ts      -- VNode factory + Fragment symbol
+    coreRenderer.ts       -- render work loop + commit + batched updates
+    reconcile.ts          -- keyed + positional child diffing
+    dom.ts                -- DOM creation/prop patching + sanitizer hooks
+    renderCore.ts         -- minimal render() entrypoint used by `refract/core`
+    render.ts             -- full render() entrypoint (auto-enables security defaults)
+    hooksRuntime.ts       -- effect scheduling + cleanup lifecycle wiring
+    runtimeExtensions.ts  -- runtime plugin hooks (memo/devtools/effects/errors)
+    devtools.ts           -- optional devtools bridge + snapshot serialization
+    full.ts               -- full public API exports
+    core.ts               -- minimal public API exports
+    features/             -- feature modules (`hooks`, `context`, `memoRuntime`, `security`)
+  demo/                   -- image gallery demo app
+  tests/                  -- Vitest unit tests
+  benchmark/              -- Puppeteer benchmark: Refract entrypoint matrix vs React & Preact
+```
+
+## Getting Started
+
+```sh
+yarn install
+```
+
+Run the demo dev server:
+
+```sh
+yarn dev
+```
+
+Run the tests:
+
+```sh
+yarn test
+```
+
+## Entrypoints
+
+- `refract/core` -- minimal runtime surface (`createElement`, `Fragment`, `render`) with no default HTML sanitizer
+- `refract/full` -- complete API including hooks, context, memo, sanitizer defaults, and devtools integration
+- `refract` -- alias of `refract/full` for backward compatibility
+- Feature entrypoints for custom bundles: `refract/hooks`, `refract/context`, `refract/memo`, `refract/security`, `refract/devtools`
+
+## API
+
+### createElement(type, props, ...children)
+
+Creates a virtual DOM node. If `type` is a function, it is treated as a
+functional component and invoked during render/reconciliation.
+
+```ts
+import { createElement } from "refract";
+
+const vnode = createElement("div", { className: "card" },
+  createElement("img", { src: "photo.jpg", alt: "A photo" }),
+  createElement("span", null, "Caption text"),
+);
+```
+
+### render(vnode, container)
+
+Mounts a VNode tree into a DOM element. On subsequent calls with the same
+container, it reconciles against the previous tree instead of re-mounting.
+
+```ts
+import { render } from "refract";
+
+render(vnode, document.getElementById("app")!);
+```
+
+Reconciliation is internal and is triggered automatically by `render` on
+subsequent renders to the same container.
+
+### DevTools hook integration
+
+Refract emits commit and unmount events when a hook is present at
+`window.__REFRACT_DEVTOOLS_GLOBAL_HOOK__` (or `globalThis` in non-browser
+environments). You can also set the hook directly with `setDevtoolsHook`.
+
+```ts
+import { setDevtoolsHook } from "refract";
+
+setDevtoolsHook({
+  inject(renderer) {
+    console.log(renderer.name); // "refract"
+    return 1;
+  },
+  onCommitFiberRoot(rendererId, root) {
+    console.log(rendererId, root.current?.type);
+  },
+  onCommitFiberUnmount(rendererId, fiber) {
+    console.log(rendererId, fiber.type);
+  },
+});
+```
+
+## How It Works
+
+1. `createElement` normalizes children (flattening arrays, converting strings
+   and numbers to text VNodes, filtering out nulls and booleans). Component
+   functions are stored as VNode types and called later during reconciliation.
+
+2. `render` builds a fiber tree from the VNode tree. Each fiber holds a
+   reference to its DOM node, hooks, and alternate (previous render). Props are
+   applied as attributes, with special handling for `className`, `style`
+   objects, `ref`, and `on*` event listeners.
+
+3. Reconciliation diffs old and new children using keyed matching (when keys
+   are present) or positional matching. Fibers are flagged for placement,
+   update, or deletion. After the work phase, a commit phase applies all DOM
+   mutations in a single pass, followed by an effects phase that runs
+   useEffect callbacks.
+
+4. State updates from hooks are batched via `queueMicrotask` -- multiple
+   `setState` calls within the same synchronous block result in a single
+   re-render.
+
+## Benchmark
+
+The benchmark compares Refract entrypoint combinations against React 19 and
+Preact 10, all rendering the same image gallery app (6 cards + shuffle).
+Refract variants benchmarked:
+
+- `refract/core`
+- `refract/core` + `refract/hooks`
+- `refract/core` + `refract/context`
+- `refract/core` + `refract/memo`
+- `refract/core` + `refract/security`
+- `refract` (full entrypoint)
+
+All benchmark apps are built with Vite and served as static production bundles.
+Measurements are taken with Puppeteer (15 measured + 3 warmup runs per
+framework by default), with round-robin ordering, cache disabled, and external
+image requests blocked.
+
+### Bundle Size Snapshot
+
+The values below are from a local run on February 15, 2026.
+
+| Framework                  | JS bundle (raw) | JS bundle (gzip) |
+|---------------------------|----------------:|-----------------:|
+| Refract (`core`)          | 7.46 kB         | 2.93 kB          |
+| Refract (`core+hooks`)    | 8.75 kB         | 3.38 kB          |
+| Refract (`core+context`)  | 7.94 kB         | 3.15 kB          |
+| Refract (`core+memo`)     | 8.09 kB         | 3.15 kB          |
+| Refract (`core+security`) | 8.51 kB         | 3.29 kB          |
+| Refract (`refract`)       | 13.55 kB        | 5.04 kB          |
+| React                     | 189.74 kB       | 59.52 kB         |
+| Preact                    | 14.46 kB        | 5.95 kB          |
+
+Load-time metrics are machine-dependent, so the benchmark script prints a fresh
+per-run timing table (median, p95, min/max, sd) for every framework.
+
+From this snapshot, Refract `core` gzip JS is about 20.3x smaller than React,
+and the full `refract` entrypoint is about 11.8x smaller.
+
+### Component Combination Benchmarks (Vitest)
+
+`benchmark/components.bench.ts` runs 16 component combinations (`memo`,
+`context`, `fragment`, `keyed`) across two phases each (mount + reconcile).
+Higher `hz` is better.
+
+| Component usage profile | Mount (hz) | Mount vs base | Reconcile (hz) | Reconcile vs base |
+|-------------------------|------------|---------------|----------------|-------------------|
+| `base` | 5209.15 | baseline | 4432.98 | baseline |
+| `memo` | 5924.46 | +13.7% | 5367.20 | +21.1% |
+| `context` | 3457.71 | -33.6% | 5243.29 | +18.3% |
+| `fragment` | 5189.17 | -0.4% | 3964.90 | -10.6% |
+| `keyed` | 6084.45 | +16.8% | 5037.30 | +13.6% |
+| `memo+context` | 6113.94 | +17.4% | 5347.56 | +20.6% |
+| `memo+context+keyed` | 6040.74 | +16.0% | 5088.81 | +14.8% |
+
+In this run, `memo+context` was the fastest mount profile, while
+`memo` was the fastest reconcile profile.
+
+### Running the Benchmark
+
+Recommended:
+
+```sh
+# Standard benchmark (default: 15 measured + 3 warmup)
+make benchmark
+
+# Stress benchmark (default: 50 measured + 5 warmup)
+make bench-stress
+
+# CI benchmark preset (CI-oriented run counts + benchmark flags)
+make bench-ci
+
+# Component-combination microbenchmarks (32 cases)
+yarn bench:components
+```
+
+Custom run counts:
+
+```sh
+# Example: deeper stress run
+make bench-stress STRESS_RUNS=100 STRESS_WARMUP=10
+
+# Example: deeper CI run
+make bench-ci CI_RUNS=50 CI_WARMUP=5
+```
+
+## Feature Matrix
+
+How Refract compares to React and Preact:
+
+| Feature                        | Refract | React | Preact |
+|--------------------------------|---------|-------|--------|
+| **Core**                       |         |       |        |
+| Virtual DOM                    | Yes     | Yes   | Yes    |
+| createElement                  | Yes     | Yes   | Yes    |
+| Reconciliation / diffing       | Yes     | Yes   | Yes    |
+| Keyed reconciliation           | Yes     | Yes   | Yes    |
+| Fragments                      | Yes     | Yes   | Yes    |
+| JSX support                    | Yes     | Yes   | Yes    |
+| SVG support                    | Yes     | Yes   | Yes    |
+| **Components**                 |         |       |        |
+| Functional components          | Yes     | Yes   | Yes    |
+| Class components               | No      | Yes   | Yes    |
+| **Hooks**                      |         |       |        |
+| useState                       | Yes     | Yes   | Yes    |
+| useEffect                      | Yes     | Yes   | Yes    |
+| useLayoutEffect                | No      | Yes   | Yes    |
+| useRef                         | Yes     | Yes   | Yes    |
+| useMemo / useCallback          | Yes     | Yes   | Yes    |
+| useReducer                     | Yes     | Yes   | Yes    |
+| useContext                     | Yes     | Yes   | Yes    |
+| useId                          | No      | Yes   | Yes    |
+| useTransition / useDeferredValue | No    | Yes   | No     |
+| **State & Data Flow**          |         |       |        |
+| Built-in state management      | Yes     | Yes   | Yes    |
+| Context API                    | Yes     | Yes   | Yes    |
+| Refs (createRef / ref prop)    | Yes     | Yes   | Yes    |
+| forwardRef                     | No      | Yes   | Yes    |
+| **Rendering**                  |         |       |        |
+| Event handling                 | Yes     | Yes   | Yes    |
+| Style objects                  | Yes     | Yes   | Yes    |
+| className prop                 | Yes     | Yes   | Yes¹   |
+| dangerouslySetInnerHTML        | Yes     | Yes   | Yes    |
+| Portals                        | No      | Yes   | Yes    |
+| Suspense / lazy                | No      | Yes   | Yes²   |
+| Error boundaries               | Yes³    | Yes   | Yes    |
+| Server-side rendering          | No      | Yes   | Yes    |
+| Hydration                      | No      | Yes   | Yes    |
+| **Security**                   |         |       |        |
+| Default HTML sanitizer for `dangerouslySetInnerHTML` | Yes | No | No |
+| Configurable HTML sanitizer hook (`setHtmlSanitizer`) | Yes | No | No |
+| **Performance**                |         |       |        |
+| Fiber architecture             | Yes     | Yes   | No     |
+| Concurrent rendering           | No      | Yes   | No     |
+| Automatic batching             | Yes     | Yes   | Yes    |
+| memo / PureComponent           | Yes     | Yes   | Yes    |
+| **Ecosystem**                  |         |       |        |
+| DevTools                       | Basic (hook API) | Yes   | Yes    |
+| React compatibility layer      | N/A     | N/A   | Yes    |
+| **Bundle Size (gzip, JS)**     | ~2.9-5.0 kB⁴ | ~59.5 kB | ~6.0 kB |
+
+¹ Preact supports both `class` and `className`.
+² Preact has partial Suspense support via `preact/compat`.
+³ Refract uses the `useErrorBoundary` hook rather than class-based error boundaries.
+⁴ Refract size depends on entrypoint (`refract/core` vs `refract` full).
+
+## License
+
+MIT

package/assets/lens-syntax-refract.svg

@@ -0,0 +1,32 @@
+<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" stop-color="#00d2ff" />
+            <stop offset="100%" stop-color="#00ff99" />
+        </linearGradient>
+    </defs>
+
+    <!-- Large Outer Brackets (Pulled in) -->
+    <path d="M25 15L15 25V75L25 85" stroke="#444" stroke-width="2" fill="none"/>
+    <path d="M75 15L85 25V75L75 85" stroke="#444" stroke-width="2" fill="none"/>
+    
+    <!-- Connection Lines (Adjusted for narrower width) -->
+    <path d="M28 45H35" stroke="#333" stroke-width="1.5"/>
+    <path d="M72 45H65" stroke="#333" stroke-width="1.5"/>
+    
+    <!-- Lens/Focus Circle -->
+    <circle cx="50" cy="45" r="18" stroke="#333" stroke-width="1"/>
+    
+    <!-- Small Inner Brackets (The Core) -->
+    <path d="M45 37L42 40V50L45 53" stroke="#00d2ff" stroke-width="2" fill="none"/>
+    <path d="M55 37L58 40V50L55 53" stroke="#00ff99" stroke-width="2" fill="none"/>
+    
+    <!-- Text (Smaller and tighter) -->
+    <text x="50" y="78" 
+          font-family="system-ui, -apple-system, sans-serif" 
+          font-size="8" 
+          font-weight="700" 
+          letter-spacing="2" 
+          fill="url(#textGradient)" 
+          text-anchor="middle">REFRACT</text>
+</svg>

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@ipxjs/refract",
+  "version": "0.3.1",
+  "description": "A minimal React-like virtual DOM library focused on image rendering",
+  "type": "module",
+  "main": "src/refract/index.ts",
+  "exports": {
+    ".": "./src/refract/index.ts",
+    "./full": "./src/refract/full.ts",
+    "./core": "./src/refract/core.ts",
+    "./hooks": "./src/refract/features/hooks.ts",
+    "./context": "./src/refract/features/context.ts",
+    "./memo": "./src/refract/memo.ts",
+    "./security": "./src/refract/features/security.ts",
+    "./devtools": "./src/refract/devtools.ts"
+  },
+  "scripts": {
+    "dev": "vite demo",
+    "build": "vite build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "bench:components": "vitest bench --run benchmark/components.bench.ts"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@types/jsdom": "^27.0.0",
+    "jsdom": "^28.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  }
+}

package/src/refract/context.ts

@@ -0,0 +1,2 @@
+export type { Context } from "./features/context.js";
+export { createContext, useContext } from "./features/context.js";

package/src/refract/core.ts

@@ -0,0 +1,3 @@
+export { createElement, Fragment } from "./createElement.js";
+export { render } from "./renderCore.js";
+export type { VNode, Props, Component } from "./types.js";

package/src/refract/coreRenderer.ts

@@ -0,0 +1,291 @@
+import type { VNode, Fiber, Props } from "./types.js";
+import { PLACEMENT, UPDATE } from "./types.js";
+import { reconcileChildren } from "./reconcile.js";
+import { Fragment } from "./createElement.js";
+import { createDom, applyProps } from "./dom.js";
+import {
+  runAfterCommitHandlers,
+  runCommitHandlers,
+  runFiberCleanupHandlers,
+  shouldBailoutComponent,
+  tryHandleRenderError,
+} from "./runtimeExtensions.js";
+
+/** Module globals for hook system */
+export let currentFiber: Fiber | null = null;
+
+/** Store root fiber per container */
+const roots = new WeakMap<Node, Fiber>();
+let deletions: Fiber[] = [];
+
+export function pushDeletion(fiber: Fiber): void {
+  deletions.push(fiber);
+}
+
+/** Render a VNode tree into a container (entry point) */
+export function renderFiber(vnode: VNode, container: Node): void {
+  const oldRoot = roots.get(container) ?? null;
+
+  const rootFiber: Fiber = {
+    type: "div",
+    props: { children: [vnode] },
+    key: null,
+    dom: container,
+    parentDom: container,
+    parent: null,
+    child: null,
+    sibling: null,
+    hooks: null,
+    alternate: oldRoot,
+    flags: UPDATE,
+  };
+  deletions = [];
+  performWork(rootFiber);
+  const committedDeletions = deletions.slice();
+  commitRoot(rootFiber);
+  runAfterCommitHandlers();
+  roots.set(container, rootFiber);
+  runCommitHandlers(rootFiber, committedDeletions);
+}
+
+/** Depth-first work loop: call components, diff children */
+function performWork(fiber: Fiber): void {
+  const isComponent = typeof fiber.type === "function";
+  const isFragment = fiber.type === Fragment;
+
+  if (isComponent) {
+    if (fiber.alternate && fiber.flags === UPDATE && shouldBailoutComponent(fiber)) {
+      return advanceWork(fiber);
+    }
+
+    currentFiber = fiber;
+    fiber._hookIndex = 0;
+    if (!fiber.hooks) fiber.hooks = [];
+
+    const comp = fiber.type as (props: Props) => VNode;
+    try {
+      const children = [comp(fiber.props)];
+      reconcileChildren(fiber, children);
+    } catch (error) {
+      if (!tryHandleRenderError(fiber, error)) throw error;
+    }
+  } else if (isFragment) {
+    reconcileChildren(fiber, fiber.props.children ?? []);
+  } else {
+    if (!fiber.dom) {
+      fiber.dom = createDom(fiber);
+    }
+    // Skip children when dangerouslySetInnerHTML is used
+    if (!fiber.props.dangerouslySetInnerHTML) {
+      reconcileChildren(fiber, fiber.props.children ?? []);
+    }
+  }
+
+  // Traverse: child first, then sibling, then uncle
+  if (fiber.child) {
+    performWork(fiber.child);
+    return;
+  }
+
+  advanceWork(fiber);
+}
+
+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;
+  while (sib) {
+    // Skip any sibling that is itself being placed/moved
+    if (sib.flags & PLACEMENT) {
+      sib = sib.sibling;
+      continue;
+    }
+    if (sib.dom) return sib.dom;
+    if (sib.child) {
+      const childDom = getFirstCommittedDom(sib);
+      if (childDom) return childDom;
+    }
+    sib = sib.sibling;
+  }
+  return 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 (f.dom) {
+        nodes.push(f.dom);
+      } else {
+        walk(f.child);
+      }
+      f = f.sibling;
+    }
+  }
+  walk(fiber.child);
+  return nodes;
+}
+
+/** Get the first committed DOM node in a fiber subtree */
+function getFirstCommittedDom(fiber: Fiber): Node | 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;
+  }
+  return null;
+}
+
+/** Commit all DOM mutations */
+function commitRoot(rootFiber: Fiber): void {
+  for (const fiber of deletions) {
+    commitDeletion(fiber);
+  }
+  if (rootFiber.child) {
+    commitWork(rootFiber.child);
+  }
+}
+
+function commitWork(fiber: Fiber): void {
+  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);
+        } else {
+          parentDom.appendChild(dom);
+        }
+      }
+    }
+  } 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
+  if (fiber.dom && fiber.props.ref) {
+    setRef(fiber.props.ref, fiber.dom);
+  }
+
+  fiber.flags = 0;
+
+  if (fiber.child) commitWork(fiber.child);
+  if (fiber.sibling) commitWork(fiber.sibling);
+}
+
+function setRef(ref: unknown, value: Node | null): void {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref && typeof ref === "object" && "current" in ref) {
+    (ref as { current: unknown }).current = value;
+  }
+}
+
+function commitDeletion(fiber: Fiber): void {
+  runCleanups(fiber);
+  // Clear ref on unmount
+  if (fiber.dom && fiber.props.ref) {
+    setRef(fiber.props.ref, null);
+  }
+  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;
+    }
+  }
+}
+
+function runCleanups(fiber: Fiber): void {
+  runFiberCleanupHandlers(fiber);
+  if (fiber.child) runCleanups(fiber.child);
+  if (fiber.sibling) runCleanups(fiber.sibling);
+}
+
+const pendingContainers = new Set<Node>();
+let flushScheduled = false;
+
+export function scheduleRender(fiber: Fiber): void {
+  let root = fiber;
+  while (root.parent) {
+    root = root.parent;
+  }
+  pendingContainers.add(root.dom!);
+
+  if (!flushScheduled) {
+    flushScheduled = true;
+    queueMicrotask(flushRenders);
+  }
+}
+
+function flushRenders(): void {
+  flushScheduled = false;
+  for (const container of pendingContainers) {
+    const currentRoot = roots.get(container);
+    if (!currentRoot) continue;
+
+    const newRoot: Fiber = {
+      type: currentRoot.type,
+      props: currentRoot.props,
+      key: currentRoot.key,
+      dom: currentRoot.dom,
+      parentDom: currentRoot.parentDom,
+      parent: null,
+      child: null,
+      sibling: null,
+      hooks: null,
+      alternate: currentRoot,
+      flags: UPDATE,
+    };
+    deletions = [];
+    performWork(newRoot);
+    const committedDeletions = deletions.slice();
+    commitRoot(newRoot);
+    runAfterCommitHandlers();
+    roots.set(container, newRoot);
+    runCommitHandlers(newRoot, committedDeletions);
+  }
+  pendingContainers.clear();
+}