@refrakt-md/svelte 0.3.0 → 0.5.0

package/package.json

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

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;
@@ -20,9 +21,19 @@
 	interface PageData {
 		title: string;
 		description: string;
+		frontmatter?: Record<string, unknown>;
 		regions: Record<string, { name: string; mode: string; content: any[] }>;
 		renderable: any;
-		pages: Array<{ url: string; title: string; draft: boolean }>;
+		pages: Array<{
+			url: string;
+			title: string;
+			draft: boolean;
+			description?: string;
+			date?: string;
+			author?: string;
+			tags?: string[];
+			image?: string;
+		}>;
 		url: string;
 		seo?: PageSeo;
 	}
@@ -40,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>
@@ -72,12 +100,16 @@
 	{/if}
 </svelte:head>
 
-{#if Layout}
-	<Layout
-		title={page.title}
-		description={page.description}
-		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}

package/src/types.ts

@@ -1,9 +1,2 @@
-/** A serialized Markdoc Tag (plain object, not a class instance) */
-export interface SerializedTag {
-	$$mdtype: 'Tag';
-	name: string;
-	attributes: Record<string, any>;
-	children: RendererNode[];
-}
-
-export type RendererNode = SerializedTag | string | number | null | undefined | RendererNode[];
+// Canonical types live in @refrakt-md/types; re-exported here for backward compat
+export type { SerializedTag, RendererNode } from '@refrakt-md/types';