@poveste/plugin-vue 0.14.0 → 0.16.0

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

@@ -1,17 +1,52 @@
+import type { ComponentInternalInstance } from 'vue';
+/**
+ * A value Vue has marked raw is carried by reference rather than rebuilt.
+ *
+ * Both sides of this bridge live in one realm, so the reference is the useful
+ * thing to hand over: the baseline then holds the same identity the next pass
+ * reads, `isEquivalent` settles it by `Object.is`, and nothing walks whatever
+ * is behind it. Rebuilding it was ten of the twenty traversals a keystroke
+ * cost (#957).
+ *
+ * The bridge that leaves this realm cannot do the same — see `toRawDeep` in
+ * `poveste-app`, where the mark does not survive the crossing and the key is
+ * dropped instead.
+ */
 /**
  * Using external/user Vue
  */
-export declare function toRawDeep(val: any, seen?: WeakMap<WeakKey, any>): any;
+export declare function toRawDeep(val: unknown, seen?: WeakMap<WeakKey, any>): any;
 /**
  * Using bundled Vue
  */
-export declare function _toRawDeep(val: any, seen?: WeakMap<WeakKey, any>): any;
+export declare function _toRawDeep(val: unknown, 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, omit?: string[]): {
+export declare function syncStateBundledAndExternal(bundledState: Record<string, any>, externalState: Record<string, any>, omit?: string[]): {
     stop(): void;
 };
+/** The component being set up. Throws outside `setup`, where Vue returns null. */
+/**
+ * Whether a `<script setup>` binding can be story state a control drives.
+ *
+ * A readonly ref cannot: the write-back is refused, so the two sides of the
+ * bridge never agree on it and the sync re-walks forever (#959). `useTemplateRef`
+ * returns one — in dev builds only, which is why a built book is quiet and the
+ * mode story authors work in is not.
+ *
+ * It has to be asked of the ref rather than of what the ref holds. The guard
+ * beside this one tests the value, and a value test cannot classify a template
+ * ref at all: at setup time it holds `null`, and what it will hold later is not
+ * knowable from here. Readonly-ness is a property of the ref itself and is
+ * settled by the time the binding is registered.
+ *
+ * A `computed` is caught by the same rule and for the same reason — it is a
+ * derived value, and a control that cannot write is not a control. Before this
+ * it appeared in the panel and warned when written.
+ */
+export declare function isWritableBinding(value: unknown): boolean;
+export declare function useInstance(name: string): ComponentInternalInstance;

package/dist/client/codegen.d.ts

@@ -1,4 +1,33 @@
 import type { Variant } from '@poveste/shared';
 import type { VNode } from 'vue';
 export declare function generateSourceCode(variant: Variant): Promise<string>;
+/**
+ * How to delimit an attribute whose value is arbitrary code.
+ *
+ * The source pane shows template source a reader copies, so the code has to
+ * survive as written. The pass this replaces escaped `'` for a JavaScript
+ * string and rewrote `"` into `'`, and the consumer is neither — it is an
+ * attribute delimited by `"`. Both halves reached the reader: a handler written
+ * `() => alert("hi")` was shown as `() => alert('hi')`, and one written
+ * `() => alert('hi')` came out with visible backslashes, which reads as a bug
+ * in the reader's own code rather than as our rendering.
+ *
+ * The order made it worse. Every `'` the rewrite introduced arrived after the
+ * escaping pass, so an authored quote was escaped and a manufactured one was
+ * not. A backslash was never escaped at all, which is what CodeQL flagged as
+ * `js/incomplete-sanitization`: `() => alert('it\'s')` went in carrying one
+ * and came out carrying four.
+ *
+ * So nothing is escaped for a string context. Code containing `"` takes the
+ * other delimiter, the way someone writing the template by hand would. Code
+ * carrying both quote characters has no free delimiter, so whichever it takes
+ * is escaped inside it — and the one appearing less often wins, because every
+ * escape is a character the author did not write. That is `&#39;` as often as
+ * `&quot;`: the repository's own `get-name` fixture holds two doubles and one
+ * single, so the single is the cheaper one there (#602).
+ */
+export declare function delimitAttr(lines: string[]): {
+    quote: string;
+    lines: string[];
+};
 export declare function getTagName(vnode: VNode): any;

package/dist/client/context.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A context keyed by a symbol, with its provide and its inject in one place.
+ *
+ * Six of these used to be string keys carrying `any`, and two of the six were
+ * the same string meaning two different things in two realms (#981). A symbol
+ * cannot collide and the type travels with it.
+ *
+ * `inject` and `injectOptional` are separate functions rather than one call with a
+ * default, because "nobody provided this" and "this is allowed to be absent"
+ * are different questions that used to arrive as the same `undefined` — and the
+ * first one is what an author hits when they nest a component wrongly.
+ *
+ * Reka's `createContext` is this shape and is already a dependency of the
+ * controls package. It is not one of this package's, and this is fifteen lines,
+ * so it is written here rather than taking a dependency for it.
+ */
+export interface Context<T> {
+    provide: (value: T) => void;
+    /** Throws, naming the provider, when nothing provided it. */
+    inject: (consumer: string) => T;
+    /** `null` when nothing provided it, which the caller is expected to handle. */
+    injectOptional: () => T | null;
+}
+/**
+ * `description` is what a symbol shows in a stack; `provider` is the component
+ * a reader has to go and add, and is the only part of the error they can act on.
+ *
+ * The key comes from the global registry rather than being minted here, because
+ * this module is evaluated more than once. A collection worker's module graph is
+ * invalidated while a story is mid-run, so `provide` and `inject` can each hold
+ * their own instance of this file — a plain `Symbol()` then differs between them
+ * and the injection misses, which reads as a `<Variant>` outside its `<Story>`.
+ * Every description here is already unique, so the registry cannot re-collide
+ * the way the string keys in #981 did.
+ *
+ * Absence is read as `null` rather than `undefined` so that a provider passing
+ * `undefined` on purpose is still a provider. None does today, and this is the
+ * cheaper of the two mistakes to have made.
+ */
+export declare function createContext<T>(description: string, provider: string): Context<T>;

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

@@ -3,27 +3,27 @@ import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     group: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     layout: {
         type: PropType<ServerStory["layout"]>;
-        default: any;
+        default: undefined;
     };
     icon: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     iconColor: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     docsOnly: {
         type: BooleanConstructor;
@@ -31,34 +31,34 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     meta: {
         type: PropType<ServerStory["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>, {
     story: ServerStory;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     id: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     group: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     layout: {
         type: PropType<ServerStory["layout"]>;
-        default: any;
+        default: undefined;
     };
     icon: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     iconColor: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     docsOnly: {
         type: BooleanConstructor;
@@ -66,14 +66,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     meta: {
         type: PropType<ServerStory["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
-    meta: import("poveste").StoryMeta;
-    title: string;
+    meta: import("poveste").StoryMeta | undefined;
     id: string;
+    title: string;
     group: string;
-    layout: import("poveste").StoryLayout;
+    layout: import("poveste").StoryLayout | undefined;
     icon: string;
     iconColor: string;
     docsOnly: boolean;

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

@@ -7,19 +7,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     id: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     icon: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     iconColor: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<ServerVariant["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
@@ -28,24 +28,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
     id: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     icon: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     iconColor: {
         type: StringConstructor;
-        default: any;
+        default: undefined;
     };
     meta: {
         type: PropType<ServerVariant["meta"]>;
-        default: any;
+        default: undefined;
     };
 }>> & Readonly<{}>, {
-    meta: any;
-    title: string;
+    meta: import("poveste").VariantMeta | undefined;
     id: string;
+    title: string;
     icon: string;
     iconColor: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -0,0 +1,7 @@
+import type { ServerStory, ServerStoryFile, ServerVariant } from '@poveste/shared';
+/** The file being collected, provided by `run.ts` rather than by a component. */
+export declare const storyFileContext: import("../context.js").Context<ServerStoryFile>;
+/** Optional: a `<Story>` collected outside a run has nowhere to report to. */
+export declare const addStoryContext: import("../context.js").Context<(story: ServerStory) => void>;
+export declare const serverStoryContext: import("../context.js").Context<ServerStory>;
+export declare const addVariantContext: import("../context.js").Context<(variant: ServerVariant) => void>;

package/dist/commands/generate-story.client.js

@@ -14,13 +14,13 @@ export default {
             label: 'File name',
             type: 'text',
             required: true,
-            defaultValue: answers => answers.component?.replace(/[^/]+\/([^/]+)\.vue$/, '$1.story.vue'),
+            defaultValue: answers => answers['component']?.replace(/[^/]+\/([^/]+)\.vue$/, '$1.story.vue'),
         },
     ],
     clientAction: (params) => {
-        const index = params.component.lastIndexOf('/');
-        const dirname = params.component.substring(0, index + 1);
-        const file = `${dirname}${params.fileName}`;
+        const index = params['component'].lastIndexOf('/');
+        const dirname = params['component'].substring(0, index + 1);
+        const file = `${dirname}${params['fileName']}`;
         const storyId = kebabCase(file.toLowerCase());
         openStory(storyId);
     },

package/dist/commands/generate-story.server.js

@@ -7,11 +7,11 @@ export default {
     icon: 'https://vuejs.org/logo.svg',
     searchText: 'generate create',
     async serverAction(params) {
-        const targetFile = path.join(path.dirname(params.component), params.fileName);
+        const targetFile = path.join(path.dirname(params['component']), params['fileName']);
         if (fs.existsSync(targetFile)) {
             throw new Error(`File ${targetFile} already exists`);
         }
-        const { component, componentName, isTs } = await getComponentInfo(params.component);
+        const { component, componentName, isTs } = await getComponentInfo(params['component']);
         const content = `<script setup${isTs ? ' lang="ts"' : ''}>
 import ${componentName} from './${component}'
 </script>

package/dist/helpers.d.ts

@@ -2,8 +2,8 @@ import type { Story, Variant } from '@poveste/shared';
 import type { App, Component } from 'vue';
 export interface Vue3StorySetupApi {
     app: App;
-    story?: Story;
-    variant?: Variant;
+    story?: Story | undefined;
+    variant?: Variant | undefined;
     addWrapper: (wrapper: Component) => void;
 }
 export type Vue3StorySetupHandler = (api: Vue3StorySetupApi) => Promise<void> | void;

package/dist/index.node.js

@@ -27,6 +27,7 @@ export function HstVue() {
                                 if (this.meta.poveste?.isCollecting && id.endsWith('.vue')) {
                                     return `const _stubComponent = (name) => ['Story','Variant'].some(validName => name.toLowerCase() === validName.toLowerCase()) ? _resolveComponent(name) : ({ render: () => null });${code?.replaceAll('_resolveComponent(', '_stubComponent(') ?? ''}`;
                                 }
+                                return undefined;
                             },
                         },
                     ],
@@ -49,6 +50,7 @@ export function HstVue() {
                     return listComponentFiles(api.payload.search, api.getConfig().storyMatch);
                 }
             }
+            return undefined;
         },
     };
 }

package/dist/util/list-components.d.ts

@@ -1 +1 @@
-export declare function listComponentFiles(search?: string, ignore?: string[], limit?: number): Promise<string[]>;
+export declare function listComponentFiles(search?: string, ignoredPatterns?: string[], limit?: number, cwd?: string): Promise<string[]>;

package/dist/util/list-components.js

@@ -1,12 +1,69 @@
-import { globby } from 'globby';
-export async function listComponentFiles(search = '', ignore = [], limit = 10) {
-    let files = await globby('**/*.vue', {
-        gitignore: true,
+import { existsSync, readFileSync } from 'node:fs';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import ignore from 'ignore';
+import { glob } from 'tinyglobby';
+function toPosix(path) {
+    return path.split(sep).join('/');
+}
+/**
+ * Whether a file under `cwd` is git-ignored, the way globby's `gitignore: true`
+ * decided it: every `.gitignore` from the repository root down, each pattern
+ * relative to its own file. tinyglobby reads none of them (#839).
+ */
+async function gitIgnoredFilter(cwd) {
+    let root = cwd;
+    while (!existsSync(join(root, '.git'))) {
+        const parent = dirname(root);
+        if (parent === root) {
+            root = cwd;
+            break;
+        }
+        root = parent;
+    }
+    const ancestors = [];
+    for (let dir = cwd; dir !== root;) {
+        dir = dirname(dir);
+        ancestors.unshift(join(dir, '.gitignore'));
+    }
+    // Shallow files first, so a nested `.gitignore` can override its parent.
+    const nested = (await glob('**/.gitignore', { cwd, absolute: true, dot: true, ignore: ['**/node_modules/**', '**/.git/**'] }))
+        .sort((a, b) => a.split('/').length - b.split('/').length || a.localeCompare(b));
+    const rules = ignore();
+    for (const file of [...ancestors, ...nested]) {
+        if (!existsSync(file)) {
+            continue;
+        }
+        const base = toPosix(relative(root, dirname(file)));
+        for (const raw of readFileSync(file, 'utf8').split(/\r?\n/)) {
+            const line = raw.trimEnd();
+            if (!line || line.startsWith('#')) {
+                continue;
+            }
+            const negated = line.startsWith('!');
+            let pattern = negated ? line.slice(1) : line;
+            if (base) {
+                // A pattern with a slash before its end is anchored to its own directory;
+                // one without matches at any depth below it.
+                const anchored = pattern.replace(/\/$/, '').includes('/');
+                pattern = anchored ? `${base}/${pattern.replace(/^\//, '')}` : `${base}/**/${pattern}`;
+            }
+            rules.add(negated ? `!${pattern}` : pattern);
+        }
+    }
+    return (file) => {
+        const path = toPosix(relative(root, resolve(cwd, file)));
+        return !path.startsWith('..') && rules.ignores(path);
+    };
+}
+export async function listComponentFiles(search = '', ignoredPatterns = [], limit = 10, cwd = process.cwd()) {
+    const isIgnored = await gitIgnoredFilter(cwd);
+    let files = (await glob('**/*.vue', {
+        cwd,
         ignore: [
             'node_modules',
-            ...ignore,
+            ...ignoredPatterns,
         ],
-    });
+    })).filter(file => !isIgnored(file));
     if (search) {
         const searchText = search.toLowerCase();
         files = files.filter(file => file.toLowerCase().includes(searchText));

package/dist/util/list-components.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/util/list-components.spec.js

@@ -0,0 +1,46 @@
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join } from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { listComponentFiles } from './list-components.js';
+const roots = [];
+function tree(files) {
+    const root = mkdtempSync(join(tmpdir(), 'list-components-'));
+    roots.push(root);
+    for (const [path, content] of Object.entries(files)) {
+        mkdirSync(dirname(join(root, path)), { recursive: true });
+        writeFileSync(join(root, path), content);
+    }
+    return root;
+}
+afterEach(() => {
+    for (const root of roots.splice(0)) {
+        rmSync(root, { recursive: true, force: true });
+    }
+});
+// Listing honoured .gitignore through globby's `gitignore: true`, and tinyglobby
+// has no such option, so the filtering is ours now (#839).
+describe('listComponentFiles', () => {
+    it('leaves out components git ignores, from the root .gitignore and a nested one', async () => {
+        const root = tree({
+            '.git/HEAD': 'ref: refs/heads/main\n',
+            '.gitignore': 'generated/\n',
+            'app/.gitignore': 'scratch/*\n!scratch/Kept.vue\n',
+            'app/src/Button.vue': '',
+            'app/src/generated/Output.vue': '',
+            'app/scratch/Draft.vue': '',
+            'app/scratch/Kept.vue': '',
+        });
+        const files = await listComponentFiles('', [], 10, join(root, 'app'));
+        expect(files.sort()).toEqual(['scratch/Kept.vue', 'src/Button.vue']);
+    });
+    it('still skips node_modules and the patterns it is given', async () => {
+        const root = tree({
+            '.git/HEAD': 'ref: refs/heads/main\n',
+            'src/Button.vue': '',
+            'src/Button.story.vue': '',
+            'node_modules/pkg/Dep.vue': '',
+        });
+        expect(await listComponentFiles('', ['**/*.story.vue'], 10, root)).toEqual(['src/Button.vue']);
+    });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/plugin-vue",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "description": "Poveste plugin for Vue.js support",
   "author": {
     "name": "Sorin Gitlan",
@@ -67,29 +67,30 @@
     "src"
   ],
   "engines": {
-    "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
+    "node": ">=22.22.2"
   },
   "peerDependencies": {
-    "poveste": "^0.14.0",
-    "vue": "^3.5.26"
+    "poveste": "^0.16.0",
+    "vue": "^3.5.43"
   },
   "dependencies": {
-    "@poveste/controls": "^0.14.0",
-    "@poveste/shared": "^0.14.0",
-    "@poveste/vendors": "^0.14.0",
+    "@poveste/controls": "^0.16.0",
+    "@poveste/shared": "^0.16.0",
+    "@poveste/vendors": "^0.16.0",
     "change-case": "^5.4.4",
-    "globby": "^14.0.2",
+    "ignore": "^7.0.10",
     "launch-editor": "^2.9.1",
-    "pathe": "^1.1.2"
+    "pathe": "^2.0.3",
+    "tinyglobby": "^0.2.17"
   },
   "devDependencies": {
-    "@types/node": "^22.10.1",
-    "concurrently": "^9.1.0",
-    "poveste": "0.14.0",
-    "typescript": "5.6.3",
-    "vite": "^8.2.0",
-    "vitest": "^5.0.0",
-    "vue": "^3.5.26"
+    "@types/node": "^26.6.3",
+    "concurrently": "^10.0.5",
+    "poveste": "0.16.0",
+    "typescript": "6.0.3",
+    "vite": "^8.3.1",
+    "vitest": "^5.0.2",
+    "vue": "^3.5.43"
   },
   "scripts": {
     "build": "rimraf dist && vite build && tsc -d -P tsconfig.build.json && pnpm run build:types",