Merge pull request #29292 from storybookjs/version-non-patch-from-8.4…

….0-alpha.4

Release: Prerelease 8.4.0-alpha.5

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.3.5
+
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
 ## 8.3.4
 
 - Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!

CHANGELOG.prerelease.md

@@ -1,3 +1,8 @@
+## 8.4.0-alpha.5
+
+- Core: Migrate from `express` to `polka` - [#29230](https://github.com/storybookjs/storybook/pull/29230), thanks @43081j!
+- Core: Remove dependence on `file-system-cache` - [#29256](https://github.com/storybookjs/storybook/pull/29256), thanks @ndelangen!
+
 ## 8.4.0-alpha.4
 
 - Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!

code/__mocks__/fs.ts

@@ -19,6 +19,7 @@ export const realpathSync = vi.fn();
 export const readdir = vi.fn();
 export const readdirSync = vi.fn();
 export const readlinkSync = vi.fn();
+export const mkdirSync = vi.fn();
 
 export default {
   __setMockFiles,
@@ -29,4 +30,5 @@ export default {
   readdir,
   readdirSync,
   readlinkSync,
+  mkdirSync,
 };

code/builders/builder-vite/package.json

@@ -47,15 +47,15 @@
     "@types/find-cache-dir": "^3.2.1",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^1.5.0",
-    "express": "^4.19.2",
     "find-cache-dir": "^3.0.0",
     "magic-string": "^0.30.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.21",
     "@types/node": "^22.0.0",
     "glob": "^10.0.0",
+    "polka": "^1.0.0-next.28",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"

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

@@ -3,10 +3,9 @@ import { cp, readFile } from 'node:fs/promises';
 import { join, parse } from 'node:path';
 
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
-import type { Options } from 'storybook/internal/types';
+import type { Middleware, Options } from 'storybook/internal/types';
 
-import type { RequestHandler } from 'express';
-import express from 'express';
+import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
 import type { ViteDevServer } from 'vite';
 
@@ -20,16 +19,18 @@ export { hasVitePlugins } from './utils/has-vite-plugins';
 
 export * from './types';
 
-function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
+function iframeMiddleware(options: Options, server: ViteDevServer): Middleware {
   return async (req, res, next) => {
-    if (!req.url.match(/^\/iframe\.html($|\?)/)) {
+    if (!req.url || !req.url.match(/^\/iframe\.html($|\?)/)) {
       next();
       return;
     }
+    // the base isn't used for anything, but it's required by the URL constructor
+    const url = new URL(req.url, 'http://localhost:6006');
 
     // We need to handle `html-proxy` params for style tag HMR https://github.com/storybookjs/builder-vite/issues/266#issuecomment-1055677865
     // e.g. /iframe.html?html-proxy&index=0.css
-    if (req.query['html-proxy'] !== undefined) {
+    if (url.searchParams.has('html-proxy')) {
       next();
       return;
     }
@@ -40,7 +41,9 @@ function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandl
     const generated = await transformIframeHtml(indexHtml, options);
     const transformed = await server.transformIndexHtml('/iframe.html', generated);
     res.setHeader('Content-Type', 'text/html');
-    res.status(200).send(transformed);
+    res.statusCode = 200;
+    res.write(transformed);
+    res.end();
   };
 }
 
@@ -59,10 +62,14 @@ export const start: ViteBuilder['start'] = async ({
   server = await createViteServer(options as Options, devServer);
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
-
-  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
-
+  router.use(
+    '/sb-preview',
+    sirv(previewResolvedDir, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
   router.use(iframeMiddleware(options as Options, server));
   router.use(server.middlewares);
 
@@ -81,10 +88,8 @@ export const build: ViteBuilder['build'] = async ({ options }) => {
   const viteCompilation = viteBuild(options as Options);
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-
-  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
+  const previewFiles = cp(previewResolvedDir, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {

code/builders/builder-vite/src/list-stories.ts

@@ -3,6 +3,7 @@ import { isAbsolute, join } from 'node:path';
 import { commonGlobOptions, normalizeStories } from 'storybook/internal/common';
 import type { Options } from 'storybook/internal/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import slash from 'slash';
 

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

@@ -50,7 +50,7 @@ export function codeGeneratorPlugin(options: Options): Plugin {
     },
     config(config, { command }) {
       // If we are building the static distribution, add iframe.html as an entry.
-      // In development mode, it's not an entry - instead, we use an express middleware
+      // In development mode, it's not an entry - instead, we use a middleware
       // to serve iframe.html. The reason is that Vite's dev server (at the time of writing)
       // does not support virtual files as entry points.
       if (command === 'build') {

code/builders/builder-webpack5/package.json

@@ -72,7 +72,6 @@
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
     "es-module-lexer": "^1.5.0",
-    "express": "^4.19.2",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.0",
     "magic-string": "^0.30.5",
@@ -95,6 +94,7 @@
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-hot-middleware": "^2.25.6",
     "pretty-hrtime": "^1.0.3",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "typescript": "^5.3.2"
   },

code/builders/builder-webpack5/src/index.ts

@@ -12,8 +12,8 @@ import type { Builder, Options } from 'storybook/internal/types';
 
 import { checkWebpackVersion } from '@storybook/core-webpack';
 
-import express from 'express';
 import prettyTime from 'pretty-hrtime';
+import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';
 import webpack, { ProgressPlugin } from 'webpack';
@@ -137,7 +137,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   }
 
   yield;
-  const modulesCount = (await options.cache?.get('modulesCount').catch(() => {})) || 1000;
+  const modulesCount = await options.cache?.get('modulesCount', 1000);
   let totalModules: number;
   let value = 0;
 
@@ -147,7 +147,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
       const progress = { value, message: message.charAt(0).toUpperCase() + message.slice(1) };
       if (message === 'building') {
         // arg3 undefined in webpack5
-        const counts = (arg3 && arg3.match(/(\d+)\/(\d+)/)) || [];
+        const counts = (arg3 && arg3.match(/entries (\d+)\/(\d+)/)) || [];
         const complete = parseInt(counts[1], 10);
         const total = parseInt(counts[2], 10);
         if (!Number.isNaN(complete) && !Number.isNaN(total)) {
@@ -180,10 +180,14 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
-
-  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
-
+  router.use(
+    '/sb-preview',
+    sirv(previewResolvedDir, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
   router.use(compilation);
   router.use(webpackHotMiddleware(compiler, { log: false }));
 
@@ -289,10 +293,8 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   });
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-
-  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
+  const previewFiles = cp(previewResolvedDir, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -72,7 +72,7 @@ export default async (
     docsOptions,
     entries,
     nonNormalizedStories,
-    modulesCount = 1000,
+    modulesCount,
     build,
     tagsOptions,
   ] = await Promise.all([
@@ -86,7 +86,7 @@ export default async (
     presets.apply('docs'),
     presets.apply<string[]>('entries', []),
     presets.apply('stories', []),
-    options.cache?.get('modulesCount').catch(() => {}),
+    options.cache?.get('modulesCount', 1000),
     options.presets.apply('build'),
     presets.apply('tags', {}),
   ]);

code/core/package.json

@@ -278,12 +278,10 @@
   },
   "dependencies": {
     "@storybook/csf": "^0.1.11",
-    "@types/express": "^4.17.21",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-register": "^3.5.0",
-    "express": "^4.19.2",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "process": "^0.11.10",
     "recast": "^0.23.5",
@@ -307,6 +305,7 @@
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@ndelangen/get-tarball": "^3.0.7",
+    "@polka/compression": "^1.0.0-next.28",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
@@ -316,7 +315,6 @@
     "@storybook/icons": "^1.2.10",
     "@tanstack/react-virtual": "^3.3.0",
     "@testing-library/react": "^14.0.0",
-    "@types/compression": "^1.7.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/detect-port": "^1.3.0",
     "@types/diff": "^5.0.9",
@@ -346,7 +344,6 @@
     "cli-table3": "^0.6.1",
     "commander": "^12.1.0",
     "comment-parser": "^1.4.1",
-    "compression": "^1.7.4",
     "copy-to-clipboard": "^3.3.1",
     "cross-spawn": "^7.0.3",
     "css": "^3.0.0",
@@ -362,10 +359,8 @@
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
     "esbuild-plugin-alias": "^0.2.1",
     "execa": "^8.0.1",
-    "express": "^4.19.2",
     "fd-package-json": "^1.2.0",
     "fetch-retry": "^6.0.0",
-    "file-system-cache": "^2.4.4",
     "find-cache-dir": "^5.0.0",
     "find-up": "^7.0.0",
     "flush-promises": "^1.0.2",
@@ -387,6 +382,7 @@
     "picomatch": "^2.3.0",
     "picoquery": "^1.4.0",
     "polished": "^4.2.2",
+    "polka": "^1.0.0-next.28",
     "prettier": "^3.2.5",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
@@ -402,6 +398,7 @@
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
     "resolve-from": "^5.0.0",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "source-map": "^0.7.4",
     "store2": "^2.14.2",

code/core/src/builder-manager/index.ts

@@ -9,7 +9,7 @@ import { logger } from '@storybook/core/node-logger';
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
 import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
 import aliasPlugin from 'esbuild-plugin-alias';
-import express from 'express';
+import sirv from 'sirv';
 
 import type {
   BuilderBuildResult,
@@ -26,6 +26,7 @@ import { wrapManagerEntries } from './utils/managerEntries';
 import { safeResolve } from './utils/safeResolve';
 import { getTemplatePath, renderHTML } from './utils/template';
 
+const isRootPath = /^\/($|\?)/;
 let compilation: Compilation;
 let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
 
@@ -165,8 +166,22 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     'manager'
   );
 
-  router.use(`/sb-addons`, express.static(addonsDir, { immutable: true, maxAge: '5m' }));
-  router.use(`/sb-manager`, express.static(coreDirOrigin, { immutable: true, maxAge: '5m' }));
+  router.use(
+    '/sb-addons',
+    sirv(addonsDir, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
+  router.use(
+    '/sb-manager',
+    sirv(coreDirOrigin, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
 
   const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
 
@@ -193,15 +208,19 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   yield;
 
-  router.use(`/`, ({ path }, res, next) => {
-    if (path === '/') {
-      res.status(200).send(html);
+  router.use('/', ({ url }, res, next) => {
+    if (url && isRootPath.test(url)) {
+      res.statusCode = 200;
+      res.write(html);
+      res.end();
     } else {
       next();
     }
   });
-  router.use(`/index.html`, ({ path }, res) => {
-    res.status(200).send(html);
+  router.use(`/index.html`, (req, res) => {
+    res.statusCode = 200;
+    res.write(html);
+    res.end();
   });
 
   return {
@@ -250,7 +269,6 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   // TODO: this doesn't watch, we should change this to use the esbuild watch API: https://esbuild.github.io/api/#watch
   compilation = await instance({
     ...config,
-
     minify: true,
   });
 

code/core/src/cli/detect.test.ts

@@ -24,6 +24,7 @@ vi.mock('fs', () => ({
   readdirSync: vi.fn(),
   readlinkSync: vi.fn(),
   default: vi.fn(),
+  mkdirSync: vi.fn(),
 }));
 
 vi.mock('@storybook/core/node-logger');