@pyreon/react-compat 0.13.1 → 0.15.0

package/README.md

@@ -147,3 +147,23 @@ function Dashboard() {
 - **`useErrorBoundary`** -- alias for `onErrorCaptured`.
 - **`createSelector`** -- O(1) equality selector from `@pyreon/reactivity`.
 - **`createElement` / `h`**, **`Fragment`** -- JSX runtime.
+
+## Composing Pyreon framework components inside react-compat
+
+Pyreon's framework components (`RouterView`, `PyreonUI`, `FormProvider`, `QueryClientProvider`, …) ship marked with `nativeCompat()` from `@pyreon/core` — react-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 react-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/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","children":[{"uid":"32dc1380-1","name":"jsx-runtime.ts"},{"uid":"32dc1380-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"32dc1380-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"32dc1380-0"},"32dc1380-3":{"renderedLength":7034,"gzipLength":1959,"brotliLength":0,"metaUid":"32dc1380-2"}},"nodeMetas":{"32dc1380-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"32dc1380-1"},"imported":[{"uid":"32dc1380-4"},{"uid":"32dc1380-5"}],"importedBy":[{"uid":"32dc1380-2"}]},"32dc1380-2":{"id":"/src/index.ts","moduleParts":{"index.js":"32dc1380-3"},"imported":[{"uid":"32dc1380-4"},{"uid":"32dc1380-5"},{"uid":"32dc1380-0"}],"importedBy":[],"isEntry":true},"32dc1380-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"32dc1380-2"},{"uid":"32dc1380-0"}]},"32dc1380-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"32dc1380-2"},{"uid":"32dc1380-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","children":[{"uid":"4d7452bf-1","name":"jsx-runtime.ts"},{"uid":"4d7452bf-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"4d7452bf-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"4d7452bf-0"},"4d7452bf-3":{"renderedLength":16657,"gzipLength":4670,"brotliLength":0,"metaUid":"4d7452bf-2"}},"nodeMetas":{"4d7452bf-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"4d7452bf-1"},"imported":[{"uid":"4d7452bf-4"},{"uid":"4d7452bf-5"}],"importedBy":[{"uid":"4d7452bf-2"}]},"4d7452bf-2":{"id":"/src/index.ts","moduleParts":{"index.js":"4d7452bf-3"},"imported":[{"uid":"4d7452bf-4"},{"uid":"4d7452bf-5"},{"uid":"4d7452bf-0"}],"importedBy":[],"isEntry":true},"4d7452bf-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"4d7452bf-2"},{"uid":"4d7452bf-0"}]},"4d7452bf-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"4d7452bf-2"},{"uid":"4d7452bf-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":"243e8c0a-1","name":"jsx-runtime.ts"},{"uid":"243e8c0a-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"243e8c0a-1":{"renderedLength":2522,"gzipLength":870,"brotliLength":0,"metaUid":"243e8c0a-0"},"243e8c0a-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"243e8c0a-2"}},"nodeMetas":{"243e8c0a-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"243e8c0a-1"},"imported":[{"uid":"243e8c0a-4"},{"uid":"243e8c0a-5"}],"importedBy":[{"uid":"243e8c0a-2"}]},"243e8c0a-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"243e8c0a-3"},"imported":[{"uid":"243e8c0a-0"}],"importedBy":[],"isEntry":true},"243e8c0a-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"243e8c0a-0"}]},"243e8c0a-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"243e8c0a-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":"8146f520-1","name":"jsx-runtime.ts"},{"uid":"8146f520-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"8146f520-1":{"renderedLength":4794,"gzipLength":1456,"brotliLength":0,"metaUid":"8146f520-0"},"8146f520-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"8146f520-2"}},"nodeMetas":{"8146f520-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"8146f520-1"},"imported":[{"uid":"8146f520-4"},{"uid":"8146f520-5"}],"importedBy":[{"uid":"8146f520-2"}]},"8146f520-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"8146f520-3"},"imported":[{"uid":"8146f520-0"}],"importedBy":[],"isEntry":true},"8146f520-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"8146f520-0"}]},"8146f520-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"8146f520-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,4 +1,4 @@
-import { ErrorBoundary, Fragment, Portal, Suspense, createContext, h, h as createElement, h as h$1, lazy, useContext } from "@pyreon/core";
+import { ErrorBoundary, Fragment, Portal, Suspense, createContext as createContext$1, createRef, h, h as createElement, h as h$1, lazy, nativeCompat, provide, useContext as useContext$1 } from "@pyreon/core";
 import { batch } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
@@ -31,33 +31,50 @@ function depsChanged(a, b) {
 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];
 }
 /**
 * React-compatible `useReducer` — returns `[state, dispatch]`.
+* Supports the 3-argument form: `useReducer(reducer, initialArg, init)`.
 */
-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];
 }
 /**
 * React-compatible `useEffect` — runs after render when deps change.
@@ -107,6 +124,30 @@ function useLayoutEffect(fn, deps) {
 	}
 }
 /**
+* React-compatible `useInsertionEffect` — runs synchronously before layout effects.
+* Intended for CSS-in-JS libraries to inject styles before DOM reads.
+*/
+function useInsertionEffect(fn, deps) {
+	const ctx = requireCtx();
+	const idx = getHookIndex();
+	if (ctx.hooks.length <= idx) {
+		const entry = {
+			fn,
+			deps,
+			cleanup: void 0
+		};
+		ctx.hooks.push(entry);
+		ctx.pendingInsertionEffects.push(entry);
+	} else {
+		const entry = ctx.hooks[idx];
+		if (depsChanged(entry.deps, deps)) {
+			entry.fn = fn;
+			entry.deps = deps;
+			ctx.pendingInsertionEffects.push(entry);
+		}
+	}
+}
+/**
 * React-compatible `useMemo` — returns the cached value, recomputed when deps change.
 */
 function useMemo(fn, deps) {
@@ -145,6 +186,69 @@ function useRef(initial) {
 	}
 	return ctx.hooks[idx];
 }
+const COMPAT_CTX = Symbol.for("pyreon:compat-ctx");
+const COMPAT_CTX_BRAND = COMPAT_CTX;
+/**
+* React-compatible `createContext` — creates a context with a Provider that
+* supports nested Providers (inner overrides outer for its subtree) and
+* notifies all `useContext` consumers when its value changes.
+*/
+function createContext(defaultValue) {
+	const pyreonCtx = createContext$1({
+		value: defaultValue,
+		subscribers: /* @__PURE__ */ new Set()
+	});
+	const defaultSubscribers = /* @__PURE__ */ new Set();
+	const Provider = (props) => {
+		const frame = {
+			value: props.value,
+			subscribers: /* @__PURE__ */ new Set()
+		};
+		provide(pyreonCtx, frame);
+		return () => {
+			const { value, children } = props;
+			if (!Object.is(frame.value, value)) {
+				frame.value = value;
+				for (const sub of frame.subscribers) sub();
+			}
+			return children ?? null;
+		};
+	};
+	nativeCompat(Provider);
+	return {
+		[COMPAT_CTX_BRAND]: true,
+		_defaultValue: defaultValue,
+		_pyreonCtx: pyreonCtx,
+		_subscribers: defaultSubscribers,
+		Provider
+	};
+}
+/**
+* React-compatible `useContext` — reads the current context value and
+* subscribes the calling component to future value changes.
+*
+* Reads from Pyreon's tree-scoped context stack (correct nesting) and
+* subscribes to the nearest Provider's subscriber set for re-rendering.
+*
+* Works with both compat contexts (from this module's `createContext`) and
+* Pyreon native contexts (from `@pyreon/core`).
+*/
+function useContext(context) {
+	if (COMPAT_CTX in context) {
+		const frame = useContext$1(context._pyreonCtx);
+		const renderCtx = getCurrentCtx();
+		if (renderCtx) {
+			const idx = getHookIndex();
+			if (renderCtx.hooks.length <= idx) {
+				const sub = () => renderCtx.scheduleRerender();
+				frame.subscribers.add(sub);
+				renderCtx.hooks.push({ _contextUnsub: () => frame.subscribers.delete(sub) });
+			}
+		}
+		return frame.value;
+	}
+	return useContext$1(context);
+}
 let _idCounter = 0;
 /**
 * React-compatible `useId` — returns a stable unique string per hook call.
@@ -155,26 +259,47 @@ function useId() {
 	if (ctx.hooks.length <= idx) ctx.hooks.push(`:r${(_idCounter++).toString(36)}:`);
 	return ctx.hooks[idx];
 }
+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;
+}
 /**
 * React-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;
+	const MEMO_MARKER = Symbol.for("pyreon:memo");
+	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[MEMO_MARKER] = true;
+	memoized.displayName = component.displayName || component.name || "Memo";
+	return memoized;
 }
 /**
 * React-compatible `useTransition` — no concurrent mode in Pyreon.
@@ -214,10 +339,12 @@ function createPortal(children, target) {
 * The render function receives (props, ref) — we merge ref into props.
 */
 function forwardRef(render) {
-	return (props) => {
+	const forwarded = (props) => {
 		const { ref, ...rest } = props;
 		return render(rest, ref ?? null);
 	};
+	forwarded.displayName = render.displayName || render.name || "ForwardRef";
+	return forwarded;
 }
 /**
 * React-compatible `cloneElement` — creates a new VNode with merged props.
@@ -242,40 +369,243 @@ function flattenChildren(children) {
 * React-compatible `Children` utilities for working with VNode children.
 */
 const Children = {
+	/**
+	* Iterate over children, calling `fn` for each non-null child.
+	*/
 	map(children, fn) {
 		const flat = flattenChildren(children);
 		const result = [];
+		let validIndex = 0;
 		for (let i = 0; i < flat.length; i++) {
 			const child = flat[i];
 			if (child == null || child === true || child === false) continue;
-			result.push(fn(child, i));
+			const mapped = fn(child, validIndex);
+			if (mapped && typeof mapped === "object" && "type" in mapped && "props" in mapped) {
+				const vnode = mapped;
+				if (vnode.key == null) vnode.key = `.${validIndex}`;
+			}
+			result.push(mapped);
+			validIndex++;
 		}
 		return result;
 	},
+	/**
+	* Call `fn` for each non-null child (no return value).
+	*/
 	forEach(children, fn) {
 		const flat = flattenChildren(children);
+		let validIndex = 0;
 		for (let i = 0; i < flat.length; i++) {
 			const child = flat[i];
 			if (child == null || child === true || child === false) continue;
-			fn(child, i);
+			fn(child, validIndex++);
 		}
 	},
+	/**
+	* Count non-null children.
+	*/
 	count(children) {
 		const flat = flattenChildren(children);
 		let count = 0;
 		for (const child of flat) if (child != null && child !== true && child !== false) count++;
 		return count;
 	},
+	/**
+	* Convert children to a flat array.
+	*/
 	toArray(children) {
 		return flattenChildren(children).filter((child) => child != null && child !== true && child !== false);
 	},
+	/**
+	* Assert and return the only child. Throws if not exactly one child.
+	*/
 	only(children) {
 		const arr = Children.toArray(children);
 		if (arr.length !== 1) throw new Error("[Pyreon] Children.only expected exactly one child");
 		return arr[0];
 	}
 };
+/**
+* React-compatible `useSyncExternalStore` — subscribes to an external store.
+* Re-subscribes automatically when the `subscribe` function identity changes.
+*/
+function useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) {
+	const ctx = requireCtx();
+	const idx = getHookIndex();
+	if (typeof window === "undefined" && getServerSnapshot) {
+		if (ctx.hooks.length <= idx) ctx.hooks.push({
+			subscribe,
+			unsubscribe: void 0,
+			snapshot: getServerSnapshot()
+		});
+		return ctx.hooks[idx].snapshot;
+	}
+	if (ctx.hooks.length <= idx) {
+		const snapshot = getSnapshot();
+		const entry = {
+			subscribe,
+			unsubscribe: void 0,
+			snapshot
+		};
+		const onChange = () => {
+			const next = getSnapshot();
+			if (!Object.is(entry.snapshot, next)) {
+				entry.snapshot = next;
+				ctx.scheduleRerender();
+			}
+		};
+		entry.unsubscribe = subscribe(onChange);
+		ctx.hooks.push(entry);
+		return snapshot;
+	}
+	const entry = ctx.hooks[idx];
+	if (entry.subscribe !== subscribe) {
+		if (entry.unsubscribe) entry.unsubscribe();
+		const onChange = () => {
+			const next = getSnapshot();
+			if (!Object.is(entry.snapshot, next)) {
+				entry.snapshot = next;
+				ctx.scheduleRerender();
+			}
+		};
+		entry.unsubscribe = subscribe(onChange);
+		entry.subscribe = subscribe;
+	}
+	entry.snapshot = getSnapshot();
+	return entry.snapshot;
+}
+const _promiseCache = /* @__PURE__ */ new WeakMap();
+/**
+* React-compatible `use` — reads a Context or suspends on a Promise.
+* Can be called conditionally (unlike other hooks).
+*
+* IMPORTANT: Promises must have a stable identity across renders.
+* Create promises outside the component or memoize them. Calling
+* `use(fetch('/api'))` creates a new promise each render and will
+* cause infinite suspension.
+*/
+function use(resource) {
+	if (resource && typeof resource === "object" && COMPAT_CTX in resource) return useContext(resource);
+	if (resource && typeof resource === "object" && "id" in resource && "defaultValue" in resource) return useContext$1(resource);
+	const promise = resource;
+	let entry = _promiseCache.get(promise);
+	if (!entry) {
+		entry = { status: "pending" };
+		_promiseCache.set(promise, entry);
+		promise.then((value) => {
+			entry.status = "resolved";
+			entry.value = value;
+		}, (error) => {
+			entry.status = "rejected";
+			entry.error = error;
+		});
+	}
+	if (entry.status === "resolved") return entry.value;
+	if (entry.status === "rejected") throw entry.error;
+	throw promise;
+}
+/**
+* React-compatible `useActionState` — manages async action state with pending indicator.
+*/
+function useActionState(action, initialState) {
+	const [state, setState] = useState(initialState);
+	const [isPending, setIsPending] = useState(false);
+	const dispatch = (payload) => {
+		setIsPending(true);
+		const result = action(state, payload);
+		if (result instanceof Promise) result.then((next) => {
+			setState(next);
+			setIsPending(false);
+		});
+		else {
+			setState(result);
+			setIsPending(false);
+		}
+	};
+	return [
+		state,
+		dispatch,
+		isPending
+	];
+}
+/**
+* React-compatible `startTransition` — runs the callback synchronously.
+* No concurrent mode in Pyreon, so transitions are immediate.
+*/
+function startTransition(fn) {
+	fn();
+}
+/**
+* React-compatible `isValidElement` — checks if a value is a VNode.
+*/
+function isValidElement(value) {
+	return value != null && typeof value === "object" && "type" in value && "props" in value;
+}
+/**
+* React-compatible `useDebugValue` — no-op in Pyreon (no React DevTools integration).
+*/
+function useDebugValue(_value, _format) {}
+/**
+* React-compatible `flushSync` — runs the callback synchronously.
+*
+* BEHAVIORAL DIFFERENCE: In Pyreon's compat model, state updates are
+* batched via microtask. flushSync runs the callback and returns its
+* result, but the DOM updates triggered by state changes inside the
+* callback still fire asynchronously. For DOM measurement after state
+* updates, use `await act(() => setState(...))` in tests, or
+* `requestAnimationFrame` in production code.
+*/
+function flushSync(fn) {
+	return fn();
+}
+/**
+* React-compatible `act` — flushes pending microtasks for testing.
+*/
+async function act(fn) {
+	const result = fn();
+	if (result instanceof Promise) await result;
+	await new Promise((r) => queueMicrotask(r));
+	await new Promise((r) => queueMicrotask(r));
+}
+const version = "19.0.0-pyreon";
+/**
+* React-compatible `StrictMode` — pass-through in Pyreon (no double-invoke behavior).
+*/
+function StrictMode(props) {
+	return props.children ?? null;
+}
+/**
+* React-compatible `Profiler` — pass-through in Pyreon (no profiling integration).
+*/
+function Profiler(props) {
+	return props.children ?? null;
+}
+/**
+* React-compatible `Component` class stub.
+* Class components are not fully supported — use function components with hooks.
+*/
+var Component = class {
+	props;
+	state;
+	constructor(props) {
+		this.props = props;
+		this.state = {};
+	}
+	setState(_partial) {
+		console.warn("[Pyreon] Class component setState is not supported. Use function components with hooks.");
+	}
+	forceUpdate() {
+		console.warn("[Pyreon] Class component forceUpdate is not supported. Use function components with hooks.");
+	}
+	render() {
+		return null;
+	}
+};
+/**
+* React-compatible `PureComponent` class stub.
+*/
+var PureComponent = class extends Component {};
 
 //#endregion
-export { Children, ErrorBoundary, Fragment, Suspense, batch, cloneElement, createContext, createElement, createPortal, forwardRef, h, lazy, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useTransition };
+export { Children, Component, ErrorBoundary, Fragment, Profiler, PureComponent, StrictMode, Suspense, act, batch, cloneElement, createContext, createElement, createPortal, createRef, flushSync, forwardRef, h, isValidElement, lazy, memo, startTransition, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore, useTransition, version };
 //# sourceMappingURL=index.js.map

package/lib/jsx-runtime.js

@@ -1,16 +1,24 @@
-import { Fragment, h } from "@pyreon/core";
+import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
 import { signal } from "@pyreon/reactivity";
 
 //#region src/jsx-runtime.ts
 let _currentCtx = null;
 let _hookIndex = 0;
+let _expectedHookCount = -1;
 function beginRender(ctx) {
 	_currentCtx = ctx;
 	_hookIndex = 0;
+	ctx.pendingInsertionEffects = [];
 	ctx.pendingEffects = [];
 	ctx.pendingLayoutEffects = [];
+	if (ctx._hookCount !== void 0) _expectedHookCount = ctx._hookCount;
+	else _expectedHookCount = -1;
 }
 function endRender() {
+	if (_currentCtx) {
+		if (process.env.NODE_ENV !== "production" && _expectedHookCount !== -1 && _hookIndex !== _expectedHookCount) console.error(`[Pyreon] Hook count changed between renders (expected ${_expectedHookCount}, got ${_hookIndex}). This usually means a hook is called conditionally. Hooks must be called in the same order every render.`);
+		_currentCtx._hookCount = _hookIndex;
+	}
 	_currentCtx = null;
 	_hookIndex = 0;
 }
@@ -40,6 +48,7 @@ function wrapCompatComponent(reactComponent) {
 		const ctx = {
 			hooks: [],
 			scheduleRerender: () => {},
+			pendingInsertionEffects: [],
 			pendingEffects: [],
 			pendingLayoutEffects: [],
 			unmounted: false
@@ -54,13 +63,32 @@ function wrapCompatComponent(reactComponent) {
 				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();
+				}
+				if (hook && typeof hook === "object" && "unsubscribe" in hook) {
+					const sub = hook;
+					if (typeof sub.unsubscribe === "function") sub.unsubscribe();
+				}
+				if (hook && typeof hook === "object" && "_contextUnsub" in hook) {
+					const ctxHook = hook;
+					if (typeof ctxHook._contextUnsub === "function") ctxHook._contextUnsub();
+				}
+			}
+		});
 		return () => {
 			version();
 			beginRender(ctx);
 			const result = reactComponent(props);
+			const insertionEffects = ctx.pendingInsertionEffects;
 			const layoutEffects = ctx.pendingLayoutEffects;
 			const effects = ctx.pendingEffects;
 			endRender();
+			runLayoutEffects(insertionEffects);
 			runLayoutEffects(layoutEffects);
 			scheduleEffects(ctx, effects);
 			return result;
@@ -75,10 +103,14 @@ function jsx(type, props, key) {
 		...rest,
 		key
 	} : rest;
-	if (typeof type === "function") return h(wrapCompatComponent(type), children !== void 0 ? {
-		...propsWithKey,
-		children
-	} : propsWithKey);
+	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) {
@@ -89,6 +121,26 @@ function jsx(type, props, key) {
 			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;
+		delete propsWithKey.suppressContentEditableWarning;
 	}
 	return h(type, propsWithKey, ...childArray);
 }