@lapikit/repl 0.0.0-insiders.a194ddd → 0.0.0-insiders.ab10c58

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[]>(() => {
@@ -94,15 +94,15 @@
 		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',
 					lang: file.lang || language
 				});
-
 				codeHTML = html;
 			})();
 		}
@@ -144,8 +144,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"
@@ -213,6 +219,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.a194ddd",
+  "version": "0.0.0-insiders.ab10c58",
   "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/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",