@pyreon/preact-compat 0.21.0 → 0.23.0

package/README.md

@@ -1,6 +1,8 @@
 # @pyreon/preact-compat
 
-Preact-compatible API shim that runs on Pyreon's signal-based reactive engine. Migrate Preact code by swapping the import path.
+Preact-compatible API shim — write Preact-style code that runs on Pyreon's reactive engine.
+
+`@pyreon/preact-compat` mirrors Preact's module structure (`@pyreon/preact-compat`, `@pyreon/preact-compat/hooks`, `@pyreon/preact-compat/signals`) and provides `h` / `Fragment` / `render` / `hydrate` / `Component` / `PureComponent` / `createContext` / `createRef` / `cloneElement` / `createPortal` / `lazy` / `Suspense` / `ErrorBoundary` plus the standard hooks set, all backed by Pyreon's signal-based reactivity. **This is a compat shim, not Preact** — it intentionally diverges in places where Preact's render-on-state-change model conflicts with Pyreon's run-once + fine-grained-reactivity model. The escape hatch is to drop the compat layer and use Pyreon's native API directly.
 
 ## Install
 
@@ -8,139 +10,124 @@ Preact-compatible API shim that runs on Pyreon's signal-based reactive engine. M
 bun add @pyreon/preact-compat
 ```
 
-## Quick Start
+Then alias your Preact imports (or use `pyreon({ compat: 'preact' })` from `@pyreon/vite-plugin` for zero code changes):
+
+```ts
+import { h, render, Fragment } from '@pyreon/preact-compat'
+import { useState, useEffect } from '@pyreon/preact-compat/hooks'
+import { signal, computed } from '@pyreon/preact-compat/signals'
+```
+
+## Quick start
 
 ```tsx
-// Replace:
-// import { render } from "preact"
-// import { useState, useEffect } from "preact/hooks"
-// With:
-import { render } from '@pyreon/preact-compat'
+import { h, render } from '@pyreon/preact-compat'
 import { useState, useEffect } from '@pyreon/preact-compat/hooks'
 
 function Counter() {
   const [count, setCount] = useState(0)
+
   useEffect(() => {
-    console.log('count changed:', count())
+    document.title = `Count: ${count()}`
   })
-  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>
-}
-
-render(<Counter />, document.getElementById('app')!)
-```
-
-### Signals
-
-```tsx
-import { signal, computed, effect } from '@pyreon/preact-compat/signals'
-
-const count = signal(0)
-const doubled = computed(() => count.value * 2)
 
-function Display() {
-  effect(() => console.log('doubled:', doubled.value))
   return (
     <div>
-      <span>{doubled.value}</span>
-      <button onClick={() => count.value++}>+</button>
+      <p>Count: {count()}</p>
+      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
     </div>
   )
 }
-```
-
-### Class Components
 
-```tsx
-import { Component } from '@pyreon/preact-compat'
+render(<Counter />, document.getElementById('app')!)
+```
 
-interface Props {
-  name: string
-}
-interface State {
-  clicked: boolean
-}
+## Subpath exports
 
-class Greeting extends Component<Props, State> {
-  state = { clicked: false }
+| Subpath                                 | Surface                                                                                       |
+| --------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `@pyreon/preact-compat`                 | Core: `h` / `createElement`, `Fragment`, `render`, `hydrate`, `Component`, `PureComponent`, `createContext` / `useContext`, `createRef`, `cloneElement`, `toChildArray`, `isValidElement`, `createPortal`, `lazy`, `Suspense`, `ErrorBoundary`, `options`, `version` |
+| `@pyreon/preact-compat/hooks`           | `useState`, `useReducer`, `useEffect`, `useLayoutEffect`, `useMemo`, `useCallback`, `useRef`, `useId`, `memo`, `forwardRef`, `useImperativeHandle`, `useDebugValue`, `useTransition`, `useDeferredValue`, `useErrorBoundary` |
+| `@pyreon/preact-compat/signals`         | `signal`, `computed`, `effect`, `batch`, `ReadonlySignal`, `WritableSignal`                   |
+| `@pyreon/preact-compat/jsx-runtime`     | JSX automatic runtime (`jsx`, `jsxs`, `Fragment`)                                              |
+| `@pyreon/preact-compat/jsx-dev-runtime` | Dev variant — same runtime, with source location info                                          |
 
-  handleClick = () => {
-    this.setState({ clicked: true })
-  }
+## Key differences from Preact
 
-  render() {
-    return (
-      <div>
-        <p>Hello, {this.props.name}!</p>
-        <button onClick={this.handleClick}>{this.state.clicked ? 'Clicked' : 'Click me'}</button>
-      </div>
-    )
-  }
-}
-```
+| Behavior            | Preact                                | `@pyreon/preact-compat`                                                |
+| ------------------- | ------------------------------------- | ---------------------------------------------------------------------- |
+| Component execution | Re-runs render on every state change  | Runs **once** (setup phase)                                            |
+| `useState` getter   | Returns the value directly            | Returns a **getter function** — call `count()` to read                 |
+| `useEffect` deps    | Controls when the effect re-runs      | Deps array is **ignored** — Pyreon tracks dependencies automatically   |
+| `useCallback`       | Memoizes across renders               | **No-op** — returns `fn` as-is                                         |
+| `useMemo`           | Returns the memoized value            | Returns a **getter function** — call `value()` to read                 |
+| `useLayoutEffect`   | Fires synchronously before paint      | Same as `useEffect`                                                    |
+| Signals `.value`    | Native Preact Signals API             | Wrapped Pyreon signals with the same `.value` interface                |
+| Class components    | Full lifecycle support                | `setState` and `forceUpdate` work; lifecycle methods are not called    |
+| Hooks rules         | Must be called at top level           | **No restrictions** — call anywhere in component setup                 |
 
-## Key Differences from Preact
+### Read state via a getter
 
-- **No hooks rules.** Call hooks anywhere -- in loops, conditions, nested functions.
-- **Components run once** (setup phase only), not on every render.
-- **`useEffect` deps are ignored.** Pyreon tracks reactive dependencies automatically. Pass `[]` to run once on mount.
-- **`useCallback` and `memo` are no-ops.** No re-renders means no stale closures.
+```tsx
+// Preact
+const [count, setCount] = useState(0)
+console.log(count) // 0
 
-## Entry Points
+// @pyreon/preact-compat
+const [count, setCount] = useState(0)
+console.log(count()) // 0 — call the function
+```
 
-### `@pyreon/preact-compat`
+### No stale closures
 
-Core Preact API.
+Signal reads always return the current value. Preact-style `setInterval` callbacks that needed `[count]` deps to avoid stale closures Just Work without them:
 
-- **`h` / `createElement`** -- JSX factory.
-- **`Fragment`** -- fragment component.
-- **`render(vnode, container)`** -- mount a tree into a DOM element.
-- **`hydrate(vnode, container)`** -- hydrate server-rendered HTML.
-- **`createContext` / `useContext`** -- context API.
-- **`createRef`** -- mutable ref container.
-- **`Component`** -- class component base (lifecycle methods supported).
-- **`cloneElement(vnode, props, ...children)`** -- clone with overrides.
-- **`toChildArray(children)`** -- normalize children to a flat array.
-- **`isValidElement(x)`** -- type guard for VNodes.
+```tsx
+useEffect(() => {
+  const id = setInterval(() => {
+    setCount((prev) => prev + 1)   // always reads the latest
+  }, 1000)
+  return () => clearInterval(id)
+})
+```
 
-### `@pyreon/preact-compat/hooks`
+### Signals subpath
 
-Hooks API (mirrors `preact/hooks`).
+`@pyreon/preact-compat/signals` mirrors `@preact/signals` — `signal(initial)` / `computed(fn)` / `effect(fn)` / `batch(fn)` — and the returned objects expose a `.value` getter/setter so existing `@preact/signals` consumer code keeps working.
 
-- **`useState(initial)`** -- returns `[getter, setter]`. Call `getter()` to read.
-- **`useReducer(reducer, initial)`** -- returns `[getter, dispatch]`.
-- **`useEffect(fn, deps?)`** -- reactive effect. `[]` deps means mount-only.
-- **`useLayoutEffect`** -- alias for `useEffect`.
-- **`useMemo(fn, deps?)`** -- returns a computed getter. Deps are ignored.
-- **`useCallback(fn, deps?)`** -- returns `fn` as-is (no-op).
-- **`useRef(initial?)`** -- returns `{ current }`.
-- **`useId()`** -- stable unique string per component instance.
-- **`useErrorBoundary`** -- alias for `onErrorCaptured`.
+## Drop-in compat mode
 
-### `@pyreon/preact-compat/signals`
+`@pyreon/vite-plugin` can alias every `preact` / `preact/hooks` / `@preact/signals` import to this package — no code changes:
 
-Preact Signals API (mirrors `@preact/signals`).
+```ts
+// vite.config.ts
+import pyreon from '@pyreon/vite-plugin'
+export default { plugins: [pyreon({ compat: 'preact' })] }
+```
 
-- **`signal(initial)`** -- returns `{ value }` read/write accessor.
-- **`computed(fn)`** -- returns `{ value }` read-only accessor.
-- **`effect(fn)`** -- reactive side effect, returns dispose function.
-- **`batch(fn)`** -- coalesce multiple signal writes.
+`tsconfig.json`:
 
-## Composing Pyreon framework components inside preact-compat
+```jsonc
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@pyreon/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.
+## Gotchas
 
-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:
+- **Run-once mental model.** Components don't re-run on state change — read signals/getters where they're used, not destructured into locals at the top of the function.
+- **`useEffect` deps are ignored.** Dependency tracking is automatic. Effects re-run when any signal they read changes.
+- **`useCallback` is a no-op.** Pyreon doesn't need referential stability across renders because there are no renders.
+- **Class-component lifecycle methods don't fire.** `setState` + `forceUpdate` work, but `componentDidMount` / `componentDidUpdate` / `componentWillUnmount` are not invoked. Use `onMount` / `onUnmount` from `@pyreon/core` for lifecycle.
+- **`version`** reports `10.0.0-pyreon` — code that gates on Preact 10 keeps working; code that asserts equality to a specific Preact version won't match.
 
-```tsx
-import { nativeCompat, provide, createContext } from '@pyreon/core'
+## Documentation
 
-const MyCtx = createContext<string>('default')
+Full docs: [docs.pyreon.dev/docs/preact-compat](https://docs.pyreon.dev/docs/preact-compat) (or `docs/docs/preact-compat.md` in this repo).
 
-function MyProvider(props: { value: string; children?: unknown }) {
-  provide(MyCtx, props.value)
-  return props.children as never
-}
-nativeCompat(MyProvider) // ← required for compat-mode apps
-```
+## License
 
-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.
+MIT

package/lib/_chunks/jsx-runtime-D77N0lwB.js

@@ -0,0 +1,157 @@
+import { Fragment, h, isNativeCompat, mapCompatDomProps, onUnmount } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
+
+//#region src/jsx-runtime.ts
+let _currentCtx = null;
+let _hookIndex = 0;
+function getCurrentCtx() {
+	return _currentCtx;
+}
+function getHookIndex() {
+	return _hookIndex++;
+}
+function beginRender(ctx) {
+	_currentCtx = ctx;
+	_hookIndex = 0;
+	ctx.pendingEffects = [];
+	ctx.pendingLayoutEffects = [];
+}
+function endRender() {
+	_currentCtx = null;
+	_hookIndex = 0;
+}
+function runLayoutEffects(entries) {
+	for (const entry of entries) {
+		if (entry.cleanup) entry.cleanup();
+		const cleanup = entry.fn();
+		entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+	}
+}
+function scheduleEffects(ctx, entries) {
+	if (entries.length === 0) return;
+	queueMicrotask(() => {
+		for (const entry of entries) {
+			if (ctx.unmounted) return;
+			if (entry.cleanup) entry.cleanup();
+			const cleanup = entry.fn();
+			entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
+		}
+	});
+}
+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: [],
+			scheduleRerender: () => {},
+			pendingEffects: [],
+			pendingLayoutEffects: [],
+			unmounted: false
+		};
+		const version = signal(0);
+		let updateScheduled = false;
+		ctx.scheduleRerender = () => {
+			if (ctx.unmounted || updateScheduled) return;
+			updateScheduled = true;
+			queueMicrotask(() => {
+				updateScheduled = false;
+				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);
+			const result = preactComponent(props);
+			const layoutEffects = ctx.pendingLayoutEffects;
+			const effects = ctx.pendingEffects;
+			endRender();
+			runLayoutEffects(layoutEffects);
+			scheduleEffects(ctx, effects);
+			return result;
+		};
+	});
+	_wrapperCache.set(preactComponent, wrapped);
+	return wrapped;
+}
+function jsx(type, props, key) {
+	const { children, ...rest } = props;
+	const propsWithKey = key != null ? {
+		...rest,
+		key
+	} : rest;
+	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];
+	mapCompatDomProps(propsWithKey, type);
+	return h(type, propsWithKey, ...childArray);
+}
+const jsxs = jsx;
+
+//#endregion
+export { jsxs as a, jsx as i, getCurrentCtx as n, getHookIndex as r, Fragment as t };
+//# sourceMappingURL=jsx-runtime-D77N0lwB.js.map

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":"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 data = {"version":2,"tree":{"name":"root","children":[{"name":"hooks.js","children":[{"name":"src/hooks.ts","uid":"cdd5db5a-1"}]},{"name":"index.js","children":[{"name":"src/index.ts","uid":"cdd5db5a-3"}]},{"name":"jsx-runtime.js","children":[{"name":"src/jsx-dev-runtime.ts","uid":"cdd5db5a-5"}]},{"name":"signals.js","children":[{"name":"src/signals.ts","uid":"cdd5db5a-7"}]},{"name":"_chunks/jsx-runtime-D77N0lwB.js","children":[{"name":"src/jsx-runtime.ts","uid":"cdd5db5a-9"}]}],"isRoot":true},"nodeParts":{"cdd5db5a-1":{"renderedLength":6949,"gzipLength":1987,"brotliLength":0,"metaUid":"cdd5db5a-0"},"cdd5db5a-3":{"renderedLength":3350,"gzipLength":1329,"brotliLength":0,"metaUid":"cdd5db5a-2"},"cdd5db5a-5":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"cdd5db5a-4"},"cdd5db5a-7":{"renderedLength":876,"gzipLength":383,"brotliLength":0,"metaUid":"cdd5db5a-6"},"cdd5db5a-9":{"renderedLength":4364,"gzipLength":1292,"brotliLength":0,"metaUid":"cdd5db5a-8"}},"nodeMetas":{"cdd5db5a-0":{"id":"/src/hooks.ts","moduleParts":{"hooks.js":"cdd5db5a-1"},"imported":[{"uid":"cdd5db5a-10"},{"uid":"cdd5db5a-8"}],"importedBy":[],"isEntry":true},"cdd5db5a-2":{"id":"/src/index.ts","moduleParts":{"index.js":"cdd5db5a-3"},"imported":[{"uid":"cdd5db5a-10"},{"uid":"cdd5db5a-11"},{"uid":"cdd5db5a-12"}],"importedBy":[],"isEntry":true},"cdd5db5a-4":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"cdd5db5a-5"},"imported":[{"uid":"cdd5db5a-8"}],"importedBy":[],"isEntry":true},"cdd5db5a-6":{"id":"/src/signals.ts","moduleParts":{"signals.js":"cdd5db5a-7"},"imported":[{"uid":"cdd5db5a-11"}],"importedBy":[],"isEntry":true},"cdd5db5a-8":{"id":"/src/jsx-runtime.ts","moduleParts":{"_chunks/jsx-runtime-D77N0lwB.js":"cdd5db5a-9"},"imported":[{"uid":"cdd5db5a-10"},{"uid":"cdd5db5a-11"}],"importedBy":[{"uid":"cdd5db5a-0"},{"uid":"cdd5db5a-4"}]},"cdd5db5a-10":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"cdd5db5a-0"},{"uid":"cdd5db5a-8"},{"uid":"cdd5db5a-2"}]},"cdd5db5a-11":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"cdd5db5a-8"},{"uid":"cdd5db5a-2"},{"uid":"cdd5db5a-6"}]},"cdd5db5a-12":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"cdd5db5a-2"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/hooks.js

@@ -1,16 +1,6 @@
+import { n as getCurrentCtx, r as getHookIndex } from "./_chunks/jsx-runtime-D77N0lwB.js";
 import { onErrorCaptured, shallowEqualProps, useContext } from "@pyreon/core";
 
-//#region src/jsx-runtime.ts
-let _currentCtx = null;
-let _hookIndex = 0;
-function getCurrentCtx() {
-	return _currentCtx;
-}
-function getHookIndex() {
-	return _hookIndex++;
-}
-
-//#endregion
 //#region src/hooks.ts
 function requireCtx() {
 	const ctx = getCurrentCtx();

package/lib/index.js

@@ -108,6 +108,10 @@ function toChildArray(children) {
 }
 function flatten(value, out) {
 	if (value == null || typeof value === "boolean") return;
+	if (typeof value === "function") {
+		flatten(value(), out);
+		return;
+	}
 	if (Array.isArray(value)) for (const child of value) flatten(child, out);
 	else out.push(value);
 }

package/lib/jsx-runtime.js

@@ -1,151 +1,3 @@
-import { Fragment, h, isNativeCompat, mapCompatDomProps, onUnmount } from "@pyreon/core";
-import { signal } from "@pyreon/reactivity";
+import { a as jsxs, i as jsx, t as Fragment } from "./_chunks/jsx-runtime-D77N0lwB.js";
 
-//#region src/jsx-runtime.ts
-let _currentCtx = null;
-let _hookIndex = 0;
-function beginRender(ctx) {
-	_currentCtx = ctx;
-	_hookIndex = 0;
-	ctx.pendingEffects = [];
-	ctx.pendingLayoutEffects = [];
-}
-function endRender() {
-	_currentCtx = null;
-	_hookIndex = 0;
-}
-function runLayoutEffects(entries) {
-	for (const entry of entries) {
-		if (entry.cleanup) entry.cleanup();
-		const cleanup = entry.fn();
-		entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
-	}
-}
-function scheduleEffects(ctx, entries) {
-	if (entries.length === 0) return;
-	queueMicrotask(() => {
-		for (const entry of entries) {
-			if (ctx.unmounted) return;
-			if (entry.cleanup) entry.cleanup();
-			const cleanup = entry.fn();
-			entry.cleanup = typeof cleanup === "function" ? cleanup : void 0;
-		}
-	});
-}
-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: [],
-			scheduleRerender: () => {},
-			pendingEffects: [],
-			pendingLayoutEffects: [],
-			unmounted: false
-		};
-		const version = signal(0);
-		let updateScheduled = false;
-		ctx.scheduleRerender = () => {
-			if (ctx.unmounted || updateScheduled) return;
-			updateScheduled = true;
-			queueMicrotask(() => {
-				updateScheduled = false;
-				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);
-			const result = preactComponent(props);
-			const layoutEffects = ctx.pendingLayoutEffects;
-			const effects = ctx.pendingEffects;
-			endRender();
-			runLayoutEffects(layoutEffects);
-			scheduleEffects(ctx, effects);
-			return result;
-		};
-	});
-	_wrapperCache.set(preactComponent, wrapped);
-	return wrapped;
-}
-function jsx(type, props, key) {
-	const { children, ...rest } = props;
-	const propsWithKey = key != null ? {
-		...rest,
-		key
-	} : rest;
-	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];
-	mapCompatDomProps(propsWithKey, type);
-	return h(type, propsWithKey, ...childArray);
-}
-const jsxs = jsx;
-
-//#endregion
-export { Fragment, jsx, jsxs };
-//# sourceMappingURL=jsx-runtime.js.map
+export { Fragment, jsx, jsxs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/preact-compat",
-  "version": "0.21.0",
+  "version": "0.23.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": {
@@ -64,13 +64,13 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.21.0",
-    "@pyreon/reactivity": "^0.21.0",
-    "@pyreon/runtime-dom": "^0.21.0"
+    "@pyreon/core": "^0.23.0",
+    "@pyreon/reactivity": "^0.23.0",
+    "@pyreon/runtime-dom": "^0.23.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.8.9",
-    "@pyreon/test-utils": "^0.13.8",
+    "@pyreon/test-utils": "^0.13.10",
     "@vitest/browser-playwright": "^4.1.4",
     "happy-dom": "^20.8.3"
   }

package/src/index.ts

@@ -188,6 +188,19 @@ export function toChildArray(children: NestedChildren): VNodeChild[] {
 
 function flatten(value: NestedChildren, out: VNodeChild[]): void {
   if (value == null || typeof value === 'boolean') return
+  // Unwrap the Pyreon compiler's `() => x` accessor wrap. When a parent
+  // emits `<MyComp>{data.map(fn)}</MyComp>` (any non-stable expression
+  // as children — CallExpression, ConditionalExpression, etc.), the
+  // compiler's prop-inlining pass rewrites it as
+  // `MyComp({ children: () => data.map(fn) })`. Iterating the function
+  // as a child would silently treat the function as ONE child and the
+  // downstream `toChildArray` call would lose every real child after
+  // position 0. Mirrors the kinetic Iterator + elements Iterator fix
+  // from PRs #731 / #736.
+  if (typeof value === 'function') {
+    flatten((value as () => NestedChildren)(), out)
+    return
+  }
   if (Array.isArray(value)) {
     for (const child of value) {
       flatten(child, out)