svelte-streamdown 1.0.6 → 1.0.7

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

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

package/dist/Elements/Hr.svelte

@@ -1,20 +1,26 @@
 <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 { node, props, className }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Hr;
+	} = $props();
 </script>
 
 <Slot
 	props={{
-		node,
-		...props
+		children,
+		token
 	}}
 	render={streamdown.snippets.hr}
 >
-	<hr {...props} class={clsx(streamdown.theme.hr.base, className)} />
+	<hr class={streamdown.theme.hr.base} />
 </Slot>

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

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

package/dist/Elements/Image.svelte

@@ -1,19 +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, node, className, props }: ElementProps = $props();
-
-	const src = $derived(node.properties.src);
-	const alt = $derived(node.properties.alt as string | undefined);
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Image;
+	} = $props();
 
 	const transformedUrl = $derived(
-		transformUrl(src, streamdown.allowedImagePrefixes ?? [], streamdown.defaultOrigin)
+		transformUrl(token.href, streamdown.allowedImagePrefixes ?? [], streamdown.defaultOrigin)
 	);
 </script>
 
@@ -21,24 +24,21 @@
 	<Slot
 		props={{
 			src: transformedUrl,
-			alt,
+			alt: token.text,
 			children,
-			...props
+			token
 		}}
 		render={streamdown.snippets.img}
 	>
-		<div class={clsx(streamdown.theme.img.base, className)} {...props}>
-			<img class={streamdown.theme.img.image} src={transformedUrl} {alt} />
+		<div class={streamdown.theme.img.base}>
+			<img class={streamdown.theme.img.image} src={transformedUrl} alt={token.text} />
 		</div>
 	</Slot>
 {:else}
 	<span
-		class={clsx(
-			'inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400',
-			className?.toString()
-		)}
-		title={`Blocked URL: ${src}`}
+		class="inline-block rounded bg-gray-200 px-3 py-1 text-sm text-gray-600 dark:bg-gray-700 dark:text-gray-400"
+		title={`Blocked URL: ${token.href}`}
 	>
-		[Image blocked: {alt || 'No description'}]
+		[Image blocked: {token.text || 'No description'}]
 	</span>
 {/if}

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

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

package/dist/Elements/InlineCode.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.Codespan;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.inlineCode}
 >
-	<code {...props} class={clsx(streamdown.theme.inlineCode.base, className)}>
-		{@render children()}
+	<code class={streamdown.theme.inlineCode.base}>
+		{token.text}
 	</code>
 </Slot>

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

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

package/dist/Elements/Li.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.ListItem;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.li}
 >
-	<li {...props} class={clsx(streamdown.theme.li.base, className)}>
+	<li class={streamdown.theme.li.base}>
 		{@render children()}
 	</li>
 </Slot>

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

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

package/dist/Elements/Math.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import { useStreamdown } from '../Streamdown.svelte';
-	import { clsx } from 'clsx';
-	import type { ElementProps } from './element.js';
 	import Slot from './Slot.svelte';
+	import type { MathToken } from '../marked/index.js';
+	import type { Snippet } from 'svelte';
 	import type { KatexOptions } from 'katex';
 	import 'katex/dist/katex.min.css';
+
 	const streamdown = useStreamdown();
-	const { children, node, className, props }: ElementProps = $props();
-	const isInline = className?.some?.((c: string) => c.includes('inline')) ?? false;
+
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: MathToken;
+	} = $props();
+
+	const isInline = $derived(token.isInline);
+
+	console.log({ token });
 
 	let katexInstance = $state<typeof import('katex') | null>(null);
 
@@ -30,7 +41,7 @@
 				? streamdown.katexConfig(isInline)
 				: streamdown.katexConfig || {})
 		};
-		const code = ((node.children[0] as any)?.value as string) ?? '';
+		const code = token.text;
 		try {
 			return katexInstance.renderToString(code, config);
 		} catch (error) {
@@ -44,19 +55,18 @@
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.math}
 >
 	{#if isInline}
-		<span bind:this={inner} {...props} class={clsx(streamdown.theme.inlineMath.base, className)}>
+		<span bind:this={inner} class={streamdown.theme.inlineMath.base}>
 			{@html html}
 		</span>
 	{:else}
 		<div class="h-fit w-full">
 			<div class="overflow-x-auto">
-				<div bind:this={inner} {...props} class={clsx(streamdown.theme.math.base, className)}>
+				<div bind:this={inner} class={streamdown.theme.math.base}>
 					{@html html}
 				</div>
 			</div>

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

@@ -1,5 +1,10 @@
-import type { ElementProps } from './element.js';
+import type { MathToken } from '../marked/index.js';
+import type { Snippet } from 'svelte';
 import 'katex/dist/katex.min.css';
-declare const Math: import("svelte").Component<ElementProps, {}, "">;
+type $$ComponentProps = {
+    children: Snippet;
+    token: MathToken;
+};
+declare const Math: import("svelte").Component<$$ComponentProps, {}, "">;
 type Math = ReturnType<typeof Math>;
 export default Math;

package/dist/Elements/Mermaid.svelte

@@ -1,18 +1,24 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	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';
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';
 	import { usePanzoom } from '../utils/panzoom.svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: Tokens.Code;
+	} = $props();
 
-	const code = $derived((node.children[0] as any)?.value as string);
+	const code = $derived(token.text);
 	let mermaid = $state<any>(null);
 	onMount(async () => {
 		mermaid = (await import('mermaid')).default;
@@ -114,15 +120,13 @@
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.mermaid}
 >
 	{#if mermaid}
 		<div
-			{...props}
-			class={clsx(streamdown.theme.mermaid.base, className)}
+			class={streamdown.theme.mermaid.base}
 			{@attach (node) => renderMermaid(code, node)}
 			{@attach insider.attach}
 			data-expanded={'false'}
@@ -225,7 +229,7 @@
 			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
 		</div>
 	{:else}
-		<div {...props} class={clsx(streamdown.theme.mermaid.base, className)}></div>
+		<div class={streamdown.theme.mermaid.base}></div>
 	{/if}
 </Slot>
 

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

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

package/dist/Elements/Ol.svelte

@@ -1,23 +1,30 @@
 <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.List;
+	} = $props();
+
+	console.log({ token });
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.ol}
 >
-	<ol {...props} class={clsx(streamdown.theme.ol.base, className)}>
+	<ol class={streamdown.theme.ol.base}>
 		{@render children()}
 	</ol>
 </Slot>

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

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

package/dist/Elements/P.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.Paragraph;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.p}
 >
-	<p {...props} class={clsx(streamdown.theme.p.base, className)}>
+	<p class={streamdown.theme.p.base}>
 		{@render children()}
 	</p>
 </Slot>

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

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

package/dist/Elements/Strong.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.Strong;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.strong}
 >
-	<strong {...props} class={clsx(streamdown.theme.strong.base, className)}>
+	<strong class={streamdown.theme.strong.base}>
 		{@render children()}
 	</strong>
 </Slot>

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

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

package/dist/Elements/Sub.svelte

@@ -1,23 +1,27 @@
 <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 { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: any;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.sub}
 >
-	<sub {...props} class={clsx(streamdown.theme.sub.base, className)}>
+	<sub class={streamdown.theme.sub.base}>
 		{@render children()}
 	</sub>
 </Slot>

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

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

package/dist/Elements/Sup.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 { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: any;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.sup}
 >
-	<sup {...props} class={clsx(streamdown.theme.sup.base, className)}>
+	<sup class={streamdown.theme.sup.base}>
 		{@render children()}
 	</sup>
 </Slot>

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

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

package/dist/Elements/Table.svelte

@@ -1,24 +1,29 @@
 <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.Table;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.table}
 >
-	<div class={clsx(streamdown.theme.table.base, className)}>
-		<table class={streamdown.theme.table.table} {...props}>
+	<div class={streamdown.theme.table.base}>
+		<table class={streamdown.theme.table.table}>
 			{@render children()}
 		</table>
 	</div>

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

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