diff --git a/code/addons/vitest/src/postinstall.ts b/code/addons/vitest/src/postinstall.ts index 3ffcd813628e..dd5c284723b5 100644 --- 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 index e9580cdf4b84..f67aba1b37e9 100644 --- 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 index a904f93ec89d..32476387c88c 100644 --- 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 index 6af7f9a877f0..0a725be35804 100644 --- 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 new file mode 100644 index 000000000000..2b8e5dff5622 --- /dev/null +++ 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 index ffdbccdd5e4d..f5937d53714b 100644 --- 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 index e7023fe8c13f..9b8a426f6016 100644 --- 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 index a764fbe28a56..115f3d50b949 100644 --- a/docs/api/portable-stories/portable-stories-vitest.mdx +++ b/docs/api/portable-stories/portable-stories-vitest.mdx @@ -28,7 +28,7 @@ sidebar: - **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. diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 34c7e20c0606..69af0a63fda3 100644 --- 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 index 2bb4e6e3999c..ae175fe3c13c 100644 --- 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') {