mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-18 06:54:22 +01:00
Use @holepunchto@/inspector
This commit is contained in:
Tobias Baunbaek
104
index.html
104
index.html
@@ -1,4 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
@font-face {
|
||||
@@ -7,17 +8,19 @@
|
||||
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;
|
||||
@@ -41,8 +44,6 @@
|
||||
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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user