Merge pull request #20688 from storybookjs/shilman/20421-split-docs-s…

…torysource

Source-loader: Fix export default variable references

code/__mocks__/inject-decorator.ts.csf-meta-var.txt

@@ -0,0 +1,15 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@storybook/react/demo";
+
+const meta = {
+  title: "Button",
+  excludeStories: ["text"],
+  includeStories: /emoji.*/
+};
+
+export default meta;
+
+export const text = () => (
+  <Button onClick={action("clicked")}>Hello Button</Button>
+);

code/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.csf-meta-var.test.js.posix.snapshot

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inject-decorator positive - ts - csf includes storySource parameter in the default exported variable 1`] = `
+"import React from \\"react\\";
+import { action } from \\"@storybook/addon-actions\\";
+import { Button } from \\"@storybook/react/demo\\";
+
+const meta = {parameters: {\\"storySource\\":{\\"source\\":\\"import React from \\\\\\"react\\\\\\";\\\\nimport { action } from \\\\\\"@storybook/addon-actions\\\\\\";\\\\nimport { Button } from \\\\\\"@storybook/react/demo\\\\\\";\\\\n\\\\nconst meta = {\\\\n  title: \\\\\\"Button\\\\\\",\\\\n  excludeStories: [\\\\\\"text\\\\\\"],\\\\n  includeStories: /emoji.*/\\\\n};\\\\n\\\\nexport default meta;\\\\n\\\\nexport const text = () => (\\\\n  <Button onClick={action(\\\\\\"clicked\\\\\\")}>Hello Button</Button>\\\\n);\\\\n\\",\\"locationsMap\\":{\\"text\\":{\\"startLoc\\":{\\"col\\":20,\\"line\\":13},\\"endLoc\\":{\\"col\\":1,\\"line\\":15},\\"startBody\\":{\\"col\\":20,\\"line\\":13},\\"endBody\\":{\\"col\\":1,\\"line\\":15}}}},},
+  title: \\"Button\\",
+  excludeStories: [\\"text\\"],
+  includeStories: /emoji.*/
+};
+
+export default meta;
+
+export const text = () => (
+  <Button onClick={action(\\"clicked\\")}>Hello Button</Button>
+);
+"
+`;

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

@@ -25,6 +25,23 @@ describe('inject-decorator', () => {
         )
       );
     });
+
+    it('includes storySource parameter in the default exported variable', () => {
+      const mockFilePath = './__mocks__/inject-decorator.ts.csf-meta-var.txt';
+      const source = fs.readFileSync(mockFilePath, 'utf-8');
+      const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+        parser: 'typescript',
+      });
+
+      expect(result.source).toMatchSpecificSnapshot(
+        path.join(snapshotDir, `inject-decorator.csf-meta-var.test.js.${SNAPSHOT_OS}.snapshot`)
+      );
+      expect(result.source).toEqual(
+        expect.stringContaining(
+          'const meta = {parameters: {"storySource":{"source":"import React from'
+        )
+      );
+    });
   });
 
   describe('injectStoryParameters - ts - csf', () => {

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

@@ -208,10 +208,24 @@ export function popParametersObjectFromDefaultExport(source, ast) {
       patchNode(node);
 
       const isDefaultExport = node.type === 'ExportDefaultDeclaration';
-      const isObjectExpression = node.declaration?.type === 'ObjectExpression';
-      const isTsAsExpression = node.declaration?.type === 'TSAsExpression';
+      let decl = node.declaration;
+
+      // handle `const meta = { }; export default meta;`
+      if (isDefaultExport && decl?.type === 'Identifier') {
+        ast.body.forEach((n) => {
+          if (n.type === 'VariableDeclaration') {
+            n.declarations.forEach((d) => {
+              if (d.id.name === decl.name) {
+                decl = d.init;
+              }
+            });
+          }
+        });
+      }
 
-      const targetNode = isObjectExpression ? node.declaration : node.declaration?.expression;
+      const isObjectExpression = decl?.type === 'ObjectExpression';
+      const isTsAsExpression = decl?.type === 'TSAsExpression';
+      const targetNode = isObjectExpression ? decl : decl?.expression;
 
       if (
         isDefaultExport &&