@praxisjs/runtime 0.2.2 → 0.2.4

package/dist/__tests__/scope.test.js

@@ -0,0 +1,56 @@
+import { describe, it, expect, vi } from "vitest";
+import { Scope } from "../scope";
+describe("Scope", () => {
+    it("add() registers a cleanup fn that runs on dispose()", () => {
+        const scope = new Scope();
+        const cleanup = vi.fn();
+        scope.add(cleanup);
+        scope.dispose();
+        expect(cleanup).toHaveBeenCalledOnce();
+    });
+    it("dispose() runs all cleanups in order", () => {
+        const scope = new Scope();
+        const order = [];
+        scope.add(() => order.push(1));
+        scope.add(() => order.push(2));
+        scope.add(() => order.push(3));
+        scope.dispose();
+        expect(order).toEqual([1, 2, 3]);
+    });
+    it("dispose() clears cleanups — second dispose() is a no-op", () => {
+        const scope = new Scope();
+        const fn = vi.fn();
+        scope.add(fn);
+        scope.dispose();
+        scope.dispose();
+        expect(fn).toHaveBeenCalledOnce();
+    });
+    it("effect() registers a reactive effect and its cleanup", () => {
+        const scope = new Scope();
+        const ran = [];
+        scope.effect(() => {
+            ran.push(1);
+        });
+        expect(ran).toHaveLength(1); // runs immediately
+        scope.dispose();
+    });
+    it("fork() creates a child scope that disposes when parent disposes", () => {
+        const parent = new Scope();
+        const child = parent.fork();
+        const childCleanup = vi.fn();
+        child.add(childCleanup);
+        parent.dispose();
+        expect(childCleanup).toHaveBeenCalledOnce();
+    });
+    it("fork() child can be disposed independently before parent", () => {
+        const parent = new Scope();
+        const child = parent.fork();
+        const childFn = vi.fn();
+        child.add(childFn);
+        child.dispose();
+        expect(childFn).toHaveBeenCalledOnce();
+        // parent dispose should not throw even though child is already disposed
+        expect(() => { parent.dispose(); }).not.toThrow();
+    });
+});
+//# sourceMappingURL=scope.test.js.map

package/dist/__tests__/scope.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scope.test.js","sourceRoot":"","sources":["../../src/__tests__/scope.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisjs/runtime",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,9 +14,9 @@
     "typescript": "^5.9.3"
   },
   "dependencies": {
-    "@praxisjs/core": "0.4.0",
-    "@praxisjs/decorators": "0.4.1",
-    "@praxisjs/shared": "0.2.0"
+    "@praxisjs/core": "0.4.2",
+    "@praxisjs/shared": "0.2.0",
+    "@praxisjs/decorators": "0.4.3"
   },
   "scripts": {
     "build": "tsc",

package/src/__tests__/children.test.ts

@@ -0,0 +1,99 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+
+import { signal } from "@praxisjs/core/internal";
+
+import { mountChildren } from "../children";
+import { Scope } from "../scope";
+
+function container() {
+  return document.createElement("div");
+}
+
+describe("mountChildren", () => {
+  it("does nothing for null, undefined, or false", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, null, scope);
+    mountChildren(el, undefined, scope);
+    mountChildren(el, false, scope);
+    expect(el.childNodes.length).toBe(0);
+  });
+
+  it("appends a text node for a string", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, "hello", scope);
+    expect(el.textContent).toBe("hello");
+  });
+
+  it("appends a text node for a number", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, 42, scope);
+    expect(el.textContent).toBe("42");
+  });
+
+  it("appends a DOM node directly", () => {
+    const el = container();
+    const scope = new Scope();
+    const span = document.createElement("span");
+    mountChildren(el, span, scope);
+    expect(el.firstChild).toBe(span);
+  });
+
+  it("recursively mounts arrays", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, ["a", "b", "c"], scope);
+    expect(el.textContent).toBe("abc");
+  });
+
+  it("mounts a reactive function — updates when signal changes", () => {
+    const el = container();
+    const scope = new Scope();
+    const s = signal("first");
+    mountChildren(el, () => s(), scope);
+    expect(el.textContent).toBe("first");
+    s.set("second");
+    expect(el.textContent).toBe("second");
+    scope.dispose();
+  });
+
+  it("reactive children clean up old nodes on update", () => {
+    const el = container();
+    const scope = new Scope();
+    const s = signal<string | null>("visible");
+    mountChildren(el, () => s(), scope);
+    expect(el.textContent).toBe("visible");
+    s.set(null);
+    expect(el.textContent).toBe("");
+    scope.dispose();
+  });
+
+  it("reactive function returning an array of nodes renders all of them", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, () => ["x", "y", "z"], scope);
+    expect(el.textContent).toBe("xyz");
+    scope.dispose();
+  });
+
+  it("reactive function returning a Node renders it", () => {
+    const el = container();
+    const scope = new Scope();
+    const node = document.createElement("em");
+    node.textContent = "em";
+    mountChildren(el, () => node, scope);
+    expect(el.textContent).toBe("em");
+    scope.dispose();
+  });
+
+  it("reactive function returning a number renders it", () => {
+    const el = container();
+    const scope = new Scope();
+    mountChildren(el, () => 42, scope);
+    expect(el.textContent).toBe("42");
+    scope.dispose();
+  });
+});

package/src/__tests__/component.test.ts

@@ -0,0 +1,148 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+
+import { mountComponent } from "../component";
+import { Scope } from "../scope";
+import { StatefulComponent } from "@praxisjs/core";
+
+class SimpleComp extends StatefulComponent {
+  static __isComponent = true as const;
+  static __isStateless = false;
+  render() {
+    return document.createTextNode("hello");
+  }
+}
+
+class NullComp extends StatefulComponent {
+  static __isComponent = true as const;
+  static __isStateless = false;
+  render() { return null; }
+}
+
+class MultiComp extends StatefulComponent {
+  static __isComponent = true as const;
+  static __isStateless = false;
+  render() {
+    return [
+      document.createTextNode("a"),
+      document.createTextNode("b"),
+    ];
+  }
+}
+
+class ErrorComp extends StatefulComponent {
+  static __isComponent = true as const;
+  static __isStateless = false;
+  onError(_err: Error) {}
+  render(): never {
+    throw new Error("render error");
+  }
+}
+
+class LifecycleComp extends StatefulComponent {
+  static __isComponent = true as const;
+  static __isStateless = false;
+  onBeforeMount() {}
+  onMount() {}
+  onUnmount() {}
+  render() { return null; }
+}
+
+describe("mountComponent", () => {
+  it("returns an array of nodes", () => {
+    const scope = new Scope();
+    const nodes = mountComponent(SimpleComp, {}, scope);
+    expect(Array.isArray(nodes)).toBe(true);
+    expect(nodes.length).toBeGreaterThan(0);
+    scope.dispose();
+  });
+
+  it("wraps output with start/end comment anchors", () => {
+    const scope = new Scope();
+    const nodes = mountComponent(SimpleComp, {}, scope);
+    expect(nodes[0].nodeType).toBe(Node.COMMENT_NODE);
+    expect(nodes[nodes.length - 1].nodeType).toBe(Node.COMMENT_NODE);
+    scope.dispose();
+  });
+
+  it("mounts the rendered content between comments", () => {
+    const scope = new Scope();
+    const container = document.createElement("div");
+    const nodes = mountComponent(SimpleComp, {}, scope);
+    nodes.forEach((n) => container.appendChild(n));
+    expect(container.textContent).toContain("hello");
+    scope.dispose();
+  });
+
+  it("calls onBeforeMount before render", () => {
+    const scope = new Scope();
+    const order: string[] = [];
+    class OrderComp extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      onBeforeMount() { order.push("before"); }
+      render() {
+        order.push("render");
+        return null;
+      }
+    }
+    mountComponent(OrderComp, {}, scope);
+    expect(order).toEqual(["before", "render"]);
+    scope.dispose();
+  });
+
+  it("calls onMount asynchronously after mount", async () => {
+    const scope = new Scope();
+    const onMount = vi.spyOn(LifecycleComp.prototype, "onMount");
+    mountComponent(LifecycleComp, {}, scope);
+    expect(onMount).not.toHaveBeenCalled(); // not called synchronously
+    await Promise.resolve(); // flush microtask
+    expect(onMount).toHaveBeenCalled();
+    onMount.mockRestore();
+    scope.dispose();
+  });
+
+  it("calls onUnmount when scope is disposed", async () => {
+    const scope = new Scope();
+    const onUnmount = vi.spyOn(LifecycleComp.prototype, "onUnmount");
+    mountComponent(LifecycleComp, {}, scope);
+    await Promise.resolve();
+    scope.dispose();
+    expect(onUnmount).toHaveBeenCalled();
+    onUnmount.mockRestore();
+  });
+
+  it("calls onError when render throws", () => {
+    const scope = new Scope();
+    const onError = vi.spyOn(ErrorComp.prototype, "onError");
+    mountComponent(ErrorComp, {}, scope);
+    expect(onError).toHaveBeenCalledWith(expect.any(Error));
+    onError.mockRestore();
+    scope.dispose();
+  });
+
+  it("passes props to the component instance", () => {
+    let receivedProp: unknown;
+    class PropsComp extends StatefulComponent {
+      static __isComponent = true as const;
+      static __isStateless = false;
+      render() {
+        receivedProp = this.props.msg;
+        return null;
+      }
+    }
+    const scope = new Scope();
+    mountComponent(PropsComp, { msg: "hello" }, scope);
+    expect(receivedProp).toBe("hello");
+    scope.dispose();
+  });
+
+  it("mounts array of children", () => {
+    const scope = new Scope();
+    const container = document.createElement("div");
+    const nodes = mountComponent(MultiComp, {}, scope);
+    nodes.forEach((n) => container.appendChild(n));
+    expect(container.textContent).toBe("ab");
+    scope.dispose();
+  });
+});

package/src/__tests__/context.test.ts

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+
+import { runInScope, getCurrentScope } from "../context";
+import { Scope } from "../scope";
+
+describe("runInScope / getCurrentScope", () => {
+  it("getCurrentScope throws when called outside of a render context", () => {
+    expect(() => getCurrentScope()).toThrow("[PraxisJS]");
+  });
+
+  it("runInScope makes the scope available via getCurrentScope", () => {
+    const scope = new Scope();
+    let captured: Scope | null = null;
+    runInScope(scope, () => {
+      captured = getCurrentScope();
+    });
+    expect(captured).toBe(scope);
+  });
+
+  it("restores previous scope after runInScope exits", () => {
+    const outer = new Scope();
+    const inner = new Scope();
+    let innerCaptured: Scope | null = null;
+    let outerAfter: Scope | null = null;
+
+    runInScope(outer, () => {
+      runInScope(inner, () => {
+        innerCaptured = getCurrentScope();
+      });
+      outerAfter = getCurrentScope();
+    });
+
+    expect(innerCaptured).toBe(inner);
+    expect(outerAfter).toBe(outer);
+  });
+
+  it("restores null scope even when the callback throws", () => {
+    const scope = new Scope();
+    expect(() =>
+      runInScope(scope, () => {
+        throw new Error("boom");
+      }),
+    ).toThrow("boom");
+
+    expect(() => getCurrentScope()).toThrow("[PraxisJS]");
+  });
+
+  it("returns the callback's return value", () => {
+    const scope = new Scope();
+    const result = runInScope(scope, () => 42);
+    expect(result).toBe(42);
+  });
+});

package/src/__tests__/dom.test.ts

@@ -0,0 +1,202 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from "vitest";
+
+import { signal } from "@praxisjs/core/internal";
+
+import { createElement } from "../dom/create";
+import { addEvent } from "../dom/events";
+import { applyProp } from "../dom/props";
+import { Scope } from "../scope";
+
+
+// ── createElement ────────────────────────────────────────────────────────────
+
+describe("createElement", () => {
+  it("creates an HTMLElement for regular tags", () => {
+    const el = createElement("div");
+    expect(el).toBeInstanceOf(HTMLDivElement);
+    expect(el.tagName.toLowerCase()).toBe("div");
+  });
+
+  it("creates an SVGElement for svg tags", () => {
+    const el = createElement("svg");
+    expect(el).toBeInstanceOf(SVGElement);
+    expect(el.tagName.toLowerCase()).toBe("svg");
+  });
+
+  it("creates nested svg elements with the SVG namespace", () => {
+    const path = createElement("path");
+    expect(path.namespaceURI).toBe("http://www.w3.org/2000/svg");
+  });
+});
+
+// ── applyProp ────────────────────────────────────────────────────────────────
+
+describe("applyProp", () => {
+  it("sets class attribute", () => {
+    const el = document.createElement("div");
+    const scope = new Scope();
+    applyProp(el, "class", "foo bar", scope);
+    expect(el.getAttribute("class")).toBe("foo bar");
+  });
+
+  it("sets className as class attribute", () => {
+    const el = document.createElement("div");
+    const scope = new Scope();
+    applyProp(el, "className", "my-class", scope);
+    expect(el.getAttribute("class")).toBe("my-class");
+  });
+
+  it("removes class when value is null", () => {
+    const el = document.createElement("div");
+    el.setAttribute("class", "old");
+    const scope = new Scope();
+    applyProp(el, "class", null, scope);
+    expect(el.hasAttribute("class")).toBe(false);
+  });
+
+  it("sets style as string", () => {
+    const el = document.createElement("div");
+    const scope = new Scope();
+    applyProp(el, "style", "color: red;", scope);
+    expect(el.getAttribute("style")).toBe("color: red;");
+  });
+
+  it("sets style as object", () => {
+    const el = document.createElement("div") as HTMLElement;
+    const scope = new Scope();
+    applyProp(el, "style", { color: "blue" }, scope);
+    expect(el.style.color).toBe("blue");
+  });
+
+  it("sets boolean true as empty attribute", () => {
+    const el = document.createElement("input");
+    const scope = new Scope();
+    applyProp(el, "disabled", true, scope);
+    expect(el.hasAttribute("disabled")).toBe(true);
+  });
+
+  it("removes attribute when value is false", () => {
+    const el = document.createElement("input");
+    el.setAttribute("disabled", "");
+    const scope = new Scope();
+    applyProp(el, "disabled", false, scope);
+    expect(el.hasAttribute("disabled")).toBe(false);
+  });
+
+  it("sets value prop directly on element", () => {
+    const el = document.createElement("input");
+    const scope = new Scope();
+    applyProp(el, "value", "hello", scope);
+    expect(el.value).toBe("hello");
+  });
+
+  it("calls ref callback with the element", () => {
+    const el = document.createElement("span");
+    const scope = new Scope();
+    const ref = vi.fn();
+    applyProp(el, "ref", ref, scope);
+    expect(ref).toHaveBeenCalledWith(el);
+  });
+
+  it("skips 'children' and 'key' props", () => {
+    const el = document.createElement("div");
+    const scope = new Scope();
+    applyProp(el, "children", "should be ignored", scope);
+    applyProp(el, "key", "k1", scope);
+    expect(el.childNodes.length).toBe(0);
+    expect(el.hasAttribute("key")).toBe(false);
+  });
+
+  it("attaches event listener for onClick", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const handler = vi.fn();
+    applyProp(el, "onClick", handler, scope);
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(handler).toHaveBeenCalledOnce();
+  });
+
+  it("removes event listener on scope dispose", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const handler = vi.fn();
+    applyProp(el, "onClick", handler, scope);
+    scope.dispose();
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(handler).not.toHaveBeenCalled();
+  });
+
+  it("tracks reactive prop — updates when signal changes", () => {
+    const el = document.createElement("div");
+    const scope = new Scope();
+    const cls = signal("initial");
+    applyProp(el, "class", () => cls(), scope);
+    expect(el.getAttribute("class")).toBe("initial");
+    cls.set("updated");
+    expect(el.getAttribute("class")).toBe("updated");
+    scope.dispose();
+  });
+
+  it("normalizes htmlFor to for attribute", () => {
+    const label = document.createElement("label");
+    const scope = new Scope();
+    applyProp(label, "htmlFor", "my-input", scope);
+    expect(label.getAttribute("for")).toBe("my-input");
+  });
+
+  it("removes style attribute when value is null", () => {
+    const el = document.createElement("div");
+    el.setAttribute("style", "color: red;");
+    const scope = new Scope();
+    applyProp(el, "style", null, scope);
+    expect(el.hasAttribute("style")).toBe(false);
+  });
+
+  it("removes style attribute when value is undefined", () => {
+    const el = document.createElement("div");
+    el.setAttribute("style", "color: red;");
+    const scope = new Scope();
+    applyProp(el, "style", undefined, scope);
+    expect(el.hasAttribute("style")).toBe(false);
+  });
+
+  it("removes attribute when value is null for generic attr", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-x", "1");
+    const scope = new Scope();
+    applyProp(el, "data-x", null, scope);
+    expect(el.hasAttribute("data-x")).toBe(false);
+  });
+
+  it("removes attribute when value is undefined for generic attr", () => {
+    const el = document.createElement("div");
+    el.setAttribute("data-y", "1");
+    const scope = new Scope();
+    applyProp(el, "data-y", undefined, scope);
+    expect(el.hasAttribute("data-y")).toBe(false);
+  });
+});
+
+// ── addEvent ─────────────────────────────────────────────────────────────────
+
+describe("addEvent", () => {
+  it("adds event listener that fires on dispatch", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const fn = vi.fn();
+    addEvent(el, "click", fn, scope);
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(fn).toHaveBeenCalledOnce();
+  });
+
+  it("removes listener when scope is disposed", () => {
+    const el = document.createElement("button");
+    const scope = new Scope();
+    const fn = vi.fn();
+    addEvent(el, "click", fn, scope);
+    scope.dispose();
+    el.dispatchEvent(new MouseEvent("click"));
+    expect(fn).not.toHaveBeenCalled();
+  });
+});

package/src/__tests__/render.test.ts

@@ -0,0 +1,89 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from "vitest";
+
+import { signal } from "@praxisjs/core/internal";
+
+import { render, mountElement } from "../index";
+import { Scope } from "../scope";
+
+// ── mountElement ─────────────────────────────────────────────────────────────
+
+describe("mountElement", () => {
+  it("creates an element with the given tag", () => {
+    const scope = new Scope();
+    const el = mountElement("section", {}, scope);
+    expect(el.tagName.toLowerCase()).toBe("section");
+  });
+
+  it("applies static props", () => {
+    const scope = new Scope();
+    const el = mountElement("p", { id: "para", class: "text" }, scope) as HTMLElement;
+    expect(el.id).toBe("para");
+    expect(el.getAttribute("class")).toBe("text");
+  });
+
+  it("mounts string children", () => {
+    const scope = new Scope();
+    const el = mountElement("p", { children: "hello" }, scope);
+    expect(el.textContent).toBe("hello");
+  });
+
+  it("mounts reactive prop — updates when signal changes", () => {
+    const scope = new Scope();
+    const cls = signal("a");
+    const el = mountElement("div", { class: () => cls() }, scope);
+    expect(el.getAttribute("class")).toBe("a");
+    cls.set("b");
+    expect(el.getAttribute("class")).toBe("b");
+    scope.dispose();
+  });
+});
+
+// ── render ───────────────────────────────────────────────────────────────────
+
+describe("render", () => {
+  it("mounts content into container", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const scope = new Scope();
+    render(() => {
+      const el = mountElement("h1", { children: "Hello" }, scope);
+      return el;
+    }, container);
+
+    expect(container.textContent).toBe("Hello");
+    document.body.removeChild(container);
+  });
+
+  it("clears container on unmount", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+
+    const unmount = render(() => {
+      const scope = new Scope();
+      return mountElement("p", { children: "bye" }, scope);
+    }, container);
+
+    expect(container.textContent).toBe("bye");
+    unmount();
+    expect(container.innerHTML).toBe("");
+    document.body.removeChild(container);
+  });
+
+  it("reactive content re-renders on signal change", () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const text = signal("initial");
+
+    render(() => {
+      const scope = new Scope();
+      return mountElement("span", { children: () => text() }, scope);
+    }, container);
+
+    expect(container.textContent).toBe("initial");
+    text.set("updated");
+    expect(container.textContent).toBe("updated");
+    document.body.removeChild(container);
+  });
+});