From 7d6d22c1130fe519c6f246530fc4b37203a9a50b Mon Sep 17 00:00:00 2001 From: Tobias Baunbaek Date: Wed, 31 Jan 2024 13:58:13 +0100 Subject: [PATCH] Add support loading app from pear://runtime/devtools/INSPECTOR_KEY --- lib/devtools.js | 71 ++++++++++++++++++++++++++++--------------------- 1 file changed, 41 insertions(+), 30 deletions(-) diff --git a/lib/devtools.js b/lib/devtools.js index d5413fa..4262522 100644 --- a/lib/devtools.js +++ b/lib/devtools.js @@ -101,10 +101,10 @@ customElements.define('developer-tooling', class extends HTMLElement {

Add the following code to the application, before any other code:

if (Pear.config.dev) {
-  const { Inspector } = await import('@holepunchto/pear-inspect')
+  const { Inspector } = await import('pear-inspect')
   const inpector = await new Inspector()
   const key = await inpector.enable()
-  console.log('Pear Inspector key:', key.toString('hex'))
+  console.log('Debug with', key.toString('hex'))
 }

When the application is opened in development mode the inspection key will be logged.

@@ -141,36 +141,15 @@ customElements.define('developer-tooling', class extends HTMLElement { this.addKeyFormElem.addEventListener('submit', e => { e.preventDefault() const inspectorKey = this.addKeyInputElem.value - if (inspectorKey.length !== 64) { - this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long' - return - } - - const sessionId = generateUuid() - const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') }) - const app = { - inspectorKey, - 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.addKeyInputElem.value = '' - this.addKeyErrorElem.textContent = '' - this.renderApps() + this.addApp(inspectorKey) }) + const shouldLoadApp = Pear.config.linkData?.startsWith('devtools/') + if (shouldLoadApp) { + const id = Pear.config.linkData.split('/').pop() + this.addApp(id) + } + const devtoolsHttpServer = http.createServer() const devToolsWsServer = new WebSocketServer({ noServer: true }) @@ -244,6 +223,7 @@ customElements.define('developer-tooling', class extends HTMLElement { div.innerHTML = `
+
devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}
${app.title} (${app.url})
` @@ -260,7 +240,38 @@ customElements.define('developer-tooling', class extends HTMLElement { } else { this.noAppsElem.classList.remove('hidden') } + } + addApp (inspectorKey) { + const isIncorrectLength = inspectorKey.length !== 64 + if (isIncorrectLength) { + this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long' + return + } + + const sessionId = generateUuid() + const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') }) + const app = { + inspectorKey, + 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.addKeyInputElem.value = '' + this.addKeyErrorElem.textContent = '' + this.renderApps() } load () {