From 1e14da3e23c0f35b09e13cc2632a270b51259613 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 27 Jan 2023 00:16:31 +0800
Subject: [PATCH 1/2] Source-loader: Support CSF3 object exports

---
 code/__mocks__/inject-decorator.ts.csf3.txt    | 15 +++++++++++++++
 .../inject-decorator.csf.test.js               | 12 ++++++++++++
 .../abstract-syntax-tree/traverse-helpers.js   | 18 ++++++++++++------
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 code/__mocks__/inject-decorator.ts.csf3.txt

diff --git a/code/__mocks__/inject-decorator.ts.csf3.txt b/code/__mocks__/inject-decorator.ts.csf3.txt
new file mode 100644
index 00000000000..42c7d2de57b
--- /dev/null
+++ b/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: '😀 😎 👍 💯'
+  }
+};
diff --git a/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js b/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js
index 88143828a8e..b74c46354fd 100644
--- a/code/lib/source-loader/src/abstract-syntax-tree/inject-decorator.csf.test.js
+++ b/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', () => {
diff --git a/code/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js b/code/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
index 245825188d6..798e8a1ca7c 100644
--- a/code/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
+++ b/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 &&

From 8bae863af19e6080631cfe8d61dce0ac5ce6570b Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 27 Jan 2023 00:17:05 +0800
Subject: [PATCH 2/2] Storysource: Allow to co-exist with csf-plugin/addon-docs

---
 code/addons/storysource/src/preset.ts | 1 -
 code/lib/source-loader/src/build.js   | 8 +++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/code/addons/storysource/src/preset.ts b/code/addons/storysource/src/preset.ts
index 37778acf34a..073e5a427a4 100644
--- a/code/addons/storysource/src/preset.ts
+++ b/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'),
diff --git a/code/lib/source-loader/src/build.js b/code/lib/source-loader/src/build.js
index c2be5ade7dc..671720423ac 100644
--- a/code/lib/source-loader/src/build.js
+++ b/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()};
     `;