From 1385a85d661a645a895cfb1c396ca728908eaf74 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:32:05 -0500 Subject: [PATCH 1/6] refactor(#194): client side script as module --- src/routes/viewer.ts | 2 +- static/{client.js => client.mjs} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename static/{client.js => client.mjs} (100%) diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts index 2c4f8df..597a453 100644 --- a/src/routes/viewer.ts +++ b/src/routes/viewer.ts @@ -102,7 +102,7 @@ router.get(/.*/, async (req: Request, res: Response) => { // deprecated method for backward compatibility darkModePreference.addEventListener(() => updateTheme()); - + `); }); diff --git a/static/client.js b/static/client.mjs similarity index 100% rename from static/client.js rename to static/client.mjs From eb1bc83f10fc82905f40656e185c7eb2def1a944 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:33:24 -0500 Subject: [PATCH 2/6] refactor(#194): mermaid in client script file --- src/routes/viewer.ts | 14 -------------- static/client.mjs | 19 +++++++++++++++++++ 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts index 597a453..414653d 100644 --- a/src/routes/viewer.ts +++ b/src/routes/viewer.ts @@ -88,20 +88,6 @@ router.get(/.*/, async (req: Request, res: Response) => { ${config.scripts ? `` : ''} - `); diff --git a/static/client.mjs b/static/client.mjs index a40699d..7a28ac9 100644 --- a/static/client.mjs +++ b/static/client.mjs @@ -1,3 +1,22 @@ +import mermaid from '/static/mermaid/mermaid.esm.min.mjs'; + +const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)'); +mermaid.initialize({ startOnLoad: true, theme: darkModePreference.matches ? 'dark' : 'default' }); + +function updateTheme() { + if (document.getElementsByClassName('mermaid').length > 0) { + window.location.reload(); + } +} +try { + darkModePreference.addEventListener('change', () => updateTheme()); +} catch { + try { + // deprecated method for backward compatibility + darkModePreference.addEventListener(() => updateTheme()); + } catch {} +} + function viv_scrollTo(value) { let line = parseInt(value); while (line) { From f4825dcbf907405029cd45b635f0af4c9e73ac8f Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:35:23 -0500 Subject: [PATCH 3/6] fix(#194): auto-reload mermaid --- static/client.mjs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/static/client.mjs b/static/client.mjs index 7a28ac9..4e73997 100644 --- a/static/client.mjs +++ b/static/client.mjs @@ -43,6 +43,9 @@ ws.addEventListener('message', (event) => { switch (key) { case 'UPDATE': document.getElementById('body-content').innerHTML = value; + (async () => { + await mermaid.run({ querySelector: '.mermaid' }); + })(); break; case 'SCROLL': viv_scrollTo(value); From 86566fc61a3f12e2582a0079cae033bf1d38be02 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:35:53 -0500 Subject: [PATCH 4/6] refactor(#194): scroll method --- static/client.mjs | 28 ++++++++++++---------------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/static/client.mjs b/static/client.mjs index 4e73997..8c28889 100644 --- a/static/client.mjs +++ b/static/client.mjs @@ -17,21 +17,6 @@ try { } catch {} } -function viv_scrollTo(value) { - let line = parseInt(value); - while (line) { - const targets = document.querySelectorAll(`[data-source-line="${line - 1}"]`); - if (targets.length) { - targets[0].scrollIntoView({ - behavior: 'smooth', - block: 'nearest', - }); - break; - } - line -= 1; - } -} - const ws = new WebSocket(`ws://localhost:${window.VIV_PORT}`); ws.addEventListener('message', (event) => { @@ -48,7 +33,18 @@ ws.addEventListener('message', (event) => { })(); break; case 'SCROLL': - viv_scrollTo(value); + let line = parseInt(value); + while (line) { + const targets = document.querySelectorAll(`[data-source-line="${line - 1}"]`); + if (targets.length) { + targets[0].scrollIntoView({ + behavior: 'smooth', + block: 'nearest', + }); + break; + } + line -= 1; + } break; case 'RELOAD': window.location.reload(); From dd58f58874fdc6c8c62c4d8b860fe7b3d69b48e8 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:37:35 -0500 Subject: [PATCH 5/6] chore(#194): readability --- src/routes/viewer.ts | 3 +-- static/client.mjs | 9 +++++++++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/routes/viewer.ts b/src/routes/viewer.ts index 414653d..b53e80a 100644 --- a/src/routes/viewer.ts +++ b/src/routes/viewer.ts @@ -81,13 +81,12 @@ router.get(/.*/, async (req: Request, res: Response) => { ${body} + - ${config.scripts ? `` : ''} - `); diff --git a/static/client.mjs b/static/client.mjs index 8c28889..1235142 100644 --- a/static/client.mjs +++ b/static/client.mjs @@ -1,3 +1,6 @@ +/* -------------------------------------------------------------------------- + * MERMAID ------------------------------------------------------------------ */ + import mermaid from '/static/mermaid/mermaid.esm.min.mjs'; const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)'); @@ -17,6 +20,9 @@ try { } catch {} } +/* -------------------------------------------------------------------------- + * WEBSOCKET COMMUNICATION WITH SERVER -------------------------------------- */ + const ws = new WebSocket(`ws://localhost:${window.VIV_PORT}`); ws.addEventListener('message', (event) => { @@ -32,6 +38,7 @@ ws.addEventListener('message', (event) => { await mermaid.run({ querySelector: '.mermaid' }); })(); break; + case 'SCROLL': let line = parseInt(value); while (line) { @@ -46,9 +53,11 @@ ws.addEventListener('message', (event) => { line -= 1; } break; + case 'RELOAD': window.location.reload(); break; + case 'PRINT': console.log(value); break; From 7d35b0d7e239418644ad6d3888f9e7d430377ea5 Mon Sep 17 00:00:00 2001 From: Jannis Baum Date: Mon, 16 Dec 2024 19:40:34 -0500 Subject: [PATCH 6/6] refactor(#194): async message listener --- static/client.mjs | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/static/client.mjs b/static/client.mjs index 1235142..863ee24 100644 --- a/static/client.mjs +++ b/static/client.mjs @@ -25,7 +25,7 @@ try { const ws = new WebSocket(`ws://localhost:${window.VIV_PORT}`); -ws.addEventListener('message', (event) => { +ws.addEventListener('message', async (event) => { const fields = event.data.toString().split(': '); if (fields.length < 2) return; const [key, ...values] = fields; @@ -34,9 +34,7 @@ ws.addEventListener('message', (event) => { switch (key) { case 'UPDATE': document.getElementById('body-content').innerHTML = value; - (async () => { - await mermaid.run({ querySelector: '.mermaid' }); - })(); + await mermaid.run({ querySelector: '.mermaid' }); break; case 'SCROLL':