vite-plugin-storybook-nextjs 1.0.4 → 1.0.5

package/README.md

@@ -5,12 +5,12 @@ This is a Vite plugin that allows you to use Next.js features in Vite. It is the
 ## Features
 
 - **Next.js Integration**: Seamlessly integrate Next.js features into your Vite project.
-- **Storybook Compatibility**: Acts as the foundation for `@storybook/experimental-nextjs-vite`, enabling you to use Storybook with Next.js in a Vite environment.
+- **Storybook Compatibility**: Acts as the foundation for [the `@storybook/experimental-nextjs-vite` framework](https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite), enabling you to use Storybook with Next.js in a Vite environment.
 - **Portable Stories**: Ideal for running portable stories in Vitest, ensuring your components are tested in an environment that closely mirrors production.
 
 ## Installation
 
-To install the plugin, use your package manager of choice:
+Install the plugin using your preferred package manager:
 
 ```sh
 npm install vite-plugin-storybook-nextjs
@@ -22,11 +22,11 @@ pnpm add vite-plugin-storybook-nextjs
 
 ## Usage
 
-### Setup Vitest
+### Set up Vitest
 
-To use the plugin, you need to set up Vitest in your project. You can do this by following the instructions in the [Vitest documentation](https://vitest.dev/guide/)
+To use the plugin, you need to set up Vitest in your project. You can do this by following the instructions in the [Vitest documentation](https://vitest.dev/guide/).
 
-### Add the plugin to your vitest configuration
+### Add the plugin to your Vitest configuration
 
 Add the plugin to your Vitest configuration file. This ensures that Vitest is aware of the Next.js features provided by the plugin.
 
@@ -40,16 +40,6 @@ export default defineConfig({
 });
 ```
 
-### Usage with portable stories
-
-[Portable stories](https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest) are Storybook stories which can be used in external environments, such as Vitest.
-
-This plugin is necessary to run portable stories in Vitest, as it provides the necessary Next.js features to ensure that your components are tested in an environment that closely mirrors production.
-
-#### Experimental @storybook/experimental-vitest-plugin
-
-The experimental `@storybook/experimental-vitest-plugin` can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visit https://github.com/storybookjs/vitest-plugin for more information.
-
 ## Configuration Options
 
 You can configure the plugin using the following options:
@@ -64,39 +54,65 @@ type VitePluginOptions = {
 };
 ```
 
+## Usage with portable stories
+
+[Portable stories](https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest) are Storybook stories which can be used in external environments, such as Vitest.
+
+This plugin is necessary to run portable stories in Vitest, as it provides the necessary Next.js features to ensure that your components are tested in an environment that closely mirrors production.
+
+## Automatic story transformation
+
+(⚠️ **Experimental**)
+
+The experimental `@storybook/experimental-vitest-plugin` can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visit https://github.com/storybookjs/vitest-plugin for more information.
+
 ## Limitations and differences to the Webpack5-based integration of Next.js in Storybook
 
-### next/font staticDir mapping obsolete
+### `next/font` `staticDir` mapping obsolete
 
-You don't need to map your custom font directory in Storybook's staticDir configuration. Vite will automatically serve the files in the public directory and provide assets during production build.
+You don't need to map your custom font directory in Storybook's `staticDir` configuration. Instead, Vite will automatically serve the files in the `public` directory and provide assets during production builds.
 
 ### CSS/SASS
 
-The `sassOptions` in `next.config.js` is not supported. Please use Vite's configuration options to configure the Sass compiler:
+The `sassOptions` property in `next.config.js` is not supported. Please use Vite's configuration options to configure the Sass compiler:
 
 ```js
 css: {
-    preprocessorOptions: {
-        scss: {
-            quietDeps: true
-        },
-    }
+  preprocessorOptions: {
+    scss: {
+      quietDeps: true
+    },
+  }
 },
 ```
 
 ### Next.js: Server Actions
 
-When using components that rely on Next.js Server Actions, there are some limitations to be aware of. Specifically, you need to ensure that your story files are set up to use the jsdom environment in Vitest for the case that your default Virtual DOM environment is set to happy-dom. This can be done by adding a special comment at the top of your story files:
+When testing components that rely on Next.js Server Actions, you need to ensure that your story files are [set up to use the `jsdom` environment in Vitest](https://vitest.dev/config/#environment). This can be done in two ways:
 
-```js
-// @vitest-environment jsdom
-```
+1. To apply it to individual story files, add a special comment at the top of each file:
+
+   ```js
+   // @vitest-environment jsdom
+   ```
+2. To apply it to all tests, adjust your Vitest configuration:
+   
+   ```ts
+   // vitest.config.ts
+   import { defineConfig } from "vite";
+   import nextjs from "vite-plugin-storybook-nextjs";
 
-This comment ensures that the components using Next.js Server Actions are properly handled in a jsdom environment, which is necessary for them to function correctly in Vitest.
+   export default defineConfig({
+     plugins: [nextjs()],
+     vitest: {
+       environment: "jsdom", // 👈 Add this
+     },
+   });
+   ```
 
-## SWC Mode
+### SWC Mode
 
-Only Next.js in SWC mode is supported. If you were forced to opt out of Babel for some reason, you will very likely encounter issues with this plugin (e.g., emotion support in SWC is still lacking behind).
+Only [Next.js in SWC mode](https://nextjs.org/docs/architecture/nextjs-compiler) is supported. If your project was forced to opt out of Babel for some reason, you will very likely encounter issues with this plugin (e.g., Emotion support in SWC is still lagging behind).
 
 ## License
 

package/dist/index.cjs

@@ -753,6 +753,9 @@ var vitePluginNextDynamic = () => ({
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 var isVitestEnv = process.env.VITEST === "true";
+function getExecutionEnvironment(config) {
+  return isVitestEnv && config.test?.browser?.enabled !== true ? "node" : "browser";
+}
 var require3 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
 var getEntryPoint = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias = (env) => ({
@@ -905,8 +908,8 @@ var getAlias2 = (env) => ({
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
-  config: (env) => {
-    const aliasEnv = isVitestEnv && env.test?.browser?.enabled !== true ? "node" : "browser";
+  config: (config) => {
+    const aliasEnv = getExecutionEnvironment(config);
     return {
       resolve: {
         alias: getAlias2(aliasEnv)
@@ -927,6 +930,7 @@ function VitePlugin({ dir = process.cwd() } = {}) {
       async config(config, env) {
         const phase = env.mode === "development" ? constants_js.PHASE_DEVELOPMENT_SERVER : env.mode === "test" ? constants_js.PHASE_TEST : constants_js.PHASE_PRODUCTION_BUILD;
         nextConfigResolver.resolve(await loadConfig__default.default(phase, resolvedDir));
+        const executionEnvironment = getExecutionEnvironment(config);
         return {
           ...!isVitestEnv && {
             resolve: {
@@ -945,6 +949,9 @@ function VitePlugin({ dir = process.cwd() } = {}) {
                 "next/dist/compiled/react/jsx-runtime.js"
               ),
               react: require6.resolve("next/dist/compiled/react"),
+              "react-dom/server": require6.resolve(
+                executionEnvironment === "node" ? "next/dist/compiled/react-dom/server.js" : "next/dist/compiled/react-dom/server.browser.js"
+              ),
               "react-dom/test-utils": require6.resolve(
                 "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
               ),

package/dist/index.js

@@ -738,6 +738,9 @@ var vitePluginNextDynamic = () => ({
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
 var isVitestEnv = process.env.VITEST === "true";
+function getExecutionEnvironment(config) {
+  return isVitestEnv && config.test?.browser?.enabled !== true ? "node" : "browser";
+}
 var require3 = createRequire(import.meta.url);
 var getEntryPoint = (subPath, env) => require3.resolve(`${VITEST_PLUGIN_NAME}/${env}/mocks/${subPath}`);
 var getAlias = (env) => ({
@@ -890,8 +893,8 @@ var getAlias2 = (env) => ({
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
-  config: (env) => {
-    const aliasEnv = isVitestEnv && env.test?.browser?.enabled !== true ? "node" : "browser";
+  config: (config) => {
+    const aliasEnv = getExecutionEnvironment(config);
     return {
       resolve: {
         alias: getAlias2(aliasEnv)
@@ -912,6 +915,7 @@ function VitePlugin({ dir = process.cwd() } = {}) {
       async config(config, env) {
         const phase = env.mode === "development" ? PHASE_DEVELOPMENT_SERVER : env.mode === "test" ? PHASE_TEST : PHASE_PRODUCTION_BUILD;
         nextConfigResolver.resolve(await loadConfig(phase, resolvedDir));
+        const executionEnvironment = getExecutionEnvironment(config);
         return {
           ...!isVitestEnv && {
             resolve: {
@@ -930,6 +934,9 @@ function VitePlugin({ dir = process.cwd() } = {}) {
                 "next/dist/compiled/react/jsx-runtime.js"
               ),
               react: require6.resolve("next/dist/compiled/react"),
+              "react-dom/server": require6.resolve(
+                executionEnvironment === "node" ? "next/dist/compiled/react-dom/server.js" : "next/dist/compiled/react-dom/server.browser.js"
+              ),
               "react-dom/test-utils": require6.resolve(
                 "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
               ),

package/dist/mocks/storybook.global.cjs

@@ -60,6 +60,7 @@ var getAlias2 = (env) => ({
 var require4 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.src || new URL('out.js', document.baseURI).href)));
 moduleAlias__default.default.addAliases({
   react: "next/dist/compiled/react",
+  "react-dom/server": "next/dist/compiled/react-dom/server.js",
   "react-dom/test-utils": require4.resolve(
     "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
   ),

package/dist/mocks/storybook.global.js

@@ -53,6 +53,7 @@ var getAlias2 = (env) => ({
 var require4 = createRequire(import.meta.url);
 moduleAlias.addAliases({
   react: "next/dist/compiled/react",
+  "react-dom/server": "next/dist/compiled/react-dom/server.js",
   "react-dom/test-utils": require4.resolve(
     "next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js"
   ),

package/dist/plugins/next-image/alias/next-image.d.cts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

package/dist/plugins/next-image/alias/next-image.d.ts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

package/dist/plugins/next-mocks/alias/headers/cookies.d.cts

@@ -4,7 +4,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.j
 
 declare class RequestCookiesMock extends RequestCookies {
     get: vitest.Mock<[name: string] | [next_dist_compiled__edge_runtime_cookies.RequestCookie], next_dist_compiled__edge_runtime_cookies.RequestCookie | undefined>;
-    getAll: vitest.Mock<[next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string] | [], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
+    getAll: vitest.Mock<[] | [next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
     has: vitest.Mock<[name: string], boolean>;
     set: vitest.Mock<[key: string, value: string] | [options: next_dist_compiled__edge_runtime_cookies.RequestCookie], this>;
     delete: vitest.Mock<[names: string | string[]], boolean | boolean[]>;

package/dist/plugins/next-mocks/alias/headers/cookies.d.ts

@@ -4,7 +4,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.j
 
 declare class RequestCookiesMock extends RequestCookies {
     get: vitest.Mock<[name: string] | [next_dist_compiled__edge_runtime_cookies.RequestCookie], next_dist_compiled__edge_runtime_cookies.RequestCookie | undefined>;
-    getAll: vitest.Mock<[next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string] | [], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
+    getAll: vitest.Mock<[] | [next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
     has: vitest.Mock<[name: string], boolean>;
     set: vitest.Mock<[key: string, value: string] | [options: next_dist_compiled__edge_runtime_cookies.RequestCookie], this>;
     delete: vitest.Mock<[names: string | string[]], boolean | boolean[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "",
   "keywords": [
     "vite-plugin",