Merge pull request #20799 from storybookjs/shilman/source-loader-fixes

Storysource: Support CSF3 object exports, co-exist with addon-docs

code/__mocks__/inject-decorator.ts.csf3.txt

@@ -0,0 +1,15 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@storybook/react/demo";
+
+export default {
+  title: "Button",
+};
+
+export const Basic = {};
+
+export const Emoji = {
+  args: {
+    children: '😀 😎 👍 💯'
+  }
+};

code/addons/storysource/src/preset.ts

@@ -16,7 +16,6 @@ function webpack(
         {
           test: [/\.stories\.(jsx?$|tsx?$)/],
           ...rule,
-          enforce: 'pre',
           use: [
             {
               loader: require.resolve('@storybook/source-loader'),

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

@@ -33,6 +33,18 @@ describe('inject-decorator', () => {
 
       expect(result.source).toEqual(expect.stringContaining('"source": "import React from'));
     });
+
+    it('includes storySource parameter in CSf3', async () => {
+      const mockFilePath = './__mocks__/inject-decorator.ts.csf3.txt';
+      const source = await readFile(mockFilePath, 'utf-8');
+      const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+        parser: 'typescript',
+      });
+
+      expect(getParser('typescript').parse(result.source)).toBeTruthy();
+
+      expect(result.source).toEqual(expect.stringContaining('"source": "import React from'));
+    });
   });
 
   describe('injectStoryParameters - ts - csf', () => {

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

@@ -28,9 +28,12 @@ function isFunctionVariable(declarations, includeExclude) {
     declarations[0].id &&
     declarations[0].id.name &&
     declarations[0].init &&
-    ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
-      declarations[0].init.type
-    ) &&
+    [
+      'CallExpression',
+      'ArrowFunctionExpression',
+      'FunctionExpression',
+      'ObjectExpression', // CSF3
+    ].includes(declarations[0].init.type) &&
     isExportStory(declarations[0].id.name, includeExclude)
   );
 }
@@ -171,9 +174,12 @@ export function findExportsMap(ast) {
         node.declaration.declarations[0].id &&
         node.declaration.declarations[0].id.name &&
         node.declaration.declarations[0].init &&
-        ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
-          node.declaration.declarations[0].init.type
-        );
+        [
+          'CallExpression',
+          'ArrowFunctionExpression',
+          'FunctionExpression',
+          'ObjectExpression', // CSF3
+        ].includes(node.declaration.declarations[0].init.type);
 
       const isFunctionDeclarationExport =
         isNamedExport &&

code/lib/source-loader/src/build.js

@@ -1,4 +1,6 @@
+import { readFile } from 'fs/promises';
 import { readStory } from './dependencies-lookup/readAsObject';
+import { sanitizeSource } from './abstract-syntax-tree/generate-helpers';
 
 export async function transform(inputSource) {
   const sourceObject = await readStory(this, inputSource);
@@ -13,11 +15,15 @@ export async function transform(inputSource) {
 
   const { source, sourceJson, addsMap } = sourceObject;
 
+  // We do this so the source we display doesn't get clobbered by csf-plugin
+  const rawSource = await readFile(this.resourcePath, 'utf-8');
+  const rawJson = sanitizeSource(rawSource);
+
   const preamble = `
     /* eslint-disable */
     // @ts-nocheck
     // @ts-expect-error (Converted from ts-ignore)
-    var __STORY__ = ${sourceJson};
+    var __STORY__ = ${rawJson};
     // @ts-expect-error (Converted from ts-ignore)
     var __LOCATIONS_MAP__ = ${JSON.stringify(addsMap, null, 2).trim()};
     `;