@axonpack/react-native-devtools-tab 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axonpack/react-native-devtools-tab",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Put your own tab in React Native DevTools, with a two-way channel to the running app",
   "author": "Md Asadujjaman <abappi2019@gmail.com> (https://github.com/abappi19)",
   "keywords": [
@@ -11,6 +11,7 @@
     "debugging"
   ],
   "license": "MIT",
+  "homepage": "https://axonpack.github.io/docs/react-native-devtools-tab/",
   "repository": {
     "type": "git",
     "url": "https://github.com/axonpack/axonpack.git",

package/src/core/constants/devtools.const.ts

@@ -22,3 +22,24 @@ export const DEVTOOLS_ROUTE = `/${DEVTOOLS_ID}-tab`;
  * the tab strip empty until the app itself restarted.
  */
 export 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.
+ */
+export 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.
+ */
+export const COPY_ATTRIBUTE = "data-devtools-copy";

package/src/core/constants/message.const.ts

@@ -14,6 +14,9 @@ export const REGISTER = "tab:register";
 /** App to panel, on every render: what React just changed. */
 export const MUTATE = "tab:mutate";
 
+/** App to panel: show this tab, for a DevTools window that is already open. */
+export const FOCUS = "tab:focus";
+
 /** Panel to app: something in the tab was clicked, typed in, or otherwise acted on. */
 export const ACTION = "tab:action";
 

package/src/device/components/tab-frame.component.tsx

@@ -1,8 +1,6 @@
 import {
   createElement,
-  useEffect,
   useReducer,
-  useState,
   useTransition,
   type ComponentType,
   type ReactNode,
@@ -22,9 +20,15 @@ import {
  * Styled by class, with the rules in `renderer/renderer.css`, so the bar follows the panel's light
  * and dark instead of carrying colours picked in the app.
  */
-const DOCS = "https://axonpack.github.io/docs";
 const HOME = "https://axonpack.github.io";
-const REPO = "https://api.github.com/repos/axonpack/axonpack";
+const GUIDE = "https://axonpack.github.io/docs/react-native-devtools-tab";
+
+const LINKS = [
+  { label: "Read the docs", href: GUIDE },
+  { label: "Changelog", href: `${GUIDE}/changelog` },
+  { label: "Other libraries", href: "https://axonpack.github.io/docs" },
+  { label: "GitHub", href: "https://github.com/axonpack/axonpack" },
+];
 
 /**
  * How long a refresh waits before the tab is drawn again.
@@ -35,35 +39,6 @@ const REPO = "https://api.github.com/repos/axonpack/axonpack";
  */
 const RENDER_DELAY = 600;
 
-/**
- * The star count, or null until it arrives and for good if it never does.
- *
- * The request is kept at module level rather than per component: every tab's bar draws this card, so
- * an app with four tabs would otherwise ask GitHub four times for the same number, against a limit
- * of sixty an hour for an unauthenticated caller. It runs in the app, which is where a `fetch` is,
- * and only once a panel has asked for the tab, so an app nobody is debugging never makes it.
- */
-let counted: Promise<number | null> | undefined;
-
-function useStars(): number | null {
-  const [stars, setStars] = useState<number | null>(null);
-
-  useEffect(() => {
-    counted ??= fetch(REPO)
-      .then((response) => response.json())
-      .then((repo: { stargazers_count?: number }) =>
-        typeof repo.stargazers_count === "number"
-          ? repo.stargazers_count
-          : null,
-      )
-      .catch(() => null);
-
-    void counted.then(setStars);
-  }, []);
-
-  return stars;
-}
-
 export function TabFrame({
   name,
   component,
@@ -73,7 +48,6 @@ export function TabFrame({
 }): ReactNode {
   const [, refresh] = useReducer((n: number) => n + 1, 0);
   const [isLoading, startTransition] = useTransition();
-  const stars = useStars();
 
   const handleRefresh = () => {
     startTransition(async () => {
@@ -91,7 +65,8 @@ export function TabFrame({
             <span className="axonpack-tab-about">
               <b>{name}</b>
               <span>
-                This tab is rendered via Axonpack React Native DevTools Tab.
+                Drawn by your app, not by DevTools. It runs inside the app, so
+                what it shows is the app&apos;s live state.
               </span>
               <a
                 className="axonpack-tab-card"
@@ -101,18 +76,21 @@ export function TabFrame({
               >
                 <span className="axonpack-tab-card-mark" />
                 <b>Axonpack</b>
-                <span className="axonpack-tab-card-stars">
-                  {stars === null ? "" : `\u2605 ${stars}`}
-                </span>
                 <span className="axonpack-tab-card-slogan">
-                  Free, open source foundation libraries for React Native and
-                  Expo.
+                  Free, open source libraries for React Native and Expo.
                 </span>
               </a>
               <span className="axonpack-tab-links">
-                <a href={DOCS} target="_blank" rel="noreferrer">
-                  Learn more
-                </a>
+                {LINKS.map((link) => (
+                  <a
+                    key={link.href}
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    {link.label}
+                  </a>
+                ))}
               </span>
             </span>
           </span>

package/src/device/services/__tests__/remote-sender.test.ts

@@ -80,7 +80,14 @@ function mount() {
   };
 }
 
-const settle = () => new Promise((resolve) => setTimeout(resolve, 20));
+// Turns of the event loop, not a clock. Everything waited on here is queued on this same loop, so
+// a turn always runs behind the hop it waits for. A timer does not: on a starved CI runner it fired
+// before the chain had finished.
+const settle = async () => {
+  for (let turn = 0; turn < 50; turn++) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+};
 
 test("a component's hooks run in the app and its DOM appears in the panel", async () => {
   const { container, sender, pressed, click } = mount();

package/src/index.ts

@@ -1,8 +1,13 @@
 import { createElement, type ComponentType } from "react";
 
-import { DEVTOOLS_ID, DEVTOOLS_TABS } from "./core/constants/devtools.const";
+import {
+  DEVTOOLS_FOCUS,
+  DEVTOOLS_ID,
+  DEVTOOLS_TABS,
+} from "./core/constants/devtools.const";
 import {
   ACTION,
+  FOCUS,
   HELLO,
   MUTATE,
   REGISTER,
@@ -55,6 +60,8 @@ function idFor(name: string): string {
   return id;
 }
 
+export { COPY_ATTRIBUTE } from "./core/constants/devtools.const";
+
 export type TabOptions = {
   /** The label in the DevTools tab strip, and what the tab's id is built from. */
   name: string;
@@ -118,10 +125,19 @@ export type TabOptions = {
  */
 export type ReactNativeDevtoolsPanel = {
   /** Adds a tab to React Native DevTools. Call it once per tab, as many times as you have tabs. */
-  registerTab: (options: TabOptions) => void;
+  registerTab: (options: TabOptions) => RegisteredTab;
+};
+
+export type RegisteredTab = {
+  /**
+   * Shows this tab in React Native DevTools: now, in a window that is already open, and in the next
+   * window that connects. Call it just before opening DevTools from the app, for example with
+   * `DevSettings`' `openDebugger`, so the window lands here instead of on Console.
+   */
+  focus: () => void;
 };
 
-function registerTab(options: TabOptions): void {
+function registerTab(options: TabOptions): RegisteredTab {
   const id = idFor(options.name);
   const tab = createTabChannel(channel, id);
   let sender: RemoteSender | null = null;
@@ -168,6 +184,13 @@ function registerTab(options: TabOptions): void {
     const event = payload as TabAction;
     sender?.dispatch(event.action, event.payload);
   });
+
+  return {
+    focus: () => {
+      (globalThis as Record<string, unknown>)[DEVTOOLS_FOCUS] = id;
+      tab.send(FOCUS);
+    },
+  };
 }
 
 export const ReactNativeDevtoolsPanel: ReactNativeDevtoolsPanel = {

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

@@ -1 +0,0 @@
-: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)}}