@pyreon/preact-compat 0.13.1 → 0.15.0

package/README.md

@@ -124,3 +124,23 @@ Preact Signals API (mirrors `@preact/signals`).
 - **`computed(fn)`** -- returns `{ value }` read-only accessor.
 - **`effect(fn)`** -- reactive side effect, returns dispose function.
 - **`batch(fn)`** -- coalesce multiple signal writes.
+
+## Composing Pyreon framework components inside preact-compat
+
+Pyreon's framework components (`RouterView`, `PyreonUI`, `FormProvider`, `QueryClientProvider`, …) ship marked with `nativeCompat()` from `@pyreon/core` — preact-compat's JSX runtime detects the marker and routes them through Pyreon's setup frame instead of the compat wrapper. **You don't need to do anything** for the 24 components shipped marked.
+
+If you write your **own** Pyreon-flavored helper that uses `provide()` / `onMount()` / `onUnmount()` / `effect()` at component-body scope and use it in a preact-compat app, mark it explicitly:
+
+```tsx
+import { nativeCompat, provide, createContext } from '@pyreon/core'
+
+const MyCtx = createContext<string>('default')
+
+function MyProvider(props: { value: string; children?: unknown }) {
+  provide(MyCtx, props.value)
+  return props.children as never
+}
+nativeCompat(MyProvider) // ← required for compat-mode apps
+```
+
+Without the marker, the wrapper relocates the body's render context and `provide()` lands in a torn-down context stack — descendants read the default. See [`packages/core/core/src/compat-marker.ts`](../../core/core/src/compat-marker.ts) for details.

package/lib/analysis/hooks.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"hooks.js","children":[{"name":"src","children":[{"uid":"48c2c8ab-1","name":"jsx-runtime.ts"},{"uid":"48c2c8ab-3","name":"hooks.ts"}]}]}],"isRoot":true},"nodeParts":{"48c2c8ab-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"48c2c8ab-0"},"48c2c8ab-3":{"renderedLength":4368,"gzipLength":1216,"brotliLength":0,"metaUid":"48c2c8ab-2"}},"nodeMetas":{"48c2c8ab-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"hooks.js":"48c2c8ab-1"},"imported":[{"uid":"48c2c8ab-4"},{"uid":"48c2c8ab-5"}],"importedBy":[{"uid":"48c2c8ab-2"}]},"48c2c8ab-2":{"id":"/src/hooks.ts","moduleParts":{"hooks.js":"48c2c8ab-3"},"imported":[{"uid":"48c2c8ab-4"},{"uid":"48c2c8ab-0"}],"importedBy":[],"isEntry":true},"48c2c8ab-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"48c2c8ab-2"},{"uid":"48c2c8ab-0"}]},"48c2c8ab-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"48c2c8ab-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"hooks.js","children":[{"name":"src","children":[{"uid":"3bf7c0f6-1","name":"jsx-runtime.ts"},{"uid":"3bf7c0f6-3","name":"hooks.ts"}]}]}],"isRoot":true},"nodeParts":{"3bf7c0f6-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"3bf7c0f6-0"},"3bf7c0f6-3":{"renderedLength":7168,"gzipLength":2046,"brotliLength":0,"metaUid":"3bf7c0f6-2"}},"nodeMetas":{"3bf7c0f6-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"hooks.js":"3bf7c0f6-1"},"imported":[{"uid":"3bf7c0f6-4"},{"uid":"3bf7c0f6-5"}],"importedBy":[{"uid":"3bf7c0f6-2"}]},"3bf7c0f6-2":{"id":"/src/hooks.ts","moduleParts":{"hooks.js":"3bf7c0f6-3"},"imported":[{"uid":"3bf7c0f6-4"},{"uid":"3bf7c0f6-0"}],"importedBy":[],"isEntry":true},"3bf7c0f6-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"3bf7c0f6-2"},{"uid":"3bf7c0f6-0"}]},"3bf7c0f6-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"3bf7c0f6-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"e7c3b550-1"}]}],"isRoot":true},"nodeParts":{"e7c3b550-1":{"renderedLength":2789,"gzipLength":1150,"brotliLength":0,"metaUid":"e7c3b550-0"}},"nodeMetas":{"e7c3b550-0":{"id":"/src/index.ts","moduleParts":{"index.js":"e7c3b550-1"},"imported":[{"uid":"e7c3b550-2"},{"uid":"e7c3b550-3"},{"uid":"e7c3b550-4"}],"importedBy":[],"isEntry":true},"e7c3b550-2":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"e7c3b550-0"}]},"e7c3b550-3":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"e7c3b550-0"}]},"e7c3b550-4":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"e7c3b550-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src/index.ts","uid":"2f430366-1"}]}],"isRoot":true},"nodeParts":{"2f430366-1":{"renderedLength":3276,"gzipLength":1311,"brotliLength":0,"metaUid":"2f430366-0"}},"nodeMetas":{"2f430366-0":{"id":"/src/index.ts","moduleParts":{"index.js":"2f430366-1"},"imported":[{"uid":"2f430366-2"},{"uid":"2f430366-3"},{"uid":"2f430366-4"}],"importedBy":[],"isEntry":true},"2f430366-2":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"2f430366-0"}]},"2f430366-3":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"2f430366-0"}]},"2f430366-4":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"2f430366-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/jsx-runtime.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"0c0e5fed-1","name":"jsx-runtime.ts"},{"uid":"0c0e5fed-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"0c0e5fed-1":{"renderedLength":2208,"gzipLength":798,"brotliLength":0,"metaUid":"0c0e5fed-0"},"0c0e5fed-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"0c0e5fed-2"}},"nodeMetas":{"0c0e5fed-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"0c0e5fed-1"},"imported":[{"uid":"0c0e5fed-4"},{"uid":"0c0e5fed-5"}],"importedBy":[{"uid":"0c0e5fed-2"}]},"0c0e5fed-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"0c0e5fed-3"},"imported":[{"uid":"0c0e5fed-0"}],"importedBy":[],"isEntry":true},"0c0e5fed-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"0c0e5fed-0"}]},"0c0e5fed-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"0c0e5fed-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"jsx-runtime.js","children":[{"name":"src","children":[{"uid":"86b5580e-1","name":"jsx-runtime.ts"},{"uid":"86b5580e-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"86b5580e-1":{"renderedLength":5335,"gzipLength":1477,"brotliLength":0,"metaUid":"86b5580e-0"},"86b5580e-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"86b5580e-2"}},"nodeMetas":{"86b5580e-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"86b5580e-1"},"imported":[{"uid":"86b5580e-4"},{"uid":"86b5580e-5"}],"importedBy":[{"uid":"86b5580e-2"}]},"86b5580e-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"86b5580e-3"},"imported":[{"uid":"86b5580e-0"}],"importedBy":[],"isEntry":true},"86b5580e-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"86b5580e-0"}]},"86b5580e-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"86b5580e-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/analysis/signals.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"signals.js","children":[{"name":"src/signals.ts","uid":"ef3b7036-1"}]}],"isRoot":true},"nodeParts":{"ef3b7036-1":{"renderedLength":856,"gzipLength":375,"brotliLength":0,"metaUid":"ef3b7036-0"}},"nodeMetas":{"ef3b7036-0":{"id":"/src/signals.ts","moduleParts":{"signals.js":"ef3b7036-1"},"imported":[{"uid":"ef3b7036-2"}],"importedBy":[],"isEntry":true},"ef3b7036-2":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"ef3b7036-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"signals.js","children":[{"name":"src/signals.ts","uid":"660af5f2-1"}]}],"isRoot":true},"nodeParts":{"660af5f2-1":{"renderedLength":876,"gzipLength":383,"brotliLength":0,"metaUid":"660af5f2-0"}},"nodeMetas":{"660af5f2-0":{"id":"/src/signals.ts","moduleParts":{"signals.js":"660af5f2-1"},"imported":[{"uid":"660af5f2-2"}],"importedBy":[],"isEntry":true},"660af5f2-2":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"660af5f2-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/hooks.js

@@ -23,23 +23,38 @@ function depsChanged(a, b) {
 	for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return true;
 	return false;
 }
+function shallowEqual(a, b) {
+	const keysA = Object.keys(a);
+	const keysB = Object.keys(b);
+	if (keysA.length !== keysB.length) return false;
+	for (const k of keysA) if (!Object.is(a[k], b[k])) return false;
+	return true;
+}
 /**
 * Preact-compatible `useState` — returns `[value, setter]`.
 * Triggers a component re-render when the setter is called.
+*
+* The setter has stable identity across renders (same reference every time).
 */
 function useState(initial) {
 	const ctx = requireCtx();
 	const idx = getHookIndex();
-	if (ctx.hooks.length <= idx) ctx.hooks.push(typeof initial === "function" ? initial() : initial);
-	const value = ctx.hooks[idx];
-	const setter = (v) => {
-		const current = ctx.hooks[idx];
-		const next = typeof v === "function" ? v(current) : v;
-		if (Object.is(current, next)) return;
-		ctx.hooks[idx] = next;
-		ctx.scheduleRerender();
-	};
-	return [value, setter];
+	if (ctx.hooks.length <= idx) {
+		const entry = {
+			value: typeof initial === "function" ? initial() : initial,
+			setter: null
+		};
+		entry.setter = (v) => {
+			const current = entry.value;
+			const next = typeof v === "function" ? v(current) : v;
+			if (Object.is(current, next)) return;
+			entry.value = next;
+			ctx.scheduleRerender();
+		};
+		ctx.hooks.push(entry);
+	}
+	const entry = ctx.hooks[idx];
+	return [entry.value, entry.setter];
 }
 /**
 * Preact-compatible `useEffect` — runs after render when deps change.
@@ -129,20 +144,33 @@ function useRef(initial) {
 }
 /**
 * Preact-compatible `useReducer` — returns `[state, dispatch]`.
+* Supports the 3-argument form: `useReducer(reducer, initialArg, init)`.
+*
+* Dispatch has stable identity across renders (same reference every time).
 */
-function useReducer(reducer, initial) {
+function useReducer(reducer, initialArg, init) {
 	const ctx = requireCtx();
 	const idx = getHookIndex();
-	if (ctx.hooks.length <= idx) ctx.hooks.push(typeof initial === "function" ? initial() : initial);
-	const state = ctx.hooks[idx];
-	const dispatch = (action) => {
-		const current = ctx.hooks[idx];
-		const next = reducer(current, action);
-		if (Object.is(current, next)) return;
-		ctx.hooks[idx] = next;
-		ctx.scheduleRerender();
-	};
-	return [state, dispatch];
+	if (ctx.hooks.length <= idx) {
+		let initial;
+		if (init) initial = init(initialArg);
+		else if (typeof initialArg === "function") initial = initialArg();
+		else initial = initialArg;
+		const entry = {
+			value: initial,
+			dispatch: null
+		};
+		entry.dispatch = (action) => {
+			const current = entry.value;
+			const next = reducer(current, action);
+			if (Object.is(current, next)) return;
+			entry.value = next;
+			ctx.scheduleRerender();
+		};
+		ctx.hooks.push(entry);
+	}
+	const entry = ctx.hooks[idx];
+	return [entry.value, entry.dispatch];
 }
 let _idCounter = 0;
 /**
@@ -157,25 +185,86 @@ function useId() {
 /**
 * Preact-compatible `memo` — wraps a component to skip re-render when props
 * are shallowly equal.
+*
+* Each component INSTANCE gets its own props/result cache via a hook slot,
+* so two `<MemoComp />` usages don't share memoization state.
 */
 function memo(component, areEqual) {
-	const compare = areEqual ?? ((a, b) => {
-		const keysA = Object.keys(a);
-		const keysB = Object.keys(b);
-		if (keysA.length !== keysB.length) return false;
-		for (const k of keysA) if (!Object.is(a[k], b[k])) return false;
-		return true;
-	});
-	let prevProps = null;
-	let prevResult = null;
-	return (props) => {
-		if (prevProps !== null && compare(prevProps, props)) return prevResult;
-		prevProps = props;
-		prevResult = component(props);
-		return prevResult;
+	const compare = areEqual ?? shallowEqual;
+	let _fallbackPrevProps = null;
+	let _fallbackPrevResult = null;
+	const memoized = (props) => {
+		const ctx = getCurrentCtx();
+		if (ctx) {
+			const idx = getHookIndex();
+			if (ctx.hooks.length <= idx) ctx.hooks.push({
+				prevProps: null,
+				prevResult: null
+			});
+			const cache = ctx.hooks[idx];
+			if (cache.prevProps !== null && compare(cache.prevProps, props)) return cache.prevResult;
+			cache.prevProps = props;
+			cache.prevResult = component(props);
+			return cache.prevResult;
+		}
+		if (_fallbackPrevProps !== null && compare(_fallbackPrevProps, props)) return _fallbackPrevResult;
+		_fallbackPrevProps = props;
+		_fallbackPrevResult = component(props);
+		return _fallbackPrevResult;
+	};
+	memoized.displayName = component.displayName || component.name || "Memo";
+	return memoized;
+}
+/**
+* Preact-compatible `forwardRef` — pass-through in Pyreon.
+* Refs are regular props in Pyreon, so no wrapper is needed.
+* The render function receives (props, ref) — we merge ref into props.
+*/
+function forwardRef(render) {
+	const forwarded = (props) => {
+		const { ref, ...rest } = props;
+		return render(rest, ref ?? null);
 	};
+	forwarded.displayName = render.displayName || render.name || "ForwardRef";
+	return forwarded;
+}
+/**
+* Preact-compatible `useImperativeHandle`.
+*/
+function useImperativeHandle(ref, init, deps) {
+	useLayoutEffect(() => {
+		if (ref) ref.current = init();
+		return () => {
+			if (ref) ref.current = null;
+		};
+	}, deps);
+}
+/**
+* Preact-compatible `useDebugValue` — no-op in Pyreon (no Preact DevTools integration).
+*/
+function useDebugValue(_value, _format) {}
+/**
+* Preact-compatible `useTransition` — returns `[isPending, startTransition]`.
+*
+* In Pyreon's signal-based reactivity there is no concept of concurrent
+* rendering lanes. The callback is executed synchronously and `isPending`
+* is always `false`. This shim exists so Preact/React code that uses
+* `useTransition` compiles and runs without changes.
+*/
+function useTransition() {
+	return [false, (fn) => fn()];
+}
+/**
+* Preact-compatible `useDeferredValue` — returns the value as-is.
+*
+* In Pyreon's signal-based reactivity there are no concurrent rendering lanes,
+* so the value is never "deferred". This shim exists so Preact/React code that
+* uses `useDeferredValue` compiles and runs without changes.
+*/
+function useDeferredValue(value) {
+	return value;
 }
 
 //#endregion
-export { memo, useCallback, useContext, useEffect, onErrorCaptured as useErrorBoundary, useId, useLayoutEffect, useMemo, useReducer, useRef, useState };
+export { forwardRef, memo, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, onErrorCaptured as useErrorBoundary, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
 //# sourceMappingURL=hooks.js.map

package/lib/index.js

@@ -1,4 +1,4 @@
-import { Fragment, createContext as createContext$1, createRef, h as pyreonH, provide, useContext } from "@pyreon/core";
+import { ErrorBoundary, Fragment, Portal, Suspense, createContext as createContext$1, createRef, h as pyreonH, lazy, nativeCompat, provide, useContext } from "@pyreon/core";
 import { batch, signal } from "@pyreon/reactivity";
 import { hydrateRoot, mount } from "@pyreon/runtime-dom";
 
@@ -28,6 +28,7 @@ function createContext(defaultValue) {
 		provide(ctx, props.value);
 		return props.children;
 	});
+	nativeCompat(Provider);
 	return {
 		...ctx,
 		Provider
@@ -43,6 +44,7 @@ var Component = class {
 	props;
 	state;
 	_stateSignal;
+	_lastResult;
 	constructor(props) {
 		this.props = props;
 		this.state = {};
@@ -78,13 +80,19 @@ var Component = class {
 	}
 };
 /**
+* Preact-compatible PureComponent — extends Component.
+* In Pyreon's compat layer this behaves identically to Component
+* (signal-based reactivity already avoids unnecessary re-renders).
+*/
+var PureComponent = class extends Component {};
+/**
 * Clone a VNode with merged props (like Preact's cloneElement).
 */
 function cloneElement(vnode, props, ...children) {
-	const mergedProps = {
+	const mergedProps = props ? {
 		...vnode.props,
-		...props ?? {}
-	};
+		...props
+	} : { ...vnode.props };
 	const mergedChildren = children.length > 0 ? children : vnode.children;
 	return {
 		type: vnode.type,
@@ -110,11 +118,21 @@ function isValidElement(x) {
 	return x !== null && typeof x === "object" && "type" in x && "props" in x && "children" in x;
 }
 /**
+* Preact-compatible `createPortal(children, target)`.
+*/
+function createPortal(children, target) {
+	return Portal({
+		target,
+		children
+	});
+}
+/**
 * Preact's plugin/hook system. Exposed as an empty object for compatibility
 * with libraries that check for `options._hook`, `options.vnode`, etc.
 */
 const options = {};
+const version = "10.0.0-pyreon";
 
 //#endregion
-export { Component, Fragment, cloneElement, createContext, createElement, createRef, pyreonH as h, hydrate, isValidElement, options, render, toChildArray, useContext };
+export { Component, ErrorBoundary, Fragment, PureComponent, Suspense, cloneElement, createContext, createElement, createPortal, createRef, pyreonH as h, hydrate, isValidElement, lazy, options, render, toChildArray, useContext, version };
 //# sourceMappingURL=index.js.map

package/lib/jsx-runtime.js

@@ -1,4 +1,4 @@
-import { Fragment, h } from "@pyreon/core";
+import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
 import { signal } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
@@ -32,10 +32,60 @@ function scheduleEffects(ctx, entries) {
 		}
 	});
 }
+function isClassComponent(type) {
+	return type.prototype != null && typeof type.prototype.render === "function";
+}
+function wrapClassComponent(ClassComp) {
+	const wrapped = ((props) => {
+		const instance = new ClassComp(props);
+		const version = signal(0);
+		let updateScheduled = false;
+		const origSetState = instance.setState.bind(instance);
+		instance.setState = (partial) => {
+			origSetState(partial);
+			if (!updateScheduled) {
+				updateScheduled = true;
+				queueMicrotask(() => {
+					updateScheduled = false;
+					version.set(version.peek() + 1);
+				});
+			}
+		};
+		instance.forceUpdate = () => {
+			version.set(version.peek() + 1);
+		};
+		let didMountFired = false;
+		onUnmount(() => {
+			if (typeof instance.componentWillUnmount === "function") instance.componentWillUnmount();
+		});
+		return () => {
+			const ver = version();
+			instance.props = props;
+			if (didMountFired && ver > 0 && typeof instance.shouldComponentUpdate === "function") {
+				if (!instance.shouldComponentUpdate(props, instance.state)) return instance._lastResult;
+			}
+			const result = instance.render();
+			instance._lastResult = result;
+			if (!didMountFired) {
+				didMountFired = true;
+				if (typeof instance.componentDidMount === "function") queueMicrotask(() => instance.componentDidMount());
+			} else if (ver > 0) {
+				if (typeof instance.componentDidUpdate === "function") queueMicrotask(() => instance.componentDidUpdate());
+			}
+			return result;
+		};
+	});
+	return wrapped;
+}
 const _wrapperCache = /* @__PURE__ */ new WeakMap();
 function wrapCompatComponent(preactComponent) {
 	let wrapped = _wrapperCache.get(preactComponent);
 	if (wrapped) return wrapped;
+	if (isClassComponent(preactComponent)) {
+		wrapped = wrapClassComponent(preactComponent);
+		_wrapperCache.set(preactComponent, wrapped);
+		return wrapped;
+	}
 	wrapped = ((props) => {
 		const ctx = {
 			hooks: [],
@@ -54,6 +104,13 @@ function wrapCompatComponent(preactComponent) {
 				if (!ctx.unmounted) version.set(version.peek() + 1);
 			});
 		};
+		onUnmount(() => {
+			ctx.unmounted = true;
+			for (const hook of ctx.hooks) if (hook && typeof hook === "object" && "cleanup" in hook) {
+				const entry = hook;
+				if (typeof entry.cleanup === "function") entry.cleanup();
+			}
+		});
 		return () => {
 			version();
 			beginRender(ctx);
@@ -75,11 +132,45 @@ function jsx(type, props, key) {
 		...rest,
 		key
 	} : rest;
-	if (typeof type === "function") return h(wrapCompatComponent(type), children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
-	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
+	if (typeof type === "function") {
+		const componentProps = children !== void 0 ? {
+			...propsWithKey,
+			children
+		} : propsWithKey;
+		if (isNativeCompat(type)) return h(type, componentProps);
+		return h(wrapCompatComponent(type), componentProps);
+	}
+	const childArray = children === void 0 ? [] : Array.isArray(children) ? children : [children];
+	if (typeof type === "string") {
+		if (propsWithKey.className !== void 0) {
+			propsWithKey.class = propsWithKey.className;
+			delete propsWithKey.className;
+		}
+		if (propsWithKey.htmlFor !== void 0) {
+			propsWithKey.for = propsWithKey.htmlFor;
+			delete propsWithKey.htmlFor;
+		}
+		if ((type === "input" || type === "textarea" || type === "select") && propsWithKey.onChange !== void 0) {
+			if (propsWithKey.onInput === void 0) propsWithKey.onInput = propsWithKey.onChange;
+			delete propsWithKey.onChange;
+		}
+		if (propsWithKey.autoFocus !== void 0) {
+			propsWithKey.autofocus = propsWithKey.autoFocus;
+			delete propsWithKey.autoFocus;
+		}
+		if (type === "input" || type === "textarea") {
+			if (propsWithKey.defaultValue !== void 0 && propsWithKey.value === void 0) {
+				propsWithKey.value = propsWithKey.defaultValue;
+				delete propsWithKey.defaultValue;
+			}
+			if (propsWithKey.defaultChecked !== void 0 && propsWithKey.checked === void 0) {
+				propsWithKey.checked = propsWithKey.defaultChecked;
+				delete propsWithKey.defaultChecked;
+			}
+		}
+		delete propsWithKey.suppressHydrationWarning;
+	}
+	return h(type, propsWithKey, ...childArray);
 }
 const jsxs = jsx;
 

package/lib/signals.js

@@ -1,4 +1,4 @@
-import { batch as pyreonBatch, computed as computed$1, effect as effect$1, signal as signal$1 } from "@pyreon/reactivity";
+import { batch as pyreonBatch, computed as computed$1, effect as effect$1, runUntracked, signal as signal$1 } from "@pyreon/reactivity";
 
 //#region src/signals.ts
 /**
@@ -37,7 +37,7 @@ function computed(fn) {
 			return c();
 		},
 		peek() {
-			return c();
+			return runUntracked(() => c());
 		}
 	};
 }

package/lib/types/hooks.d.ts

@@ -4,6 +4,8 @@ import { VNodeChild, onErrorCaptured, useContext } from "@pyreon/core";
 /**
  * Preact-compatible `useState` — returns `[value, setter]`.
  * Triggers a component re-render when the setter is called.
+ *
+ * The setter has stable identity across renders (same reference every time).
  */
 declare function useState<T>(initial: T | (() => T)): [T, (v: T | ((prev: T) => T)) => void];
 /**
@@ -31,8 +33,11 @@ declare function useRef<T>(initial?: T): {
 };
 /**
  * Preact-compatible `useReducer` — returns `[state, dispatch]`.
+ * Supports the 3-argument form: `useReducer(reducer, initialArg, init)`.
+ *
+ * Dispatch has stable identity across renders (same reference every time).
  */
-declare function useReducer<S, A>(reducer: (state: S, action: A) => S, initial: S | (() => S)): [S, (action: A) => void];
+declare function useReducer<S, A>(reducer: (state: S, action: A) => S, initialArg: S | (() => S), init?: (arg: S) => S): [S, (action: A) => void];
 /**
  * Preact-compatible `useId` — returns a stable unique string per hook call.
  */
@@ -40,8 +45,50 @@ declare function useId(): string;
 /**
  * Preact-compatible `memo` — wraps a component to skip re-render when props
  * are shallowly equal.
+ *
+ * Each component INSTANCE gets its own props/result cache via a hook slot,
+ * so two `<MemoComp />` usages don't share memoization state.
  */
 declare function memo<P extends Record<string, unknown>>(component: (props: P) => VNodeChild, areEqual?: (prevProps: P, nextProps: P) => boolean): (props: P) => VNodeChild;
+/**
+ * Preact-compatible `forwardRef` — pass-through in Pyreon.
+ * Refs are regular props in Pyreon, so no wrapper is needed.
+ * The render function receives (props, ref) — we merge ref into props.
+ */
+declare function forwardRef<P extends Record<string, unknown>>(render: (props: P, ref: {
+  current: unknown;
+} | null) => VNodeChild): (props: P & {
+  ref?: {
+    current: unknown;
+  } | null;
+}) => VNodeChild;
+/**
+ * Preact-compatible `useImperativeHandle`.
+ */
+declare function useImperativeHandle<T>(ref: {
+  current: T | null;
+} | null | undefined, init: () => T, deps?: unknown[]): void;
+/**
+ * Preact-compatible `useDebugValue` — no-op in Pyreon (no Preact DevTools integration).
+ */
+declare function useDebugValue<T>(_value: T, _format?: (v: T) => unknown): void;
+/**
+ * Preact-compatible `useTransition` — returns `[isPending, startTransition]`.
+ *
+ * In Pyreon's signal-based reactivity there is no concept of concurrent
+ * rendering lanes. The callback is executed synchronously and `isPending`
+ * is always `false`. This shim exists so Preact/React code that uses
+ * `useTransition` compiles and runs without changes.
+ */
+declare function useTransition(): [boolean, (fn: () => void) => void];
+/**
+ * Preact-compatible `useDeferredValue` — returns the value as-is.
+ *
+ * In Pyreon's signal-based reactivity there are no concurrent rendering lanes,
+ * so the value is never "deferred". This shim exists so Preact/React code that
+ * uses `useDeferredValue` compiles and runs without changes.
+ */
+declare function useDeferredValue<T>(value: T): T;
 //#endregion
-export { memo, useCallback, useContext, useEffect, onErrorCaptured as useErrorBoundary, useId, useLayoutEffect, useMemo, useReducer, useRef, useState };
+export { forwardRef, memo, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, onErrorCaptured as useErrorBoundary, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
 //# sourceMappingURL=hooks2.d.ts.map

package/lib/types/index.d.ts

@@ -1,4 +1,5 @@
-import { ComponentFn, Fragment, Props, VNode, VNodeChild, createRef, h as pyreonH, useContext } from "@pyreon/core";
+import { ComponentFn, ErrorBoundary, Fragment, Props, Suspense, VNode, VNodeChild, createRef, h as pyreonH, lazy, useContext } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
 
 //#region src/index.d.ts
 /** Alias: Preact also exports createElement */
@@ -34,7 +35,12 @@ declare function createContext<T>(defaultValue: T): PreactContext<T>;
 declare class Component<P extends Props = Props, S extends Record<string, unknown> = Record<string, unknown>> {
   props: P;
   state: S;
-  private _stateSignal;
+  _stateSignal: ReturnType<typeof signal<S>>;
+  _lastResult?: VNodeChild;
+  componentDidMount?(): void;
+  componentDidUpdate?(): void;
+  componentWillUnmount?(): void;
+  shouldComponentUpdate?(nextProps: P, nextState: S): boolean;
   constructor(props: P);
   /**
    * Update state — accepts a partial state object or an updater function.
@@ -50,6 +56,12 @@ declare class Component<P extends Props = Props, S extends Record<string, unknow
    */
   render(): VNodeChild;
 }
+/**
+ * Preact-compatible PureComponent — extends Component.
+ * In Pyreon's compat layer this behaves identically to Component
+ * (signal-based reactivity already avoids unnecessary re-renders).
+ */
+declare class PureComponent<P extends Props = Props, S extends Record<string, unknown> = Record<string, unknown>> extends Component<P, S> {}
 /**
  * Clone a VNode with merged props (like Preact's cloneElement).
  */
@@ -64,11 +76,16 @@ declare function toChildArray(children: NestedChildren): VNodeChild[];
  * Check if a value is a VNode (like Preact's isValidElement).
  */
 declare function isValidElement(x: unknown): x is VNode;
+/**
+ * Preact-compatible `createPortal(children, target)`.
+ */
+declare function createPortal(children: VNodeChild, target: Element): VNodeChild;
 /**
  * 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>;
+declare const version = "10.0.0-pyreon";
 //#endregion
-export { Component, Fragment, PreactContext, cloneElement, createContext, createElement, createRef, pyreonH as h, hydrate, isValidElement, options, render, toChildArray, useContext };
+export { Component, ErrorBoundary, Fragment, PreactContext, PureComponent, Suspense, cloneElement, createContext, createElement, createPortal, createRef, pyreonH as h, hydrate, isValidElement, lazy, options, render, toChildArray, useContext, version };
 //# sourceMappingURL=index2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/preact-compat",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "description": "Preact-compatible API shim for Pyreon — write Preact-style code that runs on Pyreon's reactive engine",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/preact-compat#readme",
   "bugs": {
@@ -14,6 +14,7 @@
   },
   "files": [
     "lib",
+    "!lib/**/*.map",
     "src",
     "README.md",
     "LICENSE"
@@ -57,17 +58,20 @@
     "build": "vl_rolldown_build",
     "dev": "vl_rolldown_build-watch",
     "test": "vitest run",
+    "test:browser": "vitest run --config ./vitest.browser.config.ts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint .",
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.13.1",
-    "@pyreon/reactivity": "^0.13.1",
-    "@pyreon/runtime-dom": "^0.13.1"
+    "@pyreon/core": "^0.15.0",
+    "@pyreon/reactivity": "^0.15.0",
+    "@pyreon/runtime-dom": "^0.15.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
+    "@pyreon/test-utils": "^0.13.2",
+    "@vitest/browser-playwright": "^4.1.4",
     "happy-dom": "^20.8.3"
   }
 }