diff --git a/client.js b/client.js deleted file mode 100644 index 2e9481b..0000000 --- a/client.js +++ /dev/null @@ -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) diff --git a/mod.ts b/mod.ts index d02f762..a0a878e 100755 --- a/mod.ts +++ b/mod.ts @@ -7,7 +7,6 @@ const sockets: Set = 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 ', - '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 { 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) => ` +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),