Do not use $

This commit is contained in:
Tobias Baunbaek
2024-01-26 18:05:39 +01:00
parent 525f97dfe5
commit 3cbd6212c3

View File

@@ -10,7 +10,7 @@ customElements.define('devtools-inspector', class extends HTMLElement {
this.template.innerHTML = `
<div>
<style>
#add-key {
#add-key-input {
width: 100%;
}
@@ -30,7 +30,7 @@ customElements.define('devtools-inspector', class extends HTMLElement {
</ol>
<div>
<form id="add-key-form">
<input id="add-key" type="text" placeholder="Id given when running pear with --inspect"/>
<input id="add-key-input" type="text" placeholder="Id given when running pear with --inspect"/>
<p id="add-key-error"></p>
</form>
</div>
@@ -41,22 +41,22 @@ customElements.define('devtools-inspector', class extends HTMLElement {
this.root = this.attachShadow({ mode: 'open' })
this.root.appendChild(this.template.content.cloneNode(true))
this.$addKeyForm = this.root.querySelector('#add-key-form')
this.$addKey = this.root.querySelector('#add-key')
this.$addKeyError = this.root.querySelector('#add-key-error')
this.$apps = this.root.querySelector('#apps')
this.$noApps = this.root.querySelector('#no-apps')
this.addKeyFormElem = this.root.querySelector('#add-key-form')
this.addKeyInputElem = this.root.querySelector('#add-key-input')
this.addKeyErrorElem = this.root.querySelector('#add-key-error')
this.appsElem = this.root.querySelector('#apps')
this.noAppsElem = this.root.querySelector('#no-apps')
this.apps = new Map()
this.$addKeyForm.addEventListener('submit', e => {
this.addKeyFormElem.addEventListener('submit', e => {
e.preventDefault()
const publicKey = this.$addKey.value
const publicKey = this.addKeyInputElem.value
if (publicKey.length === 0) {
this.$addKeyError.textContent = ''
this.addKeyErrorElem.textContent = ''
return
}
if (publicKey.length !== 64) {
this.$addKeyError.textContent = 'Key needs to be 64 characters long'
this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
return
}
@@ -80,16 +80,16 @@ customElements.define('devtools-inspector', class extends HTMLElement {
this.renderApps()
})
this.$addKey.value = ''
this.$addKeyError.textContent = ''
this.addKeyInputElem.value = ''
this.addKeyErrorElem.textContent = ''
this.renderApps()
})
const httpServer = http.createServer()
const wsServer = new WebSocketServer({ noServer: true })
const devtoolsHttpServer = http.createServer()
const devToolsWsServer = new WebSocketServer({ noServer: true })
httpServer.listen(9229, () => console.log('[httpServer] running on port 9229'))
httpServer.on('request', (req, res) => {
devtoolsHttpServer.listen(9229, () => console.log('[devtoolsHttpServer] running on port 9229'))
devtoolsHttpServer.on('request', (req, res) => {
if (req.url !== '/json/list') {
res.writeHead(404)
res.end()
@@ -104,7 +104,7 @@ customElements.define('devtools-inspector', class extends HTMLElement {
id: sessionId,
title: app.title,
type: 'node',
url: app.url,
url: `file://${app.url}`,
webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}`
}))
@@ -115,16 +115,16 @@ customElements.define('devtools-inspector', class extends HTMLElement {
})
res.end(JSON.stringify(targets))
})
httpServer.on('upgrade', (request, socket, head) => {
console.log(`[httpServer] UPGRADE. url=${request.url}`)
devtoolsHttpServer.on('upgrade', (request, socket, head) => {
console.log(`[devtoolsHttpServer] UPGRADE. url=${request.url}`)
const sessionId = request.url.substr(1)
const sessionIdExists = this.apps.has(sessionId)
if (!sessionIdExists) return socket.destroy()
wsServer.handleUpgrade(request, socket, head, ws => wsServer.emit('connection', ws, request))
devToolsWsServer.handleUpgrade(request, socket, head, ws => devToolsWsServer.emit('connection', ws, request))
})
wsServer.on('connection', (devtoolsSocket, request) => {
devToolsWsServer.on('connection', (devtoolsSocket, request) => {
const sessionId = request.url.substr(1)
const app = this.apps.get(sessionId)
if (!app) return devtoolsSocket.destroy()
@@ -161,9 +161,9 @@ customElements.define('devtools-inspector', class extends HTMLElement {
<div>Connected: ${app.connected ? 'Yes' : 'No'}</div>
</div>
`)
this.$apps.innerHTML = content
this.appsElem.innerHTML = content
if (this.apps.size > 0) this.$noApps.remove()
if (this.apps.size > 0) this.noAppsElem.remove()
}
load () {