Release: Prerelease 8.6.0-alpha.3

.nvmrc

@@ -1 +1,2 @@
-22.6.0
+22.13.1
+

.yarnrc.yml

@@ -8,4 +8,4 @@ nodeLinker: node-modules
 
 npmPublishAccess: public
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.5.2
+
+- Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!
+- CLI: Corrected Next.js createScript for pnpm. - [#30304](https://github.com/storybookjs/storybook/pull/30304), thanks @zhyd1997!
+
 ## 8.5.1
 
 - Addon Test: Replace `interaction test` -> `component test` - [#30333](https://github.com/storybookjs/storybook/pull/30333), thanks @kylegach!

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.6.0-alpha.3
+
+- Core: Fix invalid Websocket termination - [#30408](https://github.com/storybookjs/storybook/pull/30408), thanks @valentinpalkovic!
+- Core: Improve type compatibility with React 19 - [#30031](https://github.com/storybookjs/storybook/pull/30031), thanks @mrginglymus!
+- Preview: Add `globals` to `extract()` - [#30415](https://github.com/storybookjs/storybook/pull/30415), thanks @ndelangen!
+
 ## 8.6.0-alpha.2
 
 - Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!

MIGRATION.md

@@ -433,7 +433,7 @@
 
 Storybook now supports [Angular's experimental zoneless mode](https://angular.dev/guide/experimental/zoneless). This mode is intended to improve performance by removing Angular's zone.js dependency. To enable zoneless mode in your Angular Storybook, set the `experimentalZoneless` config in your `angular.json` file:
 
-````diff
+```diff
 {
   "projects": {
     "your-project": {

code/.yarnrc.yml

@@ -22,7 +22,6 @@ plugins:
   - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
 
-# See https://github.com/nrwl/nx/issues/22177
 supportedArchitectures:
   cpu:
     - current
@@ -36,6 +35,4 @@ supportedArchitectures:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
-# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
-# checksumBehavior: 'update'
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -42,13 +42,13 @@ const getFilter = (filterName: string) => {
   return `url('#${filterName}')`;
 };
 
-const Hidden = styled.div(() => ({
+const Hidden = styled.div({
   '&, & svg': {
     position: 'absolute',
     width: 0,
     height: 0,
   },
-}));
+});
 
 const ColorIcon = styled.span<{ filter: string }>(
   {

code/addons/interactions/src/components/Interaction.tsx

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,9 +1,9 @@
 import { styled } from 'storybook/internal/theming';
 
-export const ListWrapper = styled.ul(() => ({
+export const ListWrapper = styled.ul({
   display: 'flex',
   flexDirection: 'column',
   rowGap: 16,
   padding: 0,
   margin: 0,
-}));
+});

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

@@ -14,12 +14,12 @@ import { MatcherResult } from './MatcherResult';
 import { MethodCall } from './MethodCall';
 import { StatusIcon } from './StatusIcon';
 
-const MethodCallWrapper = styled.div(() => ({
+const MethodCallWrapper = styled.div({
   fontFamily: typography.fonts.mono,
   fontSize: typography.size.s1,
   overflowWrap: 'break-word',
   inlineSize: 'calc( 100% - 40px )',
-}));
+});
 
 const RowContainer = styled('div', {
   shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),

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

@@ -379,7 +379,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />
-              ) : // @ts-expect-error: TODO: Fix types
+              ) : // @ts-expect-error @ghengeveld should check whether this is a bug or not
               status === 'unknown' ? (
                 <TestStatusIcon status="unknown" aria-label="status: unknown" />
               ) : (

code/addons/viewport/src/legacy/ToolLegacy.tsx

@@ -74,10 +74,10 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({
   width: height,
 });
 
-const ActiveViewportSize = styled.div(() => ({
+const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/addons/viewport/src/utils.tsx

@@ -7,10 +7,10 @@ import { BrowserIcon, MobileIcon, TabletIcon } from '@storybook/icons';
 
 import type { Viewport, ViewportMap } from './types';
 
-export const ActiveViewportSize = styled.div(() => ({
+export const ActiveViewportSize = styled.div({
   display: 'inline-flex',
   alignItems: 'center',
-}));
+});
 
 export const ActiveViewportLabel = styled.div(({ theme }) => ({
   display: 'inline-block',

code/core/package.json

@@ -296,16 +296,16 @@
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
     "@discoveryjs/json-ext": "^0.5.3",
-    "@emotion/cache": "^11.11.0",
-    "@emotion/is-prop-valid": "^1.2.2",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
     "@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-dialog": "^1.1.2",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/docs-mdx": "4.0.0-next.1",
@@ -369,7 +369,7 @@
     "js-yaml": "^4.1.0",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
-    "markdown-to-jsx": "^7.4.5",
+    "markdown-to-jsx": "^7.7.2",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
     "nanoid": "^4.0.2",

code/core/src/components/components/bar/button.tsx

@@ -140,11 +140,11 @@ const IconPlaceholder = styled.div(({ theme }) => ({
   animation: `${theme.animation.glow} 1.5s ease-in-out infinite`,
 }));
 
-const IconButtonSkeletonWrapper = styled.div(() => ({
+const IconButtonSkeletonWrapper = styled.div({
   marginTop: 6,
   padding: 7,
   height: 28,
-}));
+});
 
 /** @deprecated This component will be removed in Storybook 9.0 */
 export const IconButtonSkeleton = () => (

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

@@ -17,15 +17,7 @@ export class ServerChannelTransport {
 
   private handler?: ChannelHandler;
 
-  isAlive = false;
-
-  private heartbeat() {
-    this.isAlive = true;
-  }
-
   constructor(server: Server) {
-    this.heartbeat = this.heartbeat.bind(this);
-
     this.socket = new WebSocketServer({ noServer: true });
 
     server.on('upgrade', (request, socket, head) => {
@@ -36,29 +28,18 @@ export class ServerChannelTransport {
       }
     });
     this.socket.on('connection', (wss) => {
-      this.isAlive = true;
       wss.on('message', (raw) => {
         const data = raw.toString();
         const event =
           typeof data === 'string' && isJSON(data)
             ? parse(data, { allowFunction: false, allowClass: false })
             : data;
         this.handler?.(event);
-        if (event.type === 'pong') {
-          this.heartbeat();
-        }
       });
     });
 
     const interval = setInterval(() => {
-      this.socket.clients.forEach((ws) => {
-        if (this.isAlive === false) {
-          return ws.terminate();
-        }
-
-        this.isAlive = false;
-        this.send({ type: 'ping' });
-      });
+      this.send({ type: 'ping' });
     }, HEARTBEAT_INTERVAL);
 
     this.socket.on('close', function close() {

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -93,7 +93,7 @@ const NotificationWithInteractiveStates = styled(Notification)({
 const NotificationButton = NotificationWithInteractiveStates.withComponent('div');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 
-const NotificationIconWrapper = styled.div(() => ({
+const NotificationIconWrapper = styled.div({
   display: 'flex',
   marginRight: 10,
   alignItems: 'center',
@@ -102,7 +102,7 @@ const NotificationIconWrapper = styled.div(() => ({
     width: 16,
     height: 16,
   },
-}));
+});
 
 const NotificationTextWrapper = styled.div(({ theme }) => ({
   width: '100%',

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

@@ -3793,6 +3793,9 @@ describe('PreviewWeb', () => {
             },
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--a",
             "initialArgs": {
               "foo": "a",
@@ -3844,6 +3847,9 @@ describe('PreviewWeb', () => {
             },
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--b",
             "initialArgs": {
               "foo": "b",
@@ -3876,6 +3882,9 @@ describe('PreviewWeb', () => {
             "args": {},
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--e",
             "initialArgs": {},
             "kind": "Component One",
@@ -3914,6 +3923,9 @@ describe('PreviewWeb', () => {
             },
             "component": undefined,
             "componentId": "component-two",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-two--c",
             "initialArgs": {
               "foo": "c",

code/core/src/preview-api/modules/store/StoryStore.test.ts

@@ -301,6 +301,9 @@ describe('StoryStore', () => {
             },
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--a",
             "initialArgs": {
               "foo": "a",
@@ -471,6 +474,9 @@ describe('StoryStore', () => {
             },
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--a",
             "initialArgs": {
               "foo": "a",
@@ -514,6 +520,9 @@ describe('StoryStore', () => {
             },
             "component": undefined,
             "componentId": "component-one",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-one--b",
             "initialArgs": {
               "foo": "b",
@@ -557,6 +566,9 @@ describe('StoryStore', () => {
             },
             "component": undefined,
             "componentId": "component-two",
+            "globals": {
+              "a": "b",
+            },
             "id": "component-two--c",
             "initialArgs": {
               "foo": "c",
@@ -847,6 +859,9 @@ describe('StoryStore', () => {
               },
               "component": undefined,
               "componentId": "component-one",
+              "globals": {
+                "a": "b",
+              },
               "id": "component-one--a",
               "initialArgs": {
                 "foo": "a",
@@ -890,6 +905,9 @@ describe('StoryStore', () => {
               },
               "component": undefined,
               "componentId": "component-one",
+              "globals": {
+                "a": "b",
+              },
               "id": "component-one--b",
               "initialArgs": {
                 "foo": "b",
@@ -933,6 +951,9 @@ describe('StoryStore', () => {
               },
               "component": undefined,
               "componentId": "component-two",
+              "globals": {
+                "a": "b",
+              },
               "id": "component-two--c",
               "initialArgs": {
                 "foo": "c",

code/core/src/preview-api/modules/store/StoryStore.ts

@@ -323,7 +323,15 @@ export class StoryStore<TRenderer extends Renderer> {
             }
             return Object.assign(storyAcc, { [key]: value });
           },
-          { args: story.initialArgs }
+          {
+            //
+            args: story.initialArgs,
+            globals: {
+              ...this.userGlobals.initialGlobals,
+              ...this.userGlobals.globals,
+              ...story.storyGlobals,
+            },
+          }
         );
         return acc;
       },

code/lib/blocks/package.json

@@ -54,7 +54,7 @@
     "@types/color-convert": "^2.0.0",
     "color-convert": "^2.0.1",
     "es-toolkit": "^1.22.0",
-    "markdown-to-jsx": "^7.4.5",
+    "markdown-to-jsx": "^7.7.2",
     "memoizerific": "^1.11.3",
     "polished": "^4.2.2",
     "react-colorful": "^5.1.2",