Skip to content

Commit 4755c1a

Browse files
PuruVJPuruVJ
authored
feat(repl): Allow preview to be themed (#474)
* Allow preview to be themed * Add changeset * Update deps * Simplify cursorPos
1 parent c60f65d commit 4755c1a

File tree

10 files changed

+177
-159
lines changed

10 files changed

+177
-159
lines changed

‎.changeset/great-singers-attack.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/repl': patch
3+
---
4+
5+
Themeable previews

‎packages/repl/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,15 +36,15 @@
3636
"@fontsource/fira-mono": "^4.5.10",
3737
"@playwright/test": "^1.33.0",
3838
"@sveltejs/adapter-auto": "^2.0.1",
39-
"@sveltejs/kit": "^1.15.9",
39+
"@sveltejs/kit": "^1.15.10",
4040
"@sveltejs/package": "^2.0.2",
41-
"@types/marked": "^4.0.8",
41+
"@types/marked": "^4.3.0",
4242
"publint": "^0.1.11",
4343
"svelte": "^3.58.0",
4444
"svelte-check": "^3.2.0",
4545
"tslib": "^2.5.0",
4646
"typescript": "^5.0.4",
47-
"vite": "^4.3.3"
47+
"vite": "^4.3.4"
4848
},
4949
"dependencies": {
5050
"@codemirror/autocomplete": "^6.6.0",
@@ -56,19 +56,19 @@
5656
"@codemirror/language": "^6.6.0",
5757
"@codemirror/lint": "^6.2.1",
5858
"@codemirror/state": "^6.2.0",
59-
"@codemirror/view": "^6.10.0",
59+
"@codemirror/view": "^6.10.1",
6060
"@jridgewell/sourcemap-codec": "^1.4.15",
6161
"@lezer/highlight": "^1.1.4",
62-
"@neocodemirror/svelte": "0.0.5",
62+
"@neocodemirror/svelte": "0.0.8",
6363
"@replit/codemirror-lang-svelte": "^6.0.0",
6464
"@rich_harris/svelte-split-pane": "^1.1.0",
65-
"@rollup/browser": "^3.21.1",
65+
"@rollup/browser": "^3.21.3",
6666
"@sveltejs/site-kit": "5.0.4",
6767
"acorn": "^8.8.2",
6868
"codemirror": "^6.0.1",
6969
"esm-env": "^1.0.0",
7070
"estree-walker": "^3.0.3",
71-
"marked": "^4.3.0",
71+
"marked": "^5.0.0",
7272
"resolve.exports": "^2.0.2",
7373
"svelte-json-tree": "^1.0.0"
7474
},

‎packages/repl/src/lib/CodeMirror.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,9 +69,7 @@
6969
* @param {number} pos
7070
*/
7171
export function setCursor(pos) {
72-
$cmInstance.view?.dispatch({
73-
selection: { anchor: pos, head: pos }
74-
});
72+
cursor_pos = pos;
7573
}
7674
7775
/** @type {(...val: any) => void} */
@@ -180,6 +178,8 @@
180178
/** @type {import('@codemirror/state').Extension[]} */
181179
let extensions = [];
182180
181+
let cursor_pos = 0;
182+
183183
$: {
184184
if ($cmInstance.view) {
185185
fulfil_module_editor_ready();
@@ -232,6 +232,7 @@
232232
tabSize: 2,
233233
theme: svelteTheme,
234234
readonly,
235+
cursorPos: cursor_pos,
235236
lang,
236237
langMap: {
237238
js: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),

‎packages/repl/src/lib/Output/Output.svelte‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,9 @@
3232
// export let theme;
3333
export let showAst = false;
3434
35+
/** @type {'light' | 'dark'} */
36+
export let previewTheme;
37+
3538
/**
3639
* @param {import('$lib/types').File} file
3740
* @param {import('svelte/types/compiler').CompileOptions} options
@@ -113,7 +116,14 @@
113116

114117
<!-- component viewer -->
115118
<div class="tab-content" class:visible={selected_type !== 'md' && view === 'result'}>
116-
<Viewer bind:error={runtimeError} {status} {relaxed} {injectedJS} {injectedCSS} />
119+
<Viewer
120+
bind:error={runtimeError}
121+
{status}
122+
{relaxed}
123+
{injectedJS}
124+
{injectedCSS}
125+
theme={previewTheme}
126+
/>
117127
</div>
118128

119129
<!-- js output -->

‎packages/repl/src/lib/Output/ReplProxy.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default class ReplProxy {
1414
on_console_group: noop,
1515
on_console_group_collapsed: noop,
1616
on_console_group_end: noop,
17-
on_unhandled_rejection: noop,
17+
on_unhandled_rejection: noop
1818
};
1919

2020
/** @type {Map<number, { resolve: (value: any) => void, reject: (value: any) => void }>} */

‎packages/repl/src/lib/Output/Viewer.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@
2525
export let injectedJS = '';
2626
export let injectedCSS = '';
2727
28+
/** @type {'light' | 'dark'} */
29+
export let theme;
30+
2831
/** @type {HTMLIFrameElement} */
2932
let iframe;
3033
let pending_imports = 0;
@@ -75,7 +78,7 @@
7578
},
7679
on_console_group_collapsed: (action) => {
7780
group_logs(action.label, true);
78-
},
81+
}
7982
});
8083
8184
iframe.addEventListener('load', () => {
@@ -88,6 +91,8 @@
8891
};
8992
});
9093
94+
$: if (ready) proxy?.iframe_command('set_theme', { theme });
95+
9196
/**
9297
* @param {import('$lib/types').Bundle | null} $bundle
9398
*/
@@ -231,7 +236,7 @@
231236
'allow-pointer-lock',
232237
'allow-top-navigation',
233238
'allow-modals',
234-
relaxed ? 'allow-same-origin' : '',
239+
relaxed ? 'allow-same-origin' : ''
235240
].join(' ')}
236241
class={error || pending || pending_imports ? 'greyed-out' : ''}
237242
srcdoc={BROWSER ? srcdoc : ''}

‎packages/repl/src/lib/Output/srcdoc/index.html‎

Lines changed: 52 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,84 +2,66 @@
22
<html>
33
<head>
44
<style>
5-
html,
65
body {
7-
position: relative;
8-
width: 100%;
9-
height: 100%;
10-
}
11-
12-
body {
13-
color: #333;
14-
margin: 0;
15-
padding: 8px;
16-
box-sizing: border-box;
17-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
18-
Cantarell, 'Helvetica Neue', sans-serif;
6+
--bg-1: hsl(0, 0%, 100%);
7+
--bg-2: hsl(206, 20%, 90%);
8+
--bg-3: hsl(206, 20%, 80%);
9+
--fg-1: hsl(0, 0%, 13%);
10+
--fg-2: hsl(0, 0%, 20%);
11+
--fg-2: hsl(0, 0%, 30%);
12+
--link: hsl(208, 77%, 47%);
13+
--link-hover: hsl(208, 77%, 55%);
14+
--link-active: hsl(208, 77%, 40%);
15+
--border-radius: 4px;
16+
--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
17+
'Open Sans', 'Helvetica Neue', sans-serif;
18+
--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
19+
'DejaVu Sans Mono', monospace;
20+
color-scheme: light;
21+
background: var(--bg-1);
22+
color: var(--fg-1);
23+
font-family: var(--font);
24+
line-height: 1.5;
25+
margin: 1rem;
26+
height: calc(100vh - 2rem);
27+
accent-color: var(--hover) !important;
1928
}
2029

2130
a {
22-
color: rgb(0, 100, 200);
23-
text-decoration: none;
31+
color: var(--link);
2432
}
2533

2634
a:hover {
27-
text-decoration: underline;
28-
}
29-
30-
a:visited {
31-
color: rgb(0, 80, 160);
35+
color: var(--link-hover);
3236
}
3337

34-
label {
35-
display: block;
38+
a:active {
39+
color: var(--link-active);
3640
}
3741

38-
input,
39-
button,
40-
select,
41-
textarea {
42-
font-family: inherit;
43-
font-size: inherit;
44-
-webkit-padding: 0.4em 0;
45-
padding: 0.4em;
46-
margin: 0 0 0.5em 0;
47-
box-sizing: border-box;
48-
border: 1px solid #ccc;
49-
border-radius: 2px;
42+
code {
43+
background: var(--bg-2);
44+
font-family: var(--font-mono);
45+
font-size: 0.9em;
46+
padding: 0.15rem 0.3rem;
47+
border-radius: var(--border-radius);
5048
}
5149

52-
input[type='range'] {
53-
padding: 0.4em 0;
50+
ul.todos {
51+
padding: 0;
5452
}
5553

56-
input:disabled {
57-
color: #ccc;
58-
}
59-
60-
button {
61-
color: #333;
62-
background-color: #f4f4f4;
63-
outline: none;
64-
}
65-
66-
button:disabled {
67-
color: #999;
68-
}
69-
70-
button:not(:disabled):active {
71-
background-color: #ddd;
72-
}
73-
74-
button:focus {
75-
border-color: #666;
76-
}
77-
78-
@media (prefers-color-scheme: dark) {
79-
body {
80-
background: hsl(0, 0%, 18%);
81-
color: hsl(0, 0%, 90%);
82-
}
54+
body.dark {
55+
color-scheme: dark;
56+
--bg-1: hsl(0, 0%, 18%);
57+
--bg-2: hsl(0, 0%, 30%);
58+
--bg-3: hsl(0, 0%, 40%);
59+
--fg-1: hsl(0, 0%, 90%);
60+
--fg-2: hsl(0, 0%, 70%);
61+
--fg-3: hsl(0, 0%, 60%);
62+
--link: hsl(206, 96%, 72%);
63+
--link-hover: hsl(206, 96%, 78%);
64+
--link-active: hsl(206, 96%, 64%);
8365
}
8466
</style>
8567

@@ -93,6 +75,13 @@
9375
const send_error = (message, stack) =>
9476
send_reply({ action: 'cmd_error', message, stack });
9577

78+
if (action === 'set_theme') {
79+
const { theme } = ev.data.args;
80+
81+
document.body.classList.toggle('dark', theme === 'dark');
82+
send_ok();
83+
}
84+
9685
if (action === 'eval') {
9786
try {
9887
const { script } = ev.data.args;

‎packages/repl/src/lib/Repl.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
export let fixedPos = 50;
3434
export let injectedJS = '';
3535
export let injectedCSS = '';
36-
// export let theme = 'svelte';
36+
/** @type {'light' | 'dark'} */
37+
export let previewTheme = 'light';
3738
export let showModified = false;
3839
export let showAst = false;
3940
@@ -196,6 +197,7 @@
196197
{injectedJS}
197198
{injectedCSS}
198199
{showAst}
200+
{previewTheme}
199201
/>
200202
</section>
201203
</SplitPane>

‎packages/repl/src/routes/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
</script>
2929

3030
<main>
31-
<Repl bind:this={repl} showAst />
31+
<Repl bind:this={repl} previewTheme="dark" />
3232
</main>
3333

3434
<style>

0 commit comments

Comments
 (0)