wip

playground/src/lib/components/Playground.svelte

@@ -1,24 +1,9 @@
 <script lang="ts">
-	import EditorPanel from './EditorPanel.svelte';
+	import type { ParseResult } from '../wasm';
 
-	// Sample data based on the provided example
-	let templateValue = $state(`---
-_type: Recipe
-author.name: Max Richter
----
-
-# Baguette
-
-My favourite baguette recipe
-
-## Ingredients
-- Flour
-- Water
-- Salt
-
-## Steps
-1. Mix Flour Water and Salt
-2. Bake the bread`);
+	type StringArray = string[];
+	let templateValue = $state(``);
+	let templates = $state<StringArray>([]);
 
 	let markdownValue = $state(`---
 _type: Recipe
@@ -38,25 +23,46 @@ My favourite baguette recipe
 1. Mix Flour Water and Salt
 2. Bake the bread`);
 
-	// Simulated JSON output - in real implementation this would be generated from the parser
-	let jsonOutput = $derived(() => {
+	let jsonOutput = $state('');
+	let timings = $state<ParseResult['timings'] | null>(null);
+	let status = $state<'success' | 'error' | undefined>(undefined);
+
+	$effect(() => {
+		if ($wasmReady) {
+			try {
+				templates = listTemplates();
+			} catch (e) {
+				console.error(e);
+			}
+		}
+		if (!$wasmReady) {
+			jsonOutput = 'Loading wasm...';
+			timings = null;
+			status = undefined;
+			return;
+		}
 		try {
-			const output = {
-				_type: 'Recipe',
-				name: 'Baguette',
-				author: {
-					_type: 'Person',
-					name: 'Max Richter'
-				},
-				description: 'My favourite baguette recipe',
-				recipeIngredient: ['Flour', 'Water', 'Salt'],
-				recipeInstructions: ['Mix Flour Water and Salt', 'Bake the bread']
-			};
-			return JSON.stringify(output, null, 2);
-		} catch (e) {
-			return 'Invalid input';
+			const result = templateValue
+				? parseMarkdownWithTemplate(markdownValue, templateValue)
+				: parseMarkdown(markdownValue);
+			jsonOutput = JSON.stringify(result.data, null, 2);
+			timings = result.timings;
+			status = 'success';
+		} catch (e: unknown) {
+			jsonOutput = (e as Error).message;
+			timings = null;
+			status = 'error';
 		}
 	});
+
+	function loadTemplate(name: string) {
+		if (!name) return;
+		try {
+			templateValue = getTemplate(name);
+		} catch (e) {
+			console.error(e);
+		}
+	}
 </script>
 
 <div class="grid min-h-0 flex-1 grid-cols-1 lg:grid-cols-3">
@@ -64,21 +70,37 @@ My favourite baguette recipe
 		title="Template"
 		bind:value={templateValue}
 		placeholder="Enter your Marka template here..."
-	/>
+		{status}
+		timing={timings?.template_compilation}
+		subtitle="Define your mapping schema"
+	>
+		{#snippet headerActions()}
+			<select
+				onchange={(e) => loadTemplate(e.currentTarget.value)}
+				class="rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 focus:outline-none"
+			>
+				<option value="">Load a template</option>
+				{#each templates as template (template)}
+					<option value={template}>{template}</option>
+				{/each}
+			</select>
+		{/snippet}
+	</EditorPanel>
 
 	<EditorPanel
 		title="Markdown"
 		bind:value={markdownValue}
 		placeholder="Enter your markdown content here..."
+		{status}
+		timing={timings?.markdown_parsing}
+		subtitle="Your source content"
 	/>
 
-	<EditorPanel title="Data" value={jsonOutput()} readonly={true}>
-		{#snippet children()}
-			<div class="absolute bottom-4 right-4 opacity-60">
-				<div class="rounded border bg-white px-2 py-1 text-xs text-gray-500">
-					Auto-generated JSON
-				</div>
-			</div>
-		{/snippet}
-	</EditorPanel>
+	<EditorPanel
+		title="Data"
+		value={jsonOutput}
+		readonly={true}
+		{status}
+		subtitle="Parsed JSON output"
+	/>
 </div>