From 16514abcfdbcae1de1bbc2dd4cb422a44498ee5a Mon Sep 17 00:00:00 2001 From: Puru Vijay Date: Mon, 1 May 2023 03:31:17 +0530 Subject: [PATCH 1/4] Allow preview to be themed --- packages/repl/src/lib/Output/Output.svelte | 12 +- packages/repl/src/lib/Output/ReplProxy.js | 2 +- packages/repl/src/lib/Output/Viewer.svelte | 9 +- .../repl/src/lib/Output/srcdoc/index.html | 115 ++++++++---------- packages/repl/src/lib/Repl.svelte | 4 +- packages/repl/src/routes/+page.svelte | 2 +- 6 files changed, 75 insertions(+), 69 deletions(-) diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte index abf3ed07..13d9bd7c 100644 --- a/packages/repl/src/lib/Output/Output.svelte +++ b/packages/repl/src/lib/Output/Output.svelte @@ -32,6 +32,9 @@ // export let theme; export let showAst = false; + /** @type {'light' | 'dark'} */ + export let previewTheme; + /** * @param {import('$lib/types').File} file * @param {import('svelte/types/compiler').CompileOptions} options @@ -113,7 +116,14 @@
- +
diff --git a/packages/repl/src/lib/Output/ReplProxy.js b/packages/repl/src/lib/Output/ReplProxy.js index 709d8d21..a7a57bcb 100644 --- a/packages/repl/src/lib/Output/ReplProxy.js +++ b/packages/repl/src/lib/Output/ReplProxy.js @@ -14,7 +14,7 @@ export default class ReplProxy { on_console_group: noop, on_console_group_collapsed: noop, on_console_group_end: noop, - on_unhandled_rejection: noop, + on_unhandled_rejection: noop }; /** @type {Map void, reject: (value: any) => void }>} */ diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte index 91e2024a..69039380 100644 --- a/packages/repl/src/lib/Output/Viewer.svelte +++ b/packages/repl/src/lib/Output/Viewer.svelte @@ -25,6 +25,9 @@ export let injectedJS = ''; export let injectedCSS = ''; + /** @type {'light' | 'dark'} */ + export let theme; + /** @type {HTMLIFrameElement} */ let iframe; let pending_imports = 0; @@ -75,7 +78,7 @@ }, on_console_group_collapsed: (action) => { group_logs(action.label, true); - }, + } }); iframe.addEventListener('load', () => { @@ -88,6 +91,8 @@ }; }); + $: if (ready) proxy?.iframe_command('set_theme', { theme }); + /** * @param {import('$lib/types').Bundle | null} $bundle */ @@ -231,7 +236,7 @@ 'allow-pointer-lock', 'allow-top-navigation', 'allow-modals', - relaxed ? 'allow-same-origin' : '', + relaxed ? 'allow-same-origin' : '' ].join(' ')} class={error || pending || pending_imports ? 'greyed-out' : ''} srcdoc={BROWSER ? srcdoc : ''} diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html index 3a9d4a7b..d979e52b 100644 --- a/packages/repl/src/lib/Output/srcdoc/index.html +++ b/packages/repl/src/lib/Output/srcdoc/index.html @@ -2,84 +2,66 @@ @@ -93,6 +75,13 @@ const send_error = (message, stack) => send_reply({ action: 'cmd_error', message, stack }); + if (action === 'set_theme') { + const { theme } = ev.data.args; + + document.body.classList.toggle('dark', theme === 'dark'); + send_ok(); + } + if (action === 'eval') { try { const { script } = ev.data.args; diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte index b62407f8..46a87554 100644 --- a/packages/repl/src/lib/Repl.svelte +++ b/packages/repl/src/lib/Repl.svelte @@ -33,7 +33,8 @@ export let fixedPos = 50; export let injectedJS = ''; export let injectedCSS = ''; - // export let theme = 'svelte'; + /** @type {'light' | 'dark'} */ + export let previewTheme = 'light'; export let showModified = false; export let showAst = false; @@ -196,6 +197,7 @@ {injectedJS} {injectedCSS} {showAst} + {previewTheme} /> diff --git a/packages/repl/src/routes/+page.svelte b/packages/repl/src/routes/+page.svelte index 4de8b35b..9d486bdc 100644 --- a/packages/repl/src/routes/+page.svelte +++ b/packages/repl/src/routes/+page.svelte @@ -28,7 +28,7 @@
- +