Remove output, move client script inline to avoid path issues
This commit is contained in:
parent
02ba16c6b2
commit
e0a750e896
2 changed files with 70 additions and 75 deletions
66
client.js
66
client.js
|
|
@ -1,66 +0,0 @@
|
|||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
|
||||
|
||||
let lastDiagram = ''
|
||||
let rendering = false
|
||||
let theme = 'dark'
|
||||
|
||||
function setTheme(lightMatches) {
|
||||
theme = lightMatches ? 'default' : 'dark'
|
||||
mermaid.initialize({ startOnLoad: true, theme })
|
||||
renderLastDiagram()
|
||||
}
|
||||
if (window.matchMedia) {
|
||||
let lightMatcher = window.matchMedia('(prefers-color-scheme: light)')
|
||||
lightMatcher.addEventListener('change', ({ matches }) => setTheme(matches))
|
||||
setTheme(lightMatcher.matches)
|
||||
}
|
||||
|
||||
let connectionAttempt = 0
|
||||
function connectSocket() {
|
||||
const socket = new WebSocket('ws://localhost:8080')
|
||||
socket.addEventListener('open', () => {
|
||||
socket.send(JSON.stringify({ type: 'open', connectionAttempt }))
|
||||
})
|
||||
socket.addEventListener('close', () => {
|
||||
connectionAttempt += 1
|
||||
setTimeout(() => requestAnimationFrame(connectSocket), 1000)
|
||||
})
|
||||
socket.addEventListener('message', handleMessage)
|
||||
}
|
||||
|
||||
async function handleMessage({ data }) {
|
||||
if (data == 'hi') {
|
||||
console.log('👋')
|
||||
} else if (data == 'reload') {
|
||||
window.location.reload()
|
||||
} else {
|
||||
try {
|
||||
await handleStructuredMessage(JSON.parse(data))
|
||||
} catch (err) {
|
||||
console.error(`failed to process structured websocket message: ${err}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStructuredMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'mermaid': {
|
||||
if (rendering) return
|
||||
rendering = true
|
||||
|
||||
lastDiagram = data.contents
|
||||
await renderLastDiagram()
|
||||
|
||||
rendering = false
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function renderLastDiagram() {
|
||||
if (lastDiagram == '') return
|
||||
document.getElementById('diagram').innerHTML =
|
||||
(await mermaid.render('mermaid', lastDiagram)).svg
|
||||
}
|
||||
|
||||
addEventListener('DOMContentLoaded', connectSocket)
|
||||
79
mod.ts
79
mod.ts
|
|
@ -7,7 +7,6 @@ const sockets: Set<WebSocket> = new Set([])
|
|||
|
||||
const Args = z.object({
|
||||
input: z.string().default('./src'),
|
||||
output: z.string().default('./build'),
|
||||
open: z.boolean().default(false),
|
||||
server: z.boolean().default(true),
|
||||
host: z.string().default('localhost'),
|
||||
|
|
@ -31,13 +30,6 @@ const command = new Command()
|
|||
default: './src',
|
||||
},
|
||||
)
|
||||
.option(
|
||||
'-o, --output <output_directory:path>',
|
||||
'The directory to put compiled .svg files into.',
|
||||
{
|
||||
default: './build',
|
||||
},
|
||||
)
|
||||
.option('--open', 'Include this flag to open your browser automatically.', {
|
||||
default: false,
|
||||
})
|
||||
|
|
@ -73,7 +65,7 @@ async function runServer(args: Args): Promise<void> {
|
|||
|
||||
const url = new URL(req.url)
|
||||
if (url.pathname == '/client.js') {
|
||||
return new Response(await Deno.readTextFile('./client.js'), {
|
||||
return new Response(clientJs, {
|
||||
headers: new Headers({
|
||||
'content-type': 'text/javascript;charset=UTF-8',
|
||||
}),
|
||||
|
|
@ -214,6 +206,75 @@ const page = (title: string | null, content: string) =>
|
|||
</body>
|
||||
</html>`
|
||||
|
||||
const clientJs = `
|
||||
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
|
||||
|
||||
let lastDiagram = ''
|
||||
let rendering = false
|
||||
let theme = 'dark'
|
||||
|
||||
function setTheme(lightMatches) {
|
||||
theme = lightMatches ? 'default' : 'dark'
|
||||
mermaid.initialize({ startOnLoad: true, theme })
|
||||
renderLastDiagram()
|
||||
}
|
||||
if (window.matchMedia) {
|
||||
let lightMatcher = window.matchMedia('(prefers-color-scheme: light)')
|
||||
lightMatcher.addEventListener('change', ({ matches }) => setTheme(matches))
|
||||
setTheme(lightMatcher.matches)
|
||||
}
|
||||
|
||||
let connectionAttempt = 0
|
||||
function connectSocket() {
|
||||
const socket = new WebSocket('ws://localhost:8080')
|
||||
socket.addEventListener('open', () => {
|
||||
socket.send(JSON.stringify({ type: 'open', connectionAttempt }))
|
||||
})
|
||||
socket.addEventListener('close', () => {
|
||||
connectionAttempt += 1
|
||||
setTimeout(() => requestAnimationFrame(connectSocket), 1000)
|
||||
})
|
||||
socket.addEventListener('message', handleMessage)
|
||||
}
|
||||
|
||||
async function handleMessage({ data }) {
|
||||
if (data == 'hi') {
|
||||
console.log('👋')
|
||||
} else if (data == 'reload') {
|
||||
window.location.reload()
|
||||
} else {
|
||||
try {
|
||||
await handleStructuredMessage(JSON.parse(data))
|
||||
} catch (err) {
|
||||
console.error(\`failed to process structured websocket message: \${err}\`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handleStructuredMessage(data) {
|
||||
switch (data.type) {
|
||||
case 'mermaid': {
|
||||
if (rendering) return
|
||||
rendering = true
|
||||
|
||||
lastDiagram = data.contents
|
||||
await renderLastDiagram()
|
||||
|
||||
rendering = false
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function renderLastDiagram() {
|
||||
if (lastDiagram == '') return
|
||||
document.getElementById('diagram').innerHTML =
|
||||
(await mermaid.render('mermaid', lastDiagram)).svg
|
||||
}
|
||||
|
||||
addEventListener('DOMContentLoaded', connectSocket)
|
||||
`
|
||||
|
||||
async function run(args: Args) {
|
||||
await Promise.all([
|
||||
runMermaidFileWatcher(args),
|
||||
|
|
|
|||
Loading…
Reference in a new issue