Merge branch 'next' into docs_test_runner_timeout_option

code/builders/builder-vite/src/plugins/external-globals-plugin.ts

@@ -88,7 +88,6 @@ export async function externalGlobalsPlugin(externals: Record<string, string>) {
         code: src.toString(),
         map: src.generateMap({
           source: id,
-          includeContent: true,
           hires: true,
         }),
       };

code/builders/builder-webpack5/src/loaders/export-order-loader.ts

@@ -49,9 +49,7 @@ export default async function loader(
       );
     }
 
-    const generatedMap = magicString.generateMap({ hires: true });
-
-    return callback(null, magicString.toString(), generatedMap, meta);
+    return callback(null, magicString.toString(), map, meta);
   } catch (err) {
     return callback(null, source, map, meta);
   }

code/e2e-tests/composition.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+
+// This is a slow test, and (presumably) framework independent, so only run it on one sandbox
+const skipTest = process.env.STORYBOOK_TEMPLATE_NAME !== 'react-vite/default-ts';
+
+test.describe('composition', () => {
+  test.beforeEach(async ({ page }) => {
+    if (skipTest) return;
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('should correctly filter composed stories', async ({ page }) => {
+    if (skipTest) return;
+
+    // Expect that composed Storybooks are visible
+    await expect(await page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(await page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
+    ).toBeVisible();
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
+    ).toBeVisible();
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
+    ).toBeVisible();
+  });
+});

code/frameworks/nextjs/src/swc/loader.ts

@@ -31,7 +31,6 @@ export const configureSWCLoader = async (
     test: /\.((c|m)?(j|t)sx?)$/,
     include: [getProjectRoot()],
     exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
-    enforce: 'post',
     use: {
       // we use our own patch because we need to remove tracing from the original code
       // which is not possible otherwise

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

@@ -100,7 +100,10 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
   const programmaticOptions = {
     ...swcOptions,
     filename,
-    inputSourceMap: inputSourceMap ? JSON.stringify(inputSourceMap) : undefined,
+    inputSourceMap:
+      inputSourceMap && typeof inputSourceMap === 'object'
+        ? JSON.stringify(inputSourceMap)
+        : undefined,
 
     // Set the default sourcemap behavior based on Webpack's mapping flag,
     sourceMaps: this.sourceMap,
@@ -166,20 +169,11 @@ export function pitch(this: any) {
   }, callback);
 }
 
-function sanitizeSourceMap(rawSourceMap: any): any {
-  const { sourcesContent, ...sourceMap } = rawSourceMap ?? {};
-
-  // JSON parse/stringify trick required for swc to accept the SourceMap
-  return JSON.parse(JSON.stringify(sourceMap));
-}
-
 export default function swcLoader(this: any, inputSource: string, inputSourceMap: any) {
   const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader');
   const callback = this.async();
   loaderSpan
-    .traceAsyncFn(() =>
-      loaderTransform.call(this, loaderSpan, inputSource, sanitizeSourceMap(inputSourceMap))
-    )
+    .traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap))
     .then(
       ([transformedSource, outputSourceMap]: any) => {
         callback(null, transformedSource, outputSourceMap || inputSourceMap);

code/frameworks/react-vite/src/plugins/react-docgen.ts

@@ -80,7 +80,7 @@ export async function reactDocgen({
 
         return {
           code: s.toString(),
-          map: s.generateMap(),
+          map: s.generateMap({ hires: true, source: id }),
         };
       } catch (e: any) {
         // Ignore the error when react-docgen cannot find a react component

code/lib/core-server/src/utils/StoryIndexGenerator.test.ts

@@ -88,7 +88,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -119,7 +119,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -150,7 +150,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -192,7 +192,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -294,7 +294,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -440,7 +440,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -593,7 +593,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -656,7 +656,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -714,7 +714,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -771,7 +771,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -789,7 +789,7 @@ describe('StoryIndexGenerator', () => {
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
           {
             "entries": {},
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -832,7 +832,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -933,7 +933,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1066,7 +1066,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1127,7 +1127,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1176,7 +1176,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -592,7 +592,7 @@ export class StoryIndexGenerator {
       );
 
       this.lastIndex = {
-        v: 4,
+        v: 5,
         entries: sorted,
       };
 

code/lib/core-server/src/utils/stories-json.test.ts

@@ -263,7 +263,7 @@ describe('useStoriesJson', () => {
               "type": "story",
             },
           },
-          "v": 4,
+          "v": 5,
         }
       `);
     }, 20_000);

code/lib/core-server/src/utils/summarizeIndex.test.ts

@@ -38,7 +38,7 @@ describe('summarizeIndex', () => {
   it('example stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -146,14 +146,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('onboarding stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -204,14 +204,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('user stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-errors--story-contains-unrenderable': {
             id: 'stories-renderers-react-errors--story-contains-unrenderable',
@@ -260,14 +260,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 4,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('pages', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-page--logged-out': {
             id: 'example-page--logged-out',
@@ -317,14 +317,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 1,
         "storiesMdxCount": 0,
         "storyCount": 1,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('storiesMdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-react-mdx--docs': {
             id: 'stories-renderers-react-react-mdx--docs',
@@ -374,14 +374,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 1,
         "storyCount": 3,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('autodocs', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-button--docs': {
             id: 'example-button--docs',
@@ -432,14 +432,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('mdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -483,7 +483,7 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });