@poveste/plugin-vue 0.11.0 → 0.12.0

package/dist/bundled/client/app/Variant.js

@@ -2,9 +2,9 @@ import { useRenderContext as e } from "./render-context.js";
 import { syncVariantAutoProps as t } from "./auto-props.js";
 import { syncStateBundledAndExternal as n, toRawDeep as r } from "./util.js";
 import { computed as i, defineComponent as a, getCurrentInstance as o, inject as s, onBeforeUnmount as c, useAttrs as l } from "vue";
-import { applyState as u } from "@poveste/shared";
+import { applyState as u, autoPropsStateKeys as d } from "@poveste/shared";
 //#region src/client/app/Variant.ts
-var d = a({
+var f = a({
 	name: "Variant",
 	__povesteType: "variant",
 	props: {
@@ -38,47 +38,47 @@ var d = a({
 		}
 	},
 	async setup(a) {
-		let d = l(), f = o(), p = s("story"), m = s("implicitState"), h = e(), g, _, v, y;
+		let f = l(), p = o(), m = s("story"), h = s("implicitState"), g = e(), _, v, y, b;
 		c(() => {
-			v?.stop(), y?.stop();
+			y?.stop(), b?.stop();
 		});
-		let b = i(() => d.variant);
-		if (h?.mode !== "render" && typeof a.initState == "function" && b.value) {
+		let x = i(() => f.variant);
+		if (g?.mode !== "render" && typeof a.initState == "function" && x.value) {
 			let e = await a.initState();
-			u(b.value.state, r(e));
+			u(x.value.state, r(e));
 		}
-		h?.mode !== "render" && b.value && m && (y = n(b.value.state, m()));
-		function x(e) {
+		g?.mode !== "render" && x.value && h && (b = n(x.value.state, h(), d));
+		function S(e) {
 			Object.assign(e, {
-				slots: () => f.proxy.$slots,
+				slots: () => p.proxy.$slots,
 				source: a.source,
 				responsiveDisabled: a.responsiveDisabled,
 				autoPropsDisabled: a.autoPropsDisabled,
 				setupApp: a.setupApp,
 				meta: a.meta,
 				configReady: !0
-			}), !a.implicit && !p.value?.meta?.hasVariantChildComponents && (p.value.meta || (p.value.meta = {}), Object.assign(p.value.meta, { hasVariantChildComponents: !0 }));
+			}), !a.implicit && !m.value?.meta?.hasVariantChildComponents && (m.value.meta || (m.value.meta = {}), Object.assign(m.value.meta, { hasVariantChildComponents: !0 }));
 		}
-		function S() {
-			return d.variant ? d.variant : h?.mode === "render" ? (_ || (_ = p.value?.variants[h.nextVariantIndex.value], h.nextVariantIndex.value++), _) : null;
-		}
-		function C(e) {
-			if (h.slotName === "controls") return f.proxy.$slots.controls?.({ state: h.externalState }) ?? null;
-			if (h.slotName !== "default") return null;
-			let n = f.proxy.$slots.default?.({ state: h.externalState }) ?? null;
-			return n && !e.autoPropsDisabled && (g = t(e, n, h.externalState, g)), n;
+		function C() {
+			return f.variant ? f.variant : g?.mode === "render" ? (v || (v = m.value?.variants[g.nextVariantIndex.value], g.nextVariantIndex.value++), v) : null;
 		}
 		function w(e) {
-			if (!m) return;
-			let t = h?.mode === "render" && h.currentVariant?.id === e.id;
-			t && !v ? v = n(e.state, m()) : !t && v && (v.stop(), v = null);
+			if (g.slotName === "controls") return p.proxy.$slots.controls?.({ state: g.externalState }) ?? null;
+			if (g.slotName !== "default") return null;
+			let n = p.proxy.$slots.default?.({ state: g.externalState }) ?? null;
+			return n && !e.autoPropsDisabled && (_ = t(e, n, g.externalState, _)), n;
+		}
+		function T(e) {
+			if (!h) return;
+			let t = g?.mode === "render" && g.currentVariant?.id === e.id;
+			t && !y ? y = n(e.state, h(), d) : !t && y && (y.stop(), y = null);
 		}
-		return b.value && x(b.value), {
-			renderContext: h,
-			renderVariantSlot: C,
-			resolveVariant: S,
-			syncRenderVariantState: w,
-			updateVariant: x
+		return x.value && S(x.value), {
+			renderContext: g,
+			renderVariantSlot: w,
+			resolveVariant: C,
+			syncRenderVariantState: T,
+			updateVariant: S
 		};
 	},
 	render() {
@@ -87,4 +87,4 @@ var d = a({
 	}
 });
 //#endregion
-export { d as default };
+export { f as default };

package/dist/bundled/client/app/auto-props.js

@@ -9,42 +9,61 @@ function r(e, t) {
 	let n = [];
 	return i(e, t, { index: 0 }, n), n.filter((e) => e.props.length);
 }
-function i(t, n, r, o) {
-	for (let s of a(t)) if (s) {
-		if (typeof s.type == "object") {
-			let t = r.index++, i = [];
-			for (let e in s.type.props) {
-				let r = s.type.props[e], a, o;
-				r && (a = (Array.isArray(r.type) ? r.type : typeof r == "function" ? [r] : [r.type]).map((e) => {
-					switch (e) {
-						case String: return "string";
-						case Number: return "number";
-						case Boolean: return "boolean";
-						case Object: return "object";
-						case Array: return "array";
-						default: return "unknown";
-					}
-				}), o = typeof r.default == "function" ? r.default.toString() : r.default), i.push({
+function i(t, n, r, l) {
+	for (let u of c(t)) if (u) {
+		if (typeof u.type == "object") {
+			let t = r.index++, i = [], c = u.type.props, d = Array.isArray(c) ? c : Object.keys(c ?? {});
+			for (let e of d) {
+				let r = Array.isArray(c) ? void 0 : c[e], l, d;
+				if (r && (l = (Array.isArray(r.type) ? r.type : typeof r == "function" ? [r] : [r.type]).map(a), d = typeof r.default == "function" ? r.default.toString() : r.default), !l || l.every((e) => e === "unknown")) {
+					let t = o(s(u, e) ?? r?.default);
+					t !== "unknown" && (l = [t]);
+				}
+				i.push({
 					name: e,
-					types: a,
+					types: l,
 					required: r?.required,
-					default: o
-				}), n?._hPropState?.[t]?.[e] != null && (s.props ||= {}, s.props[e] = n._hPropState[t][e], s.dynamicProps ||= [], s.dynamicProps.includes(e) || s.dynamicProps.push(e));
+					default: d
+				}), n?._hPropState?.[t]?.[e] != null && (u.props ||= {}, u.props[e] = n._hPropState[t][e], u.dynamicProps ||= [], u.dynamicProps.includes(e) || u.dynamicProps.push(e));
 			}
-			o.push({
-				name: e(s),
+			l.push({
+				name: e(u),
 				index: t,
 				props: i
 			});
 		}
-		Array.isArray(s.children) && i(s.children, n, r, o);
+		Array.isArray(u.children) && i(u.children, n, r, l);
 	}
 }
 function a(e) {
+	switch (e) {
+		case String: return "string";
+		case Number: return "number";
+		case Boolean: return "boolean";
+		case Object: return "object";
+		case Array: return "array";
+		default: return "unknown";
+	}
+}
+function o(e) {
+	if (Array.isArray(e)) return "array";
+	switch (typeof e) {
+		case "string": return "string";
+		case "number": return "number";
+		case "boolean": return "boolean";
+		case "object": return e === null ? "unknown" : "object";
+		default: return "unknown";
+	}
+}
+function s(e, t) {
+	let n = e.props;
+	if (n) return t in n ? n[t] : n[t.replace(/\B([A-Z])/g, "-$1").toLowerCase()];
+}
+function c(e) {
 	if (!Array.isArray(e)) return e == null ? [] : [e];
 	let t = [];
-	for (let n of e) Array.isArray(n) ? t.push(...a(n)) : n != null && t.push(n);
+	for (let n of e) Array.isArray(n) ? t.push(...c(n)) : n != null && t.push(n);
 	return t;
 }
 //#endregion
-export { n as syncVariantAutoProps };
+export { o as inferredType, s as passedValue, n as syncVariantAutoProps };

package/dist/bundled/client/app/util.js

@@ -42,24 +42,30 @@ function f(e, t, n = /* @__PURE__ */ new WeakMap()) {
 	});
 }
 function p(e, t) {
-	let r = s(), i = n(() => e, (e) => {
+	if (!t.length) return e;
+	let n = { ...e };
+	for (let e of t) delete n[e];
+	return n;
+}
+function m(e, t, r = []) {
+	let i = s(), c = n(() => e, (e) => {
 		if (e == null) return;
-		let n = r.take(d(e));
+		let n = i.take(p(d(e), r));
 		n && o(t, n);
 	}, {
 		deep: !0,
 		immediate: !0
-	}), c = a(() => t, (t) => {
+	}), u = a(() => t, (t) => {
 		if (t == null) return;
-		let n = r.take(l(t));
+		let n = i.take(p(l(t), r));
 		n && o(e, n);
 	}, {
 		deep: !0,
 		immediate: !0
 	});
 	return { stop() {
-		i(), c();
+		c(), u();
 	} };
 }
 //#endregion
-export { d as _toRawDeep, p as syncStateBundledAndExternal, l as toRawDeep };
+export { d as _toRawDeep, m as syncStateBundledAndExternal, l as toRawDeep };

package/dist/client/app/auto-props.d.ts

@@ -1,2 +1,5 @@
 import type { Variant } from '@poveste/shared';
 export declare function syncVariantAutoProps(variant: Variant, vnodes: any, externalState: Variant['state'], lastSnapshot: string): string;
+/** What the value itself says, when the declaration no longer says anything. */
+export declare function inferredType(value: unknown): string;
+export declare function passedValue(vnode: any, key: string): unknown;

package/dist/client/app/util.d.ts

@@ -10,7 +10,8 @@ export declare function _toRawDeep(val: any, seen?: WeakMap<WeakKey, any>): any;
  * Synchronize states between the bundled and external/user versions of Vue
  * @param bundledState Reactive state created with the bundled Vue
  * @param externalState Reactive state created with the external/user Vue
+ * @param omit Keys neither side may learn from the other
  */
-export declare function syncStateBundledAndExternal(bundledState: any, externalState: any): {
+export declare function syncStateBundledAndExternal(bundledState: any, externalState: any, omit?: string[]): {
     stop(): void;
 };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Poveste plugin for Vue.js support",
   "author": {
-    "name": "Sorin Gitlan"
+    "name": "Sorin Gitlan",
+    "url": "https://x.com/50rayn"
   },
   "license": "MIT",
   "homepage": "https://poveste.dev",
@@ -69,26 +70,26 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "peerDependencies": {
-    "vue": "^3.5.26",
-    "poveste": "^0.11.0"
+    "poveste": "^0.12.0",
+    "vue": "^3.5.26"
   },
   "dependencies": {
+    "@poveste/controls": "^0.12.0",
+    "@poveste/shared": "^0.12.0",
+    "@poveste/vendors": "^0.12.0",
     "change-case": "^5.4.4",
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
-    "pathe": "^1.1.2",
-    "@poveste/controls": "^0.11.0",
-    "@poveste/shared": "^0.11.0",
-    "@poveste/vendors": "^0.11.0"
+    "pathe": "^1.1.2"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
     "concurrently": "^9.1.0",
+    "poveste": "0.12.0",
     "typescript": "5.6.3",
     "vite": "^8.2.0",
     "vitest": "^4.1.10",
-    "vue": "^3.5.26",
-    "poveste": "0.11.0"
+    "vue": "^3.5.26"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/app/Variant.ts

@@ -1,6 +1,6 @@
 import type { Variant } from '@poveste/shared'
 import type { ComputedRef, PropType } from 'vue'
-import { applyState } from '@poveste/shared'
+import { applyState, autoPropsStateKeys } from '@poveste/shared'
 import { computed, defineComponent, getCurrentInstance, inject, onBeforeUnmount, useAttrs } from 'vue'
 import { syncVariantAutoProps } from './auto-props.js'
 import { useRenderContext } from './render-context.js'
@@ -84,7 +84,7 @@ export default defineComponent({
     }
 
     if (renderContext?.mode !== 'render' && mountVariant.value && implicitState) {
-      mountStateSync = syncStateBundledAndExternal(mountVariant.value.state, implicitState())
+      mountStateSync = syncStateBundledAndExternal(mountVariant.value.state, implicitState(), autoPropsStateKeys)
     }
 
     function updateVariant(variant: Variant) {
@@ -162,7 +162,7 @@ export default defineComponent({
         && renderContext.currentVariant?.id === variant.id
 
       if (shouldSync && !renderStateSync) {
-        renderStateSync = syncStateBundledAndExternal(variant.state, implicitState())
+        renderStateSync = syncStateBundledAndExternal(variant.state, implicitState(), autoPropsStateKeys)
       }
       else if (!shouldSync && renderStateSync) {
         renderStateSync.stop()

package/src/client/app/__tests__/auto-props.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { inferredType, passedValue } from '../auto-props.js'
+
+/*
+ * A production build erases the runtime types Vue infers from a type-only
+ * `defineProps`, so the declaration says nothing and the value has to (#490).
+ */
+describe('the type a value implies', () => {
+  it.each([
+    ['a string', 'hello', 'string'],
+    ['a number', 42, 'number'],
+    ['zero', 0, 'number'],
+    ['a boolean', false, 'boolean'],
+    ['an array', [1, 2], 'array'],
+    ['an object', { a: 1 }, 'object'],
+  ])('reads %s', (_, value, expected) => {
+    expect(inferredType(value)).toBe(expected)
+  })
+
+  // Nothing to go on, and guessing would pick a control the prop cannot hold.
+  // A factory default arrives here as the function it is, which is why nothing
+  // upstream has to strip it first.
+  it.each([
+    ['null', null],
+    ['undefined', undefined],
+    ['a factory default', () => []],
+  ])('declines to guess from %s', (_, value) => {
+    expect(inferredType(value)).toBe('unknown')
+  })
+})
+
+describe('the value a vnode passed', () => {
+  it('finds a prop under the name it was declared with', () => {
+    expect(passedValue({ props: { label: 'x' } }, 'label')).toBe('x')
+  })
+
+  // `vnode.type.props` is keyed as declared, `vnode.props` as authored.
+  it('finds a multi-word prop written in kebab case', () => {
+    expect(passedValue({ props: { 'my-label': 'x' } }, 'myLabel')).toBe('x')
+  })
+
+  it('prefers the declared spelling when both are present', () => {
+    expect(passedValue({ props: { 'myLabel': 'camel', 'my-label': 'kebab' } }, 'myLabel')).toBe('camel')
+  })
+
+  it('is undefined when the component was given no props at all', () => {
+    expect(passedValue({}, 'label')).toBeUndefined()
+  })
+})

package/src/client/app/__tests__/state-sync.spec.ts

@@ -1,3 +1,4 @@
+import { autoPropsStateKeys } from '@poveste/shared'
 import { nextTick as bundledNextTick, reactive as bundledReactive } from '@poveste/vendors/vue'
 import { describe, expect, it } from 'vitest'
 import { nextTick, reactive, watch } from 'vue'
@@ -17,10 +18,10 @@ async function settle() {
   }
 }
 
-function setup(initial: Record<string, any>) {
+function setup(initial: Record<string, any>, omit: string[] = []) {
   const bundled = bundledReactive(structuredClone(initial))
   const external = reactive(structuredClone(initial))
-  const sync = syncStateBundledAndExternal(bundled, external)
+  const sync = syncStateBundledAndExternal(bundled, external, omit)
   return { bundled, external, sync }
 }
 
@@ -339,3 +340,48 @@ describe('syncStateBundledAndExternal', () => {
     sync.stop()
   })
 })
+
+/*
+ * A variant's state is synced with the story's implicit state, which every
+ * variant shares — so anything that crosses reaches all of them. `_hPropState`
+ * is keyed by a component's index within one variant, so it must not (#473).
+ */
+describe('keys the sync is told to omit', () => {
+  it('does not carry an auto-props edit to the other side', async () => {
+    const { bundled, external, sync } = setup({ _hPropState: {}, label: 'a' }, autoPropsStateKeys)
+    await settle()
+
+    external._hPropState = { 0: { name: 'Bender' } }
+    await settle()
+
+    expect(bundled._hPropState).toEqual({})
+
+    sync.stop()
+  })
+
+  it('goes on carrying everything else', async () => {
+    const { bundled, external, sync } = setup({ _hPropState: {}, label: 'a' }, autoPropsStateKeys)
+    await settle()
+
+    external.label = 'edited'
+    await settle()
+
+    expect(bundled.label).toBe('edited')
+
+    sync.stop()
+  })
+
+  // The reason the sync exists: a variant with no `initState` picks up the
+  // story's own state, and omitting the bookkeeping must not cost that.
+  it('still carries a key the story owns', async () => {
+    const { bundled, external, sync } = setup({}, autoPropsStateKeys)
+    await settle()
+
+    bundled.fromStory = 'yes'
+    await settle()
+
+    expect(external.fromStory).toBe('yes')
+
+    sync.stop()
+  })
+})

package/src/client/app/auto-props.ts

@@ -45,8 +45,13 @@ function visitVNodes(vnodes: any, externalState: Variant['state'], traversalStat
       const index = traversalState.index++
       const propDefs: PropDefinition[] = []
 
-      for (const key in vnode.type.props) {
-        const prop = vnode.type.props[key]
+      // `for…in` over the array form yields index strings, so every control was
+      // named `0` and the prop's own name never appeared (#498).
+      const declared = vnode.type.props
+      const names = Array.isArray(declared) ? declared : Object.keys(declared ?? {})
+
+      for (const key of names) {
+        const prop = Array.isArray(declared) ? undefined : declared[key]
         let types
         let defaultValue
 
@@ -57,28 +62,26 @@ function visitVNodes(vnodes: any, externalState: Variant['state'], traversalStat
               ? [prop]
               : [prop.type]
 
-          types = rawTypes.map((type) => {
-            switch (type) {
-              case String:
-                return 'string'
-              case Number:
-                return 'number'
-              case Boolean:
-                return 'boolean'
-              case Object:
-                return 'object'
-              case Array:
-                return 'array'
-              default:
-                return 'unknown'
-            }
-          })
+          types = rawTypes.map(declaredType)
 
           defaultValue = typeof prop.default === 'function'
             ? prop.default.toString()
             : prop.default
         }
 
+        // A production build erases the runtime types Vue infers from a
+        // type-only `defineProps`, leaving `props: { label: {} }` (#490), and
+        // the array form declares none to begin with (#498). Defaults survive
+        // erasure and the passed value is still there, and either is enough to
+        // pick a control. A factory default reaches `inferredType` as the
+        // function it is, and is declined there with everything else untyped.
+        if (!types || types.every(type => type === 'unknown')) {
+          const inferred = inferredType(passedValue(vnode, key) ?? prop?.default)
+          if (inferred !== 'unknown') {
+            types = [inferred]
+          }
+        }
+
         propDefs.push({
           name: key,
           types,
@@ -115,6 +118,52 @@ function visitVNodes(vnodes: any, externalState: Variant['state'], traversalStat
   }
 }
 
+function declaredType(type: unknown): string {
+  switch (type) {
+    case String:
+      return 'string'
+    case Number:
+      return 'number'
+    case Boolean:
+      return 'boolean'
+    case Object:
+      return 'object'
+    case Array:
+      return 'array'
+    default:
+      return 'unknown'
+  }
+}
+
+/** What the value itself says, when the declaration no longer says anything. */
+export function inferredType(value: unknown): string {
+  if (Array.isArray(value)) {
+    return 'array'
+  }
+  switch (typeof value) {
+    case 'string':
+      return 'string'
+    case 'number':
+      return 'number'
+    case 'boolean':
+      return 'boolean'
+    case 'object':
+      return value === null ? 'unknown' : 'object'
+    default:
+      return 'unknown'
+  }
+}
+
+// `vnode.type.props` is keyed as declared and `vnode.props` as authored, so a
+// multi-word prop written `my-label` is not found under `myLabel`.
+export function passedValue(vnode: any, key: string): unknown {
+  const props = vnode.props
+  if (!props) {
+    return undefined
+  }
+  return key in props ? props[key] : props[key.replace(/\B([A-Z])/g, '-$1').toLowerCase()]
+}
+
 function normalizeVNodes(vnodes: any) {
   if (!Array.isArray(vnodes)) {
     return vnodes == null ? [] : [vnodes]

package/src/client/app/util.ts

@@ -84,12 +84,26 @@ function _toRawObject(obj: Record<any, any>, target: Record<any, any>, seen = ne
   })
 }
 
+// Kept out of the baseline rather than out of the write, so the far side is
+// never told these changed and an echo cannot carry them back.
+function without(state: Record<string, any>, omit: string[]): Record<string, any> {
+  if (!omit.length) {
+    return state
+  }
+  const kept = { ...state }
+  for (const key of omit) {
+    delete kept[key]
+  }
+  return kept
+}
+
 /**
  * Synchronize states between the bundled and external/user versions of Vue
  * @param bundledState Reactive state created with the bundled Vue
  * @param externalState Reactive state created with the external/user Vue
+ * @param omit Keys neither side may learn from the other
  */
-export function syncStateBundledAndExternal(bundledState, externalState) {
+export function syncStateBundledAndExternal(bundledState, externalState, omit: string[] = []) {
   // Each side is asked only for what *it* changed, and that is all that crosses.
   //
   // Both watchers used to mirror the whole of their side. That works while the
@@ -109,7 +123,7 @@ export function syncStateBundledAndExternal(bundledState, externalState) {
 
   const _stop = _watch(() => bundledState, (value) => {
     if (value == null) return
-    const changes = baseline.take(_toRawDeep(value))
+    const changes = baseline.take(without(_toRawDeep(value), omit))
     if (changes) applyState(externalState, changes)
   }, {
     deep: true,
@@ -118,7 +132,7 @@ export function syncStateBundledAndExternal(bundledState, externalState) {
 
   const stop = watch(() => externalState, (value) => {
     if (value == null) return
-    const changes = baseline.take(toRawDeep(value))
+    const changes = baseline.take(without(toRawDeep(value), omit))
     if (changes) applyState(bundledState, changes)
   }, {
     deep: true,