@modern-js/plugin-devtools 2.53.0 → 2.54.0

package/dist/plugins/state.js

@@ -0,0 +1,200 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var state_exports = {};
+__export(state_exports, {
+  pluginState: () => pluginState
+});
+module.exports = __toCommonJS(state_exports);
+var import_node = require("@modern-js/devtools-kit/node");
+var import_lodash = __toESM(require("@modern-js/utils/lodash"));
+var import_valtio = require("valtio");
+var import_module = require("../utils/module");
+const resolveDependencies = async (rootPath) => {
+  const ret = {};
+  const resolveExprs = {
+    react: [
+      rootPath,
+      "react/package.json"
+    ],
+    "@modern-js/app-tools": [
+      rootPath,
+      "@modern-js/app-tools/package.json"
+    ],
+    "@edenx/app-tools": [
+      rootPath,
+      "@edenx/app-tools/package.json"
+    ],
+    webpack: [
+      rootPath,
+      "@modern-js/app-tools",
+      "@modern-js/uni-builder",
+      "@rsbuild/webpack",
+      "webpack/package.json"
+    ],
+    "@rspack/core": [
+      rootPath,
+      "@modern-js/uni-builder",
+      "@rsbuild/core",
+      "@rspack/core/package.json"
+    ],
+    "@rsdoctor/rspack-plugin": [
+      rootPath,
+      "@rsdoctor/rspack-plugin/package.json"
+    ],
+    "@rsdoctor/webpack-plugin": [
+      rootPath,
+      "@rsdoctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/webpack-plugin": [
+      rootPath,
+      "@web-doctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/rspack-plugin": [
+      rootPath,
+      "@web-doctor/rspack-plugin/package.json"
+    ],
+    "@web-doctor/webpack-plugin(builder)": [
+      rootPath,
+      "@edenx/builder-plugin-web-doctor",
+      "@web-doctor/webpack-plugin/package.json"
+    ],
+    "@web-doctor/rspack-plugin(builder)": [
+      rootPath,
+      "@edenx/builder-plugin-web-doctor",
+      "@web-doctor/rspack-plugin/package.json"
+    ],
+    "@rsdoctor/core": [
+      rootPath,
+      "@rsdoctor/core/package.json"
+    ]
+  };
+  for (const [name, expr] of Object.entries(resolveExprs)) {
+    try {
+      ret[name] = (0, import_module.requireModule)(expr).version;
+    } catch {
+    }
+  }
+  return ret;
+};
+const getDoctorOverview = async (ctx) => {
+  const manifestPath = await (0, import_node.findManifest)(ctx.distDirectory);
+  const json = await (0, import_node.parseManifest)(require(manifestPath));
+  return {
+    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
+  };
+};
+const pluginState = {
+  async setup(api) {
+    api.vars.state = (0, import_valtio.proxy)({
+      framework: {
+        config: {}
+      },
+      builder: {
+        config: {}
+      },
+      bundler: {
+        configs: {}
+      },
+      context: api.context,
+      dependencies: {},
+      fileSystemRoutes: {}
+    });
+    api.frameworkHooks.hook("modifyFileSystemRoutes", ({ entrypoint, routes }) => {
+      api.vars.state.fileSystemRoutes[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
+    });
+    const builderApi = await api.setupBuilder();
+    api.vars.state.builder.context = builderApi.context;
+    resolveDependencies(builderApi.context.rootPath).then((deps) => {
+      api.vars.state.dependencies = deps;
+    });
+    api.builderHooks.hook("modifyBundlerChain", () => {
+      api.vars.state.builder.config = {
+        resolved: import_lodash.default.cloneDeep(builderApi.getRsbuildConfig()),
+        transformed: import_lodash.default.cloneDeep(builderApi.getNormalizedConfig())
+      };
+    });
+    const expectBundlerNum = import_lodash.default.castArray(builderApi.context.targets).length;
+    const bundlerConfigs = [];
+    const handleBundlerConfig = (config) => {
+      bundlerConfigs.push(config);
+      if (bundlerConfigs.length >= expectBundlerNum) {
+        api.vars.state.bundler.configs.resolved = import_lodash.default.cloneDeep(bundlerConfigs);
+      }
+    };
+    if (builderApi.context.bundlerType === "webpack") {
+      api.builderHooks.hook("modifyWebpackConfig", handleBundlerConfig);
+    } else {
+      api.builderHooks.hook("modifyRspackConfig", handleBundlerConfig);
+    }
+    api.builderHooks.hook("onBeforeCreateCompiler", ({ bundlerConfigs: bundlerConfigs2 }) => {
+      api.vars.state.bundler.configs.transformed = import_lodash.default.cloneDeep(bundlerConfigs2);
+    });
+    let buildStartedAt = NaN;
+    api.builderHooks.hook("onAfterCreateCompiler", () => {
+      buildStartedAt = Date.now();
+    });
+    api.builderHooks.hook("onDevCompileDone", () => {
+      api.vars.state.performance = {
+        compileDuration: Date.now() - buildStartedAt
+      };
+    });
+    api.builderHooks.hook("onAfterBuild", () => {
+      api.vars.state.performance = {
+        compileDuration: Date.now() - buildStartedAt
+      };
+    });
+    api.hooks.hook("settleState", async () => {
+      try {
+        api.vars.state.doctor = await getDoctorOverview(frameworkContext);
+      } catch (err) {
+      }
+    });
+    const frameworkApi = await api.setupFramework();
+    const frameworkContext = {
+      ...frameworkApi.useAppContext(),
+      builder: null,
+      serverInternalPlugins: null
+    };
+    api.vars.state.framework = {
+      context: frameworkContext,
+      config: {
+        resolved: frameworkApi.useConfigContext(),
+        transformed: frameworkApi.useResolvedConfigContext()
+      }
+    };
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginState
+});

package/dist/plugins/watcher.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from '../types';
+export declare const pluginWatcher: Plugin;

package/dist/plugins/watcher.js

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var watcher_exports = {};
+__export(watcher_exports, {
+  pluginWatcher: () => pluginWatcher
+});
+module.exports = __toCommonJS(watcher_exports);
+var import_utils = require("@modern-js/utils");
+var import_config = require("../utils/config");
+var import_options = require("../options");
+const pluginWatcher = {
+  async setup(api) {
+    const basename = `${api.context.def.name.shortName}.runtime.json`;
+    const frameworkApi = await api.setupFramework();
+    const appCtx = frameworkApi.useAppContext();
+    const watcher = import_utils.chokidar.watch((0, import_config.getConfigFilenames)(basename), {
+      cwd: appCtx.appDirectory,
+      ignorePermissionErrors: true
+    });
+    const refreshStoragePreset = async () => {
+      const configs = await (0, import_config.loadConfigFiles)(basename, appCtx.appDirectory);
+      if (!configs)
+        return;
+      api.context.storagePresets = [];
+      (0, import_options.updateContext)(api.context, ...configs);
+    };
+    watcher.on("add", refreshStoragePreset);
+    watcher.on("change", refreshStoragePreset);
+    watcher.on("unlink", refreshStoragePreset);
+    api.hooks.hook("cleanup", () => {
+      watcher.close();
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginWatcher
+});

package/dist/runtime.d.ts

@@ -0,0 +1,2 @@
+/// <reference lib="dom" />
+export {};

package/dist/runtime.js

@@ -0,0 +1,62 @@
+"use strict";
+var import_runtime = require("@modern-js/devtools-kit/runtime");
+const fetchSync = (url, body) => {
+  const xhr = new XMLHttpRequest();
+  xhr.open("GET", url, false);
+  xhr.send(body);
+  return {
+    text() {
+      return xhr.responseText;
+    },
+    json(reviver2) {
+      return JSON.parse(xhr.responseText, reviver2);
+    },
+    blob() {
+      return new Blob([
+        xhr.response
+      ]);
+    }
+  };
+};
+const importScript = (url) => {
+  const script = document.createElement("script");
+  script.setAttribute("src", url);
+  document.head.appendChild(script);
+};
+const importStyle = (url, parent = document.head) => {
+  const link = document.createElement("link");
+  link.setAttribute("rel", "stylesheet");
+  link.setAttribute("href", url.toString());
+  parent.appendChild(link);
+};
+const GLOBAL_MANIFEST = "window.__modern_js_devtools_manifest";
+const setup = () => {
+  var _document_cookie_match;
+  const injectedManifestUrl = process.env.__USE_MODERNJS_DEVTOOLS__;
+  const cookieManifestUrl = (_document_cookie_match = document.cookie.match(/use_modernjs_devtools=([^;]+)/)) === null || _document_cookie_match === void 0 ? void 0 : _document_cookie_match[1];
+  const devtoolsUrl = cookieManifestUrl || injectedManifestUrl;
+  if (!devtoolsUrl)
+    return;
+  const manifest = fetchSync(devtoolsUrl).json((0, import_runtime.reviver)());
+  manifest.source = devtoolsUrl;
+  const template = document.createElement("template");
+  template.id = "_modern_js_devtools_styles";
+  document.body.appendChild(template);
+  const setupScript = document.createElement("script");
+  setupScript.textContent = `${GLOBAL_MANIFEST} = ${JSON.stringify(manifest)};`;
+  document.head.appendChild(setupScript);
+  for (const src of manifest.routeAssets.mount.assets) {
+    if (src.endsWith(".js")) {
+      importScript(src);
+    } else if (src.endsWith(".css")) {
+      importStyle(src, template.content);
+    }
+  }
+};
+try {
+  setup();
+} catch (e) {
+  const err = new Error("Failed to setup Modern.js DevTools.");
+  err.cause = e;
+  console.error(err);
+}

package/dist/types/common.d.ts

@@ -2,6 +2,9 @@
 import { BaseHooks } from '@modern-js/core';
 import type { AppTools, AppToolsHooks, CliPlugin } from '@modern-js/app-tools';
 import type { ServerPlugin, ToThreads } from '@modern-js/server-core';
+import type { RsbuildPluginAPI } from '@rsbuild/core';
+import { Hookable } from 'hookable';
+import { DevtoolsContext } from '@modern-js/devtools-kit/node';
 export type CliPluginAPI = Parameters<NonNullable<CliPlugin<AppTools>['setup']>>[0];
 export type ServerPluginAPI = Parameters<NonNullable<ServerPlugin['setup']>>[0];
 export type BufferLike = string | Buffer | DataView | number | ArrayBufferView | Uint8Array | ArrayBuffer | SharedArrayBuffer | ReadonlyArray<any> | ReadonlyArray<number> | {
@@ -17,5 +20,37 @@ export type BufferLike = string | Buffer | DataView | number | ArrayBufferView |
 } | {
     [Symbol.toPrimitive]: (hint: string) => string;
 };
-export type Hooks = BaseHooks<any> & AppToolsHooks<any>;
-export type InjectedHooks = Pick<ToThreads<Hooks>, 'prepare' | 'modifyFileSystemRoutes' | 'afterCreateCompiler'>;
+export type CleanHooks<T> = {
+    [K in keyof T]: T[K] extends (...args: [...infer Params]) => any ? (...args: [...Params]) => void : never;
+};
+export type $FrameworkHooks = CleanHooks<Pick<ToThreads<BaseHooks<any> & AppToolsHooks<any>>, 'prepare' | 'modifyFileSystemRoutes' | 'modifyServerRoutes' | 'afterCreateCompiler' | 'afterDev' | 'beforeRestart' | 'beforeExit' | 'afterBuild'>>;
+export interface FrameworkHooks extends $FrameworkHooks {
+    config: () => void;
+}
+type UnwrapBuilderHooks<T> = {
+    [K in keyof T]: T[K] extends (...args: any) => any ? (...params: [...Parameters<Parameters<T[K]>[0]>]) => void : never;
+};
+export type $BuilderHooks = UnwrapBuilderHooks<Pick<RsbuildPluginAPI, 'modifyBundlerChain' | 'modifyWebpackConfig' | 'modifyRspackConfig' | 'onBeforeCreateCompiler' | 'onAfterCreateCompiler' | 'onDevCompileDone' | 'onAfterBuild' | 'onExit'>>;
+export interface BuilderHooks extends $BuilderHooks {
+}
+export interface DevtoolsHooks {
+    cleanup: () => Promise<void> | void;
+    settleState: () => Promise<void> | void;
+}
+declare global {
+    interface DevtoolsPluginVars extends Record<string, unknown> {
+    }
+}
+export interface PluginApi {
+    builderHooks: Hookable<BuilderHooks>;
+    frameworkHooks: Hookable<FrameworkHooks>;
+    hooks: Hookable<DevtoolsHooks>;
+    setupFramework: () => Promise<CliPluginAPI>;
+    setupBuilder: () => Promise<RsbuildPluginAPI>;
+    context: DevtoolsContext;
+    vars: DevtoolsPluginVars;
+}
+export interface Plugin {
+    setup: (api: PluginApi) => Promise<void>;
+}
+export {};

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.53.0",
+  "version": "2.54.0",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -43,7 +43,7 @@
     }
   },
   "dependencies": {
-    "@hono/node-server": "^1.8.2",
+    "@hono/node-server": "^1.11.2",
     "birpc": "0.2.13",
     "clipboardy": "^4.0.0",
     "cookie-es": "^1.0.0",
@@ -54,9 +54,10 @@
     "ufo": "^1.3.0",
     "valtio": "^1.11.1",
     "ws": "^8.13.0",
-    "@modern-js/devtools-kit": "2.53.0",
-    "@modern-js/utils": "2.53.0",
-    "@modern-js/devtools-client": "2.53.0"
+    "hookable": "^5.5.3",
+    "@modern-js/devtools-client": "2.54.0",
+    "@modern-js/utils": "2.54.0",
+    "@modern-js/devtools-kit": "2.54.0"
   },
   "devDependencies": {
     "@swc/helpers": "0.5.3",
@@ -64,17 +65,18 @@
     "@types/ws": "^8.5.5",
     "type-fest": "^4.1.0",
     "typescript": "^5",
-    "@modern-js/app-tools": "2.53.0",
-    "@modern-js/core": "2.53.0",
-    "@modern-js/module-tools": "2.53.0",
-    "@modern-js/runtime": "2.53.0",
-    "@modern-js/server-core": "2.53.0",
-    "@modern-js/types": "2.53.0",
-    "@scripts/build": "2.53.0",
-    "@modern-js/uni-builder": "2.53.0"
+    "@rsbuild/core": "0.7.9",
+    "@modern-js/app-tools": "2.54.0",
+    "@modern-js/core": "2.54.0",
+    "@modern-js/module-tools": "2.54.0",
+    "@modern-js/runtime": "2.54.0",
+    "@modern-js/server-core": "2.54.0",
+    "@modern-js/types": "2.54.0",
+    "@modern-js/uni-builder": "2.54.0",
+    "@scripts/build": "2.54.0"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "^2.53.0"
+    "@modern-js/runtime": "^2.54.0"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {

package/dist/rpc/index.d.ts

@@ -1,14 +0,0 @@
-import { type ClientFunctions, type ServerFunctions, DevtoolsContext } 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;
-    ctx: DevtoolsContext;
-}
-export declare const setupClientConnection: (options: SetupClientConnectionOptions) => Promise<{
-    client: import("birpc").BirpcReturn<ClientFunctions, ServerFunctions>;
-    hooks: InjectedHooks;
-    builderPlugin: RsbuildPlugin;
-}>;