@sigil-dev/runtime 0.9.2 → 0.9.3

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/async-boundary.ts

@@ -1,30 +1,30 @@
 export function __asyncBoundary(
-    factory: () => Promise<any>,
-    Loading?: () => any,
-    Err?: (props: { error: unknown }) => any,
+	factory: () => Promise<any>,
+	Loading?: () => any,
+	Err?: (props: { error: unknown }) => any,
 ): Node {
-    const container = document.createElement("div");
-    container.dataset.asyncBoundary = "1";
+	const container = document.createElement("div");
+	container.dataset.asyncBoundary = "1";
 
-    if (Loading) {
-        const node = Loading();
-        if (node) container.appendChild(node);
-    }
+	if (Loading) {
+		const node = Loading();
+		if (node) container.appendChild(node);
+	}
 
-    factory()
-        .then((node) => {
-            if (node) container.replaceChildren(node);
-            else container.replaceChildren();
-        })
-        .catch((err) => {
-            if (Err) {
-                const errNode = Err({ error: err });
-                if (errNode) container.replaceChildren(errNode);
-            } else {
-                console.error("[sigil] async component error:", err);
-                container.replaceChildren();
-            }
-        });
+	factory()
+		.then((node) => {
+			if (node) container.replaceChildren(node);
+			else container.replaceChildren();
+		})
+		.catch((err) => {
+			if (Err) {
+				const errNode = Err({ error: err });
+				if (errNode) container.replaceChildren(errNode);
+			} else {
+				console.error("[sigil] async component error:", err);
+				container.replaceChildren();
+			}
+		});
 
-    return container;
-}
+	return container;
+}

package/boundary.ts

@@ -1,44 +1,44 @@
-/**
- * Error boundary for Sigil components.
- *
- * Wraps children so that errors during rendering are caught
- * and handled instead of crashing the app.
- *
- * Usage:
- *   <Boundary
- *     fallbackError={({ error, reset }) => <button onClick={reset}>Retry</button>}
- *     onError={(e) => reportToSentry(e)}
- *   >
- *     <FlakyComponent />
- *   </Boundary>
- */
-
-import { createSignal } from "./index.js";
-
-interface BoundaryProps {
-	children: any;
-	fallbackError?: (ctx: { error: Error; reset: () => void }) => any;
-	onError?: (error: Error) => void;
-}
-
-export function Boundary(props: BoundaryProps): any {
-	const error = createSignal<Error | null>(null);
-
-	const reset = () => error.set(null);
-
-	if (error()) {
-		return props.fallbackError
-			? props.fallbackError({ error: error()!, reset })
-			: null;
-	}
-
-	try {
-		return props.children;
-	} catch (e) {
-		props.onError?.(e as Error);
-		error.set(e as Error);
-		return props.fallbackError
-			? props.fallbackError({ error: e as Error, reset })
-			: null;
-	}
-}
+/**
+ * Error boundary for Sigil components.
+ *
+ * Wraps children so that errors during rendering are caught
+ * and handled instead of crashing the app.
+ *
+ * Usage:
+ *   <Boundary
+ *     fallbackError={({ error, reset }) => <button onClick={reset}>Retry</button>}
+ *     onError={(e) => reportToSentry(e)}
+ *   >
+ *     <FlakyComponent />
+ *   </Boundary>
+ */
+
+import { createSignal } from "./index.js";
+
+interface BoundaryProps {
+	children: any;
+	fallbackError?: (ctx: { error: Error; reset: () => void }) => any;
+	onError?: (error: Error) => void;
+}
+
+export function Boundary(props: BoundaryProps): any {
+	const error = createSignal<Error | null>(null);
+
+	const reset = () => error.set(null);
+
+	if (error()) {
+		return props.fallbackError
+			? props.fallbackError({ error: error()!, reset })
+			: null;
+	}
+
+	try {
+		return props.children;
+	} catch (e) {
+		props.onError?.(e as Error);
+		error.set(e as Error);
+		return props.fallbackError
+			? props.fallbackError({ error: e as Error, reset })
+			: null;
+	}
+}

package/easing.ts

@@ -1,66 +1,66 @@
-// A8: 15 standard easing functions (cubic bezier approximations)
-// All take t in [0, 1] and return eased value in [0, 1].
-
-export function linear(t: number): number {
-	return t;
-}
-
-export function easeInQuad(t: number): number {
-	return t * t;
-}
-
-export function easeOutQuad(t: number): number {
-	return t * (2 - t);
-}
-
-export function easeInOutQuad(t: number): number {
-	return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-}
-
-export function easeInCubic(t: number): number {
-	return t * t * t;
-}
-
-export function easeOutCubic(t: number): number {
-	return --t * t * t + 1;
-}
-
-export function easeInOutCubic(t: number): number {
-	return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
-}
-
-export function easeInQuart(t: number): number {
-	return t * t * t * t;
-}
-
-export function easeOutQuart(t: number): number {
-	return 1 - --t * t * t * t;
-}
-
-export function easeInOutQuart(t: number): number {
-	return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
-}
-
-export function easeInQuint(t: number): number {
-	return t * t * t * t * t;
-}
-
-export function easeOutQuint(t: number): number {
-	return 1 + --t * t * t * t * t;
-}
-
-export function easeInOutQuint(t: number): number {
-	return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
-}
-
-export function easeInSine(t: number): number {
-	return 1 - Math.cos((t * Math.PI) / 2);
-}
-
-export function easeOutSine(t: number): number {
-	return Math.sin((t * Math.PI) / 2);
-}
-
-export function easeInOutSine(t: number): number {
-	return -(Math.cos(Math.PI * t) - 1) / 2;
-}
+// A8: 15 standard easing functions (cubic bezier approximations)
+// All take t in [0, 1] and return eased value in [0, 1].
+
+export function linear(t: number): number {
+	return t;
+}
+
+export function easeInQuad(t: number): number {
+	return t * t;
+}
+
+export function easeOutQuad(t: number): number {
+	return t * (2 - t);
+}
+
+export function easeInOutQuad(t: number): number {
+	return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+
+export function easeInCubic(t: number): number {
+	return t * t * t;
+}
+
+export function easeOutCubic(t: number): number {
+	return --t * t * t + 1;
+}
+
+export function easeInOutCubic(t: number): number {
+	return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
+}
+
+export function easeInQuart(t: number): number {
+	return t * t * t * t;
+}
+
+export function easeOutQuart(t: number): number {
+	return 1 - --t * t * t * t;
+}
+
+export function easeInOutQuart(t: number): number {
+	return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
+}
+
+export function easeInQuint(t: number): number {
+	return t * t * t * t * t;
+}
+
+export function easeOutQuint(t: number): number {
+	return 1 + --t * t * t * t * t;
+}
+
+export function easeInOutQuint(t: number): number {
+	return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t;
+}
+
+export function easeInSine(t: number): number {
+	return 1 - Math.cos((t * Math.PI) / 2);
+}
+
+export function easeOutSine(t: number): number {
+	return Math.sin((t * Math.PI) / 2);
+}
+
+export function easeInOutSine(t: number): number {
+	return -(Math.cos(Math.PI * t) - 1) / 2;
+}