feat(inner-rsdoctor): add innerClientName for inner-rsdoctor (#236)

.changeset/late-crabs-work.md

@@ -0,0 +1,11 @@
+---
+'@rsdoctor/webpack-plugin': patch
+'@rsdoctor/rspack-plugin': patch
+'@rsdoctor/components': patch
+'@rsdoctor/client': patch
+'@rsdoctor/types': patch
+'@rsdoctor/core': patch
+'@rsdoctor/sdk': patch
+---
+
+feat(inner-rsdoctor): add innerClientName for inner-rsdoctor

packages/client/package.json

@@ -40,7 +40,7 @@
     "@types/webpack": "5.28.0",
     "antd": "5.8.3",
     "normalize.css": "8.0.1",
-    "react": "^18",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.11",
     "react-router-dom": "6.4.3",

packages/components/package.json

@@ -70,7 +70,7 @@
     "monaco-editor": "0.34.1",
     "rc-dialog": "9.1.0",
     "rc-tree": "5.7.2",
-    "react": "^18",
+    "react": "18.2.0",
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
     "react-json-view": "1.21.3",

packages/core/src/inner-plugins/utils/config.ts

@@ -26,6 +26,7 @@ export function normalizeUserConfig<Rules extends Linter.ExtendRuleData[]>(
     sdkInstance,
     reportCodeType = { noModuleSource: false, noAssetsAndModuleSource: false },
     disableTOSUpload = false,
+    innerClientName = '',
   } = config;
 
   assert(linter && typeof linter === 'object');
@@ -89,6 +90,7 @@ export function normalizeUserConfig<Rules extends Linter.ExtendRuleData[]>(
       ? SDK.ToDataType.Lite
       : SDK.ToDataType.Normal,
     disableTOSUpload,
+    innerClientName,
   };
 
   return res;

packages/core/src/types/plugin.ts

@@ -9,8 +9,7 @@ import { ChunkGraph, ModuleGraph } from '@rsdoctor/graph';
 import { rules } from '@/rules/rules';
 import { RuleData } from '@rsdoctor/types/dist/linter';
 
-
-type InternalRules = typeof rules[number] & RuleData[];
+type InternalRules = (typeof rules)[number] & RuleData[];
 
 export interface RsdoctorWebpackPluginOptions<
   Rules extends LinterType.ExtendRuleData[],
@@ -49,10 +48,16 @@ export interface RsdoctorWebpackPluginOptions<
     | { noModuleSource?: boolean; noAssetsAndModuleSource?: boolean }
     | undefined;
   /**
-   * control the Rsdoctor upload data to TOS.
+   * control the Rsdoctor upload data to TOS, used by inner-rsdoctor.
    * @default false
    */
   disableTOSUpload?: boolean;
+
+  /**
+   * The name of inner rsdoctor's client package, used by inner-rsdoctor.
+   * @default false
+   */
+  innerClientName?: string;
 }
 
 export interface RsdoctorWebpackMultiplePluginOptions<

packages/rspack-plugin/src/plugin.ts

@@ -52,6 +52,7 @@ export class RsdoctorRspackPlugin<Rules extends Linter.ExtendRuleData[]>
       root: process.cwd(),
       type: SDK.ToDataType.Normal,
       config: { disableTOSUpload: this.options.disableTOSUpload },
+      innerClientName: this.options.innerClientName,
     });
     this.modulesGraph = new ModuleGraph();
   }

packages/sdk/src/sdk/sdk/types.ts

@@ -27,6 +27,7 @@ export interface RsdoctorBuilderSDK extends RsdoctorSDKOptions {
   port?: number;
   noServer?: boolean;
   config?: SDK.SDKOptionsType;
+  innerClientName?: string;
 }
 
 export interface RsdoctorWebpackSDKOptions extends RsdoctorBuilderSDK {}

packages/sdk/src/sdk/sdk/webpack.ts

@@ -52,7 +52,7 @@ export class RsdoctorWebpackSDK<
     super(options);
     this.server = options.noServer
       ? new RsdoctorFakeServer(this, undefined)
-      : new RsdoctorServer(this, options.port);
+      : new RsdoctorServer(this, options.port, options.innerClientName);
     this.type = options.type || SDK.ToDataType.Normal;
     this.extraConfig = options.config;
   }
@@ -224,13 +224,15 @@ export class RsdoctorWebpackSDK<
       this._loaderStart.push(data);
     } else if (_builtinLoader.endAt) {
       const matchLoaderStart = this._loaderStart.find(
-        (e) => (e.resource.path === data.resource.path && e.loaders[0].loader === _builtinLoader.loader),
+        (e) =>
+          e.resource.path === data.resource.path &&
+          e.loaders[0].loader === _builtinLoader.loader,
       );
 
       if (matchLoaderStart) {
         matchLoaderStart.loaders[0].result = _builtinLoader.result;
         matchLoaderStart.loaders[0].endAt = _builtinLoader.endAt;
-        this.reportLoader([matchLoaderStart])
+        this.reportLoader([matchLoaderStart]);
       }
     }
   }

packages/sdk/src/sdk/server/apis/renderer.ts

@@ -4,17 +4,24 @@ import path from 'path';
 import { File } from '@rsdoctor/utils/build';
 import { BaseAPI } from './base';
 import { Router } from '../router';
+import { Algorithm } from '@rsdoctor/utils/common';
 
 export class RendererAPI extends BaseAPI {
   private isClientServed = false;
 
   /** sdk manifest api */
   @Router.get(SDK.ServerAPI.API.EntryHtml)
-  public async entryHtml(): Promise<SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.EntryHtml>> {
-    const { server, res } = this.ctx;
+  public async entryHtml(): Promise<
+    SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.EntryHtml>
+  > {
+    const { server, res, req } = this.ctx;
+    const name = req.url && req.url.match(/innerClientName=([\w-|\=]+)/)?.[1];
+
     // dynamic serve client:
     // require.resolve will failed due to the dist will remove when execute "npm run build" of client.
-    const clientHtmlPath = require.resolve('@rsdoctor/client');
+    const clientHtmlPath = name
+      ? require.resolve(`${Algorithm.decompressText(name)}/react-client`)
+      : require.resolve('@rsdoctor/client');
     if (!this.isClientServed) {
       this.isClientServed = true;
       const clientDistPath = path.resolve(clientHtmlPath, '..');

packages/sdk/src/sdk/server/index.ts

@@ -11,13 +11,16 @@ import { Router } from './router';
 import * as APIs from './apis';
 import { chalk, logger } from '@rsdoctor/utils/logger';
 import { openBrowser } from '@/sdk/utils/openBrowser';
+import { Algorithm } from '@rsdoctor/utils/common';
 export * from './utils';
 
 export class RsdoctorServer implements SDK.RsdoctorServerInstance {
   private _server!: Common.PromiseReturnType<typeof Server.createServer>;
 
   public port: number;
 
+  public innerClientName: string;
+
   private _socket?: Socket;
 
   private disposed = true;
@@ -27,11 +30,13 @@ export class RsdoctorServer implements SDK.RsdoctorServerInstance {
   constructor(
     protected sdk: SDK.RsdoctorBuilderSDKInstance,
     port = Server.defaultPort,
+    innerClientName = '',
   ) {
     assert(typeof port === 'number');
     // maybe the port will be rewrite in bootstrap()
     this.port = port;
     this._router = new Router({ sdk, server: this, apis: Object.values(APIs) });
+    this.innerClientName = innerClientName;
   }
 
   public get app(): SDK.RsdoctorServerInstance['app'] {
@@ -161,13 +166,21 @@ export class RsdoctorServer implements SDK.RsdoctorServerInstance {
   public getClientUrl(route?: 'homepage'): string;
 
   public getClientUrl(route = 'homepage', ...args: unknown[]) {
-    const relativeUrl = SDK.ServerAPI.API.EntryHtml;
+    const relativeUrl = this.innerClientName
+      ? `${
+          SDK.ServerAPI.API.EntryHtml
+        }?innerClientName=${Algorithm.compressText(this.innerClientName)}`
+      : SDK.ServerAPI.API.EntryHtml;
 
     switch (route) {
       case Client.RsdoctorClientRoutes.BundleDiff: {
         const [baseline, current] = args as string[];
         const qs = Bundle.getBundleDiffPageQueryString([baseline, current]);
-        return `${relativeUrl}${qs}#${Client.RsdoctorClientRoutes.BundleDiff}`;
+        return this.innerClientName
+          ? `${relativeUrl}${qs.replace('?', '&')}#${
+              Client.RsdoctorClientRoutes.BundleDiff
+            }`
+          : `${relativeUrl}${qs}#${Client.RsdoctorClientRoutes.BundleDiff}`;
       }
       default:
         return relativeUrl;

packages/webpack-plugin/src/plugin.ts

@@ -57,6 +57,7 @@ export class RsdoctorWebpackPlugin<Rules extends Linter.ExtendRuleData[]>
         root: process.cwd(),
         type: this.options.reportCodeType,
         config: { disableTOSUpload: this.options.disableTOSUpload },
+        innerClientName: this.options.innerClientName,
       });
     this.outsideInstance = Boolean(this.options.sdkInstance);
     this.modulesGraph = new ModuleGraph();