Source-loader: Fix CSF typescript parser (#8440)

Source-loader: Fix CSF typescript parser

Co-authored-by: Michael Shilman <michael@lab80.co>

__mocks__/inject-decorator.ts.csf.txt

@@ -0,0 +1,19 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@storybook/react/demo";
+
+export default {
+  title: "Button"
+};
+
+export const text = () => (
+  <Button onClick={action("clicked")}>Hello Button</Button>
+);
+
+export const emoji = () => (
+  <Button onClick={action("clicked")}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);

lib/source-loader/src/server/abstract-syntax-tree/__snapshots__/inject-decorator.csf.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inject-decorator positive - ts - csf includes storySource parameter in the default exported object 1`] = `
+"var addSourceDecorator = require(\\"@storybook/source-loader/preview\\").addSource;
+import React from \\"react\\";
+import { action } from \\"@storybook/addon-actions\\";
+import { Button } from \\"@storybook/react/demo\\";
+
+export default {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nexport default {\\\\n  title: \\\\\\"Button\\\\\\"\\\\n};\\\\n\\\\nexport const text = () => (\\\\n  <Button onClick={action(\\\\\\"clicked\\\\\\")}>Hello Button</Button>\\\\n);\\\\n\\\\nexport const emoji = () => (\\\\n  <Button onClick={action(\\\\\\"clicked\\\\\\")}>\\\\n    <span role=\\\\\\"img\\\\\\" aria-label=\\\\\\"so cool\\\\\\">\\\\n      😀 😎 👍 💯\\\\n    </span>\\\\n  </Button>\\\\n);\\\\n\\",\\"locationsMap\\":{}},},
+  title: \\"Button\\"
+};
+
+export const text = addSourceDecorator(() => (
+  <Button onClick={action(\\"clicked\\")}>Hello Button</Button>
+), {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});;
+
+export const emoji = addSourceDecorator(() => (
+  <Button onClick={action(\\"clicked\\")}>
+    <span role=\\"img\\" aria-label=\\"so cool\\">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+), {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});
+"
+`;

lib/source-loader/src/server/abstract-syntax-tree/generate-helpers.js

@@ -162,10 +162,11 @@ export function generateSourcesInExportedParameters(source, ast, additionalParam
     const newParameters = `${propertyDeclaration}${additionalParametersAsJson},${parametersSliceOfCode.substring(
       1
     )}${comma}`;
-    const result =
+    const additionalComma = comma === ',' ? '' : ',';
-      splicedSource.substring(0, indexWhereToAppend) +
+    const result = `${splicedSource.substring(
-      newParameters +
+      0,
-      splicedSource.substring(indexWhereToAppend);
+      indexWhereToAppend
+    )}${newParameters}${additionalComma}${splicedSource.substring(indexWhereToAppend)}`;
     return result;
   }
   return source;

lib/source-loader/src/server/abstract-syntax-tree/inject-decorator.csf.test.js

@@ -0,0 +1,22 @@
+import fs from 'fs';
+import path from 'path';
+import injectDecorator from './inject-decorator';
+
+describe('inject-decorator', () => {
+  describe('positive - ts - csf', () => {
+    const mockFilePath = './__mocks__/inject-decorator.ts.csf.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
+
+    it('includes storySource parameter in the default exported object', () => {
+      expect(result.source).toMatchSnapshot();
+      expect(result.source).toEqual(
+        expect.stringContaining(
+          'export default {parameters: {"storySource":{"source":"import React from'
+        )
+      );
+    });
+  });
+});

lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js

@@ -169,6 +169,11 @@ export function popParametersObjectFromDefaultExport(source, ast) {
         );
 
         foundParametersProperty = !!parametersProperty;
+        if (foundParametersProperty) {
+          patchNode(parametersProperty.value);
+        } else {
+          patchNode(node.declaration);
+        }
 
         splicedSource = parametersProperty
           ? source.substring(0, parametersProperty.value.start) +