diff --git a/.changeset/late-crabs-work.md b/.changeset/late-crabs-work.md new file mode 100644 index 00000000..d5c1a272 --- /dev/null +++ b/.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 diff --git a/packages/client/package.json b/packages/client/package.json index c2c2ed8e..9c8683d8 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/components/package.json b/packages/components/package.json index dcd47442..7cfcce58 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/core/src/inner-plugins/utils/config.ts b/packages/core/src/inner-plugins/utils/config.ts index 93bc513d..8c5836e1 100644 --- a/packages/core/src/inner-plugins/utils/config.ts +++ b/packages/core/src/inner-plugins/utils/config.ts @@ -26,6 +26,7 @@ export function normalizeUserConfig( sdkInstance, reportCodeType = { noModuleSource: false, noAssetsAndModuleSource: false }, disableTOSUpload = false, + innerClientName = '', } = config; assert(linter && typeof linter === 'object'); @@ -89,6 +90,7 @@ export function normalizeUserConfig( ? SDK.ToDataType.Lite : SDK.ToDataType.Normal, disableTOSUpload, + innerClientName, }; return res; diff --git a/packages/core/src/types/plugin.ts b/packages/core/src/types/plugin.ts index 3c374a30..0ede226e 100644 --- a/packages/core/src/types/plugin.ts +++ b/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< diff --git a/packages/rspack-plugin/src/plugin.ts b/packages/rspack-plugin/src/plugin.ts index 4cd122d8..f11ff50e 100644 --- a/packages/rspack-plugin/src/plugin.ts +++ b/packages/rspack-plugin/src/plugin.ts @@ -52,6 +52,7 @@ export class RsdoctorRspackPlugin root: process.cwd(), type: SDK.ToDataType.Normal, config: { disableTOSUpload: this.options.disableTOSUpload }, + innerClientName: this.options.innerClientName, }); this.modulesGraph = new ModuleGraph(); } diff --git a/packages/sdk/src/sdk/sdk/types.ts b/packages/sdk/src/sdk/sdk/types.ts index d0d41ff9..c5051535 100644 --- a/packages/sdk/src/sdk/sdk/types.ts +++ b/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 {} diff --git a/packages/sdk/src/sdk/sdk/webpack.ts b/packages/sdk/src/sdk/sdk/webpack.ts index f2387859..9da0d4a8 100644 --- a/packages/sdk/src/sdk/sdk/webpack.ts +++ b/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]); } } } diff --git a/packages/sdk/src/sdk/server/apis/renderer.ts b/packages/sdk/src/sdk/server/apis/renderer.ts index bf17ac11..f9a2d1ad 100644 --- a/packages/sdk/src/sdk/server/apis/renderer.ts +++ b/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> { - const { server, res } = this.ctx; + public async entryHtml(): Promise< + SDK.ServerAPI.InferResponseType + > { + 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, '..'); diff --git a/packages/sdk/src/sdk/server/index.ts b/packages/sdk/src/sdk/server/index.ts index db8a6a7a..5afa4ba8 100644 --- a/packages/sdk/src/sdk/server/index.ts +++ b/packages/sdk/src/sdk/server/index.ts @@ -11,6 +11,7 @@ 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 { @@ -18,6 +19,8 @@ export class RsdoctorServer implements SDK.RsdoctorServerInstance { 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; diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts index b8384905..5593097c 100644 --- a/packages/webpack-plugin/src/plugin.ts +++ b/packages/webpack-plugin/src/plugin.ts @@ -57,6 +57,7 @@ export class RsdoctorWebpackPlugin 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(); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 12cc99cb..fe5c8a1d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -430,7 +430,7 @@ importers: specifier: 8.0.1 version: 8.0.1 react: - specifier: ^18 + specifier: 18.2.0 version: 18.2.0 react-dom: specifier: 18.2.0 @@ -511,7 +511,7 @@ importers: specifier: 5.7.2 version: 5.7.2(react-dom@17.0.2)(react@18.2.0) react: - specifier: ^18 + specifier: 18.2.0 version: 18.2.0 react-hyper-tree: specifier: 0.3.12