aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-18 15:04:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use @holepunchto@/inspector

Browse Source
This commit is contained in:
Tobias Baunbaek
2024-01-26 14:39:12 +01:00
parent 4a01ee2db6
commit 6c94ce0c76
3 changed files with 139 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
index.html
View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<body> <body>
<style> <style>
@font-face { @font-face {
@@ -7,12 +8,14 @@
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
} }
@font-face { @font-face {
font-family: 'overpass-mono'; font-family: 'overpass-mono';
src: url('~redhat-overpass-font/webfonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2'); src: url('~redhat-overpass-font/webfonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
} }
body { body {
background: #151517; background: #151517;
box-sizing: border-box; box-sizing: border-box;
@@ -41,8 +44,6 @@
color: #151517; color: #151517;
} }
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
#logo { #logo {
float: left; float: left;
margin-right: 2rem; margin-right: 2rem;
@@ -63,11 +64,6 @@
} }
section { section {
display: none;
}
section:target {
display: block; display: block;
} }
@@ -104,12 +100,46 @@
user-select: none; 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; } h1 {
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 } padding: .5rem;
blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; } border-right: 1px solid #B0D944;
.col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; } 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; width: 32px;
height: 32px; height: 32px;
position: absolute; position: absolute;
@@ -142,16 +172,20 @@
left: 0; left: 0;
top: 0; top: 0;
} }
#bar:hover { #bar:hover {
outline: #B0D944; outline: #B0D944;
} }
pear-ctrl { pear-ctrl {
margin-top: 9px; margin-top: 9px;
margin-left: 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; } a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
app-router a:visited, app-router a:active, app-router a { app-router a:visited, app-router a:active, app-router a {
@@ -161,16 +195,16 @@
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'] { 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); color: rgb(78, 250, 92);
} }
</style> </style>
<div id="bar"><pear-ctrl></pear-ctrl></div> <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> <header>
<div id="headin"> <div id="headin">
<svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg"> <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)"> <g clip-path="url(#clip0_8912_10861)">
<path d="M47.4056 0.838379H54.5943V15.0361H47.4056V0.838379Z" 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="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="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 38.7593H51V41.455H22.2451V47.9249H79.7548V38.7593Z" fill="#B0D944" />
<path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944" /> <path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944" />
@@ -212,7 +246,7 @@
<div class="col"><docs-viewer></docs-viewer></div> <div class="col"><docs-viewer></docs-viewer></div>
</section> </section>
<script type='module' src='./lib/docs-viewer.js'></script> <script type='module' src='./lib/docs-viewer.js'></script>
<section id="devtools-inspector"> <section id="inspector">
<div class="col"><devtools-inspector></devtools-inspector></div> <div class="col"><devtools-inspector></devtools-inspector></div>
</section> </section>
<script type='module' src='./lib/devtools-inspector.js'></script> <script type='module' src='./lib/devtools-inspector.js'></script>

73
lib/devtools-inspector.js
View File

@@ -1,7 +1,7 @@
/* eslint-env browser */ /* eslint-env browser */
import http from 'http' import http from 'http'
import { WebSocketServer } from 'ws' import { WebSocketServer } from 'ws'
import { Client } from 'pear-inspect' import { Session } from '@holepunchto/pear-inspect'
customElements.define('devtools-inspector', class extends HTMLElement { customElements.define('devtools-inspector', class extends HTMLElement {
constructor () { constructor () {
@@ -50,18 +50,36 @@ customElements.define('devtools-inspector', class extends HTMLElement {
this.$addKeyForm.addEventListener('submit', e => { this.$addKeyForm.addEventListener('submit', e => {
e.preventDefault() e.preventDefault()
const key = this.$addKey.value const publicKey = this.$addKey.value
if (key.length === 0) { if (publicKey.length === 0) {
this.$addKeyError.textContent = '' this.$addKeyError.textContent = ''
return return
} }
if (key.length !== 64) { if (publicKey.length !== 64) {
this.$addKeyError.textContent = 'Key needs to be 64 characters long' this.$addKeyError.textContent = 'Key needs to be 64 characters long'
return return
} }
const sessionId = generateUuid() 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.$addKey.value = ''
this.$addKeyError.textContent = '' this.$addKeyError.textContent = ''
this.renderApps() this.renderApps()
@@ -78,15 +96,15 @@ customElements.define('devtools-inspector', class extends HTMLElement {
return return
} }
const targets = [...this.apps].map(([sessionId]) => ({ const targets = [...this.apps].map(([sessionId, app]) => ({
description: 'node.js instance', // `Pear app: ${app.name}`, 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}`, 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}`, 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', faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico',
id: sessionId, id: sessionId,
title: 'index.js', title: app.title,
type: 'node', type: 'node',
url: `file:///path/to/some/file/index.js`, url: app.url,
webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}` 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 sessionId = request.url.substr(1)
const app = this.apps.get(sessionId) const app = this.apps.get(sessionId)
if (!app) return devtoolsSocket.destroy() if (!app) return devtoolsSocket.destroy()
const { publicKey } = app
const inspectorClient = new Client({ publicKey: Buffer.from(publicKey, 'hex') }) const { publicKey, inspectorSession } = app
inspectorClient.on('message', msg => {
devtoolsSocket.send(JSON.stringify(msg)) 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 => { 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 () { renderApps () {
const content = [...this.apps.values()].map(app => ` const content = [...this.apps.values()].map(app => `
<div> <div>
<div>Title: ${app.title}</div>
<div>URL: ${app.url}</div>
<div>Public key: ${app.publicKey}</div> <div>Public key: ${app.publicKey}</div>
<div>Connected: ${app.connected ? 'Yes' : 'No'}</div>
</div> </div>
`) `)
this.$apps.innerHTML = content this.$apps.innerHTML = content
if (this.apps.size > 0) this.$noApps.remove() 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 // Can't use `uuid` module for some reason as it results in a throw with `crypto` when importing

2
package.json
View File

@@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"bare-path": "^2.1.0", "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", "redhat-overpass-font": "^1.0.0",
"ws": "^8.16.0" "ws": "^8.16.0"
}, },