@sigil-dev/runtime 0.9.5 → 0.9.7

package/README.md

@@ -1,140 +1,140 @@
-# @sigil-dev/runtime
-
-Signals-based reactivity for the DOM using direct mutations.
-
-```bash
-bun add @sigil-dev/runtime
-```
-
-## What it is
-
-A small reactive primitive library. Signals track dependencies automatically — when a value changes, only the effects that read it re-run.  
-Objects and arrays use Proxy for deep reactivity without any special syntax.
-
-Inspired by Solid's reactive model. 
-
-## Primitives
-
-### `createSignal`
-
-```typescript
-import { createSignal } from "@sigil-dev/runtime";
-
-const count = createSignal(0);
-
-count()        // read — 0
-count.set(5)   // write
-count.peek()   // read without tracking
-```
-
-Objects and arrays are deeply reactive via Proxy and you mutate them directly:
-
-```typescript
-const user = createSignal({ name: "Rei", score: 0 });
-
-user().score++          // triggers effects that read score
-user().name = "Asuka"   // triggers effects that read name
-
-user.set({ name: "Misato", score: 100 }) // replace entire object
-```
-
-### `createEffect`
-
-Runs immediately, re-runs when any signal it read changes. Returns a dispose function.
-
-```typescript
-import { createEffect } from "@sigil-dev/runtime";
-
-const dispose = createEffect(() => {
-  document.title = `Score: ${user().score}`;
-  return () => console.log("cleanup before rerun");
-});
-
-dispose(); // stop tracking
-```
-
-Dependencies are tracked automatically. If a signal is conditionally read, the dependency is updated on each run — no stale subscriptions.
-
-### `createMemo`
-
-A derived signal. Cached until its dependencies change.
-
-```typescript
-import { createMemo } from "@sigil-dev/runtime";
-
-const fullName = createMemo(() => `${first()} ${last()}`);
-fullName() // read like any other signal
-```
-
-### `batch`
-
-Defer effect notifications until a block completes. Useful for multiple related writes.
-
-```typescript
-import { batch } from "@sigil-dev/runtime";
-
-batch(() => {
-  x.set(1);
-  y.set(2);
-  // effects fire once, not twice
-});
-```
-
-### `withEffectScope`
-
-Group effects so they can all be torn down at once. Essential for component lifecycle.
-
-```typescript
-import { withEffectScope } from "@sigil-dev/runtime";
-
-const dispose = withEffectScope(() => {
-  createEffect(() => console.log(x()));
-  createEffect(() => console.log(y()));
-});
-
-dispose(); // kills both
-```
-
-Scopes nest correctly. Inner dispose does not affect outer scope.
-
-### Context
-
-```typescript
-import { createContext, setContext, getContext } from "@sigil-dev/runtime";
-
-const ThemeKey = createContext<"light" | "dark">();
-
-setContext(ThemeKey, "dark");
-getContext(ThemeKey); // "dark"
-```
-
-### Hydration utilities
-> **NOTE:** You probably dont want to use this manually.  
-
-`claim`, `claimText`, `claimComment`, `reconcile`, `hydrateKeyedList` are used by the Sigil compiler for SSR hydration. Claim existing server-rendered DOM nodes instead of creating new ones.
-
-```typescript
-import { claim, claimText, reconcile } from "@sigil-dev/runtime";
-
-// claim an existing <div> from an SSR pool instead of createElement
-const el = claim(nodes, "div", parent);
-```
-
-## Design
-
-No virtual DOM. Effects write directly to DOM nodes. The update path is:
-
-```
-signal.set(newValue)
-  → notify subscribers
-    → effect re-runs
-      → direct DOM mutation
-```
-
-If a signal changes, the effects that depend on it run synchronously (or are batched if inside `batch()`).
-
-Deep reactivity on objects uses Proxy rather than explicit getter/setter pairs. This means you can pass a signal's value to any code that expects a plain object and mutations will still be tracked.
-
-## Used by
-
-`@sigil-dev/compiler` compiles `$state`, `$derived`, and `$effect` macros down to these primitives at build time. You can use this library directly if you want explicit control or are building outside the Sigil compiler pipeline.
+# @sigil-dev/runtime
+
+Signals-based reactivity for the DOM using direct mutations.
+
+```bash
+bun add @sigil-dev/runtime
+```
+
+## What it is
+
+A small reactive primitive library. Signals track dependencies automatically — when a value changes, only the effects that read it re-run.  
+Objects and arrays use Proxy for deep reactivity without any special syntax.
+
+Inspired by Solid's reactive model. 
+
+## Primitives
+
+### `createSignal`
+
+```typescript
+import { createSignal } from "@sigil-dev/runtime";
+
+const count = createSignal(0);
+
+count()        // read — 0
+count.set(5)   // write
+count.peek()   // read without tracking
+```
+
+Objects and arrays are deeply reactive via Proxy and you mutate them directly:
+
+```typescript
+const user = createSignal({ name: "Rei", score: 0 });
+
+user().score++          // triggers effects that read score
+user().name = "Asuka"   // triggers effects that read name
+
+user.set({ name: "Misato", score: 100 }) // replace entire object
+```
+
+### `createEffect`
+
+Runs immediately, re-runs when any signal it read changes. Returns a dispose function.
+
+```typescript
+import { createEffect } from "@sigil-dev/runtime";
+
+const dispose = createEffect(() => {
+  document.title = `Score: ${user().score}`;
+  return () => console.log("cleanup before rerun");
+});
+
+dispose(); // stop tracking
+```
+
+Dependencies are tracked automatically. If a signal is conditionally read, the dependency is updated on each run — no stale subscriptions.
+
+### `createMemo`
+
+A derived signal. Cached until its dependencies change.
+
+```typescript
+import { createMemo } from "@sigil-dev/runtime";
+
+const fullName = createMemo(() => `${first()} ${last()}`);
+fullName() // read like any other signal
+```
+
+### `batch`
+
+Defer effect notifications until a block completes. Useful for multiple related writes.
+
+```typescript
+import { batch } from "@sigil-dev/runtime";
+
+batch(() => {
+  x.set(1);
+  y.set(2);
+  // effects fire once, not twice
+});
+```
+
+### `withEffectScope`
+
+Group effects so they can all be torn down at once. Essential for component lifecycle.
+
+```typescript
+import { withEffectScope } from "@sigil-dev/runtime";
+
+const dispose = withEffectScope(() => {
+  createEffect(() => console.log(x()));
+  createEffect(() => console.log(y()));
+});
+
+dispose(); // kills both
+```
+
+Scopes nest correctly. Inner dispose does not affect outer scope.
+
+### Context
+
+```typescript
+import { createContext, setContext, getContext } from "@sigil-dev/runtime";
+
+const ThemeKey = createContext<"light" | "dark">();
+
+setContext(ThemeKey, "dark");
+getContext(ThemeKey); // "dark"
+```
+
+### Hydration utilities
+> **NOTE:** You probably dont want to use this manually.  
+
+`claim`, `claimText`, `claimComment`, `reconcile`, `hydrateKeyedList` are used by the Sigil compiler for SSR hydration. Claim existing server-rendered DOM nodes instead of creating new ones.
+
+```typescript
+import { claim, claimText, reconcile } from "@sigil-dev/runtime";
+
+// claim an existing <div> from an SSR pool instead of createElement
+const el = claim(nodes, "div", parent);
+```
+
+## Design
+
+No virtual DOM. Effects write directly to DOM nodes. The update path is:
+
+```
+signal.set(newValue)
+  → notify subscribers
+    → effect re-runs
+      → direct DOM mutation
+```
+
+If a signal changes, the effects that depend on it run synchronously (or are batched if inside `batch()`).
+
+Deep reactivity on objects uses Proxy rather than explicit getter/setter pairs. This means you can pass a signal's value to any code that expects a plain object and mutations will still be tracked.
+
+## Used by
+
+`@sigil-dev/compiler` compiles `$state`, `$derived`, and `$effect` macros down to these primitives at build time. You can use this library directly if you want explicit control or are building outside the Sigil compiler pipeline.

package/index.test.ts

@@ -33,6 +33,7 @@ import {
 	ReactiveMap,
 	ReactiveSet,
 	reconcile,
+	setProp,
 	snapshot,
 	tick,
 	tracking,
@@ -761,6 +762,49 @@ describe("claim", () => {
 		expect(result.tagName).toBe("DIV");
 		expect(pool).toEqual([]);
 	});
+
+	test("creates svg in the SVG namespace on empty pool", () => {
+		const result = claim([], "svg");
+		expect(result.namespaceURI).toBe("http://www.w3.org/2000/svg");
+	});
+
+	test("creates svg children in the SVG namespace via parent", () => {
+		const svg = claim([], "svg");
+		const path = claim([], "path", svg);
+		expect(path.namespaceURI).toBe("http://www.w3.org/2000/svg");
+	});
+
+	test("keeps HTML elements in the HTML namespace", () => {
+		const result = claim([], "div");
+		expect(result.namespaceURI).toBe("http://www.w3.org/1999/xhtml");
+	});
+});
+
+describe("setProp", () => {
+	test("sets svg attributes without throwing", () => {
+		const svg = claim([], "svg");
+		expect(() => setProp(svg, "width", 15)).not.toThrow();
+		expect(svg.getAttribute("width")).toBe("15");
+	});
+
+	test("maps className to class on svg", () => {
+		const svg = claim([], "svg");
+		setProp(svg, "className", "icon");
+		expect(svg.getAttribute("class")).toBe("icon");
+	});
+
+	test("removes svg attribute on false/null", () => {
+		const svg = claim([], "svg");
+		setProp(svg, "width", 15);
+		setProp(svg, "width", false);
+		expect(svg.hasAttribute("width")).toBe(false);
+	});
+
+	test("keeps property semantics on HTML elements", () => {
+		const input = claim([], "input") as HTMLInputElement;
+		setProp(input, "value", "hello");
+		expect(input.value).toBe("hello");
+	});
 });
 
 describe("claimText", () => {