vite-plugin-storybook-nextjs 1.0.2--canary.12.6dea25b.0 → 1.0.2--canary.8683acb.0

package/README.md

@@ -1,6 +1,6 @@
 # vite-plugin-storybook-nextjs
 
-This is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for `@storybook/nextjs-vite` and should be used when running portable stories in Vitest.
+This is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for `@storybook/experimental-nextjs-vite` and should be used when running portable stories in Vitest.
 
 ## Features
 
@@ -10,7 +10,7 @@ This is a Vite plugin that allows you to use Next.js features in Vite. It is the
 
 ## Installation
 
-Install the plugin using your preferred package manager:
+To install the plugin, use your package manager of choice:
 
 ```sh
 npm install vite-plugin-storybook-nextjs
@@ -22,11 +22,11 @@ pnpm add vite-plugin-storybook-nextjs
 
 ## Usage
 
-### Set up Vitest
+### Setup 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.
 
@@ -46,7 +46,7 @@ export default defineConfig({
 
 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
+#### 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.
 
@@ -66,51 +66,37 @@ type VitePluginOptions = {
 
 ## 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. Instead, Vite will automatically serve the files in the `public` directory and provide assets during production builds.
+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.
 
 ### CSS/SASS
 
-The `sassOptions` property in `next.config.js` is not supported. Please use Vite's configuration options to configure the Sass compiler:
+The `sassOptions` 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 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:
+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:
 
-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";
+```js
+// @vitest-environment jsdom
+```
 
-   export default defineConfig({
-     plugins: [nextjs()],
-     vitest: {
-       environment: "jsdom", // 👈 Add this
-     },
-   });
-   ```
+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.
 
 ## SWC Mode
 
-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 lacking behind).
+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).
 
 ## License
 

package/dist/index.cjs

@@ -878,15 +878,28 @@ var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
   "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/experimental-nextjs-vite/headers.mock": getEntryPoint2(
+    "headers",
+    env
+  ),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
   "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/experimental-nextjs-vite/navigation.mock": getEntryPoint2(
+    "navigation",
+    env
+  ),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
   "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
+  "@storybook/experimental-nextjs-vite/router.mock": getEntryPoint2(
+    "router",
+    env
+  ),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
   "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/experimental-nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
     "next/dist/compiled/@opentelemetry/api"

package/dist/index.js

@@ -863,15 +863,28 @@ var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
   "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/experimental-nextjs-vite/headers.mock": getEntryPoint2(
+    "headers",
+    env
+  ),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
   "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/experimental-nextjs-vite/navigation.mock": getEntryPoint2(
+    "navigation",
+    env
+  ),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
   "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
+  "@storybook/experimental-nextjs-vite/router.mock": getEntryPoint2(
+    "router",
+    env
+  ),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
   "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/experimental-nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
     "next/dist/compiled/@opentelemetry/api"

package/dist/mocks/storybook.global.cjs

@@ -31,15 +31,28 @@ var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
   "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/experimental-nextjs-vite/headers.mock": getEntryPoint2(
+    "headers",
+    env
+  ),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
   "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/experimental-nextjs-vite/navigation.mock": getEntryPoint2(
+    "navigation",
+    env
+  ),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
   "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
+  "@storybook/experimental-nextjs-vite/router.mock": getEntryPoint2(
+    "router",
+    env
+  ),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
   "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/experimental-nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require2.resolve(
     "next/dist/compiled/@opentelemetry/api"

package/dist/mocks/storybook.global.js

@@ -24,15 +24,28 @@ var getAlias2 = (env) => ({
   "next/headers": getEntryPoint2("headers", env),
   "@storybook/nextjs/headers.mock": getEntryPoint2("headers", env),
   "@storybook/nextjs-vite/headers.mock": getEntryPoint2("headers", env),
+  "@storybook/experimental-nextjs-vite/headers.mock": getEntryPoint2(
+    "headers",
+    env
+  ),
   "next/navigation": getEntryPoint2("navigation", env),
   "@storybook/nextjs/navigation.mock": getEntryPoint2("navigation", env),
   "@storybook/nextjs-vite/navigation.mock": getEntryPoint2("navigation", env),
+  "@storybook/experimental-nextjs-vite/navigation.mock": getEntryPoint2(
+    "navigation",
+    env
+  ),
   "next/router": getEntryPoint2("router", env),
   "@storybook/nextjs/router.mock": getEntryPoint2("router", env),
   "@storybook/nextjs-vite/router.mock": getEntryPoint2("router", env),
+  "@storybook/experimental-nextjs-vite/router.mock": getEntryPoint2(
+    "router",
+    env
+  ),
   "next/cache": getEntryPoint2("cache", env),
   "@storybook/nextjs/cache.mock": getEntryPoint2("cache", env),
   "@storybook/nextjs-vite/cache.mock": getEntryPoint2("cache", env),
+  "@storybook/experimental-nextjs-vite/cache.mock": getEntryPoint2("cache", env),
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require2.resolve(
     "next/dist/compiled/@opentelemetry/api"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "1.0.2--canary.12.6dea25b.0",
+  "version": "1.0.2--canary.8683acb.0",
   "description": "",
   "keywords": [
     "vite-plugin",