Merge branch 'next' into my-first-storybook-contribution

.circleci/config.yml

@@ -124,7 +124,7 @@ jobs:
             yarn docs:prettier:check
   build:
     executor:
-      class: large
+      class: xlarge
       name: sb_node_16_classic
     steps:
       - git-shallow-clone/checkout_advanced:

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -50,7 +50,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
               sortObjectKeys
               showNonenumerable={false}
               name={action.data.name}
-              data={action.data.args || action.data}
+              data={action.data.args ?? action.data}
             />
           </InspectorContainer>
         </Action>

code/addons/interactions/template/stories/unhandled-errors.stories.ts

@@ -11,6 +11,7 @@ export default {
   },
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
+    chromatic: { disable: true },
   },
 };
 

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/builders/builder-vite/src/assetsInclude.ts

@@ -0,0 +1,15 @@
+import type { InlineConfig as ViteInlineConfig } from 'vite';
+
+export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] {
+  const { assetsInclude } = config;
+
+  if (!assetsInclude) {
+    return newPath;
+  }
+
+  if (Array.isArray(assetsInclude)) {
+    return [...assetsInclude, ...newPath];
+  } else {
+    return [assetsInclude, ...newPath];
+  }
+}

code/builders/builder-vite/src/vite-server.ts

@@ -3,6 +3,7 @@ import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
 import { sanitizeEnvVars } from './envs';
+import { getAssetsInclude } from './assetsInclude';
 
 export async function createViteServer(options: Options, devServer: Server) {
   const { presets } = options;
@@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) {
   const config = {
     ...commonCfg,
     // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
-    assetsInclude: ['/sb-preview/**'],
+    assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
     // Set up dev server
     server: {
       middlewareMode: true,

code/lib/codemod/package.json

@@ -57,7 +57,7 @@
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",

code/lib/core-server/package.json

@@ -62,7 +62,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-mdx": "3.0.0",
     "@storybook/global": "^5.0.0",

code/lib/csf-tools/package.json

@@ -46,7 +46,7 @@
     "@babel/parser": "^7.23.0",
     "@babel/traverse": "^7.23.2",
     "@babel/types": "^7.23.0",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.5",

code/lib/manager-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",

code/lib/preview-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "workspace:*",
     "@types/qs": "^6.9.5",

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

@@ -2735,6 +2735,60 @@ describe('PreviewWeb', () => {
       });
     });
 
+    describe('if called twice simultaneously', () => {
+      it('does not get renders confused', async () => {
+        const [blockImportFnGate, openBlockImportFnGate] = createGate();
+        const [importFnCalledGate, openImportFnCalledGate] = createGate();
+        const newImportFn = vi.fn(async (path) => {
+          openImportFnCalledGate();
+          await blockImportFnGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: newImportFn });
+        await importFnCalledGate;
+        preview.onStoriesChanged({ importFn });
+
+        openBlockImportFnGate();
+        await waitForRender();
+
+        expect(preview.storyRenders.length).toEqual(1);
+      });
+
+      it('renders the second importFn', async () => {
+        const [importGate, openImportGate] = createGate();
+        const [importedGate, openImportedGate] = createGate();
+        const secondImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        const thirdImportFn = vi.fn(async (path) => {
+          openImportedGate();
+          await importGate;
+          return importFn(path);
+        });
+
+        document.location.search = '?id=component-one--a';
+        const preview = await createAndRenderPreview();
+        mockChannel.emit.mockClear();
+
+        preview.onStoriesChanged({ importFn: secondImportFn });
+        await importedGate;
+        preview.onStoriesChanged({ importFn: thirdImportFn });
+
+        openImportGate();
+        await waitForRender();
+
+        expect(thirdImportFn).toHaveBeenCalled();
+      });
+    });
+
     describe('when the current story changes', () => {
       const newComponentOneExports = merge({}, componentOneExports, {
         a: { args: { foo: 'edited' } },

code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx

@@ -352,12 +352,8 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
     try {
       await render.prepare();
     } catch (err) {
-      if (err !== PREPARE_ABORTED) {
-        // We are about to render an error so make sure the previous story is
-        // no longer rendered.
-        if (lastRender) await this.teardownRender(lastRender);
-        this.renderStoryLoadingException(storyId, err as Error);
-      }
+      if (lastRender) await this.teardownRender(lastRender);
+      if (err !== PREPARE_ABORTED) this.renderStoryLoadingException(storyId, err as Error);
       return;
     }
 

code/lib/source-loader/package.json

@@ -45,7 +45,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/types": "workspace:*",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",

code/lib/types/package.json

@@ -49,7 +49,7 @@
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.0.0",
     "typescript": "^5.3.2"

code/package.json

@@ -127,7 +127,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",

code/renderers/server/package.json

@@ -46,7 +46,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",

code/ui/blocks/package.json

@@ -48,7 +48,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",

code/ui/components/package.json

@@ -61,7 +61,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/client-logger": "workspace:*",
-    "@storybook/csf": "^0.1.4",
+    "@storybook/csf": "^0.1.5",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/theming": "workspace:*",