@modern-js/plugin-devtools 0.0.0-next-20240701110742 → 0.0.0-next-20240701111908

package/dist/cli.d.ts

@@ -5,7 +5,6 @@ import { Plugin } from './types';
 export type { DevtoolsPluginOptions };
 export type DevtoolsPlugin = CliPlugin<AppTools> & {
     setClientDefinition: (def: ClientDefinition) => void;
-    plugins: Plugin[];
 };
 export declare const BUILTIN_PLUGINS: Plugin[];
 export declare const devtoolsPlugin: (inlineOptions?: DevtoolsPluginOptions) => DevtoolsPlugin;

package/dist/cli.js

@@ -53,10 +53,10 @@ const BUILTIN_PLUGINS = [
   import_debug.pluginDebug,
   import_watcher.pluginWatcher,
   import_service_worker.pluginServiceWorker,
-  // --- //
-  import_http.pluginHttp,
   import_html.pluginHtml,
+  // --- //
   import_state.pluginState,
+  import_http.pluginHttp,
   import_rpc.pluginRpc,
   import_settle.pluginSettleState,
   import_manifest.pluginManifest,
@@ -85,12 +85,12 @@ const devtoolsPlugin = (inlineOptions = {}) => {
     setupBuilder.reject(new Error("Devtools Plugin is disabled"));
     setupFramework.reject(new Error("Devtools Plugin is disabled"));
   });
-  const instance = {
+  for (const plugin of BUILTIN_PLUGINS) {
+    plugin.setup(api);
+  }
+  return {
     name: "@modern-js/plugin-devtools",
     usePlugins: [],
-    plugins: [
-      ...BUILTIN_PLUGINS
-    ],
     setClientDefinition(def) {
       Object.assign(ctx.def, def);
     },
@@ -98,10 +98,6 @@ const devtoolsPlugin = (inlineOptions = {}) => {
       if (!ctx.enable)
         return {};
       setupFramework.resolve(frameworkApi);
-      for (const plugin of instance.plugins) {
-        await plugin.setup(api);
-      }
-      await api.frameworkHooks.callHook("setup", frameworkApi);
       return {
         async prepare() {
           await api.frameworkHooks.callHook("prepare");
@@ -134,8 +130,7 @@ const devtoolsPlugin = (inlineOptions = {}) => {
           const configs = await api.frameworkHooks.callHookParallel("config");
           const builderPlugin = {
             name: "builder-plugin-devtools",
-            async setup(builderApi) {
-              await api.builderHooks.callHook("setup", builderApi);
+            setup(builderApi) {
               setupBuilder.resolve(builderApi);
               builderApi.modifyBundlerChain(async (options, utils) => {
                 await api.builderHooks.callHook("modifyBundlerChain", options, utils);
@@ -173,7 +168,6 @@ const devtoolsPlugin = (inlineOptions = {}) => {
       };
     }
   };
-  return instance;
 };
 var cli_default = devtoolsPlugin;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/plugins/cleanup.js

@@ -22,7 +22,6 @@ __export(cleanup_exports, {
 });
 module.exports = __toCommonJS(cleanup_exports);
 const pluginCleanup = {
-  name: "cleanup",
   async setup(api) {
     let _done = false;
     const cleanup = async () => {

package/dist/plugins/debug.js

@@ -26,21 +26,19 @@ const logger = (0, import_utils.createLogger)({
   level: process.env.LOG_LEVEL || "info"
 });
 const pluginDebug = {
-  name: "debug",
   async setup(api) {
     await api.setupFramework();
     logger.debug("setup framework api");
-    api.builderHooks.hook("setup", () => {
-      logger.debug("setup builder api");
-      api.builderHooks.beforeEach((e) => {
-        logger.debug("after builder hook:", e.name);
-      });
-      api.frameworkHooks.beforeEach((e) => {
-        logger.debug("after framework hook:", e.name);
-      });
-      api.hooks.beforeEach((e) => {
-        logger.debug("after hook:", e.name);
-      });
+    await api.setupBuilder();
+    logger.debug("setup builder api");
+    api.builderHooks.beforeEach((e) => {
+      logger.debug("after builder hook:", e.name);
+    });
+    api.frameworkHooks.beforeEach((e) => {
+      logger.debug("after framework hook:", e.name);
+    });
+    api.hooks.beforeEach((e) => {
+      logger.debug("after hook:", e.name);
     });
   }
 };

package/dist/plugins/html.js

@@ -32,25 +32,25 @@ __export(html_exports, {
 });
 module.exports = __toCommonJS(html_exports);
 const pluginHtml = {
-  name: "html",
   async setup(api) {
     api.frameworkHooks.hook("config", async () => {
-      var _api_vars_http;
-      const port = (_api_vars_http = api.vars.http) === null || _api_vars_http === void 0 ? void 0 : _api_vars_http.port;
+      const clientOptions = {
+        def: api.context.def,
+        src: "/__devtools"
+      };
+      Object.assign(clientOptions, {
+        __keep: true
+      });
       const config = {
         source: {
           preEntry: [
             require.resolve("../runtime")
-          ]
+          ],
+          globalVars: {
+            "process.env.__USE_MODERNJS_DEVTOOLS__": "/__devtools/manifest"
+          }
         }
       };
-      if (port) {
-        var _config;
-        (_config = config).source || (_config.source = {});
-        config.source.globalVars = {
-          "process.env.__USE_MODERNJS_DEVTOOLS__": `http://localhost:${port}/manifest`
-        };
-      }
       return config;
     });
   }

package/dist/plugins/http.d.ts

@@ -3,9 +3,7 @@ import http from 'http';
 import { Plugin } from '../types';
 declare global {
     interface DevtoolsPluginVars {
-        http?: http.Server & {
-            port: number;
-        };
+        http: http.Server;
     }
 }
 export declare const pluginHttp: Plugin;

package/dist/plugins/http.js

@@ -36,7 +36,6 @@ var import_assert = __toESM(require("assert"));
 var import_http = __toESM(require("http"));
 var import_url = require("url");
 var import_hono = require("hono");
-var import_cors = require("hono/cors");
 var import_utils = require("@modern-js/utils");
 var import_node_server = require("@hono/node-server");
 var import_serve_static = require("@hono/node-server/serve-static");
@@ -79,13 +78,16 @@ const hotUpdateHandler = async (c) => {
   }
   return newResp;
 };
+const fallbackHtmlHandler = async (c) => {
+  const filename = import_path.default.resolve(CLIENT_SERVE_DIR, "html/client/index.html");
+  const content = await import_utils.fs.readFile(filename, "utf-8");
+  return c.html(content);
+};
 const pluginHttp = {
-  name: "http",
   async setup(api) {
     if (process.env.NODE_ENV === "production")
       return;
     const app = new import_hono.Hono();
-    app.use("*", (0, import_cors.cors)());
     app.all("/api/cookies", cookiesServiceHandler);
     app.use(
       "/static/*",
@@ -101,6 +103,7 @@ const pluginHttp = {
         "Content-Type": "application/json"
       });
     });
+    app.get("*", fallbackHtmlHandler);
     const server = (0, import_node_server.createAdaptorServer)({
       fetch: app.fetch,
       hostname: "127.0.0.1",
@@ -108,22 +111,29 @@ const pluginHttp = {
         allowHTTP1: true
       }
     });
-    const port = await (0, import_utils.getPort)(8782, {
-      slient: true
-    });
     (0, import_assert.default)(server instanceof import_http.default.Server, "instance should be http.Server");
-    server.listen(port);
-    api.vars.http = Object.assign(server, {
-      port
-    });
+    api.vars.http = server;
     api.frameworkHooks.hook("config", async () => {
+      const port = await (0, import_utils.getPort)(8782, {
+        slient: true
+      });
+      server.listen(port);
       const proxy = {
         [import_node.ROUTE_BASENAME]: {
           target: `http://127.0.0.1:${port}`,
           pathRewrite: {
             [`^${import_node.ROUTE_BASENAME}`]: ""
           },
-          ws: true
+          ws: true,
+          onProxyReq(proxyReq, req) {
+            const addrInfo = req.socket.address();
+            if ("address" in addrInfo) {
+              const { address } = addrInfo;
+              proxyReq.setHeader("X-Forwarded-For", address);
+            } else {
+              proxyReq.removeHeader("X-Forwarded-For");
+            }
+          }
         }
       };
       return {

package/dist/plugins/manifest.js

@@ -36,28 +36,20 @@ var import_node = require("@modern-js/devtools-kit/node");
 var import_utils = require("@modern-js/utils");
 var import_p_defer = __toESM(require("p-defer"));
 const pluginManifest = {
-  name: "manifest",
   async setup(api) {
     const deferredManifest = (0, import_p_defer.default)();
     const deferredManifestJson = (0, import_p_defer.default)();
     api.vars.useManifest = deferredManifest.promise;
     api.vars.useManifestJson = deferredManifestJson.promise;
     api.hooks.hook("settleState", async () => {
-      var _api_vars_http;
       const routesManifestName = require.resolve("@modern-js/devtools-client/manifest");
       const routesManifest = await import_utils.fs.readJSON(routesManifestName);
       const manifest = {
         ...api.vars.state,
+        client: "/__devtools",
+        websocket: "/__devtools/rpc",
         routeAssets: routesManifest.routeAssets
       };
-      const port = (_api_vars_http = api.vars.http) === null || _api_vars_http === void 0 ? void 0 : _api_vars_http.port;
-      if (port) {
-        manifest.client = `http://localhost:${port}/static/html/client/index.html`;
-        manifest.websocket = `ws://localhost:${port}/rpc`;
-      }
-      await api.hooks.callHook("createManifest", {
-        manifest
-      });
       api.vars.manifest = manifest;
       deferredManifest.resolve(manifest);
       const stringified = JSON.stringify(manifest, (0, import_node.replacer)());

package/dist/plugins/rpc.js

@@ -41,7 +41,6 @@ var flatted = __toESM(require("flatted"));
 var import_valtio = require("valtio");
 var import_socket = require("../utils/socket");
 const pluginRpc = {
-  name: "rpc",
   async setup(api) {
     const httpServer = api.vars.http;
     if (!httpServer)

package/dist/plugins/service-worker.js

@@ -32,7 +32,6 @@ __export(service_worker_exports, {
 });
 module.exports = __toCommonJS(service_worker_exports);
 const pluginServiceWorker = {
-  name: "service-worker",
   async setup(api) {
     api.frameworkHooks.hook("modifyServerRoutes", ({ routes }) => {
       routes.push({

package/dist/plugins/settle.js

@@ -22,7 +22,6 @@ __export(settle_exports, {
 });
 module.exports = __toCommonJS(settle_exports);
 const pluginSettleState = {
-  name: "settle-state",
   async setup(api) {
     let _pendingCompiler = 0;
     const handleSettle = async () => {

package/dist/plugins/state.js

@@ -114,7 +114,6 @@ const getDoctorOverview = async (ctx) => {
   };
 };
 const pluginState = {
-  name: "state",
   async setup(api) {
     api.vars.state = (0, import_valtio.proxy)({
       framework: {
@@ -133,70 +132,66 @@ const pluginState = {
     api.frameworkHooks.hook("modifyFileSystemRoutes", ({ entrypoint, routes }) => {
       api.vars.state.fileSystemRoutes[entrypoint.entryName] = import_lodash.default.cloneDeep(routes);
     });
-    api.frameworkHooks.hook("setup", async (frameworkApi) => {
-      api.frameworkHooks.hook("prepare", async () => {
-        const frameworkContext = {
-          ...frameworkApi.useAppContext(),
-          builder: null,
-          serverInternalPlugins: null
-        };
-        api.hooks.hook("settleState", async () => {
-          try {
-            api.vars.state.doctor = await getDoctorOverview(frameworkContext);
-          } catch (err) {
-          }
-        });
-        api.vars.state.framework = {
-          context: frameworkContext,
-          config: {
-            resolved: frameworkApi.useConfigContext(),
-            transformed: frameworkApi.useResolvedConfigContext()
-          }
-        };
-      });
+    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("setup", (builderApi) => {
-      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);
-        }
+    api.builderHooks.hook("modifyBundlerChain", () => {
+      api.vars.state.builder.config = {
+        resolved: import_lodash.default.cloneDeep(builderApi.getRsbuildConfig()),
+        transformed: import_lodash.default.cloneDeep(builderApi.getNormalizedConfig())
       };
-      if (builderApi.context.bundlerType === "webpack") {
-        api.builderHooks.hook("modifyWebpackConfig", handleBundlerConfig);
-      } else {
-        api.builderHooks.hook("modifyRspackConfig", handleBundlerConfig);
+    });
+    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) {
       }
-      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
-        };
-      });
     });
+    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:

package/dist/plugins/watcher.js

@@ -25,7 +25,6 @@ var import_utils = require("@modern-js/utils");
 var import_config = require("../utils/config");
 var import_options = require("../options");
 const pluginWatcher = {
-  name: "watcher",
   async setup(api) {
     const frameworkApi = await api.setupFramework();
     const basename = `${api.context.def.name.shortName}.runtime.json`;

package/dist/runtime.js

@@ -1,19 +1,5 @@
 "use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-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 runtime_exports = {};
-module.exports = __toCommonJS(runtime_exports);
+var import_runtime = require("@modern-js/devtools-kit/runtime");
 const fetchSync = (url, body) => {
   const xhr = new XMLHttpRequest();
   xhr.open("GET", url, false);
@@ -22,8 +8,8 @@ const fetchSync = (url, body) => {
     text() {
       return xhr.responseText;
     },
-    json(reviver) {
-      return JSON.parse(xhr.responseText, reviver);
+    json(reviver2) {
+      return JSON.parse(xhr.responseText, reviver2);
     },
     blob() {
       return new Blob([
@@ -51,10 +37,8 @@ const setup = () => {
   const devtoolsUrl = cookieManifestUrl || injectedManifestUrl;
   if (!devtoolsUrl)
     return;
-  const manifest = fetchSync(devtoolsUrl).json();
+  const manifest = fetchSync(devtoolsUrl).json((0, import_runtime.reviver)());
   manifest.source = devtoolsUrl;
-  if (!manifest.client)
-    return;
   const template = document.createElement("template");
   template.id = "_modern_js_devtools_styles";
   document.body.appendChild(template);

package/dist/types/common.d.ts

@@ -4,7 +4,7 @@ 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, ServerManifest } from '@modern-js/devtools-kit/node';
+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> | {
@@ -26,21 +26,16 @@ export type CleanHooks<T> = {
 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;
-    setup: (api: CliPluginAPI) => 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 {
-    setup: (api: RsbuildPluginAPI) => void;
 }
 export interface DevtoolsHooks {
     cleanup: () => Promise<void> | void;
     settleState: () => Promise<void> | void;
-    createManifest: (arg: {
-        manifest: ServerManifest;
-    }) => Promise<void> | void;
 }
 declare global {
     interface DevtoolsPluginVars extends Record<string, unknown> {
@@ -56,7 +51,6 @@ export interface PluginApi {
     vars: DevtoolsPluginVars;
 }
 export interface Plugin {
-    name: string;
     setup: (api: PluginApi) => Promise<void>;
 }
 export {};

package/package.json

@@ -15,7 +15,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-20240701110742",
+  "version": "0.0.0-next-20240701111908",
   "jsnext:source": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
@@ -55,9 +55,9 @@
     "valtio": "^1.11.1",
     "ws": "^8.13.0",
     "hookable": "^5.5.3",
-    "@modern-js/devtools-client": "0.0.0-next-20240701110742",
-    "@modern-js/devtools-kit": "0.0.0-next-20240701110742",
-    "@modern-js/utils": "0.0.0-next-20240701110742"
+    "@modern-js/devtools-kit": "0.0.0-next-20240701111908",
+    "@modern-js/devtools-client": "0.0.0-next-20240701111908",
+    "@modern-js/utils": "0.0.0-next-20240701111908"
   },
   "devDependencies": {
     "@swc/helpers": "0.5.3",
@@ -66,17 +66,17 @@
     "type-fest": "^4.1.0",
     "typescript": "^5",
     "@rsbuild/core": "0.7.10",
-    "@modern-js/core": "0.0.0-next-20240701110742",
-    "@modern-js/app-tools": "0.0.0-next-20240701110742",
-    "@modern-js/runtime": "0.0.0-next-20240701110742",
-    "@modern-js/module-tools": "0.0.0-next-20240701110742",
-    "@modern-js/types": "0.0.0-next-20240701110742",
-    "@modern-js/server-core": "0.0.0-next-20240701110742",
-    "@modern-js/uni-builder": "0.0.0-next-20240701110742",
-    "@scripts/build": "0.0.0-next-20240701110742"
+    "@modern-js/app-tools": "0.0.0-next-20240701111908",
+    "@modern-js/core": "0.0.0-next-20240701111908",
+    "@modern-js/module-tools": "0.0.0-next-20240701111908",
+    "@modern-js/runtime": "0.0.0-next-20240701111908",
+    "@modern-js/server-core": "0.0.0-next-20240701111908",
+    "@modern-js/types": "0.0.0-next-20240701111908",
+    "@modern-js/uni-builder": "0.0.0-next-20240701111908",
+    "@scripts/build": "0.0.0-next-20240701111908"
   },
   "peerDependencies": {
-    "@modern-js/runtime": "0.0.0-next-20240701110742"
+    "@modern-js/runtime": "0.0.0-next-20240701111908"
   },
   "peerDependenciesMeta": {
     "@modern-js/runtime": {

package/dist/plugins/route.js

@@ -1 +0,0 @@
-"use strict";