use export names and story ids as references

storybookjs · May 29, 2024 · 0a3e376 · 0a3e376
1 parent 5e57010
commit 0a3e376
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git a/src/compiler/transform/appendix/create-export-order.ts b/src/compiler/transform/appendix/create-export-order.ts
@@ -1,6 +1,7 @@
 import type { ExportNamedDeclaration } from 'estree';
 
 import { getStoriesNames } from '../../../parser/analyse/Story/attributes/name.js';
+import { storyNameToExportName } from '../../../utils/identifiers.js';
 
 const EXPORT_ORDER_VARIABLE = '__namedExportsOrder';
 
@@ -10,7 +11,7 @@ interface Params {
 }
 
 export function createExportOrderVariable(params: Params): ExportNamedDeclaration {
-  const { names, filename } = params;
+  const { names } = params;
 
   return {
     type: 'ExportNamedDeclaration',
@@ -43,7 +44,7 @@ export function createExportOrderVariable(params: Params): ExportNamedDeclaratio
               type: 'Literal',
               // TODO: There's probably some internal function in the Storybook to handle the story name?
               // Reference: https://github.com/storybookjs/addon-svelte-csf/pull/181#discussion_r1617937429
-              value: name,
+              value: storyNameToExportName(name),
             })),
           },
         },

diff --git a/src/compiler/transform/appendix/create-named-export-story.ts b/src/compiler/transform/appendix/create-named-export-story.ts
@@ -1,7 +1,7 @@
 import type { ExportNamedDeclaration, Identifier } from 'estree';
 import type { createVariableFromRuntimeStoriesCall } from './create-variable-from-runtime-stories-call';
 
-import { storyNameToExportName } from '../../../utils/identifiers.js';
+import { storyNameToExportName, storyNameToId } from '../../../utils/identifiers.js';
 
 interface Params {
   name: string;
@@ -10,7 +10,7 @@ interface Params {
 }
 
 export async function createNamedExportStory(params: Params): Promise<ExportNamedDeclaration> {
-  const { name, node, filename } = params;
+  const { name, node } = params;
 
   const exported = {
     type: 'Identifier',
@@ -41,7 +41,7 @@ export async function createNamedExportStory(params: Params): Promise<ExportName
               type: 'Identifier',
               name: getNameFromVariable(node),
             },
-            property: { type: 'Literal', value: name },
+            property: { type: 'Literal', value: storyNameToId(name) },
           },
         },
       ],

diff --git a/src/compiler/transform/create-appendix.ts b/src/compiler/transform/create-appendix.ts
@@ -37,6 +37,7 @@ export async function createAppendix(params: Params) {
     metaIdentifier,
     filename,
   });
+  // TODO: gracefully handle when story export names collide - eg. because of story names "Hello!" and "Hello".
   const storiesExports = await Promise.all(
     names.map((name) =>
       createNamedExportStory({

diff --git a/src/indexer/index.ts b/src/indexer/index.ts
@@ -15,6 +15,7 @@ import {
 } from '../parser/analyse/meta/properties.js';
 import { getNameFromStoryAttribute } from '../parser/analyse/Story/attributes/name.js';
 import { getTagsFromStoryAttribute } from '../parser/analyse/Story/attributes/tags.js';
+import { storyNameToExportName } from '../utils/identifiers.js';
 
 export const indexer: Indexer = {
   test: /\.svelte$/,
@@ -60,23 +61,21 @@ export const indexer: Indexer = {
       : undefined;
 
     return storiesAttributesNodes.map((attributeNode) => {
-      const exportName = getNameFromStoryAttribute({
+      const name = getNameFromStoryAttribute({
         node: attributeNode.name,
         filename,
       });
 
       return {
         type: 'story',
         importPath: filename,
-        exportName,
-        // TODO: Ask if this is important to set. If yes, then from what? Story attribute? That's `exportName`.
-        // name: ...
+        exportName: storyNameToExportName(name),
+        name,
         title: metaTitle,
         tags: combineTags(
           ...metaTags,
           ...getTagsFromStoryAttribute({ node: attributeNode.tags, filename })
         ),
-        __id: metaId,
       } satisfies IndexInput;
     });
   },

diff --git a/src/runtime/create-runtime-stories.ts b/src/runtime/create-runtime-stories.ts
@@ -6,6 +6,7 @@ import { mount, unmount, type ComponentType } from 'svelte';
 import StoriesExtractor from './StoriesExtractor.svelte';
 import StoryRenderer from './StoryRenderer.svelte';
 import type { StoriesRepository } from './contexts/extractor.svelte.js';
+import { storyNameToId } from '../utils/identifiers.js';
 
 const createFragment = document.createDocumentFragment
   ? () => document.createDocumentFragment()
@@ -107,7 +108,7 @@ export const createRuntimeStories = <TMeta extends Meta>(Stories: ComponentType,
       };
     }
 
-    stories[name] = storyObj;
+    stories[storyNameToId(name)] = storyObj;
   }
 
   return stories;