Merge pull request #28800 from storybookjs/valentin/nextjs-vite

Next.js: Add @storybook/nextjs-vite package

code/core/src/cli/helpers.ts

@@ -144,6 +144,7 @@ export const frameworkToDefaultBuilder: Record<SupportedFrameworks, CoreBuilder>
  'html-vite': CoreBuilder.Vite,
  'html-webpack5': CoreBuilder.Webpack5,
  nextjs: CoreBuilder.Webpack5,
+ 'experimental-nextjs-vite': CoreBuilder.Vite,
  'preact-vite': CoreBuilder.Vite,
  'preact-webpack5': CoreBuilder.Webpack5,
  qwik: CoreBuilder.Vite,

code/core/src/common/utils/framework-to-renderer.ts

@@ -11,6 +11,7 @@ export const frameworkToRenderer: Record<
  'html-vite': 'html',
  'html-webpack5': 'html',
  nextjs: 'react',
+ 'experimental-nextjs-vite': 'react',
  'preact-vite': 'preact',
  'preact-webpack5': 'preact',
  qwik: 'qwik',

code/core/src/common/versions.ts

@@ -41,6 +41,7 @@ export default {
  '@storybook/types': '8.3.0-alpha.4',
  '@storybook/angular': '8.3.0-alpha.4',
  '@storybook/ember': '8.3.0-alpha.4',
+ '@storybook/experimental-nextjs-vite': '8.3.0-alpha.4',
  '@storybook/html-vite': '8.3.0-alpha.4',
  '@storybook/html-webpack5': '8.3.0-alpha.4',
  '@storybook/nextjs': '8.3.0-alpha.4',

code/core/src/types/modules/frameworks.ts

@@ -2,6 +2,7 @@
 export type SupportedFrameworks =
  | 'angular'
  | 'ember'
+ | 'experimental-nextjs-vite'
  | 'html-vite'
  | 'html-webpack5'
  | 'nextjs'

code/frameworks/experimental-nextjs-vite/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+ "rules": {
+ "global-require": "off",
+ "no-param-reassign": "off",
+ "import/no-dynamic-require": "off",
+ "import/no-unresolved": "off"
+ },
+ "overrides": [
+ {
+ "files": ["**/*.stories.@(jsx|tsx)"],
+ "rules": {
+ "react/no-unknown-property": "off",
+ "jsx-a11y/anchor-is-valid": "off"
+ }
+ },
+ {
+ "files": ["**/*.compat.@(tsx|ts)"],
+ "rules": {
+ "local-rules/no-uncategorized-errors": "off"
+ }
+ }
+ ]
+}

code/frameworks/experimental-nextjs-vite/README.md

@@ -0,0 +1,10 @@
+# Storybook for Next.js with Vite Builder
+
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more.
+
+## Acknowledgements
+
+This framework borrows heavily from these Storybook addons:
+
+- [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
+- [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)

code/frameworks/experimental-nextjs-vite/package.json

@@ -0,0 +1,143 @@
+{
+ "name": "@storybook/experimental-nextjs-vite",
+ "version": "8.3.0-alpha.4",
+ "description": "Storybook for Next.js and Vite",
+ "keywords": [
+ "storybook",
+ "nextjs",
+ "vite"
+ ],
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/experimental-nextjs-vite",
+ "bugs": {
+ "url": "https://github.com/storybookjs/storybook/issues"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/storybookjs/storybook.git",
+ "directory": "code/frameworks/nextjs"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/storybook"
+ },
+ "license": "MIT",
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "node": "./dist/index.js",
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.js"
+ },
+ "./preset": {
+ "types": "./dist/preset.d.ts",
+ "require": "./dist/preset.js"
+ },
+ "./dist/preview.mjs": "./dist/preview.mjs",
+ "./cache.mock": {
+ "types": "./dist/export-mocks/cache/index.d.ts",
+ "import": "./dist/export-mocks/cache/index.mjs",
+ "require": "./dist/export-mocks/cache/index.js"
+ },
+ "./headers.mock": {
+ "types": "./dist/export-mocks/headers/index.d.ts",
+ "import": "./dist/export-mocks/headers/index.mjs",
+ "require": "./dist/export-mocks/headers/index.js"
+ },
+ "./navigation.mock": {
+ "types": "./dist/export-mocks/navigation/index.d.ts",
+ "import": "./dist/export-mocks/navigation/index.mjs",
+ "require": "./dist/export-mocks/navigation/index.js"
+ },
+ "./router.mock": {
+ "types": "./dist/export-mocks/router/index.d.ts",
+ "import": "./dist/export-mocks/router/index.mjs",
+ "require": "./dist/export-mocks/router/index.js"
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.js",
+ "module": "dist/index.mjs",
+ "types": "dist/index.d.ts",
+ "typesVersions": {
+ "*": {
+ "*": [
+ "dist/index.d.ts"
+ ],
+ "cache.mock": [
+ "dist/export-mocks/cache/index.d.ts"
+ ],
+ "headers.mock": [
+ "dist/export-mocks/headers/index.d.ts"
+ ],
+ "router.mock": [
+ "dist/export-mocks/router/index.d.ts"
+ ],
+ "navigation.mock": [
+ "dist/export-mocks/navigation/index.d.ts"
+ ]
+ }
+ },
+ "files": [
+ "dist/**/*",
+ "template/cli/**/*",
+ "README.md",
+ "*.js",
+ "*.d.ts",
+ "!src/**/*"
+ ],
+ "scripts": {
+ "check": "jiti ../../../scripts/prepare/check.ts",
+ "prep": "jiti ../../../scripts/prepare/bundle.ts"
+ },
+ "dependencies": {
+ "@storybook/builder-vite": "workspace:*",
+ "@storybook/react": "workspace:*",
+ "@storybook/test": "workspace:*",
+ "styled-jsx": "5.1.6"
+ },
+ "devDependencies": {
+ "@types/node": "^18.0.0",
+ "next": "^14.2.5",
+ "typescript": "^5.3.2",
+ "vite-plugin-storybook-nextjs": "^1.0.0"
+ },
+ "peerDependencies": {
+ "next": "^14.2.5",
+ "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.0"
+ },
+ "peerDependenciesMeta": {
+ "typescript": {
+ "optional": true
+ }
+ },
+ "optionalDependencies": {
+ "sharp": "^0.33.3"
+ },
+ "engines": {
+ "node": ">=18.0.0"
+ },
+ "publishConfig": {
+ "access": "public"
+ },
+ "bundler": {
+ "entries": [
+ "./src/index.ts",
+ "./src/preset.ts",
+ "./src/preview.tsx",
+ "./src/export-mocks/cache/index.ts",
+ "./src/export-mocks/headers/index.ts",
+ "./src/export-mocks/router/index.ts",
+ "./src/export-mocks/navigation/index.ts",
+ "./src/images/decorator.tsx"
+ ],
+ "externals": [
+ "sb-original/image-context"
+ ],
+ "platform": "node"
+ },
+ "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}

code/frameworks/experimental-nextjs-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/experimental-nextjs-vite/project.json

@@ -0,0 +1,8 @@
+{
+ "name": "experimental-nextjs-vite",
+ "$schema": "../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "library",
+ "targets": {
+ "build": {}
+ }
+}

code/frameworks/experimental-nextjs-vite/src/config/preview.ts

@@ -0,0 +1,4 @@
+import { setConfig } from 'next/config';
+
+// eslint-disable-next-line no-underscore-dangle
+setConfig(process.env.__NEXT_RUNTIME_CONFIG);

code/frameworks/experimental-nextjs-vite/src/export-mocks/cache/index.ts

@@ -0,0 +1,23 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import { fn } from '@storybook/test';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+type Callback = (...args: any[]) => Promise<any>;
+
+// mock utilities/overrides (as of Next v14.2.0)
+const revalidatePath = fn().mockName('next/cache::revalidatePath');
+const revalidateTag = fn().mockName('next/cache::revalidateTag');
+const unstable_cache = fn()
+ .mockName('next/cache::unstable_cache')
+ .mockImplementation((cb: Callback) => cb);
+const unstable_noStore = fn().mockName('next/cache::unstable_noStore');
+
+const cacheExports = {
+ unstable_cache,
+ revalidateTag,
+ revalidatePath,
+ unstable_noStore,
+};
+
+export default cacheExports;
+export { unstable_cache, revalidateTag, revalidatePath, unstable_noStore };

code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/cookies.ts

@@ -0,0 +1,39 @@
+// We need this import to be a singleton, and because it's used in multiple entrypoints
+// both in ESM and CJS, importing it via the package name instead of having a local import
+// is the only way to achieve it actually being a singleton
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore we must ignore types here as during compilation they are not generated yet
+import { headers } from '@storybook/nextjs/headers.mock';
+import { fn } from '@storybook/test';
+
+import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
+
+class RequestCookiesMock extends RequestCookies {
+ get = fn(super.get.bind(this)).mockName('next/headers::cookies().get');
+
+ getAll = fn(super.getAll.bind(this)).mockName('next/headers::cookies().getAll');
+
+ has = fn(super.has.bind(this)).mockName('next/headers::cookies().has');
+
+ set = fn(super.set.bind(this)).mockName('next/headers::cookies().set');
+
+ delete = fn(super.delete.bind(this)).mockName('next/headers::cookies().delete');
+}
+
+let requestCookiesMock: RequestCookiesMock;
+
+export const cookies = fn(() => {
+ if (!requestCookiesMock) {
+ requestCookiesMock = new RequestCookiesMock(headers());
+ }
+ return requestCookiesMock;
+}).mockName('next/headers::cookies()');
+
+const originalRestore = cookies.mockRestore.bind(null);
+
+// will be called automatically by the test loader
+cookies.mockRestore = () => {
+ originalRestore();
+ headers.mockRestore();
+ requestCookiesMock = new RequestCookiesMock(headers());
+};

code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/headers.ts

@@ -0,0 +1,39 @@
+import { fn } from '@storybook/test';
+
+import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers';
+
+class HeadersAdapterMock extends HeadersAdapter {
+ constructor() {
+ super({});
+ }
+
+ append = fn(super.append.bind(this)).mockName('next/headers::headers().append');
+
+ delete = fn(super.delete.bind(this)).mockName('next/headers::headers().delete');
+
+ get = fn(super.get.bind(this)).mockName('next/headers::headers().get');
+
+ has = fn(super.has.bind(this)).mockName('next/headers::headers().has');
+
+ set = fn(super.set.bind(this)).mockName('next/headers::headers().set');
+
+ forEach = fn(super.forEach.bind(this)).mockName('next/headers::headers().forEach');
+
+ entries = fn(super.entries.bind(this)).mockName('next/headers::headers().entries');
+
+ keys = fn(super.keys.bind(this)).mockName('next/headers::headers().keys');
+
+ values = fn(super.values.bind(this)).mockName('next/headers::headers().values');
+}
+
+let headersAdapterMock: HeadersAdapterMock;
+
+export const headers = () => {
+ if (!headersAdapterMock) headersAdapterMock = new HeadersAdapterMock();
+ return headersAdapterMock;
+};
+
+// This fn is called by ./cookies to restore the headers in the right order
+headers.mockRestore = () => {
+ headersAdapterMock = new HeadersAdapterMock();
+};

code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts

@@ -0,0 +1,14 @@
+import { fn } from '@storybook/test';
+
+import * as originalHeaders from 'next/dist/client/components/headers';
+
+// re-exports of the actual module
+export * from 'next/dist/client/components/headers';
+
+// mock utilities/overrides (as of Next v14.2.0)
+export { headers } from './headers';
+export { cookies } from './cookies';
+
+// passthrough mocks - keep original implementation but allow for spying
+const draftMode = fn(originalHeaders.draftMode).mockName('draftMode');
+export { draftMode };