Merge pull request #245 from storybookjs/source-template-literal

fix: Support for legacy `source` prop when value is `TemplateLiteral`

Author: JReinhold

src/compiler/pre-transform/codemods/legacy-story.test.ts

@@ -280,9 +280,7 @@ describe(transformLegacyStory.name, () => {
     `);
   });
 
-  it("leaves existing Story parameters untouched", async ({
-    expect,
-  }) => {
+  it('leaves existing Story parameters untouched', async ({ expect }) => {
     const code = `
       <script context="module">
         import { Story } from "@storybook/addon-svelte-csf";
@@ -334,4 +332,39 @@ describe(transformLegacyStory.name, () => {
       </Story>"
     `);
   });
+
+  it('legacy `source` prop with template literal value is supported _(moved to parameters)_', async ({
+    expect,
+  }) => {
+    const code = `
+      <script context="module">
+        import { Story } from "@storybook/addon-svelte-csf";
+      </script>
+
+      <Story
+        name="Default"
+        source={\`
+          <Foo bar />
+        \`}
+      >
+        <h1>{"Test"}</h1>
+      </Story>
+    `;
+    const component = await parseAndExtractSvelteNode<SvelteAST.Component>(code, 'Component');
+
+    expect(
+      print(
+        transformLegacyStory({
+          component,
+          state: { componentIdentifierName: {} },
+        })
+      )
+    ).toMatchInlineSnapshot(`
+      "<Story name="Default" parameters={{
+      	docs: { source: { code: "\\n    <Foo bar />\\n  " } }
+      }}>
+      	<h1>{"Test"}</h1>
+      </Story>"
+    `);
+  });
 });

src/compiler/pre-transform/codemods/legacy-story.ts

@@ -222,8 +222,14 @@ function getSourceValue(attribute: SvelteAST.Attribute): string | undefined {
     return;
   }
 
-  if (!Array.isArray(value) && value.expression.type === 'Literal') {
-    return value.expression.value as string;
+  if (!Array.isArray(value)) {
+    if (value.expression.type === 'Literal' && typeof value.expression.value === 'string') {
+      return value.expression.value;
+    }
+
+    if (value.expression.type === 'TemplateLiteral') {
+      return value.expression.quasis.map((q) => q.value.cooked).join('');
+    }
   }
 
   if (value[0].type === 'Text') {

tests/stories/LegacyStory.stories.svelte

@@ -51,3 +51,13 @@
 <Story name="Square" source args={{ rounded: false }}>
   {'Test'}
 </Story>
+
+<Story
+  name="TemplateLiterals"
+  source={`
+    <LegacyStory rounded={false} />
+  `}
+  args={{ rounded: false }}
+>
+  {'Test'}
+</Story>