@lapikit/repl 0.0.2 → 0.0.4

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.
Files changed (11) hide show
  1. package/README.md +92 -0
  2. package/dist/Button.svelte +13 -4
  3. package/dist/Button.svelte.d.ts +6 -2
  4. package/dist/Files.svelte +23 -26
  5. package/dist/Repl.svelte +97 -63
  6. package/dist/Toolbar.svelte +46 -19
  7. package/dist/Toolbar.svelte.d.ts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/types.d.ts +2 -0
  11. package/package.json +2 -2
package/README.md CHANGED
@@ -1 +1,93 @@
1
1
  # @Lapikit/repl
2
+
3
+ @lapikit/repl is a Svelte component for Lapikit. It's a add-on package for Lapikit library.
4
+
5
+
6
+ ## Installation
7
+
8
+ ```bash
9
+ npm install -D @lapikit/repl
10
+ ```
11
+
12
+
13
+ ```javascript
14
+ // svelte.config.js
15
+
16
+ import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
17
+
18
+ const config = {
19
+ preprocess: [vitePreprocess(), lapikitPreprocess({ plugins: ['repl'] })],
20
+
21
+ ...
22
+ };
23
+
24
+ export default config;
25
+ ```
26
+
27
+ ## Usage
28
+
29
+ ```svelte
30
+ <kit:repl content="console.log('hello')" />
31
+ ```
32
+
33
+
34
+ ```svelte
35
+ <script lang="ts">
36
+ import sampleCounter from './samples/counter.svelte?raw';
37
+ import Counter from './samples/counter.svelte';
38
+ </script>
39
+
40
+ <kit:repl presentation content={sampleCounter}>
41
+ <Counter />
42
+ </kit:repl>
43
+ ```
44
+
45
+
46
+ ```svelte
47
+ <script lang="ts">
48
+ import sampleJson from './samples/json.json?raw';
49
+ import sampleCounter from './samples/counter.svelte?raw';
50
+ import sampleCss from './samples/css.css?raw';
51
+ import Counter from './samples/counter.svelte';
52
+ </script>
53
+
54
+ <kit:repl
55
+ presentation
56
+ content={{
57
+ 'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
58
+ 'file.json': { code: sampleJson, lang: 'json' },
59
+ 'Styles.css': { code: sampleCss, lang: 'css' },
60
+ }}
61
+ >
62
+ <Counter />
63
+ </kit:repl>
64
+ ```
65
+
66
+
67
+ ```svelte
68
+ <script lang="ts">
69
+ import sampleJson from './samples/json.json?raw';
70
+ import sampleCounter from './samples/counter.svelte?raw';
71
+ import sampleCss from './samples/css.css?raw';
72
+ import Counter from './samples/counter.svelte';
73
+ </script>
74
+
75
+ <kit:repl
76
+ content={{
77
+ 'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
78
+ 'file.json': { code: sampleJson, lang: 'json' },
79
+ 'Styles.css': { code: sampleCss, lang: 'css' },
80
+ }}
81
+ >
82
+ <Counter />
83
+ </kit:repl>
84
+ ```
85
+
86
+
87
+ ## Props
88
+
89
+ | Prop | Type | Default | Description |
90
+ | ----------- | --------------------------- | --------- | ------------------------------------------------------------ |
91
+ | content | string \| Record<string, { code: string; lang?: string }> | '' | The code content to be displayed in the REPL. It can be a single string or an object representing multiple files. |
92
+ | presentation | boolean | false | If true, the REPL will be in presentation mode, showing only the output without the code editor. |
93
+ | tiltle | string | '' | The title displayed on the REPL toolbar. |
package/dist/Button.svelte CHANGED
@@ -1,8 +1,17 @@
1
1
  <script lang="ts">
2
- let { children, ...rest } = $props();
2
+ import type { Snippet } from 'svelte';
3
+
4
+ let { children, type = 'button', disabled = false, ...rest }: PropsTypeButton = $props();
5
+
6
+ type PropsTypeButton = {
7
+ children?: Snippet;
8
+ type?: 'button' | 'submit' | 'reset';
9
+ disabled?: boolean;
10
+ [rest: string]: unknown;
11
+ };
3
12
  </script>
4
13
 
5
- <button {...rest}>
14
+ <button {type} {disabled} {...rest}>
6
15
  {@render children?.()}
7
16
  </button>
8
17
 
@@ -18,11 +27,11 @@
18
27
  border-radius: 0.375rem;
19
28
  transition: background-color 0.2s ease;
20
29
  padding: 8px;
21
- color: var(--repl-secondary);
30
+ color: var(--kit-repl-secondary);
22
31
  }
23
32
 
24
33
  button:hover {
25
- color: var(--repl-primary);
34
+ color: var(--kit-repl-primary);
26
35
  }
27
36
 
28
37
  button :global(svg) {
package/dist/Button.svelte.d.ts CHANGED
@@ -1,5 +1,9 @@
1
+ import type { Snippet } from 'svelte';
1
2
  declare const Button: import("svelte").Component<{
2
- children: any;
3
- } & Record<string, any>, {}, "">;
3
+ [rest: string]: unknown;
4
+ children?: Snippet;
5
+ type?: "button" | "submit" | "reset";
6
+ disabled?: boolean;
7
+ }, {}, "">;
4
8
  type Button = ReturnType<typeof Button>;
5
9
  export default Button;
package/dist/Files.svelte CHANGED
@@ -2,13 +2,20 @@
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}
9
- <div>
8
+ {#if modeState !== 'playground' && viewState === 'code' && files && files.length > 1}
9
+ <div role="tablist" aria-label="Files">
10
10
  {#each files as file, index (index)}
11
- <button class:active={activeIndex === index} onclick={() => (activeIndex = index)}>
11
+ <button
12
+ type="button"
13
+ role="tab"
14
+ aria-selected={activeIndex === index}
15
+ aria-label="Select {file.name}"
16
+ class:active={activeIndex === index}
17
+ onclick={() => (activeIndex = index)}
18
+ >
12
19
  {#if file.lang && dictionaryIcons[file.lang]}
13
20
  <img src={dictionaryIcons[file.lang]} alt="{file.lang} icon" />
14
21
  {/if}
@@ -16,30 +23,30 @@
16
23
  </button>
17
24
  {/each}
18
25
  </div>
19
-
20
- <hr />
21
26
  {/if}
22
27
 
23
28
  <style>
24
29
  div {
25
30
  display: flex;
26
- gap: calc(var(--repl-spacing) * 2);
27
- padding-left: calc(5 * var(--repl-spacing));
28
- padding-right: calc(5 * var(--repl-spacing));
29
- padding-block: calc(var(--repl-spacing) * 2);
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);
30
35
  overflow-x: auto;
31
36
  }
32
37
 
33
38
  button {
34
39
  display: flex;
35
40
  align-items: center;
36
- gap: calc(var(--repl-spacing) * 2);
37
- padding: calc(var(--repl-spacing) * 2) calc(var(--repl-spacing) * 3);
38
- border-radius: 0.375rem;
41
+ gap: calc(var(--kit-repl-spacing) * 2);
42
+ padding: calc(var(--kit-repl-spacing) * 2) calc(var(--kit-repl-spacing) * 3);
39
43
  font-size: 0.875rem;
40
44
  transition: all 0.2s ease;
41
- border: 1px solid transparent;
45
+ border: 0;
42
46
  white-space: nowrap;
47
+ background-color: transparent;
48
+ border-bottom: 2px solid transparent;
49
+ cursor: pointer;
43
50
  }
44
51
 
45
52
  button img {
@@ -48,20 +55,10 @@
48
55
  }
49
56
 
50
57
  button:hover {
51
- background-color: #f5f5f5;
58
+ border-color: #cfcfcf;
52
59
  }
53
60
 
54
61
  button.active {
55
- background-color: #f0f0f0;
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;
62
+ border-color: #000000;
66
63
  }
67
64
  </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('javascript');
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 || 'javascript'
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
- : 'javascript'
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 || 'javascript'
55
+ lang: item.lang || 'sh'
56
56
  }));
57
57
  }
58
58
 
59
- return [{ name: 'code', content: content || '', lang: 'javascript' }];
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 || 'javascript';
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,87 +109,121 @@
109
109
  });
110
110
  </script>
111
111
 
112
- <div class="repl-container">
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="kit-repl">
127
113
  {#if presentation}
128
- <div class="repl-content">
129
- <div>{@render children?.()}</div>
114
+ <div class="kit-repl-content" class:kit-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
- <Files {files} bind:activeIndex={activeFileIndex} />
136
-
137
- <div class="repl-content">
138
- {#if viewState === 'code'}
139
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
140
- <div class="wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
141
- {:else}
142
- <div>{@render children?.()}</div>
125
+ <div class="kit-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
143
+ class="kit-repl-content"
144
+ class:kit-repl-content--code={viewState === 'code' && !presentation}
145
+ >
146
+ {#if viewState === 'code'}
147
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -->
148
+ <div class="kit-repl-wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
149
+ {:else}
150
+ <div
151
+ class="kit-repl-wrapper-playground"
152
+ class:dark={themeState === 'dark'}
153
+ class:light={themeState === 'light'}
154
+ >
155
+ {@render children?.()}
156
+ </div>
157
+ {/if}
158
+ </div>
144
159
  </div>
145
160
  </div>
146
161
 
147
162
  <style>
148
- div.repl-container {
149
- --repl-spacing: 0.25rem;
150
- --repl-radius: 1rem;
151
- --repl-shiki-size: 1rem;
152
- --repl-shiki-tab-size: 2;
153
-
154
- --repl-background: #f9f9f9;
155
- --repl-border-color: #ebebeb;
156
-
157
- --repl-primary: #0d0d34;
158
- --repl-secondary: #8f8f8f;
159
-
160
- background-color: var(--repl-background);
161
- border-radius: var(--repl-radius);
162
- border: 2px solid var(--repl-border-color);
163
+ .kit-repl {
164
+ /* ui */
165
+ --kit-repl-spacing: 0.25rem;
166
+ --kit-repl-radius: 1rem;
167
+
168
+ /* shiki override */
169
+ --kit-repl-shiki-size: 0.875rem;
170
+ --kit-repl-shiki-tab-size: 2;
171
+
172
+ /* colors */
173
+ --kit-repl-background: #f9f9f9;
174
+ --kit-repl-border-color: #ebebeb;
175
+ --kit-repl-primary: #0d0d34;
176
+ --kit-repl-secondary: #8f8f8f;
177
+ }
178
+ .kit-repl-container {
179
+ background-color: var(--kit-repl-background);
180
+ border-radius: var(--kit-repl-radius);
181
+ border: 2px solid var(--kit-repl-border-color);
163
182
  }
164
183
 
165
- div.repl-container :global(pre) {
166
- background-color: var(--repl-background) !important;
184
+ .kit-repl-container :global(pre) {
185
+ background-color: var(--kit-repl-background) !important;
167
186
  }
168
187
 
169
- .repl-content {
188
+ .kit-repl-content {
170
189
  display: flow-root;
171
- margin-top: calc(var(--repl-spacing) * 0);
172
- padding-right: calc(10 * var(--repl-spacing));
173
- padding-left: calc(5 * var(--repl-spacing));
174
- padding-bottom: calc(4 * var(--repl-spacing));
175
- padding-top: calc(3 * var(--repl-spacing));
190
+ margin-top: calc(var(--kit-repl-spacing) * 0);
191
+ padding-right: calc(10 * var(--kit-repl-spacing));
192
+ padding-left: calc(5 * var(--kit-repl-spacing));
193
+ padding-bottom: calc(4 * var(--kit-repl-spacing));
194
+ padding-top: calc(3 * var(--kit-repl-spacing));
176
195
  position: relative;
177
196
  }
178
197
 
198
+ .kit-repl-content--code {
199
+ padding-top: 0;
200
+ }
201
+
202
+ .kit-repl-content--playground {
203
+ padding-top: calc(4 * var(--kit-repl-spacing));
204
+ padding-bottom: calc(10 * var(--kit-repl-spacing));
205
+ }
206
+
179
207
  hr {
180
- max-width: calc(100% - 4.5rem);
181
- margin-inline-start: calc(4.5rem / 2);
208
+ max-width: calc(100% - 2.5rem);
209
+ margin-inline-start: calc(2.5rem / 2);
182
210
  display: block;
183
- border: thin solid var(--repl-border-color);
211
+ border: thin solid var(--kit-repl-border-color);
184
212
  margin-top: 0;
185
213
  margin-bottom: 0;
186
214
  }
187
215
 
188
- div.repl-container .wrapper-highlight :global(pre code) {
189
- font-size: var(--repl-shiki-size);
190
- -moz-tab-size: var(--repl-shiki-tab-size);
191
- tab-size: var(--repl-shiki-tab-size);
216
+ div.kit-repl-container .kit-repl-wrapper-highlight :global(pre code) {
217
+ font-size: var(--kit-repl-shiki-size);
218
+ -moz-tab-size: var(--kit-repl-shiki-tab-size);
219
+ tab-size: var(--kit-repl-shiki-tab-size);
192
220
  white-space: pre-wrap;
193
221
  word-break: break-word;
194
222
  }
223
+
224
+ div.kit-repl-container .kit-repl-wrapper-playground {
225
+ background-color: var(--kit-repl-background);
226
+ border-radius: var(--kit-repl-radius);
227
+ padding: calc(4 * var(--kit-repl-spacing));
228
+ }
195
229
  </style>
package/dist/Toolbar.svelte CHANGED
@@ -19,8 +19,12 @@
19
19
  );
20
20
  </script>
21
21
 
22
- <div class="lpk-repl--toolbar">
23
- <div class="lpk-repl--toolbar-title">
22
+ <div class="kit-repl--toolbar">
23
+ <div
24
+ class="kit-repl--toolbar-title"
25
+ class:kit-repl--toolbar-title--language={!title && language}
26
+ class:kit-repl--toolbar-title--title={title}
27
+ >
24
28
  {#if title}
25
29
  <span>{title}</span>
26
30
  {:else if language}
@@ -28,9 +32,13 @@
28
32
  {/if}
29
33
  </div>
30
34
 
31
- <div class="lpk-repl--toolbar-actions">
35
+ <div class="kit-repl--toolbar-actions">
32
36
  {#if (modeState !== 'code' && viewState === 'preview') || presentation}
33
- <Button onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}>
37
+ <Button
38
+ aria-label={themeState === 'light' ? 'Switch to dark theme' : 'Switch to light theme'}
39
+ aria-pressed={themeState === 'dark'}
40
+ onclick={() => (themeState = themeState === 'light' ? 'dark' : 'light')}
41
+ >
34
42
  {#if themeState === 'light'}
35
43
  <Moon />
36
44
  {:else}
@@ -40,7 +48,11 @@
40
48
  {/if}
41
49
 
42
50
  {#if modeState === 'mixed' && !presentation}
43
- <Button onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}>
51
+ <Button
52
+ aria-label={viewState === 'code' ? 'Show preview' : 'Show code'}
53
+ aria-pressed={viewState === 'preview'}
54
+ onclick={() => (viewState = viewState === 'code' ? 'preview' : 'code')}
55
+ >
44
56
  {#if viewState === 'code'}
45
57
  <Code />
46
58
  {:else}
@@ -50,7 +62,10 @@
50
62
  {/if}
51
63
 
52
64
  {#if modeState !== 'playground'}
53
- <Button onclick={() => (copyState = true)}>
65
+ <Button
66
+ aria-label={copyState ? 'Code copied' : 'Copy code'}
67
+ onclick={() => (copyState = true)}
68
+ >
54
69
  {#if copyState}
55
70
  <Check />
56
71
  {:else}
@@ -62,32 +77,44 @@
62
77
  </div>
63
78
 
64
79
  <style>
65
- .lpk-repl--toolbar {
80
+ .kit-repl--toolbar {
66
81
  display: flex;
67
82
  align-items: center;
68
83
  justify-content: space-between;
69
- gap: calc(var(--repl-spacing) * 3);
70
- padding-left: calc(5 * var(--repl-spacing));
71
- padding-right: calc(var(--repl-spacing) * 2);
72
- padding-block: calc(var(--repl-spacing) * 1.5);
73
- border-top-left-radius: var(--repl-radius);
74
- border-top-right-radius: var(--repl-radius);
84
+ gap: calc(var(--kit-repl-spacing) * 3);
85
+ padding-left: calc(5 * var(--kit-repl-spacing));
86
+ padding-right: calc(var(--kit-repl-spacing) * 2);
87
+ padding-block: calc(var(--kit-repl-spacing) * 1.5);
88
+ border-top-left-radius: var(--kit-repl-radius);
89
+ border-top-right-radius: var(--kit-repl-radius);
75
90
  min-height: 36px;
76
91
  }
77
92
 
78
- .lpk-repl--toolbar .lpk-repl--toolbar-title {
93
+ .kit-repl--toolbar .kit-repl--toolbar-title {
79
94
  display: flex;
80
95
  align-items: center;
81
- gap: calc(var(--repl-spacing) * 2);
82
- font-weight: 600;
83
- color: var(--repl-secondary);
96
+ gap: calc(var(--kit-repl-spacing) * 2);
84
97
  max-width: 80%;
85
98
  min-width: 0;
86
99
  }
87
100
 
88
- .lpk-repl--toolbar .lpk-repl--toolbar-actions {
101
+ .kit-repl--toolbar-title--language {
102
+ font-size: 0.875rem;
103
+ line-height: 16px;
104
+ font-weight: 400;
105
+ color: #5d5d5d;
106
+ }
107
+
108
+ .kit-repl--toolbar-title--title {
109
+ font-weight: 500;
110
+ font-size: 1rem;
111
+ line-height: 20px;
112
+ color: #8f8f8f;
113
+ }
114
+
115
+ .kit-repl--toolbar .kit-repl--toolbar-actions {
89
116
  display: flex;
90
117
  align-items: center;
91
- gap: calc(var(--repl-spacing) * 2);
118
+ gap: calc(var(--kit-repl-spacing) * 2);
92
119
  }
93
120
  </style>
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, {}, "copyState" | "viewState" | "themeState" | "modeState">;
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/index.d.ts CHANGED
@@ -1 +1 @@
1
- export { default as KitCode } from './Repl.svelte';
1
+ export { default as KitRepl } from './Repl.svelte';
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  // components
2
- export { default as KitCode } from './Repl.svelte';
2
+ export { default as KitRepl } from './Repl.svelte';
package/dist/types.d.ts CHANGED
@@ -17,6 +17,8 @@ export interface ToolbarProps {
17
17
  export interface FilesProps {
18
18
  files?: FileItem[];
19
19
  activeIndex: number;
20
+ viewState: 'code' | 'preview';
21
+ modeState: 'code' | 'playground' | 'mixed';
20
22
  }
21
23
  export interface FileItem {
22
24
  name: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lapikit/repl",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -11,7 +11,7 @@
11
11
  },
12
12
  "repository": {
13
13
  "type": "git",
14
- "url": "https://github.com/Nycolaide/lapikit.git"
14
+ "url": "git+https://github.com/Nycolaide/lapikit.git"
15
15
  },
16
16
  "scripts": {
17
17
  "dev": "vite dev",