svelte-streamdown 1.0.8 → 2.0.0

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/Elements/index.d.ts

@@ -1,28 +1,9 @@
-export { default as A } from './A.svelte';
-export { default as Blockquote } from './Blockquote.svelte';
+export { default as Alert } from './Alert.svelte';
 export { default as Code } from './Code.svelte';
-export { default as CodeBlock } from './Code.svelte';
-export { default as Heading } from './Heading.svelte';
-export { default as Hr } from './Hr.svelte';
+export { default as Element } from './Element.svelte';
 export { default as Image } from './Image.svelte';
-export { default as Li } from './Li.svelte';
-export { default as Ol } from './Ol.svelte';
-export { default as P } from './P.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Math } from './Math.svelte';
+export { default as Mermaid } from './Mermaid.svelte';
 export { default as Slot } from './Slot.svelte';
-export { default as Strong } from './Strong.svelte';
-export { default as Sub } from './Sub.svelte';
-export { default as Sup } from './Sup.svelte';
 export { default as Table } from './Table.svelte';
-export { default as Tbody } from './Tbody.svelte';
-export { default as Td } from './Td.svelte';
-export { default as Th } from './Th.svelte';
-export { default as Thead } from './Thead.svelte';
-export { default as Tr } from './Tr.svelte';
-export { default as Ul } from './Ul.svelte';
-export { default as InlineCode } from './InlineCode.svelte';
-export { default as Mermaid } from './Mermaid.svelte';
-export { default as Math } from './Math.svelte';
-export { default as Em } from './Em.svelte';
-export { default as Del } from './Del.svelte';
-export { default as Alert } from './Alert.svelte';
-export { default as Element } from './Element.svelte';

package/dist/Elements/index.js

@@ -1,28 +1,9 @@
-export { default as A } from './A.svelte';
-export { default as Blockquote } from './Blockquote.svelte';
+export { default as Alert } from './Alert.svelte';
 export { default as Code } from './Code.svelte';
-export { default as CodeBlock } from './Code.svelte';
-export { default as Heading } from './Heading.svelte';
-export { default as Hr } from './Hr.svelte';
+export { default as Element } from './Element.svelte';
 export { default as Image } from './Image.svelte';
-export { default as Li } from './Li.svelte';
-export { default as Ol } from './Ol.svelte';
-export { default as P } from './P.svelte';
+export { default as Link } from './Link.svelte';
+export { default as Math } from './Math.svelte';
+export { default as Mermaid } from './Mermaid.svelte';
 export { default as Slot } from './Slot.svelte';
-export { default as Strong } from './Strong.svelte';
-export { default as Sub } from './Sub.svelte';
-export { default as Sup } from './Sup.svelte';
 export { default as Table } from './Table.svelte';
-export { default as Tbody } from './Tbody.svelte';
-export { default as Td } from './Td.svelte';
-export { default as Th } from './Th.svelte';
-export { default as Thead } from './Thead.svelte';
-export { default as Tr } from './Tr.svelte';
-export { default as Ul } from './Ul.svelte';
-export { default as InlineCode } from './InlineCode.svelte';
-export { default as Mermaid } from './Mermaid.svelte';
-export { default as Math } from './Math.svelte';
-export { default as Em } from './Em.svelte';
-export { default as Del } from './Del.svelte';
-export { default as Alert } from './Alert.svelte';
-export { default as Element } from './Element.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 = 'a' | 'heading' | 'paragraph' | 'code' | 'inlineCode' | 'img' | 'ul' | 'ol' | 'li' | 'hr' | 'alert' | 'strong' | 'blockquote' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'sup' | 'sub' | 'pre' | 'mermaid' | 'math' | 'inlineMath' | 'em' | 'del';
+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,34 +1,8 @@
-<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 {
-		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';
 
 	let {
@@ -46,13 +20,10 @@
 		translations,
 		baseTheme,
 		mergeTheme: shouldMergeTheme = true,
-		customElements,
 		streamdown = $bindable(),
 		...snippets
 	}: StreamdownProps = $props();
 
-	console.log('render');
-
 	streamdown = new StreamdownContext({
 		get content() {
 			return content;
@@ -92,9 +63,6 @@
 		get translations() {
 			return translations;
 		},
-		get customElements() {
-			return customElements;
-		},
 		get shikiPreloadThemes() {
 			return shikiPreloadThemes;
 		}

package/dist/Streamdown.svelte.d.ts

@@ -1,18 +1,5 @@
-export interface StreamdownContext extends Omit<StreamdownProps, keyof Snippets | 'class' | 'theme' | 'shikiTheme'> {
-    snippets: Snippets;
-    shikiTheme: BundledTheme;
-    theme: Theme;
-}
-export declare class StreamdownContext {
-    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';
 declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown">;
 type Streamdown = ReturnType<typeof Streamdown>;
 export default Streamdown;

package/dist/marked/index.d.ts

@@ -2,15 +2,11 @@ import { type MarkedToken, type Tokens } from 'marked';
 import { type AlertToken } from './marked-alert.js';
 import { type FootnoteToken } from './marked-footnotes.js';
 import { type MathToken } from './marked-math.js';
-export type StreamdownToken = MarkedToken | MathToken | AlertToken | FootnoteToken | TableRow | TableCell;
-export type TableCell = Tokens.TableCell & {
-    type: 'tableCell';
-};
-export type TableRow = {
-    type: 'tableRow';
-    tokens: TableCell[];
-    isHeader: boolean;
-};
+import { type SubSupToken } from './marked-subsup.js';
+import { type ListItemToken, type ListToken } from './marked-list.js';
+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 };
+export type { MathToken, AlertToken, FootnoteToken, SubSupToken };

package/dist/marked/index.js

@@ -1,28 +1,40 @@
-import { Lexer, marked } from 'marked';
+import { Lexer, Marked } from 'marked';
 import markedAlert, {} from './marked-alert.js';
 import markedFootnote, {} from './marked-footnotes.js';
 import { markedMath } from './marked-math.js';
+import markedSubSup, {} from './marked-subsup.js';
+import { markedList } from './marked-list.js';
+import { markedTable } from './marked-table.js';
+const completeLexer = new Marked({
+    // Enable GFM features but disable built-in tables
+    gfm: true,
+    tokenizer: {
+        table: () => {
+            return false;
+        }
+    }
+})
+    .use(markedAlert())
+    .use(markedFootnote())
+    .use(markedMath())
+    .use(markedSubSup())
+    .use(markedList())
+    .use(markedTable());
+const blockLexer = new Lexer({
+    gfm: true,
+    extensions: {
+        childTokens: {},
+        renderers: {},
+        block: [markedFootnote().extensions[0].tokenizer, markedTable().extensions[0].tokenizer]
+    }
+});
 export const lex = (markdown) => {
-    return marked
-        .use({
-        gfm: true
-    })
-        .use(markedAlert())
-        .use(markedFootnote())
-        .use(markedMath())
+    return completeLexer
         .lexer(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
 export const parseBlocks = (markdown) => {
-    const lexer = new Lexer({
-        gfm: true,
-        extensions: {
-            childTokens: {},
-            renderers: {},
-            block: [markedFootnote().extensions[0].tokenizer]
-        }
-    });
-    return lexer.blockTokens(markdown, []).reduce((acc, block) => {
+    return blockLexer.blockTokens(markdown, []).reduce((acc, block) => {
         if (block.type === 'space' || block.type === 'footnote') {
             return acc;
         }

package/dist/marked/marked-alert.d.ts

@@ -1,4 +1,4 @@
-import type { Token } from 'marked';
+import type { Tokenizer, Tokens } from 'marked';
 import type { TokenizerExtensionFunction } from 'marked';
 type variantType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
 export declare function createSyntaxPattern(type: variantType): string;
@@ -9,7 +9,7 @@ export default function markedAlert(): {
         tokenizer: TokenizerExtensionFunction;
     }>;
 };
-export declare function processAlertToken(token: Token): void;
+export declare function processAlertToken(token: Tokens.Blockquote, tokenizer: Tokenizer): void;
 export type AlertToken = {
     type: 'alert';
     variant: variantType;