@storybook/nextjs-vite 9.2.0-alpha.3 → 10.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +3 -1
  2. package/dist/_browser-chunks/chunk-2RWWBM6A.js +261 -0
  3. package/dist/_browser-chunks/chunk-L5NVL7MD.js +37 -0
  4. package/dist/_browser-chunks/react-18-G7Q4PNHD.js +71 -0
  5. package/dist/_node-chunks/chunk-IRJBSU6R.js +54 -0
  6. package/dist/_node-chunks/dist-DJQHMCL2.js +7476 -0
  7. package/dist/_node-chunks/jiti-B65Y7N6M.js +32362 -0
  8. package/dist/export-mocks/cache/index.d.ts +308 -1
  9. package/dist/export-mocks/cache/index.js +22 -1
  10. package/dist/export-mocks/headers/index.d.ts +309 -1
  11. package/dist/export-mocks/headers/index.js +77 -1
  12. package/dist/export-mocks/navigation/index.js +81 -1
  13. package/dist/export-mocks/router/index.d.ts +2 -2
  14. package/dist/export-mocks/router/index.js +97 -1
  15. package/dist/index.d.ts +51 -7
  16. package/dist/index.js +22153 -45
  17. package/dist/node/index.d.ts +25 -5
  18. package/dist/node/index.js +23 -1
  19. package/dist/preset.js +714 -580
  20. package/dist/preview.d.ts +3 -19
  21. package/dist/preview.d.tsx +19 -0
  22. package/dist/preview.js +11 -1
  23. package/dist/vite-plugin/index.d.ts +1 -3
  24. package/dist/vite-plugin/index.js +21 -1
  25. package/package.json +35 -83
  26. package/preset.js +1 -1
  27. package/template/cli/js/Configure.mdx +11 -11
  28. package/template/cli/ts/Configure.mdx +11 -11
  29. package/dist/chunk-GKRSUUNG.mjs +0 -6
  30. package/dist/chunk-J3BB7LEU.mjs +0 -20
  31. package/dist/chunk-XP5HYGXS.mjs +0 -3
  32. package/dist/export-mocks/cache/index.mjs +0 -6
  33. package/dist/export-mocks/headers/index.mjs +0 -12
  34. package/dist/export-mocks/navigation/index.mjs +0 -11
  35. package/dist/export-mocks/router/index.mjs +0 -10
  36. package/dist/images/decorator.d.ts +0 -6
  37. package/dist/images/decorator.js +0 -1
  38. package/dist/images/decorator.mjs +0 -2
  39. package/dist/index.d-ff220430.d.ts +0 -310
  40. package/dist/index.mjs +0 -57
  41. package/dist/node/index.mjs +0 -5
  42. package/dist/preset.d.ts +0 -9
  43. package/dist/preview.mjs +0 -3
  44. package/dist/react-18-IGIL3GJQ.mjs +0 -7
  45. package/dist/types-d044381e.d.ts +0 -52
  46. package/dist/vite-plugin/index.mjs +0 -6
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Storybook for Next.js with Vite Builder
2
2
 
3
- See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react) for installation instructions, usage examples, APIs, and more.
3
+ See [documentation](https://storybook.js.org/docs/get-started/frameworks/nextjs?renderer=react&ref=readme) for installation instructions, usage examples, APIs, and more.
4
4
 
5
5
  ## Acknowledgements
6
6
 
@@ -8,3 +8,5 @@ This framework borrows heavily from these Storybook addons:
8
8
 
9
9
  - [storybook-addon-next](https://github.com/RyanClementsHax/storybook-addon-next) by [RyanClementsHax](https://github.com/RyanClementsHax/)
10
10
  - [storybook-addon-next-router](https://github.com/lifeiscontent/storybook-addon-next-router) by [lifeiscontent](https://github.com/lifeiscontent)
11
+
12
+ Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
@@ -0,0 +1,261 @@
1
+ import {
2
+ __export,
3
+ __name
4
+ } from "./chunk-L5NVL7MD.js";
5
+
6
+ // src/preview.tsx
7
+ var preview_exports = {};
8
+ __export(preview_exports, {
9
+ decorators: () => decorators,
10
+ loaders: () => loaders,
11
+ parameters: () => parameters
12
+ });
13
+ import { createNavigation } from "@storybook/nextjs-vite/navigation.mock";
14
+ import { createRouter } from "@storybook/nextjs-vite/router.mock";
15
+ import { isNextRouterError } from "next/dist/client/components/is-next-router-error";
16
+
17
+ // src/config/preview.ts
18
+ import { setConfig } from "next/config";
19
+ setConfig(process.env.__NEXT_RUNTIME_CONFIG);
20
+
21
+ // src/head-manager/decorator.tsx
22
+ import * as React2 from "react";
23
+
24
+ // src/head-manager/head-manager-provider.tsx
25
+ import React, { useMemo } from "react";
26
+ import initHeadManager from "next/dist/client/head-manager";
27
+ import { HeadManagerContext } from "next/dist/shared/lib/head-manager-context.shared-runtime";
28
+ var HeadManagerProvider = /* @__PURE__ */ __name(({ children }) => {
29
+ const headManager = useMemo(initHeadManager, []);
30
+ headManager.getIsSsr = () => false;
31
+ return React.createElement(HeadManagerContext.Provider, { value: headManager }, children);
32
+ }, "HeadManagerProvider");
33
+ var head_manager_provider_default = HeadManagerProvider;
34
+
35
+ // src/head-manager/decorator.tsx
36
+ var HeadManagerDecorator = /* @__PURE__ */ __name((Story) => {
37
+ return React2.createElement(head_manager_provider_default, null, React2.createElement(Story, null));
38
+ }, "HeadManagerDecorator");
39
+
40
+ // src/images/decorator.tsx
41
+ import * as React3 from "react";
42
+ import { ImageContext } from "sb-original/image-context";
43
+ var ImageDecorator = /* @__PURE__ */ __name((Story, { parameters: parameters2 }) => {
44
+ if (!parameters2.nextjs?.image) {
45
+ return React3.createElement(Story, null);
46
+ }
47
+ return React3.createElement(ImageContext.Provider, { value: parameters2.nextjs.image }, React3.createElement(Story, null));
48
+ }, "ImageDecorator");
49
+
50
+ // src/routing/decorator.tsx
51
+ import * as React6 from "react";
52
+ import { RedirectBoundary } from "next/dist/client/components/redirect-boundary";
53
+
54
+ // src/routing/app-router-provider.tsx
55
+ import React4, { useMemo as useMemo2 } from "react";
56
+ import { getRouter } from "@storybook/nextjs-vite/navigation.mock";
57
+ import {
58
+ AppRouterContext,
59
+ GlobalLayoutRouterContext,
60
+ LayoutRouterContext
61
+ } from "next/dist/shared/lib/app-router-context.shared-runtime";
62
+ import {
63
+ PathParamsContext,
64
+ PathnameContext,
65
+ SearchParamsContext
66
+ } from "next/dist/shared/lib/hooks-client-context.shared-runtime";
67
+ import { PAGE_SEGMENT_KEY } from "next/dist/shared/lib/segment";
68
+ var getParallelRoutes = /* @__PURE__ */ __name((segmentsList) => {
69
+ const segment = segmentsList.shift();
70
+ if (segment) {
71
+ return [segment, { children: getParallelRoutes(segmentsList) }];
72
+ }
73
+ return [];
74
+ }, "getParallelRoutes");
75
+ var AppRouterProvider = /* @__PURE__ */ __name(({
76
+ children,
77
+ routeParams
78
+ }) => {
79
+ const { pathname, query, segments = [] } = routeParams;
80
+ const tree = [pathname, { children: getParallelRoutes([...segments]) }];
81
+ const pathParams = useMemo2(() => {
82
+ const params = {};
83
+ const currentSegments = routeParams.segments;
84
+ if (currentSegments) {
85
+ if (Array.isArray(currentSegments)) {
86
+ for (const segmentEntry of currentSegments) {
87
+ if (Array.isArray(segmentEntry) && segmentEntry.length === 2 && typeof segmentEntry[0] === "string") {
88
+ const key = segmentEntry[0];
89
+ const value = segmentEntry[1];
90
+ params[key] = value;
91
+ }
92
+ }
93
+ } else if (typeof currentSegments === "object" && !Array.isArray(currentSegments)) {
94
+ const segmentObject = currentSegments;
95
+ for (const key in segmentObject) {
96
+ if (Object.prototype.hasOwnProperty.call(segmentObject, key)) {
97
+ params[key] = segmentObject[key];
98
+ }
99
+ }
100
+ }
101
+ }
102
+ return params;
103
+ }, [routeParams.segments]);
104
+ const newLazyCacheNode = {
105
+ lazyData: null,
106
+ rsc: null,
107
+ prefetchRsc: null,
108
+ head: null,
109
+ prefetchHead: null,
110
+ parallelRoutes: /* @__PURE__ */ new Map(),
111
+ loading: null
112
+ };
113
+ return React4.createElement(PathParamsContext.Provider, { value: pathParams }, React4.createElement(PathnameContext.Provider, { value: pathname }, React4.createElement(SearchParamsContext.Provider, { value: new URLSearchParams(query) }, React4.createElement(
114
+ GlobalLayoutRouterContext.Provider,
115
+ {
116
+ value: {
117
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
118
+ // @ts-ignore (Only available in Next.js >= v15.1.1)
119
+ changeByServerResponse() {
120
+ },
121
+ buildId: "storybook",
122
+ tree,
123
+ focusAndScrollRef: {
124
+ apply: false,
125
+ hashFragment: null,
126
+ segmentPaths: [tree],
127
+ onlyHashChange: false
128
+ },
129
+ nextUrl: pathname
130
+ }
131
+ },
132
+ React4.createElement(AppRouterContext.Provider, { value: getRouter() }, React4.createElement(
133
+ LayoutRouterContext.Provider,
134
+ {
135
+ value: {
136
+ // TODO Remove when dropping Next.js < v15.1.1
137
+ childNodes: /* @__PURE__ */ new Map(),
138
+ tree,
139
+ // TODO END
140
+ // START Next.js v15.2 support
141
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
142
+ // @ts-ignore Only available in Next.js >= v15.1.1
143
+ parentTree: tree,
144
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
145
+ // @ts-ignore Only available in Next.js >= v15.1.1
146
+ parentCacheNode: newLazyCacheNode,
147
+ // END
148
+ url: pathname,
149
+ loading: null
150
+ }
151
+ },
152
+ children
153
+ ))
154
+ ))));
155
+ }, "AppRouterProvider");
156
+
157
+ // src/routing/page-router-provider.tsx
158
+ import React5 from "react";
159
+ import { getRouter as getRouter2 } from "@storybook/nextjs-vite/router.mock";
160
+ import { RouterContext } from "next/dist/shared/lib/router-context.shared-runtime";
161
+ var PageRouterProvider = /* @__PURE__ */ __name(({ children }) => React5.createElement(RouterContext.Provider, { value: getRouter2() }, children), "PageRouterProvider");
162
+
163
+ // src/routing/decorator.tsx
164
+ var defaultRouterParams = {
165
+ pathname: "/",
166
+ query: {}
167
+ };
168
+ var RouterDecorator = /* @__PURE__ */ __name((Story, { parameters: parameters2 }) => {
169
+ const nextAppDirectory = parameters2.nextjs?.appDirectory ?? false;
170
+ if (nextAppDirectory) {
171
+ if (!AppRouterProvider) {
172
+ return null;
173
+ }
174
+ return React6.createElement(
175
+ AppRouterProvider,
176
+ {
177
+ routeParams: {
178
+ ...defaultRouterParams,
179
+ ...parameters2.nextjs?.navigation
180
+ }
181
+ },
182
+ React6.createElement(RedirectBoundary, null, React6.createElement(Story, null))
183
+ );
184
+ }
185
+ return React6.createElement(PageRouterProvider, null, React6.createElement(Story, null));
186
+ }, "RouterDecorator");
187
+
188
+ // src/styledJsx/decorator.tsx
189
+ import * as React7 from "react";
190
+ import { StyleRegistry } from "styled-jsx";
191
+ var StyledJsxDecorator = /* @__PURE__ */ __name((Story) => React7.createElement(StyleRegistry, null, React7.createElement(Story, null)), "StyledJsxDecorator");
192
+
193
+ // src/preview.tsx
194
+ function addNextHeadCount() {
195
+ const meta = document.createElement("meta");
196
+ meta.name = "next-head-count";
197
+ meta.content = "0";
198
+ document.head.appendChild(meta);
199
+ }
200
+ __name(addNextHeadCount, "addNextHeadCount");
201
+ function isAsyncClientComponentError(error) {
202
+ return typeof error === "string" && (error.includes("Only Server Components can be async at the moment.") || error.includes("A component was suspended by an uncached promise.") || error.includes("async/await is not yet supported in Client Components"));
203
+ }
204
+ __name(isAsyncClientComponentError, "isAsyncClientComponentError");
205
+ addNextHeadCount();
206
+ var origConsoleError = globalThis.console.error;
207
+ globalThis.console.error = (...args) => {
208
+ const error = args[0];
209
+ if (isNextRouterError(error) || isAsyncClientComponentError(error)) {
210
+ return;
211
+ }
212
+ origConsoleError.apply(globalThis.console, args);
213
+ };
214
+ globalThis.addEventListener("error", (ev) => {
215
+ if (isNextRouterError(ev.error) || isAsyncClientComponentError(ev.error)) {
216
+ ev.preventDefault();
217
+ return;
218
+ }
219
+ });
220
+ var asDecorator = /* @__PURE__ */ __name((decorator) => decorator, "asDecorator");
221
+ var decorators = [
222
+ asDecorator(StyledJsxDecorator),
223
+ asDecorator(ImageDecorator),
224
+ asDecorator(RouterDecorator),
225
+ asDecorator(HeadManagerDecorator)
226
+ ];
227
+ var loaders = /* @__PURE__ */ __name(async ({ globals, parameters: parameters2 }) => {
228
+ const { router, appDirectory } = parameters2.nextjs ?? {};
229
+ if (appDirectory) {
230
+ createNavigation(router);
231
+ } else {
232
+ createRouter({
233
+ locale: globals.locale,
234
+ ...router
235
+ });
236
+ }
237
+ }, "loaders");
238
+ var parameters = {
239
+ docs: {
240
+ source: {
241
+ excludeDecorators: true
242
+ }
243
+ },
244
+ react: {
245
+ rootOptions: {
246
+ onCaughtError(error) {
247
+ if (isNextRouterError(error)) {
248
+ return;
249
+ }
250
+ console.error(error);
251
+ }
252
+ }
253
+ }
254
+ };
255
+
256
+ export {
257
+ decorators,
258
+ loaders,
259
+ parameters,
260
+ preview_exports
261
+ };
@@ -0,0 +1,37 @@
1
+ var __create = Object.create;
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getProtoOf = Object.getPrototypeOf;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
8
+ var __commonJS = (cb, mod) => function __require() {
9
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
10
+ };
11
+ var __export = (target, all) => {
12
+ for (var name in all)
13
+ __defProp(target, name, { get: all[name], enumerable: true });
14
+ };
15
+ var __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from))
18
+ if (!__hasOwnProp.call(to, key) && key !== except)
19
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
20
+ }
21
+ return to;
22
+ };
23
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
+ // If the importer is in node compatibility mode or this is not an ESM
25
+ // file that has been converted to a CommonJS file using a Babel-
26
+ // compatible transform (i.e. "__esModule" has not been set), then set
27
+ // "default" to the CommonJS "module.exports" for node compatibility.
28
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
29
+ mod
30
+ ));
31
+
32
+ export {
33
+ __name,
34
+ __commonJS,
35
+ __export,
36
+ __toESM
37
+ };
@@ -0,0 +1,71 @@
1
+ import {
2
+ __name
3
+ } from "./chunk-L5NVL7MD.js";
4
+
5
+ // ../../lib/react-dom-shim/dist/_browser-chunks/chunk-JK72E6FR.js
6
+ var __defProp = Object.defineProperty;
7
+ var __name2 = /* @__PURE__ */ __name((target, value) => __defProp(target, "name", { value, configurable: true }), "__name");
8
+
9
+ // ../../lib/react-dom-shim/dist/react-18.js
10
+ import * as React from "react";
11
+ import * as ReactDOM from "react-dom/client";
12
+ var nodes = /* @__PURE__ */ new Map();
13
+ function getIsReactActEnvironment() {
14
+ return globalThis.IS_REACT_ACT_ENVIRONMENT;
15
+ }
16
+ __name(getIsReactActEnvironment, "getIsReactActEnvironment");
17
+ __name2(getIsReactActEnvironment, "getIsReactActEnvironment");
18
+ var WithCallback = __name2(({
19
+ callback,
20
+ children
21
+ }) => {
22
+ const once = React.useRef();
23
+ React.useLayoutEffect(() => {
24
+ if (once.current === callback) {
25
+ return;
26
+ }
27
+ once.current = callback;
28
+ callback();
29
+ }, [callback]);
30
+ return children;
31
+ }, "WithCallback");
32
+ if (typeof Promise.withResolvers === "undefined") {
33
+ Promise.withResolvers = () => {
34
+ let resolve = null;
35
+ let reject = null;
36
+ const promise = new Promise((res, rej) => {
37
+ resolve = res;
38
+ reject = rej;
39
+ });
40
+ return { promise, resolve, reject };
41
+ };
42
+ }
43
+ var renderElement = __name2(async (node, el, rootOptions) => {
44
+ const root = await getReactRoot(el, rootOptions);
45
+ if (getIsReactActEnvironment()) {
46
+ root.render(node);
47
+ return;
48
+ }
49
+ const { promise, resolve } = Promise.withResolvers();
50
+ root.render(React.createElement(WithCallback, { callback: resolve }, node));
51
+ return promise;
52
+ }, "renderElement");
53
+ var unmountElement = __name2((el, shouldUseNewRootApi) => {
54
+ const root = nodes.get(el);
55
+ if (root) {
56
+ root.unmount();
57
+ nodes.delete(el);
58
+ }
59
+ }, "unmountElement");
60
+ var getReactRoot = __name2(async (el, rootOptions) => {
61
+ let root = nodes.get(el);
62
+ if (!root) {
63
+ root = ReactDOM.createRoot(el, rootOptions);
64
+ nodes.set(el, root);
65
+ }
66
+ return root;
67
+ }, "getReactRoot");
68
+ export {
69
+ renderElement,
70
+ unmountElement
71
+ };
@@ -0,0 +1,54 @@
1
+ import CJS_COMPAT_NODE_URL_vdcj7jnvotc from 'node:url';
2
+ import CJS_COMPAT_NODE_PATH_vdcj7jnvotc from 'node:path';
3
+ import CJS_COMPAT_NODE_MODULE_vdcj7jnvotc from "node:module";
4
+
5
+ var __filename = CJS_COMPAT_NODE_URL_vdcj7jnvotc.fileURLToPath(import.meta.url);
6
+ var __dirname = CJS_COMPAT_NODE_PATH_vdcj7jnvotc.dirname(__filename);
7
+ var require = CJS_COMPAT_NODE_MODULE_vdcj7jnvotc.createRequire(import.meta.url);
8
+
9
+ // ------------------------------------------------------------
10
+ // end of CJS compatibility banner, injected by Storybook's esbuild configuration
11
+ // ------------------------------------------------------------
12
+ var __create = Object.create;
13
+ var __defProp = Object.defineProperty;
14
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
15
+ var __getOwnPropNames = Object.getOwnPropertyNames;
16
+ var __getProtoOf = Object.getPrototypeOf;
17
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
18
+ var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
19
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
20
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
21
+ }) : x)(function(x) {
22
+ if (typeof require !== "undefined") return require.apply(this, arguments);
23
+ throw Error('Dynamic require of "' + x + '" is not supported');
24
+ });
25
+ var __esm = (fn, res) => function __init() {
26
+ return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
27
+ };
28
+ var __commonJS = (cb, mod) => function __require2() {
29
+ return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
30
+ };
31
+ var __copyProps = (to, from, except, desc) => {
32
+ if (from && typeof from === "object" || typeof from === "function") {
33
+ for (let key of __getOwnPropNames(from))
34
+ if (!__hasOwnProp.call(to, key) && key !== except)
35
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
36
+ }
37
+ return to;
38
+ };
39
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
40
+ // If the importer is in node compatibility mode or this is not an ESM
41
+ // file that has been converted to a CommonJS file using a Babel-
42
+ // compatible transform (i.e. "__esModule" has not been set), then set
43
+ // "default" to the CommonJS "module.exports" for node compatibility.
44
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
45
+ mod
46
+ ));
47
+
48
+ export {
49
+ __name,
50
+ __require,
51
+ __esm,
52
+ __commonJS,
53
+ __toESM
54
+ };