@poveste/plugin-vue 0.2.1 → 0.3.1

package/dist/bundled/client/server/Story.js

@@ -1,79 +1,75 @@
-import { defineComponent as a, inject as r, provide as i, onMounted as d } from "vue";
-import { autoStubComponents as l } from "./stub.js";
-const f = a({
-  name: "PovesteStory",
-  inheritAttrs: !1,
-  props: {
-    title: {
-      type: String,
-      default: void 0
-    },
-    id: {
-      type: String,
-      default: void 0
-    },
-    group: {
-      type: String,
-      default: void 0
-    },
-    layout: {
-      type: Object,
-      default: void 0
-    },
-    icon: {
-      type: String,
-      default: void 0
-    },
-    iconColor: {
-      type: String,
-      default: void 0
-    },
-    docsOnly: {
-      type: Boolean,
-      default: !1
-    },
-    meta: {
-      type: Object,
-      default: void 0
-    }
-  },
-  setup(t) {
-    const e = r("hstStoryFile"), o = {
-      id: t.id ?? e?.id,
-      title: t.title ?? e?.fileName,
-      group: t.group,
-      layout: t.layout,
-      icon: t.icon,
-      iconColor: t.iconColor,
-      docsOnly: t.docsOnly,
-      meta: t.meta,
-      variants: []
-    };
-    return r("addStory", null)?.(o), i("story", o), i("addVariant", (n) => {
-      o.variants.push(n);
-    }), d(() => {
-      o.variants.length || o.variants.push({
-        id: "_default",
-        title: "default"
-      });
-    }), {
-      story: o
-    };
-  },
-  render() {
-    let t = !1;
-    try {
-      const e = this.$slots.default?.({
-        get state() {
-          return t = !0, {};
-        }
-      });
-      return Array.isArray(e) && l(e), e;
-    } catch (e) {
-      return t || console.error(e), null;
-    }
-  }
+import { autoStubComponents as e } from "./stub.js";
+import { defineComponent as t, inject as n, onMounted as r, provide as i } from "vue";
+//#region src/client/server/Story.ts
+var a = t({
+	name: "PovesteStory",
+	inheritAttrs: !1,
+	props: {
+		title: {
+			type: String,
+			default: void 0
+		},
+		id: {
+			type: String,
+			default: void 0
+		},
+		group: {
+			type: String,
+			default: void 0
+		},
+		layout: {
+			type: Object,
+			default: void 0
+		},
+		icon: {
+			type: String,
+			default: void 0
+		},
+		iconColor: {
+			type: String,
+			default: void 0
+		},
+		docsOnly: {
+			type: Boolean,
+			default: !1
+		},
+		meta: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(e) {
+		let t = n("hstStoryFile"), a = {
+			id: e.id ?? t?.id,
+			title: e.title ?? t?.fileName,
+			group: e.group,
+			layout: e.layout,
+			icon: e.icon,
+			iconColor: e.iconColor,
+			docsOnly: e.docsOnly,
+			meta: e.meta,
+			variants: []
+		};
+		return n("addStory", null)?.(a), i("story", a), i("addVariant", (e) => {
+			a.variants.push(e);
+		}), r(() => {
+			a.variants.length || a.variants.push({
+				id: "_default",
+				title: "default"
+			});
+		}), { story: a };
+	},
+	render() {
+		let t = !1;
+		try {
+			let n = this.$slots.default?.({ get state() {
+				return t = !0, {};
+			} });
+			return Array.isArray(n) && e(n), n;
+		} catch (e) {
+			return t || console.error(e), null;
+		}
+	}
 });
-export {
-  f as default
-};
+//#endregion
+export { a as default };

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

@@ -1,46 +1,46 @@
-import { defineComponent as o, inject as n } from "vue";
-const l = o({
-  name: "PovesteVariant",
-  props: {
-    title: {
-      type: String,
-      default: "untitled"
-    },
-    id: {
-      type: String,
-      default: void 0
-    },
-    icon: {
-      type: String,
-      default: void 0
-    },
-    iconColor: {
-      type: String,
-      default: void 0
-    },
-    meta: {
-      type: Object,
-      default: void 0
-    }
-  },
-  setup(t) {
-    const e = n("story");
-    function i() {
-      return `${e.id}-${e.variants.length}`;
-    }
-    const a = {
-      id: t.id ?? i(),
-      title: t.title,
-      icon: t.icon,
-      iconColor: t.iconColor,
-      meta: t.meta
-    };
-    n("addVariant")(a);
-  },
-  render() {
-    return null;
-  }
+import { defineComponent as e, inject as t } from "vue";
+//#region src/client/server/Variant.ts
+var n = e({
+	name: "PovesteVariant",
+	props: {
+		title: {
+			type: String,
+			default: "untitled"
+		},
+		id: {
+			type: String,
+			default: void 0
+		},
+		icon: {
+			type: String,
+			default: void 0
+		},
+		iconColor: {
+			type: String,
+			default: void 0
+		},
+		meta: {
+			type: Object,
+			default: void 0
+		}
+	},
+	setup(e) {
+		let n = t("story");
+		function r() {
+			return `${n.id}-${n.variants.length}`;
+		}
+		let i = {
+			id: e.id ?? r(),
+			title: e.title,
+			icon: e.icon,
+			iconColor: e.iconColor,
+			meta: e.meta
+		};
+		t("addVariant")(i);
+	},
+	render() {
+		return null;
+	}
 });
-export {
-  l as default
-};
+//#endregion
+export { n as default };

package/dist/bundled/client/server/run.js

@@ -1,44 +1,43 @@
+import e from "./Story.js";
+import t from "./Variant.js";
+import { createApp as n, h as r } from "vue";
 import { getSetupHook as i } from "@poveste/shared";
-import * as d from "virtual:$poveste-generated-global-setup";
-import * as f from "virtual:$poveste-setup";
-import { createApp as l, h as S } from "vue";
-import y from "./Story.js";
-import h from "./Variant.js";
-async function w({ file: n, storyData: r, el: m }) {
-  const { default: e } = await import(/* @vite-ignore */
-    /* @vite-ignore */
-    n.moduleId
-  ), t = l({
-    provide: {
-      addStory(o) {
-        r.push(o);
-      },
-      hstStoryFile: n
-    },
-    render() {
-      return S(e);
-    }
-  });
-  t.component("Story", y), t.component("Variant", h);
-  const p = {
-    app: t,
-    story: null,
-    variant: null,
-    addWrapper: () => {
-    }
-  }, a = i(d, "setupVue3");
-  a && await a(p);
-  const u = i(f, "setupVue3");
-  if (u && await u(p), t.mount(m), e.doc) {
-    const o = document.createElement("div");
-    o.innerHTML = e.doc;
-    const s = o.textContent;
-    r.forEach((c) => {
-      c.docsText = s;
-    });
-  }
-  t.unmount();
+import * as a from "virtual:$poveste-generated-global-setup";
+import * as o from "virtual:$poveste-setup";
+//#region src/client/server/run.ts
+async function s({ file: s, storyData: c, el: l }) {
+	let { default: u } = await import(/* @vite-ignore */
+		/* @vite-ignore */
+		s.moduleId
+	), d = n({
+		provide: {
+			addStory(e) {
+				c.push(e);
+			},
+			hstStoryFile: s
+		},
+		render() {
+			return r(u);
+		}
+	});
+	d.component("Story", e), d.component("Variant", t);
+	let f = {
+		app: d,
+		story: null,
+		variant: null,
+		addWrapper: () => {}
+	}, p = i(a, "setupVue3");
+	p && await p(f);
+	let m = i(o, "setupVue3");
+	if (m && await m(f), d.mount(l), u.doc) {
+		let e = document.createElement("div");
+		e.innerHTML = u.doc;
+		let t = e.textContent;
+		c.forEach((e) => {
+			e.docsText = t;
+		});
+	}
+	d.unmount();
 }
-export {
-  w as run
-};
+//#endregion
+export { s as run };

package/dist/bundled/client/server/stub.js

@@ -1,8 +1,10 @@
-const n = { name: "StubbedComponent", render: () => null };
-function o(t) {
-  for (const e of t)
-    typeof e.type == "object" && e.type.name !== "PovesteVariant" && (e.type = n), Array.isArray(e.children) && o(e.children);
-}
-export {
-  o as autoStubComponents
+//#region src/client/server/stub.ts
+var e = {
+	name: "StubbedComponent",
+	render: () => null
 };
+function t(n) {
+	for (let r of n) typeof r.type == "object" && r.type.name !== "PovesteVariant" && (r.type = e), Array.isArray(r.children) && t(r.children);
+}
+//#endregion
+export { t as autoStubComponents };

package/dist/bundled/client/server.js

@@ -1,4 +1,2 @@
 import { run as e } from "./server/run.js";
-export {
-  e as run
-};
+export { e as run };

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

@@ -27,7 +27,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
 }>> & Readonly<{}>, {
-    meta: import("@poveste/shared").StoryMeta;
+    meta: import("poveste").StoryMeta;
     initState: () => any | Promise<any>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,5 +1,5 @@
 import type { Story, Variant } from '@poveste/shared';
-import { type PreviewRenderContext } from './render-context.js';
+import type { PreviewRenderContext } from './render-context.js';
 interface PreviewHostOptions {
     name: string;
     el: HTMLElement;

package/dist/client/server/Story.d.ts

@@ -69,11 +69,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: any;
     };
 }>> & Readonly<{}>, {
-    meta: import("@poveste/shared").StoryMeta;
+    meta: import("poveste").StoryMeta;
     title: string;
     id: string;
     group: string;
-    layout: import("@poveste/shared").StoryLayout;
+    layout: import("poveste").StoryLayout;
     icon: string;
     iconColor: string;
     docsOnly: boolean;

package/dist/client/server/Variant.d.ts

@@ -1,5 +1,5 @@
 import type { ServerVariant } from '@poveste/shared';
-import { type PropType } from 'vue';
+import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Poveste plugin for Vue.js support",
   "author": {
     "name": "Sorin Gitlan"
@@ -44,28 +44,31 @@
   "types": "dist/index.node.d.ts",
   "peerDependencies": {
     "vue": "^3.5.26",
-    "poveste": "^0.2.1"
+    "poveste": "^0.3.1"
   },
   "dependencies": {
     "change-case": "^5.4.4",
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.2.1",
-    "@poveste/vendors": "^0.2.1",
-    "@poveste/shared": "^0.2.1"
+    "@poveste/controls": "^0.3.1",
+    "@poveste/shared": "^0.3.1",
+    "@poveste/vendors": "^0.3.1"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
     "concurrently": "^9.1.0",
     "typescript": "5.6.3",
-    "vite": "^7.3.0",
+    "vite": "^8.2.0",
+    "vitest": "^4.1.10",
     "vue": "^3.5.26",
-    "poveste": "0.2.1"
+    "poveste": "0.3.1"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",
     "build:types": "tsc --declaration --emitDeclarationOnly",
-    "watch": "concurrently \"vite build --watch\" \"tsc -d -P tsconfig.build.json --watch\" \"pnpm run build:types --watch\""
+    "watch": "concurrently \"vite build --watch\" \"tsc -d -P tsconfig.build.json --watch\" \"pnpm run build:types --watch\"",
+    "test": "vitest run",
+    "test:dev": "vitest"
   }
 }

package/src/client/app/Variant.ts

@@ -61,6 +61,20 @@ export default defineComponent({
     let lastPropsTypesSnapshot: string
     let renderVariant: Variant
     let renderStateSync: ReturnType<typeof syncStateBundledAndExternal>
+    let mountStateSync: ReturnType<typeof syncStateBundledAndExternal>
+
+    // Registered before the first `await` below, and deliberately so. This is
+    // an async setup(), and Vue drops any lifecycle hook registered after an
+    // await has actually suspended — it warns, then the hook is bound to no
+    // instance and never runs. That is how both state syncs below used to
+    // survive unmount: a story with `initState` suspends here, so the teardown
+    // that used to sit at the bottom of setup() was silently discarded, and
+    // every leaked pair kept deep-watching the variant state it was created
+    // for. See #77.
+    onBeforeUnmount(() => {
+      renderStateSync?.stop()
+      mountStateSync?.stop()
+    })
 
     const mountVariant = computed(() => attrs.variant)
 
@@ -70,7 +84,7 @@ export default defineComponent({
     }
 
     if (renderContext?.mode !== 'render' && mountVariant.value && implicitState) {
-      syncStateBundledAndExternal(mountVariant.value.state, implicitState())
+      mountStateSync = syncStateBundledAndExternal(mountVariant.value.state, implicitState())
     }
 
     function updateVariant(variant: Variant) {
@@ -160,10 +174,6 @@ export default defineComponent({
       updateVariant(mountVariant.value)
     }
 
-    onBeforeUnmount(() => {
-      renderStateSync?.stop()
-    })
-
     return {
       renderContext,
       renderVariantSlot,

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

@@ -0,0 +1,154 @@
+import { nextTick as bundledNextTick, reactive as bundledReactive } from '@poveste/vendors/vue'
+import { describe, expect, it } from 'vitest'
+import { nextTick, reactive } from 'vue'
+import { syncStateBundledAndExternal } from '../util.js'
+
+// These run against both Vue copies for real: `@poveste/vendors/vue` is the one
+// poveste bundles, `vue` is the one a user's story would run on. That is the
+// whole point — the sync exists because the two have separate reactivity graphs
+// and separate schedulers, and nothing about it can be tested with one of them.
+
+// Each side flushes on its own scheduler and a write can bounce between them a
+// few times before settling, so drain both alternately rather than once.
+async function settle() {
+  for (let i = 0; i < 6; i++) {
+    await nextTick()
+    await bundledNextTick()
+  }
+}
+
+function setup(initial: Record<string, any>) {
+  const bundled = bundledReactive(structuredClone(initial))
+  const external = reactive(structuredClone(initial))
+  const sync = syncStateBundledAndExternal(bundled, external)
+  return { bundled, external, sync }
+}
+
+describe('syncStateBundledAndExternal', () => {
+  it('mirrors an edit in each direction', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    external.count = 1
+    await settle()
+    expect(bundled.count).toBe(1)
+
+    bundled.count = 2
+    await settle()
+    expect(external.count).toBe(2)
+
+    sync.stop()
+  })
+
+  it('stops mirroring once stopped', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+    sync.stop()
+
+    external.count = 1
+    await settle()
+    expect(bundled.count).toBe(0)
+  })
+
+  // The #95 regression. `applyState` iterates the incoming keys, so it has no
+  // way to express "this key is gone" — the write it performs for a removal
+  // changes nothing on the far side, and the far side's watcher never fires.
+  //
+  // That matters because the two watchers coordinate through a `syncing` boolean
+  // meaning "ignore the next firing, it is my own echo", and the counterpart
+  // firing is what clears it. No counterpart, no clear: the flag stayed set, and
+  // the next edit was mistaken for an echo and dropped on the floor.
+  //
+  // Worth being exact about how bad this was in the shipped app, because it is
+  // the reason the issue had no repro: it never bit here. Vue stories always
+  // carry `_hPropState` and `_hPropDefs`, and `applyState` sent every
+  // `_h`-prefixed key down the plain-assignment branch, so those two were
+  // re-identified on every apply and a counterpart firing was guaranteed. The
+  // invariant held by luck. These tests use a state without that bookkeeping,
+  // which is what the function actually promises to handle — and which is the
+  // shape the sandbox bridge and `plugin-svelte` were relying on luck for too.
+  it('does not drop the edit after a removal it cannot mirror', async () => {
+    const { bundled, external, sync } = setup({ count: 0, gone: 1 })
+    await settle()
+
+    delete external.gone
+    await settle()
+
+    external.count = 1
+    await settle()
+    expect(bundled.count).toBe(1)
+
+    sync.stop()
+  })
+
+  it('does not drop the edit after a nested removal it cannot mirror', async () => {
+    // The same shape one level down, and the more plausible one: a story that
+    // drops an entry out of a map in state, then touches a control.
+    const { bundled, external, sync } = setup({ count: 0, items: { a: 1, b: 2 } })
+    await settle()
+
+    delete external.items.b
+    await settle()
+
+    external.count = 1
+    await settle()
+    expect(bundled.count).toBe(1)
+
+    sync.stop()
+  })
+
+  it('does not drop the edit after a change that nets out to nothing', async () => {
+    const { bundled, external, sync } = setup({ count: 0, list: [1, 2] })
+    await settle()
+
+    external.list.push(9)
+    external.list.pop()
+    await settle()
+
+    external.count = 1
+    await settle()
+    expect(bundled.count).toBe(1)
+
+    sync.stop()
+  })
+
+  it('leaves object identity alone on both sides when a sync changes nothing', async () => {
+    // The other half of the fix, and the reason the flag can now be trusted.
+    // `toRawDeep` rebuilds every object it passes, so mirroring `count` used to
+    // drop a fresh `nested` and `list` onto the receiving side as well, and each
+    // of those re-triggered its watchers. Every sync was a burst of firings that
+    // happened to keep the count even; none of them meant anything.
+    const { bundled, external, sync } = setup({ count: 0, nested: { a: 1 }, list: [1, 2] })
+    await settle()
+
+    const externalNested = external.nested
+    const externalList = external.list
+    const bundledNested = bundled.nested
+    const bundledList = bundled.list
+
+    external.count = 1
+    await settle()
+
+    expect(bundled.count).toBe(1)
+    expect(external.nested).toBe(externalNested)
+    expect(external.list).toBe(externalList)
+    // The receiving side is the one that used to get churned.
+    expect(bundled.nested).toBe(bundledNested)
+    expect(bundled.list).toBe(bundledList)
+
+    sync.stop()
+  })
+
+  it('mirrors many edits in a row without falling behind', async () => {
+    const { bundled, external, sync } = setup({ count: 0 })
+    await settle()
+
+    for (let i = 1; i <= 10; i++) {
+      external.count = i
+      await settle()
+      expect(bundled.count).toBe(i)
+    }
+
+    sync.stop()
+  })
+})

package/src/client/app/host.ts

@@ -1,6 +1,7 @@
 import type { Story, Variant } from '@poveste/shared'
 import type { App, Component, PropType, VNode } from 'vue'
 import type { Vue3StorySetupApi, Vue3StorySetupHandler } from '../../helpers.js'
+import type { PreviewRenderContext } from './render-context.js'
 import { getSetupHook } from '@poveste/shared'
 // @ts-expect-error virtual module id
 import * as generatedSetup from 'virtual:$poveste-generated-global-setup'
@@ -13,7 +14,7 @@ import {
   Suspense,
 } from 'vue'
 import { registerGlobalComponents } from './global-components.js'
-import { type PreviewRenderContext, provideRenderContext } from './render-context.js'
+import { provideRenderContext } from './render-context.js'
 import { RouterLinkStub } from './RouterLinkStub'
 
 interface PreviewHostOptions {