svelte-streamdown 1.0.6 → 1.0.7

package/dist/Block.svelte

@@ -1,34 +1,78 @@
 <script lang="ts">
 	import { parseIncompleteMarkdown } from './utils/parse-incomplete-markdown.js';
-	import { parseMarkdown } from './utils/parse.js';
-	import { useStreamdown } from './Streamdown.svelte';
-	import type { Root } from 'hast';
 	import Element from './Elements/Element.svelte';
+	import { lex, type StreamdownToken, type TableRow } from './marked/index.js';
+
 	let {
 		block
 	}: {
 		block: string;
 	} = $props();
 
-	const streamdownContext = useStreamdown();
-	const root = $derived(parseMarkdown(streamdownContext, parseIncompleteMarkdown(block.trim())));
+	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
+
+	const getChildren = (token: StreamdownToken) => {
+		if (token.type === 'list') {
+			return token.items as StreamdownToken[];
+		}
+
+		if (token.type === 'table') {
+			const headerRow = {
+				type: 'tableRow',
+				tokens: token.header.map((cell) => ({
+					type: 'tableCell',
+					...cell
+				})),
+				isHeader: true
+			} satisfies TableRow;
+
+			const rows = token.rows.reduce(
+				(acc, cells) => {
+					const row = {
+						type: 'tableRow',
+						tokens: cells.map((cell) => ({
+							type: 'tableCell',
+							...cell
+						})),
+						isHeader: false
+					} satisfies TableRow;
+					acc.push(row);
+					return acc;
+				},
+				[headerRow] as TableRow[]
+			);
+
+			return rows;
+		}
+		const children =
+			'tokens' in token ? ((token.tokens || []) as StreamdownToken[]) : ([] as StreamdownToken[]);
+
+		if (!children.length && token.type !== 'text') {
+			return [
+				{
+					type: 'text',
+					text: 'text' in token ? token.text : '',
+					raw: 'raw' in token ? token.raw : '',
+					tokens: []
+				}
+			] satisfies StreamdownToken[];
+		}
+		return children;
+	};
 </script>
 
-{#snippet renderChildren(nodeChildren: Root['children'])}
-	{#each nodeChildren as node}
-		{#if node.type === 'element'}
-			{@const {
-				properties: { className, ...props }
-			} = node}
-			<Element {node} {className} {props} type={node.tagName}>
-				{#if 'children' in node && node.children?.length}
-					{@render renderChildren(node.children)}
-				{/if}
-			</Element>
-		{:else if node.type === 'text' && node.value}
-			{node.value}
-		{/if}
+{#snippet renderChildren(tokens: StreamdownToken[])}
+	{#each tokens as token}
+		{@const children = getChildren(token)}
+		{@const isTextOnlyNode = children.length === 0}
+		<Element {token}>
+			{#if isTextOnlyNode}
+				{'text' in token ? token.text : ''}
+			{:else}
+				{@render renderChildren(children)}
+			{/if}
+		</Element>
 	{/each}
 {/snippet}
 
-{@render renderChildren(root.children)}
+{@render renderChildren(tokens)}

package/dist/Elements/A.svelte

@@ -1,20 +1,22 @@
 <script lang="ts">
 	import { useStreamdown } from '../Streamdown.svelte';
 	import { transformUrl } from '../utils/url.js';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, className, node, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Link;
+	} = $props();
 
 	const transformedUrl = $derived(
-		transformUrl(
-			node.properties.href,
-			streamdown.allowedLinkPrefixes ?? [],
-			streamdown.defaultOrigin
-		)
+		transformUrl(token.href, streamdown.allowedLinkPrefixes ?? [], streamdown.defaultOrigin)
 	);
 </script>
 
@@ -24,16 +26,14 @@
 			href: transformedUrl,
 			target: '_blank',
 			rel: 'noopener noreferrer',
+			title: token.title,
 			children,
-			node,
-			props,
-			className
+			token
 		}}
 		render={streamdown.snippets.a}
 	>
 		<a
-			{...props}
-			class={clsx(streamdown.theme.a.base, className)}
+			class={streamdown.theme.a.base}
 			href={transformedUrl}
 			target="_blank"
 			rel="noopener noreferrer"
@@ -42,7 +42,10 @@
 		</a>
 	</Slot>
 {:else}
-	<span class={streamdown.theme.a.blocked} title={`Blocked URL: ${node.properties.href}`}>
+	<span
+		class={streamdown.theme.a.blocked}
+		title={token.title ? `Blocked URL: ${token.href}` : undefined}
+	>
 		{@render children()} [blocked]
 	</span>
 {/if}

package/dist/Elements/A.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const A: import("svelte").Component<ElementProps, {}, "">;
+import type { Tokens } from 'marked';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    token: Tokens.Link;
+};
+declare const A: import("svelte").Component<$$ComponentProps, {}, "">;
 type A = ReturnType<typeof A>;
 export default A;

package/dist/Elements/Alert.svelte

@@ -14,30 +14,21 @@
 	};
 
 	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { AlertToken } from '../marked/index.js';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, className, node, props }: ElementProps = $props();
-
-	// Extract alertType from className
-	const alertType = $derived.by(() => {
-		const className = node.properties.className as string[] | undefined;
-		if (!className) return 'note';
-		const alertClass = className.find((cls) => cls.startsWith('markdown-alert-'));
-		if (!alertClass) return 'note';
-		return alertClass.replace('markdown-alert-', '') as
-			| 'note'
-			| 'tip'
-			| 'warning'
-			| 'caution'
-			| 'important';
-	});
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: AlertToken;
+	} = $props();
 
-	// Extract icon from node properties
-	const icon = $derived((node.properties.icon as string) || '');
+	const alertType = $derived(token.variant);
 	const title = $derived(streamdown.translations?.alert?.[alertType] || alertType);
 </script>
 
@@ -45,17 +36,11 @@
 	props={{
 		children,
 		alertType,
-		icon,
-		node,
-		props,
-		className
+		token
 	}}
 	render={streamdown.snippets.alert}
 >
-	<div
-		{...props}
-		class={clsx(streamdown.theme.alert.base, className, streamdown.theme.alert[alertType])}
-	>
+	<div class={`${streamdown.theme.alert.base} ${streamdown.theme.alert[alertType]}`}>
 		<div data-alert-title class={streamdown.theme.alert.title}>
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
@@ -68,7 +53,6 @@
 				stroke-linejoin="round"
 				class={streamdown.theme.alert.icon}
 			>
-				<!-- {@html icon} -->
 				{@html icons[alertType]}
 			</svg>
 			{title}

package/dist/Elements/Alert.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const Alert: import("svelte").Component<ElementProps, {}, "">;
+import type { AlertToken } from '../marked/index.js';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    token: AlertToken;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
 type Alert = ReturnType<typeof Alert>;
 export default Alert;

package/dist/Elements/Blockquote.svelte

@@ -1,26 +1,28 @@
 <script lang="ts">
 	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
-
-	console.log({ node });
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Blockquote;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		props,
-		className
+		token
 	}}
 	render={streamdown.snippets.blockquote}
 >
-	<blockquote {...props} class={clsx(streamdown.theme.blockquote.base, className)}>
+	<blockquote class={streamdown.theme.blockquote.base}>
 		{@render children()}
 	</blockquote>
 </Slot>

package/dist/Elements/Blockquote.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const Blockquote: import("svelte").Component<ElementProps, {}, "">;
+import type { Tokens } from 'marked';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    token: Tokens.Blockquote;
+};
+declare const Blockquote: import("svelte").Component<$$ComponentProps, {}, "">;
 type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/Elements/Code.svelte

@@ -3,16 +3,22 @@
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../hightlighter.svelte.js';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
 
-	let { node, className, props }: ElementProps = $props();
+	const {
+		token,
+		children
+	}: {
+		token: Tokens.Code;
+		children: Snippet;
+	} = $props();
 
 	const streamdown = useStreamdown();
 	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
 	const theme = $derived(streamdown.shikiTheme);
-	let codeContent = $derived((node.children[0] as any).value);
-	const language = $derived(node.properties.language as string);
+	let codeContent = $derived(token.text);
+	const language = $derived(token.lang || '');
 	const copy = useCopy({
 		get content() {
 			return codeContent;
@@ -40,12 +46,8 @@
 	});
 </script>
 
-<div
-	{...props}
-	class={clsx(streamdown.theme.code.base, streamdown.theme.code.container, className)}
-	data-language={language}
->
-	<div class={clsx(streamdown.theme.code.header)} data-code-block-header data-language={language}>
+<div class={streamdown.theme.code.base} data-language={language}>
+	<div class={streamdown.theme.code.header} data-code-block-header data-language={language}>
 		<span class={streamdown.theme.code.language}>{language}</span>
 		<div class="flex items-center gap-2">
 			<!-- Download button snippet -->

package/dist/Elements/Code.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const Code: import("svelte").Component<ElementProps, {}, "">;
+import type { Tokens } from 'marked';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    token: Tokens.Code;
+    children: Snippet;
+};
+declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/Elements/Del.svelte

@@ -1,24 +1,28 @@
 <script lang="ts">
 	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Del;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		props,
-		className
+		token
 	}}
 	render={streamdown.snippets.del}
 >
-	<del {...props} class={clsx(streamdown.theme.del.base, className)}>
+	<del class={streamdown.theme.del.base}>
 		{@render children()}
 	</del>
 </Slot>

package/dist/Elements/Del.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const Del: import("svelte").Component<ElementProps, {}, "">;
+import type { Tokens } from 'marked';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    token: Tokens.Del;
+};
+declare const Del: import("svelte").Component<$$ComponentProps, {}, "">;
 type Del = ReturnType<typeof Del>;
 export default Del;

package/dist/Elements/Element.svelte

@@ -1,25 +1,8 @@
 <script lang="ts">
-	import type { Element } from 'hast';
 	import type { Snippet } from 'svelte';
-
-	let {
-		node,
-		props,
-		className,
-		type,
-		children
-	}: { node: Element; props: any; className: any; type: string; children: Snippet } = $props();
-
-	// Import all element components
 	import A from './A.svelte';
 	import Blockquote from './Blockquote.svelte';
 	import Code from './Code.svelte';
-	import H1 from './H1.svelte';
-	import H2 from './H2.svelte';
-	import H3 from './H3.svelte';
-	import H4 from './H4.svelte';
-	import H5 from './H5.svelte';
-	import H6 from './H6.svelte';
 	import Hr from './Hr.svelte';
 	import Image from './Image.svelte';
 	import Li from './Li.svelte';
@@ -41,90 +24,58 @@
 	import Em from './Em.svelte';
 	import Del from './Del.svelte';
 	import Alert from './Alert.svelte';
-	import { useStreamdown } from '../Streamdown.svelte';
-	import { type ElementProps } from './element.js';
-
-	const streamdown = useStreamdown();
+	import type { StreamdownToken } from '../marked/index.js';
+	import Heading from './Heading.svelte';
+	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 </script>
 
-{#if type === 'a'}
-	<A {props} {className} {children} {node} />
-{:else if type === 'blockquote'}
-	<Blockquote {props} {className} {children} {node} />
-{:else if type === 'code' && node?.properties.language === 'math'}
-	<Math {props} {className} {children} {node} />
-{:else if type === 'code' && node?.position?.start.line === node?.position?.end.line}
-	<InlineCode {props} {className} {children} {node} />
-{:else if type === 'code' && node?.properties.language === 'mermaid'}
-	<Mermaid {props} {className} {children} {node} />
-{:else if type === 'code'}
-	<Code {props} {className} {children} {node} />
-{:else if type === 'h1'}
-	<H1 {props} {className} {children} {node} />
-{:else if type === 'h2'}
-	<H2 {props} {className} {children} {node} />
-{:else if type === 'h3'}
-	<H3 {props} {className} {children} {node} />
-{:else if type === 'h4'}
-	<H4 {props} {className} {children} {node} />
-{:else if type === 'h5'}
-	<H5 {props} {className} {children} {node} />
-{:else if type === 'h6'}
-	<H6 {props} {className} {children} {node} />
-{:else if type === 'hr'}
-	<Hr {children} {node} {props} {className} />
-{:else if type === 'img'}
-	<Image
-		src={node.properties.src as string}
-		alt={node.properties.alt as string}
-		{props}
-		{className}
-		{children}
-		{node}
-	/>
-{:else if type === 'li'}
-	<Li {props} {className} {children} {node} />
-{:else if type === 'ol'}
-	<Ol {props} {className} {children} {node} />
-{:else if type === 'p'}
-	<P {props} {className} {children} {node} />
-{:else if type === 'strong'}
-	<Strong {props} {className} {children} {node} />
-{:else if type === 'sub'}
-	<Sub {props} {className} {children} {node} />
-{:else if type === 'sup'}
-	<Sup {props} {className} {children} {node} />
-{:else if type === 'table'}
-	<Table {props} {className} {children} {node} />
-{:else if type === 'tbody'}
-	<Tbody {props} {className} {children} {node} />
-{:else if type === 'td'}
-	<Td {props} {className} {children} {node} />
-{:else if type === 'th'}
-	<Th {props} {className} {children} {node} />
-{:else if type === 'thead'}
-	<Thead {props} {className} {children} {node} />
-{:else if type === 'tr'}
-	<Tr {props} {className} {children} {node} />
-{:else if type === 'ul'}
-	<Ul {props} {className} {children} {node} />
-{:else if type === 'ol'}
-	<Ol {props} {className} {children} {node} />
-{:else if type === 'br'}
-	<br />
-{:else if type === 'em'}
-	<Em {props} {className} {children} {node} />
-{:else if type === 'del'}
-	<Del {props} {className} {children} {node} />
-{:else if type === 'alert'}
-	<Alert {props} {className} {children} {node} />
-{:else}
-	{@const snippet = streamdown.customElements?.[type] as Snippet<[ElementProps]> | undefined}
-	{#if snippet}
-		{@render snippet({ props, className, children, node })}
+{#if token.type === 'heading'}
+	<Heading {token} {children} />
+{:else if token.type === 'paragraph'}
+	<P {token} {children} />
+{:else if token.type === 'blockquote'}
+	<Blockquote {token} {children} />
+{:else if token.type === 'code' && token.lang === 'mermaid'}
+	<Mermaid {token} {children} />
+{:else if token.type === 'code'}
+	<Code {token} {children} />
+{:else if token.type === 'codespan'}
+	<InlineCode {token} {children} />
+{:else if token.type === 'list'}
+	{#if token.ordered}
+		<Ol {token} {children} />
 	{:else}
-		{@render children?.()}
+		<Ul {token} {children} />
 	{/if}
-
-	<!-- Fallback for unsupported elements -->
+{:else if token.type === 'list_item'}
+	<Li {token} {children} />
+{:else if token.type === 'table'}
+	<Table {token} {children} />
+{:else if token.type === 'tableRow' && token.isHeader}
+	<Thead {token} {children} />
+{:else if token.type === 'tableRow' && !token.isHeader}
+	<Tr {token} {children} />
+{:else if token.type === 'tableCell'}
+	<Td {token} {children} />
+{:else if token.type === 'image'}
+	<Image {token} {children} />
+{:else if token.type === 'link'}
+	<A {token} {children} />
+{:else if token.type === 'strong'}
+	<Strong {token} {children} />
+{:else if token.type === 'em'}
+	<Em {token} {children} />
+{:else if token.type === 'del'}
+	<Del {token} {children} />
+{:else if token.type === 'hr'}
+	<Hr {token} {children} />
+{:else if token.type === 'br'}
+	<br />
+{:else if token.type === 'math'}
+	<Math {token} {children} />
+{:else if token.type === 'alert'}
+	<Alert {token} {children} />
+{:else}
+	<!-- For tokens we don't handle specifically, render children or fallback -->
+	{@render children?.()}
 {/if}

package/dist/Elements/Element.svelte.d.ts

@@ -1,10 +1,7 @@
-import type { Element } from 'hast';
 import type { Snippet } from 'svelte';
+import type { StreamdownToken } from '../marked/index.js';
 type $$ComponentProps = {
-    node: Element;
-    props: any;
-    className: any;
-    type: string;
+    token: StreamdownToken;
     children: Snippet;
 };
 declare const Element: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Elements/Em.svelte

@@ -1,23 +1,28 @@
 <script lang="ts">
 	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Em;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.em}
 >
-	<em {...props} class={clsx(streamdown.theme.em.base, className)}>
+	<em class={streamdown.theme.em.base}>
 		{@render children()}
 	</em>
 </Slot>

package/dist/Elements/Em.svelte.d.ts

@@ -1,4 +1,9 @@
-import type { ElementProps } from './element.js';
-declare const Em: import("svelte").Component<ElementProps, {}, "">;
+import type { Tokens } from 'marked';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    children: Snippet;
+    token: Tokens.Em;
+};
+declare const Em: import("svelte").Component<$$ComponentProps, {}, "">;
 type Em = ReturnType<typeof Em>;
 export default Em;

package/dist/Elements/Heading.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.svelte';
+	import Slot from './Slot.svelte';
+	import type { Tokens } from 'marked';
+	import type { Snippet } from 'svelte';
+
+	const streamdown = useStreamdown();
+
+	const { token, children }: { token: Tokens.Heading; children: Snippet } = $props();
+
+	const level = $derived(`h${token.depth}`) as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+	const className = $derived(streamdown.theme[level].base);
+</script>
+
+<Slot
+	props={{
+		children,
+		token
+	}}
+	render={streamdown.snippets.heading}
+>
+	<svelte:element this={level} class={className}>
+		{@render children()}
+	</svelte:element>
+</Slot>