fix: source code extraction & update tests

storybookjs · Jul 21, 2024 · cdf0933 · cdf0933
1 parent b78d11d
commit cdf0933
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 54 deletions.
diff --git a/src/compiler/plugins.ts b/src/compiler/plugins.ts
@@ -21,7 +21,10 @@ import { extractCompiledASTNodes } from '#parser/extract/compiled/nodes';
 import { extractSvelteASTNodes } from '#parser/extract/svelte/nodes';
 
 export async function preTransformPlugin(): Promise<Plugin> {
-  const [{ createFilter }, { print }] = await Promise.all([import('vite'), import('svelte-ast-print')]);
+  const [{ createFilter }, { print }] = await Promise.all([
+    import('vite'),
+    import('svelte-ast-print'),
+  ]);
   const include = /\.stories\.svelte$/;
   const filter = createFilter(include);
 
@@ -31,7 +34,6 @@ export async function preTransformPlugin(): Promise<Plugin> {
     async transform(code, id) {
       if (!filter(id)) return undefined;
 
-
       const svelteAST = getSvelteAST({ code, filename: id });
       const transformedSvelteAST = await codemodLegacyNodes({
         ast: svelteAST,

diff --git a/src/compiler/pre-transform/codemods/component-meta-to-define-meta.test.ts b/src/compiler/pre-transform/codemods/component-meta-to-define-meta.test.ts
@@ -73,11 +73,7 @@ describe(transformComponentMetaToDefineMeta.name, () => {
     `;
     const component = await parseAndExtractSvelteNode<Component>(code, 'Component');
 
-    expect(
-      print(
-        transformComponentMetaToDefineMeta({ component })
-      )
-    ).toMatchInlineSnapshot(`
+    expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`
       "const { Story } = defineMeta({
       	component: WithParameters,
       	parameters: {
@@ -93,7 +89,9 @@ describe(transformComponentMetaToDefineMeta.name, () => {
     `);
   });
 
-  it('supports <Meta> with parameters being referenced to variable in the instance tag', async ({ expect }) => {
+  it('supports <Meta> with parameters being referenced to variable in the instance tag', async ({
+    expect,
+  }) => {
     const code = `
       <script>
         const parameters = { foo: 'bar' };
@@ -103,11 +101,7 @@ describe(transformComponentMetaToDefineMeta.name, () => {
     `;
     const component = await parseAndExtractSvelteNode<Component>(code, 'Component');
 
-    expect(
-      print(
-        transformComponentMetaToDefineMeta({ component })
-      )
-    ).toMatchInlineSnapshot(`
+    expect(print(transformComponentMetaToDefineMeta({ component }))).toMatchInlineSnapshot(`
       "const { Story } = defineMeta({
       	component: WithParameters,
       	parameters: { ...parameters, baz: 'yes' }

diff --git a/src/compiler/pre-transform/codemods/import-declaration.ts b/src/compiler/pre-transform/codemods/import-declaration.ts
@@ -35,7 +35,6 @@ export function transformImportDeclaration(params: Params): ImportDeclaration {
       newSpecifiers.push(specifier);
       if (specifier.imported.name === 'defineMeta') hasDefineMeta = true;
     }
-
   }
 
   if (!hasDefineMeta) {

diff --git a/src/compiler/pre-transform/codemods/legacy-story.test.ts b/src/compiler/pre-transform/codemods/legacy-story.test.ts
@@ -1,4 +1,3 @@
-import pkg from '@storybook/addon-svelte-csf/package.json' with { type: 'json' };
 import type { Component } from 'svelte/compiler';
 import { print } from 'svelte-ast-print';
 import { describe, it } from 'vitest';
@@ -11,7 +10,7 @@ describe(transformLegacyStory.name, () => {
   it("it moves 'autodocs' prop to 'tags' correctly", async ({ expect }) => {
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" autodocs />
@@ -26,7 +25,7 @@ describe(transformLegacyStory.name, () => {
   it("moving 'autodocs' prop doesn't break with existing 'tags' prop", async ({ expect }) => {
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" autodocs tags={["!dev"]} />
@@ -41,7 +40,7 @@ describe(transformLegacyStory.name, () => {
   it("'source' prop when is a shorthand gets removed", async ({ expect }) => {
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" source />
@@ -58,7 +57,7 @@ describe(transformLegacyStory.name, () => {
   }) => {
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" source="'<Button primary />'" />
@@ -74,43 +73,39 @@ describe(transformLegacyStory.name, () => {
     );
   });
 
-  it("'source' prop when is a text expression gets moved to existing 'parameters'", async ({
+  it("'source' prop when is a text expression gets moved to 'parameters' prop", async ({
     expect,
   }) => {
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
-      <Story
-        name="Default"
-        source="'<Button primary />'"
-        parameters={{
-          controls: { disable: true },
-          interactions: { disable: true },
-        }}
-      />
+      <Story name="With source as text" source="<LegacyStory>Hi</LegacyStory>">
+        <LegacyStory>{'Hi'}</LegacyStory>
+      </Story>
     `;
     const node = await parseAndExtractSvelteNode<Component>(code, 'Component');
 
     expect(print(transformLegacyStory({ node }))).toMatchInlineSnapshot(
       `
-			"<Story name="Default" parameters={{
-				controls: { disable: true },
-				interactions: { disable: true },
-				docs: { source: { code: "'<Button primary />'" } }
-			}} />"
-		`
+      "<Story name="With source as text" parameters={{
+      	docs: {
+      		source: { code: "<LegacyStory>Hi</LegacyStory>" }
+      	}
+      }}>
+      	<LegacyStory>{'Hi'}</LegacyStory>
+      </Story>"
+    `
     );
   });
 
-  it("'source' prop when is a text expression doesn't override existing 'parameters.docs.source.code'", async ({
+  it("'source' prop when is a text expression gets moved to existing 'parameters'", async ({
     expect,
   }) => {
-    // TODO: Check if warning was emitted?
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story
@@ -119,9 +114,6 @@ describe(transformLegacyStory.name, () => {
         parameters={{
           controls: { disable: true },
           interactions: { disable: true },
-          docs: {
-            source: { code: '<Button variant="outlined" />' }
-          }
         }}
       />
     `;
@@ -132,9 +124,7 @@ describe(transformLegacyStory.name, () => {
 			"<Story name="Default" parameters={{
 				controls: { disable: true },
 				interactions: { disable: true },
-				docs: {
-					source: { code: '<Button variant="outlined" />' }
-				}
+				docs: { source: { code: "'<Button primary />'" } }
 			}} />"
 		`
     );
@@ -146,7 +136,7 @@ describe(transformLegacyStory.name, () => {
     // TODO: Check if warning was emitted?
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" template="someTemplate" />
@@ -164,7 +154,7 @@ describe(transformLegacyStory.name, () => {
     // TODO: Check if warning was emitted?
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" let:args>
@@ -188,7 +178,7 @@ describe(transformLegacyStory.name, () => {
     // TODO: Check if warning was emitted?
     const code = `
       <script context="module">
-        import { Story } from "${pkg.name}";
+        import { Story } from "@storybook/addon-svelte-csf";
       </script>
 
       <Story name="Default" let:context>

diff --git a/src/compiler/pre-transform/codemods/legacy-story.ts b/src/compiler/pre-transform/codemods/legacy-story.ts
@@ -229,12 +229,11 @@ function templateToChildren(attribute: Attribute, filename?: string): Attribute
     value: [
       createASTExpressionTag({
         type: 'Identifier',
-        name:
-          camelCase(
-            value[0].type === 'Text'
-              ? value[0].data
-              : ((value[0].expression as Literal).value as string)
-          ),
+        name: camelCase(
+          value[0].type === 'Text'
+            ? value[0].data
+            : ((value[0].expression as Literal).value as string)
+        ),
       }),
     ],
   };

diff --git a/tests/stories/LegacyStory.stories.svelte b/tests/stories/LegacyStory.stories.svelte
@@ -37,6 +37,6 @@
 
 <Story name="With source as shorthand" source />
 
-<Story name="With source as text" source="<LegacyStory>{'Hi'}</LegacyStory>">
+<Story name="With source as text" source="<LegacyStory>Hi</LegacyStory>">
   <LegacyStory>{'Hi'}</LegacyStory>
 </Story>
-Original file line number
+Diff line change
@@ Expand Up @@
           newSpecifiers.push(specifier);
           if (specifier.imported.name === 'defineMeta') hasDefineMeta = true;
         }
       }
       if (!hasDefineMeta) {
@@ Expand Down @@