@axonpack/react-native-devtools-tab 0.1.0

package/dist/metro/index.cjs

@@ -0,0 +1,435 @@
+(() => {
+"use strict";
+// The require scope
+var __webpack_require__ = {};
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, getters, values) => {
+	var define = (defs, kind) => {
+		for(var key in defs) {
+			if(__webpack_require__.o(defs, key) && !__webpack_require__.o(exports, key)) {
+				Object.defineProperty(exports, key, { enumerable: true, [kind]: defs[key] });
+			}
+		}
+	};
+	define(getters, "get");
+	define(values, "value");
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  withReactNativeDevtoolsTab: () => (/* binding */ withReactNativeDevtoolsTab)
+});
+
+;// CONCATENATED MODULE: external "node:crypto"
+const external_node_crypto_namespaceObject = require("node:crypto");
+var external_node_crypto_default = /*#__PURE__*/__webpack_require__.n(external_node_crypto_namespaceObject);
+;// CONCATENATED MODULE: external "node:fs"
+const external_node_fs_namespaceObject = require("node:fs");
+var external_node_fs_default = /*#__PURE__*/__webpack_require__.n(external_node_fs_namespaceObject);
+;// CONCATENATED MODULE: external "node:module"
+const external_node_module_namespaceObject = require("node:module");
+;// CONCATENATED MODULE: external "node:path"
+const external_node_path_namespaceObject = require("node:path");
+var external_node_path_default = /*#__PURE__*/__webpack_require__.n(external_node_path_namespaceObject);
+;// CONCATENATED MODULE: ./src/core/constants/devtools.const.ts
+/**
+ * The one name the app's side and the dev server's side have to agree on.
+ *
+ * It names the HTTP route the panel is served from, and the domain messages are tagged with on the
+ * debugger connection. React Native's own integration uses `react-devtools` on that same channel, so
+ * having a name at all is what keeps the two apart.
+ *
+ * A constant rather than an option, because nothing makes it vary: the dispatcher is per JS runtime
+ * and each dev server has its own port, so two apps never share either. Only two independent
+ * devtools instances *inside one app* would need to differ, and there is no such case.
+ */ const DEVTOOLS_ID = "axonpack-rn-devtools";
+const DEVTOOLS_ROUTE = `/${DEVTOOLS_ID}-tab`;
+/**
+ * Where the app keeps its tab list, for the frontend to read.
+ *
+ * A panel is built from what is on here, not from a message, so opening or reloading React Native
+ * DevTools finds the tabs that are already registered instead of having to be told about them again.
+ * The app has no way of knowing a frontend reloaded, and nothing re-announces, so a push alone left
+ * the tab strip empty until the app itself restarted.
+ */ const DEVTOOLS_TABS = `__${DEVTOOLS_ID}_tabs__`;
+
+;// CONCATENATED MODULE: ./src/metro/index.ts
+
+
+
+
+
+/**
+ * Puts a tab of your own in React Native DevTools, by serving the DevTools frontend from a route of
+ * ours and injecting one script into its entry page. Nothing is forked and nothing is patched on
+ * disk.
+ *
+ * ```js
+ * // metro.config.js
+ * const { getDefaultConfig } = require('expo/metro-config');
+ * const {
+ *   withReactNativeDevtoolsTab,
+ * } = require('@axonpack/react-native-devtools-tab/metro');
+ *
+ * module.exports = withReactNativeDevtoolsTab(getDefaultConfig(__dirname));
+ * ```
+ */ // This file has no relative imports, and must not grow any. It is the one thing here that Node
+// loads directly, and Node's ESM resolver demands an extension on every relative specifier, which
+// Metro cannot follow back to a `.ts`. Keeping it self-contained is what lets every other file use
+// plain extensionless imports that Metro reads straight from source.
+//
+// `tsc` emits this file as ESM and Node loads it as ESM, where there is no ambient `require`. Every
+// lookup below is for a package belonging to the running dev server, so they have to be resolved at
+// runtime rather than imported.
+//
+// A CommonJS loader (Jest, and some Metro setups) leaves `import.meta.url` null, where the working
+// directory is a fine base: nothing resolved through it lives outside the project.
+const metro_require = (0,external_node_module_namespaceObject.createRequire)(__filename);
+function hostScript() {
+    const ROUTE = DEVTOOLS_ROUTE;
+    const id = DEVTOOLS_ID;
+    const tabs = DEVTOOLS_TABS;
+    return `
+import * as UI from '${ROUTE}/ui/legacy/legacy.js';
+import * as SDK from '${ROUTE}/core/sdk/sdk.js';
+
+const DOMAIN = ${JSON.stringify(id)};
+const TABS = ${JSON.stringify(tabs)};
+const DISPATCHER = '__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__';
+
+// The frontend builds itself after DOMContentLoaded, and the tab strip is the last thing to appear.
+// There is no event for "ready", so this waits for the element that means it.
+const waitForFrontend = () =>
+  new Promise((resolve) => {
+    const check = () => document.querySelector('.main-tabbed-pane');
+    if (check()) return resolve();
+    const observer = new MutationObserver(() => {
+      if (check()) {
+        observer.disconnect();
+        resolve();
+      }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+
+const getRuntime = () => {
+  const targets = SDK.TargetManager.TargetManager.instance();
+  const target = targets.primaryPageTarget() ?? targets.rootTarget();
+  return target?.model(SDK.RuntimeModel.RuntimeModel) ?? null;
+};
+
+/**
+ * The app answers on a binding the dispatcher names itself, and the frontend has to ask for that
+ * binding before anything arrives. Polls because the dispatcher is installed by the app's own
+ * bundle, which may not have run yet when the panel opens.
+ */
+const connectToApp = async (onMessage) => {
+  for (let attempt = 0; attempt < 40; attempt++) {
+    const runtime = getRuntime();
+    if (runtime) {
+      const probe = await runtime.agent.invoke_evaluate({
+        expression: 'globalThis.' + DISPATCHER + ' != undefined',
+        returnByValue: true,
+      });
+
+      if (probe.result?.value === true) {
+        const named = await runtime.agent.invoke_evaluate({
+          expression: DISPATCHER + '.BINDING_NAME',
+        });
+        const binding = named.result?.value;
+        if (binding) {
+          runtime.addEventListener('BindingCalled', (event) => {
+            if (event.data.name !== binding) return;
+            // Every domain shares this one binding, React DevTools included, and its messages carry
+            // whole component trees. Checking the raw string first skips parsing those.
+            if (!event.data.payload.includes(DOMAIN)) return;
+            const parsed = JSON.parse(event.data.payload);
+            if (parsed.domain === DOMAIN) onMessage(parsed.message);
+          });
+          await runtime.agent.invoke_addBinding({ name: binding });
+          await runtime.agent.invoke_evaluate({
+            expression: 'void ' + DISPATCHER + '.initializeDomain(' + JSON.stringify(DOMAIN) + ')',
+          });
+          // Read rather than waited for. The app announces a tab when it registers one, but a
+          // frontend that reloads has missed every announcement and nothing re-sends them, so the
+          // tab strip came back empty. Asking is also what puts the tabs up without a round trip.
+          const listed = await runtime.agent.invoke_evaluate({
+            expression: 'JSON.stringify(globalThis[' + JSON.stringify(TABS) + '] || [])',
+            returnByValue: true,
+          });
+
+          return {
+            registered: JSON.parse(listed.result?.value || '[]'),
+            send: (message) => {
+              const serialized = JSON.stringify(JSON.stringify(message));
+              void runtime.agent.invoke_evaluate({
+                expression:
+                  DISPATCHER + '.sendMessage(' + JSON.stringify(DOMAIN) + ', ' + serialized + ')',
+              });
+            },
+          };
+        }
+      }
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+  return null;
+};
+
+class TabPanel extends UI.View.SimpleView {
+  constructor(tab) {
+    // The symbol is part of the title, and written as an escape so no tool can mangle it. The
+    // frontend's own icon slots take an element, and every way of putting one there loses its
+    // drawing: the suffix slot re-renders with a shallow cloneNode(), and the leading slot only
+    // accepts a name from DevTools' own image set. Text has none of that.
+    super(tab.name + ' ' + (tab.icon || '\u235A'), true, tab.id);
+    // Keeps the iframe alive when another tab is selected, so a tab does not lose everything it has
+    // been sent every time somebody looks at Console.
+    this.setHideOnDetach();
+
+    const iframe = document.createElement('iframe');
+    iframe.src = '${ROUTE}/panel/index.html?tab=' + encodeURIComponent(tab.id);
+    iframe.style.cssText = 'width:100%;height:100%;border:0';
+    this.contentElement.appendChild(iframe);
+    this.iframe = iframe;
+  }
+}
+
+const main = async () => {
+  await waitForFrontend();
+
+  const inspector = UI.InspectorView.InspectorView.instance();
+  const panels = new Map();
+
+  const addPanel = (tab) => {
+    if (!tab?.id || panels.has(tab.id)) return;
+    const panel = new TabPanel(tab);
+    panels.set(tab.id, panel);
+    inspector.addPanel(panel);
+  };
+
+  const connected = await connectToApp((message) => {
+    const body = message?.data;
+
+    // Every message the app sends names the tab it is for, so this is a lookup rather than a
+    // fan-out. Broadcasting meant an app with five tabs posted five copies of every render and four
+    // of them were dropped on arrival. A message with no id has no addressee, so it still goes to
+    // everyone.
+    if (body?.id != null) {
+      panels.get(body.id)?.iframe.contentWindow?.postMessage(message, '*');
+    } else {
+      for (const panel of panels.values()) {
+        panel.iframe.contentWindow?.postMessage(message, '*');
+      }
+    }
+
+    // A tab registered after this frontend connected, so it was not in the list that was read.
+    if (message?.type === 'tab:register') addPanel(body);
+  });
+
+  if (!connected) {
+    console.warn('[devtools] the app never installed its devtools dispatcher');
+    return;
+  }
+
+  // The tabs the app already had. Each page asks for its own registration once it loads, so nothing
+  // has to be replayed at them here.
+  for (const tab of connected.registered) addPanel(tab);
+  const send = connected.send;
+
+  window.addEventListener('message', (event) => {
+    for (const panel of panels.values()) {
+      if (event.source === panel.iframe.contentWindow) {
+        send(event.data);
+        return;
+      }
+    }
+  });
+};
+
+main().catch((error) => console.error('[devtools] panel failed to start', error));
+`;
+}
+const TYPES = {
+    ".html": "text/html",
+    ".js": "application/javascript",
+    ".mjs": "application/javascript",
+    ".css": "text/css",
+    ".json": "application/json",
+    ".svg": "image/svg+xml",
+    ".png": "image/png",
+    ".woff2": "font/woff2",
+    ".map": "application/json"
+};
+/**
+ * Where to look for the debugger's own packages, in the order that matters.
+ *
+ * Finding *a* copy is not enough: the frontend has to be the one the dev server serves, and the
+ * middleware has to be the one it will call, or the shortcut is rewritten on an object nobody
+ * loads and DevTools opens without the tab script in it. An install can easily hold three copies,
+ * which is what happens the moment a project updates React Native and something else stays behind.
+ *
+ * So the search starts at whatever is serving: `@expo/cli` for an Expo project, the community CLI
+ * plugin for a bare one. They are what `require` these at runtime, so their answer is the right
+ * answer. The rest are fallbacks for a layout where neither is installed.
+ */ function projectRoots(projectRoot) {
+    const roots = [
+        projectRoot
+    ];
+    const found = new Map();
+    // Resolved against what has been found so far, because `@expo/cli` is usually a dependency of
+    // `expo` rather than of the app.
+    for (const from of [
+        "expo",
+        "react-native",
+        "@expo/cli",
+        "@react-native/community-cli-plugin"
+    ]){
+        try {
+            const dir = external_node_path_default().dirname(metro_require.resolve(`${from}/package.json`, {
+                paths: roots
+            }));
+            roots.push(dir);
+            found.set(from, dir);
+        } catch  {
+        // Not every project has every one of these. The next candidate may still resolve.
+        }
+    }
+    const serving = [
+        "@expo/cli",
+        "@react-native/community-cli-plugin",
+        "react-native",
+        "expo"
+    ].map((name)=>found.get(name)).filter((dir)=>dir !== undefined);
+    return [
+        ...serving,
+        projectRoot
+    ];
+}
+/** Its entry exports the directory its files live in, several levels below the package root. */ function findFrontend(roots) {
+    try {
+        const exported = metro_require(metro_require.resolve("@react-native/debugger-frontend", {
+            paths: roots
+        }));
+        return typeof exported === "string" ? exported : null;
+    } catch  {
+        return null;
+    }
+}
+function pointDebuggerAt(roots) {
+    try {
+        const middleware = external_node_path_default().dirname(metro_require.resolve("@react-native/dev-middleware/package.json", {
+            paths: roots
+        }));
+        const loaded = metro_require(external_node_path_default().join(middleware, "dist/utils/getDevToolsFrontendUrl"));
+        const original = loaded.default;
+        if (typeof original !== "function") return;
+        if (original.patchedBy) return;
+        const patched = (...args)=>String(original(...args)).replace("/debugger-frontend/", `${DEVTOOLS_ROUTE}/`);
+        patched.patchedBy = DEVTOOLS_ID;
+        loaded.default = patched;
+    } catch  {
+        console.warn("[devtools] could not point the debugger shortcut at the tab.");
+    }
+}
+/** The page ships a strict CSP, so an injected script needs a nonce allowed by it. */ function injectHost(html, base) {
+    const nonce = external_node_crypto_default().randomUUID();
+    const withNonce = html.replace(/(<meta[^>]*http-equiv="Content-Security-Policy"[^>]*content=")([^"]*)"/, (_match, head, policy)=>`${head}${policy.replace(/script-src ([^;]+)/, `script-src $1 'nonce-${nonce}'`)}"`);
+    return withNonce.replace(/<body[^>]*>/, (body)=>`<script type="module" nonce="${nonce}" src="${base}/host.js"></script>${body}`);
+}
+function serve(response, body, type) {
+    response.setHeader("Content-Type", type);
+    response.end(body);
+}
+/** Answers with a file from `root`. Checked, so a crafted path cannot read outside it. */ function sendFile(root, relative, response, transform) {
+    const file = external_node_path_default().join(root, external_node_path_default().normalize(relative));
+    if (!file.startsWith(root)) {
+        response.statusCode = 403;
+        response.end("no");
+        return;
+    }
+    external_node_fs_default().readFile(file, (error, contents)=>{
+        if (error) {
+            response.statusCode = 404;
+            response.end("not found");
+            return;
+        }
+        serve(response, transform ? transform(contents.toString("utf8")) : contents, TYPES[external_node_path_default().extname(file)] ?? "application/octet-stream");
+    });
+}
+function withReactNativeDevtoolsTab(config, options = {}) {
+    const base = DEVTOOLS_ROUTE;
+    const projectRoot = config.projectRoot ?? process.cwd();
+    const roots = projectRoots(projectRoot);
+    const frontend = options.frontendPath ?? findFrontend(roots);
+    if (!frontend) {
+        console.warn("[devtools] React Native DevTools was not found, so no tab is served.");
+        return config;
+    }
+    // The built page shown in the tab, published with this package so it is found the same way from a
+    // checkout or from `node_modules`.
+    const renderer = external_node_path_default().join(external_node_path_default().dirname(metro_require.resolve("@axonpack/react-native-devtools-tab/package.json")), "dist/renderer");
+    pointDebuggerAt(roots);
+    /** Answers one of our routes, or reports that the request was not ours. */ const handle = (request, response)=>{
+        const url = (request.url ?? "").split("?")[0];
+        if (!url.startsWith(base)) return false;
+        const rest = url.slice(base.length) || "/";
+        if (rest === "/host.js") {
+            serve(response, hostScript(), "application/javascript");
+            return true;
+        }
+        // `/panel/...` is the page this package ships, everything else is the real DevTools frontend.
+        const inPanel = rest.startsWith("/panel/");
+        sendFile(inPanel ? renderer : frontend, inPanel ? rest.slice("/panel".length) : rest, response, rest === "/rn_fusebox.html" ? (html)=>injectHost(html, base) : undefined);
+        return true;
+    };
+    const previous = config.server?.enhanceMiddleware;
+    return {
+        ...config,
+        server: {
+            ...config.server,
+            enhanceMiddleware: (middleware, server)=>{
+                const next = previous ? previous(middleware, server) : middleware;
+                return (request, response, done)=>{
+                    if (!handle(request, response)) next(request, response, done);
+                };
+            }
+        }
+    };
+}
+
+module.exports = __webpack_exports__;
+})()
+;

package/dist/renderer/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>DevTools tab</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="./static/js/index.8039fdb712.js"></script><link href="./static/css/index.c8f13abbf0.css" rel="stylesheet"></head>
+  <body>
+    <div id="root"></div>
+    <script>
+      // A panel that fails renders as a blank tab, and its errors go to the iframe's own console,
+      // which nobody thinks to open. Put them on the page instead.
+      window.addEventListener("error", function (event) {
+        document.body.textContent = String(
+          (event.error && event.error.stack) || event.message,
+        );
+      });
+    </script>
+  </body>
+</html>

package/dist/renderer/static/css/index.c8f13abbf0.css

@@ -0,0 +1 @@
+:root{--lightningcss-light:initial;--lightningcss-dark: ;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--bar-height:26px;--bg:#1e1e1e;--fg:#ddd;--bar:#282828;--line:#3c3c3c;--hover:#ffffff1a;--pop:#2f2f2f;--muted:#9aa0a6;--link:#6ba5ff;--logo:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 400%27%3E%3Cg fill=%27none%27 stroke-width=%2760%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M199 112 95 287%27 stroke=%27%230c63e9%27/%3E%3Cpath d=%27M243 165 304 287%27 stroke=%27%23f4f6f8%27/%3E%3C/g%3E%3Ccircle cx=%27201%27 cy=%27264%27 r=%2729%27 fill=%27%230c63e9%27/%3E%3C/svg%3E");--refresh:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M17.65 6.35A7.96 7.96 0 0 0 12 4a8 8 0 1 0 7.73 10h-2.08A6 6 0 1 1 12 6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z%27/%3E%3C/svg%3E")}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (prefers-color-scheme:light){:root{--bg:#fff;--fg:#202020;--bar:#ececec;--line:#d0d0d0;--hover:#0000000d;--pop:#fff;--muted:#5f6368;--link:#0c63e9;--logo:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 400 400%27%3E%3Cg fill=%27none%27 stroke-width=%2760%27 stroke-linecap=%27round%27%3E%3Cpath d=%27M199 112 95 287%27 stroke=%27%230c63e9%27/%3E%3Cpath d=%27M243 165 304 287%27 stroke=%27%23000000%27/%3E%3C/g%3E%3Ccircle cx=%27201%27 cy=%27264%27 r=%2729%27 fill=%27%230c63e9%27/%3E%3C/svg%3E")}}html,body,#root{height:100%}#root{flex-direction:column;display:flex}.axonpack-tab-body{flex:1;min-height:0;overflow:auto}body{background:var(--bg);color:var(--fg);margin:0;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}.axonpack-tab-bar{height:var(--bar-height);background:var(--bar);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:8px;padding:0 4px 0 8px;font:500 12px system-ui,sans-serif;display:flex}.axonpack-tab-name{align-items:center;gap:6px;display:flex}.axonpack-tab-brand{background:var(--logo) center / contain no-repeat;width:14px;height:14px;position:relative}.axonpack-tab-about{z-index:1;border:1px solid var(--line);background:var(--pop);width:264px;color:var(--muted);opacity:0;visibility:hidden;border-radius:8px;justify-items:start;gap:8px;padding:12px 13px;font-size:11px;font-weight:400;line-height:1.55;transition:opacity .12s,transform .12s,visibility 0s .12s;display:grid;position:absolute;top:calc(100% + 5px);left:-6px;transform:translateY(-3px);box-shadow:0 10px 28px #00000059}.axonpack-tab-about:before{content:"";position:absolute;inset:-6px 0 100%}.axonpack-tab-brand:hover .axonpack-tab-about,.axonpack-tab-brand:focus-within .axonpack-tab-about{opacity:1;visibility:visible;transition-delay:0s;transform:none}.axonpack-tab-about b{color:var(--fg);font-size:12px;font-weight:600}.axonpack-tab-card{box-sizing:border-box;border:1px solid var(--line);border-radius:6px;grid-template-columns:22px 1fr auto;align-items:center;gap:1px 9px;width:100%;padding:9px 10px;text-decoration:none;display:grid}.axonpack-tab-card:hover{background:var(--hover)}.axonpack-tab-card-mark{background:var(--logo) center / contain no-repeat;grid-row:span 2;width:22px;height:22px}.axonpack-tab-card-stars{color:var(--muted)}.axonpack-tab-card-slogan{color:var(--muted);grid-column:2/span 2}.axonpack-tab-links{border-top:1px solid var(--line);gap:14px;width:100%;padding-top:9px;display:flex}.axonpack-tab-links a{color:var(--link);font-weight:500;text-decoration:none}.axonpack-tab-links a:after{content:" ↗"}.axonpack-tab-links a:hover{text-decoration:underline}.axonpack-tab-bar button{width:20px;height:20px;color:inherit;cursor:pointer;background:0 0;border:0;border-radius:4px;place-items:center;padding:0;display:grid}.axonpack-tab-bar button:hover{background:var(--hover)}.axonpack-tab-bar button:before{content:"";width:14px;height:14px;-webkit-mask:var(--refresh) center / contain no-repeat;-webkit-mask:var(--refresh) center / contain no-repeat;-webkit-mask:var(--refresh) center / contain no-repeat;mask:var(--refresh) center / contain no-repeat;background:currentColor}.axonpack-tab-loading{height:100%;color:var(--muted);place-content:center;justify-items:center;gap:12px;display:grid}.axonpack-tab-loading-glyph{border:2px solid var(--line);border-top-color:var(--link);border-radius:50%;width:24px;height:24px;animation:.7s linear infinite axonpack-tab-spin}@keyframes axonpack-tab-spin{to{transform:rotate(1turn)}}