@ipxjs/refract 0.3.1 → 0.4.0

package/src/refract/hooksRuntime.ts

@@ -7,13 +7,25 @@ import {
 } from "./runtimeExtensions.js";
 
 const fibersWithPendingEffects = new Set<Fiber>();
+const fibersWithPendingLayoutEffects = new Set<Fiber>();
+const fibersWithPendingInsertionEffects = new Set<Fiber>();
 
 export function markPendingEffects(fiber: Fiber): void {
   fibersWithPendingEffects.add(fiber);
 }
 
+export function markPendingLayoutEffects(fiber: Fiber): void {
+  fibersWithPendingLayoutEffects.add(fiber);
+}
+
+export function markPendingInsertionEffects(fiber: Fiber): void {
+  fibersWithPendingInsertionEffects.add(fiber);
+}
+
 function cleanupFiberEffects(fiber: Fiber): void {
   fibersWithPendingEffects.delete(fiber);
+  fibersWithPendingLayoutEffects.delete(fiber);
+  fibersWithPendingInsertionEffects.delete(fiber);
   if (!fiber.hooks) return;
 
   for (const hook of fiber.hooks) {
@@ -25,8 +37,8 @@ function cleanupFiberEffects(fiber: Fiber): void {
   }
 }
 
-function runPendingEffects(): void {
-  for (const fiber of fibersWithPendingEffects) {
+function runPendingEffectsFor(fibers: Set<Fiber>): void {
+  for (const fiber of fibers) {
     if (!fiber.hooks) continue;
 
     for (const hook of fiber.hooks) {
@@ -42,7 +54,14 @@ function runPendingEffects(): void {
       }
     }
   }
-  fibersWithPendingEffects.clear();
+  fibers.clear();
+}
+
+function runPendingEffects(): void {
+  // run in insertion -> layout -> passive order
+  runPendingEffectsFor(fibersWithPendingInsertionEffects);
+  runPendingEffectsFor(fibersWithPendingLayoutEffects);
+  runPendingEffectsFor(fibersWithPendingEffects);
 }
 
 function handleErrorBoundary(fiber: Fiber, error: unknown): boolean {

package/src/refract/portal.ts

@@ -0,0 +1,18 @@
+import { createElement } from "./createElement.js";
+import type { VNode } from "./types.js";
+
+export const Portal = Symbol.for("refract.portal");
+
+export type PortalChild = VNode | string | number | boolean | null | undefined | PortalChild[];
+
+export function createPortal(
+  children: PortalChild,
+  container: Node,
+  key?: string | number | null,
+): VNode {
+  const props: Record<string, unknown> = { container };
+  if (key != null) {
+    props.key = key;
+  }
+  return createElement(Portal, props, children);
+}

package/src/refract/runtimeExtensions.ts

@@ -5,12 +5,16 @@ type AfterCommitHandler = () => void;
 type RenderErrorHandler = (fiber: Fiber, error: unknown) => boolean;
 type CommitHandler = (rootFiber: Fiber, deletions: Fiber[]) => void;
 type ComponentBailoutHandler = (fiber: Fiber) => boolean;
+type BeforeComponentRenderHandler = (fiber: Fiber) => void;
+type AfterComponentRenderHandler = (fiber: Fiber) => void;
 
 const fiberCleanupHandlers = new Set<FiberCleanupHandler>();
 const afterCommitHandlers = new Set<AfterCommitHandler>();
 const renderErrorHandlers = new Set<RenderErrorHandler>();
 const commitHandlers = new Set<CommitHandler>();
 const componentBailoutHandlers = new Set<ComponentBailoutHandler>();
+const beforeComponentRenderHandlers = new Set<BeforeComponentRenderHandler>();
+const afterComponentRenderHandlers = new Set<AfterComponentRenderHandler>();
 
 function makeUnregister<T>(set: Set<T>, value: T): () => void {
   return () => {
@@ -43,6 +47,16 @@ export function registerComponentBailoutHandler(handler: ComponentBailoutHandler
   return makeUnregister(componentBailoutHandlers, handler);
 }
 
+export function registerBeforeComponentRenderHandler(handler: BeforeComponentRenderHandler): () => void {
+  beforeComponentRenderHandlers.add(handler);
+  return makeUnregister(beforeComponentRenderHandlers, handler);
+}
+
+export function registerAfterComponentRenderHandler(handler: AfterComponentRenderHandler): () => void {
+  afterComponentRenderHandlers.add(handler);
+  return makeUnregister(afterComponentRenderHandlers, handler);
+}
+
 export function runFiberCleanupHandlers(fiber: Fiber): void {
   for (const handler of fiberCleanupHandlers) {
     handler(fiber);
@@ -78,3 +92,15 @@ export function shouldBailoutComponent(fiber: Fiber): boolean {
   }
   return false;
 }
+
+export function runBeforeComponentRenderHandlers(fiber: Fiber): void {
+  for (const handler of beforeComponentRenderHandlers) {
+    handler(fiber);
+  }
+}
+
+export function runAfterComponentRenderHandlers(fiber: Fiber): void {
+  for (const handler of afterComponentRenderHandlers) {
+    handler(fiber);
+  }
+}

package/tests/compat.test.ts

@@ -0,0 +1,177 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import * as ReactCompat from "../src/refract/compat/react.js";
+import { createPortal, flushSync, unstable_batchedUpdates } from "../src/refract/compat/react-dom.js";
+import { createRoot } from "../src/refract/compat/react-dom-client.js";
+import { Fragment, jsx, jsxs } from "../src/refract/compat/react-jsx-runtime.js";
+
+function waitForRender(): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+describe("react compat", () => {
+  let container: HTMLDivElement;
+  let portalContainer: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    portalContainer = document.createElement("div");
+  });
+
+  it("supports forwardRef to DOM refs", () => {
+    const root = createRoot(container);
+    const ref = ReactCompat.createRef<HTMLButtonElement>();
+
+    const Button = ReactCompat.forwardRef<HTMLButtonElement, { id: string }>((props, forwardedRef) =>
+      ReactCompat.createElement("button", { id: props.id, ref: forwardedRef }, "Click"),
+    );
+
+    root.render(ReactCompat.createElement(Button, { id: "btn", ref }));
+
+    const button = container.querySelector("button");
+    expect(button).not.toBeNull();
+    expect(ref.current).toBe(button);
+  });
+
+  it("provides stable useId values across re-renders", async () => {
+    const root = createRoot(container);
+    const ids: string[] = [];
+    let setCount!: (value: number) => void;
+
+    function App() {
+      const [count, set] = ReactCompat.useState(0);
+      const id = ReactCompat.useId();
+      setCount = set;
+      ids.push(id);
+      return ReactCompat.createElement("span", { id }, String(count));
+    }
+
+    root.render(ReactCompat.createElement(App, null));
+    setCount(1);
+    await waitForRender();
+
+    expect(ids).toHaveLength(2);
+    expect(ids[0]).toBe(ids[1]);
+    expect(container.querySelector("span")!.id).toBe(ids[1]);
+  });
+
+  it("runs insertion/layout/passive effects in commit order", () => {
+    const root = createRoot(container);
+    const calls: string[] = [];
+
+    function App() {
+      ReactCompat.useInsertionEffect(() => {
+        calls.push("insertion");
+      }, []);
+      ReactCompat.useLayoutEffect(() => {
+        calls.push("layout");
+      }, []);
+      ReactCompat.useEffect(() => {
+        calls.push("effect");
+      }, []);
+      return ReactCompat.createElement("div", null);
+    }
+
+    root.render(ReactCompat.createElement(App, null));
+    expect(calls).toEqual(["insertion", "layout", "effect"]);
+  });
+
+  it("renders portals into target containers and cleans them up on unmount", () => {
+    const root = createRoot(container);
+
+    function App() {
+      return createPortal(
+        ReactCompat.createElement("span", { id: "in-portal" }, "Portal"),
+        portalContainer,
+      );
+    }
+
+    root.render(ReactCompat.createElement(App, null));
+    expect(portalContainer.querySelector("#in-portal")!.textContent).toBe("Portal");
+    expect(container.querySelector("#in-portal")).toBeNull();
+
+    root.unmount();
+    expect(portalContainer.querySelector("#in-portal")).toBeNull();
+  });
+
+  it("flushSync forces scheduled updates to commit synchronously", () => {
+    const root = createRoot(container);
+    let setCount!: (value: number) => void;
+
+    function Counter() {
+      const [count, set] = ReactCompat.useState(0);
+      setCount = set;
+      return ReactCompat.createElement("span", null, String(count));
+    }
+
+    root.render(ReactCompat.createElement(Counter, null));
+    setCount(1);
+    expect(container.querySelector("span")!.textContent).toBe("0");
+
+    flushSync(() => {});
+    expect(container.querySelector("span")!.textContent).toBe("1");
+  });
+
+  it("cloneElement merges props and replaces children", () => {
+    const root = createRoot(container);
+    const base = ReactCompat.createElement("div", { id: "base", className: "old" }, "one");
+    const cloned = ReactCompat.cloneElement(base, { id: "next", className: "new" }, "two");
+
+    root.render(cloned);
+    const div = container.querySelector("div")!;
+    expect(div.id).toBe("next");
+    expect(div.className).toBe("new");
+    expect(div.textContent).toBe("two");
+  });
+
+  it("supports React.Children helpers", () => {
+    const children = [
+      ReactCompat.createElement("span", { key: "a" }, "A"),
+      null,
+      false,
+      ReactCompat.createElement("span", { key: "b" }, "B"),
+    ];
+
+    expect(ReactCompat.Children.count(children)).toBe(2);
+    expect(ReactCompat.Children.toArray(children)).toHaveLength(2);
+    expect(ReactCompat.Children.map(children, (child) => child)).toHaveLength(2);
+    expect(() => ReactCompat.Children.only(children)).toThrow();
+    expect(ReactCompat.Children.only(ReactCompat.createElement("span", null, "only"))).toBeTruthy();
+  });
+
+  it("exposes batched updates helper", () => {
+    const result = unstable_batchedUpdates(() => 42);
+    expect(result).toBe(42);
+  });
+
+  it("supports jsx runtime factories", () => {
+    const root = createRoot(container);
+    const vnode = jsxs("div", {
+      id: "jsx-root",
+      children: [
+        jsx("span", { children: "a" }),
+        jsx(Fragment, { children: jsx("span", { children: "b" }) }),
+      ],
+    });
+    root.render(vnode);
+    expect(container.querySelector("#jsx-root")!.textContent).toBe("ab");
+  });
+
+  it("supports components that return null or arrays", () => {
+    const root = createRoot(container);
+    const Empty = (() => null) as unknown as (
+      props: Record<string, unknown>,
+    ) => ReturnType<typeof ReactCompat.createElement>;
+    const Pair = (() => [
+      ReactCompat.createElement("span", { key: "a" }, "A"),
+      ReactCompat.createElement("span", { key: "b" }, "B"),
+    ]) as unknown as (
+      props: Record<string, unknown>,
+    ) => ReturnType<typeof ReactCompat.createElement>;
+
+    root.render(ReactCompat.createElement(Empty, null));
+    expect(container.innerHTML).toBe("");
+
+    root.render(ReactCompat.createElement(Pair, null));
+    expect(container.textContent).toBe("AB");
+  });
+});

package/tests/entrypoints.test.ts

@@ -23,6 +23,24 @@ describe("entrypoints", () => {
     expect(typeof full.setDevtoolsHook).toBe("function");
   });
 
+  it("compat entrypoints are opt-in and expose React-style surfaces", async () => {
+    vi.resetModules();
+    const reactCompat = await import("../src/refract/compat/react.js") as Record<string, unknown>;
+    const reactDomCompat = await import("../src/refract/compat/react-dom.js") as Record<string, unknown>;
+    const reactDomClientCompat = await import("../src/refract/compat/react-dom-client.js") as Record<string, unknown>;
+
+    expect(typeof reactCompat.createElement).toBe("function");
+    expect(typeof reactCompat.forwardRef).toBe("function");
+    expect(typeof reactCompat.useLayoutEffect).toBe("function");
+    expect(typeof reactCompat.useId).toBe("function");
+
+    expect(typeof reactDomCompat.createPortal).toBe("function");
+    expect(typeof reactDomCompat.unstable_batchedUpdates).toBe("function");
+    expect(typeof reactDomCompat.flushSync).toBe("function");
+
+    expect(typeof reactDomClientCompat.createRoot).toBe("function");
+  });
+
   it("core render does not auto-enable the security sanitizer", async () => {
     vi.resetModules();
     const core = await import("../src/refract/core.js");

package/tests/keyed.test.ts

@@ -127,7 +127,7 @@ describe("keyed reconciliation", () => {
 
     // Reverse order (simulates shuffle)
     setItems(["C", "B", "A"]);
-    await new Promise((r) => queueMicrotask(r));
+    await new Promise<void>((resolve) => queueMicrotask(() => resolve()));
 
     expect(gallery.children).toHaveLength(3);
     expect(gallery.children[0].textContent).toBe("C");

package/tests/react-compat-shims.d.ts

@@ -0,0 +1,4 @@
+declare module "react";
+declare module "react-dom/client";
+declare module "react-router-dom";
+declare module "react-router-dom/dist/index.mjs";

package/tests/react-router-smoke.test.ts

@@ -0,0 +1,72 @@
+import { createRequire } from "node:module";
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import {
+  Link,
+  MemoryRouter,
+  Route,
+  Routes,
+} from "react-router-dom";
+import { registerExternalReactModule } from "../src/refract/compat/react.js";
+
+const require = createRequire(import.meta.url);
+const externalReact = require("react") as typeof React;
+registerExternalReactModule(externalReact);
+
+describe("react-router-dom compatibility smoke", () => {
+  it("resolves react aliases to refract compat entrypoints", () => {
+    expect(typeof React.createElement).toBe("function");
+    expect(typeof React.forwardRef).toBe("function");
+    expect(typeof createRoot).toBe("function");
+  });
+
+  it("constructs a router tree with compat createElement", () => {
+    const tree = React.createElement(
+      MemoryRouter,
+      { initialEntries: ["/"] },
+      React.createElement(
+        "div",
+        null,
+        React.createElement(Link, { to: "/about", id: "about-link" }, "About"),
+        React.createElement(
+          Routes,
+          null,
+          React.createElement(Route, { path: "/", element: React.createElement("h1", null, "Home") }),
+          React.createElement(Route, { path: "/about", element: React.createElement("h1", null, "About") }),
+        ),
+      ),
+    );
+    expect(tree.type).toBe(MemoryRouter);
+    expect((tree.props.children as unknown[]).length).toBe(1);
+  });
+
+  it("supports hook dispatcher bridging for externally-resolved React", async () => {
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    let setCount!: (value: number) => void;
+
+    function Counter() {
+      const [count, set] = externalReact.useState(0);
+      setCount = set;
+      return React.createElement("span", { id: "count" }, String(count));
+    }
+
+    function App() {
+      return React.createElement(
+        "div",
+        null,
+        React.createElement(Counter, null),
+      );
+    }
+
+    root.render(React.createElement(App, null));
+    expect(container.querySelector("#count")?.textContent).toBe("0");
+
+    setCount(1);
+
+    await new Promise<void>((resolve) => queueMicrotask(() => resolve()));
+
+    expect(container.querySelector("#count")?.textContent).toBe("1");
+  });
+});