vite-plugin-storybook-nextjs 0.0.14 → 0.0.15

package/dist/index.cjs

@@ -21,6 +21,7 @@ var utils_js = require('next/dist/build/utils.js');
 var options_js = require('next/dist/build/swc/options.js');
 var loadConfig = require('next/dist/server/config.js');
 var constants_js = require('next/dist/shared/lib/constants.js');
+var MagicString = require('magic-string');
 var os = require('os');
 var querystring = require('querystring');
 var imageSizeOf = require('image-size');
@@ -35,6 +36,7 @@ var fs2__default = /*#__PURE__*/_interopDefault(fs2);
 var loaderUtils__default = /*#__PURE__*/_interopDefault(loaderUtils);
 var loadJsConfig__default = /*#__PURE__*/_interopDefault(loadJsConfig);
 var loadConfig__default = /*#__PURE__*/_interopDefault(loadConfig);
+var MagicString__default = /*#__PURE__*/_interopDefault(MagicString);
 var imageSizeOf__default = /*#__PURE__*/_interopDefault(imageSizeOf);
 
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
@@ -727,6 +729,28 @@ if (typeof Promise.withResolvers === "undefined") {
     return { promise, resolve: resolve4, reject };
   };
 }
+var vitePluginNextDynamic = () => ({
+  name: "vite-plugin-storybook-nextjs-dynamic",
+  transform(code, id) {
+    const dynamicImportRegex = /dynamic\(\s*async\s*\(\s*\)\s*=>\s*\{\s*typeof\s*require\.resolveWeak\s*!==\s*"undefined"\s*&&\s*require\.resolveWeak\(([^)]+)\);\s*\}/g;
+    if (dynamicImportRegex.test(code)) {
+      const s = new MagicString__default.default(code);
+      dynamicImportRegex.lastIndex = 0;
+      let match = dynamicImportRegex.exec(code);
+      while (match !== null) {
+        const [fullMatch, importPath] = match;
+        const newImport = `dynamic(() => import(${importPath})`;
+        s.overwrite(match.index, match.index + fullMatch.length, newImport);
+        match = dynamicImportRegex.exec(code);
+      }
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true })
+      };
+    }
+    return null;
+  }
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
@@ -866,7 +890,8 @@ var getAlias2 = (env) => ({
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
     "next/dist/compiled/@opentelemetry/api"
-  )
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
@@ -937,7 +962,8 @@ function VitePlugin({ dir = process.cwd() } = {}) {
     vitePluginNextSwc(dir, nextConfigResolver),
     vitePluginNextEnv(dir, nextConfigResolver),
     vitePluginNextImage(nextConfigResolver),
-    vitePluginNextMocks()
+    vitePluginNextMocks(),
+    vitePluginNextDynamic()
   ];
 }
 var src_default = VitePlugin;

package/dist/index.js

@@ -19,6 +19,7 @@ import { getSupportedBrowsers } from 'next/dist/build/utils.js';
 import { getParserOptions } from 'next/dist/build/swc/options.js';
 import loadConfig from 'next/dist/server/config.js';
 import { PHASE_DEVELOPMENT_SERVER, PHASE_TEST, PHASE_PRODUCTION_BUILD } from 'next/dist/shared/lib/constants.js';
+import MagicString from 'magic-string';
 import { cpus } from 'node:os';
 import { decode } from 'node:querystring';
 import imageSizeOf from 'image-size';
@@ -713,6 +714,28 @@ if (typeof Promise.withResolvers === "undefined") {
     return { promise, resolve: resolve4, reject };
   };
 }
+var vitePluginNextDynamic = () => ({
+  name: "vite-plugin-storybook-nextjs-dynamic",
+  transform(code, id) {
+    const dynamicImportRegex = /dynamic\(\s*async\s*\(\s*\)\s*=>\s*\{\s*typeof\s*require\.resolveWeak\s*!==\s*"undefined"\s*&&\s*require\.resolveWeak\(([^)]+)\);\s*\}/g;
+    if (dynamicImportRegex.test(code)) {
+      const s = new MagicString(code);
+      dynamicImportRegex.lastIndex = 0;
+      let match = dynamicImportRegex.exec(code);
+      while (match !== null) {
+        const [fullMatch, importPath] = match;
+        const newImport = `dynamic(() => import(${importPath})`;
+        s.overwrite(match.index, match.index + fullMatch.length, newImport);
+        match = dynamicImportRegex.exec(code);
+      }
+      return {
+        code: s.toString(),
+        map: s.generateMap({ hires: true })
+      };
+    }
+    return null;
+  }
+});
 
 // src/utils.ts
 var VITEST_PLUGIN_NAME = "vite-plugin-storybook-nextjs";
@@ -852,7 +875,8 @@ var getAlias2 = (env) => ({
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require4.resolve(
     "next/dist/compiled/@opentelemetry/api"
-  )
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 var vitePluginNextMocks = () => ({
   name: "vite-plugin-next-mocks",
@@ -923,7 +947,8 @@ function VitePlugin({ dir = process.cwd() } = {}) {
     vitePluginNextSwc(dir, nextConfigResolver),
     vitePluginNextEnv(dir, nextConfigResolver),
     vitePluginNextImage(nextConfigResolver),
-    vitePluginNextMocks()
+    vitePluginNextMocks(),
+    vitePluginNextDynamic()
   ];
 }
 var src_default = VitePlugin;

package/dist/mocks/storybook.global.cjs

@@ -43,7 +43,8 @@ var getAlias2 = (env) => ({
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require2.resolve(
     "next/dist/compiled/@opentelemetry/api"
-  )
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 
 // src/mocks/storybook.global.ts

package/dist/mocks/storybook.global.js

@@ -36,7 +36,8 @@ var getAlias2 = (env) => ({
   "server-only": getEntryPoint2("server-only", env),
   "@opentelemetry/api": require2.resolve(
     "next/dist/compiled/@opentelemetry/api"
-  )
+  ),
+  "next/dynamic": getEntryPoint2("dynamic", env)
 });
 
 // src/mocks/storybook.global.ts

package/dist/plugins/next-mocks/alias/dynamic/index.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Loadable = require('next/dist/shared/lib/loadable.shared-runtime.js');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Loadable__default = /*#__PURE__*/_interopDefault(Loadable);
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/plugins/next-mocks/alias/dynamic/index.tsx
+function convertModule(mod) {
+  return { default: mod?.default || mod };
+}
+function noSSR() {
+  throw new Error("noSSR is not implemented in Storybook");
+}
+function dynamic(dynamicOptions, options) {
+  const loadableFn = Loadable__default.default;
+  if (options?.ssr === false) {
+    delete options.ssr;
+  }
+  let loadableOptions = {
+    // A loading component is not required, so we default it
+    loading: ({ error, isLoading, pastDelay }) => {
+      if (!pastDelay) return null;
+      if (process.env.NODE_ENV !== "production") {
+        if (isLoading) {
+          return null;
+        }
+        if (error) {
+          return /* @__PURE__ */ React__default.default.createElement("p", null, error.message, /* @__PURE__ */ React__default.default.createElement("br", null), error.stack);
+        }
+      }
+      return null;
+    }
+  };
+  if (dynamicOptions instanceof Promise) {
+    loadableOptions.loader = () => dynamicOptions;
+  } else if (typeof dynamicOptions === "function") {
+    loadableOptions.loader = dynamicOptions;
+  } else if (typeof dynamicOptions === "object") {
+    loadableOptions = { ...loadableOptions, ...dynamicOptions };
+  }
+  loadableOptions = { ...loadableOptions, ...options };
+  const loaderFn = loadableOptions.loader;
+  const loader = () => loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(() => null));
+  if (loadableOptions.loadableGenerated) {
+    loadableOptions = {
+      ...loadableOptions,
+      ...loadableOptions.loadableGenerated
+    };
+    delete loadableOptions.loadableGenerated;
+  }
+  return loadableFn({ ...loadableOptions, loader });
+}
+
+exports.default = dynamic;
+exports.noSSR = noSSR;

package/dist/plugins/next-mocks/alias/dynamic/index.d.cts

@@ -0,0 +1,37 @@
+import React__default, { JSX } from 'react';
+
+type ComponentModule<P = Record<string, unknown>> = {
+    default: React__default.ComponentType<P>;
+};
+declare type LoaderComponent<P = Record<string, unknown>> = Promise<React__default.ComponentType<P> | ComponentModule<P>>;
+declare type Loader<P = Record<string, unknown>> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+type LoaderMap = {
+    [module: string]: () => Loader<unknown>;
+};
+type LoadableGeneratedOptions = {
+    webpack?(): unknown;
+    modules?(): LoaderMap;
+};
+type DynamicOptionsLoadingProps = {
+    error?: Error | null;
+    isLoading?: boolean;
+    pastDelay?: boolean;
+    retry?: () => void;
+    timedOut?: boolean;
+};
+type DynamicOptions<P = Record<string, unknown>> = LoadableGeneratedOptions & {
+    loading?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element | null;
+    loader?: Loader<P> | LoaderMap;
+    loadableGenerated?: LoadableGeneratedOptions;
+    ssr?: boolean;
+};
+declare function noSSR<P = Record<string, unknown>>(): React__default.ComponentType<P>;
+/**
+ * This function lets you dynamically import a component.
+ * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+ *
+ * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+ */
+declare function dynamic<P = Record<string, unknown>>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React__default.ComponentType<P>;
+
+export { type LoaderComponent, dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/dynamic/index.d.ts

@@ -0,0 +1,37 @@
+import React__default, { JSX } from 'react';
+
+type ComponentModule<P = Record<string, unknown>> = {
+    default: React__default.ComponentType<P>;
+};
+declare type LoaderComponent<P = Record<string, unknown>> = Promise<React__default.ComponentType<P> | ComponentModule<P>>;
+declare type Loader<P = Record<string, unknown>> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+type LoaderMap = {
+    [module: string]: () => Loader<unknown>;
+};
+type LoadableGeneratedOptions = {
+    webpack?(): unknown;
+    modules?(): LoaderMap;
+};
+type DynamicOptionsLoadingProps = {
+    error?: Error | null;
+    isLoading?: boolean;
+    pastDelay?: boolean;
+    retry?: () => void;
+    timedOut?: boolean;
+};
+type DynamicOptions<P = Record<string, unknown>> = LoadableGeneratedOptions & {
+    loading?: (loadingProps: DynamicOptionsLoadingProps) => JSX.Element | null;
+    loader?: Loader<P> | LoaderMap;
+    loadableGenerated?: LoadableGeneratedOptions;
+    ssr?: boolean;
+};
+declare function noSSR<P = Record<string, unknown>>(): React__default.ComponentType<P>;
+/**
+ * This function lets you dynamically import a component.
+ * It uses [React.lazy()](https://react.dev/reference/react/lazy) with [Suspense](https://react.dev/reference/react/Suspense) under the hood.
+ *
+ * Read more: [Next.js Docs: `next/dynamic`](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#nextdynamic)
+ */
+declare function dynamic<P = Record<string, unknown>>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>): React__default.ComponentType<P>;
+
+export { type LoaderComponent, dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/dynamic/index.js

@@ -0,0 +1,51 @@
+import Loadable from 'next/dist/shared/lib/loadable.shared-runtime.js';
+import React from 'react';
+
+// src/plugins/next-mocks/alias/dynamic/index.tsx
+function convertModule(mod) {
+  return { default: mod?.default || mod };
+}
+function noSSR() {
+  throw new Error("noSSR is not implemented in Storybook");
+}
+function dynamic(dynamicOptions, options) {
+  const loadableFn = Loadable;
+  if (options?.ssr === false) {
+    delete options.ssr;
+  }
+  let loadableOptions = {
+    // A loading component is not required, so we default it
+    loading: ({ error, isLoading, pastDelay }) => {
+      if (!pastDelay) return null;
+      if (process.env.NODE_ENV !== "production") {
+        if (isLoading) {
+          return null;
+        }
+        if (error) {
+          return /* @__PURE__ */ React.createElement("p", null, error.message, /* @__PURE__ */ React.createElement("br", null), error.stack);
+        }
+      }
+      return null;
+    }
+  };
+  if (dynamicOptions instanceof Promise) {
+    loadableOptions.loader = () => dynamicOptions;
+  } else if (typeof dynamicOptions === "function") {
+    loadableOptions.loader = dynamicOptions;
+  } else if (typeof dynamicOptions === "object") {
+    loadableOptions = { ...loadableOptions, ...dynamicOptions };
+  }
+  loadableOptions = { ...loadableOptions, ...options };
+  const loaderFn = loadableOptions.loader;
+  const loader = () => loaderFn != null ? loaderFn().then(convertModule) : Promise.resolve(convertModule(() => null));
+  if (loadableOptions.loadableGenerated) {
+    loadableOptions = {
+      ...loadableOptions,
+      ...loadableOptions.loadableGenerated
+    };
+    delete loadableOptions.loadableGenerated;
+  }
+  return loadableFn({ ...loadableOptions, loader });
+}
+
+export { dynamic as default, noSSR };

package/dist/plugins/next-mocks/alias/headers/cookies.d.cts

@@ -4,7 +4,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.j
 
 declare class RequestCookiesMock extends RequestCookies {
     get: vitest.Mock<[name: string] | [next_dist_compiled__edge_runtime_cookies.RequestCookie], next_dist_compiled__edge_runtime_cookies.RequestCookie | undefined>;
-    getAll: vitest.Mock<[next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string] | [], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
+    getAll: vitest.Mock<[] | [next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
     has: vitest.Mock<[name: string], boolean>;
     set: vitest.Mock<[key: string, value: string] | [options: next_dist_compiled__edge_runtime_cookies.RequestCookie], this>;
     delete: vitest.Mock<[names: string | string[]], boolean | boolean[]>;

package/dist/plugins/next-mocks/alias/headers/cookies.d.ts

@@ -4,7 +4,7 @@ import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.j
 
 declare class RequestCookiesMock extends RequestCookies {
     get: vitest.Mock<[name: string] | [next_dist_compiled__edge_runtime_cookies.RequestCookie], next_dist_compiled__edge_runtime_cookies.RequestCookie | undefined>;
-    getAll: vitest.Mock<[next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string] | [], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
+    getAll: vitest.Mock<[] | [next_dist_compiled__edge_runtime_cookies.RequestCookie] | [name: string], next_dist_compiled__edge_runtime_cookies.RequestCookie[]>;
     has: vitest.Mock<[name: string], boolean>;
     set: vitest.Mock<[key: string, value: string] | [options: next_dist_compiled__edge_runtime_cookies.RequestCookie], this>;
     delete: vitest.Mock<[names: string | string[]], boolean | boolean[]>;

package/dist/plugins/next-mocks/alias/navigation/index.d.cts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_shared_lib_app_router_context_shared_runtime from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
@@ -28,7 +28,7 @@ declare const usePathname: Mock<[], string>;
 declare const useSelectedLayoutSegment: Mock<[parallelRouteKey?: string | undefined], string | null>;
 declare const useSelectedLayoutSegments: Mock<[parallelRouteKey?: string | undefined], string[]>;
 declare const useRouter: Mock<[], next_dist_shared_lib_app_router_context_shared_runtime.AppRouterInstance>;
-declare const useServerInsertedHTML: Mock<[callback: () => react.ReactNode], void>;
+declare const useServerInsertedHTML: Mock<[callback: () => React.ReactNode], void>;
 declare const notFound: Mock<[], never>;
 interface Params {
     [key: string]: string | string[];

package/dist/plugins/next-mocks/alias/navigation/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_shared_lib_app_router_context_shared_runtime from 'next/dist/shared/lib/app-router-context.shared-runtime';
 import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
@@ -28,7 +28,7 @@ declare const usePathname: Mock<[], string>;
 declare const useSelectedLayoutSegment: Mock<[parallelRouteKey?: string | undefined], string | null>;
 declare const useSelectedLayoutSegments: Mock<[parallelRouteKey?: string | undefined], string[]>;
 declare const useRouter: Mock<[], next_dist_shared_lib_app_router_context_shared_runtime.AppRouterInstance>;
-declare const useServerInsertedHTML: Mock<[callback: () => react.ReactNode], void>;
+declare const useServerInsertedHTML: Mock<[callback: () => React.ReactNode], void>;
 declare const notFound: Mock<[], never>;
 interface Params {
     [key: string]: string | string[];

package/dist/plugins/next-mocks/alias/router/index.d.cts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_client_with_router from 'next/dist/client/with-router';
 import * as next_types from 'next/types';
 import { Mock } from '@storybook/test';
@@ -40,6 +40,6 @@ declare const getRouter: () => {
 };
 
 declare const useRouter: Mock<[], originalRouter.NextRouter>;
-declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], react.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
+declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], React.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
 
 export { createRouter, getRouter, useRouter, withRouter };

package/dist/plugins/next-mocks/alias/router/index.d.ts

@@ -1,4 +1,4 @@
-import * as react from 'react';
+import * as React from 'react';
 import * as next_dist_client_with_router from 'next/dist/client/with-router';
 import * as next_types from 'next/types';
 import { Mock } from '@storybook/test';
@@ -40,6 +40,6 @@ declare const getRouter: () => {
 };
 
 declare const useRouter: Mock<[], originalRouter.NextRouter>;
-declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], react.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
+declare const withRouter: Mock<[ComposedComponent: next_types.NextComponentType<next_types.NextPageContext, any, next_dist_client_with_router.WithRouterProps>], React.ComponentType<next_dist_client_with_router.ExcludeRouterProps<next_dist_client_with_router.WithRouterProps>>>;
 
 export { createRouter, getRouter, useRouter, withRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "",
   "keywords": [
     "vite-plugin",
@@ -28,6 +28,7 @@
     "./browser/mocks/headers": "./dist/plugins/next-mocks/alias/headers/index.js",
     "./browser/mocks/router": "./dist/plugins/next-mocks/alias/router/index.js",
     "./browser/mocks/server-only": "./dist/plugins/next-mocks/alias/rsc/server-only.js",
+    "./browser/mocks/dynamic": "./dist/plugins/next-mocks/alias/dynamic/index.js",
     "./browser/mocks/image": "./dist/plugins/next-image/alias/next-image.js",
     "./browser/mocks/legacy-image": "./dist/plugins/next-image/alias/next-legacy-image.js",
     "./browser/mocks/image-default-loader": "./dist/plugins/next-image/alias/image-default-loader.js",
@@ -37,6 +38,7 @@
     "./node/mocks/headers": "./dist/plugins/next-mocks/alias/headers/index.cjs",
     "./node/mocks/router": "./dist/plugins/next-mocks/alias/router/index.cjs",
     "./node/mocks/server-only": "./dist/plugins/next-mocks/alias/rsc/server-only.cjs",
+    "./node/mocks/dynamic": "./dist/plugins/next-mocks/alias/dynamic/index.cjs",
     "./node/mocks/image": "./dist/plugins/next-image/alias/next-image.cjs",
     "./node/mocks/legacy-image": "./dist/plugins/next-image/alias/next-legacy-image.cjs",
     "./node/mocks/image-default-loader": "./dist/plugins/next-image/alias/image-default-loader.cjs",
@@ -77,6 +79,7 @@
   "dependencies": {
     "@next/env": "^14.2.5",
     "image-size": "^1.1.1",
+    "magic-string": "^0.30.11",
     "module-alias": "^2.2.3",
     "ts-dedent": "^2.2.0"
   },