@poveste/plugin-vue 0.6.1 → 0.8.0

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

@@ -3,11 +3,11 @@ import { provideRenderContext as t } from "./render-context.js";
 import { registerGlobalComponents as n } from "./global-components.js";
 import { RouterLinkStub as r } from "./RouterLinkStub.js";
 import { Suspense as i, createApp as a, defineComponent as o, h as s } from "vue";
-import { getSetupHook as c } from "@poveste/shared";
-import * as l from "virtual:$poveste-generated-global-setup";
-import * as u from "virtual:$poveste-setup";
+import { getSetupHook as c, reportStoryError as l } from "@poveste/shared";
+import * as u from "virtual:$poveste-generated-global-setup";
+import * as d from "virtual:$poveste-setup";
 //#region src/client/app/host.ts
-var d = o({
+var f = o({
 	name: "PreviewHostRoot",
 	props: {
 		story: {
@@ -23,14 +23,14 @@ var d = o({
 		return t(e.renderContext), () => s(e.story.file.component, { story: e.story });
 	}
 });
-function f(e) {
+function p(e) {
 	let t = null, o = null;
 	async function c() {
 		let c = [];
 		o = document.createElement("div"), e.el.appendChild(o), t = a({
 			name: e.name,
 			render: () => {
-				let t = s(d, {
+				let t = s(f, {
 					story: e.getStory(),
 					renderContext: e.renderContext
 				});
@@ -43,7 +43,12 @@ function f(e) {
 				}
 				return e.wrapInDiv && (t = s("div", t)), s(i, {}, t);
 			}
-		}), n(t), t.component("RouterLink", r), await p({
+		}), t.config.errorHandler = (t) => {
+			l(t, {
+				storyId: e.getStory()?.id,
+				variantId: e.getVariant()?.id
+			}), console.error(t);
+		}, n(t), t.component("RouterLink", r), await m({
 			app: t,
 			story: e.getStory(),
 			variant: e.getVariant(),
@@ -52,26 +57,26 @@ function f(e) {
 			}
 		}), t.mount(o);
 	}
-	function l() {
+	function u() {
 		t?.unmount(), t = null, o &&= (o.parentNode?.removeChild(o), null);
 	}
-	function u() {
+	function d() {
 		t?._instance?.proxy?.$forceUpdate();
 	}
 	return {
 		mount: c,
-		unmount: l,
-		forceUpdate: u
+		unmount: u,
+		forceUpdate: d
 	};
 }
-async function p(t) {
-	let n = c(l, e);
+async function m(t) {
+	let n = c(u, e);
 	n && await n(t);
-	let r = c(u, e);
+	let r = c(d, e);
 	if (r && await r(t), typeof t.variant?.setupApp == "function") {
 		let e = t.variant.setupApp;
 		await e(t);
 	}
 }
 //#endregion
-export { f as createPreviewHost };
+export { p as createPreviewHost };

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

@@ -1,2 +1,2 @@
-export { default as MountStory } from './MountStory';
-export { default as RenderStory } from './RenderStory';
+export { default as MountStory } from './MountStory.js';
+export { default as RenderStory } from './RenderStory.js';

package/package.json

@@ -1,17 +1,33 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "description": "Poveste plugin for Vue.js support",
   "author": {
     "name": "Sorin Gitlan"
   },
   "license": "MIT",
+  "homepage": "https://poveste.dev",
   "repository": {
     "url": "https://github.com/poveste-dev/poveste.git",
     "type": "git",
     "directory": "packages/poveste-plugin-vue"
   },
+  "bugs": "https://github.com/poveste-dev/poveste/issues",
+  "keywords": [
+    "poveste",
+    "histoire",
+    "storybook",
+    "component-playground",
+    "component-explorer",
+    "stories",
+    "styleguide",
+    "design-system",
+    "vite",
+    "vue",
+    "vue3",
+    "plugin"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -42,18 +58,28 @@
   },
   "main": "dist/index.js",
   "types": "dist/index.node.d.ts",
+  "files": [
+    "client.d.ts",
+    "collect.d.ts",
+    "components.d.ts",
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+  },
   "peerDependencies": {
     "vue": "^3.5.26",
-    "poveste": "^0.6.1"
+    "poveste": "^0.8.0"
   },
   "dependencies": {
     "change-case": "^5.4.4",
     "globby": "^14.0.2",
     "launch-editor": "^2.9.1",
     "pathe": "^1.1.2",
-    "@poveste/controls": "^0.6.1",
-    "@poveste/shared": "^0.6.1",
-    "@poveste/vendors": "^0.6.1"
+    "@poveste/vendors": "^0.8.0",
+    "@poveste/shared": "^0.8.0",
+    "@poveste/controls": "^0.8.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
@@ -62,7 +88,7 @@
     "vite": "^8.2.0",
     "vitest": "^4.1.10",
     "vue": "^3.5.26",
-    "poveste": "0.6.1"
+    "poveste": "0.8.0"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",

package/src/client/app/Story.ts

@@ -3,7 +3,7 @@ import type { PropType, VNode } from 'vue'
 import { omitInheritStoryProps } from '@poveste/shared'
 import { cloneVNode, computed, defineComponent, getCurrentInstance, h, isRef, provide, reactive, useAttrs } from 'vue'
 import { useRenderContext } from './render-context.js'
-import Variant from './Variant'
+import Variant from './Variant.js'
 
 export default defineComponent({
 

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

@@ -1,6 +1,6 @@
 import type { AutoPropComponentDefinition, PropDefinition, Variant } from '@poveste/shared'
 import { applyState } from '@poveste/shared'
-import { getTagName } from '../codegen'
+import { getTagName } from '../codegen.js'
 
 export function syncVariantAutoProps(
   variant: Variant,

package/src/client/app/global-components.ts

@@ -19,8 +19,8 @@ import {
   onUpdated,
   ref,
 } from 'vue'
-import Story from './Story'
-import Variant from './Variant'
+import Story from './Story.js'
+import Variant from './Variant.js'
 
 export function registerGlobalComponents(app: App) {
   app.component('Story', Story)

package/src/client/app/host.ts

@@ -2,7 +2,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'
+import { getSetupHook, reportStoryError } from '@poveste/shared'
 // @ts-expect-error virtual module id
 import * as generatedSetup from 'virtual:$poveste-generated-global-setup'
 // @ts-expect-error virtual module id
@@ -16,7 +16,7 @@ import {
 import { VUE_SETUP_HOOK_NAMES } from '../../setup-hooks.js'
 import { registerGlobalComponents } from './global-components.js'
 import { provideRenderContext } from './render-context.js'
-import { RouterLinkStub } from './RouterLinkStub'
+import { RouterLinkStub } from './RouterLinkStub.js'
 
 interface PreviewHostOptions {
   name: string
@@ -86,6 +86,17 @@ export function createPreviewHost(options: PreviewHostOptions) {
       },
     })
 
+    // Vue catches a throw from setup or render and logs it to `console.error`,
+    // leaving the template on screen — so without this the host cannot tell a
+    // broken story from a working one (#323).
+    app.config.errorHandler = (err) => {
+      reportStoryError(err, {
+        storyId: options.getStory()?.id,
+        variantId: options.getVariant()?.id,
+      })
+      console.error(err)
+    }
+
     registerGlobalComponents(app)
     app.component('RouterLink', RouterLinkStub)
 

package/src/client/app/index.ts

@@ -1,2 +1,2 @@
-export { default as MountStory } from './MountStory'
-export { default as RenderStory } from './RenderStory'
+export { default as MountStory } from './MountStory.js'
+export { default as RenderStory } from './RenderStory.js'

package/src/client/server/Story.ts

@@ -1,7 +1,7 @@
 import type { ServerStory, ServerStoryFile, ServerVariant } from '@poveste/shared'
 import type { PropType } from 'vue'
 import { defineComponent, inject, onMounted, provide } from 'vue'
-import { autoStubComponents } from './stub'
+import { autoStubComponents } from './stub.js'
 
 export default defineComponent({
   name: 'PovesteStory',

package/src/client/server/run.ts

@@ -7,8 +7,8 @@ import * as generatedSetup from 'virtual:$poveste-generated-global-setup'
 import * as setup from 'virtual:$poveste-setup'
 import { createApp, h } from 'vue'
 import { VUE_SETUP_HOOK_NAMES } from '../../setup-hooks.js'
-import Story from './Story'
-import Variant from './Variant'
+import Story from './Story.js'
+import Variant from './Variant.js'
 
 export async function run({ file, storyData, el }: ServerRunPayload) {
   const { default: Comp } = await import(/* @vite-ignore */ file.moduleId)

package/tsconfig.build.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "exclude": [
-    "src/client"
-  ]
-}

package/tsconfig.json

@@ -1,40 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    // Volar
-    "jsx": "preserve",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "rootDir": "src",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "types": [
-      "node"
-    ],
-    "strictBindCallApply": true,
-    "strictFunctionTypes": true,
-    "alwaysStrict": true,
-    // Strict
-    "noImplicitAny": false,
-    "noImplicitThis": true,
-    "outDir": "dist",
-    "removeComments": false,
-    "sourceMap": false,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "preserveWatchOutput": true
-  },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "generated/**/*",
-    "dist/**/*",
-    "src/**/*.spec.ts"
-  ]
-}

package/vite.config.ts

@@ -1,79 +0,0 @@
-import fs from 'node:fs'
-import { globbySync } from 'globby'
-import { defineConfig } from 'vite'
-
-// Externalize every declared dependency/peer so the lib build emits bare
-// specifiers (e.g. `import 'change-case'`) instead of resolved node_modules
-// paths. With preserveModules, an un-externalized npm dep leaks its pnpm-store
-// path (`../node_modules/.pnpm/change-case@x/...`) which only exists in the
-// workspace and breaks every published/fresh install.
-const pkg = JSON.parse(fs.readFileSync(new URL('./package.json', import.meta.url), 'utf-8'))
-
-export default defineConfig({
-  plugins: [
-    {
-      name: 'poveste:preserve:import.dynamic',
-      enforce: 'pre',
-      transform(code) {
-        if (code.includes('import(')) {
-          return {
-            code: code.replace(/import\(/g, 'import__dyn('),
-          }
-        }
-      },
-      closeBundle() {
-        try {
-          const files = globbySync('./dist/**/*.js')
-          for (const file of files) {
-            const content = fs.readFileSync(file, 'utf-8')
-            if (content.includes('import__dyn')) {
-              fs.writeFileSync(file, content.replace(/import__dyn\(/g, 'import(/* @vite-ignore */'), 'utf-8')
-            }
-          }
-        }
-        catch (e) {
-          console.error(e)
-        }
-      },
-    },
-  ],
-
-  build: {
-    emptyOutDir: false,
-    outDir: 'dist/bundled',
-    lib: {
-      entry: '',
-      formats: ['es'],
-    },
-    rollupOptions: {
-      external: [
-        /\$poveste/,
-        /@poveste/,
-        'vue',
-        ...Object.keys(pkg.dependencies ?? {}),
-        ...Object.keys(pkg.peerDependencies ?? {}),
-      ],
-
-      input: [
-        'src/client/client.ts',
-        'src/client/server.ts',
-      ],
-
-      output: {
-        // manualChunks (id) {
-        //   if (id.includes('node_modules')) {
-        //     return 'vendor'
-        //   }
-        // },
-        entryFileNames: '[name].js',
-        chunkFileNames: '[name].js',
-        assetFileNames: '[name][extname]',
-        // hoistTransitiveImports: false,
-        preserveModules: true,
-        preserveModulesRoot: 'src',
-      },
-      treeshake: false,
-      preserveEntrySignatures: 'strict',
-    },
-  },
-})

package/vitest.config.ts

@@ -1,13 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { defineConfig } from 'vitest/config'
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      // Point at the source, not `dist`. The state-sync tests exist to catch a
-      // regression in `applyState`, and resolving the published entry would test
-      // whatever was last built instead of what is in the tree.
-      '@poveste/shared': fileURLToPath(new URL('../poveste-shared/src/index.ts', import.meta.url)),
-    },
-  },
-})