Release: Prerelease 10.0.0-rc.2

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 9.1.15
+
+- Core: Add `preview-first-load` telemetry - [#32770](https://github.com/storybookjs/storybook/pull/32770), thanks @shilman!
+- Dependencies: Update `vite-plugin-storybook-nextjs` - [#32821](https://github.com/storybookjs/storybook/pull/32821), thanks @ndelangen!
+
 ## 9.1.14
 
 - NextJS: Add NextJS 16 support - [#32791](https://github.com/storybookjs/storybook/pull/32791), thanks @yannbf and @ndelangen!

CHANGELOG.prerelease.md

@@ -1,3 +1,14 @@
+## 10.0.0-rc.2
+
+- CLI: Fix Nextjs project creation in empty directories - [#32828](https://github.com/storybookjs/storybook/pull/32828), thanks @yannbf!
+- CLI: Switch over to modern-tar - [#32763](https://github.com/storybookjs/storybook/pull/32763), thanks @ayuhito!
+- Core: Add parameter typings for addon-pseudo-state - [#32384](https://github.com/storybookjs/storybook/pull/32384), thanks @mrginglymus!
+- Core: Dedupe aria-query and @testing-library/dom packages - [#32801](https://github.com/storybookjs/storybook/pull/32801), thanks @mrginglymus!
+- Core: Improve es-toolkit usage for better tree-shaking - [#32787](https://github.com/storybookjs/storybook/pull/32787), thanks @mrginglymus!
+- Core: Replace es-toolkit compat imports with non-compat - [#32837](https://github.com/storybookjs/storybook/pull/32837), thanks @mrginglymus!
+- React: Simplify version detection - [#32802](https://github.com/storybookjs/storybook/pull/32802), thanks @mrginglymus!
+- Vite: Optimize @storybook/addon-docs/blocks dependency - [#32798](https://github.com/storybookjs/storybook/pull/32798), thanks @mrginglymus!
+
 ## 10.0.0-rc.1
 
 - Addon-Vitest: Support Vitest 4 - [#32819](https://github.com/storybookjs/storybook/pull/32819), thanks @yannbf!

code/.storybook/manager.tsx

@@ -1,4 +1,4 @@
-import { startCase } from 'es-toolkit/compat';
+import { startCase } from 'es-toolkit/string';
 import { addons } from 'storybook/manager-api';
 
 addons.setConfig({

code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx

@@ -5,7 +5,7 @@ import { SyntaxHighlighter, WithTooltipPure, codeCommon } from 'storybook/intern
 
 import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons';
 
-import { uniq } from 'es-toolkit/compat';
+import { uniq } from 'es-toolkit/array';
 import memoize from 'memoizerific';
 import { styled } from 'storybook/theming';
 

code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

@@ -7,7 +7,7 @@ import { includeConditionalArg } from 'storybook/internal/csf';
 
 import { DocumentIcon, UndoIcon } from '@storybook/icons';
 
-import { pickBy } from 'es-toolkit/compat';
+import { pickBy } from 'es-toolkit/object';
 import { transparentize } from 'polished';
 import { styled } from 'storybook/theming';
 

code/addons/docs/src/blocks/controls/Color.tsx

@@ -6,7 +6,7 @@ import { Form, TooltipNote, WithTooltip } from 'storybook/internal/components';
 import { MarkupIcon } from '@storybook/icons';
 
 import convert from 'color-convert';
-import { debounce } from 'es-toolkit/compat';
+import { debounce } from 'es-toolkit/function';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 import { styled } from 'storybook/theming';
 

code/addons/docs/src/blocks/controls/Object.tsx

@@ -5,7 +5,7 @@ import { Button, Form, IconButton } from 'storybook/internal/components';
 
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 
-import { cloneDeep } from 'es-toolkit/compat';
+import { cloneDeep } from 'es-toolkit/object';
 import { type Theme, styled, useTheme } from 'storybook/theming';
 
 import { getControlId, getControlSetterButtonId } from './helpers';

code/addons/docs/src/preset.ts

@@ -204,6 +204,11 @@ export const resolvedReact = async (existing: any) => ({
   mdx: existing?.mdx ?? fileURLToPath(import.meta.resolve('@mdx-js/react')),
 });
 
-const optimizeViteDeps = ['@mdx-js/react', '@storybook/addon-docs', 'markdown-to-jsx'];
+const optimizeViteDeps = [
+  '@mdx-js/react',
+  '@storybook/addon-docs',
+  '@storybook/addon-docs/blocks',
+  'markdown-to-jsx',
+];
 
 export { webpackX as webpack, docsX as docs, optimizeViteDeps };

code/addons/pseudo-states/src/constants.ts

@@ -41,5 +41,3 @@ export const PSEUDO_STATES = {
   link: 'link',
   target: 'target',
 } as const;
-
-export type PseudoState = keyof typeof PSEUDO_STATES;

code/addons/pseudo-states/src/index.ts

@@ -1,7 +1,10 @@
 import { definePreviewAddon } from 'storybook/internal/csf';
 
 import * as addonAnnotations from './preview';
+import type { PseudoTypes } from './types';
 
 export { PARAM_KEY } from './constants';
 
-export default () => definePreviewAddon(addonAnnotations);
+export type { PseudoTypes } from './types';
+
+export default () => definePreviewAddon<PseudoTypes>(addonAnnotations);

code/addons/pseudo-states/src/preview/withPseudoState.ts

@@ -12,18 +12,10 @@ import type { DecoratorFunction } from 'storybook/internal/types';
 
 import { addons, useEffect, useMemo, useRef } from 'storybook/preview-api';
 
-import type { PseudoState } from '../constants';
 import { PSEUDO_STATES } from '../constants';
+import type { PseudoParameter, PseudoState, PseudoStateConfig } from '../types';
 import { rewriteStyleSheet } from './rewriteStyleSheet';
 
-type PseudoStateConfig = {
-  [P in PseudoState]?: boolean | string | string[];
-};
-
-export interface PseudoParameter extends PseudoStateConfig {
-  rootSelector?: string;
-}
-
 const channel = addons.getChannel();
 const shadowHosts = new Set<Element>();
 

code/addons/pseudo-states/src/types.test-d.ts

@@ -0,0 +1,47 @@
+import { describe, expectTypeOf, it } from 'vitest';
+
+import { definePreview } from 'storybook/internal/csf';
+
+import pseudoAddon from '.';
+import '../../../renderers/react/src/typings';
+
+describe('addon parameters are injected to csf factory', () => {
+  // Define preview with pseudo addon
+  const preview = definePreview({ addons: [pseudoAddon()] });
+
+  it('with invalid value', () => {
+    const meta = preview.meta({
+      parameters: {
+        pseudo: {
+          // @ts-expect-error focus should be bool/string
+          focus: 2,
+        },
+      },
+    });
+    expectTypeOf(meta.input.parameters!.pseudo).not.toExtend<{ focus: number }>();
+  });
+
+  it('with invalid key', () => {
+    const meta = preview.meta({
+      parameters: {
+        pseudo: {
+          // @ts-expect-error this pseudo state doesn't exist
+          madeUpKey: true,
+        },
+      },
+    });
+    expectTypeOf(meta.input.parameters!.pseudo).not.toExtend<{ madeUpKey: boolean }>();
+  });
+
+  it('with valid config', () => {
+    const meta = preview.meta({
+      parameters: {
+        pseudo: {
+          rootSelector: 'body',
+          focus: true,
+        },
+      },
+    });
+    expectTypeOf(meta.input.parameters!.pseudo!).toExtend<{ focus: boolean }>();
+  });
+});

code/addons/pseudo-states/src/types.ts

@@ -0,0 +1,24 @@
+import type { PSEUDO_STATES } from './constants';
+
+export type PseudoState = keyof typeof PSEUDO_STATES;
+
+export type PseudoStateConfig = {
+  [P in PseudoState]?: boolean | string | string[];
+};
+
+export interface PseudoParameter extends PseudoStateConfig {
+  rootSelector?: string;
+}
+
+export interface PseudoParameters {
+  /**
+   * Pseudo state configuration
+   *
+   * @see https://storybook.js.org/addons/storybook-addon-pseudo-states
+   */
+  pseudo?: PseudoParameter;
+}
+
+export interface PseudoTypes {
+  parameters: PseudoParameters;
+}

code/addons/pseudo-states/vitest.config.ts

@@ -5,6 +5,10 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default mergeConfig(
   vitestCommonConfig,
   defineConfig({
-    // Add custom config here
+    test: {
+      typecheck: {
+        enabled: true,
+      },
+    },
   })
 );

code/core/package.json

@@ -223,7 +223,6 @@
     "@emotion/styled": "^11.14.0",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@happy-dom/global-registrator": "^18.0.1",
-    "@ndelangen/get-tarball": "^3.0.7",
     "@ngard/tiny-isequal": "^1.1.0",
     "@polka/compression": "^1.0.0-next.28",
     "@radix-ui/react-dialog": "^1.1.2",
@@ -232,7 +231,7 @@
     "@rolldown/pluginutils": "1.0.0-beta.18",
     "@storybook/docs-mdx": "4.0.0-next.1",
     "@tanstack/react-virtual": "^3.3.0",
-    "@testing-library/dom": "10.4.0",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^14.0.0",
     "@types/cross-spawn": "^6.0.6",
     "@types/detect-port": "^1.3.0",
@@ -290,6 +289,7 @@
     "leven": "^4.0.0",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
+    "modern-tar": "^0.5.5",
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
     "open": "^10.2.0",

code/core/src/cli/dirs.ts

@@ -1,11 +1,15 @@
 import { join } from 'node:path';
+import { Readable } from 'node:stream';
+import { pipeline } from 'node:stream/promises';
+import type { ReadableStream } from 'node:stream/web';
+import { createGunzip } from 'node:zlib';
 
 import { temporaryDirectory, versions } from 'storybook/internal/common';
 import type { JsPackageManager } from 'storybook/internal/common';
 import type { SupportedFrameworks, SupportedRenderers } from 'storybook/internal/types';
 
-import downloadTarballDefault from '@ndelangen/get-tarball';
 import getNpmTarballUrlDefault from 'get-npm-tarball-url';
+import { unpackTar } from 'modern-tar/fs';
 import invariant from 'tiny-invariant';
 
 import { resolvePackageDir } from '../shared/utils/module';
@@ -21,15 +25,22 @@ const resolveUsingBranchInstall = async (packageManager: JsPackageManager, reque
   // an artifact of esbuild + type=commonjs + exportmap
   // @ts-expect-error (default export)
   const getNpmTarballUrl = getNpmTarballUrlDefault.default || getNpmTarballUrlDefault;
-  // @ts-expect-error (default export)
-  const downloadTarball = downloadTarballDefault.default || downloadTarballDefault;
 
   const url = getNpmTarballUrl(request, version, {
     registry: await packageManager.getRegistryURL(),
   });
 
+  const response = await fetch(url);
+  if (!response.ok || !response.body) {
+    throw new Error(`Failed to download tarball from ${url}`);
+  }
+
   // this unzips the tarball into the temp directory
-  await downloadTarball({ url, dir: tempDirectory });
+  await pipeline(
+    Readable.fromWeb(response.body as ReadableStream<Uint8Array>),
+    createGunzip(),
+    unpackTar(tempDirectory)
+  );
 
   return join(tempDirectory, 'package');
 };

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

@@ -5,7 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { normalizeStoriesEntry } from 'storybook/internal/common';
 import { STORY_INDEX_INVALIDATED } from 'storybook/internal/core-events';
 
-import { debounce } from 'es-toolkit/compat';
+import { debounce } from 'es-toolkit/function';
 import type { Polka, Request, Response } from 'polka';
 import Watchpack from 'watchpack';
 
@@ -16,7 +16,7 @@ import type { ServerChannel } from './get-server-channel';
 import { DEBOUNCE, useStoriesJson } from './stories-json';
 
 vi.mock('watchpack');
-vi.mock('es-toolkit/compat');
+vi.mock('es-toolkit/function', { spy: true });
 vi.mock('storybook/internal/node-logger');
 
 vi.mock('../utils/constants', () => {
@@ -575,7 +575,8 @@ describe('useStoriesJson', () => {
 
     it('debounces invalidation events', async () => {
       vi.mocked(debounce).mockImplementation(
-        (await vi.importActual<typeof import('es-toolkit/compat')>('es-toolkit/compat')).debounce
+        (await vi.importActual<typeof import('es-toolkit/function')>('es-toolkit/function'))
+          .debounce
       );
 
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;

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

@@ -4,7 +4,7 @@ import { basename } from 'node:path';
 import { STORY_INDEX_INVALIDATED } from 'storybook/internal/core-events';
 import type { NormalizedStoriesSpecifier, StoryIndex } from 'storybook/internal/types';
 
-import { debounce } from 'es-toolkit/compat';
+import { debounce } from 'es-toolkit/function';
 import type { Polka } from 'polka';
 
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
@@ -40,7 +40,7 @@ export function useStoriesJson({
   normalizedStories: NormalizedStoriesSpecifier[];
 }) {
   const maybeInvalidate = debounce(() => serverChannel.emit(STORY_INDEX_INVALIDATED), DEBOUNCE, {
-    leading: true,
+    edges: ['leading', 'trailing'],
   });
   watchStorySpecifiers(normalizedStories, { workingDir }, async (specifier, path, removed) => {
     const generator = await initializedStoryIndexGenerator;

code/core/src/manager/components/sidebar/useLastViewed.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import { debounce } from 'es-toolkit/compat';
+import { debounce } from 'es-toolkit/function';
 import store from 'store2';
 
 import type { Selection, StoryRef } from './types';

code/lib/codemod/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { camelCase, upperFirst } from 'es-toolkit/compat';
+import { camelCase, upperFirst } from 'es-toolkit/string';
 
 export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name)) as string;

code/lib/create-storybook/src/scaffold-new-project.ts

@@ -46,10 +46,10 @@ const SUPPORTED_PROJECTS: Record<string, SupportedProject> = {
       language: 'TS',
     },
     createScript: {
-      npm: 'npm create next-app . -- --turbopack --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
+      npm: 'npm create next-app . -- --turbopack --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir --no-react-compiler',
       // yarn doesn't support version ranges, so we have to use npx
-      yarn: 'npx create-next-app . --turbopack --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
-      pnpm: 'pnpm create next-app . --turbopack --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
+      yarn: 'npx create-next-app . --turbopack --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir --no-react-compiler',
+      pnpm: 'pnpm create next-app . --turbopack --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir --no-react-compiler',
     },
   },
   'vue-vite-ts': {

code/package.json

@@ -96,6 +96,7 @@
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.0",
     "@vitest/expect@npm:3.2.4": "patch:@vitest/expect@npm%3A3.2.4#~/.yarn/patches/@vitest-expect-npm-3.2.4-97c526d5cc.patch",
+    "aria-query@5.3.0": "^5.3.0",
     "esbuild": "^0.25.3",
     "playwright": "1.52.0",
     "playwright-core": "1.52.0",
@@ -282,5 +283,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.0.0-rc.2"
 }

code/renderers/react/package.json

@@ -61,7 +61,6 @@
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^1.0.6",
     "@types/node": "^22.0.0",
-    "@types/semver": "^7.3.4",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
@@ -73,7 +72,6 @@
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "npm:@7rulnik/react-element-to-jsx-string@15.0.1",
     "require-from-string": "^2.0.2",
-    "semver": "^7.3.7",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19"
   },

code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts

@@ -5,7 +5,7 @@ import {
   isTooLongForDefaultValueSummary,
 } from 'storybook/internal/docs-tools';
 
-import { isFunction, isPlainObject, isString } from 'es-toolkit/compat';
+import { isFunction, isPlainObject, isString } from 'es-toolkit/predicate';
 import type reactElementToJSXStringType from 'react-element-to-jsx-string';
 // @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS)
 import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js';