Release: Prerelease 8.6.0-alpha.5

.circleci/config.yml

@@ -846,7 +846,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 9
+          parallelism: 8
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -918,7 +918,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 15
+          parallelism: 14
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -991,7 +991,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 30
           requires:
             - create-sandboxes
       - vitest-integration:

.gitignore

@@ -16,6 +16,7 @@ test-results
 .verdaccio-cache
 .next
 /.npmrc
+tsconfig.vitest-temp.json
 
 # Yarn stuff
 /**/.yarn/*

CHANGELOG.prerelease.md

@@ -1,3 +1,10 @@
+## 8.6.0-alpha.5
+
+- Core: Add `UniversalStore` API to sync state/events between multiple environments - [#30445](https://github.com/storybookjs/storybook/pull/30445), thanks @JReinhold!
+- Core: Fix statically serving single files and multiple dirs on the same endpoint - [#30467](https://github.com/storybookjs/storybook/pull/30467), thanks @JReinhold!
+- Core: Move CSF to monorepo - [#30488](https://github.com/storybookjs/storybook/pull/30488), thanks @kasperpeulen!
+- React: Update react-docgen-typescript to fix CI hanging issues - [#30422](https://github.com/storybookjs/storybook/pull/30422), thanks @yannbf!
+
 ## 8.6.0-alpha.4
 
 - Addon A11y: Make Vitest Axe optional - [#30442](https://github.com/storybookjs/storybook/pull/30442), thanks @valentinpalkovic!

MIGRATION.md

@@ -2,6 +2,9 @@
 
 - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
   - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
+  - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
   - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
   - [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector)
@@ -460,6 +463,26 @@ Storybook now supports [Angular's experimental zoneless mode](https://angular.de
 
 ## From version 8.4.x to 8.5.x
 
+### React Vite: react-docgen-typescript is updated
+
+Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default.
+
+Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues.
+
+```ts
+// .storybook/main.ts
+const config = {
+  // ...
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      EXPERIMENTAL_useWatchProgram: true,
+    },
+  },
+};
+export default config;
+```
+
 ### Introducing features.developmentModeForBuild
 
 As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.
@@ -473,7 +496,7 @@ export default {
     developmentModeForBuild: true,
   },
 };
-````
+```
 
 ### Added source code panel to docs
 

code/.eslintrc.js

@@ -93,6 +93,7 @@ module.exports = {
         '**/__tests__/**',
         '**/__testfixtures__/**',
         '**/*.test.*',
+        '**/*.test-d.*',
         '**/*.stories.*',
         '**/*.mockdata.*',
         '**/template/**/*',

code/addons/a11y/src/preview.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import type { StoryContext } from '@storybook/csf';
+import type { StoryContext } from 'storybook/internal/csf';
 
 import { run } from './a11yRunner';
 import { A11Y_TEST_TAG } from './constants';

code/addons/controls/src/manager.tsx

@@ -7,6 +7,7 @@ import type {
   SaveStoryResponsePayload,
 } from 'storybook/internal/core-events';
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
+import type { Args } from 'storybook/internal/csf';
 import {
   addons,
   experimental_requestResponse,
@@ -15,8 +16,6 @@ import {
 } from 'storybook/internal/manager-api';
 import { color } from 'storybook/internal/theming';
 
-import type { Args } from '@storybook/csf';
-
 import { dequal as deepEqual } from 'dequal';
 
 import { ControlsPanel } from './ControlsPanel';

code/addons/docs/package.json

@@ -106,14 +106,14 @@
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/react-dom-shim": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-external-links": "^3.0.0",

code/addons/links/package.json

@@ -65,7 +65,6 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/addons/links/src/utils.ts

@@ -1,8 +1,8 @@
 import { SELECT_STORY, STORY_CHANGED } from 'storybook/internal/core-events';
+import { toId } from 'storybook/internal/csf';
 import { addons, makeDecorator } from 'storybook/internal/preview-api';
 import type { ComponentTitle, StoryId, StoryKind, StoryName } from 'storybook/internal/types';
 
-import { toId } from '@storybook/csf';
 import { global } from '@storybook/global';
 
 import { PARAM_KEY } from './constants';

code/addons/test/package.json

@@ -81,7 +81,6 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.12",
     "@storybook/instrumenter": "workspace:*",

code/addons/test/src/components/TestProviderRender.tsx

@@ -20,11 +20,11 @@ import {
   type TestProviderConfig,
   type TestProviderState,
 } from 'storybook/internal/core-events';
+import type { Tag } from 'storybook/internal/csf';
 import { addons, useStorybookState } from 'storybook/internal/manager-api';
 import type { API } from 'storybook/internal/manager-api';
 import { styled, useTheme } from 'storybook/internal/theming';
 
-import type { Tag } from '@storybook/csf';
 import {
   AccessibilityIcon,
   EditIcon,

code/addons/test/src/vitest-plugin/viewports.ts

@@ -1,8 +1,7 @@
 /* eslint-disable no-underscore-dangle */
+import type { Globals, Parameters } from 'storybook/internal/csf';
 import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-errors';
 
-import type { Globals, Parameters } from '@storybook/csf';
-
 import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults';
 import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types';
 

code/core/package.json

@@ -97,6 +97,11 @@
       "import": "./dist/csf-tools/index.js",
       "require": "./dist/csf-tools/index.cjs"
     },
+    "./csf": {
+      "types": "./dist/csf/index.d.ts",
+      "import": "./dist/csf/index.js",
+      "require": "./dist/csf/index.cjs"
+    },
     "./common": {
       "types": "./dist/common/index.d.ts",
       "import": "./dist/common/index.js",
@@ -219,6 +224,9 @@
       "csf-tools": [
         "./dist/csf-tools/index.d.ts"
       ],
+      "csf": [
+        "./dist/csf/index.d.ts"
+      ],
       "common": [
         "./dist/common/index.d.ts"
       ],
@@ -274,7 +282,6 @@
     "prep": "jiti ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.12",
     "@storybook/theming": "workspace:*",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
@@ -303,6 +310,7 @@
     "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@ndelangen/get-tarball": "^3.0.7",
+    "@ngard/tiny-isequal": "^1.1.0",
     "@polka/compression": "^1.0.0-next.28",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.1.2",

code/core/scripts/entries.ts

@@ -25,6 +25,7 @@ export const getEntries = (cwd: string) => {
     define('src/channels/index.ts', ['browser', 'node'], true),
     define('src/types/index.ts', ['browser', 'node'], true, ['react']),
     define('src/csf-tools/index.ts', ['node'], true),
+    define('src/csf/index.ts', ['browser', 'node'], true),
     define('src/common/index.ts', ['node'], true),
     define('src/builder-manager/index.ts', ['node'], true),
     define('src/telemetry/index.ts', ['node'], true),

code/core/src/channels/index.ts

@@ -1,6 +1,7 @@
 /// <reference path="../typings.d.ts" />
 import { global } from '@storybook/global';
 
+import { UniversalStore } from '../shared/universal-store';
 import { Channel } from './main';
 import { PostMessageTransport } from './postmessage';
 import type { ChannelTransport, Config } from './types';
@@ -39,7 +40,14 @@ export function createBrowserChannel({ page, extraTransports = [] }: Options): C
     transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {}, page }));
   }
 
-  return new Channel({ transports });
+  const channel = new Channel({ transports });
+  // eslint-disable-next-line no-underscore-dangle
+  UniversalStore.__prepare(
+    channel,
+    page === 'manager' ? UniversalStore.Environment.MANAGER : UniversalStore.Environment.PREVIEW
+  );
+
+  return channel;
 }
 
 export type { Listener, ChannelEvent, ChannelTransport, ChannelHandler } from './types';

code/core/src/common/utils/get-story-id.ts

@@ -1,8 +1,8 @@
 import { relative } from 'node:path';
 
 import { normalizeStories, normalizeStoryPath } from '@storybook/core/common';
+import { sanitize, storyNameFromExport, toId } from '@storybook/core/csf';
 import type { Options, StoriesEntry } from '@storybook/core/types';
-import { sanitize, storyNameFromExport, toId } from '@storybook/csf';
 
 import { userOrAutoTitleFromSpecifier } from '@storybook/core/preview-api';
 

code/core/src/components/components/addon-panel/addon-panel.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 const usePrevious = (value: any) => {
@@ -20,7 +20,7 @@ const useUpdate = (update: boolean, value: any) => {
 
 export interface AddonPanelProps {
   active: boolean;
-  children: ReactNode;
+  children: ReactElement;
 }
 
 export const AddonPanel = ({ active, children }: AddonPanelProps) => {

code/core/src/components/components/tabs/tabs.hooks.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
+import { sanitize } from '@storybook/core/csf';
 import { styled } from '@storybook/core/theming';
-import { sanitize } from '@storybook/csf';
 
 import useResizeObserver from 'use-resize-observer';
 

code/core/src/components/components/tabs/tabs.tsx

@@ -1,9 +1,9 @@
 import type { FC, PropsWithChildren, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React, { Component, memo, useMemo } from 'react';
 
+import { sanitize } from '@storybook/core/csf';
 import { styled } from '@storybook/core/theming';
 import type { Addon_RenderOptions } from '@storybook/core/types';
-import { sanitize } from '@storybook/csf';
 
 import { FlexBar } from '../bar/bar';
 import { TabButton } from '../bar/button';

code/core/src/core-events/data/argtypes-info.ts

@@ -1,4 +1,4 @@
-import type { ArgTypes } from '@storybook/csf';
+import type { ArgTypes } from '@storybook/core/csf';
 
 export interface ArgTypesRequestPayload {
   storyId: string;

code/core/src/core-server/index.ts

@@ -10,3 +10,5 @@ export { mapStaticDir } from './utils/server-statics';
 export { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 
 export { loadStorybook as experimental_loadStorybook } from './load';
+
+export { UniversalStore as experimental_UniversalStore } from '../shared/universal-store';

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

@@ -4,8 +4,8 @@ import { join } from 'node:path';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { normalizeStoriesEntry } from '@storybook/core/common';
+import { toId } from '@storybook/core/csf';
 import type { NormalizedStoriesSpecifier, StoryIndexEntry } from '@storybook/core/types';
-import { toId } from '@storybook/csf';
 
 import { getStorySortParameter, readCsf } from '@storybook/core/csf-tools';
 import { logger, once } from '@storybook/core/node-logger';
@@ -14,8 +14,8 @@ import { csfIndexer } from '../presets/common-preset';
 import type { StoryIndexGeneratorOptions } from './StoryIndexGenerator';
 import { StoryIndexGenerator } from './StoryIndexGenerator';
 
-vi.mock('@storybook/csf', async (importOriginal) => {
-  const csf = await importOriginal<typeof import('@storybook/csf')>();
+vi.mock('@storybook/core/csf', async (importOriginal) => {
+  const csf = await importOriginal<typeof import('@storybook/core/csf')>();
   return {
     ...csf,
     toId: vi.fn(csf.toId),

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

@@ -4,6 +4,7 @@ import { readFile } from 'node:fs/promises';
 import { dirname, extname, join, normalize, relative, resolve, sep } from 'node:path';
 
 import { commonGlobOptions, normalizeStoryPath } from '@storybook/core/common';
+import { combineTags, storyNameFromExport, toId } from '@storybook/core/csf';
 import type {
   DocsIndexEntry,
   DocsOptions,
@@ -17,7 +18,6 @@ import type {
   StorybookConfigRaw,
   Tag,
 } from '@storybook/core/types';
-import { combineTags, storyNameFromExport, toId } from '@storybook/csf';
 
 import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools';
 import { logger, once } from '@storybook/core/node-logger';

code/core/src/core-server/utils/get-server-channel.ts

@@ -4,6 +4,8 @@ import { Channel, HEARTBEAT_INTERVAL } from '@storybook/core/channels';
 import { isJSON, parse, stringify } from 'telejson';
 import WebSocket, { WebSocketServer } from 'ws';
 
+import { UniversalStore } from '../../shared/universal-store';
+
 type Server = NonNullable<NonNullable<ConstructorParameters<typeof WebSocketServer>[0]>['server']>;
 
 /**
@@ -72,7 +74,12 @@ export class ServerChannelTransport {
 export function getServerChannel(server: Server) {
   const transports = [new ServerChannelTransport(server)];
 
-  return new Channel({ transports, async: true });
+  const channel = new Channel({ transports, async: true });
+
+  // eslint-disable-next-line no-underscore-dangle
+  UniversalStore.__prepare(channel, UniversalStore.Environment.SERVER);
+
+  return channel;
 }
 
 // for backwards compatibility

code/core/src/core-server/utils/save-story/save-story.ts

@@ -4,9 +4,9 @@ import { basename, join } from 'node:path';
 
 import type { Channel } from '@storybook/core/channels';
 import { formatFileContent } from '@storybook/core/common';
+import { storyNameFromExport, toId } from '@storybook/core/csf';
 import { isExampleStoryId, telemetry } from '@storybook/core/telemetry';
 import type { CoreConfig, Options } from '@storybook/core/types';
-import { storyNameFromExport, toId } from '@storybook/csf';
 
 import type {
   RequestData,