@ipxjs/refract 0.3.1

package/tests/keyed.test.ts

@@ -0,0 +1,172 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+import { useState } from "../src/refract/hooks.js";
+import type { Props } from "../src/refract/types.js";
+
+describe("keyed reconciliation", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("reorders keyed children without recreating DOM nodes", () => {
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "b" }, "B"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    const [spanA, spanB, spanC] = Array.from(div.children);
+
+    // Reverse order
+    render(
+      createElement("div", null,
+        createElement("span", { key: "c" }, "C"),
+        createElement("span", { key: "b" }, "B"),
+        createElement("span", { key: "a" }, "A"),
+      ),
+      container,
+    );
+
+    // DOM nodes should be reused (same references)
+    const children = Array.from(div.children);
+    expect(children[0]).toBe(spanC);
+    expect(children[1]).toBe(spanB);
+    expect(children[2]).toBe(spanA);
+  });
+
+  it("inserts a new keyed child", () => {
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    const spanA = div.children[0];
+    const spanC = div.children[1];
+
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "b" }, "B"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    expect(div.children).toHaveLength(3);
+    expect(div.children[0]).toBe(spanA);
+    expect(div.children[1].textContent).toBe("B");
+    expect(div.children[2]).toBe(spanC);
+  });
+
+  it("removes a keyed child", () => {
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "b" }, "B"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    const spanA = div.children[0];
+    const spanC = div.children[2];
+
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    expect(div.children).toHaveLength(2);
+    expect(div.children[0]).toBe(spanA);
+    expect(div.children[1]).toBe(spanC);
+  });
+
+  it("reorders keyed component children (shuffle)", async () => {
+    function Card(props: Props) {
+      return createElement("div", { className: "card" }, props.label as string);
+    }
+
+    let setItems!: (v: string[] | ((p: string[]) => string[])) => void;
+    function App() {
+      const [items, si] = useState(["A", "B", "C"]);
+      setItems = si;
+      return createElement(
+        "div",
+        { className: "gallery" },
+        ...items.map((label) =>
+          createElement(Card, { key: label, label }),
+        ),
+      );
+    }
+
+    render(createElement(App, null), container);
+    const gallery = container.querySelector(".gallery")!;
+    expect(gallery.children).toHaveLength(3);
+    expect(gallery.children[0].textContent).toBe("A");
+    expect(gallery.children[1].textContent).toBe("B");
+    expect(gallery.children[2].textContent).toBe("C");
+
+    const cardA = gallery.children[0];
+    const cardB = gallery.children[1];
+    const cardC = gallery.children[2];
+
+    // Reverse order (simulates shuffle)
+    setItems(["C", "B", "A"]);
+    await new Promise((r) => queueMicrotask(r));
+
+    expect(gallery.children).toHaveLength(3);
+    expect(gallery.children[0].textContent).toBe("C");
+    expect(gallery.children[1].textContent).toBe("B");
+    expect(gallery.children[2].textContent).toBe("A");
+
+    // DOM nodes should be reused
+    expect(gallery.children[0]).toBe(cardC);
+    expect(gallery.children[1]).toBe(cardB);
+    expect(gallery.children[2]).toBe(cardA);
+  });
+
+  it("handles shuffle (move to front)", () => {
+    render(
+      createElement("div", null,
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "b" }, "B"),
+        createElement("span", { key: "c" }, "C"),
+      ),
+      container,
+    );
+
+    const div = container.querySelector("div")!;
+    const spanC = div.children[2];
+
+    // Move C to front
+    render(
+      createElement("div", null,
+        createElement("span", { key: "c" }, "C"),
+        createElement("span", { key: "a" }, "A"),
+        createElement("span", { key: "b" }, "B"),
+      ),
+      container,
+    );
+
+    expect(div.children).toHaveLength(3);
+    expect(div.children[0]).toBe(spanC);
+    expect(div.children[0].textContent).toBe("C");
+    expect(div.children[1].textContent).toBe("A");
+    expect(div.children[2].textContent).toBe("B");
+  });
+});

package/tests/memo.test.ts

@@ -0,0 +1,132 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+import { memo } from "../src/refract/fiber.js";
+import { useState, createRef } from "../src/refract/hooks.js";
+
+describe("memo", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("skips re-render when props are shallowly equal", async () => {
+    let childRenderCount = 0;
+    const Child = memo((props: Record<string, unknown>) => {
+      childRenderCount++;
+      return createElement("span", null, props.text as string);
+    });
+
+    let setOther!: (v: number) => void;
+    function App() {
+      const [other, so] = useState(0);
+      setOther = so;
+      return createElement("div", null,
+        createElement(Child, { text: "fixed" }),
+        createElement("span", null, String(other)),
+      );
+    }
+
+    render(createElement(App, null), container);
+    expect(childRenderCount).toBe(1);
+
+    setOther(1);
+    await new Promise((r) => setTimeout(r, 10));
+    // Child should NOT re-render because text prop didn't change
+    expect(childRenderCount).toBe(1);
+  });
+
+  it("re-renders when props change", async () => {
+    let childRenderCount = 0;
+    const Child = memo((props: Record<string, unknown>) => {
+      childRenderCount++;
+      return createElement("span", null, props.text as string);
+    });
+
+    let setText!: (v: string) => void;
+    function App() {
+      const [text, st] = useState("hello");
+      setText = st;
+      return createElement("div", null,
+        createElement(Child, { text }),
+      );
+    }
+
+    render(createElement(App, null), container);
+    expect(childRenderCount).toBe(1);
+
+    setText("world");
+    await new Promise((r) => setTimeout(r, 10));
+    expect(childRenderCount).toBe(2);
+    expect(container.querySelector("span")!.textContent).toBe("world");
+  });
+
+  it("supports custom compare function", async () => {
+    let childRenderCount = 0;
+    const Child = memo(
+      (props: Record<string, unknown>) => {
+        childRenderCount++;
+        return createElement("span", null, String(props.value));
+      },
+      (a, b) => (a.value as number) % 2 === (b.value as number) % 2,
+    );
+
+    let setValue!: (v: number) => void;
+    function App() {
+      const [value, sv] = useState(0);
+      setValue = sv;
+      return createElement("div", null, createElement(Child, { value }));
+    }
+
+    render(createElement(App, null), container);
+    expect(childRenderCount).toBe(1);
+
+    // 0 -> 2, both even, should skip
+    setValue(2);
+    await new Promise((r) => setTimeout(r, 10));
+    expect(childRenderCount).toBe(1);
+
+    // 2 -> 3, even to odd, should re-render
+    setValue(3);
+    await new Promise((r) => setTimeout(r, 10));
+    expect(childRenderCount).toBe(2);
+  });
+});
+
+describe("refs", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("sets ref.current to DOM element", () => {
+    const ref = createRef<HTMLSpanElement>();
+    function App() {
+      return createElement("span", { ref }, "hello");
+    }
+    render(createElement(App, null), container);
+    expect(ref.current).toBe(container.querySelector("span"));
+  });
+
+  it("calls callback ref with DOM element", () => {
+    let node: Node | null = null;
+    function App() {
+      return createElement("span", { ref: (el: Node | null) => { node = el; } }, "hello");
+    }
+    render(createElement(App, null), container);
+    expect(node).toBe(container.querySelector("span"));
+  });
+
+  it("does not add ref as a DOM attribute", () => {
+    const ref = createRef();
+    function App() {
+      return createElement("div", { ref, className: "test" });
+    }
+    render(createElement(App, null), container);
+    const div = container.querySelector("div")!;
+    expect(div.hasAttribute("ref")).toBe(false);
+    expect(div.getAttribute("class")).toBe("test");
+  });
+});

package/tests/reconcile.test.ts

@@ -0,0 +1,106 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+
+describe("reconcile", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("updates props on re-render", () => {
+    render(createElement("img", { src: "old.jpg" }), container);
+    render(createElement("img", { src: "new.jpg" }), container);
+
+    const img = container.querySelector("img")!;
+    expect(img.getAttribute("src")).toBe("new.jpg");
+  });
+
+  it("replaces node when type changes", () => {
+    render(createElement("img", { src: "pic.jpg" }), container);
+    render(createElement("span", null, "text"), container);
+
+    expect(container.querySelector("img")).toBeNull();
+    expect(container.querySelector("span")).not.toBeNull();
+    expect(container.querySelector("span")!.textContent).toBe("text");
+  });
+
+  it("updates text content", () => {
+    render(createElement("span", null, "old"), container);
+    render(createElement("span", null, "new"), container);
+
+    expect(container.querySelector("span")!.textContent).toBe("new");
+  });
+
+  it("adds new children", () => {
+    render(
+      createElement("div", null, createElement("img", { src: "a.jpg" })),
+      container,
+    );
+    render(
+      createElement(
+        "div",
+        null,
+        createElement("img", { src: "a.jpg" }),
+        createElement("img", { src: "b.jpg" }),
+      ),
+      container,
+    );
+
+    expect(container.querySelector("div")!.querySelectorAll("img")).toHaveLength(2);
+  });
+
+  it("removes extra children", () => {
+    render(
+      createElement(
+        "div",
+        null,
+        createElement("img", { src: "a.jpg" }),
+        createElement("img", { src: "b.jpg" }),
+      ),
+      container,
+    );
+    render(
+      createElement("div", null, createElement("img", { src: "a.jpg" })),
+      container,
+    );
+
+    expect(container.querySelector("div")!.querySelectorAll("img")).toHaveLength(1);
+  });
+
+  it("removes old props that are no longer present", () => {
+    render(createElement("img", { src: "pic.jpg", alt: "photo" }), container);
+    render(createElement("img", { src: "pic.jpg" }), container);
+
+    const img = container.querySelector("img")!;
+    expect(img.getAttribute("alt")).toBeNull();
+  });
+
+  it("preserves the same DOM node across re-renders", () => {
+    render(createElement("img", { src: "old.jpg" }), container);
+    const imgBefore = container.querySelector("img")!;
+
+    render(createElement("img", { src: "new.jpg" }), container);
+    const imgAfter = container.querySelector("img")!;
+
+    expect(imgBefore).toBe(imgAfter);
+  });
+
+  it("removes old style properties that are no longer present", () => {
+    render(
+      createElement("div", { style: { color: "red", backgroundColor: "black" } }),
+      container,
+    );
+    const div = container.querySelector("div")!;
+    expect(div.style.color).toBe("red");
+    expect(div.style.backgroundColor).toBe("black");
+
+    render(
+      createElement("div", { style: { color: "blue" } }),
+      container,
+    );
+    expect(div.style.color).toBe("blue");
+    expect(div.style.backgroundColor).toBe("");
+  });
+});

package/tests/render.test.ts

@@ -0,0 +1,82 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { createElement } from "../src/refract/createElement.js";
+import { render } from "../src/refract/render.js";
+
+describe("render", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.createElement("div");
+  });
+
+  it("renders a single img element", () => {
+    const vnode = createElement("img", { src: "cat.jpg", alt: "A cat" });
+    render(vnode, container);
+
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    expect(img!.getAttribute("src")).toBe("cat.jpg");
+    expect(img!.getAttribute("alt")).toBe("A cat");
+  });
+
+  it("renders nested elements", () => {
+    const vnode = createElement(
+      "div",
+      { className: "gallery" },
+      createElement("img", { src: "a.jpg" }),
+      createElement("img", { src: "b.jpg" }),
+    );
+    render(vnode, container);
+
+    const div = container.querySelector("div");
+    expect(div).not.toBeNull();
+    expect(div!.getAttribute("class")).toBe("gallery");
+    expect(div!.querySelectorAll("img")).toHaveLength(2);
+  });
+
+  it("renders text nodes", () => {
+    const vnode = createElement("span", null, "Hello world");
+    render(vnode, container);
+
+    const span = container.querySelector("span");
+    expect(span).not.toBeNull();
+    expect(span!.textContent).toBe("Hello world");
+  });
+
+  it("renders functional components", () => {
+    const ImageCard = (props: Record<string, unknown>) =>
+      createElement(
+        "div",
+        { className: "card" },
+        createElement("img", { src: props.src as string }),
+        createElement("span", null, props.caption as string),
+      );
+
+    render(createElement(ImageCard, { src: "pic.jpg", caption: "Nice" }), container);
+
+    expect(container.querySelector("img")!.getAttribute("src")).toBe("pic.jpg");
+    expect(container.querySelector("span")!.textContent).toBe("Nice");
+  });
+
+  it("attaches event listeners", () => {
+    let clicked = false;
+    const vnode = createElement("div", { onClick: () => { clicked = true; } });
+    render(vnode, container);
+
+    const div = container.querySelector("div")!;
+    div.click();
+    expect(clicked).toBe(true);
+  });
+
+  it("blocks javascript: URLs on URL attributes", () => {
+    render(createElement("a", { href: "javascript:alert('xss')" }, "link"), container);
+    const link = container.querySelector("a")!;
+    expect(link.getAttribute("href")).toBeNull();
+  });
+
+  it("allows safe URLs on URL attributes", () => {
+    render(createElement("a", { href: "https://example.com" }, "link"), container);
+    const link = container.querySelector("a")!;
+    expect(link.getAttribute("href")).toBe("https://example.com");
+  });
+});

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react",
+    "jsxFactory": "createElement",
+    "jsxFragmentFactory": "Fragment",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "include": ["src", "demo", "tests"]
+}