[Bug] titlePrefix in advanced story specifiers causes the story to cr…

…ash with "Didn't find 'xyz' in CSF file"
storybookjs · Sep 2, 2023 · d3474f9 · d3474f9
1 parent 45fcc33
commit d3474f9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 11 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,9 +2,11 @@ import type { StorybookConfig } from '@storybook/svelte-vite';
 
 const config: StorybookConfig = {
   framework: '@storybook/svelte-vite',
-  stories: [
-    '../stories/**/*.stories.svelte',
-  ],
+  stories: [{
+    directory: '../stories',
+    files:'**/*.stories.svelte',
+    titlePrefix:'Demo'
+  }],
   addons: [
     '../dist/preset/index.js',
     '@storybook/addon-essentials',

diff --git a/src/parser/extract-stories.ts b/src/parser/extract-stories.ts
@@ -1,13 +1,10 @@
 import * as svelte from 'svelte/compiler';
 import type { Node } from 'estree';
 
-import { storyNameFromExport, toId } from '@storybook/csf';
-
 import dedent from 'dedent';
 import { extractId } from './extract-id.js';
 
 interface StoryDef {
-  storyId: string;
   name: string;
   template: boolean;
   source: string;
@@ -131,7 +128,6 @@ export function extractStories(component: string): StoriesDef {
             source = dedent`${component.substr(start, end - start)}`;
           }
           stories[isTemplate ? `tpl:${id}` : id] = {
-            storyId: toId(meta.id || meta.title || id, storyNameFromExport(id)),
             name,
             template: isTemplate,
             source,

diff --git a/src/preset/indexer.ts b/src/preset/indexer.ts
@@ -3,6 +3,7 @@ import * as svelte from 'svelte/compiler';
 import { extractStories } from '../parser/extract-stories.js';
 import fs from 'fs-extra';
 import { loadSvelteConfig } from '../config-loader.js';
+import { storyNameFromExport, toId } from '@storybook/csf';
 
 export async function svelteIndexer(fileName, { makeTitle }) {
   let code = (await fs.readFile(fileName, 'utf-8')).toString();
@@ -13,13 +14,13 @@ export async function svelteIndexer(fileName, { makeTitle }) {
   }
 
   const defs = extractStories(code);
-
+  const meta = { ...defs.meta, title: makeTitle(defs.meta.title) };
   return {
-    meta: { title: makeTitle(defs.meta.title) },
+    meta,
     stories: Object.entries(defs.stories)
       .filter(([id, story]) => !story.template)
       .map(([id, story]) => ({
-        id: story.storyId,
+        id: toId(meta.id || meta.title || id, storyNameFromExport(id)),
         name: story.name,
       })),
   };

diff --git a/stories/button.stories.svelte b/stories/button.stories.svelte
@@ -9,7 +9,7 @@
   }
 </script>
 
-<Meta title="Button" component={Button}/>
+<Meta component={Button}/>
 
 <Template let:args>
   <Button {...args} on:click={handleClick}>