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({
|
const Args = z.object({
|
||||||
input: z.string().default('./src'),
|
input: z.string().default('./src'),
|
||||||
output: z.string().default('./build'),
|
|
||||||
open: z.boolean().default(false),
|
open: z.boolean().default(false),
|
||||||
server: z.boolean().default(true),
|
server: z.boolean().default(true),
|
||||||
host: z.string().default('localhost'),
|
host: z.string().default('localhost'),
|
||||||
|
@ -31,13 +30,6 @@ const command = new Command()
|
||||||
default: './src',
|
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.', {
|
.option('--open', 'Include this flag to open your browser automatically.', {
|
||||||
default: false,
|
default: false,
|
||||||
})
|
})
|
||||||
|
@ -73,7 +65,7 @@ async function runServer(args: Args): Promise<void> {
|
||||||
|
|
||||||
const url = new URL(req.url)
|
const url = new URL(req.url)
|
||||||
if (url.pathname == '/client.js') {
|
if (url.pathname == '/client.js') {
|
||||||
return new Response(await Deno.readTextFile('./client.js'), {
|
return new Response(clientJs, {
|
||||||
headers: new Headers({
|
headers: new Headers({
|
||||||
'content-type': 'text/javascript;charset=UTF-8',
|
'content-type': 'text/javascript;charset=UTF-8',
|
||||||
}),
|
}),
|
||||||
|
@ -214,6 +206,75 @@ const page = (title: string | null, content: string) =>
|
||||||
</body>
|
</body>
|
||||||
</html>`
|
</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) {
|
async function run(args: Args) {
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
runMermaidFileWatcher(args),
|
runMermaidFileWatcher(args),
|
||||||
|
|
Loading…
Reference in a new issue