good state, if nasty

Author: elliott-with-the-longest-name-on-github

package.json

@@ -32,7 +32,7 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.5.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
@@ -54,7 +54,7 @@
 		"publint": "^0.3.2",
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.1",
-		"svelte": "^5.0.0",
+		"svelte": "^5.5.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
@@ -76,8 +76,10 @@
 		"esm-env": "^1.2.2",
 		"hast": "^1.0.0",
 		"html-url-attributes": "^3.0.1",
+		"property-information": "^7.1.0",
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.2",
+		"style-to-object": "^1.0.9",
 		"unified": "^11.0.5",
 		"unist-util-visit": "^5.0.0",
 		"vfile": "^6.0.3"

pnpm-lock.yaml

@@ -1,14 +1,15 @@
 <script lang="ts">
 	import type { Options } from './types.js';
 	import { create_processor, create_file, post } from './core.js';
-	import RecursiveRenderer from './RecursiveRenderer.svelte';
+	import { hast_to_svelte } from './hast-to-svelte.svelte.js';
 
 	let options: Options = $props();
 
 	const processor = $derived(create_processor(options));
 	const file = $derived(create_file(options));
 	const processed = $derived(processor.runSync(processor.parse(file), file));
 	const tree = $derived(post(processed, options));
+	const renderer = $derived(hast_to_svelte(tree, { renderers: options }));
 </script>
 
-<RecursiveRenderer {tree} renderers={options} />
+{@render renderer()}

src/lib/Markdown.svelte

@@ -4,23 +4,6 @@ import Markdown from './Markdown.svelte';
 import rehype_raw from 'rehype-raw';
 import remark_gfm from 'remark-gfm';
 
-function strip_comments(html: string) {
-	return html.replace(/<!--[\s\S]*?-->/g, '');
-}
-
-expect.extend({
-	to_equal_html(received, expected) {
-		const received_html = strip_comments(received.innerHTML).trim();
-		const { isNot } = this;
-		return {
-			pass: received_html === expected.trim(),
-			message: () => `Expected ${received_html}${isNot ? ' not' : ''} to be ${expected}`,
-			actual: received_html,
-			expected: expected.trim()
-		};
-	}
-});
-
 describe('Markdown', () => {
 	it('should support `null` as children', async () => {
 		const screen = render(Markdown, { content: null });
@@ -179,7 +162,7 @@ describe('Markdown', () => {
 		await expect
 			.element(screen.container)
 			.to_equal_html(
-				'<table><thead><tr><th style="text-align:left">a</th><th style="text-align:center">b</th><th style="text-align:right">c</th><th>d</th></tr></thead></table>'
+				'<table><thead><tr><th style="text-align: left;">a</th><th style="text-align: center;">b</th><th style="text-align: right;">c</th><th>d</th></tr></thead></table>'
 			);
 	});
 

src/lib/Markdown.svelte.test.ts

@@ -0,0 +1,36 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { SpecificSvelteHTMLElements } from './types.js';
+
+	export { render_void_element, render_children_element, render_children, render_raw };
+</script>
+
+{#snippet render_void_element({
+	tagName: tag_name,
+	props
+}: {
+	tagName: keyof SpecificSvelteHTMLElements;
+	props: SpecificSvelteHTMLElements[keyof SpecificSvelteHTMLElements];
+})}
+	<svelte:element this={tag_name} {...props} />
+{/snippet}
+
+{#snippet render_children_element({
+	tagName: tag_name,
+	children,
+	props
+}: {
+	tagName: keyof SpecificSvelteHTMLElements;
+	children?: Snippet;
+	props: SpecificSvelteHTMLElements[keyof SpecificSvelteHTMLElements];
+})}
+	<svelte:element this={tag_name} {...props}>{@render children?.()}</svelte:element>
+{/snippet}
+
+{#snippet render_children(renderers: Snippet[])}
+	{#each renderers as renderer, i (i)}
+		{@render renderer()}
+	{/each}
+{/snippet}
+
+{#snippet render_raw(value: string)}{value}{/snippet}