Merge pull request #29012 from storybookjs/valentin/re-export-next-js…

…-vite-plugin Nextjs-Vite: Re-export vite-plugin-storybook-nextjs
storybookjs · Sep 2, 2024 · 56b28c0 · 56b28c0
2 parents acd2b70 + f945473
commit 56b28c0
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 27 deletions.
diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts
@@ -64,10 +64,19 @@ export default async function postInstall(options: PostinstallOptions) {
  logger.info(
  dedent`
  We detected that you're using Next.js.
- We will configure the vite-plugin-storybook-nextjs plugin to allow you to run tests in Vitest.
+ We will configure the @storybook/experimental-nextjs-vite/vite-plugin to allow you to run tests in Vitest.
  `
  );
- packages.push('vite-plugin-storybook-nextjs@latest');
+
+ try {
+ const storybookVersion = await packageManager.getInstalledVersion('storybook');
+
+ packages.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`);
+ } catch (e) {
+ console.error(
+ 'Failed to install @storybook/experimental-nextjs-vite. Please install it manually'
+ );
+ }
  }
 
  logger.info(c.bold('Installing packages...'));
@@ -189,8 +198,9 @@ const getVitestPluginInfo = (framework: string) => {
  let frameworkPluginCall = '';
 
  if (framework === '@storybook/nextjs') {
- frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
- frameworkPluginCall = 'vitePluginNext()';
+ frameworkPluginImport =
+ "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+ frameworkPluginCall = 'storybookNextJsPlugin()';
  }
 
  if (framework === '@storybook/sveltekit') {

diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
@@ -53,6 +53,11 @@
  "import": "./dist/export-mocks/router/index.mjs",
  "require": "./dist/export-mocks/router/index.js"
  },
+ "./vite-plugin": {
+ "types": "./dist/vite-plugin/index.d.ts",
+ "import": "./dist/vite-plugin/index.js",
+ "require": "./dist/vite-plugin/index.cjs"
+ },
  "./package.json": "./package.json"
  },
  "main": "dist/index.js",
@@ -93,21 +98,20 @@
  "@storybook/builder-vite": "workspace:*",
  "@storybook/react": "workspace:*",
  "@storybook/test": "workspace:*",
- "styled-jsx": "5.1.6"
+ "styled-jsx": "5.1.6",
+ "vite-plugin-storybook-nextjs": "^1.0.10"
  },
  "devDependencies": {
  "@types/node": "^18.0.0",
  "next": "^14.2.5",
- "typescript": "^5.3.2",
- "vite-plugin-storybook-nextjs": "^1.0.0"
+ "typescript": "^5.3.2"
  },
  "peerDependencies": {
  "next": "^14.1.0",
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
  "storybook": "workspace:^",
- "vite": "^5.0.0",
- "vite-plugin-storybook-nextjs": "^1.0.8"
+ "vite": "^5.0.0"
  },
  "peerDependenciesMeta": {
  "typescript": {
@@ -126,6 +130,7 @@
  "bundler": {
  "entries": [
  "./src/index.ts",
+ "./src/vite-plugin/index.ts",
  "./src/preset.ts",
  "./src/preview.tsx",
  "./src/export-mocks/cache/index.ts",

diff --git a/code/frameworks/experimental-nextjs-vite/src/index.ts b/code/frameworks/experimental-nextjs-vite/src/index.ts
@@ -1,2 +1,10 @@
+import type vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
 export * from './types';
 export * from './portable-stories';
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+declare module '@storybook/experimental-nextjs-vite/vite-plugin' {
+ export const storybookNextJsPlugin: typeof vitePluginStorybookNextJs;
+}
diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -6,7 +6,6 @@ import type { PresetProperty } from 'storybook/internal/types';
 import type { StorybookConfigVite } from '@storybook/builder-vite';
 
 import { dirname, join } from 'path';
-// @ts-expect-error - tsconfig settings have to be moduleResolution=Bundler and module=Preserve
 import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs';
 
 import type { FrameworkOptions } from './types';

diff --git a/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts b/code/frameworks/experimental-nextjs-vite/src/vite-plugin/index.ts
@@ -0,0 +1,3 @@
+import vitePluginStorybookNextJs from 'vite-plugin-storybook-nextjs';
+
+export const storybookNextJsPlugin = vitePluginStorybookNextJs;
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -216,12 +216,7 @@ const baseTemplates = {
  framework: '@storybook/experimental-nextjs-vite',
  features: { experimentalRSC: true },
  },
- extraDependencies: [
- 'server-only',
- 'vite-plugin-storybook-nextjs',
- '@storybook/experimental-nextjs-vite',
- 'vite',
- ],
+ extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'],
  },
  skipTasks: ['e2e-tests-dev', 'bench'],
  },

diff --git a/code/yarn.lock b/code/yarn.lock
@@ -6155,14 +6155,13 @@ __metadata:
  sharp: "npm:^0.33.3"
  styled-jsx: "npm:5.1.6"
  typescript: "npm:^5.3.2"
- vite-plugin-storybook-nextjs: "npm:^1.0.0"
+ vite-plugin-storybook-nextjs: "npm:^1.0.10"
  peerDependencies:
  next: ^14.1.0
  react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
  react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
  storybook: "workspace:^"
  vite: ^5.0.0
- vite-plugin-storybook-nextjs: ^1.0.8
  dependenciesMeta:
  sharp:
  optional: true
@@ -28374,9 +28373,9 @@ __metadata:
  languageName: node
  linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^1.0.0":
- version: 1.0.0
- resolution: "vite-plugin-storybook-nextjs@npm:1.0.0"
+"vite-plugin-storybook-nextjs@npm:^1.0.10":
+ version: 1.0.10
+ resolution: "vite-plugin-storybook-nextjs@npm:1.0.10"
  dependencies:
  "@next/env": "npm:^14.2.5"
  image-size: "npm:^1.1.1"
@@ -28386,13 +28385,13 @@ __metadata:
  ts-dedent: "npm:^2.2.0"
  peerDependencies:
  "@storybook/test": ^8.3.0-alpha.3
- next: ^14.2.5
+ next: ^14.1.0
  storybook: ^8.3.0-alpha.3
  vite: ^5.0.0
  dependenciesMeta:
  sharp:
  optional: true
- checksum: 10c0/6ca17326e0387044d7bfa4373e6ccb64e8bb5bec1f19898ba9b8338c7817d8bea0fb01169adfb623f652fded5e6f59170129f7c8c4d4c3c54ca3764727e5a195
+ checksum: 10c0/e0e373ef94e1761b871b2cc846c205a846901d93c7e61f9d9ee3c69740681e42e6403a7d61109c59f2d98d5829476c3e6d4e9d5a329c4bd51e758b763fa8ea9e
  languageName: node
  linkType: hard
 

diff --git a/docs/api/portable-stories/portable-stories-vitest.mdx b/docs/api/portable-stories/portable-stories-vitest.mdx
@@ -28,7 +28,7 @@ sidebar:
 
  <If renderer="react">
  <Callout variant="warning">
- **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the [`vite-plugin-storybook-nextjs`](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
+ **Using `Next.js`?** You can test your Next.js stories with Vitest by installing and setting up the `@storybook/experimental-nextjs-vite` which re-exports [vite-plugin-storybook-nextjs](https://github.com/storybookjs/vite-plugin-storybook-nextjs) package. 
  </Callout>
  </If>
 

diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
@@ -369,8 +369,9 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
  const isSveltekit = framework.includes('sveltekit');
 
  if (isNextjs) {
- frameworkPluginImport = "import vitePluginNext from 'vite-plugin-storybook-nextjs'";
- frameworkPluginCall = 'vitePluginNext()';
+ frameworkPluginImport =
+ "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'";
+ frameworkPluginCall = 'storybookNextJsPlugin()';
  }
 
  if (isSveltekit) {

diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
@@ -98,7 +98,7 @@ export const sandbox: Task = {
  );
 
  if (details.template.expected.framework.includes('nextjs')) {
- extraDeps.push('vite-plugin-storybook-nextjs', 'jsdom');
+ extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom');
  }
 
  // if (details.template.expected.renderer === '@storybook/svelte') {