@axonpack/react-native-devtools-tab 0.1.0 → 0.1.3-canary-7fd4757199c4f00422a2928cce37df21e99c6fac

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @axonpack/react-native-devtools-tab
 
+## 0.1.3-canary-7fd4757199c4f00422a2928cce37df21e99c6fac
+
+### Patch Changes
+
+- 7b21efb: - **Docs on axonpack.dev**: the links in the DevTools tab and the npm homepage go to axonpack.dev
+
+## 0.1.2
+
+### Patch Changes
+
+- 8bf976d: - **Accents and emoji in a tab's fields**: text typed into a field that holds an é or an emoji is no longer lost
+
+## 0.1.1
+
+### Patch Changes
+
+- 99f49a5: - **Open DevTools on your tab**: `registerTab` returns `focus()`, and the next DevTools window lands on that tab
+  - **Switch an open window to your tab**: `focus()` also brings the tab forward in a window that is already open
+  - **Copy to the computer's clipboard**: give an element `COPY_ATTRIBUTE` with the text, and a click copies it there instead of on the device
+  - **Your own right-click menu**: a tab that handles a right-click no longer gets the browser's menu on top of it
+  - **A clearer about card**: hover the mark by a tab's name for what it is and links to the docs, changelog, other libraries and GitHub
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -247,6 +247,41 @@ event itself, with `preventDefault` and `stopPropagation` there but doing nothin
 Everything else a devtools tab usually wants needs none of that: reading the app's state, calling
 into it, drawing a table, filtering a list.
 
+Copying is the one thing a handler cannot do for you, since it runs in the app and lands on the
+device's clipboard. Give the element `COPY_ATTRIBUTE` with the text instead, and the panel copies it
+to the computer's clipboard on the click:
+
+```tsx
+import { COPY_ATTRIBUTE } from "@axonpack/react-native-devtools-tab";
+
+<button {...{ [COPY_ATTRIBUTE]: curl }}>Copy as cURL</button>;
+```
+
+A download needs nothing special: an `<a href="data:…" download="name">` is a real link in the
+panel, and the browser saves it.
+
+## Opening DevTools on your tab
+
+`registerTab` returns the tab, with one method. `focus()` shows the tab in a DevTools window that
+is already open, and in the next one that connects, so calling it just before the app opens
+DevTools lands the window on it:
+
+```tsx
+import { TurboModuleRegistry } from "react-native";
+
+const tab = ReactNativeDevtoolsPanel.registerTab({
+  name: "Session",
+  component: Session,
+});
+
+// Later, from a button in the app, in a debug build:
+tab.focus();
+// React Native's own DevSettings: openDebugger is what the dev menu's Open DevTools calls.
+TurboModuleRegistry.get<{ openDebugger?: () => void }>(
+  "DevSettings",
+)?.openDebugger?.();
+```
+
 ## Several tabs
 
 Call `registerTab` once per tab. Each gets its own React root, so one tab re-rendering does not

package/dist/metro/index.cjs

@@ -84,6 +84,23 @@ const DEVTOOLS_ROUTE = `/${DEVTOOLS_ID}-tab`;
  * 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__`;
+/**
+ * The tab the next DevTools window should open on, left here by `focus()`.
+ *
+ * A note rather than a message, because the window it is for does not exist yet. `openDebugger` asks
+ * Metro for a window and cannot say which panel to show on iOS, and the frontend's own `panel`
+ * parameter is read at startup, before any tab of ours has been added. So the window reads this when
+ * it connects, the same way it reads the tab list, and clears it so only one window acts on it.
+ */ const DEVTOOLS_FOCUS = `__${DEVTOOLS_ID}_focus__`;
+/**
+ * The one attribute the panel acts on itself: a click on an element that has it copies its value to
+ * the clipboard of the computer DevTools runs on.
+ *
+ * A handler runs in the app, so a copy written the ordinary way lands on the device's clipboard,
+ * and a phone does not share that with the computer. The clipboard that matters is the browser's,
+ * and so is the click it needs, so the text comes as a prop and the panel does the copying. Any
+ * `onClick` on the element still runs, after the copy.
+ */ const COPY_ATTRIBUTE = "data-devtools-copy";
 
 ;// CONCATENATED MODULE: ./src/metro/index.ts
 
@@ -121,12 +138,14 @@ function hostScript() {
     const ROUTE = DEVTOOLS_ROUTE;
     const id = DEVTOOLS_ID;
     const tabs = DEVTOOLS_TABS;
+    const focus = DEVTOOLS_FOCUS;
     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 FOCUS = ${JSON.stringify(focus)};
 const DISPATCHER = '__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__';
 
 // The frontend builds itself after DOMContentLoaded, and the tab strip is the last thing to appear.
@@ -144,6 +163,14 @@ const waitForFrontend = () =>
     observer.observe(document.body, { childList: true, subtree: true });
   });
 
+/**
+ * Every character past ASCII as a \\u escape, which a string literal reads back as the same text.
+ * A message goes to the app as source for Runtime.evaluate, and source holding an é or an emoji did
+ * not arrive: a keystroke in a field that held one was lost, and so was every event after it.
+ */
+const asciiOnly = (source) =>
+  source.replace(/[\\u007f-\\uffff]/g, (char) => '\\\\u' + char.charCodeAt(0).toString(16).padStart(4, '0'));
+
 const getRuntime = () => {
   const targets = SDK.TargetManager.TargetManager.instance();
   const target = targets.primaryPageTarget() ?? targets.rootTarget();
@@ -190,10 +217,19 @@ const connectToApp = async (onMessage) => {
             returnByValue: true,
           });
 
+          // Taken rather than read, so a second window opening later starts where it always does.
+          const focused = await runtime.agent.invoke_evaluate({
+            expression:
+              '(() => { const id = globalThis[' + JSON.stringify(FOCUS) + ']; delete globalThis[' +
+              JSON.stringify(FOCUS) + ']; return id ?? null; })()',
+            returnByValue: true,
+          });
+
           return {
             registered: JSON.parse(listed.result?.value || '[]'),
+            focus: focused.result?.value ?? null,
             send: (message) => {
-              const serialized = JSON.stringify(JSON.stringify(message));
+              const serialized = asciiOnly(JSON.stringify(JSON.stringify(message)));
               void runtime.agent.invoke_evaluate({
                 expression:
                   DISPATCHER + '.sendMessage(' + JSON.stringify(DOMAIN) + ', ' + serialized + ')',
@@ -222,6 +258,8 @@ class TabPanel extends UI.View.SimpleView {
     const iframe = document.createElement('iframe');
     iframe.src = '${ROUTE}/panel/index.html?tab=' + encodeURIComponent(tab.id);
     iframe.style.cssText = 'width:100%;height:100%;border:0';
+    // So a tab can copy to this computer's clipboard. See COPY_ATTRIBUTE in the renderer.
+    iframe.allow = 'clipboard-write';
     this.contentElement.appendChild(iframe);
     this.iframe = iframe;
   }
@@ -232,12 +270,23 @@ const main = async () => {
 
   const inspector = UI.InspectorView.InspectorView.instance();
   const panels = new Map();
+  // Held until the tab exists, since the app may ask for one it registers after this connects.
+  let wanted = null;
+
+  // The tab strip itself, not \`showPanel\`: that looks the id up among DevTools' own registered
+  // views, and ours are added at run time, so it only logs that it found nothing.
+  const select = (id) => {
+    if (!panels.has(id)) return false;
+    inspector.tabbedPane.selectTab(id, true);
+    return true;
+  };
 
   const addPanel = (tab) => {
     if (!tab?.id || panels.has(tab.id)) return;
     const panel = new TabPanel(tab);
     panels.set(tab.id, panel);
     inspector.addPanel(panel);
+    if (wanted === tab.id && select(tab.id)) wanted = null;
   };
 
   const connected = await connectToApp((message) => {
@@ -257,6 +306,7 @@ const main = async () => {
 
     // 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 (message?.type === 'tab:focus' && !select(body?.id)) wanted = body?.id ?? null;
   });
 
   if (!connected) {
@@ -266,6 +316,7 @@ const main = async () => {
 
   // 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.
+  if (connected.focus) wanted = connected.focus;
   for (const tab of connected.registered) addPanel(tab);
   const send = connected.send;
 

package/dist/renderer/index.html

@@ -3,7 +3,7 @@
   <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>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"><script defer src="./static/js/index.04c85e4111.js"></script><link href="./static/css/index.8ca2a34c1f.css" rel="stylesheet"></head>
   <body>
     <div id="root"></div>
     <script>

package/dist/renderer/static/css/index.8ca2a34c1f.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:1000;border:1px solid var(--line);background:var(--pop);width:264px;color:var(--muted);opacity:0;visibility:hidden;border-radius:4px;justify-items:start;gap:8px;padding:12px 13px;font-size:12px;font-weight:400;line-height:1.5;transition:opacity .12s,transform .12s,visibility 0s .12s;display:grid;position:absolute;top:calc(100% + 5px);left:-6px;transform:translateY(-3px);box-shadow:0 2px 8px #0006}.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:4px;grid-template-columns:22px 1fr;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-slogan{color:var(--muted);grid-column:2}.axonpack-tab-links{border-top:1px solid var(--line);flex-wrap:wrap;gap:4px 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)}}.axonpack-tab-toast{z-index:1001;border:1px solid var(--line);background:var(--pop);max-width:calc(100% - 24px);color:var(--fg);pointer-events:none;border-radius:4px;padding:6px 12px;font:12px system-ui,sans-serif;position:fixed;bottom:12px;left:50%;translate:-50%;box-shadow:0 2px 8px #0006}.axonpack-tab-toast[data-failed]{color:#f28b82}