Release: Prerelease alpha 10.3.0-alpha.1

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 10.2.1
+
+- Builder-Webpack5: Fix @vitest/mocker resolution issue - [#33315](https://github.com/storybookjs/storybook/pull/33315), thanks @valentinpalkovic!
+- CLI: Add init telemetry for CLI integrations - [#33603](https://github.com/storybookjs/storybook/pull/33603), thanks @shilman!
+
 ## 10.2.0
 
 > Improved UI and story authoring ergonomics

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 10.3.0-alpha.1
+
+- Builder-Webpack5: Fix @vitest/mocker resolution issue - [#33315](https://github.com/storybookjs/storybook/pull/33315), thanks @valentinpalkovic!
+- CLI: Add init telemetry for CLI integrations - [#33603](https://github.com/storybookjs/storybook/pull/33603), thanks @shilman!
+- Core: Fix `previewHref` when current path does not end with a slash - [#33647](https://github.com/storybookjs/storybook/pull/33647), thanks @ghengeveld!
+- Core: Fix rendering of View Transitions in Firefox - [#33651](https://github.com/storybookjs/storybook/pull/33651), thanks @ghengeveld!
+- Manifest: Add docs entries to debugger - [#33607](https://github.com/storybookjs/storybook/pull/33607), thanks @JReinhold!
+- Theming: Export interface declaration for `ThemesGlobals` - [#33343](https://github.com/storybookjs/storybook/pull/33343), thanks @icopp!
+- UI: Avoid large animation for reduced motion users - [#33530](https://github.com/storybookjs/storybook/pull/33530), thanks @Sidnioulz!
+
 ## 10.3.0-alpha.0
 
 - CLI: Fix onboarding not opening - [#33609](https://github.com/storybookjs/storybook/pull/33609), thanks @ndelangen!

code/addons/themes/src/index.ts

@@ -3,7 +3,7 @@ import { definePreviewAddon } from 'storybook/internal/csf';
 import * as addonAnnotations from './preview';
 import type { ThemesTypes } from './types';
 
-export type { ThemesTypes } from './types';
+export type { ThemesGlobals, ThemesTypes } from './types';
 
 export default () => definePreviewAddon<ThemesTypes>(addonAnnotations);
 

code/builders/builder-vite/package.json

@@ -47,7 +47,6 @@
   ],
   "dependencies": {
     "@storybook/csf-plugin": "workspace:*",
-    "@vitest/mocker": "3.2.4",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/builders/builder-vite/src/plugins/vite-inject-mocker/plugin.ts

@@ -1,63 +1,35 @@
-import { readFileSync } from 'node:fs';
-import { join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { resolvePackageDir } from 'storybook/internal/common';
+import type { ResolvedConfig } from 'vite';
 
-import { exactRegex } from '@rolldown/pluginutils';
-import { dedent } from 'ts-dedent';
-import type { ResolvedConfig, ViteDevServer } from 'vite';
-
-const entryPath = '/vite-inject-mocker-entry.js';
-
-const entryCode = dedent`
-    <script type="module" src=".${entryPath}"></script>
-  `;
-
-let server: ViteDevServer;
+const ENTRY_PATH = '/vite-inject-mocker-entry.js';
 
 export const viteInjectMockerRuntime = (options: {
   previewConfigPath?: string | null;
 }): import('vite').Plugin => {
+  // Get the actual file path so Vite can resolve relative imports
+  const mockerRuntimePath = fileURLToPath(
+    import.meta.resolve('storybook/internal/mocking-utils/mocker-runtime')
+  );
+
   let viteConfig: ResolvedConfig;
 
   return {
     name: 'vite:storybook-inject-mocker-runtime',
+    enforce: 'pre',
     buildStart() {
       if (viteConfig.command === 'build') {
         this.emitFile({
           type: 'chunk',
-          id: join(
-            resolvePackageDir('storybook'),
-            'assets',
-            'server',
-            'mocker-runtime.template.js'
-          ),
-          fileName: entryPath.slice(1),
+          id: mockerRuntimePath,
+          fileName: ENTRY_PATH.slice(1),
         });
       }
     },
-    config() {
-      return {
-        optimizeDeps: {
-          include: ['@vitest/mocker', '@vitest/mocker/browser'],
-        },
-        resolve: {
-          // Aliasing necessary for package managers like pnpm, since resolving modules from a virtual module
-          // leads to errors, if the imported module is not a dependency of the project.
-          // By resolving the module to the real path, we can avoid this issue.
-          alias: {
-            '@vitest/mocker/browser': fileURLToPath(import.meta.resolve('@vitest/mocker/browser')),
-            '@vitest/mocker': fileURLToPath(import.meta.resolve('@vitest/mocker')),
-          },
-        },
-      };
-    },
     configResolved(config) {
       viteConfig = config;
     },
-    configureServer(server_) {
-      server = server_;
+    configureServer(server) {
       if (options.previewConfigPath) {
         server.watcher.on('change', (file) => {
           if (file === options.previewConfigPath) {
@@ -69,31 +41,17 @@ export const viteInjectMockerRuntime = (options: {
         });
       }
     },
-    resolveId: {
-      filter: {
-        id: [exactRegex(entryPath)],
-      },
-      handler(id) {
-        if (exactRegex(id).test(entryPath)) {
-          return id;
-        }
-        return null;
-      },
-    },
-    async load(id) {
-      if (exactRegex(id).test(entryPath)) {
-        return readFileSync(
-          join(resolvePackageDir('storybook'), 'assets', 'server', 'mocker-runtime.template.js'),
-          'utf-8'
-        );
+    resolveId(source) {
+      if (source === ENTRY_PATH) {
+        return mockerRuntimePath;
       }
-
-      return null;
+      return undefined;
     },
     transformIndexHtml(html: string) {
       const headTag = html.match(/<head[^>]*>/);
 
       if (headTag) {
+        const entryCode = `<script type="module" src="${ENTRY_PATH}"></script>`;
         const headTagIndex = html.indexOf(headTag[0]);
         const newHtml =
           html.slice(0, headTagIndex + headTag[0].length) +

code/builders/builder-vite/src/plugins/vite-mock/plugin.ts

@@ -3,14 +3,14 @@ import { readFileSync } from 'node:fs';
 import {
   babelParser,
   extractMockCalls,
+  findMockRedirect,
   getAutomockCode,
   getRealPath,
   rewriteSbMockImportCalls,
 } from 'storybook/internal/mocking-utils';
 import { logger } from 'storybook/internal/node-logger';
 import type { CoreConfig } from 'storybook/internal/types';
 
-import { findMockRedirect } from '@vitest/mocker/redirect';
 import { normalize } from 'pathe';
 import type { Plugin, ResolvedConfig } from 'vite';
 

code/builders/builder-webpack5/package.json

@@ -52,7 +52,6 @@
   ],
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
-    "@vitest/mocker": "3.2.4",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "cjs-module-lexer": "^1.2.3",
     "css-loader": "^7.1.2",

code/builders/builder-webpack5/src/plugins/webpack-mock-plugin.ts

@@ -4,12 +4,12 @@ import { fileURLToPath } from 'node:url';
 import {
   babelParser,
   extractMockCalls,
+  findMockRedirect,
   getIsExternal,
   resolveExternalModule,
   resolveWithExtensions,
 } from 'storybook/internal/mocking-utils';
 
-import { findMockRedirect } from '@vitest/mocker/redirect';
 import type { Compiler } from 'webpack';
 
 // --- Type Definitions ---

code/core/build-config.ts

@@ -190,6 +190,16 @@ const config: BuildEntries = {
         entryPoint: './src/manager/globals-runtime.ts',
         dts: false,
       },
+      /**
+       * It is required to be a runtime entry point, because it is used to inject the mocker runtime
+       * into the preview iframe in builder-vite and builder-webpack5. To guarantee that the mocker
+       * runtime is transpiled correctly, code splitting needs to be disabled for this entry point.
+       */
+      {
+        exportEntries: ['./internal/mocking-utils/mocker-runtime'],
+        entryPoint: './src/mocking-utils/mocker-runtime.js',
+        dts: false,
+      },
     ],
     globalizedRuntime: [
       {

code/core/package.json

@@ -126,6 +126,7 @@
       "types": "./dist/mocking-utils/index.d.ts",
       "default": "./dist/mocking-utils/index.js"
     },
+    "./internal/mocking-utils/mocker-runtime": "./dist/mocking-utils/mocker-runtime.js",
     "./internal/node-logger": {
       "types": "./dist/node-logger/index.d.ts",
       "default": "./dist/node-logger/index.js"
@@ -255,6 +256,7 @@
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/semver": "^7.7.1",
     "@types/ws": "^8",
+    "@vitest/mocker": "3.2.4",
     "@vitest/utils": "^3.2.4",
     "@yarnpkg/fslib": "2.10.3",
     "@yarnpkg/libzip": "2.3.0",

code/core/src/core-server/utils/manifests/manifests.test.ts

@@ -99,6 +99,30 @@ describe('manifests', () => {
       expect(files['/output/manifests/components.html']).toContain('<!doctype html>');
     });
 
+    it('should write HTML file when docs manifest exists', async () => {
+      mockManifests = {
+        docs: {
+          v: 0,
+          docs: {
+            'intro--docs': {
+              id: 'intro--docs',
+              name: 'docs',
+              path: './Intro.mdx',
+              title: 'Intro',
+              content: '# Introduction',
+            },
+          },
+        },
+      };
+
+      await writeManifests('/output', mockPresets);
+
+      const files = vol.toJSON();
+      expect(files['/output/manifests/components.html']).toBeDefined();
+      expect(files['/output/manifests/components.html']).toContain('<!doctype html>');
+      expect(files['/output/manifests/components.html']).toContain('Unattached Docs');
+    });
+
     it('should handle errors when presets.apply fails', async () => {
       const error = new Error('Preset application failed');
       vi.mocked(mockPresets.apply).mockRejectedValue(error);
@@ -360,11 +384,11 @@ describe('manifests', () => {
         expect(res.end).toHaveBeenCalled();
         const html = (res.end as any).mock.calls[0][0];
         expect(html).toContain('<!doctype html>');
-        expect(html).toContain('Components Manifest');
+        expect(html).toContain('Manifest Debugger');
         expect(res.statusCode).toBeUndefined();
       });
 
-      it('should return 404 message when components manifest does not exist', async () => {
+      it('should return 404 message when no components or docs manifest exist', async () => {
         mockManifests = {
           other: { data: 'value' },
         };
@@ -383,7 +407,9 @@ describe('manifests', () => {
 
         expect(res.statusCode).toBe(404);
         expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'text/html; charset=utf-8');
-        expect(res.end).toHaveBeenCalledWith('<pre>No components manifest configured.</pre>');
+        expect(res.end).toHaveBeenCalledWith(
+          '<pre>No components or docs manifest configured.</pre>'
+        );
       });
 
       it('should return 404 when manifests is empty', async () => {
@@ -402,7 +428,9 @@ describe('manifests', () => {
         await handler(req, res);
 
         expect(res.statusCode).toBe(404);
-        expect(res.end).toHaveBeenCalledWith('<pre>No components manifest configured.</pre>');
+        expect(res.end).toHaveBeenCalledWith(
+          '<pre>No components or docs manifest configured.</pre>'
+        );
       });
 
       it('should handle errors with 500 status and return error HTML', async () => {

code/core/src/core-server/utils/manifests/manifests.ts

@@ -8,7 +8,7 @@ import type { Polka } from 'polka';
 import invariant from 'tiny-invariant';
 
 import { Tag } from '../../../shared/constants/tags';
-import { renderComponentsManifest } from './render-components-manifest';
+import { type DocsManifest, renderComponentsManifest } from './render-components-manifest';
 
 async function getManifests(presets: Presets) {
   const generator = await presets.apply('storyIndexGenerator');
@@ -37,10 +37,13 @@ export async function writeManifests(outputDir: string, presets: Presets) {
         writeFile(join(outputDir, 'manifests', `${name}.json`), JSON.stringify(content))
       )
     );
-    if ('components' in manifests) {
+    if ('components' in manifests || 'docs' in manifests) {
       await writeFile(
         join(outputDir, 'manifests', 'components.html'),
-        renderComponentsManifest(manifests.components as ComponentsManifest)
+        renderComponentsManifest(
+          manifests.components as ComponentsManifest | undefined,
+          manifests.docs as DocsManifest | undefined
+        )
       );
     }
   } catch (e) {
@@ -72,17 +75,18 @@ export function registerManifests({ app, presets }: { app: Polka; presets: Prese
   app.get('/manifests/components.html', async (req, res) => {
     try {
       const manifests = await getManifests(presets);
-      const manifest = manifests.components;
+      const componentsManifest = manifests.components;
+      const docsManifest = manifests.docs as DocsManifest | undefined;
 
-      if (!manifest) {
+      if (!componentsManifest && !docsManifest) {
         res.statusCode = 404;
         res.setHeader('Content-Type', 'text/html; charset=utf-8');
-        res.end(`<pre>No components manifest configured.</pre>`);
+        res.end(`<pre>No components or docs manifest configured.</pre>`);
         return;
       }
 
       res.setHeader('Content-Type', 'text/html; charset=utf-8');
-      res.end(renderComponentsManifest(manifest));
+      res.end(renderComponentsManifest(componentsManifest, docsManifest));
     } catch (e) {
       res.statusCode = 500;
       res.setHeader('Content-Type', 'text/html; charset=utf-8');