Use @holepunchto@/inspector

2025-12-17 22:44:21 +01:00 · 2024-01-26 14:39:12 +01:00
parent 4a01ee2db6
commit 6c94ce0c76
3 changed files with 139 additions and 60 deletions
--- a/index.html
+++ b/index.html
@@ -1,4 +1,5 @@
 <!DOCTYPE html>
+
 <body>
  <style>
    @font-face {
@@ -7,42 +8,42 @@
      font-weight: 400;
      font-style: normal;
    }
+
    @font-face {
      font-family: 'overpass-mono';
      src: url('~redhat-overpass-font/webfonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
    }
+
    body {
      background: #151517;
      box-sizing: border-box;
      border-radius: 8px;
-      font-family:'overpass-mono';
+      font-family: 'overpass-mono';
      -webkit-font-smoothing: antialiased;
      color: #efeaea;
      transition: background-color .4s, color .4s;
    }

-   ::-webkit-scrollbar {
-     width: 7px;
-     height: 7px;
-   }
+    ::-webkit-scrollbar {
+      width: 7px;
+      height: 7px;
+    }

-   ::-webkit-scrollbar-track {
-     background: #151517;
-   }
+    ::-webkit-scrollbar-track {
+      background: #151517;
+    }

-   ::-webkit-scrollbar-thumb {
-     background: #727272;
-   }
+    ::-webkit-scrollbar-thumb {
+      background: #727272;
+    }

    html.light body {
      background: #efeaea;
      color: #151517;
    }

-    a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
-
    #logo {
      float: left;
      margin-right: 2rem;
@@ -58,16 +59,11 @@
      margin-right: 30rem;
    }

-    nav > a {
+    nav>a {
      display: block;
    }

    section {
-      display: none;
-    }
-
-
-    section:target {
      display: block;
    }

@@ -86,9 +82,9 @@

    header {
      top: 0;
-      left:0;
+      left: 0;
      height: 170px;
-      z-index:10;
+      z-index: 10;
      background: rgba(21, 21, 23, 0.9);
      padding-top: 20px;
      width: 100%;
@@ -104,12 +100,46 @@
      user-select: none;
    }

-    h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
-    blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }
-    blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
-    .col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; }
+    h1 {
+      padding: .5rem;
+      border-right: 1px solid #B0D944;
+      border-bottom: 1px solid #B0D944;
+      display: inline-block;
+      padding-right: 0.75em;
+      padding-left: 0.5em;
+      font-weight: bold;
+      font-size: 1.6rem;
+      margin-block-start: 0.67em;
+      margin-block-end: 0.67em;
+    }

-   #back, #mode {
+    blockquote {
+      outline: 1px solid #323532;
+      margin-inline-start: 0;
+      margin-inline-end: 0;
+      display: block;
+      margin-block-start: 1rem;
+      margin-block-end: 0;
+      padding: 1px;
+      font-size: .825rem
+    }
+
+    blockquote::before {
+      content: "ℹ";
+      float: left;
+      font-size: 1.625rem;
+      margin-left: 1rem;
+      margin-right: 0.625rem;
+    }
+
+    .col {
+      max-width: 63rem;
+      margin: 0 auto;
+      margin-top: 1rem;
+    }
+
+    #back,
+    #mode {
      width: 32px;
      height: 32px;
      position: absolute;
@@ -142,16 +172,20 @@
      left: 0;
      top: 0;
    }
+
    #bar:hover {
      outline: #B0D944;
    }
+
    pear-ctrl {
      margin-top: 9px;
      margin-left: 9px;
    }
-    pear-ctrl[data-platform="dawrin"] { float: left; margin-top: 4px; }

-    system-status, docs-viewer { position: relative; top: 156px }
+    pear-ctrl[data-platform="dawrin"] {
+      float: left;
+      margin-top: 4px;
+    }

    a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
    app-router a:visited, app-router  a:active, app-router a {
@@ -161,31 +195,31 @@
    app-router[data-load="docs-viewer"] a[href='/documentation'], app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'] {
      color: rgb(78, 250, 92);
    }
-
  </style>
  <div id="bar"><pear-ctrl></pear-ctrl></div>
-  <app-router docs-viewer="/documentation" system-status="/" data-load="system-status" devtools-inspector="/devtools-inspector">
+  <app-router docs-viewer="/documentation" devtools-inspector="/devtools-inspector" system-status="/" data-load="system-status">
    <header>
      <div id="headin">
        <svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_8912_10861)">
-            <path d="M47.4056 0.838379H54.5943V15.0361H47.4056V0.838379Z" fill="#B0D944"/>
-            <path d="M43.8113 19.5305V22.406H36.6226V26.0004H65.3774V22.406H58.1887V16.8347H51V19.5305H43.8113Z" fill="#B0D944"/>
-            <path d="M72.5662 27.7974H51V30.4931H29.4339V36.963H72.5662V27.7974Z" fill="#B0D944"/>
-            <path d="M79.7548 38.7593H51V41.455H22.2451V47.9249H79.7548V38.7593Z" fill="#B0D944"/>
-            <path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944"/>
-            <path d="M86.9436 60.6846H51V63.3803H15.0565V69.8502H86.9436V60.6846Z" fill="#B0D944"/>
-            <path d="M86.9436 71.6481H51V74.3438H15.0565V80.8137H86.9436V71.6481Z" fill="#B0D944"/>
-            <path d="M94.1323 82.61H51V85.3058H7.86774V91.7756H94.1323V82.61Z" fill="#B0D944"/>
-            <path d="M101.321 93.5726H51V96.2684H0.679016V102.738H101.321V93.5726Z" fill="#B0D944"/>
-            <path d="M101.321 104.536H51V107.232H0.679016V113.702H101.321V104.536Z" fill="#B0D944"/>
-            <path d="M101.321 115.499H51V118.195H0.679016V124.664H101.321V115.499Z" fill="#B0D944"/>
-            <path d="M86.9436 126.461H51V129.156H15.0565V135.626H86.9436V126.461Z" fill="#B0D944"/>
-            <path d="M72.5662 137.424H51V140.12H29.4339V144.613H72.5662V137.424Z" fill="#B0D944"/>
+            <path d="M47.4056 0.838379H54.5943V15.0361H47.4056V0.838379Z" fill="#B0D944" />
+            <path d="M43.8113 19.5305V22.406H36.6226V26.0004H65.3774V22.406H58.1887V16.8347H51V19.5305H43.8113Z"
+              fill="#B0D944" />
+            <path d="M72.5662 27.7974H51V30.4931H29.4339V36.963H72.5662V27.7974Z" fill="#B0D944" />
+            <path d="M79.7548 38.7593H51V41.455H22.2451V47.9249H79.7548V38.7593Z" fill="#B0D944" />
+            <path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944" />
+            <path d="M86.9436 60.6846H51V63.3803H15.0565V69.8502H86.9436V60.6846Z" fill="#B0D944" />
+            <path d="M86.9436 71.6481H51V74.3438H15.0565V80.8137H86.9436V71.6481Z" fill="#B0D944" />
+            <path d="M94.1323 82.61H51V85.3058H7.86774V91.7756H94.1323V82.61Z" fill="#B0D944" />
+            <path d="M101.321 93.5726H51V96.2684H0.679016V102.738H101.321V93.5726Z" fill="#B0D944" />
+            <path d="M101.321 104.536H51V107.232H0.679016V113.702H101.321V104.536Z" fill="#B0D944" />
+            <path d="M101.321 115.499H51V118.195H0.679016V124.664H101.321V115.499Z" fill="#B0D944" />
+            <path d="M86.9436 126.461H51V129.156H15.0565V135.626H86.9436V126.461Z" fill="#B0D944" />
+            <path d="M72.5662 137.424H51V140.12H29.4339V144.613H72.5662V137.424Z" fill="#B0D944" />
          </g>
          <defs>
            <clipPath id="clip0_8912_10861">
-              <rect width="100.642" height="145.571" fill="white" transform="translate(0.679016 0.214233)"/>
+              <rect width="100.642" height="145.571" fill="white" transform="translate(0.679016 0.214233)" />
            </clipPath>
          </defs>
        </svg>
@@ -212,7 +246,7 @@
      <div class="col"><docs-viewer></docs-viewer></div>
    </section>
    <script type='module' src='./lib/docs-viewer.js'></script>
-    <section id="devtools-inspector">
+    <section id="inspector">
      <div class="col"><devtools-inspector></devtools-inspector></div>
    </section>
    <script type='module' src='./lib/devtools-inspector.js'></script>
--- a/lib/devtools-inspector.js
+++ b/lib/devtools-inspector.js
@@ -1,7 +1,7 @@
 /* eslint-env browser */
 import http from 'http'
 import { WebSocketServer } from 'ws'
-import { Client } from 'pear-inspect'
+import { Session } from '@holepunchto/pear-inspect'

 customElements.define('devtools-inspector', class extends HTMLElement {
  constructor () {
@@ -50,18 +50,36 @@ customElements.define('devtools-inspector', class extends HTMLElement {

    this.$addKeyForm.addEventListener('submit', e => {
      e.preventDefault()
-      const key = this.$addKey.value
-      if (key.length === 0) {
+      const publicKey = this.$addKey.value
+      if (publicKey.length === 0) {
        this.$addKeyError.textContent = ''
        return
      }
-      if (key.length !== 64) {
+      if (publicKey.length !== 64) {
        this.$addKeyError.textContent = 'Key needs to be 64 characters long'
        return
      }

      const sessionId = generateUuid()
-      this.apps.set(sessionId, { publicKey: key })
+      const inspectorSession = new Session({ publicKey: Buffer.from(publicKey, 'hex') })
+      const app = {
+        publicKey,
+        title: '',
+        url: '',
+        inspectorSession
+      }
+
+      inspectorSession.on('close', () => {
+        this.apps.delete(sessionId)
+        this.renderApps()
+      })
+      inspectorSession.on('info', ({ filename }) => {
+        app.url = filename
+        app.title = filename.split('/').pop()
+        this.apps.set(sessionId, app)
+        this.renderApps()
+      })
+
      this.$addKey.value = ''
      this.$addKeyError.textContent = ''
      this.renderApps()
@@ -78,15 +96,15 @@ customElements.define('devtools-inspector', class extends HTMLElement {
        return
      }

-      const targets = [...this.apps].map(([sessionId]) => ({
+      const targets = [...this.apps].map(([sessionId, app]) => ({
        description: 'node.js instance', // `Pear app: ${app.name}`,
        devtoolsFrontendUrl: `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`,
        devtoolsFrontendUrlCompat: `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`,
        faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico',
        id: sessionId,
-        title: 'index.js',
+        title: app.title,
        type: 'node',
-        url: `file:///path/to/some/file/index.js`,
+        url: app.url,
        webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}`
      }))

@@ -110,13 +128,29 @@ customElements.define('devtools-inspector', class extends HTMLElement {
      const sessionId = request.url.substr(1)
      const app = this.apps.get(sessionId)
      if (!app) return devtoolsSocket.destroy()
-      const { publicKey } = app
-      const inspectorClient = new Client({ publicKey: Buffer.from(publicKey, 'hex') })
-      inspectorClient.on('message', msg => {
-        devtoolsSocket.send(JSON.stringify(msg))
-      })
+
+      const { publicKey, inspectorSession } = app
+
+      inspectorSession.connect()
+      app.connected = true
+      this.renderApps()
+
+      const onMessage = msg => {
+        const { pearInspectMethod } = msg
+        const isACDPMessage = !pearInspectMethod
+
+        if (isACDPMessage) return devtoolsSocket.send(JSON.stringify(msg))
+      }
+      inspectorSession.on('message', onMessage)
      devtoolsSocket.on('message', msg => {
-        inspectorClient.send(JSON.parse(msg))
+        inspectorSession.post(JSON.parse(msg))
+      })
+      devtoolsSocket.on('close', () => {
+        console.log('devtoolsSocket on(close)')
+        app.connected = false
+        inspectorSession.disconnect()
+        inspectorSession.off('message', onMessage)
+        this.renderApps()
      })
    })
  }
@@ -124,13 +158,24 @@ customElements.define('devtools-inspector', class extends HTMLElement {
  renderApps () {
    const content = [...this.apps.values()].map(app => `
      <div>
+        <div>Title: ${app.title}</div>
+        <div>URL: ${app.url}</div>
        <div>Public key: ${app.publicKey}</div>
+        <div>Connected: ${app.connected ? 'Yes' : 'No'}</div>
      </div>
    `)
    this.$apps.innerHTML = content

    if (this.apps.size > 0) this.$noApps.remove()
  }
+
+  load () {
+    this.style.display = ''
+  }
+
+  unload () {
+    this.style.display = 'none'
+  }
 })

 // Can't use `uuid` module for some reason as it results in a throw with `crypto` when importing
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
  },
  "dependencies": {
    "bare-path": "^2.1.0",
-    "pear-inspect": "github:holepunchto/pear-inspect#v1.0.1",
+    "@holepunchto/pear-inspect": "^2.0.0",
    "redhat-overpass-font": "^1.0.0",
    "ws": "^8.16.0"
  },