refactor: Reorganize structure, improve naming, streamline

Goal: Prepare directory `parser/` for writing tests
storybookjs · Jun 7, 2024 · 46a7eec · 46a7eec
1 parent f1de3a9
commit 46a7eec
Show file tree

Hide file tree

Showing 42 changed files with 849 additions and 731 deletions.
diff --git a/src/compiler/plugin.ts b/src/compiler/plugin.ts
@@ -14,14 +14,9 @@ import MagicString from 'magic-string';
 import { preprocess } from 'svelte/compiler';
 import type { Plugin } from 'vite';
 
-import { createAppendix } from './transform/create-appendix.js';
-import { removeExportDefault } from './transform/remove-export-default.js';
-import { insertDefineMetaJSDocCommentAsDescription } from './transform/define-meta/description.js';
-import { destructureMetaFromDefineMeta } from './transform/define-meta/destructure-meta.js';
-import { updateCompiledStoryProps } from './transform/compiled-story-props.js';
+import { transformStoriesCode } from './transform/index.js';
 
 import { getSvelteAST } from '../parser/ast.js';
-import { extractStoriesNodesFromExportDefaultFn } from '../parser/extract/compiled/stories.js';
 import { extractCompiledASTNodes } from '../parser/extract/compiled/nodes.js';
 import { extractSvelteASTNodes } from '../parser/extract/svelte/nodes.js';
 
@@ -44,7 +39,7 @@ export async function plugin(): Promise<Plugin> {
       const compiledAST = this.parse(compiledCode);
       let magicCompiledCode = new MagicString(compiledCode);
 
-      // @ts-expect-error FIXME: `this.originalCode` exists at runtime.
+      // @ts-expect-error FIXME: `this.originalCode` exists at runtime in the development mode only.
       // Need to research if its documented somewhere
       let rawCode = this.originalCode ?? fs.readFileSync(id).toString();
 
@@ -60,59 +55,19 @@ export async function plugin(): Promise<Plugin> {
         ast: svelteAST,
         filename: id,
       });
-      const compiledNodes = await extractCompiledASTNodes({
+      const compiledASTNodes = await extractCompiledASTNodes({
         ast: compiledAST,
         filename: id,
       });
-      const extractedCompiledStoriesNodes = await extractStoriesNodesFromExportDefaultFn({
-        nodes: compiledNodes,
-        filename: id,
-      });
 
-      /*
-       * WARN:
-       * IMPORTANT! The plugins starts updating the compiled output code from the bottom.
-       * Why? Because once we start updating nodes in the stringified output from the top,
-       * then other nodes' `start` and `end` numbers will not be correct anymore.
-       * Hence the reason why reversing both arrays with stories _(svelte and compiled)_.
-       */
-      const svelteStories = [...svelteASTNodes.storyComponents].reverse();
-      const compiledStories = [...extractedCompiledStoriesNodes].reverse();
-
-      compiledStories.forEach((compiled, index) =>
-        updateCompiledStoryProps({
-          code: magicCompiledCode,
-          componentASTNodes: { svelte: svelteStories[index], compiled },
-          svelteASTNodes,
-          filename: id,
-          originalCode: rawCode,
-        })
-      );
-      await destructureMetaFromDefineMeta({
-        code: magicCompiledCode,
-        nodes: compiledNodes,
-        filename: id,
-      });
-      insertDefineMetaJSDocCommentAsDescription({
-        code: magicCompiledCode,
-        nodes: {
-          compiled: compiledNodes,
-          svelte: svelteASTNodes,
-        },
-        filename: id,
-      });
-      removeExportDefault({
-        code: magicCompiledCode,
-        nodes: compiledNodes,
-        filename: id,
-      });
-      await createAppendix({
+      await transformStoriesCode({
         code: magicCompiledCode,
         nodes: {
-          compiled: compiledNodes,
           svelte: svelteASTNodes,
+          compiled: compiledASTNodes,
         },
         filename: id,
+        originalCode: rawCode,
       });
 
       return {

diff --git a/src/compiler/transform/appendix/create-code-by-story-map.ts b/src/compiler/transform/appendix/create-code-by-story-map.ts
@@ -1,45 +1,44 @@
 import type { VariableDeclaration } from 'estree';
-import type { getStoriesIdentifiers } from '../../../parser/analyse/Story/attributes/identifiers.js';
+import type { getStoriesIdentifiers } from '../../../parser/analyse/story/svelte/attributes/identifiers.js';
 
 interface Params {
   storyIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
   filename: string;
 }
 
 export const createCodeByStoryMap = (params: Params): VariableDeclaration => {
-    const { storyIdentifiers } = params;
+  const { storyIdentifiers } = params;
 
-    return {
-      type: 'VariableDeclaration',
-      kind: 'const',
-      declarations: [
-        {
-          type: 'VariableDeclarator',
-          id: {
-            type: 'Identifier',
-            name: '__codeByStory',
-          },
-          init: {
-            type: 'ObjectExpression',
-            properties: storyIdentifiers.map((storyIdentifier) => ({
-                type: 'Property',
-                key: {
-                    type: 'Identifier',
-                    name: storyIdentifier.exportName
-                },
-                value: {
-                    type: 'Literal',
-                    // TODO: use actual value from somewhere
-                    value: '<MyComponent {...args} someProp={args.someArg} />'
-                },
-                kind: 'init',
-                method: false,
-                shorthand: false,
-                computed: false,
-            }))
-          }
+  return {
+    type: 'VariableDeclaration',
+    kind: 'const',
+    declarations: [
+      {
+        type: 'VariableDeclarator',
+        id: {
+          type: 'Identifier',
+          name: '__codeByStory',
         },
-      ],
-    };
-
+        init: {
+          type: 'ObjectExpression',
+          properties: storyIdentifiers.map((storyIdentifier) => ({
+            type: 'Property',
+            key: {
+              type: 'Identifier',
+              name: storyIdentifier.exportName,
+            },
+            value: {
+              type: 'Literal',
+              // TODO: use actual value from somewhere
+              value: '<MyComponent {...args} someProp={args.someArg} />',
+            },
+            kind: 'init',
+            method: false,
+            shorthand: false,
+            computed: false,
+          })),
+        },
+      },
+    ],
+  };
 };
diff --git a/src/compiler/transform/appendix/create-export-default.ts b/src/compiler/transform/appendix/create-export-default.ts
@@ -1,14 +1,14 @@
 import type { ExportDefaultDeclaration } from 'estree';
 
-import type { getMetaIdentifier } from '../../../parser/analyse/meta/identifier.js';
+import type { getMetaIdentifier } from '../../../parser/analyse/define-meta/meta-identifier.js';
 
 interface Params {
   metaIdentifier: ReturnType<typeof getMetaIdentifier>;
-  filename: string;
+  filename?: string;
 }
 
 export function createExportDefaultMeta(params: Params): ExportDefaultDeclaration {
-  const { metaIdentifier, filename } = params;
+  const { metaIdentifier } = params;
 
   return {
     type: 'ExportDefaultDeclaration',

diff --git a/src/compiler/transform/appendix/create-export-order.ts b/src/compiler/transform/appendix/create-export-order.ts
@@ -1,12 +1,12 @@
 import type { ExportNamedDeclaration } from 'estree';
 
-import type { getStoriesIdentifiers } from '../../../parser/analyse/Story/attributes/identifiers.js';
+import type { getStoriesIdentifiers } from '../../../parser/analyse/story/svelte/attributes/identifiers.js';
 
 const EXPORT_ORDER_VARIABLE = '__namedExportsOrder';
 
 interface Params {
   storyIdentifiers: ReturnType<typeof getStoriesIdentifiers>;
-  filename: string;
+  filename?: string;
 }
 
 export function createExportOrderVariable(params: Params): ExportNamedDeclaration {

diff --git a/src/compiler/transform/appendix/create-import.test.ts b/src/compiler/transform/appendix/create-import.test.ts
@@ -0,0 +1,15 @@
+import type { Program } from 'estree';
+import { toJs } from 'estree-util-to-js';
+import { describe, it } from 'vitest';
+
+import { creatRuntimeStoriesImport } from './create-import.js';
+
+describe(creatRuntimeStoriesImport.name, () => {
+  it('creates import correctly', ({ expect }) => {
+    const stringified = toJs(creatRuntimeStoriesImport() as unknown as Program).value;
+
+    expect(stringified).toMatchInlineSnapshot(
+      `"import {createRuntimeStories} from \"@storybook/addon-svelte-csf/internal/create-runtime-stories\";"`
+    );
+  });
+});
diff --git a/src/compiler/transform/appendix/create-import.ts b/src/compiler/transform/appendix/create-import.ts
@@ -2,9 +2,9 @@ import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' }
 import type { ImportDeclaration } from 'estree';
 
 /**
- * the export is defined in the `package.json` export map
+ * The export is defined in the `package.json` export map
  */
-export function createImport(): ImportDeclaration {
+export function creatRuntimeStoriesImport(): ImportDeclaration {
   const imported = {
     type: 'Identifier',
     // WARN: Tempting to use `createRuntimeStories.name` here.

diff --git a/src/compiler/transform/appendix/create-named-export-story.ts b/src/compiler/transform/appendix/create-named-export-story.ts
@@ -3,7 +3,7 @@ import type { createVariableFromRuntimeStoriesCall } from './create-variable-fro
 
 interface Params {
   exportName: string;
-  filename: string;
+  filename?: string;
   node: ReturnType<typeof createVariableFromRuntimeStoriesCall>;
 }
 

diff --git a/src/compiler/transform/appendix/create-variable-from-runtime-stories-call.ts b/src/compiler/transform/appendix/create-variable-from-runtime-stories-call.ts
@@ -1,12 +1,12 @@
 import type { FunctionDeclaration, Identifier, VariableDeclaration } from 'estree';
 
-import type { getMetaIdentifier } from '../../../parser/analyse/meta/identifier.js';
+import type { getMetaIdentifier } from '../../../parser/analyse/define-meta/meta-identifier.js';
 
 interface Params {
   storiesFunctionDeclaration: FunctionDeclaration;
   metaIdentifier: ReturnType<typeof getMetaIdentifier>;
   codeByStoryMapDeclaration: VariableDeclaration;
-  filename: string;
+  filename?: string;
 }
 
 export function createVariableFromRuntimeStoriesCall(params: Params): VariableDeclaration {
@@ -38,8 +38,8 @@ export function createVariableFromRuntimeStoriesCall(params: Params): VariableDe
             metaIdentifier,
             {
               type: 'Identifier',
-              name: (codeByStoryMapDeclaration.declarations[0].id as Identifier).name
-            }
+              name: (codeByStoryMapDeclaration.declarations[0].id as Identifier).name,
+            },
           ],
           optional: false,
         },