feat(bundle): rspack mode add bundle analysis by rspack's hooks and add rules scan.

.changeset/stale-tools-bow.md

@@ -0,0 +1,10 @@
+---
+'@rsdoctor/webpack-plugin': patch
+'@rsdoctor/rspack-plugin': patch
+'@rsdoctor/components': patch
+'@rsdoctor/client': patch
+'@rsdoctor/types': patch
+'@rsdoctor/core': patch
+---
+
+feat(bundle): rspack mode add bundle analysis by rspack's hooks and add rules scan.

e2e/package.json

@@ -21,7 +21,7 @@
     "@rsdoctor/types": "workspace:*",
     "@rsdoctor/utils": "workspace:*",
     "@rsdoctor/webpack-plugin": "workspace:*",
-    "@rspack/core": "0.4.1",
+    "@rspack/core": "0.5.1",
     "@types/lodash": "^4.14.200",
     "@types/node": "^16",
     "@types/react": "^18",

examples/rsbuild-minimal/package.json

@@ -16,14 +16,17 @@
   "license": "MIT",
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "semver6": "npm:[email protected]",
+    "semver7": "npm:[email protected]"
   },
   "devDependencies": {
-    "@rsbuild/core": "0.2.15",
-    "@rsbuild/plugin-react":  "0.2.15",
+    "@rsbuild/core": "0.3.0",
+    "@rsbuild/plugin-react": "0.3.0",
     "@rsdoctor/rspack-plugin": "workspace:*",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/semver6": "npm:@types/[email protected]",
     "typescript": "^5.3.0"
   }
 }

examples/rsbuild-minimal/rsbuild.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
     }
   },
   output: {
-    disableMinimize: false
+    disableFilenameHash: true,
+    disableMinimize: true
   }
 });

examples/rsbuild-minimal/src/App.tsx

@@ -1,5 +1,6 @@
 import './App.css';
-import './button.css';
+import './semver';
+import './semver7';
 
 const App = () => {
   return (

examples/rsbuild-minimal/src/semver.ts

@@ -0,0 +1,11 @@
+import semver from 'semver6';
+
+semver.valid('1.2.3') // '1.2.3'
+semver.valid('a.b.c') // null
+semver.clean('  =v1.2.3   ') // '1.2.3'
+semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
+semver.gt('1.2.3', '9.8.7') // false
+semver.lt('1.2.3', '9.8.7') // true
+semver.minVersion('>=1.0.0') // '1.0.0'
+semver.valid(semver.coerce('v2')) // '2.0.0'
+semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

examples/rsbuild-minimal/src/semver7.ts

@@ -0,0 +1,11 @@
+import semver from 'semver7';
+
+semver.valid('1.2.3') // '1.2.3'
+semver.valid('a.b.c') // null
+semver.clean('  =v1.2.3   ') // '1.2.3'
+semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
+semver.gt('1.2.3', '9.8.7') // false
+semver.lt('1.2.3', '9.8.7') // true
+semver.minVersion('>=1.0.0') // '1.0.0'
+semver.valid(semver.coerce('v2')) // '2.0.0'
+semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

examples/rspack-minimal/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@arco-design/web-react": "^2.58.3",
     "@svgr/webpack": "^8.1.0",
+    "@swc/helpers": "^0.5.3",
     "classnames": "^2.5.1",
     "css-loader": "^6.9.0",
     "less-loader": "^11.1.4",
@@ -18,11 +19,12 @@
   },
   "devDependencies": {
     "@rsdoctor/rspack-plugin": "workspace:*",
-    "@rspack/cli": "0.4.5",
-    "@rspack/core": "0.4.5",
-    "@rspack/plugin-react-refresh": "0.4.5",
+    "@rspack/cli": "0.5.1",
+    "@rspack/core": "0.5.1",
+    "@rspack/plugin-react-refresh": "0.5.1",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.8",
+    "react-refresh": "^0.14.0",
     "web-vitals": "^2.1.4"
   },
   "browserslist": {

examples/rspack-minimal/rspack.config.js

@@ -71,9 +71,9 @@ const config = {
 			}
 		]
 	},
-	optimization: {
-		minimize: false // Disabling minification because it takes too long on CI
-	},
+	resolve: {
+    extensions: ['...', '.tsx', '.ts', '.jsx'], // "..." means to extend from the default extensions
+  },
 	plugins: [
 		new ReactRefreshPlugin(),
 		new RsdoctorRspackPlugin({

packages/client/rsbuild.config.ts

@@ -66,6 +66,7 @@ export default defineConfig((env) => {
     },
 
     performance: {
+      buildCache: false,
       chunkSplit: {
         strategy: 'custom',
         splitChunks: {

packages/components/src/components/Alert/package-relation.tsx

@@ -44,9 +44,10 @@ export const PackageRelationReasons: React.FC<{
                 {data.map((e, i) => {
                   const { dependency, module, relativePath } = e!;
                   const { statements } = dependency;
-                  const { start } = module.isPreferSource
+                  const { start } = statements?.[0]?.position ? module.isPreferSource
                     ? statements[0].position.source!
-                    : statements[0].position.transformed;
+                    : statements[0].position.transformed
+                    : { start:{ line:0, column: 0 } };
                   const text = `${relativePath}:${start.line}:${start.column || 1}`;
 
                   return (

packages/components/src/components/CodeViewer/hightlight.tsx

@@ -21,8 +21,8 @@ export const FileHightLightViewer: React.FC<FileHightLightViewerProps> = ({ depe
   if (!dependency) return null;
 
   const { statements } = dependency;
-  const hasSourceRange = Boolean(statements[0].position.source);
-  const { start, end } = hasSourceRange ? statements[0].position.source! : statements[0].position.transformed;
+  const hasSourceRange = Boolean(statements?.[0]?.position?.source);
+  const { start, end } = statements?.[0]?.position ? hasSourceRange ? statements[0].position.source! : statements[0].position.transformed : { start: { line: 0, column: 0  }, end: { line: 0, column: 0  } } ;
   const content = hasSourceRange ? moduleCode?.source : moduleCode?.transformed;
   const modulePath = module.path;
 

packages/components/src/pages/BundleSize/components/asset.tsx

@@ -30,7 +30,7 @@ const tagStyle = {
 };
 
 export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) => {
-  const [tab, setTab] = useState('parsedSource');
+  const [tab, setTab] = useState('source');
   const { t } = useI18n();
 
   const TAB_LAB_MAP: Record<string, string> = {
@@ -60,19 +60,18 @@ export const ModuleCodeViewer: React.FC<{ data: SDK.ModuleData }> = ({ data }) =
         {(source) => {
           return (
             <>
-            { !source['source'] && !source['parsedSource'] ?
+            { !source['source'] && !source['parsedSource'] && !source['transformed'] ?
               <Empty description="No Code. Rspack builder not support code yet. And if you upload the stats.json to analysis, it's also no code to show." />
               :
               <Card
                 className="code-size-card"
                 style={{ width: '100%' }}
-                tabList={Object.keys(omitBy(source, (s) => !s)).map(k => ({ 'tab': k })).map((e) => ({
+                tabList={Object.keys(omitBy(source, (s) => !s)).map(k => ({ tab: k })).map((e) => ({
                   ...e,
                   tab: TAB_LAB_MAP[e.tab],
                   key: e.tab,
                   })
                 )}
-                activeTabKey={tab}
                 onTabChange={(v) => setTab(v)}
                 tabBarExtraContent={
                   <Popover

packages/core/package.json

@@ -47,13 +47,14 @@
   },
   "dependencies": {
     "@rsdoctor/graph": "workspace:*",
-    "@rsdoctor/types": "workspace:*",
     "@rsdoctor/sdk": "workspace:*",
+    "@rsdoctor/types": "workspace:*",
     "@rsdoctor/utils": "workspace:*",
-    "@rspack/core": "0.3.14",
+    "@rspack/core": "0.5.1",
     "axios": "^1.6.1",
     "bytes": "3.1.2",
     "enhanced-resolve": "5.12.0",
+    "fs-extra": "^11.1.1",
     "loader-utils": "^2.0.4",
     "lodash": "^4.17.21",
     "path-browserify": "1.0.1",
@@ -64,6 +65,7 @@
   "devDependencies": {
     "@rsdoctor/test-helper": "workspace:*",
     "@types/bytes": "3.1.1",
+    "@types/fs-extra": "^11.0.2",
     "@types/loader-utils": "^2.0.5",
     "@types/lodash": "^4.14.200",
     "@types/node": "^16",

packages/core/src/build-utils/build/module-graph/webpack/transform.ts

@@ -20,6 +20,7 @@ import {
   removeNoImportStyle,
 } from '@/build-utils/common/module-graph';
 import { hasSetEsModuleStatement } from '../parser';
+import { isFunction } from 'lodash';
 
 export interface TransformContext {
   astCache?: Map<Webpack.NormalModule, Node.Program>;
@@ -173,12 +174,12 @@ async function appendModuleData(
       ? ''
       : module.getSource().transformed.length > 0
       ? module.getSource().transformed
-      : origin.originalSource?.()?.source().toString() ?? '';
+      : isFunction(origin?.originalSource) ? origin.originalSource()?.source()?.toString() : '';
     const transformedSize = isExternalModule(origin)
       ? 0
       : module.getSize().transformedSize > 0
       ? module.getSize().transformedSize
-      : Buffer.from(transformed).byteLength;
+      : Buffer.from(transformed as string).byteLength; // TODO:: rspack
 
     module.setSource({
       transformed,
@@ -216,7 +217,7 @@ async function appendModuleData(
       origin.buildMeta?.strictHarmonyModule ?? false;
     module.meta.packageData = packageData;
 
-    if (!features?.lite) {
+    if (!features?.lite && origin?.dependencies) {
       // lite bundle Mode don't have dependency；
       // Record dependent data.
       Array.from(origin.dependencies)
@@ -244,13 +245,6 @@ export async function appendModuleGraphByCompilation(
   context?: TransformContext,
 ) {
   try {
-    // Rspack does not follow webpack graph logic, which affects tree-shaking analysis
-    if (
-      'rspackVersion' in compilation.compiler &&
-      compilation.compiler.rspackVersion
-    ) {
-      return graph;
-    }
 
     // Only webpack will execute the following logic.
     const { moduleGraph: webpackGraph, fileSystemInfo } =

packages/webpack-plugin/src/plugins/bundle.ts → packages/core/src/inner-plugins/plugins/bundle.ts

@@ -1,10 +1,11 @@
-import { Chunks } from '@rsdoctor/core/common-utils';
-import { InternalBasePlugin } from '@rsdoctor/core/plugins';
-import { Manifest } from '@rsdoctor/types';
-import type { Compilation, Compiler } from 'webpack';
+
+import { Manifest, Plugin } from '@rsdoctor/types';
+import { InternalBasePlugin } from './base';
+import { Chunks } from '@/build-utils/common';
+
 
 export class InternalBundlePlugin<
-  T extends Compiler,
+  T extends Plugin.BaseCompiler,
 > extends InternalBasePlugin<T> {
   public readonly name = 'bundle';
 
@@ -25,11 +26,11 @@ export class InternalBundlePlugin<
     return v;
   }
 
-  public thisCompilation = (compilation: Compilation) => {
+  public thisCompilation = (compilation: Plugin.BaseCompilation) => {
     // save asset content to map
     if (
       compilation.hooks.processAssets &&
-      compilation.hooks.afterOptimizeAssets
+      'afterOptimizeAssets' in compilation.hooks
     ) {
       compilation.hooks.afterOptimizeAssets.tap(
         this.tapPostOptions,
@@ -40,7 +41,21 @@ export class InternalBundlePlugin<
           });
         },
       );
-    } else {
+    } else if (
+      compilation.hooks.processAssets &&
+      'afterProcessAssets' in compilation.hooks
+    )  { 
+      // This is for rspack hooks.
+      compilation.hooks.afterProcessAssets.tap(
+        this.tapPostOptions,
+        () => {
+          Object.keys(compilation.assets).forEach((file) => {
+            const v = this.ensureAssetContent(file);
+            v.content = compilation.assets[file].source().toString();
+          });
+        },
+      );
+    } else if ('afterOptimizeChunkAssets' in compilation.hooks)  { 
       compilation.hooks.afterOptimizeChunkAssets.tap(
         this.tapPostOptions,
         (chunks) => {