@modern-js/plugin-devtools 0.0.0-next-20240617070535 → 0.0.0-next-20240617090621

package/dist/cli.d.ts

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

package/dist/cli.js

@@ -28,259 +28,144 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var cli_exports = {};
 __export(cli_exports, {
+  BUILTIN_PLUGINS: () => BUILTIN_PLUGINS,
   default: () => cli_default,
   devtoolsPlugin: () => devtoolsPlugin
 });
 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_url = require("url");
-var import_lodash = __toESM(require("@modern-js/utils/lodash"));
+var import_app_tools = require("@modern-js/app-tools");
 var import_utils = require("@modern-js/utils");
-var import_hono = require("hono");
-var import_node_server = require("@hono/node-server");
-var import_serve_static = require("@hono/node-server/serve-static");
-var import_node = require("@modern-js/devtools-kit/node");
+var import_p_defer = __toESM(require("p-defer"));
+var import_hookable = require("hookable");
 var import_valtio = require("valtio");
 var import_options = require("./options");
-var import_rpc = require("./rpc");
-var import_socket = require("./utils/socket");
-var import_config = require("./utils/config");
+var import_debug = require("./plugins/debug");
+var import_http = require("./plugins/http");
+var import_state = require("./plugins/state");
+var import_watcher = require("./plugins/watcher");
+var import_service_worker = require("./plugins/service-worker");
+var import_html = require("./plugins/html");
+var import_rpc = require("./plugins/rpc");
+const BUILTIN_PLUGINS = [
+  import_debug.pluginDebug,
+  import_watcher.pluginWatcher,
+  import_service_worker.pluginServiceWorker,
+  import_html.pluginHtml,
+  // --- //
+  import_state.pluginState,
+  import_http.pluginHttp,
+  import_rpc.pluginRpc
+];
 const devtoolsPlugin = (inlineOptions = {}) => {
   const ctx = (0, import_valtio.proxy)((0, import_options.resolveContext)(inlineOptions));
-  let watcher = null;
-  const closeWatcher = () => {
-    if (!watcher)
-      return;
-    watcher.close();
-    watcher = null;
+  const setupBuilder = (0, import_p_defer.default)();
+  const setupFramework = (0, import_p_defer.default)();
+  const _sharedVars = {};
+  const api = {
+    builderHooks: (0, import_hookable.createHooks)(),
+    frameworkHooks: (0, import_hookable.createHooks)(),
+    setupBuilder: () => setupBuilder.promise,
+    setupFramework: () => setupFramework.promise,
+    get context() {
+      return ctx;
+    },
+    get vars() {
+      return _sharedVars;
+    }
+  };
+  const cleanup = () => {
+    setupBuilder.reject(new Error("Devtools Plugin is disabled"));
+    setupFramework.reject(new Error("Devtools Plugin is disabled"));
+    api.builderHooks.removeAllHooks();
+    api.frameworkHooks.removeAllHooks();
   };
+  for (const plugin of BUILTIN_PLUGINS) {
+    plugin.setup(api);
+  }
   return {
     name: "@modern-js/plugin-devtools",
     usePlugins: [],
     setClientDefinition(def) {
       Object.assign(ctx.def, def);
     },
-    async setup(api) {
+    async setup(frameworkApi) {
       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,
-        ctx,
-        server: socketServer
-      });
+      setupFramework.resolve(frameworkApi);
       return {
         async prepare() {
-          await rpc.hooks.prepare();
-          const appConfig = api.useConfigContext();
-          const appCtx = api.useAppContext();
-          const { devtools: options = {} } = appConfig;
-          (0, import_options.updateContext)(ctx, options);
-          const basename = `${ctx.def.name.shortName}.runtime.json`;
-          const watcher2 = 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;
-            ctx.storagePresets = [];
-            (0, import_options.updateContext)(ctx, ...configs);
-          };
-          watcher2.on("add", refreshStoragePreset);
-          watcher2.on("change", refreshStoragePreset);
-          watcher2.on("unlink", refreshStoragePreset);
+          await api.frameworkHooks.callHook("prepare");
+        },
+        async modifyFileSystemRoutes(params) {
+          await api.frameworkHooks.callHook("modifyFileSystemRoutes", params);
+          return params;
+        },
+        async afterCreateCompiler(params) {
+          await api.frameworkHooks.callHook("afterCreateCompiler", params);
+        },
+        async modifyServerRoutes(params) {
+          await api.frameworkHooks.callHook("modifyServerRoutes", params);
+          return params;
         },
-        modifyFileSystemRoutes: rpc.hooks.modifyFileSystemRoutes,
-        afterCreateCompiler: rpc.hooks.afterCreateCompiler,
-        beforeRestart() {
-          closeWatcher();
-          return new Promise((resolve, reject) => httpServer.instance.close((err) => err ? reject(err) : resolve()));
+        async beforeRestart() {
+          await api.frameworkHooks.callHook("beforeRestart");
+          cleanup();
         },
         beforeExit() {
-          closeWatcher();
+          api.frameworkHooks.callHookWith((hooks) => hooks.forEach((hook) => hook()), "beforeExit");
+          cleanup();
         },
-        modifyServerRoutes({ routes }) {
-          routes.push({
-            urlPath: "/sw-proxy.js",
-            isSPA: true,
-            isSSR: false,
-            entryPath: "public/sw-proxy.js"
-          });
-          return {
-            routes
-          };
+        async afterBuild(params) {
+          api.frameworkHooks.callHook("afterBuild", params);
+          cleanup();
         },
         async config() {
           import_utils.logger.info(`${ctx.def.name.formalName} DevTools is enabled`);
-          const swProxyEntry = require.resolve("@modern-js/devtools-client/sw-proxy");
-          const clientOptions = import_lodash.default.pick(ctx, [
-            "def",
-            "endpoint",
-            "dataSource"
-          ]);
-          Object.assign(clientOptions, {
-            __keep: true
-          });
-          const serializedOptions = JSON.stringify(clientOptions);
-          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
+          const configs = await api.frameworkHooks.callHookParallel("config");
+          const builderPlugin = {
+            name: "builder-plugin-devtools",
+            setup(builderApi) {
+              setupBuilder.resolve(builderApi);
+              builderApi.modifyBundlerChain(async (options, utils) => {
+                await api.builderHooks.callHook("modifyBundlerChain", options, utils);
+              });
+              builderApi.modifyWebpackConfig(async (config, utils) => {
+                await api.builderHooks.callHook("modifyWebpackConfig", config, utils);
+              });
+              builderApi.modifyRspackConfig(async (config, utils) => {
+                await api.builderHooks.callHook("modifyRspackConfig", config, utils);
+              });
+              builderApi.onBeforeCreateCompiler(async (params) => {
+                await api.builderHooks.callHook("onBeforeCreateCompiler", params);
+              });
+              builderApi.onAfterCreateCompiler(async (params) => {
+                await api.builderHooks.callHook("onAfterCreateCompiler", params);
+              });
+              builderApi.onDevCompileDone(async (params) => {
+                await api.builderHooks.callHook("onDevCompileDone", params);
+              });
+              builderApi.onAfterBuild(async (params) => {
+                await api.builderHooks.callHook("onAfterBuild", params);
+              });
+              builderApi.onExit(() => {
+                api.builderHooks.callHookWith((hooks) => hooks.forEach((hook) => hook()), "onExit");
               });
-            } 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
-            ],
-            source: {},
-            output: {
-              copy: [
-                {
-                  from: swProxyEntry,
-                  to: "public"
-                }
-              ]
-            },
-            html: {
-              tags
-            },
-            tools: {
-              devServer: {
-                proxy: {
-                  [import_node.ROUTE_BASENAME]: {
-                    target: `http://127.0.0.1:${httpServer.port}`,
-                    pathRewrite: {
-                      [`^${import_node.ROUTE_BASENAME}`]: ""
-                    },
-                    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");
-                      }
-                    }
-                  }
-                }
-              }
             }
           };
+          configs.push({
+            builderPlugins: [
+              builderPlugin
+            ]
+          });
+          return (0, import_app_tools.mergeConfig)(configs);
         }
       };
     }
   };
 };
 var cli_default = devtoolsPlugin;
-const setupHttpServer = async () => {
-  const app = new import_hono.Hono();
-  const port = await (0, import_utils.getPort)(8782, {
-    slient: true
-  });
-  const clientServeDir = import_path.default.resolve(require.resolve("@modern-js/devtools-client/package.json"), "../dist");
-  const handleCookieApi = async (c) => {
-    const raw = c.req.header("Cookie");
-    const { parse } = await import("cookie-es");
-    const cookies = raw ? parse(raw) : {};
-    const body = await c.req.json().catch(() => null);
-    if (body === null || body === void 0 ? void 0 : body.setCookies) {
-      const { setCookies } = body;
-      (0, import_assert.default)(typeof setCookies === "object", "setCookies should be object");
-      for (const [k, v] of Object.entries(setCookies)) {
-        (0, import_assert.default)(typeof v === "string");
-        const expires = new Date(Date.now() + 30 * 24 * 36e5).toUTCString();
-        cookies[k] = v;
-        c.header("Set-Cookie", `${k}=${v}; Expires=${expires}; Path=/`, {
-          append: true
-        });
-      }
-    }
-    return c.json({
-      cookies
-    });
-  };
-  app.get("/api/cookies", handleCookieApi);
-  app.post("/api/cookies", handleCookieApi);
-  app.use(
-    "/static/*",
-    // Workaround for https://github.com/honojs/node-server/blob/dd0e0cd160b0b8f18abbcb28c5f5c39b72105d98/src/serve-static.ts#L56
-    (0, import_serve_static.serveStatic)({
-      root: import_path.default.relative(process.cwd(), clientServeDir)
-    })
-  );
-  app.get(":filename{.+\\.hot-update\\.\\w+$}", async (c) => {
-    if (process.env.NODE_ENV !== "development") {
-      return c.text("Not found", 404);
-    }
-    const filename = c.req.param("filename");
-    const target = new import_url.URL(filename, "http://127.0.0.1:8780");
-    const { body, headers, status } = await fetch(target.href);
-    const newResp = c.newResponse(body, {
-      headers,
-      status
-    });
-    if (newResp.headers.get("content-encoding") === "gzip") {
-      newResp.headers.delete("content-encoding");
-    }
-    return newResp;
-  });
-  app.get("*", async (c) => {
-    const filename = import_path.default.resolve(clientServeDir, "html/client/index.html");
-    const content = await import_utils.fs.readFile(filename, "utf-8");
-    return c.html(content);
-  });
-  const instance = (0, import_node_server.serve)({
-    fetch: app.fetch,
-    port,
-    hostname: "127.0.0.1",
-    serverOptions: {
-      allowHTTP1: true
-    }
-  });
-  (0, import_assert.default)(instance instanceof import_http.default.Server, "instance should be http.Server");
-  return {
-    instance,
-    port
-  };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILTIN_PLUGINS,
   devtoolsPlugin
 });

package/dist/plugins/debug.d.ts

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

package/dist/plugins/debug.js

@@ -0,0 +1,45 @@
+"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 debug_exports = {};
+__export(debug_exports, {
+  pluginDebug: () => pluginDebug
+});
+module.exports = __toCommonJS(debug_exports);
+var import_utils = require("@modern-js/utils");
+const logger = (0, import_utils.createLogger)({
+  level: process.env.LOG_LEVEL || "info"
+});
+const pluginDebug = {
+  async setup(api) {
+    await api.setupFramework();
+    logger.debug("setup framework api");
+    await api.setupBuilder();
+    logger.debug("setup builder api");
+    api.frameworkHooks.afterEach((e) => {
+      logger.debug("after framework hook:", e.name);
+    });
+    api.builderHooks.afterEach((e) => {
+      logger.debug("after builder hook:", e.name);
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginDebug
+});

package/dist/plugins/html.d.ts

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

package/dist/plugins/html.js

@@ -0,0 +1,102 @@
+"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 html_exports = {};
+__export(html_exports, {
+  pluginHtml: () => pluginHtml
+});
+module.exports = __toCommonJS(html_exports);
+var import_assert = __toESM(require("assert"));
+var import_lodash = __toESM(require("@modern-js/utils/lodash"));
+const pluginHtml = {
+  async setup(api) {
+    api.frameworkHooks.hook("modifyServerRoutes", ({ routes }) => {
+      routes.push({
+        urlPath: "/sw-proxy.js",
+        isSPA: true,
+        isSSR: false,
+        entryPath: "public/sw-proxy.js"
+      });
+    });
+    api.frameworkHooks.hook("config", async () => {
+      const clientOptions = import_lodash.default.pick(api.context, [
+        "def",
+        "endpoint",
+        "dataSource"
+      ]);
+      Object.assign(clientOptions, {
+        __keep: true
+      });
+      const serializedOptions = JSON.stringify(clientOptions);
+      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("")
+      });
+      const config = {
+        html: {
+          tags
+        }
+      };
+      return config;
+    });
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  pluginHtml
+});

package/dist/plugins/http.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="node" />
+import http from 'http';
+import { Plugin } from '../types';
+declare global {
+    interface DevtoolsPluginVars {
+        http: http.Server;
+    }
+}
+export declare const pluginHttp: Plugin;