sdocs 0.0.35 → 0.0.36

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.0.36] - 2026-07-03
+
+### Fixed
+
+- **Usage code is syntax-highlighted in static builds.** The usage snippet
+  regenerates in the browser as controls change and used to be highlighted
+  through a dev-server endpoint — deployed builds fell back to plain text.
+  Highlighting now runs client-side (lazy-loaded Shiki with the JavaScript
+  regex engine), identical on the dev server and any static host; the
+  dev-server endpoint is gone.
+
 ## [0.0.35] - 2026-07-03
 
 ### Fixed

package/dist/explorer/highlighter.d.ts

@@ -0,0 +1,2 @@
+/** Highlight Svelte code, matching the build-time highlighter's output shape */
+export declare function highlightSvelte(code: string): Promise<string>;

package/dist/explorer/highlighter.js

@@ -0,0 +1,33 @@
+// Client-side Shiki for code that's generated in the browser (the usage
+// snippet re-renders as controls change). Everything loads lazily on first
+// use so the Explorer bundle stays lean, and the JavaScript regex engine
+// avoids shipping wasm — highlighting works the same on the dev server and
+// in static builds.
+let highlighterPromise;
+async function getHighlighter() {
+    highlighterPromise ??= (async () => {
+        const [{ createHighlighterCore }, { createJavaScriptRegexEngine }, { bundledLanguages }, { bundledThemes }] = await Promise.all([
+            import('shiki/core'),
+            import('shiki/engine/javascript'),
+            import('shiki/langs'),
+            import('shiki/themes'),
+        ]);
+        return createHighlighterCore({
+            langs: [bundledLanguages.svelte],
+            themes: [bundledThemes['github-light'], bundledThemes['github-dark']],
+            engine: createJavaScriptRegexEngine({ forgiving: true }),
+        });
+    })();
+    return highlighterPromise;
+}
+/** Highlight Svelte code, matching the build-time highlighter's output shape */
+export async function highlightSvelte(code) {
+    const highlighter = await getHighlighter();
+    return highlighter.codeToHtml(code, {
+        lang: 'svelte',
+        themes: {
+            light: 'github-light',
+            dark: 'github-dark',
+        },
+    });
+}

package/dist/explorer/views/ComponentView.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { DocEntry } from '../../types.js';
 	import { Icon } from '../../ui/Icon/index.js';
+	import { highlightSvelte } from '../highlighter.js';
 	import CollapsiblePanel from './CollapsiblePanel.svelte';
 	import PreviewFrame from './PreviewFrame.svelte';
 	import ControlsPanel from './ControlsPanel.svelte';
@@ -169,36 +170,20 @@
 		return generateFallbackCode(componentName, propValues, cssValues);
 	});
 
-	// Highlighted usage code via server-side Shiki. The endpoint is dev-server
-	// middleware; in a production build it doesn't exist, so after the first
-	// failure stop asking and fall back to plain code.
+	// Usage code is generated in the browser, so it's highlighted client-side
+	// (lazy Shiki — see ../highlighter.ts). Debounced while controls change;
+	// stale results are dropped.
 	let highlightedUsageHtml = $state('');
 	let highlightTimer: ReturnType<typeof setTimeout> | undefined;
-	let highlightAvailable = true;
 
 	$effect(() => {
 		const code = usageCode;
 		clearTimeout(highlightTimer);
-		if (!highlightAvailable) {
-			highlightedUsageHtml = '';
-			return;
-		}
 		highlightTimer = setTimeout(async () => {
 			try {
-				const res = await fetch('/__sdocs/highlight', {
-					method: 'POST',
-					headers: { 'Content-Type': 'application/json' },
-					body: JSON.stringify({ code, lang: 'svelte' }),
-				});
-				if (res.ok) {
-					const { html } = await res.json();
-					highlightedUsageHtml = html;
-				} else {
-					highlightAvailable = false;
-					highlightedUsageHtml = '';
-				}
+				const html = await highlightSvelte(code);
+				if (code === usageCode) highlightedUsageHtml = html;
 			} catch {
-				highlightAvailable = false;
 				highlightedUsageHtml = '';
 			}
 		}, 150);

package/dist/vite.js

@@ -72,25 +72,6 @@ export function sdocsPlugin(userConfig) {
                     res.end('Internal error');
                 });
             });
-            // API: highlight code on demand
-            server.middlewares.use((req, res, next) => {
-                if (req.url !== '/__sdocs/highlight' || req.method !== 'POST')
-                    return next();
-                let body = '';
-                req.on('data', (chunk) => { body += chunk; });
-                req.on('end', async () => {
-                    try {
-                        const { code, lang } = JSON.parse(body);
-                        const html = await highlight(code, lang);
-                        res.setHeader('Content-Type', 'application/json');
-                        res.end(JSON.stringify({ html }));
-                    }
-                    catch {
-                        res.statusCode = 400;
-                        res.end('Invalid request');
-                    }
-                });
-            });
             // Watch for .sdoc file add/unlink/change
             server.watcher.on('add', async (filePath) => {
                 if (isDocFile(filePath)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdocs",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "A lightweight documentation tool for Svelte 5 components",
   "type": "module",
   "license": "MIT",