perf(client): reduce the @rsdoctor/client size (#461)

Co-authored-by: neverland <[email protected]>

package.json

@@ -47,6 +47,11 @@
     "vite-tsconfig-paths": "4.2.1",
     "vitest": "1.0.0-beta.1"
   },
+  "pnpm": {
+    "overrides": {
+      "react-dom": "18.2.0"
+    }
+  },
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=16.18.1",

packages/client/package.json

@@ -29,9 +29,9 @@
   ],
   "devDependencies": {
     "@rsbuild/core": "0.7.10",
-    "@rsbuild/plugin-sass": "0.7.10",
     "@rsbuild/plugin-node-polyfill": "0.7.10",
     "@rsbuild/plugin-react": "0.7.10",
+    "@rsbuild/plugin-sass": "0.7.10",
     "@rsbuild/plugin-type-check": "0.7.10",
     "@rsdoctor/components": "workspace:*",
     "@rsdoctor/types": "workspace:*",

packages/components/package.json

@@ -50,7 +50,7 @@
     "dist/"
   ],
   "devDependencies": {
-    "@ant-design/icons": "4.8.3",
+    "@ant-design/icons": "5.3.5",
     "@monaco-editor/react": "4.6.0",
     "@rsdoctor/graph": "workspace:*",
     "@rsdoctor/types": "workspace:*",

packages/components/src/components/Charts/TimelineCharts/index.tsx

@@ -1,6 +1,14 @@
 import React, { useState, useEffect, memo } from 'react';
-import ReactECharts from 'echarts-for-react';
+import ReactEChartsCore from 'echarts-for-react/lib/core';
 import * as echarts from 'echarts/core';
+import { CustomChart } from 'echarts/charts';
+import {
+  TooltipComponent,
+  GridComponent,
+  DataZoomComponent,
+} from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+
 import dayjs from 'dayjs';
 import { ChartProps, DurationMetric, ITraceEventData } from '../types';
 import { groupBy } from 'lodash-es';
@@ -31,6 +39,15 @@ export const TimelineCom: React.FC<{
   let categories: string[] = [];
   const [optionsData, setOptinsData] = useState({});
 
+  // Register the required components
+  echarts.use([
+    CustomChart,
+    TooltipComponent,
+    GridComponent,
+    DataZoomComponent,
+    CanvasRenderer,
+  ]);
+
   useEffect(() => {
     if (!loaderData) return;
     const _categories: string[] = [];
@@ -246,7 +263,7 @@ export const TimelineCom: React.FC<{
   }, [loaderData, pluginsData]);
 
   return (
-    <ReactECharts
+    <ReactEChartsCore
       option={optionsData}
       echarts={echarts}
       style={{ width: '100%', minHeight: '400px' }}

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

@@ -4,8 +4,13 @@ import { Space, Card, Tooltip } from 'antd';
 import { SDK } from '@rsdoctor/types';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Editor, { OnMount } from '@monaco-editor/react';
-import { editor } from 'monaco-editor';
-import { getOriginalLanguage, beautifyModulePath, getSelectionRange, getRevealPositionForViewer } from '../../utils';
+import type { editor, Range as RangeClass } from 'monaco-editor';
+import {
+  getOriginalLanguage,
+  beautifyModulePath,
+  getSelectionRange,
+  getRevealPositionForViewer,
+} from '../../utils';
 import { CodeOpener } from '../Opener';
 
 interface FileHightLightViewerProps {
@@ -15,24 +20,41 @@ interface FileHightLightViewerProps {
   moduleCode: SDK.ModuleSource;
 }
 
-export const FileHightLightViewer: React.FC<FileHightLightViewerProps> = ({ dependency, module, cwd, moduleCode }) => {
+export const FileHightLightViewer: React.FC<FileHightLightViewerProps> = ({
+  dependency,
+  module,
+  cwd,
+  moduleCode,
+}) => {
   const editorRef = useRef<editor.IStandaloneCodeEditor>(null);
 
   if (!dependency) return null;
 
   const { statements } = dependency;
   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 || moduleCode?.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 || moduleCode?.source;
   const modulePath = module.path;
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
     // here is the editor instance
     // you can store it in `useRef` for further usage
     // @ts-ignore
     editorRef.current = editor;
-    const range = getSelectionRange({ start, end }, monaco.Range);
-    const position = getRevealPositionForViewer(range.startLineNumber, range.startColumn);
+    const range = getSelectionRange(
+      { start, end },
+      monaco.Range as unknown as typeof RangeClass,
+    );
+    const position = getRevealPositionForViewer(
+      range.startLineNumber,
+      range.startColumn,
+    );
     editor.revealPositionInCenter(position);
     editor.deltaDecorations(
       [],

packages/components/src/pages/TreeShaking/editor.tsx

@@ -4,7 +4,8 @@ import { Card, Space, Tooltip, Typography } from 'antd';
 import { InfoCircleOutlined, LoadingOutlined } from '@ant-design/icons';
 import type { Module, ModuleGraph, SourceRange } from '@rsdoctor/graph';
 import Editor, { OnMount } from '@monaco-editor/react';
-import { Range, editor } from 'monaco-editor';
+import { Range } from './range';
+import type { editor, Range as RangeClass } from 'monaco-editor';
 import { SDK } from '@rsdoctor/types';
 import { SetEditorStatus } from './types';
 import { parseOpenTag } from './open-tag';
@@ -61,14 +62,17 @@ export function CodeEditor(props: CodeEditorProps) {
         oldRanges.current,
         ranges.map((arr) => {
           return {
-            range: getSelectionRange(arr, Range),
+            range: getSelectionRange(
+              arr,
+              Range as unknown as typeof RangeClass,
+            ),
             options: {
               stickiness: 1,
               inlineClassName: 'tree-shaking-statement-side-effect',
               isWholeLine: false,
               showIfCollapsed: true,
             },
-          } as editor.IModelDecoration;
+          } as unknown as editor.IModelDecoration;
         }),
       );
 
@@ -78,7 +82,7 @@ export function CodeEditor(props: CodeEditorProps) {
         oldToLine.current !== toLine
       ) {
         oldToLine.current = toLine;
-        editorRef.current.revealLine(toLine, editor.ScrollType.Smooth);
+        editorRef.current.revealLine(toLine, 0);
       }
     }