@pyreon/vue-compat 0.22.0 → 0.23.0

package/README.md

@@ -1,6 +1,8 @@
 # @pyreon/vue-compat
 
-Vue 3 Composition API shim that runs on Pyreon's signal-based reactive engine. Migrate Vue code by swapping the import path.
+Vue 3 Composition API shim — write Vue-style code that runs on Pyreon's reactive engine.
+
+`@pyreon/vue-compat` provides the Vue 3 Composition API surface (`ref`, `shallowRef`, `computed`, `reactive`, `shallowReactive`, `readonly`, `shallowReadonly`, `toRef`, `toRefs`, `toRaw`, `toValue`, `unref`, `isRef`, `isReactive`, `isReadonly`, `isProxy`, `markRaw`, `triggerRef`, `watch`, `watchEffect`, lifecycle hooks `onMounted` / `onUnmounted` / `onUpdated` / `onBeforeMount` / `onBeforeUnmount`, `nextTick`, `provide` / `inject`, `defineComponent`, `defineAsyncComponent`, `createApp`, `effectScope` / `getCurrentScope` / `onScopeDispose`, error/render-track hooks, `<Teleport>`, `<KeepAlive>`, `<Transition>`) all running on Pyreon's reactive engine. **This is a runtime shim, not Vue** — it covers what code imports, NOT the Single-File Component compiler. `.vue` files require a separate SFC compiler.
 
 ## Install
 
@@ -8,178 +10,104 @@ Vue 3 Composition API shim that runs on Pyreon's signal-based reactive engine. M
 bun add @pyreon/vue-compat
 ```
 
-## Quick Start
+## Quick start
 
 ```tsx
-// Replace:
-// import { ref, computed, watch } from "vue"
-// With:
-import { ref, computed, watch } from '@pyreon/vue-compat'
+import { ref, computed, watch, onMounted } from '@pyreon/vue-compat'
 
 function Counter() {
   const count = ref(0)
   const doubled = computed(() => count.value * 2)
 
-  watch(count, (newVal, oldVal) => {
-    console.log(`count: ${oldVal} -> ${newVal}`)
+  watch(count, (next, prev) => {
+    console.log(`count: ${prev} → ${next}`)
   })
 
-  return (
-    <div>
-      <span>{doubled.value}</span>
-      <button onClick={() => count.value++}>Count: {count.value}</button>
-    </div>
-  )
-}
-```
-
-### Reactive Objects
-
-```tsx
-import { reactive, watchEffect } from '@pyreon/vue-compat'
-
-function UserForm() {
-  const form = reactive({ name: '', email: '' })
-
-  watchEffect(() => {
-    console.log('form changed:', form.name, form.email)
+  onMounted(() => {
+    console.log('mounted')
   })
 
   return (
     <div>
-      <input
-        value={form.name}
-        onInput={(e) => (form.name = e.currentTarget.value)}
-        placeholder="Name"
-      />
-      <input
-        value={form.email}
-        onInput={(e) => (form.email = e.currentTarget.value)}
-        placeholder="Email"
-      />
-      <p>
-        Hello, {form.name} ({form.email})
-      </p>
+      <p>Count: {count.value}, doubled: {doubled.value}</p>
+      <button onClick={() => count.value++}>+1</button>
     </div>
   )
 }
 ```
 
-### Provide / Inject
-
-```tsx
-import { ref, provide, inject, defineComponent } from '@pyreon/vue-compat'
-
-const ThemeKey = Symbol('theme')
-
-function ThemeProvider(props: { children: any }) {
-  const theme = ref('light')
-  provide(ThemeKey, theme)
-  return (
-    <div>
-      <button onClick={() => (theme.value = theme.value === 'light' ? 'dark' : 'light')}>
-        Toggle theme
-      </button>
-      {props.children}
-    </div>
-  )
-}
-
-function ThemedBox() {
-  const theme = inject(ThemeKey, ref('light'))
-  return <div class={`box-${theme.value}`}>Theme: {theme.value}</div>
-}
+## Subpath exports
+
+| Subpath                              | Surface                                                                                       |
+| ------------------------------------ | --------------------------------------------------------------------------------------------- |
+| `@pyreon/vue-compat`                 | Full Composition API surface — see API table below                                             |
+| `@pyreon/vue-compat/jsx-runtime`     | JSX automatic runtime (`jsx`, `jsxs`, `Fragment`)                                              |
+| `@pyreon/vue-compat/jsx-dev-runtime` | Dev variant — same runtime                                                                     |
+
+## API surface
+
+| Category         | Exports                                                                                       |
+| ---------------- | --------------------------------------------------------------------------------------------- |
+| Refs             | `ref`, `shallowRef`, `triggerRef`, `isRef`, `unref`, `toValue`, `toRef`, `toRefs`             |
+| Computed         | `computed` (getter form + writable `{ get, set }` form)                                       |
+| Reactive         | `reactive`, `shallowReactive`, `readonly`, `shallowReadonly`, `toRaw`, `markRaw`, `isReactive`, `isReadonly`, `isProxy` |
+| Watchers         | `watch`, `watchEffect`, `WatchOptions`                                                         |
+| Lifecycle        | `onMounted`, `onUnmounted`, `onUpdated`, `onBeforeMount`, `onBeforeUnmount`, `onErrorCaptured`, `onRenderTracked`, `onRenderTriggered` |
+| Scheduling       | `nextTick`                                                                                     |
+| DI               | `provide`, `inject`                                                                            |
+| Components       | `defineComponent`, `defineAsyncComponent`, `createApp(App, props?)`                            |
+| Scope            | `effectScope`, `getCurrentScope`, `onScopeDispose`                                             |
+| Built-ins        | `Teleport`, `KeepAlive`, `Transition`                                                          |
+| JSX              | `h`, `Fragment`                                                                                |
+
+## Drop-in compat mode
+
+`@pyreon/vite-plugin` can alias every `vue` import to this package:
+
+```ts
+// vite.config.ts
+import pyreon from '@pyreon/vite-plugin'
+export default { plugins: [pyreon({ compat: 'vue' })] }
 ```
 
-### createApp
+`tsconfig.json`:
 
-```tsx
-import { createApp, ref } from '@pyreon/vue-compat'
-
-function App() {
-  const message = ref('Hello from Pyreon')
-  return <h1>{message.value}</h1>
+```jsonc
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@pyreon/vue-compat"
+  }
 }
-
-const app = createApp(App)
-app.mount('#app')
 ```
 
-## Key Differences from Vue
-
-- **No virtual DOM.** Pyreon uses fine-grained reactivity -- no diffing, no re-renders.
-- **Components run once** (setup phase only).
-- **`reactive()` uses Pyreon's store proxy** with deep signal wrapping.
-- **`readonly()` is strict** -- setting any property (including symbols) throws an error.
-- **`provide` / `inject` uses Pyreon's context system** -- fully isolated per component tree.
-
-## API
-
-### Reactivity: Refs
-
-- **`ref(value)`** -- returns `{ value }` with reactive `.value`.
-- **`shallowRef(value)`** -- shallow reactive ref (no deep tracking).
-- **`triggerRef(ref)`** -- force subscribers to re-run.
-- **`isRef(val)`** -- type guard.
-- **`unref(val)`** -- unwrap a ref or return value as-is.
-- **`toRef(obj, key)`** -- create a ref bound to an object property.
-- **`toRefs(obj)`** -- convert all properties to refs.
-
-### Reactivity: Computed
-
-- **`computed(fn)`** -- read-only computed ref.
-- **`computed({ get, set })`** -- writable computed ref.
-
-### Reactivity: Objects
-
-- **`reactive(obj)`** -- deep reactive proxy (Pyreon store).
-- **`shallowReactive(obj)`** -- shallow reactive proxy.
-- **`readonly(obj)`** -- read-only proxy that throws on writes.
-- **`toRaw(proxy)`** -- unwrap to the original object.
+## Scope
 
-### Watchers
+This is a **runtime** shim. It covers what code imports at runtime — the same boundary `@pyreon/solid-compat` draws around Solid's compiler.
 
-- **`watch(source, callback, options?)`** -- watch a ref, getter, or reactive object. Supports `immediate` and `deep`.
-- **`watchEffect(fn)`** -- auto-tracking effect, returns stop handle.
+- ✅ Composition API — `ref`, `computed`, `reactive`, `watch`, lifecycle, `provide` / `inject`, `effectScope`
+- ✅ `defineComponent` (typed) + `defineAsyncComponent`
+- ✅ `createApp(component, props)` — mount via `.mount(selector)`
+- ✅ Built-in components — `Teleport`, `KeepAlive`, `Transition`
+- ❌ `.vue` Single-File Component compiler
+- ❌ `<script setup>` syntax (compiler construct)
+- ❌ Options API class-component lifecycle (`data`, `methods`, `computed` block, `created`, `beforeDestroy`, …)
+- ❌ Template directives (`v-if`, `v-for`, `v-model`) — use JSX equivalents
 
-### Lifecycle Hooks
+Components are plain functions returning JSX that run on Pyreon's reactive engine.
 
-- **`onMounted(fn)`** / **`onBeforeMount(fn)`**
-- **`onUnmounted(fn)`** / **`onBeforeUnmount(fn)`**
-- **`onUpdated(fn)`**
+## Gotchas
 
-### Dependency Injection
+- **`.value` reads/writes work** because Pyreon signals wrap a value getter/setter to match Vue's ref shape.
+- **`reactive(obj)` returns a Proxy** that delegates to Pyreon signals — mutating `obj.x = 5` triggers subscribers as Vue does.
+- **`watch` deps are tracked automatically** for function sources. For an array of sources, the watcher fires when any one changes.
+- **`createApp(App).mount(selector)`** maps to Pyreon's `mount()` — returns an app instance with `.unmount()`.
+- **Lifecycle hooks fire ONCE** per component instance (run-once model). Vue's render-driven re-fires (`onUpdated`) translate to per-subscription effects under the hood — the visible effect is the same for most use cases.
 
-- **`provide(key, value)`** -- provide a value to descendants.
-- **`inject(key, defaultValue?)`** -- inject a value from an ancestor.
+## Documentation
 
-### Application
+Full docs: [docs.pyreon.dev/docs/vue-compat](https://docs.pyreon.dev/docs/vue-compat) (or `docs/docs/vue-compat.md` in this repo).
 
-- **`createApp(component, props?)`** -- create an app instance with `.mount(el)` and `.unmount()`.
-- **`defineComponent(setup)`** -- wrapper for type inference (returns setup as-is).
-- **`nextTick()`** -- wait for the next microtask.
-
-### Utilities
-
-- **`h` / `Fragment`** -- JSX runtime.
-- **`batch(fn)`** -- coalesce multiple signal writes.
-
-## Composing Pyreon framework components inside vue-compat
-
-Pyreon's framework components (`RouterView`, `PyreonUI`, `FormProvider`, `QueryClientProvider`, …) ship marked with `nativeCompat()` from `@pyreon/core` — vue-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 vue-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
-```
+## 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-CG6mH_9E.js

@@ -0,0 +1,113 @@
+import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
+import { runUntracked, 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;
+		}
+	});
+}
+const _wrapperCache = /* @__PURE__ */ new WeakMap();
+function wrapCompatComponent(vueComponent) {
+	let wrapped = _wrapperCache.get(vueComponent);
+	if (wrapped) return wrapped;
+	wrapped = ((props) => {
+		const ctx = {
+			hooks: [],
+			scheduleRerender: () => {},
+			pendingEffects: [],
+			pendingLayoutEffects: [],
+			unmounted: false,
+			unmountCallbacks: [],
+			_props: props
+		};
+		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 cb of ctx.unmountCallbacks) cb();
+		});
+		return () => {
+			version();
+			beginRender(ctx);
+			const result = runUntracked(() => vueComponent(props));
+			const layoutEffects = ctx.pendingLayoutEffects;
+			const effects = ctx.pendingEffects;
+			endRender();
+			runLayoutEffects(layoutEffects);
+			scheduleEffects(ctx, effects);
+			return result;
+		};
+	});
+	_wrapperCache.set(vueComponent, 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);
+	}
+	if (typeof type === "string" && propsWithKey.ref != null) {
+		const r = propsWithKey.ref;
+		if (typeof r === "object" && r !== null && r[Symbol.for("__v_isRef")] === true) {
+			const vueRef = r;
+			propsWithKey.ref = (el) => {
+				vueRef.value = el;
+			};
+		}
+	}
+	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
+}
+const jsxs = jsx;
+
+//#endregion
+export { jsxs as a, jsx as i, getCurrentCtx as n, getHookIndex as r, Fragment as t };
+//# sourceMappingURL=jsx-runtime-CG6mH_9E.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","children":[{"uid":"5d7b64f5-1","name":"jsx-runtime.ts"},{"uid":"5d7b64f5-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"5d7b64f5-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"5d7b64f5-0"},"5d7b64f5-3":{"renderedLength":33794,"gzipLength":8644,"brotliLength":0,"metaUid":"5d7b64f5-2"}},"nodeMetas":{"5d7b64f5-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"5d7b64f5-1"},"imported":[{"uid":"5d7b64f5-4"},{"uid":"5d7b64f5-5"}],"importedBy":[{"uid":"5d7b64f5-2"}]},"5d7b64f5-2":{"id":"/src/index.ts","moduleParts":{"index.js":"5d7b64f5-3"},"imported":[{"uid":"5d7b64f5-4"},{"uid":"5d7b64f5-5"},{"uid":"5d7b64f5-6"},{"uid":"5d7b64f5-0"}],"importedBy":[],"isEntry":true},"5d7b64f5-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"5d7b64f5-2"},{"uid":"5d7b64f5-0"}]},"5d7b64f5-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"5d7b64f5-2"},{"uid":"5d7b64f5-0"}]},"5d7b64f5-6":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"5d7b64f5-2"}]}},"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":"3631272c-1"}]},{"name":"jsx-runtime.js","children":[{"name":"src/jsx-dev-runtime.ts","uid":"3631272c-3"}]},{"name":"_chunks/jsx-runtime-CG6mH_9E.js","children":[{"name":"src/jsx-runtime.ts","uid":"3631272c-5"}]}],"isRoot":true},"nodeParts":{"3631272c-1":{"renderedLength":34103,"gzipLength":8741,"brotliLength":0,"metaUid":"3631272c-0"},"3631272c-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"3631272c-2"},"3631272c-5":{"renderedLength":2833,"gzipLength":1012,"brotliLength":0,"metaUid":"3631272c-4"}},"nodeMetas":{"3631272c-0":{"id":"/src/index.ts","moduleParts":{"index.js":"3631272c-1"},"imported":[{"uid":"3631272c-6"},{"uid":"3631272c-7"},{"uid":"3631272c-8"},{"uid":"3631272c-4"}],"importedBy":[],"isEntry":true},"3631272c-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"3631272c-3"},"imported":[{"uid":"3631272c-4"}],"importedBy":[],"isEntry":true},"3631272c-4":{"id":"/src/jsx-runtime.ts","moduleParts":{"_chunks/jsx-runtime-CG6mH_9E.js":"3631272c-5"},"imported":[{"uid":"3631272c-6"},{"uid":"3631272c-7"}],"importedBy":[{"uid":"3631272c-0"},{"uid":"3631272c-2"}]},"3631272c-6":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"3631272c-0"},{"uid":"3631272c-4"}]},"3631272c-7":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"3631272c-0"},{"uid":"3631272c-4"}]},"3631272c-8":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"3631272c-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,18 +1,8 @@
-import { Fragment, Portal, Suspense as Suspense$1, createContext, h as pyreonH, onMount, onUnmount, onUpdate, popContext, pushContext, useContext } from "@pyreon/core";
+import { n as getCurrentCtx, r as getHookIndex } from "./_chunks/jsx-runtime-CG6mH_9E.js";
+import { Fragment, Portal, Suspense as Suspense$1, createContext, h as pyreonH, onMount, onUnmount, onUpdate, pushContext, removeContextFrame, useContext } from "@pyreon/core";
 import { batch, computed as computed$1, createStore, effect, nextTick as nextTick$1, signal } from "@pyreon/reactivity";
 import { KeepAlive as KeepAlive$1, Transition as Transition$1, TransitionGroup as TransitionGroup$1, mount } from "@pyreon/runtime-dom";
 
-//#region src/jsx-runtime.ts
-let _currentCtx = null;
-let _hookIndex = 0;
-function getCurrentCtx() {
-	return _currentCtx;
-}
-function getHookIndex() {
-	return _hookIndex++;
-}
-
-//#endregion
 //#region src/index.ts
 const V_IS_REF = Symbol.for("__v_isRef");
 const V_IS_READONLY = Symbol("__v_isReadonly");
@@ -624,8 +614,9 @@ function provide(key, value) {
 		if (idx < ctx.hooks.length) return;
 		ctx.hooks[idx] = true;
 		const vueCtx = getOrCreateContext(key);
-		pushContext(new Map([[vueCtx.id, value]]));
-		ctx.unmountCallbacks.push(() => popContext());
+		const frame = new Map([[vueCtx.id, value]]);
+		pushContext(frame);
+		ctx.unmountCallbacks.push(() => removeContextFrame(frame));
 		return;
 	}
 	const vueCtx = getOrCreateContext(key);
@@ -725,11 +716,21 @@ function createApp(component, props) {
 		mount(el) {
 			const container = typeof el === "string" ? document.querySelector(el) : el;
 			if (!container) throw new Error(`Cannot find mount target: ${el}`);
+			const pushedFrames = [];
 			for (const { key, value } of provisions) {
 				const ctx = getOrCreateContext(key);
-				pushContext(new Map([[ctx.id, value]]));
+				const frame = new Map([[ctx.id, value]]);
+				pushContext(frame);
+				pushedFrames.push(frame);
 			}
-			return mount(pyreonH(component, props ?? null), container);
+			const unmount = mount(pyreonH(component, props ?? null), container);
+			return () => {
+				unmount();
+				for (let i = pushedFrames.length - 1; i >= 0; i--) {
+					const frame = pushedFrames[i];
+					if (frame) removeContextFrame(frame);
+				}
+			};
 		},
 		use(plugin) {
 			plugin.install(app);

package/lib/jsx-runtime.js

@@ -1,107 +1,3 @@
-import { Fragment, h, isNativeCompat, onUnmount } from "@pyreon/core";
-import { runUntracked, signal } from "@pyreon/reactivity";
+import { a as jsxs, i as jsx, t as Fragment } from "./_chunks/jsx-runtime-CG6mH_9E.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;
-		}
-	});
-}
-const _wrapperCache = /* @__PURE__ */ new WeakMap();
-function wrapCompatComponent(vueComponent) {
-	let wrapped = _wrapperCache.get(vueComponent);
-	if (wrapped) return wrapped;
-	wrapped = ((props) => {
-		const ctx = {
-			hooks: [],
-			scheduleRerender: () => {},
-			pendingEffects: [],
-			pendingLayoutEffects: [],
-			unmounted: false,
-			unmountCallbacks: [],
-			_props: props
-		};
-		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 cb of ctx.unmountCallbacks) cb();
-		});
-		return () => {
-			version();
-			beginRender(ctx);
-			const result = runUntracked(() => vueComponent(props));
-			const layoutEffects = ctx.pendingLayoutEffects;
-			const effects = ctx.pendingEffects;
-			endRender();
-			runLayoutEffects(layoutEffects);
-			scheduleEffects(ctx, effects);
-			return result;
-		};
-	});
-	_wrapperCache.set(vueComponent, 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);
-	}
-	if (typeof type === "string" && propsWithKey.ref != null) {
-		const r = propsWithKey.ref;
-		if (typeof r === "object" && r !== null && r[Symbol.for("__v_isRef")] === true) {
-			const vueRef = r;
-			propsWithKey.ref = (el) => {
-				vueRef.value = el;
-			};
-		}
-	}
-	return h(type, propsWithKey, ...children === void 0 ? [] : Array.isArray(children) ? children : [children]);
-}
-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/vue-compat",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Vue 3-compatible Composition API shim for Pyreon — write Vue-style code that runs on Pyreon's reactive engine",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/vue-compat#readme",
   "bugs": {
@@ -54,13 +54,13 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@pyreon/core": "^0.22.0",
-    "@pyreon/reactivity": "^0.22.0",
-    "@pyreon/runtime-dom": "^0.22.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.9",
+    "@pyreon/test-utils": "^0.13.10",
     "@vitest/browser-playwright": "^4.1.4",
     "happy-dom": "^20.8.3"
   }

package/src/index.ts

@@ -28,11 +28,11 @@ import {
   onMount,
   onUnmount,
   onUpdate,
-  popContext,
   Portal,
   pushContext,
   h as pyreonH,
   Suspense as PyreonSuspense,
+  removeContextFrame,
   useContext,
 } from '@pyreon/core'
 import {
@@ -885,8 +885,16 @@ export function provide<T>(key: string | symbol, value: T): void {
     if (idx < ctx.hooks.length) return // Already provided
     ctx.hooks[idx] = true
     const vueCtx = getOrCreateContext<T>(key)
-    pushContext(new Map([[vueCtx.id, value]]))
-    ctx.unmountCallbacks.push(() => popContext())
+    // Identity-based push/pop pair — capture the frame reference at push
+    // time, remove it by identity (not position) on unmount. Position-based
+    // `popContext()` here would pop the WRONG frame whenever sibling
+    // components unmount out-of-order (renderer-driven `<For>` removal,
+    // `<Show>` flipping a non-last sibling, route nav unmounting an outer
+    // of nested provider chains). Same root cause + same fix shape as
+    // `@pyreon/core` #725's `provide()` and #729's `_errorBoundaryStack`.
+    const frame = new Map([[vueCtx.id, value]])
+    pushContext(frame)
+    ctx.unmountCallbacks.push(() => removeContextFrame(frame))
     return
   }
   // Outside component — use Pyreon's provide directly
@@ -1070,13 +1078,32 @@ export function createApp(component: ComponentFn, props?: Props): App {
       if (!container) {
         throw new Error(`Cannot find mount target: ${el}`)
       }
-      // Push app-level provisions before mounting
+      // Push app-level provisions before mounting AND track each pushed
+      // frame so the returned unmount callback can remove them by IDENTITY.
+      // Pre-fix the pushes were unmatched — every `createApp(...).provide(k,v).mount(el)`
+      // call leaked one Map reference per provision onto the global context
+      // stack permanently. Mount/unmount cycles compound this.
+      const pushedFrames: Map<symbol, unknown>[] = []
       for (const { key, value } of provisions) {
         const ctx = getOrCreateContext(key)
-        pushContext(new Map([[ctx.id, value]]))
+        const frame = new Map([[ctx.id, value]])
+        pushContext(frame)
+        pushedFrames.push(frame)
       }
       const vnode = pyreonH(component, props ?? null)
-      return pyreonMount(vnode, container)
+      const unmount = pyreonMount(vnode, container)
+      return () => {
+        unmount()
+        // Remove app-level provisions by identity (reverse order to match
+        // LIFO push order if the same frame ref appears multiple times,
+        // though that's structurally impossible here — each frame is a
+        // fresh Map). Identity-based so other mounts pushing in between
+        // can't accidentally remove our frames or have theirs removed.
+        for (let i = pushedFrames.length - 1; i >= 0; i--) {
+          const frame = pushedFrames[i]
+          if (frame) removeContextFrame(frame)
+        }
+      }
     },
     use(plugin: { install: (app: App) => void }): App {
       plugin.install(app)