@pyreon/vue-compat 0.18.0 → 0.19.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":"2431af31-1","name":"jsx-runtime.ts"},{"uid":"2431af31-3","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"2431af31-1":{"renderedLength":186,"gzipLength":138,"brotliLength":0,"metaUid":"2431af31-0"},"2431af31-3":{"renderedLength":21829,"gzipLength":5180,"brotliLength":0,"metaUid":"2431af31-2"}},"nodeMetas":{"2431af31-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"index.js":"2431af31-1"},"imported":[{"uid":"2431af31-4"},{"uid":"2431af31-5"}],"importedBy":[{"uid":"2431af31-2"}]},"2431af31-2":{"id":"/src/index.ts","moduleParts":{"index.js":"2431af31-3"},"imported":[{"uid":"2431af31-4"},{"uid":"2431af31-5"},{"uid":"2431af31-6"},{"uid":"2431af31-0"}],"importedBy":[],"isEntry":true},"2431af31-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-2"},{"uid":"2431af31-0"}]},"2431af31-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-2"},{"uid":"2431af31-0"}]},"2431af31-6":{"id":"@pyreon/runtime-dom","moduleParts":{},"imported":[],"importedBy":[{"uid":"2431af31-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","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 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":"5769505c-1","name":"jsx-runtime.ts"},{"uid":"5769505c-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"5769505c-1":{"renderedLength":2715,"gzipLength":981,"brotliLength":0,"metaUid":"5769505c-0"},"5769505c-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"5769505c-2"}},"nodeMetas":{"5769505c-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"5769505c-1"},"imported":[{"uid":"5769505c-4"},{"uid":"5769505c-5"}],"importedBy":[{"uid":"5769505c-2"}]},"5769505c-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"5769505c-3"},"imported":[{"uid":"5769505c-0"}],"importedBy":[],"isEntry":true},"5769505c-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"5769505c-0"}]},"5769505c-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"5769505c-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":"de753381-1","name":"jsx-runtime.ts"},{"uid":"de753381-3","name":"jsx-dev-runtime.ts"}]}]}],"isRoot":true},"nodeParts":{"de753381-1":{"renderedLength":2733,"gzipLength":986,"brotliLength":0,"metaUid":"de753381-0"},"de753381-3":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"de753381-2"}},"nodeMetas":{"de753381-0":{"id":"/src/jsx-runtime.ts","moduleParts":{"jsx-runtime.js":"de753381-1"},"imported":[{"uid":"de753381-4"},{"uid":"de753381-5"}],"importedBy":[{"uid":"de753381-2"}]},"de753381-2":{"id":"/src/jsx-dev-runtime.ts","moduleParts":{"jsx-runtime.js":"de753381-3"},"imported":[{"uid":"de753381-0"}],"importedBy":[],"isEntry":true},"de753381-4":{"id":"@pyreon/core","moduleParts":{},"imported":[],"importedBy":[{"uid":"de753381-0"}]},"de753381-5":{"id":"@pyreon/reactivity","moduleParts":{},"imported":[],"importedBy":[{"uid":"de753381-0"}]}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -1,6 +1,6 @@
-import { Fragment, Portal, createContext, h as pyreonH, onMount, onUnmount, onUpdate, popContext, pushContext, useContext } from "@pyreon/core";
+import { Fragment, Portal, Suspense as Suspense$1, createContext, h as pyreonH, onMount, onUnmount, onUpdate, popContext, pushContext, useContext } from "@pyreon/core";
 import { batch, computed as computed$1, createStore, effect, nextTick as nextTick$1, signal } from "@pyreon/reactivity";
-import { mount } from "@pyreon/runtime-dom";
+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;
@@ -643,20 +643,40 @@ function inject(key, defaultValue, treatDefaultAsFactory) {
 	return defaultValue;
 }
 /**
+* Computes Vue's fallthrough `attrs` — every passed prop that is NOT a
+* declared prop (and not the internal `children` slot payload). When the
+* component declared no props (`declared` undefined) the split is unknowable,
+* so the full props object is returned (honest back-compat — matches the
+* pre-split behavior rather than guessing).
+*/
+function splitVueAttrs(props, declared) {
+	if (!declared) return props;
+	const declaredSet = new Set(declared);
+	const attrs = {};
+	for (const key of Object.keys(props)) {
+		if (key === "children" || declaredSet.has(key)) continue;
+		attrs[key] = props[key];
+	}
+	return attrs;
+}
+/**
 * Defines a component using Vue 3 Composition API style.
 * Only supports the `setup()` function — Options API is not supported.
 */
 function defineComponent(options) {
 	if (typeof options === "function") return options;
+	const declaredProps = options.props ? Object.keys(options.props) : void 0;
 	const comp = (props) => {
 		const children = props.children;
+		const rc = getCurrentCtx();
+		if (rc && declaredProps) rc._declaredProps = declaredProps;
 		const setupCtx = {
 			emit: (event, ...args) => {
 				const handler = props[`on${event.charAt(0).toUpperCase()}${event.slice(1)}`];
 				if (typeof handler === "function") handler(...args);
 			},
 			slots: { default: children !== void 0 ? (() => children) : void 0 },
-			attrs: props
+			attrs: splitVueAttrs(props, declaredProps)
 		};
 		const result = options.setup(props, setupCtx);
 		if (typeof result === "function") return result();
@@ -832,10 +852,288 @@ function Teleport(props) {
 	});
 }
 /**
-* KeepAlive — not supported in Pyreon. Renders children as-is.
+* KeepAlive — mounts its children once and keeps them alive (state preserved)
+* even when hidden, instead of destroying/recreating them.
+*
+* Wraps `@pyreon/runtime-dom`'s real KeepAlive. Vue's `<KeepAlive>` keeps a
+* cache of inactive component instances; this maps the common single-slot
+* usage to Pyreon's `active`-accessor model.
+*
+* LIMITATIONS vs Vue 3:
+*  - Vue's `include` / `exclude` / `max` props are NOT supported. Pyreon's
+*    KeepAlive is a single always-mounted slot toggled by an `active`
+*    accessor — there is no per-component LRU cache to filter or bound.
+*    These props are accepted (so existing Vue code typechecks) but ignored.
+*  - Vue toggles activation via the dynamic child (`<component :is>`); here
+*    you pass an `active` accessor (`() => boolean`). When omitted, children
+*    are always mounted and visible (a faithful default — nothing is
+*    destroyed, matching KeepAlive's core guarantee).
+*
+* @example
+* import { KeepAlive, ref } from "@pyreon/vue-compat"
+*
+* function App() {
+*   const showA = ref(true)
+*   return (
+*     <KeepAlive active={() => showA.value}>
+*       <ExpensiveTab />
+*     </KeepAlive>
+*   )
+* }
 */
 function KeepAlive(props) {
-	return props.children ?? null;
+	return KeepAlive$1({
+		...props.active !== void 0 ? { active: props.active } : {},
+		children: props.children ?? null
+	});
+}
+/**
+* Transition — adds CSS enter/leave animation classes to a single child,
+* controlled by a reactive `show` accessor.
+*
+* Wraps `@pyreon/runtime-dom`'s Transition. Vue's class-name conventions
+* (`enter-from-class`, `enter-active-class`, …) are mapped onto Pyreon's
+* (`enterFrom`, `enterActive`, …), and Vue's `@before-enter` / `@after-enter`
+* style hooks are mapped onto Pyreon's `onBeforeEnter` / `onAfterEnter`.
+*
+* LIMITATIONS vs Vue 3:
+*  - Vue's `<Transition>` infers visibility from a `v-if` / `v-show` on its
+*    child. Pyreon has no template directives, so you MUST pass an explicit
+*    `show: () => boolean` accessor. Without it the child is shown
+*    unconditionally (no enter/leave is ever triggered).
+*  - `mode` ("out-in" / "in-out"), `css: false`, and JS-only hook-driven
+*    transitions are NOT supported — Pyreon's Transition is CSS-class based.
+*    The props are accepted for typechecking but ignored.
+*  - The Vue `name` convention (`name="fade"` → `fade-enter-from` …) is
+*    preserved 1:1 (Pyreon uses the identical class-name scheme).
+*
+* @example
+* import { Transition, ref } from "@pyreon/vue-compat"
+*
+* function App() {
+*   const visible = ref(false)
+*   return (
+*     <Transition name="fade" show={() => visible.value}>
+*       <div class="modal">Hello</div>
+*     </Transition>
+*   )
+* }
+* // CSS:
+* //   .fade-enter-from, .fade-leave-to     { opacity: 0; }
+* //   .fade-enter-active, .fade-leave-active { transition: opacity 300ms; }
+*/
+function Transition(props) {
+	return Transition$1({
+		show: props.show ?? (() => true),
+		...props.name !== void 0 ? { name: props.name } : {},
+		...props.appear !== void 0 ? { appear: props.appear } : {},
+		...props.enterFromClass !== void 0 ? { enterFrom: props.enterFromClass } : {},
+		...props.enterActiveClass !== void 0 ? { enterActive: props.enterActiveClass } : {},
+		...props.enterToClass !== void 0 ? { enterTo: props.enterToClass } : {},
+		...props.leaveFromClass !== void 0 ? { leaveFrom: props.leaveFromClass } : {},
+		...props.leaveActiveClass !== void 0 ? { leaveActive: props.leaveActiveClass } : {},
+		...props.leaveToClass !== void 0 ? { leaveTo: props.leaveToClass } : {},
+		...props.onBeforeEnter !== void 0 ? { onBeforeEnter: props.onBeforeEnter } : {},
+		...props.onAfterEnter !== void 0 ? { onAfterEnter: props.onAfterEnter } : {},
+		...props.onBeforeLeave !== void 0 ? { onBeforeLeave: props.onBeforeLeave } : {},
+		...props.onAfterLeave !== void 0 ? { onAfterLeave: props.onAfterLeave } : {},
+		children: props.children ?? null
+	});
+}
+/**
+* TransitionGroup — animates a keyed reactive list with CSS enter/leave plus
+* FLIP move animations.
+*
+* Wraps `@pyreon/runtime-dom`'s TransitionGroup. Vue's class-name props are
+* mapped onto Pyreon's, same as {@link Transition}.
+*
+* LIMITATIONS vs Vue 3:
+*  - Vue's `<TransitionGroup>` renders its children via slots and reads keys
+*    from the child VNode `key`. Pyreon's API is explicit: pass `items`
+*    (a reactive accessor), `keyFn` (stable key extractor), and `render`
+*    (returns one DOM-element VNode per item). This is the faithful Pyreon
+*    shape — the animation behavior (enter/leave/FLIP-move) is identical.
+*  - `mode` and `css: false` are NOT supported (CSS-class transitions only).
+*
+* @example
+* import { TransitionGroup, ref } from "@pyreon/vue-compat"
+*
+* function App() {
+*   const items = ref([{ id: 1 }, { id: 2 }])
+*   return (
+*     <TransitionGroup
+*       tag="ul"
+*       name="list"
+*       items={() => items.value}
+*       keyFn={(it) => it.id}
+*       render={(it) => <li class="item">{it.id}</li>}
+*     />
+*   )
+* }
+*/
+function TransitionGroup(props) {
+	return TransitionGroup$1({
+		items: props.items,
+		keyFn: props.keyFn,
+		render: props.render,
+		...props.tag !== void 0 ? { tag: props.tag } : {},
+		...props.name !== void 0 ? { name: props.name } : {},
+		...props.appear !== void 0 ? { appear: props.appear } : {},
+		...props.enterFromClass !== void 0 ? { enterFrom: props.enterFromClass } : {},
+		...props.enterActiveClass !== void 0 ? { enterActive: props.enterActiveClass } : {},
+		...props.enterToClass !== void 0 ? { enterTo: props.enterToClass } : {},
+		...props.leaveFromClass !== void 0 ? { leaveFrom: props.leaveFromClass } : {},
+		...props.leaveActiveClass !== void 0 ? { leaveActive: props.leaveActiveClass } : {},
+		...props.leaveToClass !== void 0 ? { leaveTo: props.leaveToClass } : {},
+		...props.moveClass !== void 0 ? { moveClass: props.moveClass } : {},
+		...props.onBeforeEnter !== void 0 ? { onBeforeEnter: props.onBeforeEnter } : {},
+		...props.onAfterEnter !== void 0 ? { onAfterEnter: props.onAfterEnter } : {},
+		...props.onBeforeLeave !== void 0 ? { onBeforeLeave: props.onBeforeLeave } : {},
+		...props.onAfterLeave !== void 0 ? { onAfterLeave: props.onAfterLeave } : {}
+	});
+}
+/**
+* Suspense — shows `fallback` content while an async (lazy) child is loading.
+*
+* Re-exports `@pyreon/core`'s Suspense. Vue 3's `<Suspense>` uses named
+* `#default` / `#fallback` slots; this maps the `fallback` slot to Pyreon
+* Suspense's `fallback` prop and the default slot to `children`.
+*
+* LIMITATIONS vs Vue 3:
+*  - Vue resolves `<Suspense>` against any `async setup()` in the subtree and
+*    supports `@resolve` / `@pending` / `@fallback` events plus the `timeout`
+*    prop. Pyreon's Suspense resolves against components carrying a
+*    `__loading` accessor (e.g. {@link defineAsyncComponent} output) and does
+*    not emit those events. The events / `timeout` prop are accepted for
+*    typechecking but ignored.
+*
+* @example
+* import { Suspense, defineAsyncComponent } from "@pyreon/vue-compat"
+*
+* const AsyncPage = defineAsyncComponent(() => import("./Page"))
+*
+* function App() {
+*   return (
+*     <Suspense fallback={<div>Loading…</div>}>
+*       <AsyncPage />
+*     </Suspense>
+*   )
+* }
+*/
+function Suspense(props) {
+	return Suspense$1({
+		fallback: props.fallback ?? null,
+		children: props.children ?? null
+	});
+}
+let _instanceUid = 0;
+/**
+* Returns a handle to the current component instance, or `null` if called
+* outside a component setup.
+*
+* Vue 3's `getCurrentInstance()` is an internal API many composable libraries
+* (vee-validate, vue-i18n, pinia plugins, …) read for `uid`, `proxy`, `slots`,
+* `attrs`. This shim returns a minimal stable object with those fields so such
+* libraries don't crash.
+*
+* LIMITATIONS vs Vue 3:
+*  - `proxy` is an empty object — Pyreon components are plain functions with
+*    no `this`-bound Options instance. Code that reads reactive state off
+*    `instance.proxy.$data` / `.$props` will not work; use `props` directly.
+*  - `instance.emit(event, ...args)` IS provided (invokes the matching
+*    `on{Event}` prop handler). `instance.attrs` is the fallthrough split
+*    (declared props excluded) when the component used `defineComponent({
+*    props })`; otherwise it is the full props object.
+*  - `appContext`, `parent`, `vnode`, `expose`, render internals are NOT
+*    provided. Libraries that walk the parent chain are not supported.
+*  - The same `uid` is stable across re-renders of the same instance
+*    (hook-indexed), matching Vue's per-instance-id guarantee.
+*
+* @example
+* import { getCurrentInstance } from "@pyreon/vue-compat"
+*
+* function useUid() {
+*   const inst = getCurrentInstance()
+*   return inst ? inst.uid : -1
+* }
+*/
+function getCurrentInstance() {
+	const ctx = getCurrentCtx();
+	if (!ctx) return null;
+	const idx = getHookIndex();
+	if (idx < ctx.hooks.length) return ctx.hooks[idx];
+	const props = ctx._props ?? {};
+	const children = props.children;
+	const instance = {
+		uid: _instanceUid++,
+		proxy: {},
+		slots: { default: children !== void 0 ? () => children : void 0 },
+		attrs: splitVueAttrs(props, ctx._declaredProps),
+		emit: (event, ...args) => {
+			const handler = props[`on${event.charAt(0).toUpperCase()}${event.slice(1)}`];
+			if (typeof handler === "function") handler(...args);
+		},
+		isMounted: true,
+		_ctx: ctx
+	};
+	ctx.hooks[idx] = instance;
+	return instance;
+}
+/**
+* Returns the current component's slots — a map of slot-name → render
+* function. Only the `default` slot is populated (derived from `children`),
+* matching how `@pyreon/vue-compat` models slots elsewhere
+* ({@link defineComponent}'s setup context).
+*
+* LIMITATIONS vs Vue 3:
+*  - Vue supports arbitrary named + scoped slots resolved from the parent
+*    template. Pyreon passes a single `children` payload, so only
+*    `slots.default` is available. Named/scoped slots are not modeled.
+*  - Returns an empty object (no `default`) when there are no children or
+*    when called outside a component.
+*
+* @example
+* import { useSlots } from "@pyreon/vue-compat"
+*
+* function Wrapper() {
+*   const slots = useSlots()
+*   return <div class="box">{slots.default?.()}</div>
+* }
+*/
+function useSlots() {
+	const ctx = getCurrentCtx();
+	if (!ctx) return {};
+	const children = (ctx._props ?? {}).children;
+	if (children === void 0) return {};
+	return { default: () => children };
+}
+/**
+* Returns the current component's non-prop attributes.
+*
+* In Vue, `useAttrs()` is the fallthrough attributes NOT declared in `props`.
+* `@pyreon/vue-compat` does not do declared-prop separation (components are
+* plain functions receiving one `props` object), so this returns the full
+* props object — every consumer-supplied attribute is present.
+*
+* LIMITATIONS vs Vue 3:
+*  - No declared-vs-fallthrough split: `useAttrs()` here === the full props
+*    object (including any that Vue would have consumed as declared props).
+*    Read the specific keys you need; don't assume the result excludes
+*    declared props.
+*  - Returns an empty object when called outside a component.
+*
+* @example
+* import { useAttrs } from "@pyreon/vue-compat"
+*
+* function Passthrough() {
+*   const attrs = useAttrs()
+*   return <input {...attrs} />
+* }
+*/
+function useAttrs() {
+	const ctx = getCurrentCtx();
+	if (!ctx) return {};
+	return splitVueAttrs(ctx._props ?? {}, ctx._declaredProps);
 }
 /**
 * Runs a watchEffect that flushes after DOM updates.
@@ -876,5 +1174,5 @@ function customRef(factory) {
 const version = "3.5.0-pyreon";
 
 //#endregion
-export { Fragment, KeepAlive, Teleport, batch, computed, createApp, customRef, defineAsyncComponent, defineComponent, effectScope, getCurrentScope, pyreonH as h, inject, isProxy, isReactive, isReadonly, isRef, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onUnmounted, onUpdated, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, toValue, triggerRef, unref, version, watch, watchEffect, watchPostEffect, watchSyncEffect };
+export { Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, batch, computed, createApp, customRef, defineAsyncComponent, defineComponent, effectScope, getCurrentInstance, getCurrentScope, pyreonH as h, inject, isProxy, isReactive, isReadonly, isRef, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onScopeDispose, onUnmounted, onUpdated, provide, reactive, readonly, ref, shallowReactive, shallowReadonly, shallowRef, toRaw, toRef, toRefs, toValue, triggerRef, unref, useAttrs, useSlots, version, watch, watchEffect, watchPostEffect, watchSyncEffect };
 //# sourceMappingURL=index.js.map

package/lib/jsx-runtime.js

@@ -43,7 +43,8 @@ function wrapCompatComponent(vueComponent) {
 			pendingEffects: [],
 			pendingLayoutEffects: [],
 			unmounted: false,
-			unmountCallbacks: []
+			unmountCallbacks: [],
+			_props: props
 		};
 		const version = signal(0);
 		let updateScheduled = false;