@lapikit/repl 0.0.0-insiders.f248eb2 → 0.0.0-insiders.fbbe434

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Nycolaide <https://github.com/Nycolaide>.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -2,14 +2,12 @@
 
 @lapikit/repl is a Svelte component for Lapikit. It's a add-on package for Lapikit library.
 
-
 ## Installation
 
 ```bash
 npm install -D @lapikit/repl
 ```
 
-
 ```javascript
 // svelte.config.js
 
@@ -30,7 +28,6 @@ export default config;
 <kit:repl content="console.log('hello')" />
 ```
 
-
 ```svelte
 <script lang="ts">
 	import sampleCounter from './samples/counter.svelte?raw';
@@ -42,7 +39,6 @@ export default config;
 </kit:repl>
 ```
 
-
 ```svelte
 <script lang="ts">
 	import sampleJson from './samples/json.json?raw';
@@ -56,14 +52,13 @@ export default config;
 	content={{
 		'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
 		'file.json': { code: sampleJson, lang: 'json' },
-		'Styles.css': { code: sampleCss, lang: 'css' },
+		'Styles.css': { code: sampleCss, lang: 'css' }
 	}}
 >
 	<Counter />
 </kit:repl>
 ```
 
-
 ```svelte
 <script lang="ts">
 	import sampleJson from './samples/json.json?raw';
@@ -76,18 +71,17 @@ export default config;
 	content={{
 		'Counter.svelte': { code: sampleCounter, lang: 'svelte' },
 		'file.json': { code: sampleJson, lang: 'json' },
-		'Styles.css': { code: sampleCss, lang: 'css' },
+		'Styles.css': { code: sampleCss, lang: 'css' }
 	}}
 >
 	<Counter />
 </kit:repl>
 ```
 
-
 ## Props
 
-| Prop        | Type                        | Default   | Description                                                  |
-| ----------- | --------------------------- | --------- | ------------------------------------------------------------ |
-| 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. |
-| presentation | boolean                     | false     | If true, the REPL will be in presentation mode, showing only the output without the code editor. |
-| tiltle | string                      | ''    | The title displayed on the REPL toolbar.                     |
+| Prop         | Type                                                      | Default | Description                                                                                                       |
+| ------------ | --------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------- |
+| 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. |
+| presentation | boolean                                                   | false   | If true, the REPL will be in presentation mode, showing only the output without the code editor.                  |
+| tiltle       | string                                                    | ''      | The title displayed on the REPL toolbar.                                                                          |

package/dist/Repl.svelte

@@ -20,7 +20,7 @@
 	let viewState: 'code' | 'preview' = $state('code');
 	let themeState: 'light' | 'dark' = $state('light');
 
-	let codeHTML = $state('');
+	let codeHTML = $state<string | null>(null);
 	let activeFileIndex = $state(0);
 
 	let files = $derived.by<FileItem[]>(() => {
@@ -91,18 +91,19 @@
 
 	$effect(() => {
 		const file = activeFile;
-		const theme = themeState;
+		// const theme = themeState;
 
 		if (file?.content) {
+			codeHTML = null;
+			language = file.lang || 'sh';
+
 			(async () => {
 				const highlighter = await getHighlighterSingleton();
-
-				language = file.lang || 'sh';
 				const html = highlighter.codeToHtml(file.content, {
-					theme: theme === 'light' ? 'github-light' : 'github-dark',
+					// theme: theme === 'light' ? 'github-light' : 'github-dark',
+					theme: 'github-light',
 					lang: file.lang || language
 				});
-
 				codeHTML = html;
 			})();
 		}
@@ -144,8 +145,14 @@
 			class:kit-repl-content--code={viewState === 'code' && !presentation}
 		>
 			{#if viewState === 'code'}
-				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-				<div class="kit-repl-wrapper-highlight" bind:this={ref}>{@html codeHTML}</div>
+				<div class="kit-repl-wrapper-highlight" bind:this={ref}>
+					{#if codeHTML !== null}
+						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+						{@html codeHTML}
+					{:else}
+						<pre class="kit-repl-raw"><code>{activeFile?.content ?? ''}</code></pre>
+					{/if}
+				</div>
 			{:else}
 				<div
 					class="kit-repl-wrapper-playground"
@@ -170,10 +177,10 @@
 		--kit-repl-shiki-tab-size: 2;
 
 		/* colors */
-		--kit-repl-background: #f9f9f9;
-		--kit-repl-border-color: #ebebeb;
-		--kit-repl-primary: #0d0d34;
-		--kit-repl-secondary: #8f8f8f;
+		--kit-repl-background: var(--kit-surface-3, #f9f9f9);
+		--kit-repl-border-color: var(--kit-border, #ebebeb);
+		--kit-repl-primary: var(--kit-fg, #0d0d34);
+		--kit-repl-secondary: var(--kit-muted, #8f8f8f);
 	}
 	.kit-repl-container {
 		background-color: var(--kit-repl-background);
@@ -182,7 +189,7 @@
 	}
 
 	.kit-repl-container :global(pre) {
-		background-color: var(--kit-repl-background) !important;
+		background-color: #f9f9f9 !important;
 	}
 
 	.kit-repl-content {
@@ -213,6 +220,16 @@
 		margin-bottom: 0;
 	}
 
+	.kit-repl-raw {
+		font-size: var(--kit-repl-shiki-size);
+		-moz-tab-size: var(--kit-repl-shiki-tab-size);
+		tab-size: var(--kit-repl-shiki-tab-size);
+		white-space: pre-wrap;
+		word-break: break-word;
+		margin: 0;
+		padding: 0;
+	}
+
 	div.kit-repl-container .kit-repl-wrapper-highlight :global(pre code) {
 		font-size: var(--kit-repl-shiki-size);
 		-moz-tab-size: var(--kit-repl-shiki-tab-size);

package/dist/shiki.js

@@ -1,11 +1,14 @@
 import { createHighlighter } from 'shiki';
-let highlighter;
+let highlighter = null;
+const highlighterPromise = createHighlighter({
+    themes: ['github-light', 'github-dark'],
+    langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
+}).then((h) => {
+    highlighter = h;
+    return h;
+});
 export async function getHighlighterSingleton() {
-    if (!highlighter) {
-        highlighter = await createHighlighter({
-            themes: ['github-light', 'github-dark'],
-            langs: ['svelte', 'typescript', 'javascript', 'html', 'css', 'json', 'bash']
-        });
-    }
-    return highlighter;
+    if (highlighter)
+        return highlighter;
+    return highlighterPromise;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lapikit/repl",
-  "version": "0.0.0-insiders.f248eb2",
+  "version": "0.0.0-insiders.fbbe434",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -9,10 +9,12 @@
     "name": "Nycolaide",
     "email": "contact@lapikit.dev"
   },
+  "homepage": "https://lapikit.dev",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Nycolaide/lapikit.git"
+    "url": "git+https://github.com/lapikit/lapikit-repl.git"
   },
+  "funding": "https://buymeacoffee.com/nycolaide",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -45,7 +47,8 @@
   },
   "peerDependencies": {
     "@sveltejs/kit": "^2.0.0",
-    "svelte": "^5.0.0"
+    "svelte": "^5.0.0",
+    "lapikit": "^0.5.0"
   },
   "devDependencies": {
     "@eslint/compat": "^1.4.0",