Skip to content

Commit 4dd85b9

Browse files
PuruVJPuruVJ
authored
fix(repl): Compat with latest site-kit (#464)
* Push * Rely on esm-env * Bump sute-kit * Add changeset
1 parent 79e9b38 commit 4dd85b9

25 files changed

+108
-101
lines changed

‎.changeset/fair-kangaroos-vanish.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@sveltejs/repl': minor
3+
---
4+
5+
Compat with site-kit 5

‎packages/repl/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
},
1313
"devDependencies": {
1414
"@sveltejs/adapter-auto": "^2.0.0",
15-
"@sveltejs/kit": "^1.15.5",
15+
"@sveltejs/kit": "^1.15.6",
1616
"@sveltejs/package": "^2.0.2",
1717
"eslint": "^8.38.0",
1818
"eslint-config-prettier": "^8.8.0",
@@ -29,8 +29,8 @@
2929
"svelte": "^3.50.0"
3030
},
3131
"dependencies": {
32-
"@rollup/browser": "^3.20.2",
33-
"@sveltejs/site-kit": "4.1.1",
32+
"@rollup/browser": "^3.20.4",
33+
"@sveltejs/site-kit": "5.0.1",
3434
"acorn": "^8.8.2",
3535
"codemirror": "5.65.12",
3636
"esm-env": "^1.0.0",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@
3030
border-radius: 1em;
3131
top: 0;
3232
left: 0;
33-
background: var(--second);
33+
background: var(--sk-theme-2);
3434
/* box-sizing: border-box; */
3535
box-sizing: content-box;
3636
}
3737
3838
input[type='checkbox']:checked::before {
39-
background: var(--prime);
39+
background: var(--sk-theme-1);
4040
}
4141
4242
input[type='checkbox']::after {

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@
254254
255255
.codemirror-container :global(.CodeMirror) {
256256
height: 100%;
257-
font: 400 var(--code-fs) / 1.7 var(--font-mono);
257+
font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
258258
}
259259
260260
.codemirror-container :global(.error-loc) {
@@ -267,7 +267,7 @@
267267
}
268268
269269
.codemirror-container :global(.mark-text) {
270-
background-color: var(--highlight);
270+
background-color: var(--sk-selection-color);
271271
}
272272
273273
textarea {
@@ -283,7 +283,7 @@
283283
border: none;
284284
padding: 4px 4px 4px 60px;
285285
resize: none;
286-
font-family: var(--font-mono);
286+
font-family: var(--sk-font-mono);
287287
font-size: 13px;
288288
line-height: 1.7;
289289
user-select: none;

‎packages/repl/src/lib/Input/ComponentSelector.svelte‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@
137137
id={component.name}
138138
class="button"
139139
role="button"
140+
tabindex="0"
140141
class:active={component === $selected}
141142
class:draggable={component !== editing && index !== 0}
142143
class:drag-over={over === component.name}

‎packages/repl/src/lib/Input/ModuleEditor.svelte‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,26 @@
3535
}
3636
</script>
3737

38+
<div class="editor-wrapper">
39+
<div class="editor notranslate" translate="no">
40+
<CodeMirror bind:this={editor} {errorLoc} {theme} on:change={handle_change} />
41+
</div>
42+
43+
<div class="info">
44+
{#if error}
45+
<Message kind="error" details={error} filename="{$selected.name}.{$selected.type}" />
46+
{:else if warnings.length > 0}
47+
{#each warnings as warning}
48+
<Message kind="warning" details={warning} filename="{$selected.name}.{$selected.type}" />
49+
{/each}
50+
{/if}
51+
</div>
52+
</div>
53+
3854
<style>
3955
.editor-wrapper {
4056
z-index: 5;
41-
background: var(--back-light);
57+
background: var(--sk-back-3);
4258
display: flex;
4359
flex-direction: column;
4460
}
@@ -49,7 +65,7 @@
4965
}
5066
5167
.info {
52-
background-color: var(--second);
68+
background-color: var(--sk-theme-2);
5369
max-height: 50%;
5470
overflow: auto;
5571
}
@@ -61,24 +77,3 @@
6177
/* height: 100%; */
6278
}
6379
</style>
64-
65-
<div class="editor-wrapper">
66-
<div class="editor notranslate" translate="no">
67-
<CodeMirror
68-
bind:this={editor}
69-
{errorLoc}
70-
{theme}
71-
on:change={handle_change}
72-
/>
73-
</div>
74-
75-
<div class="info">
76-
{#if error}
77-
<Message kind="error" details={error} filename="{$selected.name}.{$selected.type}"/>
78-
{:else if warnings.length > 0}
79-
{#each warnings as warning}
80-
<Message kind="warning" details={warning} filename="{$selected.name}.{$selected.type}"/>
81-
{/each}
82-
{/if}
83-
</div>
84-
</div>

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

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,15 @@
11
<script>
22
export let checked;
3-
import Checkbox from './Checkbox.svelte'
3+
import Checkbox from './Checkbox.svelte';
44
</script>
55

6+
<!-- svelte-ignore a11y-label-has-associated-control -->
7+
<label class="input-output-toggle">
8+
<span class:active={!checked} style="text-align: right">input</span>
9+
<Checkbox bind:checked />
10+
<span class:active={checked}>output</span>
11+
</label>
12+
613
<style>
714
.input-output-toggle {
815
position: relative;
@@ -14,17 +21,14 @@
1421
align-items: center;
1522
width: 100%;
1623
height: 42px;
17-
border-top: 1px solid var(--second);
24+
border-top: 1px solid var(--sk-theme-2);
1825
z-index: 2;
1926
}
2027
21-
span { color: #ccc }
22-
.active { color: #555 }
28+
span {
29+
color: #ccc;
30+
}
31+
.active {
32+
color: #555;
33+
}
2334
</style>
24-
25-
<!-- svelte-ignore a11y-label-has-associated-control -->
26-
<label class="input-output-toggle">
27-
<span class:active={!checked} style="text-align: right">input</span>
28-
<Checkbox bind:checked />
29-
<span class:active={checked}>output</span>
30-
</label>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
position: relative;
4444
color: white;
4545
padding: 12px 16px 12px 44px;
46-
font: 400 12px/1.7 var(--font);
46+
font: 400 12px/1.7 var(--sk-font);
4747
margin: 0;
4848
border-top: 1px solid white;
4949
}
@@ -89,6 +89,6 @@
8989
}
9090
9191
.info {
92-
background-color: var(--second);
92+
background-color: var(--sk-theme-2);
9393
}
9494
</style>

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
}
9797
9898
.marked {
99-
background-color: var(--highlight);
99+
background-color: var(--sk-highlight-color);
100100
}
101101
102102
.preview {
@@ -125,14 +125,14 @@
125125
}
126126
127127
.token {
128-
color: var(--base);
128+
color: var(--sk-code-base);
129129
}
130130
131131
.token.string {
132-
color: var(--string);
132+
color: var(--sk-code-string);
133133
}
134134
135135
.token.number {
136-
color: var(--number);
136+
color: var(--sk-code-number);
137137
}
138138
</style>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@
6969
--base: hsl(45, 7%, 45%);
7070
--string: hsl(41, 37%, 45%);
7171
--number: hsl(102, 27%, 50%);
72-
background: var(--back-light);
73-
color: var(--base);
72+
background: var(--sk-back-3);
73+
color: var(--sk-code-base);
7474
display: flex;
7575
flex-direction: column;
7676
}
@@ -80,7 +80,7 @@
8080
code {
8181
height: 100%;
8282
block-size: 100%;
83-
font: 400 var(--code-fs) / 1.7 var(--font-mono);
83+
font: 400 var(--sk-text-xs) / 1.7 var(--sk-font-mono);
8484
}
8585
8686
pre {

0 commit comments

Comments
 (0)