@refrakt-md/svelte 0.4.0 → 0.5.1

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@refrakt-md/svelte",
 	"description": "Svelte renderer for refrakt.md content",
-	"version": "0.4.0",
+	"version": "0.5.1",
 	"type": "module",
 	"license": "MIT",
 	"repository": {
@@ -27,7 +27,8 @@
 	],
 	"dependencies": {
 		"@markdoc/markdoc": "0.4.0",
-		"@refrakt-md/types": "0.4.0"
+		"@refrakt-md/behaviors": "0.5.1",
+		"@refrakt-md/types": "0.5.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"

package/src/Renderer.svelte

@@ -24,6 +24,25 @@
 		return result;
 	}
 
+	function escapeAttr(str: string): string {
+		return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+	}
+
+	/** Serialize an SVG tag tree to HTML string. Using {@html} avoids SVG namespace
+	 *  issues that occur when <svelte:element> creates child SVG elements (path, circle, etc.)
+	 *  outside the SVG namespace context during client-side navigation. */
+	function svgToHtml(tag: SerializedTag): string {
+		const attrs = Object.entries(htmlAttrs(tag.attributes))
+			.map(([k, v]) => ` ${k}="${escapeAttr(v)}"`)
+			.join('');
+		const children = tag.children.map(child => {
+			if (typeof child === 'string') return escapeAttr(child);
+			if (isTag(child)) return svgToHtml(child);
+			return '';
+		}).join('');
+		return `<${tag.name}${attrs}>${children}</${tag.name}>`;
+	}
+
 	const globalOverrides = getElementOverrides();
 	const merged = $derived(overrides
 		? { ...globalOverrides, ...overrides }
@@ -55,6 +74,8 @@
 				<Renderer node={child} overrides={merged} />
 			{/each}
 		</ElementOverride>
+	{:else if node.name === 'svg'}
+		{@html svgToHtml(node)}
 	{:else}
 		<svelte:element this={node.name} {...htmlAttrs(node.attributes)}>
 			{#each node.children as child}

package/src/ThemeShell.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import type { SvelteTheme } from './theme.js';
 	import { setRegistry, setElementOverrides } from './context.js';
-	import { setContext } from 'svelte';
+	import { setContext, tick } from 'svelte';
 	import { matchRouteRule } from './route-rules.js';
+	import { initRuneBehaviors } from '@refrakt-md/behaviors';
 
 	interface OgMeta {
 		title?: string;
@@ -50,6 +51,23 @@
 	// Pick layout via route rules (reactive so layout updates on client-side navigation)
 	const layoutName = $derived(matchRouteRule(page.url, theme.manifest.routeRules));
 	const Layout = $derived(theme.layouts[layoutName] ?? theme.layouts['default']);
+
+	// Initialize rune behaviors after render, re-run on navigation.
+	// The {#key page.url} block in the template ensures full DOM recreation on
+	// navigation, so behaviors always run on fresh DOM and old behavior-modified
+	// elements are simply discarded (no cleanup/restore conflicts with Svelte).
+	$effect(() => {
+		void page.url; // re-run when page changes
+		let cleanup: (() => void) | undefined;
+		let active = true;
+		tick().then(() => {
+			if (active) cleanup = initRuneBehaviors();
+		});
+		return () => {
+			active = false;
+			cleanup?.();
+		};
+	});
 </script>
 
 <svelte:head>
@@ -82,13 +100,16 @@
 	{/if}
 </svelte:head>
 
-{#if Layout}
-	<Layout
-		title={page.title}
-		description={page.description}
-		frontmatter={page.frontmatter}
-		regions={page.regions}
-		renderable={page.renderable}
-		pages={page.pages}
-	/>
-{/if}
+{#key page.url}
+	{#if Layout}
+		<Layout
+			title={page.title}
+			description={page.description}
+			frontmatter={page.frontmatter}
+			regions={page.regions}
+			renderable={page.renderable}
+			pages={page.pages}
+			url={page.url}
+		/>
+	{/if}
+{/key}