@buoy-gg/core 7.0.39 → 7.0.41

package/lib/module/floatingMenu/BrowserToolRuntime.js

@@ -0,0 +1,146 @@
+"use strict";
+
+import { useEffect, useMemo, useRef } from 'react';
+import { LicenseManager, useLicense } from '@buoy-gg/license';
+import { registerToolAdapters } from '@buoy-gg/shared-ui';
+import { externalSyncOptions, shouldMountExternalSync } from "./externalSyncGate.js";
+import { useDeviceIdentity } from "./deviceIdentity.js";
+import { appSyncAdapter } from "./sync/appSyncAdapter.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const roots = ['ConsoleRoot', 'RouteTracker', 'ReactQueryTracker', 'ReduxAutoInstrument', 'PerfMonitorRoot', 'AutomationResumer', 'ImagesRoot'];
+const overlays = ['DebugBordersStandaloneOverlay', 'HighlightUpdatesOverlay', 'ImageOverlayStandalone', 'PerfMonitorOverlay', 'JsTopHudOverlay', 'ImpersonateOverlay', 'ScenariosOverlay'];
+export function BrowserToolRuntime(props) {
+  const modules = useMemo(() => Object.fromEntries(Object.entries(props.modules).map(([id, module]) => [id.replace(/^@buoy-gg\//, '').replace(/\/web$/, ''), module])), [props.modules]);
+  const query = modules['react-query'];
+  return query?.useReactQuerySyncAdapter ? /*#__PURE__*/_jsx(QueryRuntime, {
+    ...props,
+    modules: modules,
+    query: query
+  }) : /*#__PURE__*/_jsx(ToolRuntime, {
+    ...props,
+    modules: modules
+  });
+}
+function QueryRuntime(props) {
+  const adapter = props.query.useReactQuerySyncAdapter();
+  return /*#__PURE__*/_jsx(ToolRuntime, {
+    ...props,
+    queryAdapter: adapter
+  });
+}
+function ToolRuntime({
+  modules,
+  apps,
+  requiredEnvVars,
+  externalSync,
+  headless,
+  sentryGetClient,
+  queryAdapter
+}) {
+  const {
+    isPro,
+    tier
+  } = useLicense();
+  const adapters = useMemo(() => {
+    const result = {
+      app: appSyncAdapter
+    };
+    for (const [id, module] of Object.entries(modules)) {
+      for (const [name, adapter] of Object.entries(module)) {
+        if (name.endsWith('SyncAdapter') && adapter && typeof adapter === 'object') result[id] = adapter;
+      }
+    }
+    if (queryAdapter) result.query = queryAdapter;
+    if (modules.env?.createEnvSyncAdapter) result.env = modules.env.createEnvSyncAdapter(requiredEnvVars ?? []);
+    for (const app of apps ?? []) if (app.sync) result[`custom:${app.id}`] = app.sync;
+    return result;
+  }, [modules, apps, requiredEnvVars, queryAdapter]);
+  const ref = useRef(adapters);
+  ref.current = adapters;
+  useEffect(() => registerToolAdapters(() => ref.current), []);
+  useEffect(() => {
+    const cleanups = [];
+    const start = fn => {
+      const stop = fn?.();
+      if (typeof stop === 'function') cleanups.push(stop);
+    };
+    start(modules.network?.startNetworkCapture);
+    start(modules.storage?.startBrowserStorageCapture);
+    start(modules.assets?.startBrowserAssetCapture);
+    if (modules.storage?.storageSyncAdapter?.subscribe) start(() => modules.storage.storageSyncAdapter.subscribe(() => {}));
+    if (modules['focus-inspector']?.focusInspectorSyncAdapter?.subscribe) start(() => modules['focus-inspector'].focusInspectorSyncAdapter.subscribe(() => {}));
+    return () => {
+      for (const stop of cleanups.reverse()) stop();
+    };
+  }, [modules]);
+  const sync = modules['external-sync'];
+  const dev = typeof __DEV__ !== 'undefined' ? __DEV__ : process.env.NODE_ENV !== 'production';
+  const connect = shouldMountExternalSync({
+    isDevelopment: dev,
+    isLicensed: isPro,
+    externalSync,
+    isAvailable: Boolean(sync)
+  });
+  const SentryRoot = modules.sentry?.SentryRoot;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [Object.entries(modules).flatMap(([id, module]) => roots.map(name => {
+      const Root = module[name];
+      return Root ? /*#__PURE__*/_jsx(Root, {}, `${id}:${name}`) : null;
+    })), SentryRoot && /*#__PURE__*/_jsx(SentryRoot, {
+      getClient: sentryGetClient
+    }), Object.entries(modules).flatMap(([id, module]) => overlays.map(name => {
+      const Overlay = module[name];
+      // Simulation indicators remain visible when a remote driver changes app state.
+      return Overlay && (!headless || name === 'ScenariosOverlay' || name === 'ImpersonateOverlay') ? /*#__PURE__*/_jsx(Overlay, {}, `${id}:${name}`) : null;
+    })), connect && /*#__PURE__*/_jsx(BrowserExternalSync, {
+      module: sync,
+      tools: adapters,
+      options: externalSyncOptions(externalSync),
+      isPro: isPro,
+      tier: tier
+    })]
+  });
+}
+function BrowserExternalSync({
+  module,
+  tools,
+  options,
+  isPro,
+  tier
+}) {
+  const identity = useDeviceIdentity(options, {
+    appName: typeof document === 'undefined' ? null : document.title || location.hostname,
+    hardwareName: 'Browser',
+    platform: 'web'
+  });
+  const {
+    socket
+  } = module.useExternalSyncSocket({
+    deviceName: identity?.deviceName ?? 'Buoy Browser',
+    socketURL: options?.socketURL ?? module.getDefaultSocketURL(),
+    persistentDeviceId: identity?.deviceId ?? null,
+    platform: 'web',
+    enableLogs: options?.enableLogs
+  });
+  useEffect(() => {
+    if (!socket) return;
+    const emit = () => {
+      if (socket.connected && LicenseManager.hasAccountAccess()) socket.emit('device-license', {
+        isPro: isPro ? '1' : '0',
+        tier
+      });
+    };
+    emit();
+    socket.on('connect', emit);
+    return () => {
+      socket.off('connect', emit);
+    };
+  }, [socket, isPro, tier]);
+  module.useExternalSync({
+    tools,
+    socket,
+    deviceId: identity?.deviceId ?? null,
+    enableLogs: options?.enableLogs
+  });
+  return null;
+}