svelte-streamdown 1.0.8 → 2.0.0

package/dist/Elements/Element.svelte

@@ -1,80 +1,208 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import A from './A.svelte';
-	import Blockquote from './Blockquote.svelte';
+	import Link from './Link.svelte';
 	import Code from './Code.svelte';
-	import Hr from './Hr.svelte';
 	import Image from './Image.svelte';
-	import Li from './Li.svelte';
-	import Ol from './Ol.svelte';
-	import P from './P.svelte';
-	import Strong from './Strong.svelte';
-	import Sub from './Sub.svelte';
-	import Sup from './Sup.svelte';
-	import Table from './Table.svelte';
-	import Tbody from './Tbody.svelte';
-	import Td from './Td.svelte';
-	import Th from './Th.svelte';
-	import Thead from './Thead.svelte';
-	import Tr from './Tr.svelte';
-	import Ul from './Ul.svelte';
-	import InlineCode from './InlineCode.svelte';
 	import Mermaid from './Mermaid.svelte';
 	import Math from './Math.svelte';
-	import Em from './Em.svelte';
-	import Del from './Del.svelte';
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
-	import Heading from './Heading.svelte';
+	import Slot from './Slot.svelte';
+	import { useStreamdown } from '../Streamdown.js';
+	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
+	const id = $props.id();
+	const streamdown = useStreamdown();
 </script>
 
 {#if token.type === 'heading'}
-	<Heading {token} {children} />
+	{@const level = `h${token.depth}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'}
+	{@const className = streamdown.theme[level].base}
+	<Slot
+		props={{
+			children,
+			token
+		}}
+		render={streamdown.snippets.heading}
+	>
+		<svelte:element this={level} class={className}>
+			{@render children()}
+		</svelte:element>
+	</Slot>
 {:else if token.type === 'paragraph'}
-	<P {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.paragraph}>
+		<p class={streamdown.theme.paragraph.base}>
+			{@render children()}
+		</p>
+	</Slot>
 {:else if token.type === 'blockquote'}
-	<Blockquote {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.blockquote}>
+		<blockquote class={streamdown.theme.blockquote.base}>
+			{@render children()}
+		</blockquote>
+	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
-	<Mermaid {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.code}>
+		<Mermaid {token} />
+	</Slot>
 {:else if token.type === 'code'}
-	<Code {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.code}>
+		<Code {token} />
+	</Slot>
 {:else if token.type === 'codespan'}
-	<InlineCode {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
+		<code class={streamdown.theme.codespan.base}>
+			{token.text}
+		</code>
+	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
-		<Ol {token} {children} />
+		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
+			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
+				{@render children()}
+			</ol>
+		</Slot>
 	{:else}
-		<Ul {token} {children} />
+		<Slot props={{ children, token }} render={streamdown.snippets.ul}>
+			<ul class={streamdown.theme.ul.base}>
+				{@render children()}
+			</ul>
+		</Slot>
 	{/if}
 {:else if token.type === 'list_item'}
-	<Li {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.li}>
+		<li
+			style:list-style-type={token.task ? 'none' : undefined}
+			{...token.value && !token.task ? { value: token.value } : {}}
+			class={streamdown.theme.li.base}
+		>
+			{#if token.task}
+				<input
+					disabled
+					type="checkbox"
+					checked={token.checked}
+					class={streamdown.theme.li.checkbox}
+				/>
+			{/if}
+			{@render children()}
+		</li>
+	</Slot>
 {: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} />
+	<Slot props={{ token, children }} render={streamdown.snippets.table}>
+		<div class={streamdown.theme.table.base}>
+			<table class={streamdown.theme.table.table}>
+				{@render children()}
+			</table>
+		</div>
+	</Slot>
+{:else if token.type === 'thead'}
+	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
+		<thead class={streamdown.theme.thead.base}>
+			{@render children?.()}
+		</thead>
+	</Slot>
+{:else if token.type === 'tbody'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
+		<tbody class={streamdown.theme.tbody.base}>
+			{@render children?.()}
+		</tbody>
+	</Slot>
+{:else if token.type === 'tfoot'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
+		<tfoot class={streamdown.theme.tfoot.base}>
+			{@render children?.()}
+		</tfoot>
+	</Slot>
+{:else if token.type === 'tr'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
+		<tr class={streamdown.theme.tr.base}>
+			{@render children?.()}
+		</tr>
+	</Slot>
+{:else if token.type === 'td'}
+	{#if token.rowspan > 0}
+		<Slot props={{ children, token }} render={streamdown.snippets.td}>
+			<td
+				class={streamdown.theme.td.base}
+				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
+				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
+				{...token.align && ['left', 'center', 'right', 'justify', 'char'].includes(token.align)
+					? { align: token.align as 'left' | 'center' | 'right' | 'justify' | 'char' }
+					: { align: 'left' }}
+			>
+				{@render children?.()}
+			</td>
+		</Slot>
+	{/if}
+{:else if token.type === 'th'}
+	{#if token.rowspan > 0}
+		<Slot props={{ children, token }} render={streamdown.snippets.th}>
+			<th
+				class={streamdown.theme.th.base}
+				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
+				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
+				{...token.align && ['left', 'center', 'right', 'justify', 'char'].includes(token.align)
+					? { align: token.align as 'left' | 'center' | 'right' | 'justify' | 'char' }
+					: { align: 'left' }}
+			>
+				{@render children?.()}
+			</th>
+		</Slot>
+	{/if}
 {:else if token.type === 'image'}
 	<Image {token} {children} />
 {:else if token.type === 'link'}
-	<A {token} {children} />
+	<Link {token} {children} />
+{:else if token.type === 'sub'}
+	<Slot props={{ children, token }} render={streamdown.snippets.sub}>
+		<sub class={streamdown.theme.sub.base}>
+			{@render children()}
+		</sub>
+	</Slot>
+{:else if token.type === 'sup'}
+	<Slot props={{ children, token }} render={streamdown.snippets.sup}>
+		<sup class={streamdown.theme.sup.base}>
+			{@render children()}
+		</sup>
+	</Slot>
 {:else if token.type === 'strong'}
-	<Strong {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.strong}>
+		<strong class={streamdown.theme.strong.base}>
+			{@render children()}
+		</strong>
+	</Slot>
 {:else if token.type === 'em'}
-	<Em {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.em}>
+		<em class={streamdown.theme.em.base}>
+			{@render children()}
+		</em>
+	</Slot>
 {:else if token.type === 'del'}
-	<Del {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.del}>
+		<del class={streamdown.theme.del.base}>
+			{@render children()}
+		</del>
+	</Slot>
 {:else if token.type === 'hr'}
-	<Hr {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.hr}>
+		<hr class={streamdown.theme.hr.base} />
+	</Slot>
 {:else if token.type === 'br'}
 	<br />
 {:else if token.type === 'math'}
-	<Math {token} {children} />
+	<Slot
+		props={{
+			children,
+			token
+		}}
+		render={streamdown.snippets.math}
+	>
+		<Math {token} />
+	</Slot>
 {:else if token.type === 'alert'}
 	<Alert {token} {children} />
+{:else if token.type === 'footnoteRef'}
+	<FootnoteRef {token} />
 {:else}
 	<!-- For tokens we don't handle specifically, render children or fallback -->
 	{@render children?.()}

package/dist/Elements/FootnoteRef.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { useStreamdown } from '../Streamdown.js';
+	import Slot from './Slot.svelte';
+	import type { FootnoteRef } from '../marked/marked-footnotes.js';
+	import {
+		autoPlacement,
+		computePosition,
+		autoUpdate,
+		hide,
+		offset,
+		shift
+	} from '@floating-ui/dom';
+	import { useClickOutside } from '../utils/useClickOutside.svelte.js';
+	import { scale } from 'svelte/transition';
+	import Block from '../Block.svelte';
+	import { useKeyDown } from '../utils/useKeyDown.svelte.js';
+
+	const streamdown = useStreamdown();
+
+	const {
+		token
+	}: {
+		token: FootnoteRef;
+	} = $props();
+
+	const id = $props.id();
+	let isOpen = $state(false);
+
+	let reference = $state<HTMLButtonElement>();
+	let content = $state<HTMLDialogElement>();
+
+	const clickOutside = useClickOutside({
+		get isActive() {
+			return isOpen;
+		},
+		callback: () => {
+			isOpen = false;
+		}
+	});
+
+	useKeyDown({
+		keys: ['Escape'],
+		get isActive() {
+			return isOpen;
+		},
+		callback: () => {
+			isOpen = false;
+		}
+	});
+
+	const place = async (node: HTMLElement) => {
+		const middleware = [
+			hide(),
+			offset(0),
+			,
+			shift({
+				mainAxis: true
+			}),
+			autoPlacement({
+				allowedPlacements: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start']
+			})
+		];
+		const { x, y, strategy, placement, middlewareData } = await computePosition(reference!, node, {
+			strategy: 'fixed',
+			middleware
+		});
+
+		Object.assign(node.style, {
+			position: strategy,
+			left: `${x}px`,
+			top: `${y}px`
+		});
+	};
+
+	const popoverAttachment = (node: HTMLDialogElement) => {
+		content = node;
+		void place(node);
+		const off = autoUpdate(reference!, node, () => place(node));
+		return () => {
+			off();
+		};
+	};
+</script>
+
+{#if isOpen}
+	<Slot
+		props={{
+			token,
+			isOpen
+		}}
+		render={streamdown.snippets.footnotePopover}
+	>
+		<dialog
+			id={'footnote-popover-' + id}
+			aria-modal="false"
+			transition:scale|global={{ start: 0.95, duration: 100 }}
+			{@attach clickOutside.attachment}
+			{@attach popoverAttachment}
+			open
+			class={`${streamdown.theme.footnotePopover.base}`}
+		>
+			{#each token.content.lines as line}
+				<Block block={line} />
+			{/each}
+		</dialog>
+	</Slot>
+{/if}
+
+<Slot
+	props={{
+		token
+	}}
+	render={streamdown.snippets.footnoteRef}
+>
+	<button
+		bind:this={reference}
+		class={streamdown.theme.footnoteRef.base}
+		onclick={() => (isOpen = !isOpen)}
+		aria-expanded={isOpen}
+		aria-haspopup="dialog"
+		aria-controls={'footnote-popover-' + id}
+		{@attach clickOutside.attachment}
+	>
+		{token.label.replace('^', '')}
+	</button>
+</Slot>

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

@@ -0,0 +1,7 @@
+import type { FootnoteRef } from '../marked/marked-footnotes.js';
+type $$ComponentProps = {
+    token: FootnoteRef;
+};
+declare const FootnoteRef: import("svelte").Component<$$ComponentProps, {}, "">;
+type FootnoteRef = ReturnType<typeof FootnoteRef>;
+export default FootnoteRef;

package/dist/Elements/Image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
@@ -28,10 +28,10 @@
 			children,
 			token
 		}}
-		render={streamdown.snippets.img}
+		render={streamdown.snippets.image}
 	>
-		<div class={streamdown.theme.img.base}>
-			<img class={streamdown.theme.img.image} src={transformedUrl} alt={token.text} />
+		<div class={streamdown.theme.image.base}>
+			<img class={streamdown.theme.image.image} src={transformedUrl} alt={token.text} />
 		</div>
 	</Slot>
 {:else}

package/dist/Elements/{A.svelte → Link.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import { transformUrl } from '../utils/url.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
@@ -30,10 +30,10 @@
 			children,
 			token
 		}}
-		render={streamdown.snippets.a}
+		render={streamdown.snippets.link}
 	>
 		<a
-			class={streamdown.theme.a.base}
+			class={streamdown.theme.link.base}
 			href={transformedUrl}
 			target="_blank"
 			rel="noopener noreferrer"
@@ -43,7 +43,7 @@
 	</Slot>
 {:else}
 	<span
-		class={streamdown.theme.a.blocked}
+		class={streamdown.theme.link.blocked}
 		title={token.title ? `Blocked URL: ${token.href}` : undefined}
 	>
 		{@render children()} [blocked]

package/dist/Elements/{A.svelte.d.ts → Link.svelte.d.ts}

@@ -4,6 +4,6 @@ type $$ComponentProps = {
     children: Snippet;
     token: Tokens.Link;
 };
-declare const A: import("svelte").Component<$$ComponentProps, {}, "">;
-type A = ReturnType<typeof A>;
-export default A;
+declare const Link: import("svelte").Component<$$ComponentProps, {}, "">;
+type Link = ReturnType<typeof Link>;
+export default Link;

package/dist/Elements/Math.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { MathToken } from '../marked/index.js';
 	import type { Snippet } from 'svelte';
@@ -10,17 +10,13 @@
 	const streamdown = useStreamdown();
 
 	const {
-		children,
 		token
 	}: {
-		children: Snippet;
 		token: MathToken;
 	} = $props();
 
 	const isInline = $derived(token.isInline);
 
-	console.log({ token });
-
 	let katexInstance = $state<typeof import('katex') | null>(null);
 
 	onMount(() => {
@@ -42,6 +38,7 @@
 				: streamdown.katexConfig || {})
 		};
 		const code = token.text;
+
 		try {
 			return katexInstance.renderToString(code, config);
 		} catch (error) {
@@ -52,24 +49,16 @@
 	});
 </script>
 
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.math}
->
-	{#if isInline}
-		<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} class={streamdown.theme.math.base}>
-					{@html html}
-				</div>
+{#if isInline}
+	<span bind:this={inner} class={streamdown.theme.math.inline}>
+		{@html html}
+	</span>
+{:else}
+	<div class="h-fit w-full">
+		<div class="overflow-x-auto">
+			<div bind:this={inner} class={streamdown.theme.math.block}>
+				{@html html}
 			</div>
 		</div>
-	{/if}
-</Slot>
+	</div>
+{/if}

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

@@ -1,8 +1,6 @@
 import type { MathToken } from '../marked/index.js';
-import type { Snippet } from 'svelte';
 import 'katex/dist/katex.min.css';
 type $$ComponentProps = {
-    children: Snippet;
     token: MathToken;
 };
 declare const Math: import("svelte").Component<$$ComponentProps, {}, "">;