@react-devtools-plus/core 0.2.0

package/dist/index.js

@@ -0,0 +1,686 @@
+// src/client/index.ts
+import { isBrowser, target } from "@react-devtools-plus/shared";
+function setDevToolsClientUrl(url) {
+  target.__REACT_DEVTOOLS_CLIENT_URL__ = url;
+}
+function getDevToolsClientUrl() {
+  var _a;
+  return (_a = target.__REACT_DEVTOOLS_CLIENT_URL__) != null ? _a : (() => {
+    if (isBrowser) {
+      const devtoolsMeta = document.querySelector("meta[name=__REACT_DEVTOOLS_CLIENT_URL__]");
+      if (devtoolsMeta)
+        return devtoolsMeta.getAttribute("content") || "";
+    }
+    return "";
+  })();
+}
+function isDevToolsEnabled() {
+  return target.__REACT_DEVTOOLS_ENABLED__ === true;
+}
+function setDevToolsEnabled(enabled) {
+  target.__REACT_DEVTOOLS_ENABLED__ = enabled;
+}
+function getDevToolsChannelName() {
+  return target.__REACT_DEVTOOLS_BROADCAST_CHANNEL__ || "react-devtools-plus";
+}
+function setDevToolsChannelName(channelName) {
+  target.__REACT_DEVTOOLS_BROADCAST_CHANNEL__ = channelName;
+}
+var ClientConnectionManager = class {
+  constructor(options = {}) {
+    this.connections = /* @__PURE__ */ new Map();
+    this.reconnectAttempts = /* @__PURE__ */ new Map();
+    this.reconnectTimers = /* @__PURE__ */ new Map();
+    this.maxReconnectAttempts = options.maxReconnectAttempts || 5;
+    this.reconnectDelay = options.reconnectDelay || 1e3;
+  }
+  /**
+   * Register a connection
+   * 注册连接
+   */
+  register(id, connection) {
+    this.connections.set(id, connection);
+    this.reconnectAttempts.set(id, 0);
+  }
+  /**
+   * Unregister a connection
+   * 注销连接
+   */
+  unregister(id) {
+    const timer = this.reconnectTimers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.reconnectTimers.delete(id);
+    }
+    this.connections.delete(id);
+    this.reconnectAttempts.delete(id);
+  }
+  /**
+   * Get a connection
+   * 获取连接
+   */
+  get(id) {
+    return this.connections.get(id);
+  }
+  /**
+   * Get all connections
+   * 获取所有连接
+   */
+  getAll() {
+    return new Map(this.connections);
+  }
+  /**
+   * Check if a connection exists
+   * 检查连接是否存在
+   */
+  has(id) {
+    return this.connections.has(id);
+  }
+  /**
+   * Handle connection error and attempt reconnect
+   * 处理连接错误并尝试重连
+   */
+  handleError(id, error, reconnectFn) {
+    console.error(`[React DevTools] Connection error for ${id}:`, error);
+    if (!reconnectFn)
+      return;
+    const attempts = this.reconnectAttempts.get(id) || 0;
+    if (attempts >= this.maxReconnectAttempts) {
+      console.error(`[React DevTools] Max reconnect attempts reached for ${id}`);
+      return;
+    }
+    const delay = this.reconnectDelay * 2 ** attempts;
+    const timer = setTimeout(async () => {
+      try {
+        await reconnectFn();
+        this.reconnectAttempts.set(id, 0);
+      } catch (err) {
+        this.reconnectAttempts.set(id, attempts + 1);
+        this.handleError(id, err, reconnectFn);
+      }
+    }, delay);
+    this.reconnectTimers.set(id, timer);
+  }
+  /**
+   * Close all connections
+   * 关闭所有连接
+   */
+  closeAll() {
+    this.connections.forEach((connection) => {
+      if (connection.$close) {
+        connection.$close();
+      }
+    });
+    this.reconnectTimers.forEach((timer) => {
+      clearTimeout(timer);
+    });
+    this.connections.clear();
+    this.reconnectAttempts.clear();
+    this.reconnectTimers.clear();
+  }
+};
+var globalConnectionManager = new ClientConnectionManager();
+
+// src/events.ts
+var EventBus = class {
+  constructor() {
+    this.handlers = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Subscribe to an event
+   * 订阅事件
+   */
+  on(type, handler) {
+    if (!this.handlers.has(type)) {
+      this.handlers.set(type, /* @__PURE__ */ new Set());
+    }
+    const handlers = this.handlers.get(type);
+    handlers.add(handler);
+    return () => {
+      handlers.delete(handler);
+      if (handlers.size === 0) {
+        this.handlers.delete(type);
+      }
+    };
+  }
+  /**
+   * Subscribe to an event once
+   * 订阅一次性事件
+   */
+  once(type, handler) {
+    let unsubscribe;
+    const wrappedHandler = (event) => {
+      handler(event);
+      unsubscribe();
+    };
+    unsubscribe = this.on(type, wrappedHandler);
+    return unsubscribe;
+  }
+  /**
+   * Emit an event
+   * 发送事件
+   */
+  emit(event) {
+    const handlers = this.handlers.get(event.type);
+    if (!handlers)
+      return;
+    handlers.forEach((handler) => {
+      try {
+        handler(event);
+      } catch (error) {
+        console.error(`[React DevTools] Error in event handler for "${event.type}":`, error);
+      }
+    });
+  }
+  /**
+   * Remove all event handlers
+   * 移除所有事件处理器
+   */
+  clear() {
+    this.handlers.clear();
+  }
+  /**
+   * Remove all handlers for a specific event type
+   * 移除特定事件类型的所有处理器
+   */
+  clearType(type) {
+    this.handlers.delete(type);
+  }
+  /**
+   * Get number of handlers for an event type
+   * 获取事件类型的处理器数量
+   */
+  getHandlerCount(type) {
+    var _a;
+    return ((_a = this.handlers.get(type)) == null ? void 0 : _a.size) || 0;
+  }
+  /**
+   * Check if there are any handlers for an event type
+   * 检查是否有事件类型的处理器
+   */
+  hasHandlers(type) {
+    return this.getHandlerCount(type) > 0;
+  }
+};
+var globalEventBus = new EventBus();
+
+// src/plugin/manager.ts
+var PluginManager = class {
+  constructor() {
+    this.plugins = /* @__PURE__ */ new Map();
+    this.contexts = /* @__PURE__ */ new Map();
+    this.eventBus = new EventBus();
+    this.rpcFunctions = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Register a plugin
+   * 注册插件
+   */
+  async register(plugin) {
+    if (this.plugins.has(plugin.id)) {
+      throw new Error(`[React DevTools] Plugin "${plugin.id}" is already registered`);
+    }
+    const context = this.createContext(plugin.id);
+    this.contexts.set(plugin.id, context);
+    this.plugins.set(plugin.id, plugin);
+    if (plugin.rpc) {
+      Object.entries(plugin.rpc).forEach(([name, fn]) => {
+        const fullName = `${plugin.id}.${name}`;
+        this.rpcFunctions.set(fullName, fn);
+      });
+    }
+    if (plugin.on) {
+      Object.entries(plugin.on).forEach(([type, handler]) => {
+        if (handler) {
+          this.eventBus.on(type, handler);
+        }
+      });
+    }
+    if (plugin.setup) {
+      try {
+        await plugin.setup(context);
+        console.log(`[React DevTools] Plugin "${plugin.name}" registered successfully`);
+      } catch (error) {
+        console.error(`[React DevTools] Failed to setup plugin "${plugin.name}":`, error);
+        this.plugins.delete(plugin.id);
+        this.contexts.delete(plugin.id);
+        throw error;
+      }
+    }
+  }
+  /**
+   * Unregister a plugin
+   * 注销插件
+   */
+  async unregister(pluginId) {
+    const plugin = this.plugins.get(pluginId);
+    if (!plugin) {
+      console.warn(`[React DevTools] Plugin "${pluginId}" is not registered`);
+      return;
+    }
+    if (plugin.teardown) {
+      try {
+        await plugin.teardown();
+      } catch (error) {
+        console.error(`[React DevTools] Error during plugin teardown for "${plugin.name}":`, error);
+      }
+    }
+    if (plugin.rpc) {
+      Object.keys(plugin.rpc).forEach((name) => {
+        const fullName = `${pluginId}.${name}`;
+        this.rpcFunctions.delete(fullName);
+      });
+    }
+    this.plugins.delete(pluginId);
+    this.contexts.delete(pluginId);
+    console.log(`[React DevTools] Plugin "${plugin.name}" unregistered`);
+  }
+  /**
+   * Get a plugin by ID
+   * 根据 ID 获取插件
+   */
+  get(pluginId) {
+    return this.plugins.get(pluginId);
+  }
+  /**
+   * Get all plugins
+   * 获取所有插件
+   */
+  getAll() {
+    return Array.from(this.plugins.values());
+  }
+  /**
+   * Check if a plugin is registered
+   * 检查插件是否已注册
+   */
+  has(pluginId) {
+    return this.plugins.has(pluginId);
+  }
+  /**
+   * Get plugin context
+   * 获取插件上下文
+   */
+  getContext(pluginId) {
+    return this.contexts.get(pluginId);
+  }
+  /**
+   * Set component tree getter
+   * 设置组件树获取器
+   */
+  setComponentTreeGetter(getter) {
+    this.componentTreeGetter = getter;
+  }
+  /**
+   * Set component details getter
+   * 设置组件详情获取器
+   */
+  setComponentDetailsGetter(getter) {
+    this.componentDetailsGetter = getter;
+  }
+  /**
+   * Call plugin RPC function
+   * 调用插件 RPC 函数
+   */
+  async callRPC(name, ...args) {
+    const fn = this.rpcFunctions.get(name);
+    if (!fn) {
+      throw new Error(`[React DevTools] RPC function "${name}" not found`);
+    }
+    try {
+      return await fn(...args);
+    } catch (error) {
+      console.error(`[React DevTools] Error calling RPC function "${name}":`, error);
+      throw error;
+    }
+  }
+  /**
+   * Emit event to all plugins
+   * 向所有插件发送事件
+   */
+  emit(event) {
+    this.eventBus.emit(event);
+  }
+  /**
+   * Subscribe to events
+   * 订阅事件
+   */
+  on(type, handler) {
+    return this.eventBus.on(type, handler);
+  }
+  /**
+   * Cleanup all plugins
+   * 清理所有插件
+   */
+  async cleanup() {
+    const pluginIds = Array.from(this.plugins.keys());
+    for (const pluginId of pluginIds) {
+      await this.unregister(pluginId);
+    }
+    this.eventBus.clear();
+    this.rpcFunctions.clear();
+  }
+  /**
+   * Create plugin context
+   * 创建插件上下文
+   */
+  createContext(pluginId) {
+    return {
+      getComponentTree: async () => {
+        if (!this.componentTreeGetter) {
+          throw new Error("[React DevTools] Component tree getter not set");
+        }
+        return this.componentTreeGetter();
+      },
+      getComponentDetails: async (componentId) => {
+        if (!this.componentDetailsGetter) {
+          throw new Error("[React DevTools] Component details getter not set");
+        }
+        return this.componentDetailsGetter(componentId);
+      },
+      emit: (event) => {
+        this.eventBus.emit(event);
+      },
+      on: (type, handler) => {
+        return this.eventBus.on(type, handler);
+      },
+      registerRPC: (name, fn) => {
+        const fullName = `${pluginId}.${name}`;
+        this.rpcFunctions.set(fullName, fn);
+      },
+      callRPC: async (name, ...args) => {
+        return this.callRPC(name, ...args);
+      }
+    };
+  }
+};
+var globalPluginManager = new PluginManager();
+
+// ../../node_modules/.pnpm/birpc@0.2.19/node_modules/birpc/dist/index.mjs
+var DEFAULT_TIMEOUT = 6e4;
+function defaultSerialize(i) {
+  return i;
+}
+var defaultDeserialize = defaultSerialize;
+var { clearTimeout: clearTimeout2, setTimeout: setTimeout2 } = globalThis;
+var random = Math.random.bind(Math);
+function createBirpc(functions, options) {
+  const {
+    post,
+    on,
+    off = () => {
+    },
+    eventNames = [],
+    serialize = defaultSerialize,
+    deserialize = defaultDeserialize,
+    resolver,
+    bind = "rpc",
+    timeout = DEFAULT_TIMEOUT
+  } = options;
+  const rpcPromiseMap = /* @__PURE__ */ new Map();
+  let _promise;
+  let closed = false;
+  const rpc = new Proxy({}, {
+    get(_, method) {
+      if (method === "$functions")
+        return functions;
+      if (method === "$close")
+        return close;
+      if (method === "then" && !eventNames.includes("then") && !("then" in functions))
+        return void 0;
+      const sendEvent = (...args) => {
+        post(serialize({ m: method, a: args, t: "q" }));
+      };
+      if (eventNames.includes(method)) {
+        sendEvent.asEvent = sendEvent;
+        return sendEvent;
+      }
+      const sendCall = async (...args) => {
+        if (closed)
+          throw new Error(`[birpc] rpc is closed, cannot call "${method}"`);
+        if (_promise) {
+          try {
+            await _promise;
+          } finally {
+            _promise = void 0;
+          }
+        }
+        return new Promise((resolve, reject) => {
+          var _a;
+          const id = nanoid();
+          let timeoutId;
+          if (timeout >= 0) {
+            timeoutId = setTimeout2(() => {
+              var _a2;
+              try {
+                (_a2 = options.onTimeoutError) == null ? void 0 : _a2.call(options, method, args);
+                throw new Error(`[birpc] timeout on calling "${method}"`);
+              } catch (e) {
+                reject(e);
+              }
+              rpcPromiseMap.delete(id);
+            }, timeout);
+            if (typeof timeoutId === "object")
+              timeoutId = (_a = timeoutId.unref) == null ? void 0 : _a.call(timeoutId);
+          }
+          rpcPromiseMap.set(id, { resolve, reject, timeoutId, method });
+          post(serialize({ m: method, a: args, i: id, t: "q" }));
+        });
+      };
+      sendCall.asEvent = sendEvent;
+      return sendCall;
+    }
+  });
+  function close() {
+    closed = true;
+    rpcPromiseMap.forEach(({ reject, method }) => {
+      reject(new Error(`[birpc] rpc is closed, cannot call "${method}"`));
+    });
+    rpcPromiseMap.clear();
+    off(onMessage);
+  }
+  async function onMessage(data, ...extra) {
+    const msg = deserialize(data);
+    if (msg.t === "q") {
+      const { m: method, a: args } = msg;
+      let result, error;
+      const fn = resolver ? resolver(method, functions[method]) : functions[method];
+      if (!fn) {
+        error = new Error(`[birpc] function "${method}" not found`);
+      } else {
+        try {
+          result = await fn.apply(bind === "rpc" ? rpc : functions, args);
+        } catch (e) {
+          error = e;
+        }
+      }
+      if (msg.i) {
+        if (error && options.onError)
+          options.onError(error, method, args);
+        post(serialize({ t: "s", i: msg.i, r: result, e: error }), ...extra);
+      }
+    } else {
+      const { i: ack, r: result, e: error } = msg;
+      const promise = rpcPromiseMap.get(ack);
+      if (promise) {
+        clearTimeout2(promise.timeoutId);
+        if (error)
+          promise.reject(error);
+        else
+          promise.resolve(result);
+      }
+      rpcPromiseMap.delete(ack);
+    }
+  }
+  _promise = on(onMessage);
+  return rpc;
+}
+var urlAlphabet = "useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";
+function nanoid(size = 21) {
+  let id = "";
+  let i = size;
+  while (i--)
+    id += urlAlphabet[random() * 64 | 0];
+  return id;
+}
+
+// src/rpc/channel.ts
+function createBroadcastChannel(channelName) {
+  const channel = new BroadcastChannel(channelName);
+  const handlers = /* @__PURE__ */ new Set();
+  channel.addEventListener("message", (event) => {
+    handlers.forEach((handler) => handler(event.data));
+  });
+  return {
+    send: (message) => {
+      channel.postMessage(message);
+    },
+    onMessage: (handler) => {
+      handlers.add(handler);
+      return () => handlers.delete(handler);
+    },
+    close: () => {
+      channel.close();
+      handlers.clear();
+    }
+  };
+}
+function createPostMessageChannel(target2, origin = "*") {
+  const handlers = /* @__PURE__ */ new Set();
+  const messageHandler = (event) => {
+    if (origin !== "*" && event.origin !== origin)
+      return;
+    handlers.forEach((handler) => handler(event.data));
+  };
+  window.addEventListener("message", messageHandler);
+  return {
+    send: (message) => {
+      target2.postMessage(message, origin);
+    },
+    onMessage: (handler) => {
+      handlers.add(handler);
+      return () => handlers.delete(handler);
+    },
+    close: () => {
+      window.removeEventListener("message", messageHandler);
+      handlers.clear();
+    }
+  };
+}
+function createWebSocketChannel(url) {
+  const ws = new WebSocket(url);
+  const handlers = /* @__PURE__ */ new Set();
+  ws.addEventListener("message", (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      handlers.forEach((handler) => handler(data));
+    } catch (error) {
+      console.error("[RPC] Failed to parse WebSocket message:", error);
+    }
+  });
+  return {
+    send: (message) => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(message));
+      }
+    },
+    onMessage: (handler) => {
+      handlers.add(handler);
+      return () => handlers.delete(handler);
+    },
+    close: () => {
+      ws.close();
+      handlers.clear();
+    }
+  };
+}
+function createCustomEventChannel(eventName) {
+  const handlers = /* @__PURE__ */ new Set();
+  const eventHandler = (event) => {
+    handlers.forEach((handler) => handler(event.detail));
+  };
+  window.addEventListener(eventName, eventHandler);
+  return {
+    send: (message) => {
+      window.dispatchEvent(new CustomEvent(eventName, { detail: message }));
+    },
+    onMessage: (handler) => {
+      handlers.add(handler);
+      return () => handlers.delete(handler);
+    },
+    close: () => {
+      window.removeEventListener(eventName, eventHandler);
+      handlers.clear();
+    }
+  };
+}
+
+// src/rpc/index.ts
+function createClientRPC(functions, channel, options = {}) {
+  const { timeout = 3e4 } = options;
+  const rpc = createBirpc(functions, {
+    post: (data) => {
+      channel.send(data);
+    },
+    on: (fn) => {
+      return channel.onMessage(fn);
+    },
+    timeout
+  });
+  return Object.assign(rpc, functions, {
+    $functions: functions,
+    $channel: channel,
+    $state: {
+      state: "connected",
+      connectedAt: Date.now()
+    },
+    $close: () => {
+      var _a;
+      (_a = channel.close) == null ? void 0 : _a.call(channel);
+    }
+  });
+}
+function createServerRPC(functions, channel, options = {}) {
+  const { timeout = 3e4 } = options;
+  const rpc = createBirpc(functions, {
+    post: (data) => {
+      channel.send(data);
+    },
+    on: (fn) => {
+      return channel.onMessage(fn);
+    },
+    timeout
+  });
+  return Object.assign(rpc, functions, {
+    $functions: functions,
+    $channel: channel,
+    $state: {
+      state: "connected",
+      connectedAt: Date.now()
+    },
+    $close: () => {
+      var _a;
+      (_a = channel.close) == null ? void 0 : _a.call(channel);
+    }
+  });
+}
+export {
+  ClientConnectionManager,
+  EventBus,
+  PluginManager,
+  createBroadcastChannel,
+  createClientRPC,
+  createCustomEventChannel,
+  createPostMessageChannel,
+  createServerRPC,
+  createWebSocketChannel,
+  getDevToolsChannelName,
+  getDevToolsClientUrl,
+  globalConnectionManager,
+  globalEventBus,
+  globalPluginManager,
+  isDevToolsEnabled,
+  setDevToolsChannelName,
+  setDevToolsClientUrl,
+  setDevToolsEnabled
+};
+//# sourceMappingURL=index.js.map