@lab206/dom 0.1.0

package/dist/props.d.ts

@@ -0,0 +1,54 @@
+import type { Signal } from "@lab206/core";
+/**
+ * Reactive component props.
+ *
+ * Access like normal fields (`props.name`). If the parent passed a signal or
+ * a zero-arg accessor `() => …`, the value is unwrapped **on read** and tracked.
+ *
+ * @example
+ * ```tsx
+ * // Parent — pass a signal or accessor for live updates:
+ * <Hello name={name} />
+ * <Hello name={() => user().name} />
+ *
+ * // Child — read as a plain field inside reactive scopes:
+ * <p>{() => props.name}</p>
+ * ```
+ */
+export type ReactiveProps<P extends object> = {
+    readonly [K in keyof P]: P[K];
+};
+/** True if value looks like a Powers signal. */
+export declare function isSignal(value: unknown): value is Signal<unknown>;
+/** True if this object was created by `createProps` / `mergeProps` / `splitProps`. */
+export declare function isReactiveProps(value: unknown): value is object;
+/**
+ * Unwrap a prop value for reactive read.
+ * - Signals → call (tracked)
+ * - Zero-arg functions (accessors) → call (tracked)
+ * - Event handlers / multi-arg fns → return as-is
+ * - Everything else → as-is
+ */
+export declare function unwrapProp(key: string, value: unknown): unknown;
+/**
+ * Peek at the raw prop bag value without unwrapping signals/accessors.
+ * Useful for dev warnings (e.g. detect snapshot `value={sig()}` vs `value={sig}`).
+ */
+export declare function getRawProp(props: object, key: string): unknown;
+/**
+ * Wrap a raw props object so property access is reactive.
+ * Idempotent — wrapping an existing reactive props object returns it as-is.
+ */
+export declare function createProps<P extends object>(raw: P): ReactiveProps<P>;
+/**
+ * Merge default props with overrides. Later sources win.
+ * Accessors stay lazy — resolved only when the child reads a key.
+ */
+export declare function mergeProps<T extends object, U extends object>(defaults: T, props: U): ReactiveProps<T & U>;
+export declare function mergeProps<T extends object, U extends object, V extends object>(a: T, b: U, c: V): ReactiveProps<T & U & V>;
+/**
+ * Split props into a picked reactive bag + the rest.
+ * Both bags read through the same underlying props (no snapshot).
+ */
+export declare function splitProps<P extends object, K extends keyof P>(props: P, keys: readonly K[]): [ReactiveProps<Pick<P, K>>, ReactiveProps<Omit<P, K>>];
+//# sourceMappingURL=props.d.ts.map

package/dist/props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../src/props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAE3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI;IAC5C,QAAQ,EAAE,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC9B,CAAC;AAIF,gDAAgD;AAChD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAAC,OAAO,CAAC,CAMjE;AAED,sFAAsF;AACtF,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,MAAM,CAE/D;AAQD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,CAQ/D;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAG9D;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC,CAsCtE;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC3D,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,CAAC,GACP,aAAa,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;AACxB,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,EAC7E,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,GACH,aAAa,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC;AA2D5B;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,EAC5D,KAAK,EAAE,CAAC,EACR,IAAI,EAAE,SAAS,CAAC,EAAE,GACjB,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CA8DxD"}

package/dist/props.js

@@ -0,0 +1,211 @@
+const reactivePropsSet = new WeakSet();
+/** True if value looks like a Powers signal. */
+export function isSignal(value) {
+    return (typeof value === "function" &&
+        typeof value.peek === "function" &&
+        typeof value.set === "function");
+}
+/** True if this object was created by `createProps` / `mergeProps` / `splitProps`. */
+export function isReactiveProps(value) {
+    return typeof value === "object" && value !== null && reactivePropsSet.has(value);
+}
+function isEventKey(key) {
+    return (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase());
+}
+/**
+ * Unwrap a prop value for reactive read.
+ * - Signals → call (tracked)
+ * - Zero-arg functions (accessors) → call (tracked)
+ * - Event handlers / multi-arg fns → return as-is
+ * - Everything else → as-is
+ */
+export function unwrapProp(key, value) {
+    // children + bind must stay as passed (bind is a signal ref for two-way forms)
+    if (key === "children" || key === "bind")
+        return value;
+    if (typeof value !== "function")
+        return value;
+    if (isEventKey(key))
+        return value;
+    if (isSignal(value))
+        return value();
+    if (value.length === 0)
+        return value();
+    return value;
+}
+const rawSourceMap = new WeakMap();
+/**
+ * Peek at the raw prop bag value without unwrapping signals/accessors.
+ * Useful for dev warnings (e.g. detect snapshot `value={sig()}` vs `value={sig}`).
+ */
+export function getRawProp(props, key) {
+    const src = rawSourceMap.get(props) ?? props;
+    return Reflect.get(src, key);
+}
+/**
+ * Wrap a raw props object so property access is reactive.
+ * Idempotent — wrapping an existing reactive props object returns it as-is.
+ */
+export function createProps(raw) {
+    if (isReactiveProps(raw)) {
+        return raw;
+    }
+    const source = (raw ?? {});
+    const proxy = new Proxy(source, {
+        get(target, key, receiver) {
+            if (typeof key === "symbol") {
+                return Reflect.get(target, key, receiver);
+            }
+            const value = Reflect.get(target, key, receiver);
+            return unwrapProp(key, value);
+        },
+        set() {
+            return false;
+        },
+        has(target, key) {
+            return Reflect.has(target, key);
+        },
+        ownKeys(target) {
+            return Reflect.ownKeys(target);
+        },
+        getOwnPropertyDescriptor(target, key) {
+            if (!Reflect.has(target, key))
+                return undefined;
+            return {
+                enumerable: true,
+                configurable: true,
+                get: () => unwrapProp(String(key), Reflect.get(target, key)),
+            };
+        },
+    });
+    reactivePropsSet.add(proxy);
+    rawSourceMap.set(proxy, source);
+    return proxy;
+}
+export function mergeProps(...sources) {
+    const list = sources.filter(Boolean);
+    const proxy = new Proxy({}, {
+        get(_target, key) {
+            if (typeof key === "symbol")
+                return undefined;
+            for (let i = list.length - 1; i >= 0; i--) {
+                const src = list[i];
+                if (key in src) {
+                    // If source is already reactive props, read through it
+                    // (already unwrapped). Prefer raw: if reactive, reading is fine.
+                    const value = src[key];
+                    // When reading from reactive source, value is already unwrapped.
+                    // When reading from plain source, unwrap.
+                    if (isReactiveProps(src))
+                        return value;
+                    return unwrapProp(key, value);
+                }
+            }
+            return undefined;
+        },
+        has(_target, key) {
+            if (typeof key === "symbol")
+                return false;
+            return list.some((src) => key in src);
+        },
+        ownKeys() {
+            const keys = new Set();
+            for (const src of list) {
+                for (const k of Reflect.ownKeys(src))
+                    keys.add(k);
+            }
+            return [...keys];
+        },
+        getOwnPropertyDescriptor(_target, key) {
+            if (typeof key === "symbol")
+                return undefined;
+            if (!list.some((src) => key in src))
+                return undefined;
+            return {
+                enumerable: true,
+                configurable: true,
+                get: () => {
+                    for (let i = list.length - 1; i >= 0; i--) {
+                        const src = list[i];
+                        if (key in src) {
+                            if (isReactiveProps(src))
+                                return src[key];
+                            return unwrapProp(String(key), src[key]);
+                        }
+                    }
+                    return undefined;
+                },
+            };
+        },
+    });
+    reactivePropsSet.add(proxy);
+    return proxy;
+}
+/**
+ * Split props into a picked reactive bag + the rest.
+ * Both bags read through the same underlying props (no snapshot).
+ */
+export function splitProps(props, keys) {
+    const keySet = new Set(keys);
+    const picked = new Proxy({}, {
+        get(_t, key) {
+            if (typeof key === "symbol")
+                return undefined;
+            if (!keySet.has(key))
+                return undefined;
+            return props[key];
+        },
+        has(_t, key) {
+            return typeof key === "string" && keySet.has(key) && key in props;
+        },
+        ownKeys() {
+            return [...keySet].filter((k) => k in props);
+        },
+        getOwnPropertyDescriptor(_t, key) {
+            if (typeof key !== "string" || !keySet.has(key))
+                return undefined;
+            if (!(key in props))
+                return undefined;
+            return {
+                enumerable: true,
+                configurable: true,
+                get: () => props[key],
+            };
+        },
+    });
+    const rest = new Proxy({}, {
+        get(_t, key) {
+            if (typeof key === "symbol")
+                return undefined;
+            if (keySet.has(key))
+                return undefined;
+            return props[key];
+        },
+        has(_t, key) {
+            return (typeof key === "string" &&
+                !keySet.has(key) &&
+                key in props);
+        },
+        ownKeys() {
+            return Reflect.ownKeys(props).filter((k) => typeof k !== "string" || !keySet.has(k));
+        },
+        getOwnPropertyDescriptor(_t, key) {
+            if (typeof key !== "string" || keySet.has(key))
+                return undefined;
+            if (!(key in props))
+                return undefined;
+            return {
+                enumerable: true,
+                configurable: true,
+                get: () => props[key],
+            };
+        },
+    });
+    reactivePropsSet.add(picked);
+    reactivePropsSet.add(rest);
+    return [
+        picked,
+        rest,
+    ];
+}
+//# sourceMappingURL=props.js.map

package/dist/props.js.map

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

package/dist/show.d.ts

@@ -0,0 +1,12 @@
+import { type Dispose } from "@lab206/core";
+/**
+ * Conditionally mount a DOM subtree.
+ * When `when()` is false, the subtree is disposed and removed.
+ *
+ * @example
+ * ```ts
+ * show(parent, () => open(), () => h("div", null, "Hello"));
+ * ```
+ */
+export declare function show(parent: ParentNode, when: () => boolean, factory: () => Node, anchor?: Node | null): Dispose;
+//# sourceMappingURL=show.d.ts.map

package/dist/show.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.d.ts","sourceRoot":"","sources":["../src/show.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,OAAO,EACb,MAAM,cAAc,CAAC;AAGtB;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,MAAM,OAAO,EACnB,OAAO,EAAE,MAAM,IAAI,EACnB,MAAM,GAAE,IAAI,GAAG,IAAW,GACzB,OAAO,CA8BT"}

package/dist/show.js

@@ -0,0 +1,42 @@
+import { createRoot, effect, } from "@lab206/core";
+import { remove } from "./insert.js";
+/**
+ * Conditionally mount a DOM subtree.
+ * When `when()` is false, the subtree is disposed and removed.
+ *
+ * @example
+ * ```ts
+ * show(parent, () => open(), () => h("div", null, "Hello"));
+ * ```
+ */
+export function show(parent, when, factory, anchor = null) {
+    let childDispose;
+    let node;
+    const stop = effect(() => {
+        if (when()) {
+            if (!node) {
+                createRoot((dispose) => {
+                    childDispose = dispose;
+                    node = factory();
+                    parent.insertBefore(node, anchor);
+                });
+            }
+        }
+        else if (node) {
+            childDispose?.();
+            childDispose = undefined;
+            remove(node);
+            node = undefined;
+        }
+    });
+    return () => {
+        stop();
+        childDispose?.();
+        childDispose = undefined;
+        if (node) {
+            remove(node);
+            node = undefined;
+        }
+    };
+}
+//# sourceMappingURL=show.js.map

package/dist/show.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show.js","sourceRoot":"","sources":["../src/show.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,MAAM,GAEP,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC;;;;;;;;GAQG;AACH,MAAM,UAAU,IAAI,CAClB,MAAkB,EAClB,IAAmB,EACnB,OAAmB,EACnB,SAAsB,IAAI;IAE1B,IAAI,YAAiC,CAAC;IACtC,IAAI,IAAsB,CAAC;IAE3B,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,EAAE;QACvB,IAAI,IAAI,EAAE,EAAE,CAAC;YACX,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,UAAU,CAAC,CAAC,OAAO,EAAE,EAAE;oBACrB,YAAY,GAAG,OAAO,CAAC;oBACvB,IAAI,GAAG,OAAO,EAAE,CAAC;oBACjB,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,EAAE,CAAC;YAChB,YAAY,EAAE,EAAE,CAAC;YACjB,YAAY,GAAG,SAAS,CAAC;YACzB,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,IAAI,GAAG,SAAS,CAAC;QACnB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,GAAG,EAAE;QACV,IAAI,EAAE,CAAC;QACP,YAAY,EAAE,EAAE,CAAC;QACjB,YAAY,GAAG,SAAS,CAAC;QACzB,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,CAAC,IAAI,CAAC,CAAC;YACb,IAAI,GAAG,SAAS,CAAC;QACnB,CAAC;IACH,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@lab206/dom",
+  "version": "0.1.0",
+  "description": "Thin DOM bindings + JSX + reactive props for Powers.",
+  "type": "module",
+  "license": "BUSL-1.1",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./src/jsx-runtime.ts",
+      "development": "./src/jsx-runtime.ts",
+      "import": "./dist/jsx-runtime.js",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./src/jsx-runtime.ts",
+      "development": "./src/jsx-runtime.ts",
+      "import": "./dist/jsx-runtime.js",
+      "default": "./dist/jsx-runtime.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.css",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "dependencies": {
+    "@lab206/core": "0.1.0"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.1",
+    "happy-dom": "^17.4.4",
+    "tsx": "^4.19.3",
+    "typescript": "^5.8.2"
+  },
+  "author": "Scott Powers",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://lab206.com",
+  "bugs": {
+    "url": "https://github.com/spowers2/powers/issues"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spowers2/powers.git",
+    "directory": "packages/dom"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "node --import tsx --test src/*.test.ts",
+    "size": "node --import tsx scripts/size.ts"
+  }
+}

package/src/bind.ts

@@ -0,0 +1,195 @@
+import { effect, type Dispose } from "@lab206/core";
+
+/** Reactive text content of an Element or Text node. */
+export function bindText(
+  node: Element | Text,
+  get: () => string | number | boolean | null | undefined,
+): Dispose {
+  return effect(() => {
+    const value = get();
+    const text = value == null ? "" : String(value);
+    if (node.nodeType === Node.TEXT_NODE) {
+      (node as Text).data = text;
+    } else {
+      (node as Element).textContent = text;
+    }
+  });
+}
+
+/**
+ * Reactive attribute. `false` / `null` / `undefined` removes the attribute.
+ * `true` sets a boolean attribute to `""`.
+ */
+export function bindAttr(
+  el: Element,
+  name: string,
+  get: () => string | number | boolean | null | undefined,
+): Dispose {
+  return effect(() => {
+    const value = get();
+    if (value === false || value == null) {
+      el.removeAttribute(name);
+    } else if (value === true) {
+      el.setAttribute(name, "");
+    } else {
+      el.setAttribute(name, String(value));
+    }
+  });
+}
+
+/** Reactive DOM property (e.g. `value`, `checked`, `disabled`). */
+export function bindProp<T>(
+  el: Element,
+  name: string,
+  get: () => T,
+): Dispose {
+  return effect(() => {
+    const next = get();
+    const rec = el as unknown as Record<string, unknown>;
+    // Skip no-ops — assigning input.value every keystroke resets the caret
+    if (rec[name] !== next) {
+      rec[name] = next;
+    }
+  });
+}
+
+/**
+ * Reactive className.
+ * - string → full className
+ * - record → toggles keys by truthiness (merged onto base if second arg)
+ */
+export function bindClass(
+  el: Element,
+  get: () => string | Record<string, boolean | undefined | null> | null | undefined,
+): Dispose {
+  return effect(() => {
+    const value = get();
+    if (value == null || value === "") {
+      el.className = "";
+      return;
+    }
+    if (typeof value === "string") {
+      el.className = value;
+      return;
+    }
+    const parts: string[] = [];
+    for (const key of Object.keys(value)) {
+      if (value[key]) parts.push(key);
+    }
+    el.className = parts.join(" ");
+  });
+}
+
+/**
+ * Reactive inline styles.
+ * Pass a partial style object; keys are CSS properties (camelCase or kebab-case).
+ * `null` / `undefined` values clear that property.
+ */
+export function bindStyle(
+  el: HTMLElement | SVGElement,
+  get: () => Record<string, string | number | null | undefined> | null | undefined,
+): Dispose {
+  let prevKeys: string[] = [];
+  return effect(() => {
+    const styles = get() ?? {};
+    const nextKeys = Object.keys(styles);
+
+    for (const key of prevKeys) {
+      if (!(key in styles)) {
+        setStyleProp(el, key, "");
+      }
+    }
+
+    for (const key of nextKeys) {
+      const value = styles[key];
+      if (value == null) {
+        setStyleProp(el, key, "");
+      } else if (typeof value === "number") {
+        setStyleProp(el, key, toCssValue(key.includes("-")
+          ? key.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())
+          : key, value));
+      } else {
+        setStyleProp(el, key, String(value));
+      }
+    }
+
+    prevKeys = nextKeys;
+  });
+}
+
+/** CSS props that accept unitless numbers (like React). Everything else gets `px`. */
+const UNITLESS = new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "fontWeight",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth",
+]);
+
+function toCssValue(key: string, value: string | number): string {
+  if (typeof value === "number") {
+    if (value === 0 || UNITLESS.has(key)) return String(value);
+    return `${value}px`;
+  }
+  return value;
+}
+
+function setStyleProp(
+  el: HTMLElement | SVGElement,
+  key: string,
+  value: string,
+): void {
+  // Support both camelCase and kebab-case.
+  if (key.startsWith("--")) {
+    el.style.setProperty(key, value);
+    return;
+  }
+  const camel = key.includes("-")
+    ? key.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase())
+    : key;
+  // value may already be stringified; re-apply unit rule when it's a bare number
+  const asNum = Number(value);
+  const final =
+    value !== "" && Number.isFinite(asNum) && String(asNum) === value.trim()
+      ? toCssValue(camel, asNum)
+      : value;
+  (el.style as unknown as Record<string, string>)[camel] = final;
+}