@ipxjs/refract 0.3.1

package/tests/devtools.test.ts

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+import {
+  DEVTOOLS_GLOBAL_HOOK,
+  setDevtoolsHook,
+  type RefractDevtoolsFiberSnapshot,
+  type RefractDevtoolsRootSnapshot,
+} from "../src/refract/devtools.js";
+
+describe("devtools", () => {
+  let container: HTMLDivElement;
+  const globalScope = globalThis as Record<string, unknown>;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+    setDevtoolsHook();
+    delete globalScope[DEVTOOLS_GLOBAL_HOOK];
+  });
+
+  afterEach(() => {
+    setDevtoolsHook();
+    delete globalScope[DEVTOOLS_GLOBAL_HOOK];
+  });
+
+  it("publishes commit and unmount snapshots through the global hook", () => {
+    const inject = vi.fn(() => 3);
+    const onCommitFiberRoot = vi.fn();
+    const onCommitFiberUnmount = vi.fn();
+
+    globalScope[DEVTOOLS_GLOBAL_HOOK] = {
+      inject,
+      onCommitFiberRoot,
+      onCommitFiberUnmount,
+    };
+
+    render(
+      createElement(
+        "div",
+        { id: "app" },
+        createElement("span", { id: "old" }, "before"),
+      ),
+      container,
+    );
+    render(
+      createElement(
+        "div",
+        { id: "app" },
+        createElement("p", { id: "new" }, "after"),
+      ),
+      container,
+    );
+
+    expect(inject).toHaveBeenCalledTimes(1);
+    expect(onCommitFiberRoot).toHaveBeenCalledTimes(2);
+    expect(onCommitFiberUnmount).toHaveBeenCalled();
+
+    const [, latestRoot] = onCommitFiberRoot.mock.calls[1] as [number, RefractDevtoolsRootSnapshot];
+    expect(latestRoot.current?.type).toBe("div");
+    expect(latestRoot.current?.children[0].type).toBe("p");
+    expect(latestRoot.current?.children[0].props.id).toBe("new");
+
+    const unmountSnapshots = onCommitFiberUnmount.mock.calls.map(
+      (call) => call[1] as RefractDevtoolsFiberSnapshot,
+    );
+    const removedSpan = unmountSnapshots.find((snapshot) => snapshot.type === "span");
+    expect(removedSpan?.props.id).toBe("old");
+  });
+
+  it("uses an explicitly configured hook when setDevtoolsHook is provided", () => {
+    const globalInject = vi.fn(() => 1);
+    globalScope[DEVTOOLS_GLOBAL_HOOK] = {
+      inject: globalInject,
+      onCommitFiberRoot: vi.fn(),
+    };
+
+    const explicitInject = vi.fn(() => 9);
+    const explicitCommit = vi.fn();
+    setDevtoolsHook({
+      inject: explicitInject,
+      onCommitFiberRoot: explicitCommit,
+    });
+
+    render(createElement("div", { className: "local" }), container);
+
+    expect(explicitInject).toHaveBeenCalledTimes(1);
+    expect(explicitCommit).toHaveBeenCalledTimes(1);
+    expect(globalInject).not.toHaveBeenCalled();
+  });
+});

package/tests/entrypoints.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from "vitest";
+
+describe("entrypoints", () => {
+  it("core exports only the minimal runtime surface", async () => {
+    vi.resetModules();
+    const core = await import("../src/refract/core.js") as Record<string, unknown>;
+
+    expect(typeof core.createElement).toBe("function");
+    expect(typeof core.render).toBe("function");
+    expect(core.useState).toBeUndefined();
+    expect(core.memo).toBeUndefined();
+    expect(core.setDevtoolsHook).toBeUndefined();
+  });
+
+  it("full exports extended APIs", async () => {
+    vi.resetModules();
+    const full = await import("../src/refract/full.js") as Record<string, unknown>;
+
+    expect(typeof full.createElement).toBe("function");
+    expect(typeof full.render).toBe("function");
+    expect(typeof full.useState).toBe("function");
+    expect(typeof full.memo).toBe("function");
+    expect(typeof full.setDevtoolsHook).toBe("function");
+  });
+
+  it("core render does not auto-enable the security sanitizer", async () => {
+    vi.resetModules();
+    const core = await import("../src/refract/core.js");
+    const container = document.createElement("div");
+
+    core.render(
+      core.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: "<a href=\"javascript:alert(1)\">x</a><script>evil()</script>",
+        },
+      }),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    expect(div.querySelector("script")).not.toBeNull();
+    expect(div.querySelector("a")!.getAttribute("href")).toBe("javascript:alert(1)");
+  });
+
+  it("full render enables sanitizer defaults", async () => {
+    vi.resetModules();
+    const full = await import("../src/refract/full.js");
+    const container = document.createElement("div");
+
+    full.render(
+      full.createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: "<a href=\"javascript:alert(1)\">x</a><script>evil()</script>",
+        },
+      }),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    expect(div.querySelector("script")).toBeNull();
+    expect(div.querySelector("a")!.getAttribute("href")).toBeNull();
+  });
+});

package/tests/fragments.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement, Fragment } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+
+describe("fragments", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("renders fragment children directly into parent", () => {
+    const vnode = createElement(
+      "div",
+      null,
+      createElement(Fragment as unknown as string, null,
+        createElement("span", null, "a"),
+        createElement("span", null, "b"),
+      ),
+    );
+    render(vnode, container);
+
+    const div = container.querySelector("div")!;
+    expect(div.children).toHaveLength(2);
+    expect(div.children[0].textContent).toBe("a");
+    expect(div.children[1].textContent).toBe("b");
+  });
+
+  it("renders nested fragments", () => {
+    const vnode = createElement(
+      "div",
+      null,
+      createElement(Fragment as unknown as string, null,
+        createElement(Fragment as unknown as string, null,
+          createElement("span", null, "deep"),
+        ),
+        createElement("span", null, "shallow"),
+      ),
+    );
+    render(vnode, container);
+
+    const div = container.querySelector("div")!;
+    expect(div.querySelectorAll("span")).toHaveLength(2);
+    expect(div.children[0].textContent).toBe("deep");
+    expect(div.children[1].textContent).toBe("shallow");
+  });
+
+  it("reconciles fragment children on re-render", () => {
+    render(
+      createElement("div", null,
+        createElement(Fragment as unknown as string, null,
+          createElement("span", null, "old"),
+        ),
+      ),
+      container,
+    );
+
+    render(
+      createElement("div", null,
+        createElement(Fragment as unknown as string, null,
+          createElement("span", null, "new"),
+        ),
+      ),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    expect(div.querySelector("span")!.textContent).toBe("new");
+  });
+
+  it("handles fragment with mixed children", () => {
+    const vnode = createElement(
+      "div",
+      null,
+      createElement("span", null, "before"),
+      createElement(Fragment as unknown as string, null,
+        createElement("span", null, "frag1"),
+        createElement("span", null, "frag2"),
+      ),
+      createElement("span", null, "after"),
+    );
+    render(vnode, container);
+
+    const div = container.querySelector("div")!;
+    const spans = div.querySelectorAll("span");
+    expect(spans).toHaveLength(4);
+    expect(spans[0].textContent).toBe("before");
+    expect(spans[1].textContent).toBe("frag1");
+    expect(spans[2].textContent).toBe("frag2");
+    expect(spans[3].textContent).toBe("after");
+  });
+});

package/tests/hooks.test.ts

@@ -0,0 +1,255 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+import { useState, useEffect, useRef, useMemo, useCallback, useReducer } from "../src/refract/hooks.js";
+
+describe("hooks", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  describe("useState", () => {
+    it("renders initial state", () => {
+      function Counter() {
+        const [count] = useState(0);
+        return createElement("span", null, String(count));
+      }
+      render(createElement(Counter, null), container);
+      expect(container.querySelector("span")!.textContent).toBe("0");
+    });
+
+    it("updates state on setState", async () => {
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        return createElement("span", null, String(count));
+      }
+      render(createElement(Counter, null), container);
+      expect(container.querySelector("span")!.textContent).toBe("0");
+
+      setCount(1);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.querySelector("span")!.textContent).toBe("1");
+    });
+
+    it("supports functional updates", async () => {
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        return createElement("span", null, String(count));
+      }
+      render(createElement(Counter, null), container);
+
+      setCount((prev) => prev + 1);
+      setCount((prev) => prev + 1);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.querySelector("span")!.textContent).toBe("2");
+    });
+
+    it("batches multiple setState calls", async () => {
+      let renderCount = 0;
+      let setCount!: (v: number | ((p: number) => number)) => void;
+      function Counter() {
+        const [count, sc] = useState(0);
+        setCount = sc;
+        renderCount++;
+        return createElement("span", null, String(count));
+      }
+      render(createElement(Counter, null), container);
+      expect(renderCount).toBe(1);
+
+      setCount((p) => p + 1);
+      setCount((p) => p + 1);
+      setCount((p) => p + 1);
+      await new Promise((r) => setTimeout(r, 10));
+      // Should have batched into one re-render
+      expect(renderCount).toBe(2);
+      expect(container.querySelector("span")!.textContent).toBe("3");
+    });
+  });
+
+  describe("useEffect", () => {
+    it("runs effect after render", () => {
+      const effectFn = vi.fn();
+      function App() {
+        useEffect(effectFn);
+        return createElement("div", null);
+      }
+      render(createElement(App, null), container);
+      expect(effectFn).toHaveBeenCalledTimes(1);
+    });
+
+    it("runs cleanup on re-render when deps change", async () => {
+      const cleanup = vi.fn();
+      let setValue!: (v: number) => void;
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        useEffect(() => {
+          return cleanup;
+        }, [value]);
+        return createElement("span", null, String(value));
+      }
+      render(createElement(App, null), container);
+      expect(cleanup).not.toHaveBeenCalled();
+
+      setValue(1);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(cleanup).toHaveBeenCalledTimes(1);
+    });
+
+    it("skips effect when deps unchanged", async () => {
+      const effectFn = vi.fn();
+      let setValue!: (v: number) => void;
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        useEffect(effectFn, []);
+        return createElement("span", null, String(value));
+      }
+      render(createElement(App, null), container);
+      expect(effectFn).toHaveBeenCalledTimes(1);
+
+      setValue(1);
+      await new Promise((r) => setTimeout(r, 10));
+      // Effect should NOT run again because deps [] didn't change
+      expect(effectFn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("useRef", () => {
+    it("returns stable ref object", async () => {
+      const refs: { current: number }[] = [];
+      let setValue!: (v: number) => void;
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        const ref = useRef(42);
+        refs.push(ref);
+        return createElement("span", null, String(value));
+      }
+      render(createElement(App, null), container);
+
+      setValue(1);
+      await new Promise((r) => setTimeout(r, 10));
+
+      expect(refs).toHaveLength(2);
+      expect(refs[0]).toBe(refs[1]); // Same object
+      expect(refs[0].current).toBe(42);
+    });
+
+    it("persists mutations across re-renders", async () => {
+      let setValue!: (v: number) => void;
+      let ref!: { current: number };
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        ref = useRef(0);
+        ref.current = value;
+        return createElement("span", null, String(ref.current));
+      }
+      render(createElement(App, null), container);
+      expect(ref.current).toBe(0);
+
+      setValue(5);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(ref.current).toBe(5);
+    });
+  });
+
+  describe("useMemo", () => {
+    it("memoizes value based on deps", async () => {
+      let computeCount = 0;
+      let setValue!: (v: number) => void;
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        const memoized = useMemo(() => {
+          computeCount++;
+          return value * 2;
+        }, [value]);
+        return createElement("span", null, String(memoized));
+      }
+      render(createElement(App, null), container);
+      expect(computeCount).toBe(1);
+      expect(container.querySelector("span")!.textContent).toBe("0");
+
+      setValue(5);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(computeCount).toBe(2);
+      expect(container.querySelector("span")!.textContent).toBe("10");
+    });
+
+    it("skips recomputation when deps unchanged", async () => {
+      let computeCount = 0;
+      let setOther!: (v: number) => void;
+      function App() {
+        const [other, so] = useState(0);
+        setOther = so;
+        const memoized = useMemo(() => {
+          computeCount++;
+          return "fixed";
+        }, []);
+        return createElement("span", null, `${memoized}-${other}`);
+      }
+      render(createElement(App, null), container);
+      expect(computeCount).toBe(1);
+
+      setOther(1);
+      await new Promise((r) => setTimeout(r, 10));
+      expect(computeCount).toBe(1); // Not recomputed
+    });
+  });
+
+  describe("useCallback", () => {
+    it("returns stable callback when deps unchanged", async () => {
+      const callbacks: (() => void)[] = [];
+      let setValue!: (v: number) => void;
+      function App() {
+        const [value, sv] = useState(0);
+        setValue = sv;
+        const cb = useCallback(() => {}, []);
+        callbacks.push(cb);
+        return createElement("span", null, String(value));
+      }
+      render(createElement(App, null), container);
+
+      setValue(1);
+      await new Promise((r) => setTimeout(r, 10));
+
+      expect(callbacks[0]).toBe(callbacks[1]);
+    });
+  });
+
+  describe("useReducer", () => {
+    it("dispatches actions through reducer", async () => {
+      type Action = { type: "inc" } | { type: "dec" };
+      let dispatch!: (action: Action) => void;
+      function Counter() {
+        const [count, d] = useReducer((state: number, action: Action) => {
+          if (action.type === "inc") return state + 1;
+          if (action.type === "dec") return state - 1;
+          return state;
+        }, 0);
+        dispatch = d;
+        return createElement("span", null, String(count));
+      }
+      render(createElement(Counter, null), container);
+      expect(container.querySelector("span")!.textContent).toBe("0");
+
+      dispatch({ type: "inc" });
+      dispatch({ type: "inc" });
+      dispatch({ type: "inc" });
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.querySelector("span")!.textContent).toBe("3");
+
+      dispatch({ type: "dec" });
+      await new Promise((r) => setTimeout(r, 10));
+      expect(container.querySelector("span")!.textContent).toBe("2");
+    });
+  });
+});

package/tests/innerhtml-errors.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+import { useState, useErrorBoundary } from "../src/refract/hooks.js";
+
+describe("dangerouslySetInnerHTML", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("sets innerHTML from __html prop", () => {
+    function App() {
+      return createElement("div", {
+        dangerouslySetInnerHTML: { __html: "<b>bold</b>" },
+      });
+    }
+    render(createElement(App, null), container);
+    expect(container.querySelector("div")!.innerHTML).toBe("<b>bold</b>");
+  });
+
+  it("skips children reconciliation when dangerouslySetInnerHTML is set", () => {
+    function App() {
+      return createElement("div", {
+        dangerouslySetInnerHTML: { __html: "<b>bold</b>" },
+      });
+    }
+    render(createElement(App, null), container);
+    // The innerHTML should be set, not treated as a regular child
+    const div = container.querySelector("div")!;
+    expect(div.querySelector("b")).not.toBeNull();
+    expect(div.querySelector("b")!.textContent).toBe("bold");
+  });
+
+  it("sanitizes dangerous tags and attributes", () => {
+    function App() {
+      return createElement("div", {
+        dangerouslySetInnerHTML: {
+          __html: `
+            <img src="x" onerror="alert('xss')" />
+            <a href="javascript:alert('xss')">click</a>
+            <script>alert('xss')</script>
+            <b>safe</b>
+          `,
+        },
+      });
+    }
+    render(createElement(App, null), container);
+    const div = container.querySelector("div")!;
+    expect(div.querySelector("script")).toBeNull();
+    expect(div.querySelector("img")!.getAttribute("onerror")).toBeNull();
+    expect(div.querySelector("a")!.getAttribute("href")).toBeNull();
+    expect(div.querySelector("b")!.textContent).toBe("safe");
+  });
+
+  it("throws when __html is not a string", () => {
+    function App() {
+      return createElement("div", {
+        dangerouslySetInnerHTML: { __html: 123 as unknown as string },
+      });
+    }
+    expect(() => render(createElement(App, null), container)).toThrow(
+      "dangerouslySetInnerHTML expects a string __html value",
+    );
+  });
+});
+
+describe("useErrorBoundary", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("catches errors from child components", async () => {
+    function Broken(): never {
+      throw new Error("boom");
+    }
+
+    function ErrorBoundary() {
+      const [error, resetError] = useErrorBoundary();
+      if (error) {
+        return createElement("span", null, "Error: " + (error as Error).message);
+      }
+      return createElement(Broken, null);
+    }
+
+    render(createElement(ErrorBoundary, null), container);
+    // Error boundary triggers async re-render
+    await new Promise((r) => setTimeout(r, 10));
+    expect(container.querySelector("span")!.textContent).toBe("Error: boom");
+  });
+
+  it("renders children normally when no error", () => {
+    function Good() {
+      return createElement("span", null, "ok");
+    }
+
+    function ErrorBoundary() {
+      const [error] = useErrorBoundary();
+      if (error) {
+        return createElement("span", null, "Error");
+      }
+      return createElement(Good, null);
+    }
+
+    render(createElement(ErrorBoundary, null), container);
+    expect(container.querySelector("span")!.textContent).toBe("ok");
+  });
+
+  it("recovers after error reset", async () => {
+    let shouldThrow = true;
+    let resetFn!: () => void;
+
+    function MaybeBreak() {
+      if (shouldThrow) throw new Error("boom");
+      return createElement("span", null, "recovered");
+    }
+
+    function ErrorBoundary() {
+      const [error, resetError] = useErrorBoundary();
+      resetFn = resetError;
+      if (error) {
+        return createElement("span", null, "caught");
+      }
+      return createElement(MaybeBreak, null);
+    }
+
+    render(createElement(ErrorBoundary, null), container);
+    await new Promise((r) => setTimeout(r, 10));
+    expect(container.querySelector("span")!.textContent).toBe("caught");
+
+    shouldThrow = false;
+    resetFn();
+    await new Promise((r) => setTimeout(r, 10));
+    expect(container.querySelector("span")!.textContent).toBe("recovered");
+  });
+});