svelte-streamdown 1.0.9 → 2.0.1

package/dist/Elements/Element.svelte

@@ -3,13 +3,12 @@
 	import Link from './Link.svelte';
 	import Code from './Code.svelte';
 	import Image from './Image.svelte';
-	import Table from './Table.svelte';
 	import Mermaid from './Mermaid.svelte';
 	import Math from './Math.svelte';
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const id = $props.id();
@@ -43,9 +42,13 @@
 		</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'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
 		<code class={streamdown.theme.codespan.base}>
@@ -54,8 +57,6 @@
 	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
-		{@const firstItemValue = token.items[0]?.value || 1}
-		{@const counterName = `counter-${id}`}
 		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
 			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
 				{@render children()}
@@ -72,7 +73,7 @@
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
 			style:list-style-type={token.task ? 'none' : undefined}
-			value={token.value}
+			{...token.value && !token.task ? { value: token.value } : {}}
 			class={streamdown.theme.li.base}
 		>
 			{#if token.task}
@@ -87,31 +88,67 @@
 		</li>
 	</Slot>
 {:else if token.type === 'table'}
-	<Table {token} {children} />
-{:else if token.type === 'tableRow'}
-	<Slot props={{ token, children }} render={streamdown.snippets.tableRow}>
-		<tr class={streamdown.theme.tableRow.base}>
-			{@render children?.()}
-		</tr>
+	<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 === 'tableHead'}
-	<Slot props={{ token, children }} render={streamdown.snippets.tableHead}>
-		<thead class={streamdown.theme.tableHead.base}>
+{: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 === 'td'}
-	<Slot props={{ children, token }} render={streamdown.snippets.td}>
-		<td class={streamdown.theme.td.base}>
+{:else if token.type === 'tbody'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
+		<tbody class={streamdown.theme.tbody.base}>
 			{@render children?.()}
-		</td>
+		</tbody>
 	</Slot>
-{:else if token.type === 'th'}
-	<Slot props={{ children, token }} render={streamdown.snippets.th}>
-		<th class={streamdown.theme.th.base}>
+{: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?.()}
-		</th>
+		</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'}
@@ -153,7 +190,15 @@
 {: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'}

package/dist/Elements/FootnoteRef.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
-	import { autoPlacement, computePosition, hide, offset, shift, size } from '@floating-ui/dom';
+	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';
@@ -16,6 +23,7 @@
 		token: FootnoteRef;
 	} = $props();
 
+	const id = $props.id();
 	let isOpen = $state(false);
 
 	let reference = $state<HTMLButtonElement>();
@@ -44,13 +52,13 @@
 		const middleware = [
 			hide(),
 			offset(0),
+			,
 			shift({
 				mainAxis: true
 			}),
 			autoPlacement({
 				allowedPlacements: ['top', 'top-end', 'top-start', 'bottom', 'bottom-end', 'bottom-start']
-			}),
-			size()
+			})
 		];
 		const { x, y, strategy, placement, middlewareData } = await computePosition(reference!, node, {
 			strategy: 'fixed',
@@ -67,9 +75,9 @@
 	const popoverAttachment = (node: HTMLDialogElement) => {
 		content = node;
 		void place(node);
-
+		const off = autoUpdate(reference!, node, () => place(node));
 		return () => {
-			//
+			off();
 		};
 	};
 </script>
@@ -83,6 +91,8 @@
 		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}
@@ -106,6 +116,9 @@
 		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('^', '')}

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';

package/dist/Elements/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';

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,7 +38,7 @@
 				: streamdown.katexConfig || {})
 		};
 		const code = token.text;
-		console.log({ code });
+
 		try {
 			return katexInstance.renderToString(code, config);
 		} catch (error) {
@@ -53,24 +49,16 @@
 	});
 </script>
 
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.math}
->
-	{#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>
+{#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, {}, "">;

package/dist/Elements/Mermaid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';
@@ -11,10 +11,8 @@
 	const streamdown = useStreamdown();
 
 	const {
-		children,
 		token
 	}: {
-		children: Snippet;
 		token: Tokens.Code;
 	} = $props();
 
@@ -117,121 +115,113 @@
 	};
 </script>
 
-<Slot
-	props={{
-		children,
-		token
-	}}
-	render={streamdown.snippets.mermaid}
->
-	{#if mermaid}
-		<div
-			class={streamdown.theme.mermaid.base}
-			{@attach (node) => renderMermaid(code, node)}
-			{@attach insider.attach}
-			data-expanded={'false'}
-		>
-			<div class={streamdown.theme.mermaid.buttons}>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom to fit"
-					onclick={() => panzoom.zoomToFit()}
-					data-panzoom-ignore
-				>
-					<svg
-						class={streamdown.theme.mermaid.icon}
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path
-							d="M21 17v2a2 2 0 0 1-2 2h-2"
-						/><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect
-							width="10"
-							height="8"
-							x="7"
-							y="8"
-							rx="1"
-						/></svg
-					>
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom in"
-					onclick={() => panzoom.zoomIn()}
-					data-panzoom-ignore
+{#if mermaid}
+	<div
+		class={streamdown.theme.mermaid.base}
+		{@attach (node) => renderMermaid(code, node)}
+		{@attach insider.attach}
+		data-expanded={'false'}
+	>
+		<div class={streamdown.theme.mermaid.buttons}>
+			<button
+				class={streamdown.theme.mermaid.button}
+				aria-label="Zoom to fit"
+				onclick={() => panzoom.zoomToFit()}
+				data-panzoom-ignore
+			>
+				<svg
+					class={streamdown.theme.mermaid.icon}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					><path d="M3 7V5a2 2 0 0 1 2-2h2" /><path d="M17 3h2a2 2 0 0 1 2 2v2" /><path
+						d="M21 17v2a2 2 0 0 1-2 2h-2"
+					/><path d="M7 21H5a2 2 0 0 1-2-2v-2" /><rect
+						width="10"
+						height="8"
+						x="7"
+						y="8"
+						rx="1"
+					/></svg
 				>
-					<svg
-						class={streamdown.theme.mermaid.icon}
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-							x1="11"
-							x2="11"
-							y1="8"
-							y2="14"
-						/><line x1="8" x2="14" y1="11" y2="11" /></svg
-					>
-				</button>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Zoom out"
-					onclick={() => panzoom.zoomOut()}
-					data-panzoom-ignore
-					><svg
-						class={streamdown.theme.mermaid.icon}
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
-							x1="8"
-							x2="14"
-							y1="11"
-							y2="11"
-						/></svg
-					></button
+			</button>
+			<button
+				class={streamdown.theme.mermaid.button}
+				aria-label="Zoom in"
+				onclick={() => panzoom.zoomIn()}
+				data-panzoom-ignore
+			>
+				<svg
+					class={streamdown.theme.mermaid.icon}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+						x1="11"
+						x2="11"
+						y1="8"
+						y2="14"
+					/><line x1="8" x2="14" y1="11" y2="11" /></svg
 				>
-				<button
-					class={streamdown.theme.mermaid.button}
-					aria-label="Toggle expand"
-					onclick={() => panzoom.toggleExpand()}
-					data-panzoom-ignore
+			</button>
+			<button
+				class={streamdown.theme.mermaid.button}
+				aria-label="Zoom out"
+				onclick={() => panzoom.zoomOut()}
+				data-panzoom-ignore
+				><svg
+					class={streamdown.theme.mermaid.icon}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					><circle cx="11" cy="11" r="8" /><line x1="21" x2="16.65" y1="21" y2="16.65" /><line
+						x1="8"
+						x2="14"
+						y1="11"
+						y2="11"
+					/></svg
+				></button
+			>
+			<button
+				class={streamdown.theme.mermaid.button}
+				aria-label="Toggle expand"
+				onclick={() => panzoom.toggleExpand()}
+				data-panzoom-ignore
+			>
+				<svg
+					class={streamdown.theme.mermaid.icon}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					><path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path
+						d="M21 8V3h-5"
+					/><path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path
+						d="M9 9 3 3"
+					/></svg
 				>
-					<svg
-						class={streamdown.theme.mermaid.icon}
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						><path d="m15 15 6 6" /><path d="m15 9 6-6" /><path d="M21 16v5h-5" /><path
-							d="M21 8V3h-5"
-						/><path d="M3 16v5h5" /><path d="m3 21 6-6" /><path d="M3 8V3h5" /><path
-							d="M9 9 3 3"
-						/></svg
-					>
-				</button>
-			</div>
-			<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+			</button>
 		</div>
-	{:else}
-		<div class={streamdown.theme.mermaid.base}></div>
-	{/if}
-</Slot>
+		<svg {@attach panzoom.attach} data-mermaid-svg></svg>
+	</div>
+{:else}
+	<div class={streamdown.theme.mermaid.base}></div>
+{/if}
 
 <style>
 	/* View Transition styles for zoom effect */
@@ -269,7 +259,7 @@
 		}
 	}
 
-	[data-expanded='true'] {
+	:global([data-expanded='true']) {
 		::view-transition-old(panzoom-element),
 		::view-transition-new(panzoom-element) {
 			animation-duration: 0.3s;

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

@@ -1,7 +1,5 @@
 import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
 type $$ComponentProps = {
-    children: Snippet;
     token: Tokens.Code;
 };
 declare const Mermaid: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/Elements/Table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { Tokens } from 'marked';
 	import type { Snippet } from 'svelte';

package/dist/Streamdown.d.ts

@@ -3,14 +3,62 @@ import type { Snippet } from 'svelte';
 import type { Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
-import type { StreamdownContext } from './Streamdown.svelte';
-import type { StreamdownToken } from './marked/index.js';
-type PredefinedElements = 'heading' | 'paragraph' | 'blockquote' | 'code' | 'codespan' | 'ul' | 'ol' | 'li' | 'table' | 'tableRow' | 'tableHead' | 'td' | 'th' | 'image' | 'link' | 'strong' | 'em' | 'del' | 'hr' | 'br' | 'math' | 'alert' | 'mermaid' | 'footnoteRef' | 'footnotePopover' | 'sup' | 'sub';
+export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme'> {
+    snippets: Snippets;
+    shikiTheme: BundledTheme;
+    theme: Theme;
+}
+export declare class StreamdownContext {
+    footnotes: {
+        refs: Map<string, FootnoteRef>;
+        footnotes: Map<string, Footnote>;
+    };
+    constructor(props: Omit<StreamdownProps, keyof Snippets | 'class'> & {
+        snippets: Snippets;
+    });
+}
+export declare const useStreamdown: () => StreamdownContext;
+import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoot, THeadRow, TRow, TD, TH } from './marked/index.js';
+import type { Tokens } from 'marked';
+import type { ListItemToken, ListToken } from './marked/marked-list.js';
+import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
+type TokenSnippet = {
+    heading: Tokens.Heading;
+    paragraph: Tokens.Paragraph;
+    blockquote: Tokens.Blockquote;
+    code: Tokens.Code;
+    codespan: Tokens.Codespan;
+    ul: ListToken;
+    ol: ListToken;
+    li: ListItemToken;
+    table: TableToken;
+    thead: THead;
+    tbody: TBody;
+    tfoot: TFoot;
+    tr: THeadRow | TRow;
+    td: TD;
+    th: TH;
+    image: Tokens.Image;
+    link: Tokens.Link;
+    strong: Tokens.Strong;
+    em: Tokens.Em;
+    del: Tokens.Del;
+    hr: Tokens.Hr;
+    br: Tokens.Br;
+    math: MathToken;
+    alert: AlertToken;
+    mermaid: Tokens.Code;
+    footnoteRef: FootnoteRef;
+    footnotePopover: FootnoteToken;
+    sup: SubSupToken;
+    sub: SubSupToken;
+};
+type PredefinedElements = keyof TokenSnippet;
 export type Snippets = {
     [K in PredefinedElements]?: Snippet<[
         {
             children: Snippet;
-            token: StreamdownToken;
+            token: TokenSnippet[K];
         }
     ]>;
 };
@@ -38,11 +86,5 @@ export type StreamdownProps = {
             important?: string;
         };
     };
-    customElements?: Record<string, Snippet<[
-        {
-            children: Snippet;
-            token: StreamdownToken;
-        }
-    ]>>;
 } & Partial<Snippets>;
 export {};