@pyreon/react-compat 0.13.1 → 0.14.0

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":"671d1924-1","name":"jsx-runtime.ts"},{"uid":"671d1924-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"671d1924-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"671d1924-0"},"671d1924-3":{"renderedLength":16429,"gzipLength":4587,"brotliLength":0,"metaUid":"671d1924-2"}},"nodeMetas":{"671d1924-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"671d1924-1"},"imported":[{"uid":"671d1924-4"},{"uid":"671d1924-5"}],"importedBy":[{"uid":"671d1924-2"}]},"671d1924-2":{"id":"/src/index.ts","moduleParts":{"index.js":"671d1924-3"},"imported":[{"uid":"671d1924-4"},{"uid":"671d1924-5"},{"uid":"671d1924-0"}],"importedBy":[],"isEntry":true},"671d1924-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"671d1924-2"},{"uid":"671d1924-0"}]},"671d1924-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"671d1924-2"},{"uid":"671d1924-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":"ab213c8a-1","name":"jsx-runtime.ts"},{"uid":"ab213c8a-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"ab213c8a-1":{"renderedLength":4797,"gzipLength":1465,"brotliLength":0,"metaUid":"ab213c8a-0"},"ab213c8a-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"ab213c8a-2"}},"nodeMetas":{"ab213c8a-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"ab213c8a-1"},"imported":[{"uid":"ab213c8a-4"},{"uid":"ab213c8a-5"}],"importedBy":[{"uid":"ab213c8a-2"}]},"ab213c8a-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"ab213c8a-3"},"imported":[{"uid":"ab213c8a-0"}],"importedBy":[],"isEntry":true},"ab213c8a-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"ab213c8a-0"}]},"ab213c8a-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"ab213c8a-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, 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,70 @@ function useRef(initial) {
 	}
 	return ctx.hooks[idx];
 }
+const COMPAT_CTX = Symbol.for("pyreon:compat-ctx");
+const COMPAT_CTX_BRAND = COMPAT_CTX;
+const NATIVE_COMPONENT = Symbol.for("pyreon:native-compat");
+/**
+* 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;
+		};
+	};
+	Provider[NATIVE_COMPONENT] = true;
+	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 +260,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 +340,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.
@@ -245,19 +373,27 @@ const Children = {
 	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;
 	},
 	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(children) {
@@ -275,7 +411,187 @@ const Children = {
 		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