poveste 0.14.0 → 0.15.0

package/README.md

@@ -20,6 +20,8 @@ pnpm i -D poveste @poveste/plugin-nuxt     # Nuxt 4
 pnpm i -D poveste @poveste/plugin-quasar   # Quasar
 ```
 
+> **Installed an older version than you expected?** For about a day after a release, pnpm installs the previous one — `(x.y.z is available)`, no error. That is pnpm's release-age cooldown, not a broken publish. Use `npm`, wait it out, or pass `--config.minimum-release-age=0` (kebab-case — pnpm 12 silently ignores the camelCase spelling). Asking for the exact version does not help: pnpm 12 refuses one inside the window too.
+
 Then create a `poveste.config.ts` in your project root:
 
 ```ts
@@ -46,11 +48,11 @@ Run `npx poveste --help` for the full list of options.
 ## Requirements
 
 Node `^22.22.2 || ^24.15.0 || >=26.0.0` and Vite `^8.0.0`. See
-[supported versions](https://poveste.dev/guide/getting-started.html#supported-versions) for
+[supported versions](https://poveste.dev/guide/getting-started#supported-versions) for
 what proves each range.
 
 ## Links
 
 - [Documentation](https://poveste.dev)
-- [Migrating from histoire](https://poveste.dev/guide/migration-from-histoire.html)
+- [Migrating from histoire](https://poveste.dev/guide/migration-from-histoire)
 - [GitHub](https://github.com/poveste-dev/poveste)

package/dist/node/__tests__/dev-cleanup/poveste.config.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    plugins: {
+        name: string;
+        defaultConfig(): void;
+    }[];
+};
+export default _default;

package/dist/node/__tests__/dev-cleanup/poveste.config.js

@@ -0,0 +1,15 @@
+import { appendFileSync } from 'node:fs';
+import { onPovesteCleanup } from 'poveste';
+const marker = process.env['POVESTE_CLEANUP_MARKER'] ?? '';
+// Registers the way @poveste/plugin-nuxt does, while the config resolves, and
+// leaves a line behind each time the cleanup runs.
+// `.ts`, not `.js`: the restart specs edit this file, and a `.js` config can be
+// served from Node's module cache, so the edit would never be read.
+export default {
+    plugins: [{
+            name: 'cleanup-marker',
+            defaultConfig() {
+                onPovesteCleanup(() => appendFileSync(marker, 'ran\n'));
+            },
+        }],
+};

package/dist/node/alias.js

@@ -1,5 +1,5 @@
 import { createRequire } from 'node:module';
 import path from 'pathe';
 const require = createRequire(import.meta.url);
-export const APP_PATH = path.join(path.dirname(require.resolve('@poveste/app/package.json')), process.env.POVESTE_DEV ? 'src' : 'dist');
+export const APP_PATH = path.join(path.dirname(require.resolve('@poveste/app/package.json')), process.env['POVESTE_DEV'] ? 'src' : 'dist');
 export const TEMP_PATH = path.join(process.cwd(), 'node_modules', '.poveste');

package/dist/node/bin.js

@@ -4,9 +4,9 @@ import { dirname, resolve } from 'pathe';
 import sade from 'sade';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const { version } = JSON.parse(fs.readFileSync(resolve(__dirname, '../../package.json'), 'utf8'));
-process.env.NODE_ENV = process.argv.includes('build') || process.argv.includes('preview') ? 'production' : 'development';
-process.env.HISTOIRE = 'true';
-process.env.POVESTE = 'true';
+process.env['NODE_ENV'] = process.argv.includes('build') || process.argv.includes('preview') ? 'production' : 'development';
+process.env['HISTOIRE'] = 'true';
+process.env['POVESTE'] = 'true';
 // sade does not await an action, so a rejected command was terminated only by
 // Node's default handling of the unhandled rejection it became. That is not the
 // CLI's to rely on: any dependency can install an `unhandledRejection` listener
@@ -15,7 +15,7 @@ process.env.POVESTE = 'true';
 //
 // So failure is reported here, the exit code set, and the process forced out if
 // it does not leave on its own. Closing the collection ports (#426) was not
-// enough on its own: a failed build still hangs in the nuxt4 and sveltekit books,
+// enough on its own: a failed build still hangs in the nuxt and sveltekit books,
 // holding `FSEventWrap` and `FSReqCallback` handles — watchers nothing closes on
 // the error path. And `dev` and `preview` hold a listening server by design, so
 // for them no amount of leak-fixing would ever let the loop drain.
@@ -47,7 +47,7 @@ process.env.POVESTE = 'true';
  * that ends and one that does not.
  */
 function proveItDrains() {
-    return !!process.env.POVESTE_NO_FORCE_EXIT;
+    return !!process.env['POVESTE_NO_FORCE_EXIT'];
 }
 function run(command) {
     return command().then(() => undefined, (error) => {

package/dist/node/build-counts.d.ts

@@ -15,7 +15,7 @@ export interface BuildCounts {
  * "No variants" is not the question. A standalone `.story.md` is collected into a
  * story with `docsOnly: true` and `variants: []` by construction (`markdown.ts`),
  * so counting empty by variants alone reported every documentation page in the
- * book as a problem — three of the four `examples/vue3` warned about are
+ * book as a problem — three of the four `examples/vue` warned about are
  * `SHARED_STORY_TITLES` entries that a required spec fails if you delete them,
  * which left the one real empty file hidden inside them (#670).
  *
@@ -24,3 +24,33 @@ export interface BuildCounts {
  * home page reading 57 Stories and 3 Documents disagrees with itself.
  */
 export declare function buildCounts(storyFiles: ServerStoryFile[]): BuildCounts;
+/**
+ * Whether the build produced anything a reader can open.
+ *
+ * Stated once because two callers ask it: the message below, and the colour
+ * `build.ts` prints that message in. Reading it back off the message instead —
+ * one line means green — ties the colour to the shape of an unrelated decision,
+ * and a second success line would turn a good build yellow.
+ */
+export declare function builtSomething(counts: BuildCounts): boolean;
+/**
+ * What a finished build says it produced.
+ *
+ * A separate function because the interesting case is a claim rather than a
+ * number: `✅ Built 0 stories (0 variants)` is true of a working build in a
+ * project with nothing to build, and it is what a first-time reader gets from
+ * the first command the guide tells them to run (#624). Nothing in it says
+ * where the build looked, so there is no next step in it either.
+ *
+ * Nothing built is two states, not one, and the likelier is the second: a
+ * reader who followed the guide has a story file and has not put a `<Story>`
+ * in it yet. Those files matched, so "nothing matched" is false of them, and
+ * "write a story file" asks for the one they already wrote.
+ *
+ * Not an error. A book with no stories is a valid thing to build — scaffolding
+ * is exactly that state — so this changes what is said, not the exit code.
+ *
+ * Documents count as content: a book of `.story.md` pages with no variants has
+ * something in it, and telling its author nothing was found would be wrong.
+ */
+export declare function buildSummary(counts: BuildCounts, seconds: number, storyMatch: string[]): string[];

package/dist/node/build-counts.js

@@ -5,7 +5,7 @@
  * "No variants" is not the question. A standalone `.story.md` is collected into a
  * story with `docsOnly: true` and `variants: []` by construction (`markdown.ts`),
  * so counting empty by variants alone reported every documentation page in the
- * book as a problem — three of the four `examples/vue3` warned about are
+ * book as a problem — three of the four `examples/vue` warned about are
  * `SHARED_STORY_TITLES` entries that a required spec fails if you delete them,
  * which left the one real empty file hidden inside them (#670).
  *
@@ -29,3 +29,55 @@ export function buildCounts(storyFiles) {
     }
     return counts;
 }
+/**
+ * Whether the build produced anything a reader can open.
+ *
+ * Stated once because two callers ask it: the message below, and the colour
+ * `build.ts` prints that message in. Reading it back off the message instead —
+ * one line means green — ties the colour to the shape of an unrelated decision,
+ * and a second success line would turn a good build yellow.
+ */
+export function builtSomething(counts) {
+    return counts.stories > 0 || counts.docs > 0;
+}
+/**
+ * What a finished build says it produced.
+ *
+ * A separate function because the interesting case is a claim rather than a
+ * number: `✅ Built 0 stories (0 variants)` is true of a working build in a
+ * project with nothing to build, and it is what a first-time reader gets from
+ * the first command the guide tells them to run (#624). Nothing in it says
+ * where the build looked, so there is no next step in it either.
+ *
+ * Nothing built is two states, not one, and the likelier is the second: a
+ * reader who followed the guide has a story file and has not put a `<Story>`
+ * in it yet. Those files matched, so "nothing matched" is false of them, and
+ * "write a story file" asks for the one they already wrote.
+ *
+ * Not an error. A book with no stories is a valid thing to build — scaffolding
+ * is exactly that state — so this changes what is said, not the exit code.
+ *
+ * Documents count as content: a book of `.story.md` pages with no variants has
+ * something in it, and telling its author nothing was found would be wrong.
+ */
+export function buildSummary(counts, seconds, storyMatch) {
+    const took = `in ${seconds}s`;
+    const globs = storyMatch.join(', ');
+    if (!builtSomething(counts)) {
+        if (counts.empty.length) {
+            const files = `${counts.empty.length} file${counts.empty.length === 1 ? '' : 's'}`;
+            return [
+                `Built 0 stories ${took} — ${files} matched ${globs} and produced no story`,
+                'A story file needs a <Story> in it: https://poveste.dev/guide/',
+            ];
+        }
+        return [
+            `Built 0 stories ${took} — nothing matched ${globs}`,
+            'Write a story file and run this again: https://poveste.dev/guide/',
+        ];
+    }
+    const stories = `${counts.stories} stor${counts.stories === 1 ? 'y' : 'ies'}`;
+    const variants = `${counts.variants} variant${counts.variants === 1 ? '' : 's'}`;
+    const docs = counts.docs ? ` and ${counts.docs} document${counts.docs === 1 ? '' : 's'}` : '';
+    return [`✅ Built ${stories} (${variants})${docs} ${took}`];
+}

package/dist/node/build-serialize.d.ts

@@ -3,9 +3,9 @@ import type { Context } from './context.js';
 interface SerializedStory extends Omit<ServerStory, 'docsText'> {
     relativePath: string;
     supportPluginId: string;
-    treePath?: string[];
-    virtual?: boolean;
-    markdownFile?: SerializedMarkdownFile;
+    treePath?: string[] | undefined;
+    virtual?: boolean | undefined;
+    markdownFile: SerializedMarkdownFile | null;
 }
 interface SerializedMarkdownFile {
     id: string;

package/dist/node/build.js

@@ -5,7 +5,7 @@ import { join } from 'pathe';
 import pc from 'picocolors';
 import { createServer as createViteServer, mergeConfig as mergeViteConfig, build as viteBuild, } from 'vite';
 import { APP_PATH } from './alias.js';
-import { buildCounts } from './build-counts.js';
+import { buildCounts, buildSummary, builtSomething } from './build-counts.js';
 import { getSerializedStoryData } from './build-serialize.js';
 import { useCollectStories } from './collect/index.js';
 import { useModuleLoader } from './load.js';
@@ -58,6 +58,17 @@ export async function build(ctx) {
         // bundle built from it.
         mode: viteMode(ctx.mode),
         optimizeDeps: { include: [], noDiscovery: true },
+        plugins: [{
+                // Collection reads each file once, so this server needs no watcher, and
+                // one leaked from it: a transform still in flight when a failed build
+                // closes the server re-adds a file, Vite's chokidar reopens on `add`, and
+                // the native watcher that starts is never closed (#434). A `config` hook
+                // cannot say this, because merging a config skips `null`.
+                name: 'poveste:collect-without-watcher',
+                configResolved(config) {
+                    Object.assign(config.server, { watch: null });
+                },
+            }],
     }));
     await server.pluginContainer.buildStart({});
     // Cleanup a plugin registers runs however this ends. `onBuildEnd` cannot be that
@@ -106,7 +117,7 @@ export async function build(ctx) {
             // Same wrapper the dev path uses for these exact calls (server.ts).
             await wrapLogError('destroyCollectStories', () => destroyCollectStories());
         }
-        const { stories: storyCount, variants: variantCount, docs: docsCount, empty } = buildCounts(ctx.storyFiles);
+        const counts = buildCounts(ctx.storyFiles);
         const { viteConfig: buildViteConfigRaw } = await getViteConfigWithPlugins(false, ctx);
         const buildViteConfig = mergeViteConfig(buildViteConfigRaw, {
             // Vite picks the `.env` file from `mode`, not from NODE_ENV — this said
@@ -114,7 +125,7 @@ export async function build(ctx) {
             mode: viteMode(ctx.mode),
             build: {
                 lib: false,
-                rollupOptions: {
+                rolldownOptions: {
                     // Named, not an array. With an array the bundler derives `[name]` from the
                     // path, and `APP_PATH` is absolute — so any framework whose `entryFileNames`
                     // refuses a path-shaped `[name]` fails the build outright (#369, and
@@ -136,14 +147,15 @@ export async function build(ctx) {
                 },
             },
         });
+        const buildPlugins = buildViteConfig.plugins ??= [];
         // For @vite/plugin-vue: Always put our vite server
         // Disable template inlining
         // (so that we no longer need defineExpose)
         // Nuxt: replaces the Nuxt vite dev server
-        buildViteConfig.plugins.push({
+        buildPlugins.push({
             name: 'poveste-vue-plugin-override',
             config(config) {
-                const vuePlugin = config.plugins.find((p) => p.name === 'vite:vue');
+                const vuePlugin = config.plugins?.find((p) => p.name === 'vite:vue');
                 if (vuePlugin) {
                     // @ts-expect-error vue plugin use function form
                     const original = vuePlugin.configureServer.bind(vuePlugin);
@@ -164,14 +176,16 @@ export async function build(ctx) {
                 }
             },
         });
-        buildViteConfig.plugins.push({
+        buildPlugins.push({
             name: 'poveste-build-config-override',
             enforce: 'post',
             config(config) {
+                const build = config.build ??= {};
+                const rolldownOptions = build.rolldownOptions ??= {};
                 // Don't externalize
-                config.build.rollupOptions.external = [];
+                rolldownOptions.external = [];
                 // Force chunk strategy
-                config.build.rollupOptions.output = {
+                rolldownOptions.output = {
                     manualChunks(id) {
                         // Vite's runtime helpers (`\0vite/preload-helper.js` and friends) are
                         // virtual modules, so the node_modules routing below never sees them
@@ -196,6 +210,7 @@ export async function build(ctx) {
                             }
                             return 'vendor';
                         }
+                        return undefined;
                     },
                 };
                 // A framework that declares Vite environments gives each one its own
@@ -204,73 +219,86 @@ export async function build(ctx) {
                 // while poveste kept looking in `outDir` (#369). Only the client environment
                 // builds the book. Where no framework declared environments there is nothing to
                 // override, and where one did this puts the book back where poveste reads it.
-                if (config.environments?.client?.build) {
-                    config.environments.client.build.outDir = ctx.config.outDir;
+                if (config.environments?.['client']?.build) {
+                    config.environments['client'].build.outDir = ctx.config.outDir;
                 }
                 // Force vite build options
-                Object.assign(config.build, {
+                Object.assign(build, {
                     outDir: ctx.config.outDir,
                     emptyOutDir: true,
                     // Re-merged per-entry by entry-css-merger.
                     cssCodeSplit: true,
                     // Not an oversight: the source pane prints story code by reading
                     // functions back at runtime, and `Function.prototype.toString()`
-                    // returns whatever the minifier left — `codegen-vue3.spec.ts` fails
+                    // returns whatever the minifier left — `codegen-vue.spec.ts` fails
                     // on three cases with this on (#329).
                     minify: false,
                     // Don't build in SSR mode
                     ssr: false,
                 });
-                config.define.__HST_COLLECT__ = false;
+                config.define = { ...config.define, __HST_COLLECT__: false };
             },
         });
         const isolate = ctx.config.isolateStyles !== false;
-        buildViteConfig.plugins.push(userCssScopePlugin({ enabled: isolate }));
-        buildViteConfig.plugins.push(chromeCssScopePlugin({ enabled: isolate }));
-        buildViteConfig.plugins.push(entryCssMergerPlugin({ isolateStyles: isolate }));
+        buildPlugins.push(userCssScopePlugin({ enabled: isolate }));
+        buildPlugins.push(chromeCssScopePlugin({ enabled: isolate }));
+        buildPlugins.push(entryCssMergerPlugin({ isolateStyles: isolate }));
         for (const cb of changeViteConfigCallbacks) {
-            console.log('vite config hook', cb);
             await cb(buildViteConfig);
         }
         const results = await viteBuild(buildViteConfig);
         const result = Array.isArray(results) ? results[0] : results;
-        function findEntryCss(entryName) {
-            return result.output.find(o => o.type === 'asset' && o.fileName === `${entryName}.css`);
+        if (!result) {
+            throw new Error('[poveste] the book build produced no output');
         }
+        const findEntryCss = (entryName) => result.output.find(o => o.type === 'asset' && o.fileName === `${entryName}.css`);
         const mainStyleOutput = findEntryCss('bundle-main')
-            ?? result.output.find(o => o.name === 'style.css' && o.type === 'asset');
+            ?? result.output.find(o => o.type === 'asset' && o.names.includes('style.css'));
         const sandboxStyleOutput = findEntryCss('bundle-sandbox') ?? mainStyleOutput;
         // Preload
-        const preloadOutputs = result.output.filter(o => PRELOAD_MODULES.includes(o.name) && o.type === 'chunk');
+        const preloadOutputs = result.output.filter(o => o.type === 'chunk' && PRELOAD_MODULES.includes(o.name));
         const preloadHtml = generateScriptLinks(preloadOutputs.map(o => o.fileName), 'preload', ctx);
         // Prefetch
-        const prefetchOutputs = result.output.filter(o => PREFETCHED_MODULES.includes(o.name) && o.type === 'chunk');
+        const prefetchOutputs = result.output.filter(o => o.type === 'chunk' && PREFETCHED_MODULES.includes(o.name));
         const prefetchHtml = generateScriptLinks(prefetchOutputs.map(o => o.fileName), 'prefetch', ctx);
         // Index
-        const indexOutput = result.output.find(o => o.name === 'bundle-main' && o.type === 'chunk');
+        const indexOutput = result.output.find(o => o.type === 'chunk' && o.name === 'bundle-main');
+        const sandboxOutput = result.output.find(o => o.type === 'chunk' && o.name === 'bundle-sandbox');
+        if (!indexOutput || !sandboxOutput || !mainStyleOutput || !sandboxStyleOutput) {
+            const missing = { 'bundle-main.js': indexOutput, 'bundle-sandbox.js': sandboxOutput, 'bundle-main.css': mainStyleOutput };
+            throw new Error(`[poveste] the book build produced no ${Object.entries(missing).filter(([, output]) => !output).map(([name]) => name).join(', ')}`);
+        }
         let indexHtml = generateEntryHtml(indexOutput.fileName, mainStyleOutput.fileName, {
             HEAD: `${preloadHtml}${prefetchHtml}`,
         }, ctx);
         indexHtml = await applyHeadTransform(indexHtml, ctx.config.head);
         await writeFile('index.html', indexHtml, ctx);
         // Sandbox
-        const sandboxOutput = result.output.find(o => o.name === 'bundle-sandbox' && o.type === 'chunk');
         let sandboxHtml = generateEntryHtml(sandboxOutput.fileName, sandboxStyleOutput.fileName, {}, ctx);
         sandboxHtml = await applyHeadTransform(sandboxHtml, ctx.config.head);
         await writeFile('__sandbox.html', sandboxHtml, ctx);
         await writeFile('poveste.json', JSON.stringify(getSerializedStoryData(ctx), null, 2), ctx);
         const duration = performance.now() - startTime;
+        const { empty } = counts;
         if (empty.length) {
             console.warn(pc.yellow(`⚠️  ${empty.length} empty story file${empty.length === 1 ? '' : 's'}: ${empty.join(', ')}`));
         }
-        const docsNote = docsCount ? ` and ${docsCount} document${docsCount === 1 ? '' : 's'}` : '';
-        console.log(pc.green(`✅ Built ${storyCount} stor${storyCount === 1 ? 'y' : 'ies'} (${variantCount} variant${variantCount === 1 ? '' : 's'})${docsNote} in ${Math.round(duration / 1000 * 100) / 100}s`));
+        // Green only when something was built. A tick over nothing is the claim
+        // #624 is about, and it is the first command the guide asks for.
+        const paint = builtSomething(counts) ? pc.green : pc.yellow;
+        for (const line of buildSummary(counts, Math.round(duration / 1000 * 100) / 100, ctx.config.storyMatch)) {
+            console.log(paint(line));
+        }
         // Render
         if (previewStoryCallbacks.length) {
             const { baseUrl, close } = await startPreview({}, ctx);
             try {
                 for (const storyFile of ctx.storyFiles) {
                     const story = storyFile.story;
+                    // An empty story file collects no story, and there is nothing to render.
+                    if (!story) {
+                        continue;
+                    }
                     for (const variant of story.variants) {
                         const query = new URLSearchParams();
                         query.append('storyId', story.id);

package/dist/node/builtin-plugins/vanilla-support/MountStory.js

@@ -8,7 +8,7 @@ export default _defineComponent({
         },
     },
     setup(props) {
-        const options = props.story.file.component;
+        const options = props.story.file?.component;
         let rawVariants = [];
         if (options.onMount) {
             rawVariants = [{
@@ -19,16 +19,16 @@ export default _defineComponent({
                 }];
         }
         else {
-            rawVariants = options.variants;
+            rawVariants = options.variants ?? [];
         }
-        for (const index in props.story.variants) {
+        for (const [index, variant] of props.story.variants.entries()) {
             const rawVariant = rawVariants[index];
-            Object.assign(props.story.variants[index], {
-                slots: () => ({ default: rawVariant.onMount, controls: rawVariant.onMountControls }),
-                source: rawVariant.source ?? options.source,
-                responsiveDisabled: rawVariant.responsiveDisabled ?? options.responsiveDisabled,
-                autoPropsDisabled: rawVariant.autoPropsDisabled ?? options.autoPropsDisabled,
-                setupApp: rawVariant.setupApp ?? options.setupApp,
+            Object.assign(variant, {
+                slots: () => ({ default: rawVariant?.onMount, controls: rawVariant?.onMountControls }),
+                source: rawVariant?.source ?? options.source,
+                responsiveDisabled: rawVariant?.responsiveDisabled ?? options.responsiveDisabled,
+                autoPropsDisabled: rawVariant?.autoPropsDisabled ?? options.autoPropsDisabled,
+                setupApp: rawVariant?.setupApp ?? options.setupApp,
                 configReady: true,
             });
         }

package/dist/node/builtin-plugins/vanilla-support/RenderStory.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: string;
     };
 }>, {
-    sandbox: import("vue").Ref<HTMLDivElement, HTMLDivElement>;
+    sandbox: import("vue").Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     ready: () => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/node/builtin-plugins/vanilla-support/RenderStory.js

@@ -26,7 +26,7 @@ export default _defineComponent({
     setup(props, { emit }) {
         const sandbox = _ref();
         let mounting = false;
-        let app;
+        let app = null;
         let appHooks;
         async function unmountVariant() {
             if (app) {
@@ -36,7 +36,7 @@ export default _defineComponent({
                         await hook();
                     }
                 }
-                app.el.parentNode.removeChild(app.el);
+                app.el.remove();
                 app = null;
             }
         }
@@ -86,9 +86,9 @@ export default _defineComponent({
                     appHooks.onUnmount.push(cb);
                 },
             };
-            const onMount = props.variant.slots()[props.slotName];
-            await onMount(api);
-            sandbox.value.appendChild(app.el);
+            const onMount = Reflect.get(props.variant.slots?.() ?? {}, props.slotName);
+            await onMount?.(api);
+            sandbox.value?.appendChild(app.el);
             emit('ready');
         }
         _onMounted(async () => {

package/dist/node/builtin-plugins/vanilla-support/collect.js

@@ -10,7 +10,7 @@ export async function run({ file, storyData }) {
             }];
     }
     else {
-        rawVariants = options.variants;
+        rawVariants = options.variants ?? [];
     }
     const story = {
         id: options.id ?? file.id,
@@ -20,7 +20,7 @@ export async function run({ file, storyData }) {
         icon: options.icon,
         iconColor: options.iconColor,
         docsOnly: options.docsOnly ?? false,
-        variants: null,
+        variants: [],
     };
     const variants = rawVariants.map((v, index) => ({
         id: v.id ?? `${story.id}-${index}`,

package/dist/node/builtin-plugins/vanilla-support/types.d.ts

@@ -12,8 +12,8 @@ export interface MountApi {
     onUnmount: (cb: () => unknown) => Awaitable<void>;
 }
 export interface VanillaApi {
-    onMount?: (api: MountApi) => Awaitable<void>;
-    onMountControls?: (api: MountApi) => Awaitable<void>;
+    onMount?: ((api: MountApi) => Awaitable<void>) | undefined;
+    onMountControls?: ((api: MountApi) => Awaitable<void>) | undefined;
 }
 export type VanillaStorySetupHandler = (payload: {
     app: App;

package/dist/node/builtin-plugins/vanilla-support/vanilla.story.js

@@ -5,20 +5,20 @@ export default {
         {
             title: 'Hello',
             onMount: ({ el, state, onUpdate }) => {
-                state.count = 0;
+                state['count'] = 0;
                 const div = document.createElement('div');
                 div.innerHTML = '<h1>Hello World</h1>';
                 el.appendChild(div);
                 const counter = document.createElement('pre');
-                counter.innerHTML = `Counter: ${state.counter}`;
+                counter.innerHTML = `Counter: ${state['counter']}`;
                 div.appendChild(counter);
                 onUpdate(() => {
-                    counter.innerHTML = `Counter: ${state.count}`;
+                    counter.innerHTML = `Counter: ${state['count']}`;
                 });
             },
             onMountControls: ({ el, state, onUnmount }) => {
                 const add = () => {
-                    state.count++;
+                    state['count']++;
                 };
                 Object.assign(el.style, {
                     padding: '8px',