svelte-streamdown 1.0.9 → 2.0.0

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 {};

package/dist/Streamdown.js

@@ -1 +1,19 @@
-export {};
+import { getContext, setContext } from 'svelte';
+export class StreamdownContext {
+    footnotes = {
+        refs: new Map(),
+        footnotes: new Map()
+    };
+    constructor(props) {
+        bind(this, props);
+        setContext('streamdown', this);
+    }
+}
+export const useStreamdown = () => {
+    const context = getContext('streamdown');
+    if (!context) {
+        throw new Error('Streamdown context not found');
+    }
+    return context;
+};
+import { bind } from './utils/bind.js';

package/dist/Streamdown.svelte

@@ -1,42 +1,10 @@
-<script lang="ts" module>
-	import { getContext, setContext } from 'svelte';
-
-	export interface StreamdownContext
-		extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme'> {
-		snippets: Snippets;
-		shikiTheme: BundledTheme;
-		theme: Theme;
-	}
-	export class StreamdownContext {
-		footnotes = {
-			refs: new Map<string, FootnoteRef>(),
-			footnotes: new Map<string, Footnote>()
-		};
-		constructor(props: Omit<StreamdownProps, keyof Snippets | 'class'> & { snippets: Snippets }) {
-			bind(this, props);
-			setContext('streamdown', this);
-		}
-	}
-	export const useStreamdown = () => {
-		const context = getContext<StreamdownContext>('streamdown');
-		if (!context) {
-			throw new Error('Streamdown context not found');
-		}
-		return context;
-	};
-</script>
-
 <script lang="ts">
 	import Block from './Block.svelte';
-	import type { Snippets, StreamdownProps } from './Streamdown.js';
-	import { bind } from './utils/bind.js';
+	import { StreamdownContext, type StreamdownProps } from './Streamdown.js';
 	import 'katex/dist/katex.min.css';
-	import { mergeTheme, type Theme, shadcnTheme } from './theme.js';
-	import type { BundledTheme } from 'shiki';
+	import { mergeTheme, shadcnTheme } from './theme.js';
 	import { parseBlocks } from './marked/index.js';
-	import { SvelteMap } from 'svelte/reactivity';
-	import type { FootnoteRef } from './marked/marked-footnotes.js';
-	import type { Footnote } from './marked/marked-footnotes.js';
+
 	let {
 		content = '',
 		class: className,
@@ -52,13 +20,10 @@
 		translations,
 		baseTheme,
 		mergeTheme: shouldMergeTheme = true,
-		customElements,
 		streamdown = $bindable(),
 		...snippets
 	}: StreamdownProps = $props();
 
-	console.log('render');
-
 	streamdown = new StreamdownContext({
 		get content() {
 			return content;
@@ -98,9 +63,6 @@
 		get translations() {
 			return translations;
 		},
-		get customElements() {
-			return customElements;
-		},
 		get shikiPreloadThemes() {
 			return shikiPreloadThemes;
 		}

package/dist/Streamdown.svelte.d.ts

@@ -1,24 +1,5 @@
-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 { Snippets, StreamdownProps } from './Streamdown.js';
+import { type StreamdownProps } from './Streamdown.js';
 import 'katex/dist/katex.min.css';
-import { type Theme } from './theme.js';
-import type { BundledTheme } from 'shiki';
-import type { FootnoteRef } from './marked/marked-footnotes.js';
-import type { Footnote } from './marked/marked-footnotes.js';
 declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown">;
 type Streamdown = ReturnType<typeof Streamdown>;
 export default Streamdown;

package/dist/marked/index.d.ts

@@ -4,26 +4,9 @@ import { type FootnoteToken } from './marked-footnotes.js';
 import { type MathToken } from './marked-math.js';
 import { type SubSupToken } from './marked-subsup.js';
 import { type ListItemToken, type ListToken } from './marked-list.js';
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | TableRow | TD | TH | TableHead;
-export type TD = Tokens.TableCell & {
-    type: 'td';
-    raw: string;
-};
-export type TH = Tokens.TableCell & {
-    type: 'th';
-    raw: string;
-};
-export type TableRow = {
-    type: 'tableRow';
-    raw: string;
-    tokens: (TD | TH)[];
-    isHeader: boolean;
-};
-export type TableHead = {
-    type: 'tableHead';
-    raw: string;
-    tokens: TableRow[];
-};
+import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, type TRow, type TH, type TD } from './marked-table.js';
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD;
+export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string) => StreamdownToken[];
 export declare const parseBlocks: (markdown: string) => string[];
 export type { MathToken, AlertToken, FootnoteToken, SubSupToken };