vite-plugin-storybook-nextjs 3.0.4--canary.5f06d44.0 → 3.1.0--canary.69.ab50e19.0

package/README.md

@@ -83,9 +83,30 @@ type VitePluginOptions = {
 
 ### FAQ: Including/Excluding images
 
-When you also use the SVG-to-React plugin [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr), you may want SVGs imported with the `?react` query to be handled by SVGR, while all other images (including plain SVGs) are handled by this plugin's Next Image processing.
+When you also use the SVG-to-React plugin [vite-plugin-svgr](https://github.com/pd4d10/vite-plugin-svgr), you may want SVGs imported with the `?react` query to be handled by SVGR, while all other images (including plain SVGs) are handled by this plugin's Next Image processing. By default, the plugin already handles the `**/*.svg?react` case. But if you have custom configuration, you must configure the filters yourself.
 
-You can achieve this by excluding `**/*.svg?react` from the Next Image handling and (optionally) narrowing what it includes. The patterns follow Rollup's FilterPattern semantics.
+You can achieve this by adding include/exclude patterns as plugin options. The patterns follow Rollup's FilterPattern semantics (micromatch).
+
+#### 1. When using Storybook
+
+```ts
+// .storybook/main.ts
+export default {
+  framework: {
+    name: '@storybook/nextjs-vite',
+    options: {
+      image: {
+        // Default image glob patterns are already applied; this is optional
+        // include: ['**/*.{png,jpg,jpeg,gif,webp,avif,ico,bmp,svg}'],
+        // Ensure SVGR takes precedence for React components from SVGs
+        exclude: ['**/*.svg?icon'],
+      },
+    }
+  }
+}
+```
+
+#### 2. When not using Storybook
 
 ```ts
 // vite.config.ts or vitest.config.ts

package/dist/index.cjs

@@ -4719,11 +4719,11 @@ var getAlias = (env) => ({
 });
 
 // src/plugins/next-image/plugin.ts
-var hasWarned = false;
+var warnedMessages = /* @__PURE__ */ new Set();
 var warnOnce = (message) => {
-  if (!hasWarned) {
+  if (!warnedMessages.has(message)) {
     console.warn(`[vite-plugin-storybook-nextjs] ${message}`);
-    hasWarned = true;
+    warnedMessages.add(message);
   }
 };
 var includePattern2 = /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/;
@@ -4747,13 +4747,15 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
   return {
     name: "vite-plugin-storybook-nextjs-image",
     enforce: "pre",
+    async configResolved(config) {
+      hasVitePluginSvgr = !!config.plugins?.some(
+        (plugin) => plugin && typeof plugin === "object" && "name" in plugin && (plugin.name === "vite-plugin-svgr" || plugin.name.includes("svgr"))
+      );
+    },
     async config(config, env) {
       if (config.test?.browser?.enabled === true) {
         isBrowser = true;
       }
-      hasVitePluginSvgr = !!config.plugins?.some(
-        (plugin) => plugin && typeof plugin === "object" && "name" in plugin && (plugin.name === "vite-plugin-svgr" || plugin.name.includes("svgr"))
-      );
       return {
         resolve: {
           alias: getAlias(isBrowser ? "browser" : "node")
@@ -4769,7 +4771,7 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
       if (isSvg && hasVitePluginSvgr && queryA === "react") {
         return null;
       }
-      if (isSvg && hasVitePluginSvgr && !options.includeFiles && !options.excludeFiles) {
+      if (isSvg && hasVitePluginSvgr && !options.includeFiles && !options.excludeFiles && queryA !== void 0) {
         warnOnce(
           tsDedent.dedent`Detected vite-plugin-svgr but you are not passing image include or exclude patterns to the nextjs-vite plugin. This may cause a conflict between the two plugins and issues with SVG files.
           

package/dist/index.js

@@ -4686,11 +4686,11 @@ var getAlias = (env) => ({
 });
 
 // src/plugins/next-image/plugin.ts
-var hasWarned = false;
+var warnedMessages = /* @__PURE__ */ new Set();
 var warnOnce = (message) => {
-  if (!hasWarned) {
+  if (!warnedMessages.has(message)) {
     console.warn(`[vite-plugin-storybook-nextjs] ${message}`);
-    hasWarned = true;
+    warnedMessages.add(message);
   }
 };
 var includePattern2 = /\.(png|jpg|jpeg|gif|webp|avif|ico|bmp|svg)$/;
@@ -4714,13 +4714,15 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
   return {
     name: "vite-plugin-storybook-nextjs-image",
     enforce: "pre",
+    async configResolved(config) {
+      hasVitePluginSvgr = !!config.plugins?.some(
+        (plugin) => plugin && typeof plugin === "object" && "name" in plugin && (plugin.name === "vite-plugin-svgr" || plugin.name.includes("svgr"))
+      );
+    },
     async config(config, env) {
       if (config.test?.browser?.enabled === true) {
         isBrowser = true;
       }
-      hasVitePluginSvgr = !!config.plugins?.some(
-        (plugin) => plugin && typeof plugin === "object" && "name" in plugin && (plugin.name === "vite-plugin-svgr" || plugin.name.includes("svgr"))
-      );
       return {
         resolve: {
           alias: getAlias(isBrowser ? "browser" : "node")
@@ -4736,7 +4738,7 @@ function vitePluginNextImage(nextConfigResolver, options = {}) {
       if (isSvg && hasVitePluginSvgr && queryA === "react") {
         return null;
       }
-      if (isSvg && hasVitePluginSvgr && !options.includeFiles && !options.excludeFiles) {
+      if (isSvg && hasVitePluginSvgr && !options.includeFiles && !options.excludeFiles && queryA !== void 0) {
         warnOnce(
           dedent`Detected vite-plugin-svgr but you are not passing image include or exclude patterns to the nextjs-vite plugin. This may cause a conflict between the two plugins and issues with SVG files.
           

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-storybook-nextjs",
-  "version": "3.0.4--canary.5f06d44.0",
+  "version": "3.1.0--canary.69.ab50e19.0",
   "description": "",
   "keywords": [
     "vite-plugin",