Support svelte live code blocks

Author: techniq

.gitignore

@@ -14,6 +14,9 @@ test-*
 # Content Collections
 .content-collections
 
+# mdsx live code
+.live-code/
+
 # Generated API documentation
 **/generated/api/*.json
 

docs/mdsx.config.js

@@ -7,12 +7,13 @@ import rehypePrettyCode from 'rehype-pretty-code';
 import {
 	prettyCodeOptions,
 	rehypeCodeBlockTitle,
-	rehypeHandleCodeBlocks
+	rehypeHandleCodeBlocks,
+	remarkLiveCode
 } from './src/lib/markdown/config/index.js';
 
 export const mdsxConfig = defineConfig({
 	extensions: ['.md'],
-	remarkPlugins: [remarkGfm],
+	remarkPlugins: [remarkGfm, remarkLiveCode],
 	rehypePlugins: [
 		rehypeSlug,
 		// rehypeComponentExample,

docs/src/lib/markdown/components/LiveCode.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		preview: Snippet;
+		children: Snippet;
+	}
+
+	let { preview, children }: Props = $props();
+</script>
+
+<div class="live-code">
+	<div class="live-code-preview p-6 border border-t rounded-t-lg">
+		{@render preview()}
+	</div>
+	{@render children()}
+</div>

docs/src/lib/markdown/components/pre.svelte

@@ -8,7 +8,6 @@
 		'data-title': dataTitle,
 		...restProps
 	}: HTMLAttributes<HTMLPreElement> = $props();
-	$inspect({ restProps });
 </script>
 
 <pre

docs/src/lib/markdown/config/index.js

@@ -1,3 +1,6 @@
+// Remark plugins
+export { remarkLiveCode } from '../rehype/live-code.js';
+
 // Rehype plugins
 export { rehypeCodeBlockTitle } from '../rehype/code-block-title.js';
 export { rehypeHandleCodeBlocks } from '../rehype/handle-code-blocks.js';

docs/src/lib/markdown/rehype/live-code.js

@@ -0,0 +1,124 @@
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import process from 'node:process';
+import { visit } from 'unist-util-visit';
+
+const BASE_PATH = resolve(process.cwd(), '.live-code');
+const LIVE_CODE_MAP = resolve(BASE_PATH, 'live-code-map.json');
+
+/**
+ * Remark plugin to handle live code blocks (e.g., ```svelte live)
+ * Writes live code to .svelte files and imports them
+ * MUST run BEFORE any rehype plugins (operates on markdown AST, not HTML)
+ * @returns {(tree: import('mdast').Root, vFile: import('vfile').VFile) => void}
+ */
+export function remarkLiveCode() {
+	// Ensure directory exists
+	if (!existsSync(BASE_PATH)) {
+		mkdirSync(BASE_PATH, { recursive: true });
+	}
+
+	// Initialize or load the map file
+	if (!existsSync(LIVE_CODE_MAP)) {
+		writeFileSync(LIVE_CODE_MAP, '{}');
+	}
+
+	return (tree, vFile) => {
+		const liveCodeImports = [];
+		let hasScript = false;
+
+		visit(tree, 'code', (node, index, parent) => {
+			if (index === null || !parent) return;
+			const { meta, lang, value } = node;
+			const metaArray = (meta || '').split(' ').filter(Boolean);
+
+			// Check if this is a live code block
+			if (lang !== 'svelte' || !metaArray.includes('live')) return;
+
+			// Use the raw code value
+			const rawCode = value || '';
+
+			// Generate unique ID for this code block
+			const blockId = `${vFile.path}-${index}`;
+			const idMap = JSON.parse(readFileSync(LIVE_CODE_MAP, 'utf-8'));
+
+			let componentFileName = idMap[blockId];
+			if (!componentFileName) {
+				// Generate unique filename
+				const hash = Math.random().toString(36).substring(2, 11);
+				componentFileName = `LiveCode${hash}.svelte`;
+				idMap[blockId] = componentFileName;
+				writeFileSync(LIVE_CODE_MAP, JSON.stringify(idMap, null, 2));
+			}
+
+			// Write the live code to a .svelte file
+			const componentPath = resolve(BASE_PATH, componentFileName);
+			writeFileSync(componentPath, rawCode);
+
+			// Generate component name (remove .svelte extension)
+			const componentName = componentFileName.replace(/\.svelte$/, '');
+
+			// Track import for later injection
+			liveCodeImports.push({
+				componentName,
+				path: `/.live-code/${componentFileName}`
+			});
+
+			// Create the live code container structure wrapped in LiveCodeWrapper
+			const liveCodeContainer = {
+				type: 'paragraph',
+				data: {
+					hName: 'div',
+					hProperties: {}
+				},
+				children: [
+					{
+						type: 'html',
+						value: `<LiveCode>{#snippet preview()}<${componentName} />{/snippet}<div class="live-code-source">`
+					}
+				]
+			};
+
+			// Add code section with original code block (title will be handled by rehype-code-block-title)
+			liveCodeContainer.children.push(node);
+
+			liveCodeContainer.children.push({
+				type: 'html',
+				value: '</div></LiveCode>' // Close live-code-source and LiveCode
+			});
+
+			// Replace the code node with the container
+			parent.children[index] = liveCodeContainer;
+		});
+
+		// Inject imports at the beginning of the file
+		if (liveCodeImports.length > 0) {
+			const importStatements = [
+				"import LiveCode from '$lib/markdown/components/LiveCode.svelte';",
+				...liveCodeImports.map(
+					({ componentName, path }) => `import ${componentName} from '${path}';`
+				)
+			].join('\n');
+
+			// Find existing script tag or create new one
+			visit(tree, 'html', (node, idx, parent) => {
+				if (node.value.startsWith('<script') && !hasScript) {
+					hasScript = true;
+					node.value = node.value.replace(
+						/<script[^>]*>/,
+						(match) => `${match}\n${importStatements}`
+					);
+					return visit.EXIT;
+				}
+			});
+
+			if (!hasScript) {
+				// Create new script tag at the beginning
+				tree.children.unshift({
+					type: 'html',
+					value: `<script>\n${importStatements}\n</script>`
+				});
+			}
+		}
+	};
+}

docs/src/routes/docs/markdown/+page.md

@@ -90,14 +90,38 @@
 <div>Test</div>
 ```
 
+### Live Code
+
+```svelte live title="Counter.svelte"
+<script>
+	let count = $state(0);
+</script>
+
+<button onclick={() => count++}>
+	Clicked {count}
+	{count === 1 ? 'time' : 'times'}
+</button>
+
+<style>
+	button {
+		padding: 0.5rem 1rem;
+		background: purple;
+		color: white;
+		border: none;
+		border-radius: 0.25rem;
+		cursor: pointer;
+	}
+</style>
+```
+
 ## Table
 
-````md
+```md
 | First | Second | Third |
 | ----- | ------ | ----- |
 | 1     | 2      | 3     |
 | 4     | 5      | 6     |
-````
+```
 
 | First | Second | Third |
 | ----- | ------ | ----- |

docs/vite.config.ts

@@ -25,6 +25,11 @@ export default defineConfig({
 			}
 		}) /*, devtoolsJson()*/
 	],
+	server: {
+		fs: {
+			allow: ['.live-code']
+		}
+	},
 	test: {
 		expect: { requireAssertions: true },
 		projects: [