make devtools support non-browser environment

chrome-extension/src/communicator.ts

@@ -1,4 +1,4 @@
-import { getDevtools, DEVTOOLS, Devtools, encode } from "stalo/lib/devtools";
+import { onDevtools, encode, Devtools } from "stalo/lib/devtools";
 import { initName } from "@stalo/devtools-ui/lib/constants";
 import { sendMessage, setNamespace, onMessage } from "webext-bridge/window";
 import {
@@ -18,21 +18,13 @@ async function connectAll() {
 
   const list: Record<string, Devtools<object>> = {};
 
-  function updateList() {
-    getDevtools<object>().forEach((d) => {
-      if (list[d.id]) return;
+  onDevtools<object>((d) => {
+    if (list[d.id]) return;
 
-      list[d.id] = d;
-      connect(d);
-    });
-  }
-
-  window.addEventListener(DEVTOOLS, () => {
-    updateList();
+    list[d.id] = d;
+    connect(d);
   });
 
-  setInterval(updateList, 1000);
-
   onMessage<Set>(eventSet, ({ data }) => {
     list[data.id].state = JSON.parse(data.state);
   });

chrome-extension/src/constants.ts

@@ -4,17 +4,17 @@ export const eventInit = "@@stalo-init";
 export const eventRecord = "@@stalo-record";
 export const eventSet = "@@stalo-set";
 
-type StoreRecord = {
+type StoreRecord<T> = {
   name: string;
-  state: string | undefined;
+  state: T;
   description?: string;
   createdAt: number;
 };
 
 export type Init = {
   sessionID: string;
   name: string;
-  record: StoreRecord;
+  record: StoreRecord<string>;
 };
 
 export type Set = {
@@ -24,5 +24,5 @@ export type Set = {
 
 export type Record = {
   id: string;
-  record: StoreRecord;
+  record: StoreRecord<string | undefined>;
 };

chrome-extension/src/index.tsx

@@ -11,20 +11,22 @@ import {
 } from "./constants";
 import { unplug, Connection, Panel, plug } from "@stalo/devtools-ui";
 
-connect();
-render();
+main();
+
+function main() {
+  connect();
 
-function render() {
   const root = document.createElement("div");
 
   document.body.appendChild(root);
 
-  ReactDOM.createRoot(root).render(<Panel chromeExtension />);
+  ReactDOM.createRoot(root).render(<Panel customConnect />);
 }
 
 function connect() {
   const list: Record<string, Connection> = {};
 
+  // Just acknowledge connection don't need to do anything
   onMessage(eventConnect, () => {});
 
   chrome.runtime.onConnect.addListener((port) => {

cspell.json

@@ -5,6 +5,7 @@
     "immer",
     "immerable",
     "okaidia",
+    "onwarn",
     "recordx",
     "Stackframe",
     "stalo",

devtools-ui/src/Panel.tsx

@@ -7,21 +7,20 @@ import connect from "./store/connect";
 import { useEffect } from "react";
 
 export default function Panel({
-  chromeExtension,
   width,
   height,
+  customConnect,
 }: {
-  chromeExtension?: boolean;
   width?: number;
   height?: number;
+  customConnect?: boolean;
 }) {
   useEffect(() => {
-    if (!chromeExtension) {
-      const stop = new AbortController();
-      connect(stop.signal);
-      return () => stop.abort();
-    }
-  }, [chromeExtension]);
+    if (customConnect) return;
+    const stop = new AbortController();
+    connect(stop.signal);
+    return () => stop.abort();
+  }, [customConnect]);
 
   return (
     <div className={style} style={{ width, height }}>

devtools-ui/src/store/connect.ts

@@ -1,17 +1,12 @@
-import { Devtools, getDevtools, encode } from "stalo/lib/devtools";
+import { onDevtools, encode } from "stalo/lib/devtools";
 import { plug, unplug } from ".";
 import { Connection } from "./constants";
 import { initName } from "../constants";
 
-export default async function connect(stop: AbortSignal) {
-  const connected = new Set<Devtools<unknown>>();
-
-  while (!stop.aborted) {
-    getDevtools<unknown>().forEach((d) => {
-      if (connected.has(d)) return;
-
-      connected.add(d);
-
+export default function connect(stop: AbortSignal) {
+  stop.addEventListener(
+    "abort",
+    onDevtools((d) => {
       const conn: Connection = {
         id: d.id,
         name: d.name,
@@ -39,11 +34,6 @@ export default async function connect(stop: AbortSignal) {
         close();
         unplug(conn.id);
       });
-    });
-
-    await new Promise((r) => {
-      const timer = setTimeout(r, 1000);
-      stop.addEventListener("abort", () => clearTimeout(timer));
-    });
-  }
+    })
+  );
 }

examples/index.spec.tsx

@@ -103,3 +103,22 @@ test("todo-app", async ({ page }) => {
   await expect(todoToggle.first()).toBeDisabled();
   await expect(input).toHaveCount(0);
 });
+
+test("devtools", async ({ page }) => {
+  await page.goto("/examples/Devtools.tsx");
+
+  const btn = page.locator("button", { hasText: "Increase by 10" });
+  const record02 = page.locator(".records .item:nth-child(2)");
+  const sessions = page.locator(".sessions select");
+  const editor = page.locator(".editor .view-lines");
+
+  await sessions.selectOption({ label: "Demo" });
+
+  await btn.click();
+
+  await record02.click();
+
+  await expect(record02).toContainText("Increase the count by 10");
+
+  await expect(editor).toHaveText("10");
+});

examples/playwright.config.js

@@ -27,6 +27,8 @@ async function serve() {
     hmr: false,
   };
 
+  viteConfig.logLevel = "error";
+
   const vite = await createServer(viteConfig);
 
   app.use(vite.middlewares);

src/devtools.test.tsx

@@ -1,23 +1,26 @@
-import { it, expect, describe, afterEach } from "vitest";
+import { it, expect, describe, afterEach, vi } from "vitest";
 import create, { produce } from ".";
 import { compose, Middleware } from "./utils";
 import devtools, {
+  DEVTOOLS,
+  Devtools,
   encode,
-  getDevtools,
   immerWithPatch,
   meta,
+  onDevtools,
   StoreRecord,
 } from "./devtools";
 import { render } from "@testing-library/react";
 
 describe("devtools", () => {
+  vi.useFakeTimers();
+
   afterEach(() => {
-    getDevtools().forEach((d) => {
-      d.close();
-    });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (globalThis as any)[DEVTOOLS] = undefined;
   });
 
-  it("basic", async () => {
+  it("basic", async ({ onTestFinished }) => {
     const init = 1;
     const [use, set] = create(init);
 
@@ -27,13 +30,12 @@ describe("devtools", () => {
       }, ctx);
     };
 
-    expect(getDevtools()).toHaveLength(0);
-
     const setStore = compose(set, addOne, devtools(init));
 
     compose(set, addOne, devtools(init));
 
-    const d = Array.from(getDevtools<number>())[0];
+    const d = await getDevtools<number>();
+    onTestFinished(() => d.close());
 
     expect(d.state).toBe(1);
 
@@ -83,7 +85,7 @@ describe("devtools", () => {
     const setStore = compose(set, immerWithPatch(), devtools(init));
 
     const records: StoreRecord<number>[] = [];
-    const d = Array.from(getDevtools<number>())[0];
+    const d = await getDevtools<number>();
 
     d.subscribe((record) => {
       records.push(record);
@@ -114,7 +116,7 @@ describe("devtools", () => {
     const setStore = compose(set, immerWithPatch(), devtools(init));
 
     const records: StoreRecord<number>[] = [];
-    const d = Array.from(getDevtools<number>())[0];
+    const d = await getDevtools<number>();
 
     d.subscribe((record) => {
       records.push(record);
@@ -141,4 +143,45 @@ describe("devtools", () => {
   it("encode", async () => {
     expect(encode({ a: 1 })).toEqual('{\n  "a": 1\n}');
   });
+
+  it("can't get devtools", async () => {
+    let count = 0;
+    const close = onDevtools(() => {
+      count++;
+    });
+
+    Array.from({ length: 11 }).forEach(() => {
+      vi.advanceTimersToNextTimer();
+    });
+
+    expect(count).toBe(0);
+
+    close();
+  });
+
+  it("has devtools", async () => {
+    let count = 0;
+    const close = onDevtools(() => {
+      count++;
+    });
+
+    expect(count).toBe(0);
+
+    devtools(1)(() => 0);
+
+    vi.advanceTimersToNextTimer();
+    vi.advanceTimersToNextTimer();
+
+    expect(count).toBe(1);
+
+    close();
+  });
 });
+
+function getDevtools<S>() {
+  return new Promise<Devtools<S>>((resolve) => {
+    onDevtools<S>((d) => {
+      resolve(d);
+    });
+  });
+}