npm - @modern-js/plugin-devtools - Versions diffs - 2.46.0 → 2.47.0 - Mend

@modern-js/plugin-devtools 2.46.0 → 2.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/cli.d.ts CHANGED Viewed

@@ -1,5 +1,9 @@
 import type { AppTools, CliPlugin } from '@modern-js/app-tools';
-import { DevtoolsPluginOptions, DevtoolsPluginInlineOptions } from './config';
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions };
-export declare const devtoolsPlugin: (inlineOptions?: DevtoolsPluginInlineOptions) => CliPlugin<AppTools>;
+import { ClientDefinition } from '@modern-js/devtools-kit/node';
+import { DevtoolsPluginOptions } from './config';
+export type { DevtoolsPluginOptions };
+export type DevtoolsPlugin = CliPlugin<AppTools> & {
+    setClientDefinition: (def: ClientDefinition) => void;
+};
+export declare const devtoolsPlugin: (inlineOptions?: DevtoolsPluginOptions) => DevtoolsPlugin;
 export default devtoolsPlugin;

package/dist/cli.js CHANGED Viewed

@@ -34,95 +34,127 @@ __export(cli_exports, {
 module.exports = __toCommonJS(cli_exports);
 var import_http = __toESM(require("http"));
 var import_path = __toESM(require("path"));
+var import_assert = __toESM(require("assert"));
 var import_utils = require("@modern-js/utils");
 var import_serve_static = __toESM(require("serve-static"));
-var import_devtools_kit = require("@modern-js/devtools-kit");
-var import_ufo = require("ufo");
+var import_node = require("@modern-js/devtools-kit/node");
 var import_config = require("./config");
 var import_rpc = require("./rpc");
 var import_socket = require("./utils/socket");
-const devtoolsPlugin = (inlineOptions = {}) => ({
-  name: "@modern-js/plugin-devtools",
-  usePlugins: [],
-  setup: async (api) => {
-    const ctx = (0, import_config.resolveContext)(inlineOptions);
-    if (!ctx.enable) {
-      return {};
-    }
-    const httpServer = await setupHttpServer();
-    const socketServer = new import_socket.SocketServer({
-      server: httpServer.instance,
-      path: "/rpc"
-    });
-    const rpc = await (0, import_rpc.setupClientConnection)({
-      api,
-      server: socketServer
-    });
-    return {
-      prepare: rpc.hooks.prepare,
-      modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
-      beforeRestart() {
-        return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
-      },
-      modifyServerRoutes({ routes }) {
-        routes.push({
-          urlPath: "/sw-proxy.js",
-          isSPA: true,
-          isSSR: false,
-          entryPath: "public/sw-proxy.js"
-        });
-        return {
-          routes
-        };
-      },
-      config() {
-        var _api_useConfigContext_devtools;
-        const config = (_api_useConfigContext_devtools = api.useConfigContext().devtools) !== null && _api_useConfigContext_devtools !== void 0 ? _api_useConfigContext_devtools : {};
-        Object.assign(ctx, (0, import_config.resolveContext)(ctx, config), {
-          __keep: true
-        });
-        import_utils.logger.info(`${ctx.def.name.formalName} Devtools is enabled`);
-        const runtimeEntry = require.resolve("@modern-js/devtools-client/mount");
-        const swProxyEntry = require.resolve("@modern-js/devtools-client/sw-proxy");
-        return {
-          builderPlugins: [
-            rpc.builderPlugin
-          ],
-          source: {
-            preEntry: [
-              (0, import_ufo.withQuery)(runtimeEntry, ctx)
+const devtoolsPlugin = (inlineOptions = {}) => {
+  const ctx = (0, import_config.resolveContext)(inlineOptions);
+  return {
+    name: "@modern-js/plugin-devtools",
+    usePlugins: [],
+    setClientDefinition(def) {
+      Object.assign(ctx.def, def);
+    },
+    async setup(api) {
+      if (!ctx.enable)
+        return {};
+      const httpServer = await setupHttpServer();
+      const socketServer = new import_socket.SocketServer({
+        server: httpServer.instance,
+        path: "/rpc"
+      });
+      const rpc = await (0, import_rpc.setupClientConnection)({
+        api,
+        server: socketServer,
+        def: ctx.def
+      });
+      return {
+        prepare: rpc.hooks.prepare,
+        modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
+        beforeRestart() {
+          return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
+        },
+        modifyServerRoutes({ routes }) {
+          routes.push({
+            urlPath: "/sw-proxy.js",
+            isSPA: true,
+            isSSR: false,
+            entryPath: "public/sw-proxy.js"
+          });
+          return {
+            routes
+          };
+        },
+        config() {
+          var _api_useConfigContext_devtools;
+          const config = (_api_useConfigContext_devtools = api.useConfigContext().devtools) !== null && _api_useConfigContext_devtools !== void 0 ? _api_useConfigContext_devtools : {};
+          Object.assign(ctx, (0, import_config.resolveContext)(ctx, config));
+          import_utils.logger.info(`${ctx.def.name.formalName} DevTools is enabled`);
+          const swProxyEntry = require.resolve("@modern-js/devtools-client/sw-proxy");
+          const serializedOptions = JSON.stringify(ctx);
+          const tags = [
+            {
+              tag: "script",
+              children: `window.__MODERN_JS_DEVTOOLS_OPTIONS__ = ${serializedOptions};`,
+              head: true,
+              append: false
+            }
+          ];
+          const styles = [];
+          const manifest = require("@modern-js/devtools-client/manifest");
+          for (const src of manifest.routeAssets.mount.assets) {
+            (0, import_assert.default)(typeof src === "string");
+            if (src.endsWith(".js")) {
+              tags.push({
+                tag: "script",
+                attrs: {
+                  src
+                },
+                head: true,
+                append: false
+              });
+            } else if (src.endsWith(".css")) {
+              styles.push(src);
+            }
+          }
+          tags.push({
+            tag: "template",
+            attrs: {
+              id: "_modern_js_devtools_styles"
+            },
+            append: true,
+            head: false,
+            children: styles.map((src) => `<link rel="stylesheet" href="${src}">`).join("")
+          });
+          return {
+            builderPlugins: [
+              rpc.builderPlugin
             ],
-            include: [
-              runtimeEntry
-            ]
-          },
-          output: {
-            copy: [
-              {
-                from: swProxyEntry,
-                to: "public"
-              }
-            ]
-          },
-          html: {},
-          tools: {
-            devServer: {
-              proxy: {
-                [import_devtools_kit.ROUTE_BASENAME]: {
-                  target: `http://localhost:${httpServer.port}`,
-                  pathRewrite: {
-                    [`^${import_devtools_kit.ROUTE_BASENAME}`]: ""
-                  },
-                  ws: true
+            source: {},
+            output: {
+              copy: [
+                {
+                  from: swProxyEntry,
+                  to: "public"
+                }
+              ]
+            },
+            html: {
+              tags
+            },
+            tools: {
+              devServer: {
+                proxy: {
+                  [import_node.ROUTE_BASENAME]: {
+                    target: `http://localhost:${httpServer.port}`,
+                    pathRewrite: {
+                      [`^${import_node.ROUTE_BASENAME}`]: ""
+                    },
+                    ws: true
+                  }
                 }
               }
             }
-          }
-        };
-      }
-    };
-  }
-});
+          };
+        }
+      };
+    }
+  };
+};
 var cli_default = devtoolsPlugin;
 const setupHttpServer = async () => {
   const port = await (0, import_utils.getPort)(8782, {

package/dist/config.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-import { ClientDefinition, SetupClientParams } from '@modern-js/devtools-kit';
+import { ClientDefinition } from '@modern-js/devtools-kit/node';
 import type { RequiredDeep } from 'type-fest';
-export type DevtoolsPluginOptions = Partial<SetupClientParams>;
-export interface DevtoolsPluginInlineOptions extends DevtoolsPluginOptions {
+export interface DevtoolsPluginOptions {
     enable?: boolean;
+    endpoint?: string;
+    dataSource?: string;
 }
-export type DevtoolsContext = RequiredDeep<DevtoolsPluginInlineOptions>;
-export declare const getDefaultOptions: () => {
+export interface DevtoolsContext extends RequiredDeep<DevtoolsPluginOptions> {
     def: ClientDefinition;
-};
-export declare const resolveContext: (...sources: DevtoolsPluginInlineOptions[]) => DevtoolsContext;
+}
+export declare const resolveContext: (...sources: Partial<DevtoolsContext>[]) => DevtoolsContext;

package/dist/config.js CHANGED Viewed

@@ -18,21 +18,20 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var config_exports = {};
 __export(config_exports, {
-  getDefaultOptions: () => getDefaultOptions,
   resolveContext: () => resolveContext
 });
 module.exports = __toCommonJS(config_exports);
-var import_devtools_kit = require("@modern-js/devtools-kit");
-const getDefaultOptions = () => ({
-  def: new import_devtools_kit.ClientDefinition()
-});
+var import_node = require("@modern-js/devtools-kit/node");
 const resolveContext = (...sources) => {
   const ret = {
     enable: process.env.NODE_ENV === "development",
-    dataSource: `${import_devtools_kit.ROUTE_BASENAME}/rpc`,
-    endpoint: import_devtools_kit.ROUTE_BASENAME,
-    def: new import_devtools_kit.ClientDefinition()
+    dataSource: `${import_node.ROUTE_BASENAME}/rpc`,
+    endpoint: import_node.ROUTE_BASENAME,
+    def: new import_node.ClientDefinition()
   };
+  Object.assign(ret, {
+    __keep: true
+  });
   for (const opts of sources) {
     var _opts_enable;
     ret.enable = (_opts_enable = opts.enable) !== null && _opts_enable !== void 0 ? _opts_enable : ret.enable;
@@ -40,25 +39,12 @@ const resolveContext = (...sources) => {
     ret.dataSource = (_opts_dataSource = opts.dataSource) !== null && _opts_dataSource !== void 0 ? _opts_dataSource : ret.dataSource;
     var _opts_endpoint;
     ret.endpoint = (_opts_endpoint = opts.endpoint) !== null && _opts_endpoint !== void 0 ? _opts_endpoint : ret.endpoint;
-    if (opts.def) {
-      if (opts.def.announcement) {
-        Object.assign(ret.def.announcement, opts.def.announcement);
-      }
-      if (opts.def.assets) {
-        Object.assign(ret.def.assets, opts.def.assets);
-      }
-      if (opts.def.name) {
-        Object.assign(ret.def.name, opts.def.name);
-      }
-      if (opts.def.packages) {
-        Object.assign(ret.def.packages, opts.def.packages);
-      }
-    }
+    var _opts_def;
+    ret.def = (_opts_def = opts.def) !== null && _opts_def !== void 0 ? _opts_def : ret.def;
   }
   return ret;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getDefaultOptions,
   resolveContext
 });

package/dist/index.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 export { devtoolsPlugin, default } from './cli';
-export type { DevtoolsPluginOptions, DevtoolsPluginInlineOptions } from './cli';
+export type { DevtoolsPluginOptions } from './cli';

package/dist/rpc/index.d.ts CHANGED Viewed

@@ -1,15 +1,14 @@
-import { ClientDefinition, type ClientFunctions, type ServerFunctions } from '@modern-js/devtools-kit';
-import type { PartialDeep } from 'type-fest';
+import { ClientDefinition, type ClientFunctions, type ServerFunctions } from '@modern-js/devtools-kit/node';
 import type { RsbuildPlugin } from '@modern-js/uni-builder';
 import { CliPluginAPI, InjectedHooks } from '../types';
 import { SocketServer } from '../utils/socket';
 export interface SetupClientConnectionOptions {
     api: CliPluginAPI;
     server: SocketServer;
+    def: ClientDefinition;
 }
 export declare const setupClientConnection: (options: SetupClientConnectionOptions) => Promise<{
     client: import("birpc").BirpcReturn<ClientFunctions, ServerFunctions>;
     hooks: InjectedHooks;
     builderPlugin: RsbuildPlugin;
-    setDefinition: (definition: PartialDeep<ClientDefinition>) => void;
 }>;

package/dist/rpc/index.js CHANGED Viewed

@@ -32,16 +32,13 @@ __export(rpc_exports, {
 });
 module.exports = __toCommonJS(rpc_exports);
 var import_lodash = __toESM(require("@modern-js/utils/lodash"));
-var import_devtools_kit = require("@modern-js/devtools-kit");
+var import_node = require("@modern-js/devtools-kit/node");
 var import_birpc = require("birpc");
+var flatted = __toESM(require("flatted"));
 var import_p_defer = __toESM(require("p-defer"));
 var import_module = require("../utils/module");
 const setupClientConnection = async (options) => {
-  const { api, server } = options;
-  let def = {};
-  const setDefinition = (definition) => {
-    def = definition;
-  };
+  const { api, server, def } = options;
   const _fileSystemRoutesMap = {};
   let handleMessage = null;
   const onceConnection = new Promise((resolve) => {
@@ -134,6 +131,36 @@ const setupClientConnection = async (options) => {
           "@modern-js/uni-builder",
           "@rsbuild/core",
           "@rspack/core/package.json"
+        ],
+        "@rsdoctor/rspack-plugin": [
+          ctx.rootPath,
+          "@rsdoctor/rspack-plugin/package.json"
+        ],
+        "@rsdoctor/webpack-plugin": [
+          ctx.rootPath,
+          "@rsdoctor/webpack-plugin/package.json"
+        ],
+        "@web-doctor/webpack-plugin": [
+          ctx.rootPath,
+          "@web-doctor/webpack-plugin/package.json"
+        ],
+        "@web-doctor/rspack-plugin": [
+          ctx.rootPath,
+          "@web-doctor/rspack-plugin/package.json"
+        ],
+        "@web-doctor/webpack-plugin(builder)": [
+          ctx.rootPath,
+          "@edenx/builder-plugin-web-doctor",
+          "@web-doctor/webpack-plugin/package.json"
+        ],
+        "@web-doctor/rspack-plugin(builder)": [
+          ctx.rootPath,
+          "@edenx/builder-plugin-web-doctor",
+          "@web-doctor/rspack-plugin/package.json"
+        ],
+        "@rsdoctor/core": [
+          ctx.rootPath,
+          "@rsdoctor/core/package.json"
         ]
       };
       for (const [name, expr] of Object.entries(resolveExprs)) {
@@ -148,12 +175,20 @@ const setupClientConnection = async (options) => {
       return deferred.compileTimeCost.promise;
     },
     async getClientDefinition() {
-      const ret = new import_devtools_kit.ClientDefinition();
-      Object.assign(ret.name, def.name);
-      Object.assign(ret.packages, def.packages);
-      Object.assign(ret.assets, def.assets);
-      Object.assign(ret.announcement, def.announcement);
-      return ret;
+      return def;
+    },
+    async getDoctorOverview() {
+      const ctx = api.useAppContext();
+      const manifestPath = await (0, import_node.findManifest)(ctx.distDirectory);
+      const json = await (0, import_node.parseManifest)(require(manifestPath));
+      const data = {
+        numModules: json.data.moduleGraph.modules.length,
+        numChunks: json.data.chunkGraph.chunks.length,
+        numPackages: json.data.packageGraph.packages.length,
+        summary: json.data.summary,
+        errors: json.data.errors
+      };
+      return data;
     },
     echo(content) {
       return content;
@@ -162,8 +197,10 @@ const setupClientConnection = async (options) => {
   const clientRpcOptions = {
     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 = (0, import_birpc.createBirpc)(serverFunctions, clientRpcOptions);
   const hooks = {
@@ -186,15 +223,23 @@ const setupClientConnection = async (options) => {
         deferred.builder.config.resolved.resolve(import_lodash.default.cloneDeep(api2.getRsbuildConfig()));
         deferred.builder.config.transformed.resolve(import_lodash.default.cloneDeep(api2.getNormalizedConfig()));
       });
-      const modifyBundlerConfig = api2.context.bundlerType === "webpack" ? api2.modifyWebpackConfig : api2.modifyRspackConfig;
       const expectBundlerNum = import_lodash.default.castArray(api2.context.targets).length;
       const bundlerConfigs = [];
-      modifyBundlerConfig((config) => {
+      const handleBundlerConfig = (config) => {
         bundlerConfigs.push(config);
         if (bundlerConfigs.length >= expectBundlerNum) {
           deferred.bundler.config.resolved.resolve(import_lodash.default.cloneDeep(bundlerConfigs));
         }
-      });
+      };
+      if (api2.context.bundlerType === "webpack") {
+        api2.modifyWebpackConfig((config) => {
+          handleBundlerConfig(config);
+        });
+      } else {
+        api2.modifyRspackConfig((config) => {
+          handleBundlerConfig(config);
+        });
+      }
       api2.onBeforeCreateCompiler(({ bundlerConfigs: bundlerConfigs2 }) => {
         deferred.bundler.config.transformed.resolve(import_lodash.default.cloneDeep(bundlerConfigs2));
       });
@@ -213,8 +258,7 @@ const setupClientConnection = async (options) => {
   return {
     client: clientConn,
     hooks,
-    builderPlugin,
-    setDefinition
+    builderPlugin
   };
 };
 // Annotate the CommonJS export names for ESM import in node:

package/package.json CHANGED Viewed

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.46.0",
+  "version": "2.47.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -28,26 +28,30 @@
         "jsnext:source": "./src/index.ts",
         "require": "./dist/index.js"
       },
-      "default": "./dist/index.js"
+      "default": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
     "./cli": {
       "jsnext:source": "./src/cli.ts",
-      "default": "./dist/cli.js"
+      "default": "./dist/cli.js",
+      "types": "./dist/cli.d.ts"
     },
     "./runtime": {
       "jsnext:source": "./src/runtime.ts",
-      "default": "./dist/runtime.js"
+      "default": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
     }
   },
   "dependencies": {
     "birpc": "0.2.13",
+    "flatted": "^3.2.9",
     "serve-static": "^1.14.1",
     "p-defer": "^3.0.0",
     "ws": "^8.13.0",
     "ufo": "^1.3.0",
-    "@modern-js/devtools-kit": "2.46.0",
-    "@modern-js/devtools-client": "2.46.0",
-    "@modern-js/utils": "2.46.0"
+    "@modern-js/devtools-kit": "2.47.0",
+    "@modern-js/devtools-client": "2.47.0",
+    "@modern-js/utils": "2.47.0"
   },
   "devDependencies": {
     "@types/serve-static": "^1.13.10",
@@ -56,17 +60,17 @@
     "@types/ws": "^8.5.5",
     "type-fest": "^4.1.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.46.0",
-    "@modern-js/core": "2.46.0",
-    "@modern-js/module-tools": "2.46.0",
-    "@modern-js/runtime": "2.46.0",
-    "@modern-js/types": "2.46.0",
-    "@modern-js/server-core": "2.46.0",
-    "@modern-js/uni-builder": "2.46.0",
-    "@scripts/build": "2.46.0"
+    "@modern-js/module-tools": "2.47.0",
+    "@modern-js/app-tools": "2.47.0",
+    "@modern-js/core": "2.47.0",
+    "@modern-js/runtime": "2.47.0",
+    "@modern-js/server-core": "2.47.0",
+    "@modern-js/types": "2.47.0",
+    "@modern-js/uni-builder": "2.47.0",
+    "@scripts/build": "2.47.0"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "^2.46.0"
+    "@modern-js/runtime": "^2.47.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {