feat(devtools): preparation for integration of rsdoctor

packages/devtools/client/modern.config.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import { appTools, defineConfig } from '@modern-js/app-tools';
 import { nanoid } from '@modern-js/utils';
-import { ROUTE_BASENAME } from '@modern-js/devtools-kit';
+import { ROUTE_BASENAME } from '@modern-js/devtools-kit/runtime';
 import { ServiceWorkerCompilerPlugin } from './plugins/ServiceWorkerCompilerPlugin';
 import packageMeta from './package.json';
 

packages/devtools/client/src/components/Devtools/Capsule.tsx

@@ -1,4 +1,4 @@
-import { SetupClientParams } from '@modern-js/devtools-kit';
+import { SetupClientParams } from '@modern-js/devtools-kit/runtime';
 import { Flex, Theme } from '@radix-ui/themes';
 import React, { useEffect, useState } from 'react';
 import { useEvent, useToggle } from 'react-use';

packages/devtools/client/src/components/ServerRoute/EntryRoute/ClientRoute/Stats.tsx

@@ -1,4 +1,4 @@
-import { FileSystemRoutes } from '@modern-js/devtools-kit';
+import { FileSystemRoutes } from '@modern-js/devtools-kit/runtime';
 import type { RouteLegacy, ServerRoute } from '@modern-js/types';
 import _ from 'lodash';
 import React, { Suspense } from 'react';

packages/devtools/client/src/entries/client/routes/state.tsx

@@ -3,7 +3,7 @@ import {
   ServerFunctions,
   ClientFunctions as ToServerFunctions,
   WebSocketChannel,
-} from '@modern-js/devtools-kit';
+} from '@modern-js/devtools-kit/runtime';
 import { createBirpc } from 'birpc';
 import { createHooks } from 'hookable';
 import {

packages/devtools/client/src/entries/client/types/index.ts

@@ -3,7 +3,7 @@ import type {
   CustomTabView,
   NameDefinition,
   PackageDefinition,
-} from '@modern-js/devtools-kit';
+} from '@modern-js/devtools-kit/runtime';
 import { ReactElement, ReactNode } from 'react';
 
 export interface BreadcrumbItem {

packages/devtools/client/src/entries/mount/index.tsx

@@ -1,7 +1,7 @@
 import './react-devtools-backend';
 import './state';
 import { createRoot } from 'react-dom/client';
-import { SetupClientParams } from '@modern-js/devtools-kit';
+import { SetupClientParams } from '@modern-js/devtools-kit/runtime';
 import styles from './index.module.scss';
 import { DevtoolsCapsule } from '@/components/Devtools/Capsule';
 

packages/devtools/client/src/entries/mount/state.ts

@@ -1,4 +1,4 @@
-import { MessagePortChannel } from '@modern-js/devtools-kit';
+import { MessagePortChannel } from '@modern-js/devtools-kit/runtime';
 import { createBirpc } from 'birpc';
 import { createHooks } from 'hookable';
 import createDeferred from 'p-defer';

packages/devtools/client/tests/utils/react-devtools.test.ts

@@ -3,7 +3,7 @@ import {
   MessagePortChannel,
   PostMessageListener,
   PostMessageTarget,
-} from '@modern-js/devtools-kit';
+} from '@modern-js/devtools-kit/runtime';
 import { WallAgent } from '../../src/utils/react-devtools';
 
 beforeAll(() => {

packages/devtools/kit/package.json

@@ -32,9 +32,14 @@
       "default": "./dist/index.js"
     },
     "./runtime": {
-      "jsnext:source": "./src/runtime/index.ts",
-      "types": "./dist/runtime/index.d.ts",
-      "default": "./dist/runtime/index.js"
+      "jsnext:source": "./src/runtime.ts",
+      "types": "./dist/runtime.d.ts",
+      "default": "./dist/runtime.js"
+    },
+    "./node": {
+      "jsnext:source": "./src/node.ts",
+      "types": "./dist/node.d.ts",
+      "default": "./dist/node.js"
     },
     "./package.json": {
       "default": "./package.json"
@@ -43,7 +48,10 @@
   "typesVersions": {
     "*": {
       "runtime": [
-        "./dist/runtime/index.d.ts"
+        "./dist/runtime.d.ts"
+      ],
+      "node": [
+        "./dist/node.d.ts"
       ]
     }
   },
@@ -60,6 +68,7 @@
     "birpc": "0.2.13",
     "hookable": "^5.5.3",
     "ufo": "^1.3.0",
+    "flatted": "^3.2.9",
     "ws": "^8.13.0"
   },
   "devDependencies": {
@@ -81,10 +90,22 @@
     "nanoid": "3.3.4",
     "react": "~18.2.0",
     "type-fest": "^4.1.0",
-    "typescript": "^5"
+    "typescript": "^5",
+    "@rsdoctor/types": "^0.1.0",
+    "@rsdoctor/utils": "^0.1.0"
   },
   "peerDependencies": {
-    "react": "~18.2.0"
+    "react": "~18.2.0",
+    "@rsdoctor/types": "^0.1.0",
+    "@rsdoctor/utils": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@rsdoctor/types": {
+      "optional": true
+    },
+    "@rsdoctor/utils": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "publishConfig": {

packages/devtools/kit/src/channel.ts

@@ -1,4 +1,5 @@
 import { nanoid } from 'nanoid';
+import * as flatted from 'flatted';
 import type { ChannelOptions } from 'birpc';
 
 export class WebSocketChannel implements ChannelOptions {
@@ -53,11 +54,11 @@ export class WebSocketChannel implements ChannelOptions {
   }
 
   serialize(data: unknown): string {
-    return JSON.stringify(data);
+    return flatted.stringify([data]);
   }
 
   deserialize(e: MessageEvent): unknown {
-    return JSON.parse(e.data.toString());
+    return flatted.parse(e.data.toString())[0];
   }
 }
 

packages/devtools/kit/src/client.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { Entrypoint } from '@modern-js/types/cli';
+import type { Entrypoint } from '@modern-js/types';
 import logo from './logo';
 import { FileSystemRoutes } from './server';
 

packages/devtools/kit/src/index.ts

@@ -1,6 +1 @@
-export * from './server';
-export * from './client';
-export * from './mount-point';
-export * from './utils';
-export * from './constants';
-export * from './channel';
+export * from './node';

packages/devtools/kit/src/node.ts

@@ -0,0 +1,7 @@
+export * from './server';
+export * from './client';
+export * from './mount-point';
+export * from './utils';
+export * from './constants';
+export * from './channel';
+export * from './rsdoctor';

packages/devtools/kit/src/rsdoctor.ts

@@ -0,0 +1,37 @@
+import type { Manifest } from '@rsdoctor/types';
+
+export async function fetchShardingFile(url: string): Promise<string> {
+  const { Url } = await import('@rsdoctor/utils/common');
+  if (Url.isUrl(url)) {
+    const resp = await fetch(url);
+    return resp.text();
+  }
+  // json string
+  return url;
+}
+
+export async function parseManifest(
+  json: Manifest.RsdoctorManifestWithShardingFiles,
+) {
+  const utils = await import('@rsdoctor/utils/common');
+  let transformedData: Manifest.RsdoctorManifestData;
+
+  // try to load cloud data first
+  if (json.data) {
+    try {
+      transformedData = await utils.Manifest.fetchShardingFiles(
+        json.data,
+        fetchShardingFile,
+      );
+    } catch (error) {
+      console.log('cloudData load error: ', error);
+    }
+  } else {
+    throw new Error('fallback to load json.data');
+  }
+
+  return {
+    ...json,
+    data: transformedData!,
+  };
+}

packages/devtools/kit/src/runtime.ts

@@ -0,0 +1,7 @@
+export type * from './server';
+export * from './client';
+export * from './mount-point';
+export * from './utils';
+export * from './constants';
+export * from './channel';
+export type * from './rsdoctor';

packages/devtools/kit/src/server.ts

@@ -9,11 +9,7 @@ import type {
   RspackConfig,
 } from '@modern-js/uni-builder';
 import { NormalizedConfig } from '@modern-js/core';
-import {
-  RouteLegacy,
-  NestedRouteForCli,
-  PageRoute,
-} from '@modern-js/types/cli';
+import { RouteLegacy, NestedRouteForCli, PageRoute } from '@modern-js/types';
 import type { ClientDefinition } from './client';
 
 export type BuilderContext = RsbuildContext;

packages/devtools/kit/tsconfig.json

@@ -3,11 +3,13 @@
   "extends": "@modern-js/tsconfig/base",
   "compilerOptions": {
     "target": "ES2019",
+    "module": "ES2020",
     "declaration": true,
     "outDir": "./dist",
     "jsx": "preserve",
     "baseUrl": "./",
     "isolatedModules": true,
+    "moduleResolution": "bundler",
     "paths": {},
     "skipLibCheck": true
   },

packages/devtools/plugin/package.json

@@ -50,6 +50,7 @@
     "birpc": "0.2.13",
     "@modern-js/devtools-kit": "workspace:*",
     "@modern-js/devtools-client": "workspace:*",
+    "flatted": "^3.2.9",
     "@modern-js/utils": "workspace:*",
     "serve-static": "^1.14.1",
     "p-defer": "^3.0.0",

packages/devtools/plugin/src/cli.ts

@@ -5,7 +5,7 @@ import { ProxyDetail } from '@modern-js/types';
 import { getPort, logger } from '@modern-js/utils';
 import createServeMiddleware from 'serve-static';
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
-import { ROUTE_BASENAME } from '@modern-js/devtools-kit';
+import { ROUTE_BASENAME } from '@modern-js/devtools-kit/node';
 import {
   DevtoolsPluginOptions,
   DevtoolsPluginInlineOptions,

packages/devtools/plugin/src/config.ts

@@ -2,7 +2,7 @@ import {
   ClientDefinition,
   ROUTE_BASENAME,
   SetupClientParams,
-} from '@modern-js/devtools-kit';
+} from '@modern-js/devtools-kit/node';
 import type { RequiredDeep } from 'type-fest';
 
 export type DevtoolsPluginOptions = Partial<SetupClientParams>;

packages/devtools/plugin/src/rpc/index.ts

@@ -7,9 +7,10 @@ import {
   type FileSystemRoutes,
   type NormalizedBuilderConfig,
   type ServerFunctions,
-} from '@modern-js/devtools-kit';
+} from '@modern-js/devtools-kit/node';
 import type { JsonValue, PartialDeep } from 'type-fest';
 import { createBirpc, BirpcOptions } from 'birpc';
+import * as flatted from 'flatted';
 import createDeferPromise from 'p-defer';
 import { RawData } from 'ws';
 import type { RsbuildContext, RsbuildPlugin } from '@modern-js/uni-builder';
@@ -150,8 +151,8 @@ export const setupClientConnection = async (
     post: data =>
       onceConnection.then(() => server.clients.forEach(ws => ws.send(data))),
     on: cb => (handleMessage = cb),
-    serialize: v => JSON.stringify(v),
-    deserialize: v => JSON.parse(v.toString()),
+    serialize: v => flatted.stringify([v]),
+    deserialize: v => flatted.parse(v.toString())[0],
   };
 
   const clientConn = createBirpc<ClientFunctions, ServerFunctions>(