vite-plugin-storybook-nextjs 0.0.14 → 1.0.0--canary.9.b462d2b.0

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Kitiho <https://github.com/kitiho>
+Copyright (c) 2024 Storybook <https://github.com/storybookjs>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,3 +1,99 @@
 # vite-plugin-storybook-nextjs
 
-This is a Vite plugin that allows you to use Next.js features in Vite. The plugin is still in early development and is not yet ready for production use.
+This is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for `@storybook/nextjs-vite` and should be used when running portable stories in Vitest.
+
+## Features
+
+- **Next.js Integration**: Seamlessly integrate Next.js features into your Vite project.
+- **Storybook Compatibility**: Acts as the foundation for `@storybook/nextjs-vite`, enabling you to use Storybook with Next.js in a Vite environment.
+- **Portable Stories**: Ideal for running portable stories in Vitest, ensuring your components are tested in an environment that closely mirrors production.
+
+## Installation
+
+To install the plugin, use your package manager of choice:
+
+```sh
+npm install vite-plugin-storybook-nextjs
+# or
+yarn add vite-plugin-storybook-nextjs
+# or
+pnpm add vite-plugin-storybook-nextjs
+```
+
+## Usage
+
+### Setup Vitest
+
+To use the plugin, you need to set up Vitest in your project. You can do this by following the instructions in the [Vitest documentation](https://vitest.dev/guide/)
+
+### Add the plugin to your vitest configuration
+
+Add the plugin to your Vitest configuration file. This ensures that Vitest is aware of the Next.js features provided by the plugin.
+
+```ts
+// vitest.config.ts
+import { defineConfig } from "vite";
+import nextjs from "vite-plugin-storybook-nextjs";
+
+export default defineConfig({
+  plugins: [nextjs()],
+});
+```
+
+### Usage with portable stories
+
+[Portable stories](https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest) are Storybook stories which can be used in external environments, such as Vitest.
+
+This plugin is necessary to run portable stories in Vitest, as it provides the necessary Next.js features to ensure that your components are tested in an environment that closely mirrors production.
+
+#### Experimental @storybook/experimental-vitest-plugin
+
+The experimental `@storybook/experimental-vitest-plugin` can be used to automatically transform your stories at Vitest runtime to in-memory test files. This allows you to run your stories in a Vitest environment without needing to manually transform your stories. Please visit https://github.com/storybookjs/vitest-plugin for more information.
+
+## Configuration Options
+
+You can configure the plugin using the following options:
+
+```ts
+type VitePluginOptions = {
+  /**
+   * Provide the path to your Next.js project directory
+   * @default process.cwd()
+   */
+  dir?: string;
+};
+```
+
+## Limitations and differences to the Webpack5-based integration of Next.js in Storybook
+
+### next/font staticDir mapping obsolete
+
+You don't need to map your custom font directory in Storybook's staticDir configuration. Vite will automatically serve the files in the public directory and provide assets during production build.
+
+### CSS/SASS
+
+The `sassOptions` in `next.config.js` is not supported. Please use Vite's configuration options to configure the Sass compiler:
+
+```js
+css: {
+    preprocessorOptions: {
+        scss: {
+            quietDeps: true
+        },
+    }
+},
+```
+
+### Next.js: Server Actions
+
+When using components that rely on Next.js Server Actions, there are some limitations to be aware of. Specifically, you need to ensure that your story files are set up to use the jsdom environment in Vitest for the case that your default Virtual DOM environment is set to happy-dom. This can be done by adding a special comment at the top of your story files:
+
+```js
+// @vitest-environment jsdom
+```
+
+This comment ensures that the components using Next.js Server Actions are properly handled in a jsdom environment, which is necessary for them to function correctly in Vitest.
+
+## License
+
+This project is licensed under the MIT License.

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-image/alias/next-image.d.cts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

package/dist/plugins/next-image/alias/next-image.d.ts

@@ -2,7 +2,7 @@ import * as next_dist_shared_lib_get_img_props from 'next/dist/shared/lib/get-im
 import * as _NextImage from 'next/image';
 import React__default from 'next/dist/compiled/react';
 
-declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcSet" | "ref" | "width" | "height" | "loading" | "alt"> & {
+declare const MockedNextImage: React__default.ForwardRefExoticComponent<Omit<React__default.DetailedHTMLProps<React__default.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "height" | "width" | "loading" | "ref" | "alt" | "src" | "srcSet"> & {
     src: string | next_dist_shared_lib_get_img_props.StaticImport;
     alt: string;
     width?: number | `${number}` | undefined;

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": "1.0.0--canary.9.b462d2b.0",
   "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"
   },