@pyreon/preact-compat 0.1.0

package/lib/index.js

@@ -0,0 +1,110 @@
+import { Fragment, createContext, createRef, h as pyreonH, useContext } from "@pyreon/core";
+import { batch, signal } from "@pyreon/reactivity";
+import { hydrateRoot, mount } from "@pyreon/runtime-dom";
+
+//#region src/index.ts
+/** Alias: Preact also exports createElement */
+const createElement = pyreonH;
+/**
+* Preact's `render(vnode, container)`.
+* Maps to Pyreon's `mount(vnode, container)`.
+*/
+function render(vnode, container) {
+	mount(vnode, container);
+}
+/**
+* Preact's `hydrate(vnode, container)`.
+* Maps to Pyreon's `hydrateRoot(container, vnode)`.
+*/
+function hydrate(vnode, container) {
+	hydrateRoot(container, vnode);
+}
+/**
+* Preact-compatible class-based Component.
+*
+* Wraps Pyreon's signal-based reactivity so `setState` triggers re-renders.
+* Usage: `class MyComp extends Component { render() { ... } }`
+*/
+var Component = class {
+	props;
+	state;
+	_stateSignal;
+	constructor(props) {
+		this.props = props;
+		this.state = {};
+		this._stateSignal = signal(this.state);
+	}
+	/**
+	* Update state — accepts a partial state object or an updater function.
+	* Merges into existing state (shallow merge, like Preact/React).
+	*/
+	setState(partial) {
+		batch(() => {
+			const current = this._stateSignal();
+			const update = typeof partial === "function" ? partial(current) : partial;
+			const next = {
+				...current,
+				...update
+			};
+			this.state = next;
+			this._stateSignal.set(next);
+		});
+	}
+	/**
+	* Force a re-render. In Pyreon this triggers the state signal to re-fire.
+	*/
+	forceUpdate() {
+		this._stateSignal.set({ ...this.state });
+	}
+	/**
+	* Override in subclass to return VNode tree.
+	*/
+	render() {
+		return null;
+	}
+};
+/**
+* Clone a VNode with merged props (like Preact's cloneElement).
+*/
+function cloneElement(vnode, props, ...children) {
+	const mergedProps = {
+		...vnode.props,
+		...props ?? {}
+	};
+	const mergedChildren = children.length > 0 ? children : vnode.children;
+	return {
+		type: vnode.type,
+		props: mergedProps,
+		children: mergedChildren,
+		key: props?.key ?? vnode.key
+	};
+}
+/**
+* Flatten children into a flat array, filtering out null/undefined/boolean.
+* Matches Preact's `toChildArray` utility.
+*/
+function toChildArray(children) {
+	const result = [];
+	flatten(children, result);
+	return result;
+}
+function flatten(value, out) {
+	if (value == null || typeof value === "boolean") return;
+	if (Array.isArray(value)) for (const child of value) flatten(child, out);
+	else out.push(value);
+}
+/**
+* Check if a value is a VNode (like Preact's isValidElement).
+*/
+function isValidElement(x) {
+	return x !== null && typeof x === "object" && "type" in x && "props" in x && "children" in x;
+}
+/**
+* Preact's plugin/hook system. Exposed as an empty object for compatibility
+* with libraries that check for `options._hook`, `options.vnode`, etc.
+*/
+const options = {};
+
+//#endregion
+export { Component, Fragment, cloneElement, createContext, createElement, createRef, pyreonH as h, hydrate, isValidElement, options, render, toChildArray, useContext };
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["/**\n * @pyreon/preact-compat\n *\n * Preact-compatible API shim that runs on Pyreon's reactive engine.\n *\n * Provides the core Preact API surface: h, Fragment, render, hydrate,\n * Component class, createContext, createRef, cloneElement, toChildArray,\n * isValidElement, and the options hook object.\n *\n * For hooks, import from \"@pyreon/preact-compat/hooks\".\n * For signals, import from \"@pyreon/preact-compat/signals\".\n */\n\nimport type { Props, VNode, VNodeChild } from \"@pyreon/core\"\nimport { createContext, createRef, Fragment, h as pyreonH, useContext } from \"@pyreon/core\"\nimport { batch, signal } from \"@pyreon/reactivity\"\nimport { hydrateRoot, mount } from \"@pyreon/runtime-dom\"\n\n// ─── Core JSX ────────────────────────────────────────────────────────────────\n\n/** Preact's hyperscript function — maps directly to Pyreon's h() */\nexport { pyreonH as h }\n\n/** Alias: Preact also exports createElement */\nexport const createElement = pyreonH\n\nexport { Fragment }\n\n// ─── Render / Hydrate ────────────────────────────────────────────────────────\n\n/**\n * Preact's `render(vnode, container)`.\n * Maps to Pyreon's `mount(vnode, container)`.\n */\nexport function render(vnode: VNodeChild, container: Element): void {\n  mount(vnode, container)\n}\n\n/**\n * Preact's `hydrate(vnode, container)`.\n * Maps to Pyreon's `hydrateRoot(container, vnode)`.\n */\nexport function hydrate(vnode: VNodeChild, container: Element): void {\n  hydrateRoot(container, vnode as VNode)\n}\n\n// ─── Context ─────────────────────────────────────────────────────────────────\n\nexport { createContext, useContext }\n\n// ─── Refs ────────────────────────────────────────────────────────────────────\n\nexport { createRef }\n\n// ─── Component class ─────────────────────────────────────────────────────────\n\n/**\n * Preact-compatible class-based Component.\n *\n * Wraps Pyreon's signal-based reactivity so `setState` triggers re-renders.\n * Usage: `class MyComp extends Component { render() { ... } }`\n */\nexport class Component<\n  P extends Props = Props,\n  S extends Record<string, unknown> = Record<string, unknown>,\n> {\n  props: P\n  state: S\n  private _stateSignal: ReturnType<typeof signal<S>>\n\n  constructor(props: P) {\n    this.props = props\n    this.state = {} as S\n    this._stateSignal = signal<S>(this.state)\n  }\n\n  /**\n   * Update state — accepts a partial state object or an updater function.\n   * Merges into existing state (shallow merge, like Preact/React).\n   */\n  setState(partial: Partial<S> | ((prev: S) => Partial<S>)): void {\n    batch(() => {\n      const current = this._stateSignal()\n      const update =\n        typeof partial === \"function\" ? (partial as (prev: S) => Partial<S>)(current) : partial\n      const next = { ...current, ...update } as S\n      this.state = next\n      this._stateSignal.set(next)\n    })\n  }\n\n  /**\n   * Force a re-render. In Pyreon this triggers the state signal to re-fire.\n   */\n  forceUpdate(): void {\n    this._stateSignal.set({ ...this.state })\n  }\n\n  /**\n   * Override in subclass to return VNode tree.\n   */\n  render(): VNodeChild {\n    return null\n  }\n}\n\n// ─── cloneElement ────────────────────────────────────────────────────────────\n\n/**\n * Clone a VNode with merged props (like Preact's cloneElement).\n */\nexport function cloneElement(vnode: VNode, props?: Props, ...children: VNodeChild[]): VNode {\n  const mergedProps = { ...vnode.props, ...(props ?? {}) }\n  const mergedChildren = children.length > 0 ? children : vnode.children\n  return {\n    type: vnode.type,\n    props: mergedProps,\n    children: mergedChildren,\n    key: (props?.key as string | number | null) ?? vnode.key,\n  }\n}\n\n// ─── toChildArray ────────────────────────────────────────────────────────────\n\n/**\n * Flatten children into a flat array, filtering out null/undefined/boolean.\n * Matches Preact's `toChildArray` utility.\n */\nexport function toChildArray(children: VNodeChild | VNodeChild[]): VNodeChild[] {\n  const result: VNodeChild[] = []\n  flatten(children, result)\n  return result\n}\n\nfunction flatten(value: VNodeChild | VNodeChild[], out: VNodeChild[]): void {\n  if (value == null || typeof value === \"boolean\") return\n  if (Array.isArray(value)) {\n    for (const child of value) {\n      flatten(child as VNodeChild, out)\n    }\n  } else {\n    out.push(value)\n  }\n}\n\n// ─── isValidElement ──────────────────────────────────────────────────────────\n\n/**\n * Check if a value is a VNode (like Preact's isValidElement).\n */\nexport function isValidElement(x: unknown): x is VNode {\n  return (\n    x !== null &&\n    typeof x === \"object\" &&\n    \"type\" in (x as Record<string, unknown>) &&\n    \"props\" in (x as Record<string, unknown>) &&\n    \"children\" in (x as Record<string, unknown>)\n  )\n}\n\n// ─── options ─────────────────────────────────────────────────────────────────\n\n/**\n * Preact's plugin/hook system. Exposed as an empty object for compatibility\n * with libraries that check for `options._hook`, `options.vnode`, etc.\n */\nexport const options: Record<string, unknown> = {}\n"],"mappings":";;;;;;AAwBA,MAAa,gBAAgB;;;;;AAU7B,SAAgB,OAAO,OAAmB,WAA0B;AAClE,OAAM,OAAO,UAAU;;;;;;AAOzB,SAAgB,QAAQ,OAAmB,WAA0B;AACnE,aAAY,WAAW,MAAe;;;;;;;;AAmBxC,IAAa,YAAb,MAGE;CACA;CACA;CACA,AAAQ;CAER,YAAY,OAAU;AACpB,OAAK,QAAQ;AACb,OAAK,QAAQ,EAAE;AACf,OAAK,eAAe,OAAU,KAAK,MAAM;;;;;;CAO3C,SAAS,SAAuD;AAC9D,cAAY;GACV,MAAM,UAAU,KAAK,cAAc;GACnC,MAAM,SACJ,OAAO,YAAY,aAAc,QAAoC,QAAQ,GAAG;GAClF,MAAM,OAAO;IAAE,GAAG;IAAS,GAAG;IAAQ;AACtC,QAAK,QAAQ;AACb,QAAK,aAAa,IAAI,KAAK;IAC3B;;;;;CAMJ,cAAoB;AAClB,OAAK,aAAa,IAAI,EAAE,GAAG,KAAK,OAAO,CAAC;;;;;CAM1C,SAAqB;AACnB,SAAO;;;;;;AASX,SAAgB,aAAa,OAAc,OAAe,GAAG,UAA+B;CAC1F,MAAM,cAAc;EAAE,GAAG,MAAM;EAAO,GAAI,SAAS,EAAE;EAAG;CACxD,MAAM,iBAAiB,SAAS,SAAS,IAAI,WAAW,MAAM;AAC9D,QAAO;EACL,MAAM,MAAM;EACZ,OAAO;EACP,UAAU;EACV,KAAM,OAAO,OAAkC,MAAM;EACtD;;;;;;AASH,SAAgB,aAAa,UAAmD;CAC9E,MAAM,SAAuB,EAAE;AAC/B,SAAQ,UAAU,OAAO;AACzB,QAAO;;AAGT,SAAS,QAAQ,OAAkC,KAAyB;AAC1E,KAAI,SAAS,QAAQ,OAAO,UAAU,UAAW;AACjD,KAAI,MAAM,QAAQ,MAAM,CACtB,MAAK,MAAM,SAAS,MAClB,SAAQ,OAAqB,IAAI;KAGnC,KAAI,KAAK,MAAM;;;;;AASnB,SAAgB,eAAe,GAAwB;AACrD,QACE,MAAM,QACN,OAAO,MAAM,YACb,UAAW,KACX,WAAY,KACZ,cAAe;;;;;;AAUnB,MAAa,UAAmC,EAAE"}

package/lib/types/index.d.ts

@@ -0,0 +1,61 @@
+import { Fragment, Props, VNode, VNodeChild, createContext, createRef, h as pyreonH, useContext } from "@pyreon/core";
+
+//#region src/index.d.ts
+/** Alias: Preact also exports createElement */
+declare const createElement: typeof pyreonH;
+/**
+ * Preact's `render(vnode, container)`.
+ * Maps to Pyreon's `mount(vnode, container)`.
+ */
+declare function render(vnode: VNodeChild, container: Element): void;
+/**
+ * Preact's `hydrate(vnode, container)`.
+ * Maps to Pyreon's `hydrateRoot(container, vnode)`.
+ */
+declare function hydrate(vnode: VNodeChild, container: Element): void;
+/**
+ * Preact-compatible class-based Component.
+ *
+ * Wraps Pyreon's signal-based reactivity so `setState` triggers re-renders.
+ * Usage: `class MyComp extends Component { render() { ... } }`
+ */
+declare class Component<P extends Props = Props, S extends Record<string, unknown> = Record<string, unknown>> {
+  props: P;
+  state: S;
+  private _stateSignal;
+  constructor(props: P);
+  /**
+   * Update state — accepts a partial state object or an updater function.
+   * Merges into existing state (shallow merge, like Preact/React).
+   */
+  setState(partial: Partial<S> | ((prev: S) => Partial<S>)): void;
+  /**
+   * Force a re-render. In Pyreon this triggers the state signal to re-fire.
+   */
+  forceUpdate(): void;
+  /**
+   * Override in subclass to return VNode tree.
+   */
+  render(): VNodeChild;
+}
+/**
+ * Clone a VNode with merged props (like Preact's cloneElement).
+ */
+declare function cloneElement(vnode: VNode, props?: Props, ...children: VNodeChild[]): VNode;
+/**
+ * Flatten children into a flat array, filtering out null/undefined/boolean.
+ * Matches Preact's `toChildArray` utility.
+ */
+declare function toChildArray(children: VNodeChild | VNodeChild[]): VNodeChild[];
+/**
+ * Check if a value is a VNode (like Preact's isValidElement).
+ */
+declare function isValidElement(x: unknown): x is VNode;
+/**
+ * Preact's plugin/hook system. Exposed as an empty object for compatibility
+ * with libraries that check for `options._hook`, `options.vnode`, etc.
+ */
+declare const options: Record<string, unknown>;
+//#endregion
+export { Component, Fragment, cloneElement, createContext, createElement, createRef, pyreonH as h, hydrate, isValidElement, options, render, toChildArray, useContext };
+//# sourceMappingURL=index2.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.d.ts","names":[],"sources":["../../src/index.ts"],"mappings":";;;;cAwBa,aAAA,SAAa,OAAA;;;;;iBAUV,MAAA,CAAO,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,OAAA;;;;;iBAQrC,OAAA,CAAQ,KAAA,EAAO,UAAA,EAAY,SAAA,EAAW,OAAA;;;;;;;cAoBzC,SAAA,WACD,KAAA,GAAQ,KAAA,YACR,MAAA,oBAA0B,MAAA;EAEpC,KAAA,EAAO,CAAA;EACP,KAAA,EAAO,CAAA;EAAA,QACC,YAAA;cAEI,KAAA,EAAO,CAAA;EAU0B;;;;EAA7C,QAAA,CAAS,OAAA,EAAS,OAAA,CAAQ,CAAA,MAAO,IAAA,EAAM,CAAA,KAAM,OAAA,CAAQ,CAAA;EAjB3C;;;EA+BV,WAAA,CAAA;EA9BoC;;;EAqCpC,MAAA,CAAA,GAAU,UAAA;AAAA;;;;iBAUI,YAAA,CAAa,KAAA,EAAO,KAAA,EAAO,KAAA,GAAQ,KAAA,KAAU,QAAA,EAAU,UAAA,KAAe,KAAA;;;;;iBAiBtE,YAAA,CAAa,QAAA,EAAU,UAAA,GAAa,UAAA,KAAe,UAAA;;;;iBAsBnD,cAAA,CAAe,CAAA,YAAa,CAAA,IAAK,KAAA;;;;;cAgBpC,OAAA,EAAS,MAAA"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@pyreon/preact-compat",
+  "version": "0.1.0",
+  "description": "Preact-compatible API shim for Pyreon — write Preact-style code that runs on Pyreon's reactive engine",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pyreon/pyreon.git",
+    "directory": "packages/preact-compat"
+  },
+  "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/preact-compat#readme",
+  "bugs": {
+    "url": "https://github.com/pyreon/pyreon/issues"
+  },
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "type": "module",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "bun": "./src/index.ts",
+      "import": "./lib/index.js",
+      "types": "./lib/types/index.d.ts"
+    },
+    "./hooks": {
+      "bun": "./src/hooks.ts",
+      "import": "./lib/hooks.js",
+      "types": "./lib/types/hooks.d.ts"
+    },
+    "./signals": {
+      "bun": "./src/signals.ts",
+      "import": "./lib/signals.js",
+      "types": "./lib/types/signals.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "vl_rolldown_build",
+    "dev": "vl_rolldown_build-watch",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "dependencies": {
+    "@pyreon/core": "workspace:*",
+    "@pyreon/reactivity": "workspace:*",
+    "@pyreon/runtime-dom": "workspace:*"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.8.3",
+    "happy-dom": "^20.8.3"
+  }
+}

package/src/hooks.ts

@@ -0,0 +1,131 @@
+/**
+ * @pyreon/preact-compat/hooks
+ *
+ * Preact hooks — separate import like `preact/hooks`.
+ * All hooks run on Pyreon's reactive engine under the hood.
+ */
+
+import type { CleanupFn } from "@pyreon/core"
+import { createRef, onErrorCaptured, onMount, onUnmount, useContext } from "@pyreon/core"
+import { computed, effect, getCurrentScope, runUntracked, signal } from "@pyreon/reactivity"
+
+export { useContext }
+
+// ─── useState ────────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useState`.
+ * Returns `[getter, setter]` — call `getter()` to read, `setter(v)` to write.
+ */
+export function useState<T>(initial: T | (() => T)): [() => T, (v: T | ((prev: T) => T)) => void] {
+  const s = signal<T>(typeof initial === "function" ? (initial as () => T)() : initial)
+  const setter = (v: T | ((prev: T) => T)) => {
+    if (typeof v === "function") s.update(v as (prev: T) => T)
+    else s.set(v)
+  }
+  return [s, setter]
+}
+
+// ─── useEffect ───────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useEffect`.
+ * The `deps` array is IGNORED — Pyreon tracks dependencies automatically.
+ */
+// biome-ignore lint/suspicious/noConfusingVoidType: void is intentional — callers may return void
+export function useEffect(fn: () => CleanupFn | void, deps?: unknown[]): void {
+  if (deps !== undefined && deps.length === 0) {
+    onMount((): undefined => {
+      const cleanup = runUntracked(fn)
+      if (typeof cleanup === "function") onUnmount(cleanup)
+    })
+  } else {
+    // effect() natively supports cleanup: if fn() returns a function,
+    // it's called before re-runs and on dispose.
+    const e = effect(fn)
+    onUnmount(() => {
+      e.dispose()
+    })
+  }
+}
+
+// ─── useLayoutEffect ─────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useLayoutEffect`.
+ * No distinction from useEffect in Pyreon — same implementation.
+ */
+export const useLayoutEffect = useEffect
+
+// ─── useMemo ─────────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useMemo`.
+ * Returns a getter — call `value()` to read.
+ */
+export function useMemo<T>(fn: () => T, _deps?: unknown[]): () => T {
+  return computed(fn)
+}
+
+// ─── useCallback ─────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useCallback`.
+ * Components run once in Pyreon — returns `fn` as-is.
+ */
+export function useCallback<T extends (...args: unknown[]) => unknown>(
+  fn: T,
+  _deps?: unknown[],
+): T {
+  return fn
+}
+
+// ─── useRef ──────────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useRef`.
+ * Returns `{ current: T }`.
+ */
+export function useRef<T>(initial?: T): { current: T | null } {
+  const ref = createRef<T>()
+  if (initial !== undefined) ref.current = initial as T
+  return ref
+}
+
+// ─── useReducer ──────────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useReducer`.
+ */
+export function useReducer<S, A>(
+  reducer: (state: S, action: A) => S,
+  initial: S | (() => S),
+): [() => S, (action: A) => void] {
+  const s = signal<S>(typeof initial === "function" ? (initial as () => S)() : initial)
+  const dispatch = (action: A) => s.update((prev) => reducer(prev, action))
+  return [s, dispatch]
+}
+
+// ─── useId ───────────────────────────────────────────────────────────────────
+
+const _idCounters = new WeakMap<object, number>()
+
+/**
+ * Drop-in for Preact's `useId`.
+ * Returns a stable unique string per component instance.
+ */
+export function useId(): string {
+  const scope = getCurrentScope()
+  if (!scope) return `:r${Math.random().toString(36).slice(2, 9)}:`
+  const count = _idCounters.get(scope) ?? 0
+  _idCounters.set(scope, count + 1)
+  return `:r${count.toString(36)}:`
+}
+
+// ─── useErrorBoundary ────────────────────────────────────────────────────────
+
+/**
+ * Drop-in for Preact's `useErrorBoundary`.
+ * Wraps Pyreon's `onErrorCaptured`.
+ */
+export { onErrorCaptured as useErrorBoundary }

package/src/index.ts

@@ -0,0 +1,167 @@
+/**
+ * @pyreon/preact-compat
+ *
+ * Preact-compatible API shim that runs on Pyreon's reactive engine.
+ *
+ * Provides the core Preact API surface: h, Fragment, render, hydrate,
+ * Component class, createContext, createRef, cloneElement, toChildArray,
+ * isValidElement, and the options hook object.
+ *
+ * For hooks, import from "@pyreon/preact-compat/hooks".
+ * For signals, import from "@pyreon/preact-compat/signals".
+ */
+
+import type { Props, VNode, VNodeChild } from "@pyreon/core"
+import { createContext, createRef, Fragment, h as pyreonH, useContext } from "@pyreon/core"
+import { batch, signal } from "@pyreon/reactivity"
+import { hydrateRoot, mount } from "@pyreon/runtime-dom"
+
+// ─── Core JSX ────────────────────────────────────────────────────────────────
+
+/** Preact's hyperscript function — maps directly to Pyreon's h() */
+export { pyreonH as h }
+
+/** Alias: Preact also exports createElement */
+export const createElement = pyreonH
+
+export { Fragment }
+
+// ─── Render / Hydrate ────────────────────────────────────────────────────────
+
+/**
+ * Preact's `render(vnode, container)`.
+ * Maps to Pyreon's `mount(vnode, container)`.
+ */
+export function render(vnode: VNodeChild, container: Element): void {
+  mount(vnode, container)
+}
+
+/**
+ * Preact's `hydrate(vnode, container)`.
+ * Maps to Pyreon's `hydrateRoot(container, vnode)`.
+ */
+export function hydrate(vnode: VNodeChild, container: Element): void {
+  hydrateRoot(container, vnode as VNode)
+}
+
+// ─── Context ─────────────────────────────────────────────────────────────────
+
+export { createContext, useContext }
+
+// ─── Refs ────────────────────────────────────────────────────────────────────
+
+export { createRef }
+
+// ─── Component class ─────────────────────────────────────────────────────────
+
+/**
+ * Preact-compatible class-based Component.
+ *
+ * Wraps Pyreon's signal-based reactivity so `setState` triggers re-renders.
+ * Usage: `class MyComp extends Component { render() { ... } }`
+ */
+export class Component<
+  P extends Props = Props,
+  S extends Record<string, unknown> = Record<string, unknown>,
+> {
+  props: P
+  state: S
+  private _stateSignal: ReturnType<typeof signal<S>>
+
+  constructor(props: P) {
+    this.props = props
+    this.state = {} as S
+    this._stateSignal = signal<S>(this.state)
+  }
+
+  /**
+   * Update state — accepts a partial state object or an updater function.
+   * Merges into existing state (shallow merge, like Preact/React).
+   */
+  setState(partial: Partial<S> | ((prev: S) => Partial<S>)): void {
+    batch(() => {
+      const current = this._stateSignal()
+      const update =
+        typeof partial === "function" ? (partial as (prev: S) => Partial<S>)(current) : partial
+      const next = { ...current, ...update } as S
+      this.state = next
+      this._stateSignal.set(next)
+    })
+  }
+
+  /**
+   * Force a re-render. In Pyreon this triggers the state signal to re-fire.
+   */
+  forceUpdate(): void {
+    this._stateSignal.set({ ...this.state })
+  }
+
+  /**
+   * Override in subclass to return VNode tree.
+   */
+  render(): VNodeChild {
+    return null
+  }
+}
+
+// ─── cloneElement ────────────────────────────────────────────────────────────
+
+/**
+ * Clone a VNode with merged props (like Preact's cloneElement).
+ */
+export function cloneElement(vnode: VNode, props?: Props, ...children: VNodeChild[]): VNode {
+  const mergedProps = { ...vnode.props, ...(props ?? {}) }
+  const mergedChildren = children.length > 0 ? children : vnode.children
+  return {
+    type: vnode.type,
+    props: mergedProps,
+    children: mergedChildren,
+    key: (props?.key as string | number | null) ?? vnode.key,
+  }
+}
+
+// ─── toChildArray ────────────────────────────────────────────────────────────
+
+/**
+ * Flatten children into a flat array, filtering out null/undefined/boolean.
+ * Matches Preact's `toChildArray` utility.
+ */
+export function toChildArray(children: VNodeChild | VNodeChild[]): VNodeChild[] {
+  const result: VNodeChild[] = []
+  flatten(children, result)
+  return result
+}
+
+function flatten(value: VNodeChild | VNodeChild[], out: VNodeChild[]): void {
+  if (value == null || typeof value === "boolean") return
+  if (Array.isArray(value)) {
+    for (const child of value) {
+      flatten(child as VNodeChild, out)
+    }
+  } else {
+    out.push(value)
+  }
+}
+
+// ─── isValidElement ──────────────────────────────────────────────────────────
+
+/**
+ * Check if a value is a VNode (like Preact's isValidElement).
+ */
+export function isValidElement(x: unknown): x is VNode {
+  return (
+    x !== null &&
+    typeof x === "object" &&
+    "type" in (x as Record<string, unknown>) &&
+    "props" in (x as Record<string, unknown>) &&
+    "children" in (x as Record<string, unknown>)
+  )
+}
+
+// ─── options ─────────────────────────────────────────────────────────────────
+
+/**
+ * Preact's plugin/hook system. Exposed as an empty object for compatibility
+ * with libraries that check for `options._hook`, `options.vnode`, etc.
+ */
+export const options: Record<string, unknown> = {}

package/src/signals.ts

@@ -0,0 +1,92 @@
+/**
+ * @pyreon/preact-compat/signals
+ *
+ * Preact Signals compatibility layer (`@preact/signals` style).
+ * Wraps Pyreon's signal/computed in `{ value }` accessor objects.
+ */
+
+import type { Effect } from "@pyreon/reactivity"
+import {
+  batch as pyreonBatch,
+  computed as pyreonComputed,
+  effect as pyreonEffect,
+  signal as pyreonSignal,
+} from "@pyreon/reactivity"
+
+// ─── Signal ──────────────────────────────────────────────────────────────────
+
+export interface ReadonlySignal<T> {
+  readonly value: T
+  peek(): T
+}
+
+export interface WritableSignal<T> extends ReadonlySignal<T> {
+  value: T
+}
+
+/**
+ * Create a Preact-style signal with `.value` accessor.
+ *
+ * @example
+ * const count = signal(0)
+ * count.value++       // write
+ * console.log(count.value)  // read (tracked)
+ */
+export function signal<T>(initial: T): WritableSignal<T> {
+  const s = pyreonSignal<T>(initial)
+  return {
+    get value(): T {
+      return s()
+    },
+    set value(v: T) {
+      s.set(v)
+    },
+    peek(): T {
+      return s.peek()
+    },
+  }
+}
+
+// ─── Computed ────────────────────────────────────────────────────────────────
+
+/**
+ * Create a Preact-style computed with `.value` accessor.
+ *
+ * @example
+ * const doubled = computed(() => count.value * 2)
+ * console.log(doubled.value)
+ */
+export function computed<T>(fn: () => T): ReadonlySignal<T> {
+  const c = pyreonComputed(fn)
+  return {
+    get value(): T {
+      return c()
+    },
+    peek(): T {
+      // computed doesn't have peek — just read the value untracked
+      return c()
+    },
+  }
+}
+
+// ─── Effect ──────────────────────────────────────────────────────────────────
+
+/**
+ * Run a side-effect that auto-tracks signal reads.
+ * Returns a dispose function.
+ */
+// biome-ignore lint/suspicious/noConfusingVoidType: void is intentional — callers may return void
+export function effect(fn: () => void | (() => void)): () => void {
+  // Pyreon's effect() natively supports cleanup return values
+  const e: Effect = pyreonEffect(fn)
+  return () => {
+    e.dispose()
+  }
+}
+
+// ─── Batch ───────────────────────────────────────────────────────────────────
+
+/**
+ * Batch multiple signal writes into a single update.
+ */
+export { pyreonBatch as batch }