Release: Patch 8.5.3

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 8.5.3
+
+- Preview: Add `globals` to `extract()` - [#30415](https://github.com/storybookjs/storybook/pull/30415), thanks @ndelangen!
+- Vite: Fix add component UI invalidation - [#30438](https://github.com/storybookjs/storybook/pull/30438), thanks @shilman!
+
 ## 8.5.2
 
 - Addon Test: Support Vitest 3 browser.test.instances field - [#30309](https://github.com/storybookjs/storybook/pull/30309), thanks @valentinpalkovic!

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

@@ -44,7 +44,10 @@ export function codeGeneratorPlugin(options: Options): Plugin {
         // TODO maybe use the stories declaration in main
         if (/\.stories\.([tj])sx?$/.test(path) || /\.mdx$/.test(path)) {
           // We need to emit a change event to trigger HMR
-          server.watcher.emit('change', SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE);
+          server.watcher.emit(
+            'change',
+            getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)
+          );
         }
       });
     },

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/frameworks/preact-vite/README.md

@@ -1,47 +1,4 @@
-# Storybook for Preact <!-- omit in toc -->
+# Storybook for Preact & Vite
 
-## Requirements
-
-- [Preact](https://preactjs.com/) >= 10.x
-- [Storybook](https://storybook.js.org/) >= 7.x
-
-## Getting Started
-
-### In a project without Storybook
-
-Follow the prompts after running this command in your Preact project's root directory:
-
-```bash
-npx storybook@latest init
-```
-
-[More on getting started with Storybook](https://storybook.js.org/docs/get-started/install?renderer=preact)
-
-### In a project with Storybook
-
-This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command:
-
-```bash
-npx storybook@latest upgrade
-```
-
-#### Manual migration
-
-Install the framework:
-
-```bash
-yarn add --dev @storybook/preact-vite
-```
-
-Update your `main.js` to change the framework property:
-
-```js
-// .storybook/main.js
-export default {
-  // ...
-  framework: {
-    name: '@storybook/preact-vite', // <- Change this
-    options: {},
-  },
-};
-```
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/preact-vite?renderer=preact) for installation instructions, usage examples, APIs, and more.
+`;

code/package.json

@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.3"
 }

docs/_snippets/my-component-play-function-with-canvas.md

@@ -19,7 +19,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -49,7 +49,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -69,7 +69,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -90,7 +90,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -116,7 +116,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -141,7 +141,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -168,7 +168,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -193,7 +193,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   }} />
 ```
 
@@ -218,7 +218,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -245,7 +245,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -264,7 +264,7 @@ export const ExampleStory = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```
@@ -287,7 +287,7 @@ export const ExampleStory: Story = {
 
     // Starts querying from the component's root element
     await userEvent.type(canvas.getByTestId('example-element'), 'something');
-    await userEvent.click(canvas.getByRole('another-element'));
+    await userEvent.click(canvas.getByRole('button'));
   },
 };
 ```

docs/_snippets/preact-vite-add-framework.md

@@ -0,0 +1,19 @@
+```js filename=".storybook/main.js" renderer="preact" language="js"
+export default {
+  // ...
+  // framework: '@storybook/preact-webpack5', 👈 Remove this
+  framework: '@storybook/preact-vite', // 👈 Add this
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="preact" language="ts"
+import { StorybookConfig } from '@storybook/preact-vite';
+
+const config: StorybookConfig = {
+  // ...
+  // framework: '@storybook/preact-webpack5', 👈 Remove this
+  framework: '@storybook/preact-vite', // 👈 Add this
+};
+
+export default config;
+```

docs/_snippets/preact-vite-framework-options.md

@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="preact" language="js"
+export default {
+  framework: {
+    name: '@storybook/preact-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="preact" language="ts"
+import type { StorybookConfig } from '@storybook/preact-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/preact-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```

docs/_snippets/preact-vite-install.md

@@ -0,0 +1,11 @@
+```shell renderer="preact" language="js" packageManager="npm"
+npm install --save-dev @storybook/preact-vite
+```
+
+```shell renderer="preact" language="js" packageManager="pnpm"
+pnpm add --save-dev @storybook/preact-vite
+```
+
+```shell renderer="preact" language="js" packageManager="yarn"
+yarn add --dev @storybook/preact-vite
+```

docs/get-started/frameworks/nextjs.mdx

@@ -578,7 +578,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
 
   Next.js lets you [customize PostCSS config](https://nextjs.org/docs/pages/building-your-application/configuring/post-css). Thus this framework will automatically handle your PostCSS config for you.
 
-  This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss))
+  This allows for cool things like zero-config Tailwind! (See [Next.js' example](https://github.com/vercel/next.js/tree/canary/packages/create-next-app/templates/default-tw))
 
   ## Absolute imports