@lapikit/repl 0.0.0-insiders.24a3260 → 0.0.0-insiders.7635da2
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/Files.svelte +8 -18
- package/dist/Repl.svelte +71 -40
- package/dist/Toolbar.svelte +19 -3
- package/dist/Toolbar.svelte.d.ts +1 -1
- package/dist/types.d.ts +2 -0
- package/package.json +1 -1
package/dist/Files.svelte
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import type { FilesProps } from './types.js';
|
|
3
3
|
import { dictionaryIcons } from './utils.js';
|
|
4
4
|
|
|
5
|
-
let { files, activeIndex = $bindable() }: FilesProps = $props();
|
|
5
|
+
let { files, activeIndex = $bindable(), modeState, viewState }: FilesProps = $props();
|
|
6
6
|
</script>
|
|
7
7
|
|
|
8
|
-
{#if files && files.length > 1}
|
|
8
|
+
{#if modeState !== 'playground' && viewState === 'code' && files && files.length > 1}
|
|
9
9
|
<div>
|
|
10
10
|
{#each files as file, index (index)}
|
|
11
11
|
<button class:active={activeIndex === index} onclick={() => (activeIndex = index)}>
|
|
@@ -16,8 +16,6 @@
|
|
|
16
16
|
</button>
|
|
17
17
|
{/each}
|
|
18
18
|
</div>
|
|
19
|
-
|
|
20
|
-
<hr />
|
|
21
19
|
{/if}
|
|
22
20
|
|
|
23
21
|
<style>
|
|
@@ -35,11 +33,13 @@
|
|
|
35
33
|
align-items: center;
|
|
36
34
|
gap: calc(var(--repl-spacing) * 2);
|
|
37
35
|
padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
|
|
38
|
-
border-radius: 0.375rem;
|
|
39
36
|
font-size: 0.875rem;
|
|
40
37
|
transition: all 0.2s ease;
|
|
41
|
-
border:
|
|
38
|
+
border: 0;
|
|
42
39
|
white-space: nowrap;
|
|
40
|
+
background-color: transparent;
|
|
41
|
+
border-bottom: 2px solid transparent;
|
|
42
|
+
cursor: pointer;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
button img {
|
|
@@ -48,20 +48,10 @@
|
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
button:hover {
|
|
51
|
-
|
|
51
|
+
border-color: #cfcfcf;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
54
|
button.active {
|
|
55
|
-
|
|
56
|
-
border-color: #d0d0d0;
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
hr {
|
|
60
|
-
max-width: calc(100% - 4.5rem);
|
|
61
|
-
margin-inline-start: calc(4.5rem / 2);
|
|
62
|
-
display: block;
|
|
63
|
-
border: thin solid var(--repl-border-color);
|
|
64
|
-
margin-top: 0;
|
|
65
|
-
margin-bottom: 0;
|
|
55
|
+
border-color: #000000;
|
|
66
56
|
}
|
|
67
57
|
</style>
|
package/dist/Repl.svelte
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
let ref: null | HTMLElement = $state(null);
|
|
14
14
|
|
|
15
15
|
// states
|
|
16
|
-
let language = $state('
|
|
16
|
+
let language = $state('sh');
|
|
17
17
|
|
|
18
18
|
let modeState: 'code' | 'playground' | 'mixed' = $state('code');
|
|
19
19
|
let copyState = $state(false);
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
{
|
|
30
30
|
name: title || 'code',
|
|
31
31
|
content: content.code,
|
|
32
|
-
lang: content.lang || '
|
|
32
|
+
lang: content.lang || 'sh'
|
|
33
33
|
}
|
|
34
34
|
];
|
|
35
35
|
}
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
lang:
|
|
45
45
|
typeof fileContent === 'object'
|
|
46
46
|
? ((fileContent as Record<string, unknown>).lang as string)
|
|
47
|
-
: '
|
|
47
|
+
: 'sh'
|
|
48
48
|
}));
|
|
49
49
|
}
|
|
50
50
|
|
|
@@ -52,11 +52,11 @@
|
|
|
52
52
|
return content.map((item) => ({
|
|
53
53
|
name: item.name,
|
|
54
54
|
content: item.content || item.code || '',
|
|
55
|
-
lang: item.lang || '
|
|
55
|
+
lang: item.lang || 'sh'
|
|
56
56
|
}));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
return [{ name: 'code', content: content || '', lang: '
|
|
59
|
+
return [{ name: 'code', content: content || '', lang: 'sh' }];
|
|
60
60
|
});
|
|
61
61
|
let activeFile = $derived(files[activeFileIndex]);
|
|
62
62
|
|
|
@@ -97,7 +97,7 @@
|
|
|
97
97
|
(async () => {
|
|
98
98
|
const highlighter = await getHighlighterSingleton();
|
|
99
99
|
|
|
100
|
-
language = file.lang || '
|
|
100
|
+
language = file.lang || 'sh';
|
|
101
101
|
const html = highlighter.codeToHtml(file.content, {
|
|
102
102
|
theme: theme === 'light' ? 'github-light' : 'github-dark',
|
|
103
103
|
lang: file.lang || language
|
|
@@ -109,60 +109,76 @@
|
|
|
109
109
|
});
|
|
110
110
|
</script>
|
|
111
111
|
|
|
112
|
-
<div class="repl
|
|
113
|
-
<Toolbar
|
|
114
|
-
{title}
|
|
115
|
-
{language}
|
|
116
|
-
{presentation}
|
|
117
|
-
bind:copyState
|
|
118
|
-
bind:viewState
|
|
119
|
-
bind:themeState
|
|
120
|
-
bind:modeState
|
|
121
|
-
/>
|
|
122
|
-
|
|
123
|
-
{#if modeState !== 'code'}
|
|
124
|
-
<hr />
|
|
125
|
-
{/if}
|
|
126
|
-
|
|
112
|
+
<div class="lpk-repl">
|
|
127
113
|
{#if presentation}
|
|
128
|
-
<div class="repl-content">
|
|
129
|
-
<div
|
|
114
|
+
<div class="repl-content" class:repl-content--playground={presentation}>
|
|
115
|
+
<div
|
|
116
|
+
class="wrapper-playground"
|
|
117
|
+
class:dark={themeState === 'dark'}
|
|
118
|
+
class:light={themeState === 'light'}
|
|
119
|
+
>
|
|
120
|
+
{@render children?.()}
|
|
121
|
+
</div>
|
|
130
122
|
</div>
|
|
131
|
-
|
|
132
|
-
<hr />
|
|
133
123
|
{/if}
|
|
134
124
|
|
|
135
|
-
<
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
125
|
+
<div class="repl-container">
|
|
126
|
+
<Toolbar
|
|
127
|
+
{title}
|
|
128
|
+
{language}
|
|
129
|
+
{presentation}
|
|
130
|
+
bind:copyState
|
|
131
|
+
bind:viewState
|
|
132
|
+
bind:themeState
|
|
133
|
+
bind:modeState
|
|
134
|
+
/>
|
|
135
|
+
|
|
136
|
+
{#if modeState !== 'code'}
|
|
137
|
+
<hr />
|
|
143
138
|
{/if}
|
|
139
|
+
|
|
140
|
+
<Files {files} bind:activeIndex={activeFileIndex} {modeState} {viewState} />
|
|
141
|
+
|
|
142
|
+
<div class="repl-content" class:repl-content--code={viewState === 'code' && !presentation}>
|
|
143
|
+
{#if viewState === 'code'}
|
|
144
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
145
|
+
<div class="wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
|
|
146
|
+
{:else}
|
|
147
|
+
<div
|
|
148
|
+
class="wrapper-playground"
|
|
149
|
+
class:dark={themeState === 'dark'}
|
|
150
|
+
class:light={themeState === 'light'}
|
|
151
|
+
>
|
|
152
|
+
{@render children?.()}
|
|
153
|
+
</div>
|
|
154
|
+
{/if}
|
|
155
|
+
</div>
|
|
144
156
|
</div>
|
|
145
157
|
</div>
|
|
146
158
|
|
|
147
159
|
<style>
|
|
148
|
-
|
|
160
|
+
.lpk-repl {
|
|
161
|
+
/* ui */
|
|
149
162
|
--repl-spacing: 0.25rem;
|
|
150
163
|
--repl-radius: 1rem;
|
|
151
|
-
|
|
164
|
+
|
|
165
|
+
/* shiki override */
|
|
166
|
+
--repl-shiki-size: 0.875rem;
|
|
152
167
|
--repl-shiki-tab-size: 2;
|
|
153
168
|
|
|
169
|
+
/* colors */
|
|
154
170
|
--repl-background: #f9f9f9;
|
|
155
171
|
--repl-border-color: #ebebeb;
|
|
156
|
-
|
|
157
172
|
--repl-primary: #0d0d34;
|
|
158
173
|
--repl-secondary: #8f8f8f;
|
|
159
|
-
|
|
174
|
+
}
|
|
175
|
+
.repl-container {
|
|
160
176
|
background-color: var(--repl-background);
|
|
161
177
|
border-radius: var(--repl-radius);
|
|
162
178
|
border: 2px solid var(--repl-border-color);
|
|
163
179
|
}
|
|
164
180
|
|
|
165
|
-
|
|
181
|
+
.repl-container :global(pre) {
|
|
166
182
|
background-color: var(--repl-background) !important;
|
|
167
183
|
}
|
|
168
184
|
|
|
@@ -176,9 +192,18 @@
|
|
|
176
192
|
position: relative;
|
|
177
193
|
}
|
|
178
194
|
|
|
195
|
+
.repl-content--code {
|
|
196
|
+
padding-top: 0;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.repl-content--playground {
|
|
200
|
+
padding-top: calc(4 * var(--repl-spacing));
|
|
201
|
+
padding-bottom: calc(10 * var(--repl-spacing));
|
|
202
|
+
}
|
|
203
|
+
|
|
179
204
|
hr {
|
|
180
|
-
max-width: calc(100% -
|
|
181
|
-
margin-inline-start: calc(
|
|
205
|
+
max-width: calc(100% - 2.5rem);
|
|
206
|
+
margin-inline-start: calc(2.5rem / 2);
|
|
182
207
|
display: block;
|
|
183
208
|
border: thin solid var(--repl-border-color);
|
|
184
209
|
margin-top: 0;
|
|
@@ -192,4 +217,10 @@
|
|
|
192
217
|
white-space: pre-wrap;
|
|
193
218
|
word-break: break-word;
|
|
194
219
|
}
|
|
220
|
+
|
|
221
|
+
div.repl-container .wrapper-playground {
|
|
222
|
+
background-color: var(--repl-background);
|
|
223
|
+
border-radius: var(--repl-radius);
|
|
224
|
+
padding: calc(4 * var(--repl-spacing));
|
|
225
|
+
}
|
|
195
226
|
</style>
|
package/dist/Toolbar.svelte
CHANGED
|
@@ -20,7 +20,11 @@
|
|
|
20
20
|
</script>
|
|
21
21
|
|
|
22
22
|
<div class="lpk-repl--toolbar">
|
|
23
|
-
<div
|
|
23
|
+
<div
|
|
24
|
+
class="lpk-repl--toolbar-title"
|
|
25
|
+
class:lpk-repl--toolbar-title--language={!title && language}
|
|
26
|
+
class:lpk-repl--toolbar-title--title={title}
|
|
27
|
+
>
|
|
24
28
|
{#if title}
|
|
25
29
|
<span>{title}</span>
|
|
26
30
|
{:else if language}
|
|
@@ -79,12 +83,24 @@
|
|
|
79
83
|
display: flex;
|
|
80
84
|
align-items: center;
|
|
81
85
|
gap: calc(var(--repl-spacing) * 2);
|
|
82
|
-
font-weight: 600;
|
|
83
|
-
color: var(--repl-secondary);
|
|
84
86
|
max-width: 80%;
|
|
85
87
|
min-width: 0;
|
|
86
88
|
}
|
|
87
89
|
|
|
90
|
+
.lpk-repl--toolbar-title--language {
|
|
91
|
+
font-size: 0.875rem;
|
|
92
|
+
line-height: 16px;
|
|
93
|
+
font-weight: 400;
|
|
94
|
+
color: #5d5d5d;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.lpk-repl--toolbar-title--title {
|
|
98
|
+
font-weight: 500;
|
|
99
|
+
font-size: 1rem;
|
|
100
|
+
line-height: 20px;
|
|
101
|
+
color: #8f8f8f;
|
|
102
|
+
}
|
|
103
|
+
|
|
88
104
|
.lpk-repl--toolbar .lpk-repl--toolbar-actions {
|
|
89
105
|
display: flex;
|
|
90
106
|
align-items: center;
|
package/dist/Toolbar.svelte.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { ToolbarProps } from './types.js';
|
|
2
|
-
declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "
|
|
2
|
+
declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "modeState" | "viewState" | "copyState" | "themeState">;
|
|
3
3
|
type Toolbar = ReturnType<typeof Toolbar>;
|
|
4
4
|
export default Toolbar;
|
package/dist/types.d.ts
CHANGED