@poveste/plugin-vue 0.14.0 → 0.15.0

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.15.0",
   "description": "Poveste plugin for Vue.js support",
   "author": {
     "name": "Sorin Gitlan",
@@ -70,23 +70,24 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "peerDependencies": {
-    "poveste": "^0.14.0",
+    "poveste": "^0.15.0",
     "vue": "^3.5.26"
   },
   "dependencies": {
-    "@poveste/controls": "^0.14.0",
-    "@poveste/shared": "^0.14.0",
-    "@poveste/vendors": "^0.14.0",
+    "@poveste/controls": "^0.15.0",
+    "@poveste/shared": "^0.15.0",
+    "@poveste/vendors": "^0.15.0",
     "change-case": "^5.4.4",
-    "globby": "^14.0.2",
+    "ignore": "^7.0.6",
     "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",
+    "concurrently": "^10.0.5",
+    "poveste": "0.15.0",
+    "typescript": "6.0.3",
     "vite": "^8.2.0",
     "vitest": "^5.0.0",
     "vue": "^3.5.26"

package/src/client/__tests__/codegen-attrs.spec.ts

@@ -0,0 +1,149 @@
+import type { Variant } from '@poveste/shared'
+import { describe, expect, it } from 'vitest'
+import { h } from 'vue'
+import { delimitAttr, generateSourceCode } from '../codegen.js'
+
+/*
+ * The source pane shows the template that produced the variant, so a handler
+ * has to appear as its author wrote it. The pass this replaces escaped `'` for
+ * a JavaScript string and rewrote `"` into `'` — neither of which is the
+ * attribute the result lands in — and each half reached the reader alone (#602).
+ *
+ * A case carrying both quote characters is the one that matters: each half
+ * fails on its own, so a fixture with only one of them passes a half-fix.
+ */
+describe('delimitAttr', () => {
+  it('leaves code with no quotes in it alone, under the usual delimiter', () => {
+    expect(delimitAttr(['onClick'])).toEqual({ quote: '"', lines: ['onClick'] })
+  })
+
+  // Was shown as `() => alert('hi')` — the reader's double quotes rewritten.
+  it('takes the other delimiter rather than rewriting a double quote', () => {
+    expect(delimitAttr(['() => alert("hi")'])).toEqual({
+      quote: '\'',
+      lines: ['() => alert("hi")'],
+    })
+  })
+
+  // Was shown as `() => alert(\'hi\')`, backslashes and all.
+  it('leaves a single quote unescaped, since the attribute is not a JS string', () => {
+    expect(delimitAttr(['() => alert(\'hi\')'])).toEqual({
+      quote: '"',
+      lines: ['() => alert(\'hi\')'],
+    })
+  })
+
+  // Both characters, so whichever delimiter is chosen has to be escaped inside
+  // it. Two doubles against one single here, so the single is the cheaper one.
+  it('escapes the quote that appears less often when the code carries both', () => {
+    expect(delimitAttr(['() => console.log("it\'s here")'])).toEqual({
+      quote: '\'',
+      lines: ['() => console.log("it's here")'],
+    })
+  })
+
+  // Four singles against two doubles, so the double is the cheaper one here.
+  it('escapes the double quote instead when that is the rarer one', () => {
+    expect(delimitAttr(['() => alert(\'a\', \'b\', "c")'])).toEqual({
+      quote: '"',
+      lines: ['() => alert(\'a\', \'b\', "c")'],
+    })
+  })
+
+  // The alert CodeQL raised: the escaping pass never escaped a backslash, so
+  // `() => alert('it\'s')` went in carrying one and came out carrying four.
+  it('passes a backslash through untouched', () => {
+    const written = '() => alert(\'it\\\'s\')'
+
+    expect(delimitAttr([written]).lines[0]).toBe(written)
+  })
+
+  it('reads the whole value when deciding, not one line of it', () => {
+    expect(delimitAttr(['() => {', '  alert("hi")', '}']).quote).toBe('\'')
+  })
+
+  it('escapes on every line, not only the one that decided it', () => {
+    expect(delimitAttr(['() => {', '  alert("a")', '  alert(\'b\')', '  alert(\'c\')', '}']).lines).toEqual([
+      '() => {',
+      '  alert("a")',
+      '  alert(\'b\')',
+      '  alert(\'c\')',
+      '}',
+    ])
+  })
+})
+
+/*
+ * `delimitAttr` could be right and unused, so these drive the generator itself.
+ *
+ * The handler states its own source rather than being written as one. A `.vue`
+ * ships to the browser untransformed, but this spec does not: esbuild rewrote
+ * `alert('it\'s')` in the fixture to `alert("it's")` before `toString()` ever
+ * saw it, so a handler written here is not the text the generator receives.
+ * Overriding `toString` is what makes the input exact.
+ */
+const WITH_DOUBLE = '() => alert("hi")'
+const WITH_SINGLE = '() => alert(\'hi\')'
+const WITH_BOTH = '() => console.log("it\'s here")'
+const WITH_BACKSLASH = String.raw`() => alert('it\'s')`
+
+function handlerWritten(source: string): () => void {
+  const handler = (): void => {}
+  handler.toString = () => source
+  return handler
+}
+
+function variantWith(source: string): Variant {
+  return {
+    state: {},
+    slots: () => ({ default: () => h('button', { onClick: handlerWritten(source) }, 'go') }),
+  } as unknown as Variant
+}
+
+describe('generateSourceCode, for an event handler', () => {
+  it('shows a double quote the author wrote, under the other delimiter', async () => {
+    expect(await generateSourceCode(variantWith(WITH_DOUBLE))).toContain(`@click='${WITH_DOUBLE}'`)
+  })
+
+  it('shows a single quote unescaped, under the usual delimiter', async () => {
+    expect(await generateSourceCode(variantWith(WITH_SINGLE))).toContain(`@click="${WITH_SINGLE}"`)
+  })
+
+  it('escapes only the rarer quote when the handler carries both', async () => {
+    expect(await generateSourceCode(variantWith(WITH_BOTH)))
+      .toContain('@click=\'() => console.log("it's here")\'')
+  })
+
+  it('shows a backslash the author wrote exactly as written', async () => {
+    expect(await generateSourceCode(variantWith(WITH_BACKSLASH))).toContain(WITH_BACKSLASH)
+  })
+
+  // The alert itself: one backslash in, four out.
+  it('does not multiply the backslash it was given', async () => {
+    const source = await generateSourceCode(variantWith(WITH_BACKSLASH))
+
+    expect(source.match(/\\/g)).toHaveLength(1)
+  })
+})
+
+/*
+ * A string prop is the other way a `"` reaches an attribute, and it took the
+ * delimiter fix later than the handlers did — the element below rendered its
+ * directives correctly and mangled this one.
+ */
+describe('generateSourceCode, for a string prop', () => {
+  function variantWithTitle(title: string): Variant {
+    return {
+      state: {},
+      slots: () => ({ default: () => h('div', { title }, 'go') }),
+    } as unknown as Variant
+  }
+
+  it('leaves a plain value under the usual delimiter', async () => {
+    expect(await generateSourceCode(variantWithTitle('a calm title'))).toContain('title="a calm title"')
+  })
+
+  it('takes the other delimiter rather than closing the attribute early', async () => {
+    expect(await generateSourceCode(variantWithTitle('He said "hi"'))).toContain(`title='He said "hi"'`)
+  })
+})

package/src/client/app/MountStory.ts

@@ -40,9 +40,13 @@ export default _defineComponent({
         value: 0,
       },
     })
-    let host: ReturnType<typeof createPreviewHost>
+    let host: ReturnType<typeof createPreviewHost> | null = null
 
     async function mountStory() {
+      if (!el.value) {
+        return
+      }
+
       host = createPreviewHost({
         name: 'MountStorySubApp',
         el: el.value,

package/src/client/app/RenderStory.ts

@@ -40,7 +40,7 @@ export default _defineComponent({
 
   setup(props, { emit }) {
     const sandbox = _ref<HTMLDivElement>()
-    let host: ReturnType<typeof createPreviewHost>
+    let host: ReturnType<typeof createPreviewHost> | null = null
     let mounting = false
 
     const externalState = reactive<Variant['state']>({})
@@ -73,6 +73,11 @@ export default _defineComponent({
       renderContext.currentVariant = props.variant
       renderContext.slotName = props.slotName
 
+      if (!sandbox.value) {
+        mounting = false
+        return
+      }
+
       host = createPreviewHost({
         name: 'RenderStorySubApp',
         el: sandbox.value,

package/src/client/app/RouterLinkStub.ts

@@ -36,7 +36,7 @@ export const RouterLinkStub = defineComponent({
   render() {
     const route = computed(() => defaultRoute)
     // mock reasonable return values to mimic vue-router's useLink
-    const children = this.$slots?.default?.({
+    const children = this.$slots?.['default']?.({
       route,
       href: computed(() => route.value.href),
       isActive: computed(() => false),

package/src/client/app/Story.ts

@@ -1,8 +1,10 @@
 import type { Story } from '@poveste/shared'
 import type { PropType, VNode } from 'vue'
+import type { PreviewRenderContext } from './render-context.js'
 import { omitInheritStoryProps } from '@poveste/shared'
-import { cloneVNode, computed, defineComponent, getCurrentInstance, h, isRef, provide, reactive, useAttrs } from 'vue'
+import { cloneVNode, computed, defineComponent, h, isRef, provide, reactive, useAttrs } from 'vue'
 import { useRenderContext } from './render-context.js'
+import { useInstance } from './util.js'
 import Variant from './Variant.js'
 
 export default defineComponent({
@@ -25,7 +27,7 @@ export default defineComponent({
   },
 
   setup(props) {
-    const vm = getCurrentInstance()
+    const vm = useInstance('Story')
 
     const attrs = useAttrs() as {
       story: Story
@@ -100,7 +102,7 @@ export default defineComponent({
       }
 
       Object.assign(attrs.story, {
-        slots: () => vm.proxy.$slots,
+        slots: () => vm.slots,
       })
     }
 
@@ -112,6 +114,32 @@ export default defineComponent({
       updateStory,
     }
 
+    /**
+     * What a `<Variant>` takes from its story: the attrs the story was given, then
+     * what the story carries, neither overriding what the variant set itself.
+     *
+     * Both render passes need it. `autoPropsDisabled` set on a story reached only
+     * the mount pass, so a story turning auto-props off still offered controls in
+     * the realm that renders it (#890).
+     */
+    function inheritedFromStory(vnode: VNode) {
+      const inherited: Record<string, any> = {}
+
+      for (const attr in vm.attrs) {
+        if (typeof vnode.props?.[attr] === 'undefined') {
+          inherited[attr] = vm.attrs[attr]
+        }
+      }
+
+      for (const attr in attrs.story) {
+        if (!omitInheritStoryProps.includes(attr) && typeof vnode.props?.[attr] === 'undefined') {
+          inherited[attr] = Reflect.get(attrs.story, attr)
+        }
+      }
+
+      return inherited
+    }
+
     function renderMountStory() {
       let index = 0
 
@@ -126,8 +154,9 @@ export default defineComponent({
       // that as it registers, so the gate held for the first render only and
       // turned the re-render a retarget needs into a full mount of every
       // sibling.
-      const targetIndex = renderContext?.targetVariantId
-        ? attrs.story.variants.findIndex(v => v.id === renderContext.targetVariantId)
+      const targetVariantId = renderContext?.targetVariantId
+      const targetIndex = targetVariantId
+        ? attrs.story.variants.findIndex(v => v.id === targetVariantId)
         : -1
 
       const applyAttrs = (vnodes: VNode[]) => {
@@ -159,21 +188,11 @@ export default defineComponent({
               nextProps.key = variant.id
             }
 
-            if (!vnode.props?.initState && !vnode.props?.['init-state']) {
+            if (!vnode.props?.['initState'] && !vnode.props?.['init-state']) {
               nextProps.initState = props.initState
             }
 
-            for (const attr in vm.proxy.$attrs) {
-              if (typeof vnode.props?.[attr] === 'undefined') {
-                nextProps[attr] = vm.proxy.$attrs[attr]
-              }
-            }
-
-            for (const attr in attrs.story) {
-              if (!omitInheritStoryProps.includes(attr) && typeof vnode.props?.[attr] === 'undefined') {
-                nextProps[attr] = attrs.story[attr]
-              }
-            }
+            Object.assign(nextProps, inheritedFromStory(vnode))
 
             result.push(cloneVNode(vnode, nextProps))
             continue
@@ -189,38 +208,59 @@ export default defineComponent({
         return result
       }
 
-      return applyAttrs(vm.proxy.$slots.default?.() ?? [])
+      return applyAttrs(vm.slots['default']?.() ?? [])
     }
 
-    function renderPreviewStory() {
-      renderContext.nextVariantIndex.value = 0
+    function countVariantVnodes(vnodes: VNode[]): number {
+      let count = 0
+      for (const vnode of vnodes) {
+        // @ts-expect-error custom option
+        if (vnode?.type?.__povesteType === 'variant') {
+          count++
+        }
+        else if (Array.isArray(vnode?.children)) {
+          count += countVariantVnodes(vnode.children as VNode[])
+        }
+      }
+      return count
+    }
+
+    function renderPreviewStory(context: PreviewRenderContext) {
+      context.nextVariantIndex.value = 0
 
       const slotProps = {
-        state: renderContext.externalState,
+        state: context.externalState,
       }
 
-      const children = []
+      const children: VNode[] = []
 
-      if (renderContext.slotName === 'controls') {
-        children.push(...(vm.proxy.$slots.controls?.(slotProps) ?? []))
+      if (context.slotName === 'controls') {
+        children.push(...(vm.slots['controls']?.(slotProps) ?? []))
       }
 
-      if (renderContext.slotName === 'default' || attrs.story.meta?.hasVariantChildComponents) {
-        children.push(...(vm.proxy.$slots.default?.(slotProps) ?? []))
+      if (context.slotName === 'default' || attrs.story.meta?.hasVariantChildComponents) {
+        children.push(...(vm.slots['default']?.(slotProps) ?? []))
       }
 
       // Same story as the mount pass above: every Variant component here runs
       // its full setup and then all but the current one render null (#197).
       // Keep only the current one, and seed the positional index so it still
       // resolves to the right variant data. Filtering only the default slot —
-      // the controls slot carries controls, and stories with variants in child
-      // components are invisible to a vnode walk.
+      // the controls slot carries controls.
+      //
+      // Gated on the walk seeing every variant, not on `hasVariantChildComponents`,
+      // for the reason the mount pass gives: every explicit <Variant> sets that flag
+      // as it renders, so from the second render on the filter never ran, and each
+      // retarget rendered all N Variant components to show one (#873). A story
+      // whose variants live in child components still renders them all, because
+      // its walk finds fewer than `variants.length`.
+      const currentVariant = context.currentVariant
       if (
-        renderContext.slotName === 'default'
-        && renderContext.currentVariant
-        && !attrs.story.meta?.hasVariantChildComponents
+        context.slotName === 'default'
+        && currentVariant
+        && countVariantVnodes(children) === attrs.story.variants.length
       ) {
-        const targetIndex = attrs.story.variants.findIndex(v => v.id === renderContext.currentVariant.id)
+        const targetIndex = attrs.story.variants.findIndex(v => v.id === currentVariant.id)
         if (targetIndex !== -1) {
           let seen = 0
           let kept = false
@@ -230,7 +270,7 @@ export default defineComponent({
               // @ts-expect-error custom option
               if (vnode?.type?.__povesteType === 'variant') {
                 if (seen === targetIndex) {
-                  result.push(vnode)
+                  result.push(cloneVNode(vnode, inheritedFromStory(vnode)))
                   kept = true
                 }
                 seen++
@@ -245,7 +285,7 @@ export default defineComponent({
           }
           const filtered = keepTargetVariant(children)
           if (kept) {
-            renderContext.nextVariantIndex.value = targetIndex
+            context.nextVariantIndex.value = targetIndex
             return filtered
           }
         }
@@ -263,14 +303,15 @@ export default defineComponent({
     if (firstVariant?.id === '_default') {
       return h(Variant, {
         variant: firstVariant,
-        initState: this.initState,
+        ...this.initState ? { initState: this.initState } : {},
         implicit: true,
         ...this.$attrs,
       }, this.$slots)
     }
 
-    if (this.renderContext?.mode === 'render') {
-      return this.renderPreviewStory()
+    const renderContext = this.renderContext
+    if (renderContext?.mode === 'render') {
+      return this.renderPreviewStory(renderContext)
     }
 
     return this.renderMountStory()