chore: update

Author: SoonIter

package.json

@@ -40,6 +40,7 @@
     "pnpm-lock.yaml": "pnpm dedupe --check"
   },
   "devDependencies": {
+    "@rsdoctor/rspack-plugin": "0.4.13",
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.27.11",
     "@types/fs-extra": "^11.0.4",

packages/core/src/asset/LibAssetExtractPlugin.ts

@@ -28,7 +28,7 @@ function extractAssetFilenames(content: string): string[] {
 
 // 2. bundle: concatenated
 const CONCATENATED_PATTERN: RegExp =
-  /(const|var) (\w+) = __webpack_require__\.p\s\+\s["'](.+)["']/g;
+  /(const|var)\s(\w+)\s=\s\(?__webpack_require__\.p\s\+\s["'](.+)["']\)?/g;
 const concatenatedEsmReplaceTemplate = (variableName: string, url: string) =>
   `import ${variableName} from '${url}';`;
 const concatenatedCjsReplaceTemplate = (
@@ -46,8 +46,9 @@ const nonConcatenatedReplaceTemplate = (url: string) =>
 const pluginName = 'LIB_ASSET_EXTRACT_PLUGIN';
 
 type Options = {
-  // just for perf, in bundleless we can replace the entire file
+  // bundle and isUsingSvgr options: just for perf, in bundleless we can replace the entire file directly
   bundle: boolean;
+  isUsingSvgr: boolean;
 };
 
 class LibAssetExtractPlugin implements Rspack.RspackPluginInstance {
@@ -63,19 +64,22 @@ class LibAssetExtractPlugin implements Rspack.RspackPluginInstance {
         const chunkAsset = Object.keys(assets).filter((name) =>
           /js$/.test(name),
         );
+        const isEsmFormat = compilation.options.output.module;
+        const canEntireFileReplacedDirectly = !this.options.bundle && !this.options.isUsingSvgr;
         for (const name of chunkAsset) {
-          const isEsmFormat = compilation.options.output.module;
           const undoPath = getUndoPath(
             name,
             compilation.outputOptions.path!,
             true,
           );
           compilation.updateAsset(name, (old) => {
             const oldSource = old.source().toString();
+            console.log(canEntireFileReplacedDirectly, this.options)
 
             // bundleless
-            if (this.options.bundle === false) {
+            if (canEntireFileReplacedDirectly) {
               const assetFilenames = extractAssetFilenames(oldSource);
+              // asset/resource
               if (assetFilenames.length === 0) {
                 return old;
               }

packages/core/src/asset/assetConfig.ts

@@ -1,7 +1,36 @@
-import type { EnvironmentConfig } from '@rsbuild/core';
+import type { EnvironmentConfig, RsbuildPlugin } from '@rsbuild/core';
 import type { Format } from '../types';
 import { LibAssetExtractPlugin } from './LibAssetExtractPlugin';
-LibAssetExtractPlugin;
+
+const PLUGIN_NAME = 'rsbuild:lib-asset-bundleless';
+
+const RSBUILD_SVGR_PLUGIN_NAME = 'rsbuild:svgr';
+const pluginLibAsset = ({ bundle }: { bundle: boolean }): RsbuildPlugin => ({
+  name: PLUGIN_NAME,
+  pre: [RSBUILD_SVGR_PLUGIN_NAME],
+  setup(api) {
+    api.modifyBundlerChain((config, { CHAIN_ID }) => {
+      // only support transform the svg asset to mixedImport svgr file
+      // remove issuer to make every svg asset is transformed
+      const isUsingSvgr = Boolean(
+        config.module
+          .rule(CHAIN_ID.RULE.SVG)
+          .oneOf(CHAIN_ID.RULE.SVG)
+          .uses.has(CHAIN_ID.USE.SVGR),
+      );
+      if (isUsingSvgr) {
+        const rule = config.module
+          .rule(CHAIN_ID.RULE.SVG)
+          .oneOf(CHAIN_ID.RULE.SVG);
+        rule.issuer([]);
+      }
+
+      config
+        .plugin(LibAssetExtractPlugin.name)
+        .use(LibAssetExtractPlugin, [{ bundle, isUsingSvgr }]);
+    });
+  },
+});
 
 // TODO: asset config document
 export const composeAssetConfig = (
@@ -17,22 +46,19 @@ export const composeAssetConfig = (
         },
         tools: {
           rspack: {
-            // plugins: [new LibAssetExtractPlugin({ bundle: true })],
+            plugins: [
+              new LibAssetExtractPlugin({ bundle: true, isUsingSvgr: false }),
+            ],
           },
         },
       };
     }
-    // TODO: bundleless
     return {
       output: {
         dataUriLimit: 0, // default: no inline asset
         assetPrefix: 'auto',
       },
-      tools: {
-        rspack: {
-          // plugins: [new LibAssetExtractPlugin({ bundle: false })],
-        },
-      },
+      plugins: [pluginLibAsset({ bundle: false })],
     };
   }
 

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -220,6 +220,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
                 "name": "LIB_ASSET_EXTRACT_PLUGIN",
                 "options": {
                   "bundle": true,
+                  "isUsingSvgr": false,
                 },
               },
             ],
@@ -466,6 +467,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
                 "name": "LIB_ASSET_EXTRACT_PLUGIN",
                 "options": {
                   "bundle": true,
+                  "isUsingSvgr": false,
                 },
               },
             ],

packages/core/tests/constant.test.ts

@@ -1,9 +1,5 @@
 import { expect, test } from 'vitest';
-import {
-  CSS_EXTENSIONS_PATTERN,
-  ENTRY_EXTENSIONS_PATTERN,
-  JS_EXTENSIONS_PATTERN,
-} from '../src/constant';
+import { CSS_EXTENSIONS_PATTERN, DTS_EXTENSIONS_PATTERN, JS_EXTENSIONS_PATTERN } from '../src/constant';
 
 const jsTestStrings = [
   { str: 'index.js', expected: true },
@@ -25,6 +21,17 @@ const cssTestStrings = [
   { str: '/Users/path/index.sass', expected: true },
 ];
 
+const dtsTestStrings = [
+  { str: 'index.js', expected: false },
+  { str: './index.ts', expected: false },
+  { str: './index.d.ts', expected: true },
+  { str: '/Users/path/index.ts', expected: false },
+  { str: '/Users/path/index.d.ts', expected: true },
+  { str: '/Users/path/index.d.mts', expected: true },
+  { str: '/Users/path/index.d.cts', expected: true },
+  { str: '/Users/path/index.tsx', expected: false },
+];
+
 test('JS_EXTENSIONS_PATTERN', () => {
   for (const { str, expected } of jsTestStrings) {
     expect(JS_EXTENSIONS_PATTERN.test(str)).toBe(expected);
@@ -37,8 +44,8 @@ test('CSS_EXTENSIONS_PATTERN', () => {
   }
 });
 
-test('ENTRY_EXTENSIONS_PATTERN', () => {
-  for (const { str, expected } of [...jsTestStrings, ...cssTestStrings]) {
-    expect(ENTRY_EXTENSIONS_PATTERN.test(str)).toBe(expected);
+test('DTS_EXTENSIONS_PATTERN', () => {
+  for (const { str, expected } of dtsTestStrings) {
+    expect(DTS_EXTENSIONS_PATTERN.test(str)).toBe(expected);
   }
 });