diff --git a/.changeset/great-singers-attack.md b/.changeset/great-singers-attack.md new file mode 100644 index 00000000..deb75468 --- /dev/null +++ b/.changeset/great-singers-attack.md @@ -0,0 +1,5 @@ +--- +'@sveltejs/repl': patch +--- + +Themeable previews diff --git a/packages/repl/package.json b/packages/repl/package.json index 45e0d3df..f715865b 100644 --- a/packages/repl/package.json +++ b/packages/repl/package.json @@ -36,15 +36,15 @@ "@fontsource/fira-mono": "^4.5.10", "@playwright/test": "^1.33.0", "@sveltejs/adapter-auto": "^2.0.1", - "@sveltejs/kit": "^1.15.9", + "@sveltejs/kit": "^1.15.10", "@sveltejs/package": "^2.0.2", - "@types/marked": "^4.0.8", + "@types/marked": "^4.3.0", "publint": "^0.1.11", "svelte": "^3.58.0", "svelte-check": "^3.2.0", "tslib": "^2.5.0", "typescript": "^5.0.4", - "vite": "^4.3.3" + "vite": "^4.3.4" }, "dependencies": { "@codemirror/autocomplete": "^6.6.0", @@ -56,19 +56,19 @@ "@codemirror/language": "^6.6.0", "@codemirror/lint": "^6.2.1", "@codemirror/state": "^6.2.0", - "@codemirror/view": "^6.10.0", + "@codemirror/view": "^6.10.1", "@jridgewell/sourcemap-codec": "^1.4.15", "@lezer/highlight": "^1.1.4", - "@neocodemirror/svelte": "0.0.5", + "@neocodemirror/svelte": "0.0.8", "@replit/codemirror-lang-svelte": "^6.0.0", "@rich_harris/svelte-split-pane": "^1.1.0", - "@rollup/browser": "^3.21.1", + "@rollup/browser": "^3.21.3", "@sveltejs/site-kit": "5.0.4", "acorn": "^8.8.2", "codemirror": "^6.0.1", "esm-env": "^1.0.0", "estree-walker": "^3.0.3", - "marked": "^4.3.0", + "marked": "^5.0.0", "resolve.exports": "^2.0.2", "svelte-json-tree": "^1.0.0" }, diff --git a/packages/repl/src/lib/CodeMirror.svelte b/packages/repl/src/lib/CodeMirror.svelte index 5d2cd4d1..7b437028 100644 --- a/packages/repl/src/lib/CodeMirror.svelte +++ b/packages/repl/src/lib/CodeMirror.svelte @@ -69,9 +69,7 @@ * @param {number} pos */ export function setCursor(pos) { - $cmInstance.view?.dispatch({ - selection: { anchor: pos, head: pos } - }); + cursor_pos = pos; } /** @type {(...val: any) => void} */ @@ -180,6 +178,8 @@ /** @type {import('@codemirror/state').Extension[]} */ let extensions = []; + let cursor_pos = 0; + $: { if ($cmInstance.view) { fulfil_module_editor_ready(); @@ -232,6 +232,7 @@ tabSize: 2, theme: svelteTheme, readonly, + cursorPos: cursor_pos, lang, langMap: { js: () => import('@codemirror/lang-javascript').then((m) => m.javascript()), 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 @@
- +