fix(plugin-svgr): prefer using svgrOptions.exportType option (#1789)

web-infra-dev · Mar 12, 2024 · a490a09 · a490a09
1 parent 16ecf3e
commit a490a09
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 46 deletions.
diff --git a/e2e/cases/svg/svg.test.ts b/e2e/cases/svg/svg.test.ts
@@ -47,7 +47,9 @@ test('svgr (defaultExport component)', async ({ page }) => {
     plugins: [
       pluginReact(),
       pluginSvgr({
-        svgDefaultExport: 'component',
+        svgrOptions: {
+          exportType: 'default',
+        },
       }),
     ],
   });
@@ -79,7 +81,9 @@ test('svgr (external react)', async ({ page }) => {
     plugins: [
       pluginReact(),
       pluginSvgr({
-        svgDefaultExport: 'url',
+        svgrOptions: {
+          exportType: 'named',
+        },
       }),
     ],
     rsbuildConfig: {

diff --git a/e2e/cases/svg/svgo-minify-id-prefix/rsbuild.config.ts b/e2e/cases/svg/svgo-minify-id-prefix/rsbuild.config.ts
@@ -5,7 +5,9 @@ export default {
   plugins: [
     pluginReact(),
     pluginSvgr({
-      svgDefaultExport: 'url',
+      svgrOptions: {
+        exportType: 'named',
+      },
     }),
   ],
 };
diff --git a/e2e/cases/svg/svgo-minify-view-box/rsbuild.config.ts b/e2e/cases/svg/svgo-minify-view-box/rsbuild.config.ts
@@ -5,7 +5,9 @@ export default {
   plugins: [
     pluginReact(),
     pluginSvgr({
-      svgDefaultExport: 'url',
+      svgrOptions: {
+        exportType: 'named',
+      },
     }),
   ],
 };
diff --git a/e2e/cases/svg/svgr-default-export-url/rsbuild.config.ts b/e2e/cases/svg/svgr-default-export-url/rsbuild.config.ts
@@ -6,7 +6,9 @@ export default defineConfig({
   plugins: [
     pluginReact(),
     pluginSvgr({
-      svgDefaultExport: 'url',
+      svgrOptions: {
+        exportType: 'named',
+      },
     }),
   ],
   output: {

diff --git a/e2e/cases/svg/svgr-query-url/rsbuild.config.ts b/e2e/cases/svg/svgr-query-url/rsbuild.config.ts
@@ -5,7 +5,9 @@ export default {
   plugins: [
     pluginReact(),
     pluginSvgr({
-      svgDefaultExport: 'component',
+      svgrOptions: {
+        exportType: 'default',
+      },
     }),
   ],
 };
diff --git a/packages/document/docs/en/plugins/list/plugin-svgr.mdx b/packages/document/docs/en/plugins/list/plugin-svgr.mdx
@@ -72,11 +72,6 @@ type PluginSvgrOptions = {
    * Configure SVGR options.
    */
   svgrOptions?: import('@svgr/core').Config;
-
-  /**
-   * Configure the default export type of SVG files.
-   */
-  svgDefaultExport?: 'component' | 'url';
 };
 ```
 
@@ -118,23 +113,21 @@ pluginSvgr({
 });
 ```
 
-### svgDefaultExport
+### svgrOptions.exportType
 
 Modify the default export type of SVG files.
 
-- **Type:** `'component' | 'url'`
-- **Default:** `'url'`
+- **Type:** `'named' | 'default'`
+- **Default:** `'named'`
 
 For example, set the default export as a React component:
 
-```ts title="rsbuild.config.ts"
-export default {
-  plugins: [
-    pluginSvgr({
-      svgDefaultExport: 'component',
-    }),
-  ],
-};
+```ts
+pluginSvgr({
+  svgrOptions: {
+    exportType: 'default',
+  },
+});
 ```
 
 Then import the SVG, you'll get a React component instead of a URL:
@@ -154,7 +147,7 @@ console.log(logo); // => asset url
 ```
 
 :::tip
-When `svgDefaultExport` is set to `'component'`, the named imports (ReactComponent) cannot be used.
+When `svgrOptions.exportType` is set to `'default'`, the named imports (ReactComponent) cannot be used.
 :::
 
 ## Type Declaration
@@ -182,7 +175,7 @@ declare module '*.svg' {
 }
 ```
 
-If you set `svgDefaultExport` to `'component'`, then change the type declaration to:
+If you set `svgrOptions.exportType` to `'default'`, then change the type declaration to:
 
 ```ts
 declare module '*.svg' {

diff --git a/packages/document/docs/zh/plugins/list/plugin-svgr.mdx b/packages/document/docs/zh/plugins/list/plugin-svgr.mdx
@@ -72,11 +72,6 @@ type PluginSvgrOptions = {
    * 修改 SVGR 配置
    */
   svgrOptions?: import('@svgr/core').Config;
-
-  /**
-   * 修改 SVG 文件的默认导出类型
-   */
-  svgDefaultExport?: 'component' | 'url';
 };
 ```
 
@@ -118,23 +113,21 @@ pluginSvgr({
 });
 ```
 
-### svgDefaultExport
+### svgrOptions.exportType
 
-修改 SVG 文件的默认导出类型。
+修改 SVG 文件的 default export 类型。
 
-- **类型：** `'component' | 'url'`
-- **默认值：** `'url'`
+- **类型：** `'named' | 'default'`
+- **默认值：** `'named'`
 
 比如把默认导出的内容设置为 React 组件：
 
-```ts title="rsbuild.config.ts"
-export default {
-  plugins: [
-    pluginSvgr({
-      svgDefaultExport: 'component',
-    }),
-  ],
-};
+```ts
+pluginSvgr({
+  svgrOptions: {
+    exportType: 'default',
+  },
+});
 ```
 
 此时再使用默认导入，你会得到一个 React 组件，而不是 URL：
@@ -154,7 +147,7 @@ console.log(logo); // => 资源 url
 ```
 
 :::tip
-当 `svgDefaultExport` 被设置为 `'component'` 时，具名导入（ReactComponent）将无法使用。
+当 `svgrOptions.exportType` 被设置为 `'default'` 时，具名导入（ReactComponent）将无法使用。
 :::
 
 ## 类型声明
@@ -182,7 +175,7 @@ declare module '*.svg' {
 }
 ```
 
-如果你将 `svgDefaultExport` 设置为 `'component'`，则将类型声明修改为：
+如果你将 `svgrOptions.exportType` 设置为 `'default'`，则将类型声明修改为：
 
 ```ts
 declare module '*.svg' {

diff --git a/packages/plugin-svgr/src/index.ts b/packages/plugin-svgr/src/index.ts
@@ -22,6 +22,7 @@ export type PluginSvgrOptions = {
   /**
    * Configure the default export type of SVG files.
    * @default 'url'
+   * @deprecated use `svgrOptions.exportType` instead
    */
   svgDefaultExport?: SvgDefaultExport;
 };
@@ -52,7 +53,6 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
   setup(api) {
     api.modifyBundlerChain(async (chain, { isProd, CHAIN_ID }) => {
       const config = api.getNormalizedConfig();
-      const { svgDefaultExport = 'url' } = options;
       const distDir = getDistPath(config, 'svg');
       const filename = getFilename(config, 'svg', isProd);
       const outputName = path.posix.join(distDir, filename);
@@ -120,7 +120,11 @@ export const pluginSvgr = (options: PluginSvgrOptions = {}): RsbuildPlugin => ({
         });
 
       // SVG in JS files
-      const exportType = svgDefaultExport === 'url' ? 'named' : 'default';
+      const { svgDefaultExport = 'url' } = options;
+      const exportType =
+        svgrOptions.exportType ??
+        (svgDefaultExport === 'url' ? 'named' : 'default');
+
       rule
         .oneOf(CHAIN_ID.ONE_OF.SVG)
         .type('javascript/auto')

diff --git a/packages/plugin-svgr/tests/index.test.ts b/packages/plugin-svgr/tests/index.test.ts
@@ -13,7 +13,9 @@ describe('svgr', () => {
     {
       name: 'export default Component',
       pluginConfig: {
-        svgDefaultExport: 'component',
+        svgrOptions: {
+          exportType: 'default',
+        },
       },
     },
     {