vite-plugin-storybook-nextjs 1.1.2 → 2.0.0--canary.33.4e40e92.0

package/README.md

@@ -3,6 +3,7 @@
 This is a Vite plugin that allows you to use Next.js features in Vite. It is the basis for `@storybook/experimental-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 [the `@storybook/experimental-nextjs-vite` framework](https://storybook.js.org/docs/get-started/frameworks/nextjs#with-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.
@@ -77,9 +78,7 @@ This plugin is necessary to run portable stories in Vitest, as it provides the n
 
 ## Automatic story transformation
 
-(⚠️ **Experimental**)
-
-The experimental `@storybook/experimental-addon-test` 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://storybook.js.org/docs/8.3/writing-tests/test-runner-with-vitest for more information.
+The addon `@storybook/addon-test` 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://storybook.js.org/docs/8.3/writing-tests/test-runner-with-vitest for more information.
 
 ## Limitations and differences to the Webpack5-based integration of Next.js in Storybook
 

package/dist/index.cjs

@@ -23,8 +23,9 @@ var options_js = require('next/dist/build/swc/options.js');
 var nextServerConfig = 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 imageSize = require('image-size');
+var imageSizeOf = require('image-size');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -56,6 +57,7 @@ var loaderUtils__default = /*#__PURE__*/_interopDefault(loaderUtils);
 var nextLoadJsConfig__default = /*#__PURE__*/_interopDefault(nextLoadJsConfig);
 var nextServerConfig__default = /*#__PURE__*/_interopDefault(nextServerConfig);
 var MagicString__default = /*#__PURE__*/_interopDefault(MagicString);
+var imageSizeOf__default = /*#__PURE__*/_interopDefault(imageSizeOf);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -2673,7 +2675,19 @@ var excludeImporterPattern = /\.(css|scss|sass)$/;
 var virtualImage = "virtual:next-image";
 var virtualNextImage = "virtual:next/image";
 var virtualNextLegacyImage = "virtual:next/legacy/image";
+var sharp;
 var require4 = module$1.createRequire((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)));
+try {
+  sharp = require4("sharp");
+  if (sharp && sharp.concurrency() > 1) {
+    const divisor = process.env.NODE_ENV === "development" ? 4 : 2;
+    sharp.concurrency(Math.floor(Math.max(os.cpus().length / divisor, 1)));
+  }
+} catch (e) {
+  console.warn(
+    "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
+  );
+}
 function vitePluginNextImage(nextConfigResolver) {
   let isBrowser = !isVitestEnv;
   return {
@@ -2725,6 +2739,7 @@ function vitePluginNextImage(nextConfigResolver) {
       if (virtualImage === source) {
         const imagePath = querystring.decode(query).imagePath;
         const nextConfig = await nextConfigResolver.promise;
+        const extension = path2__default.default.extname(imagePath);
         try {
           if (nextConfig.images?.disableStaticImages) {
             return tsDedent.dedent`
@@ -2733,7 +2748,18 @@ function vitePluginNextImage(nextConfigResolver) {
 					`;
           }
           const imageData = await fs3__default.default.promises.readFile(imagePath);
-          const { width, height } = imageSize.imageSize(imageData);
+          let width;
+          let height;
+          if (extension === ".avif" && sharp) {
+            const transformer = sharp(Buffer.from(imageData));
+            const result = await transformer.metadata();
+            width = result.width;
+            height = result.height;
+          } else {
+            const result = imageSizeOf__default.default(imageData);
+            width = result.width;
+            height = result.height;
+          }
           return tsDedent.dedent`
 						import src from "${imagePath}?ignore";
 						export default {

package/dist/index.js

@@ -21,8 +21,9 @@ import { getParserOptions } from 'next/dist/build/swc/options.js';
 import nextServerConfig 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 { imageSize } from 'image-size';
+import imageSizeOf from 'image-size';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -2640,7 +2641,19 @@ var excludeImporterPattern = /\.(css|scss|sass)$/;
 var virtualImage = "virtual:next-image";
 var virtualNextImage = "virtual:next/image";
 var virtualNextLegacyImage = "virtual:next/legacy/image";
+var sharp;
 var require4 = createRequire(import.meta.url);
+try {
+  sharp = require4("sharp");
+  if (sharp && sharp.concurrency() > 1) {
+    const divisor = process.env.NODE_ENV === "development" ? 4 : 2;
+    sharp.concurrency(Math.floor(Math.max(cpus().length / divisor, 1)));
+  }
+} catch (e) {
+  console.warn(
+    "You have to install sharp in order to use image optimization features in Next.js. AVIF support is also disabled."
+  );
+}
 function vitePluginNextImage(nextConfigResolver) {
   let isBrowser = !isVitestEnv;
   return {
@@ -2692,6 +2705,7 @@ function vitePluginNextImage(nextConfigResolver) {
       if (virtualImage === source) {
         const imagePath = decode(query).imagePath;
         const nextConfig = await nextConfigResolver.promise;
+        const extension = path2.extname(imagePath);
         try {
           if (nextConfig.images?.disableStaticImages) {
             return dedent`
@@ -2700,7 +2714,18 @@ function vitePluginNextImage(nextConfigResolver) {
 					`;
           }
           const imageData = await fs3.promises.readFile(imagePath);
-          const { width, height } = imageSize(imageData);
+          let width;
+          let height;
+          if (extension === ".avif" && sharp) {
+            const transformer = sharp(Buffer.from(imageData));
+            const result = await transformer.metadata();
+            width = result.width;
+            height = result.height;
+          } else {
+            const result = imageSizeOf(imageData);
+            width = result.width;
+            height = result.height;
+          }
           return dedent`
 						import src from "${imagePath}?ignore";
 						export default {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var test = require('@storybook/test');
+var test = require('storybook/test');
 
 // src/plugins/next-mocks/alias/cache/index.ts
 var revalidatePath = test.fn().mockName(

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

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 
 // src/plugins/next-mocks/alias/cache/index.ts
 var revalidatePath = fn().mockName(

package/dist/plugins/next-mocks/alias/headers/cookies.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var test = require('@storybook/test');
 var index_js = require('next/dist/compiled/@edge-runtime/cookies/index.js');
+var test = require('storybook/test');
 var draftMode = require('next/dist/server/request/draft-mode');
 var headers2 = require('next/dist/server/request/headers');
 var headers_js = require('next/dist/server/web/spec-extension/adapters/headers.js');

package/dist/plugins/next-mocks/alias/headers/cookies.js

@@ -1,5 +1,5 @@
-import { fn } from '@storybook/test';
 import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
+import { fn } from 'storybook/test';
 import { draftMode } from 'next/dist/server/request/draft-mode';
 import * as headers2 from 'next/dist/server/request/headers';
 import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';

package/dist/plugins/next-mocks/alias/headers/headers.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var test = require('@storybook/test');
+var test = require('storybook/test');
 var headers_js = require('next/dist/server/web/spec-extension/adapters/headers.js');
 
 // src/plugins/next-mocks/alias/headers/headers.ts

package/dist/plugins/next-mocks/alias/headers/headers.js

@@ -1,4 +1,4 @@
-import { fn } from '@storybook/test';
+import { fn } from 'storybook/test';
 import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
 
 // src/plugins/next-mocks/alias/headers/headers.ts

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var test = require('@storybook/test');
 var draftMode = require('next/dist/server/request/draft-mode');
 var headers2 = require('next/dist/server/request/headers');
+var test = require('storybook/test');
 var headers_js = require('next/dist/server/web/spec-extension/adapters/headers.js');
 var index_js = require('next/dist/compiled/@edge-runtime/cookies/index.js');
 

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

@@ -1,7 +1,7 @@
-import { fn } from '@storybook/test';
 import { draftMode } from 'next/dist/server/request/draft-mode';
 import * as headers2 from 'next/dist/server/request/headers';
 export { UnsafeUnwrappedHeaders } from 'next/dist/server/request/headers';
+import { fn } from 'storybook/test';
 import { HeadersAdapter } from 'next/dist/server/web/spec-extension/adapters/headers.js';
 import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies/index.js';
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var test = require('@storybook/test');
 var actual = require('next/dist/client/components/navigation.js');
 var redirectStatusCode_js = require('next/dist/client/components/redirect-status-code.js');
 var redirect_js = require('next/dist/client/components/redirect.js');
 var previewErrors = require('storybook/internal/preview-errors');
+var test = require('storybook/test');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;

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

@@ -1,7 +1,7 @@
-import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
 export * from 'next/dist/client/components/navigation.js';
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { Mock } from 'storybook/test';
 
 declare const createNavigation: (overrides?: Record<string, (...params: unknown[]) => unknown>) => {
     push: Mock;

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

@@ -1,7 +1,7 @@
-import { Mock } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
 export * from 'next/dist/client/components/navigation.js';
 import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime';
+import { Mock } from 'storybook/test';
 
 declare const createNavigation: (overrides?: Record<string, (...params: unknown[]) => unknown>) => {
     push: Mock;

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

@@ -1,9 +1,9 @@
-import { fn } from '@storybook/test';
 import * as actual from 'next/dist/client/components/navigation.js';
 export * from 'next/dist/client/components/navigation.js';
 import { RedirectStatusCode } from 'next/dist/client/components/redirect-status-code.js';
 import { getRedirectError } from 'next/dist/client/components/redirect.js';
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
+import { fn } from 'storybook/test';
 
 // src/plugins/next-mocks/alias/navigation/index.ts
 var navigationAPI;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var test = require('@storybook/test');
 var singletonRouter = require('next/dist/client/router.js');
 var previewErrors = require('storybook/internal/preview-errors');
+var test = require('storybook/test');
 var router = require('next/dist/client/router');
 
 function _interopNamespace(e) {

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

@@ -1,10 +1,10 @@
-import { Mock } from '@storybook/test';
 import { NextComponentType, NextPageContext } from 'next';
 import singletonRouter from 'next/dist/client/router.js';
 export { default } from 'next/dist/client/router.js';
 import { WithRouterProps, ExcludeRouterProps } from 'next/dist/client/with-router';
 import { NextRouter } from 'next/router.js';
 import { ComponentType } from 'react';
+import { Mock } from 'storybook/test';
 export * from 'next/dist/client/router';
 
 /**

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

@@ -1,10 +1,10 @@
-import { Mock } from '@storybook/test';
 import { NextComponentType, NextPageContext } from 'next';
 import singletonRouter from 'next/dist/client/router.js';
 export { default } from 'next/dist/client/router.js';
 import { WithRouterProps, ExcludeRouterProps } from 'next/dist/client/with-router';
 import { NextRouter } from 'next/router.js';
 import { ComponentType } from 'react';
+import { Mock } from 'storybook/test';
 export * from 'next/dist/client/router';
 
 /**

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

@@ -1,7 +1,7 @@
-import { fn } from '@storybook/test';
 import * as singletonRouter from 'next/dist/client/router.js';
 import singletonRouter__default from 'next/dist/client/router.js';
 import { NextjsRouterMocksNotAvailable } from 'storybook/internal/preview-errors';
+import { fn } from 'storybook/test';
 export * from 'next/dist/client/router';
 
 // src/plugins/next-mocks/alias/router/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "1.1.2",
+  "version": "2.0.0--canary.33.4e40e92.0",
   "description": "",
   "keywords": [
     "vite-plugin",
@@ -61,14 +61,12 @@
     "release": "auto shipit"
   },
   "peerDependencies": {
-    "@storybook/test": "^8.3.0",
     "next": "^14.1.0 || ^15.0.0",
-    "storybook": "^8.3.0",
+    "storybook": "^9.0.0-0",
     "vite": "^5.0.0 || ^6.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.1",
-    "@storybook/test": "^8.3.0",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/semver": "^7.5.8",
@@ -78,6 +76,7 @@
     "react": "19.0.0-rc-66855b96-20241106",
     "rollup": "^4.18.0",
     "semver": "^7.6.3",
+    "sharp": "^0.33.4",
     "storybook": "^8.3.0",
     "tsup": "^8.1.0",
     "typescript": "^5.0.0",
@@ -87,11 +86,14 @@
   "packageManager": "pnpm@9.4.0",
   "dependencies": {
     "@next/env": "^15.0.3",
-    "image-size": "^2.0.0",
+    "image-size": "^1.1.1",
     "magic-string": "^0.30.11",
     "module-alias": "^2.2.3",
     "ts-dedent": "^2.2.0"
   },
+  "optionalDependencies": {
+    "sharp": "^0.33.4"
+  },
   "publishConfig": {
     "access": "public"
   },