@lapikit/repl 0.0.0-insiders.ab4a4aa → 0.0.0-insiders.b0e08d5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Button.svelte +2 -2
- package/dist/Files.svelte +6 -9
- package/dist/Repl.svelte +44 -21
- package/dist/Toolbar.svelte +29 -23
- package/dist/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/Button.svelte
CHANGED
|
@@ -23,8 +23,8 @@
|
|
|
23
23
|
display: flex;
|
|
24
24
|
align-self: center;
|
|
25
25
|
justify-content: center;
|
|
26
|
-
font-size:
|
|
27
|
-
border-radius:
|
|
26
|
+
font-size: var(--kit-repl-shiki-size);
|
|
27
|
+
border-radius: var(--kit-repl-radius);
|
|
28
28
|
transition: background-color 0.2s ease;
|
|
29
29
|
padding: 8px;
|
|
30
30
|
color: var(--kit-repl-secondary);
|
package/dist/Files.svelte
CHANGED
|
@@ -28,19 +28,15 @@
|
|
|
28
28
|
<style>
|
|
29
29
|
div {
|
|
30
30
|
display: flex;
|
|
31
|
-
gap: calc(var(--kit-repl-spacing) * 2);
|
|
32
|
-
padding-left: calc(5 * var(--kit-repl-spacing));
|
|
33
|
-
padding-right: calc(5 * var(--kit-repl-spacing));
|
|
34
|
-
padding-block: calc(var(--kit-repl-spacing) * 2);
|
|
35
31
|
overflow-x: auto;
|
|
36
32
|
}
|
|
37
33
|
|
|
38
34
|
button {
|
|
39
35
|
display: flex;
|
|
40
36
|
align-items: center;
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
font-size:
|
|
37
|
+
padding: 9px 4px;
|
|
38
|
+
gap: var(--kit-repl-spacing);
|
|
39
|
+
font-size: var(--kit-repl-shiki-size);
|
|
44
40
|
transition: all 0.2s ease;
|
|
45
41
|
border: 0;
|
|
46
42
|
white-space: nowrap;
|
|
@@ -55,10 +51,11 @@
|
|
|
55
51
|
}
|
|
56
52
|
|
|
57
53
|
button:hover {
|
|
58
|
-
border-color:
|
|
54
|
+
border-color: var(--kit-color-accent, var(--kit-repl-secondary));
|
|
59
55
|
}
|
|
60
56
|
|
|
61
57
|
button.active {
|
|
62
|
-
border-color:
|
|
58
|
+
border-color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
59
|
+
color: var(--kit-color-accent, var(--kit-repl-primary));
|
|
63
60
|
}
|
|
64
61
|
</style>
|
package/dist/Repl.svelte
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
let viewState: 'code' | 'preview' = $state('code');
|
|
21
21
|
let themeState: 'light' | 'dark' = $state('light');
|
|
22
22
|
|
|
23
|
-
let codeHTML = $state(
|
|
23
|
+
let codeHTML = $state<string | null>(null);
|
|
24
24
|
let activeFileIndex = $state(0);
|
|
25
25
|
|
|
26
26
|
let files = $derived.by<FileItem[]>(() => {
|
|
@@ -91,18 +91,19 @@
|
|
|
91
91
|
|
|
92
92
|
$effect(() => {
|
|
93
93
|
const file = activeFile;
|
|
94
|
-
const theme = themeState;
|
|
94
|
+
// const theme = themeState;
|
|
95
95
|
|
|
96
96
|
if (file?.content) {
|
|
97
|
+
codeHTML = null;
|
|
98
|
+
language = file.lang || 'sh';
|
|
99
|
+
|
|
97
100
|
(async () => {
|
|
98
101
|
const highlighter = await getHighlighterSingleton();
|
|
99
|
-
|
|
100
|
-
language = file.lang || 'sh';
|
|
101
102
|
const html = highlighter.codeToHtml(file.content, {
|
|
102
|
-
theme: theme === 'light' ? 'github-light' : 'github-dark',
|
|
103
|
+
// theme: theme === 'light' ? 'github-light' : 'github-dark',
|
|
104
|
+
theme: 'github-light',
|
|
103
105
|
lang: file.lang || language
|
|
104
106
|
});
|
|
105
|
-
|
|
106
107
|
codeHTML = html;
|
|
107
108
|
})();
|
|
108
109
|
}
|
|
@@ -127,25 +128,36 @@
|
|
|
127
128
|
{title}
|
|
128
129
|
{language}
|
|
129
130
|
{presentation}
|
|
131
|
+
{files}
|
|
130
132
|
bind:copyState
|
|
131
133
|
bind:viewState
|
|
132
134
|
bind:themeState
|
|
133
135
|
bind:modeState
|
|
134
|
-
|
|
136
|
+
>
|
|
137
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
138
|
+
</Toolbar>
|
|
135
139
|
|
|
136
140
|
{#if modeState !== 'code'}
|
|
137
141
|
<hr />
|
|
138
142
|
{/if}
|
|
139
143
|
|
|
140
|
-
|
|
144
|
+
{#if title}
|
|
145
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
146
|
+
{/if}
|
|
141
147
|
|
|
142
148
|
<div
|
|
143
149
|
class="kit-repl-content"
|
|
144
150
|
class:kit-repl-content--code={viewState === 'code' && !presentation}
|
|
145
151
|
>
|
|
146
152
|
{#if viewState === 'code'}
|
|
147
|
-
|
|
148
|
-
|
|
153
|
+
<div class="kit-repl-wrapper-highlight" bind:this={ref}>
|
|
154
|
+
{#if codeHTML !== null}
|
|
155
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
156
|
+
{@html codeHTML}
|
|
157
|
+
{:else}
|
|
158
|
+
<pre class="kit-repl-raw"><code>{activeFile?.content ?? ''}</code></pre>
|
|
159
|
+
{/if}
|
|
160
|
+
</div>
|
|
149
161
|
{:else}
|
|
150
162
|
<div
|
|
151
163
|
class="kit-repl-wrapper-playground"
|
|
@@ -162,23 +174,23 @@
|
|
|
162
174
|
<style>
|
|
163
175
|
.kit-repl {
|
|
164
176
|
/* ui */
|
|
165
|
-
--kit-repl-spacing:
|
|
166
|
-
--kit-repl-radius:
|
|
177
|
+
--kit-repl-spacing: var(--kit-space-default, 4px);
|
|
178
|
+
--kit-repl-radius: var(--kit-shape-md, 10px);
|
|
167
179
|
|
|
168
180
|
/* shiki override */
|
|
169
|
-
--kit-repl-shiki-size:
|
|
181
|
+
--kit-repl-shiki-size: var(--kit-font-xs, 13px);
|
|
170
182
|
--kit-repl-shiki-tab-size: 2;
|
|
171
183
|
|
|
172
184
|
/* colors */
|
|
173
|
-
--kit-repl-background: #f9f9f9;
|
|
174
|
-
--kit-repl-border-color: #ebebeb;
|
|
175
|
-
--kit-repl-primary: #0d0d34;
|
|
176
|
-
--kit-repl-secondary: #8f8f8f;
|
|
185
|
+
--kit-repl-background: var(--kit-color-surface-1, #f9f9f9);
|
|
186
|
+
--kit-repl-border-color: var(--kit-color-fill, #ebebeb);
|
|
187
|
+
--kit-repl-primary: var(--kit-color-text, #0d0d34);
|
|
188
|
+
--kit-repl-secondary: var(--kit-color-text-muted, #8f8f8f);
|
|
177
189
|
}
|
|
178
190
|
.kit-repl-container {
|
|
179
191
|
background-color: var(--kit-repl-background);
|
|
180
192
|
border-radius: var(--kit-repl-radius);
|
|
181
|
-
border:
|
|
193
|
+
border: 1px solid var(--kit-repl-border-color);
|
|
182
194
|
}
|
|
183
195
|
|
|
184
196
|
.kit-repl-container :global(pre) {
|
|
@@ -187,11 +199,12 @@
|
|
|
187
199
|
|
|
188
200
|
.kit-repl-content {
|
|
189
201
|
display: flow-root;
|
|
190
|
-
|
|
191
|
-
|
|
202
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
203
|
+
/* margin-top: calc(var(--kit-repl-spacing) * 0); */
|
|
204
|
+
/* padding-right: calc(10 * var(--kit-repl-spacing));
|
|
192
205
|
padding-left: calc(5 * var(--kit-repl-spacing));
|
|
193
206
|
padding-bottom: calc(4 * var(--kit-repl-spacing));
|
|
194
|
-
padding-top: calc(3 * var(--kit-repl-spacing));
|
|
207
|
+
padding-top: calc(3 * var(--kit-repl-spacing)); */
|
|
195
208
|
position: relative;
|
|
196
209
|
}
|
|
197
210
|
|
|
@@ -213,6 +226,16 @@
|
|
|
213
226
|
margin-bottom: 0;
|
|
214
227
|
}
|
|
215
228
|
|
|
229
|
+
.kit-repl-raw {
|
|
230
|
+
font-size: var(--kit-repl-shiki-size);
|
|
231
|
+
-moz-tab-size: var(--kit-repl-shiki-tab-size);
|
|
232
|
+
tab-size: var(--kit-repl-shiki-tab-size);
|
|
233
|
+
white-space: pre-wrap;
|
|
234
|
+
word-break: break-word;
|
|
235
|
+
margin: 0;
|
|
236
|
+
padding: 0;
|
|
237
|
+
}
|
|
238
|
+
|
|
216
239
|
div.kit-repl-container .kit-repl-wrapper-highlight :global(pre code) {
|
|
217
240
|
font-size: var(--kit-repl-shiki-size);
|
|
218
241
|
-moz-tab-size: var(--kit-repl-shiki-tab-size);
|
package/dist/Toolbar.svelte
CHANGED
|
@@ -5,9 +5,11 @@
|
|
|
5
5
|
import { Copy, Check, Code, Codesandbox, Moon, Sun } from '@lucide/svelte';
|
|
6
6
|
|
|
7
7
|
let {
|
|
8
|
+
children,
|
|
8
9
|
title,
|
|
9
10
|
language,
|
|
10
11
|
presentation,
|
|
12
|
+
files,
|
|
11
13
|
copyState = $bindable(),
|
|
12
14
|
viewState = $bindable(),
|
|
13
15
|
themeState = $bindable(),
|
|
@@ -20,17 +22,19 @@
|
|
|
20
22
|
</script>
|
|
21
23
|
|
|
22
24
|
<div class="kit-repl--toolbar">
|
|
23
|
-
|
|
24
|
-
class="kit-repl--toolbar-title"
|
|
25
|
-
class:kit-repl--toolbar-title--language={!title && language}
|
|
26
|
-
class:kit-repl--toolbar-title--title={title}
|
|
27
|
-
>
|
|
28
|
-
{#if title}
|
|
25
|
+
{#if title}
|
|
26
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--title={title}>
|
|
29
27
|
<span>{title}</span>
|
|
30
|
-
|
|
28
|
+
</div>
|
|
29
|
+
{:else if files && files.length > 1}
|
|
30
|
+
<div class="kit-repl--toolbar-files">
|
|
31
|
+
{@render children?.()}
|
|
32
|
+
</div>
|
|
33
|
+
{:else if language}
|
|
34
|
+
<div class="kit-repl--toolbar-title" class:kit-repl--toolbar-title--language={language}>
|
|
31
35
|
<span>{languageKey}</span>
|
|
32
|
-
|
|
33
|
-
|
|
36
|
+
</div>
|
|
37
|
+
{/if}
|
|
34
38
|
|
|
35
39
|
<div class="kit-repl--toolbar-actions">
|
|
36
40
|
{#if (modeState !== 'code' && viewState === 'preview') || presentation}
|
|
@@ -78,15 +82,14 @@
|
|
|
78
82
|
|
|
79
83
|
<style>
|
|
80
84
|
.kit-repl--toolbar {
|
|
81
|
-
display:
|
|
85
|
+
display: grid;
|
|
82
86
|
align-items: center;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
padding-right: calc(var(--kit-repl-spacing) * 2);
|
|
87
|
-
padding-block: calc(var(--kit-repl-spacing) * 1.5);
|
|
87
|
+
grid-template-columns: 1fr auto;
|
|
88
|
+
padding-left: calc(var(--kit-repl-spacing) * 2);
|
|
89
|
+
background-color: color-mix(in oklab, var(--kit-repl-background) 95%, black);
|
|
88
90
|
border-top-left-radius: var(--kit-repl-radius);
|
|
89
91
|
border-top-right-radius: var(--kit-repl-radius);
|
|
92
|
+
gap: var(--kit-repl-spacing);
|
|
90
93
|
min-height: 36px;
|
|
91
94
|
}
|
|
92
95
|
|
|
@@ -99,17 +102,15 @@
|
|
|
99
102
|
}
|
|
100
103
|
|
|
101
104
|
.kit-repl--toolbar-title--language {
|
|
102
|
-
font-size:
|
|
103
|
-
line-height:
|
|
104
|
-
|
|
105
|
-
color: #5d5d5d;
|
|
105
|
+
font-size: var(--kit-repl-shiki-size);
|
|
106
|
+
line-height: 1;
|
|
107
|
+
color: var(--kit-color-text-muted);
|
|
106
108
|
}
|
|
107
109
|
|
|
108
110
|
.kit-repl--toolbar-title--title {
|
|
109
|
-
font-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
color: #8f8f8f;
|
|
111
|
+
font-size: var(--kit-repl-shiki-size);
|
|
112
|
+
line-height: 1;
|
|
113
|
+
color: var(--kit-color-text-muted);
|
|
113
114
|
}
|
|
114
115
|
|
|
115
116
|
.kit-repl--toolbar .kit-repl--toolbar-actions {
|
|
@@ -117,4 +118,9 @@
|
|
|
117
118
|
align-items: center;
|
|
118
119
|
gap: calc(var(--kit-repl-spacing) * 2);
|
|
119
120
|
}
|
|
121
|
+
|
|
122
|
+
.kit-repl--toolbar .kit-repl--toolbar-files {
|
|
123
|
+
width: 100%;
|
|
124
|
+
overflow-x: auto;
|
|
125
|
+
}
|
|
120
126
|
</style>
|
package/dist/types.d.ts
CHANGED