Merge pull request #28363 from storybookjs/kasper/swc-bugfixes

Build: Set the env.bugfixes option in SWC to make sure destructuring is never transpiled

code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts

@@ -114,6 +114,10 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
     // modules.
     sourceFileName: filename,
   };
+  // Transpiles the broken syntax to the closest non-broken modern syntax.
+  // E.g. it won't transpile parameter destructuring in Safari
+  // which would break how we detect if the mount context property is used in the play function.
+  programmaticOptions.env.bugfixes = true;
 
   if (!programmaticOptions.inputSourceMap) {
     delete programmaticOptions.inputSourceMap;

code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts

@@ -942,7 +942,7 @@ describe('PreviewWeb', () => {
         openBlockLoadersGate({ l: 8 });
         await waitForRender();
 
-        // Assert - renderToCanvas to be called the first time with initial args
+        // Assert - renderToCanvas to be called the first time with initial args and returned `loaded` value.
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledOnce();
         expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
           expect.objectContaining({

code/lib/test/template/stories/before-each.stories.ts

@@ -14,9 +14,7 @@ const meta = {
 export default meta;
 
 export const BeforeEachOrder = {
-  parameters: {
-    chromatic: { disable: true },
-  },
+  parameters: { chromatic: { disable: true } },
   beforeEach() {
     console.log('3 - [from story beforeEach]');
   },

code/lib/test/template/stories/destructuring-not-transpiled.stories.ts

@@ -0,0 +1,21 @@
+import { expect } from '@storybook/test';
+import { global as globalThis } from '@storybook/global';
+
+export default {
+  component: globalThis.Components.Button,
+  args: { label: 'Button' },
+};
+
+// We must not transpile destructuring, to make sure that we can analyze the context properties that are used in play.
+// See: https://github.com/storybookjs/storybook/discussions/27389
+export const DestructureNotTranspiled = {
+  parameters: { chromatic: { disable: true } },
+  async play() {
+    async function fn({ destructured }: { destructured: unknown }) {
+      console.log(destructured);
+    }
+    const match = fn.toString().match(/[^(]*\(([^)]*)/);
+    const params = match?.[0];
+    await expect(params).toContain('destructured');
+  },
+};

scripts/tasks/sandbox-parts.ts

@@ -205,7 +205,7 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
           loader: '${esbuildLoaderPath}',
           options: {
             loader: 'tsx',
-            target: 'es2015',
+            target: 'es2022',
           },
         },
         // Handle MDX files per the addon-docs presets (ish)