svelte-streamdown 1.0.6 → 1.0.7

package/dist/Elements/Tbody.svelte

@@ -1,23 +1,24 @@
 <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
+	}: {
+		children: Snippet;
+	} = $props();
 </script>
 
 <Slot
 	props={{
-		children,
-		node,
-		...props
+		children
 	}}
 	render={streamdown.snippets.tbody}
 >
-	<tbody {...props} class={clsx(streamdown.theme.tbody.base, className)}>
+	<tbody class={streamdown.theme.tbody.base}>
 		{@render children()}
 	</tbody>
 </Slot>

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

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

package/dist/Elements/Td.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 { TableCell } from '../marked/index.js';
+	import type { Snippet } from 'svelte';
 
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		children,
+		token
+	}: {
+		children: Snippet;
+		token: TableCell;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		token
 	}}
 	render={streamdown.snippets.td}
 >
-	<td {...props} class={clsx(streamdown.theme.td.base, className)}>
-		{@render children()}
+	<td class={streamdown.theme.td.base}>
+		{@render children?.()}
 	</td>
 </Slot>

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

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

package/dist/Elements/Th.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,
+		cell
+	}: {
+		children: Snippet;
+		cell: Tokens.TableCell;
+	} = $props();
 </script>
 
 <Slot
 	props={{
 		children,
-		node,
-		...props
+		cell
 	}}
 	render={streamdown.snippets.th}
 >
-	<th {...props} class={clsx(streamdown.theme.th.base, className)}>
+	<th class={streamdown.theme.th.base}>
 		{@render children()}
 	</th>
 </Slot>

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

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

package/dist/Elements/Thead.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';
+	import type { TableRow } from '../marked/index.js';
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		token,
+		children
+	}: {
+		token: TableRow;
+		children: Snippet;
+	} = $props();
 </script>
 
 <Slot
 	props={{
-		children,
-		node,
-		...props
+		token,
+		children
 	}}
 	render={streamdown.snippets.thead}
 >
-	<thead {...props} class={clsx(streamdown.theme.thead.base, className)}>
-		{@render children()}
+	<thead class={streamdown.theme.thead.base}>
+		{@render children?.()}
 	</thead>
 </Slot>

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

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

package/dist/Elements/Tr.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';
+	import type { TableRow } from '../marked/index.js';
 	const streamdown = useStreamdown();
 
-	const { children, node, className, props }: ElementProps = $props();
+	const {
+		token,
+		children
+	}: {
+		token: TableRow;
+		children: Snippet;
+	} = $props();
 </script>
 
 <Slot
 	props={{
-		children,
-		node,
-		...props
+		token,
+		children
 	}}
 	render={streamdown.snippets.tr}
 >
-	<tr {...props} class={clsx(streamdown.theme.tr.base, className)}>
-		{@render children()}
+	<tr class={streamdown.theme.tr}>
+		{@render children?.()}
 	</tr>
 </Slot>

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

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

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

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

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

package/dist/Elements/index.d.ts

@@ -2,12 +2,7 @@ export { default as A } from './A.svelte';
 export { default as Blockquote } from './Blockquote.svelte';
 export { default as Code } from './Code.svelte';
 export { default as CodeBlock } from './Code.svelte';
-export { default as H1 } from './H1.svelte';
-export { default as H2 } from './H2.svelte';
-export { default as H3 } from './H3.svelte';
-export { default as H4 } from './H4.svelte';
-export { default as H5 } from './H5.svelte';
-export { default as H6 } from './H6.svelte';
+export { default as Heading } from './Heading.svelte';
 export { default as Hr } from './Hr.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Li } from './Li.svelte';

package/dist/Elements/index.js

@@ -2,12 +2,7 @@ export { default as A } from './A.svelte';
 export { default as Blockquote } from './Blockquote.svelte';
 export { default as Code } from './Code.svelte';
 export { default as CodeBlock } from './Code.svelte';
-export { default as H1 } from './H1.svelte';
-export { default as H2 } from './H2.svelte';
-export { default as H3 } from './H3.svelte';
-export { default as H4 } from './H4.svelte';
-export { default as H5 } from './H5.svelte';
-export { default as H6 } from './H6.svelte';
+export { default as Heading } from './Heading.svelte';
 export { default as Hr } from './Hr.svelte';
 export { default as Image } from './Image.svelte';
 export { default as Li } from './Li.svelte';

package/dist/Streamdown.d.ts

@@ -1,40 +1,27 @@
 import type { BundledTheme } from 'shiki';
 import type { Snippet } from 'svelte';
-import type { Element, Parents } from 'hast';
-import type { PluggableList } from 'unified';
-import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import type { Theme } from './theme.js';
 import type { MermaidConfig } from 'mermaid';
 import type { KatexOptions } from 'katex';
-import type { ElementProps } from './Elements/element.js';
-type PredefinedElements = 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'code' | 'inlineCode' | 'img' | 'ul' | 'ol' | 'li' | 'hr' | 'alert' | 'strong' | 'blockquote' | 'table' | 'thead' | 'tbody' | 'tr' | 'th' | 'td' | 'sup' | 'sub' | 'pre' | 'mermaid' | 'math' | 'inlineMath' | 'em' | 'del';
+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 type Snippets = {
-    [K in PredefinedElements]?: Snippet<[ElementProps]>;
+    [K in PredefinedElements]?: Snippet<[
+        {
+            children: Snippet;
+            token: StreamdownToken;
+        }
+    ]>;
 };
-/**
- * Filter elements callback type
- */
-export type AllowElement = (element: Readonly<Element>, index: number, parent: Readonly<Parents> | undefined) => boolean | null | undefined;
-/**
- * URL transform callback type
- */
-export type UrlTransform = (url: string, key: string, node: Readonly<Element>) => string | null | undefined;
 export type StreamdownProps = {
+    streamdown?: StreamdownContext;
     content: string;
     class?: string;
     parseIncompleteMarkdown?: boolean;
     defaultOrigin?: string;
     allowedLinkPrefixes?: string[];
     allowedImagePrefixes?: string[];
-    remarkPlugins?: PluggableList;
-    remarkRehypeOptions?: RemarkRehypeOptions;
-    rehypePlugins?: PluggableList;
-    allowElement?: AllowElement | null;
-    allowedElements?: readonly string[] | null;
-    disallowedElements?: readonly string[] | null;
-    skipHtml?: boolean;
-    unwrapDisallowed?: boolean;
-    urlTransform?: UrlTransform | null;
     theme?: Partial<Theme>;
     baseTheme?: 'tailwind' | 'shadcn';
     mergeTheme?: boolean;
@@ -51,6 +38,11 @@ export type StreamdownProps = {
             important?: string;
         };
     };
-    customElements?: Record<string, Snippet<[ElementProps]>>;
+    customElements?: Record<string, Snippet<[
+        {
+            children: Snippet;
+            token: StreamdownToken;
+        }
+    ]>>;
 } & Partial<Snippets>;
 export {};

package/dist/Streamdown.svelte

@@ -26,10 +26,10 @@
 	import Block from './Block.svelte';
 	import type { Snippets, StreamdownProps } from './Streamdown.js';
 	import { bind } from './utils/bind.js';
-	import { parseMarkdownIntoBlocks } from './utils/parse-blocks.js';
 	import 'katex/dist/katex.min.css';
 	import { mergeTheme, type Theme, shadcnTheme } from './theme.js';
 	import type { BundledTheme } from 'shiki';
+	import { parseBlocks } from './marked/index.js';
 
 	let {
 		content = '',
@@ -40,15 +40,6 @@
 		defaultOrigin,
 		allowedLinkPrefixes = ['*'],
 		allowedImagePrefixes = ['*'],
-		allowElement,
-		allowedElements,
-		disallowedElements,
-		skipHtml,
-		unwrapDisallowed,
-		urlTransform,
-		remarkPlugins,
-		remarkRehypeOptions,
-		rehypePlugins,
 		theme,
 		mermaidConfig,
 		katexConfig,
@@ -56,10 +47,13 @@
 		baseTheme,
 		mergeTheme: shouldMergeTheme = true,
 		customElements,
+		streamdown = $bindable(),
 		...snippets
 	}: StreamdownProps = $props();
 
-	const streamdownContext = new StreamdownContext({
+	console.log('render');
+
+	streamdown = new StreamdownContext({
 		get content() {
 			return content;
 		},
@@ -75,33 +69,6 @@
 		get allowedImagePrefixes() {
 			return allowedImagePrefixes;
 		},
-		get allowElement() {
-			return allowElement;
-		},
-		get allowedElements() {
-			return allowedElements;
-		},
-		get disallowedElements() {
-			return disallowedElements;
-		},
-		get skipHtml() {
-			return skipHtml;
-		},
-		get unwrapDisallowed() {
-			return unwrapDisallowed;
-		},
-		get urlTransform() {
-			return urlTransform;
-		},
-		get remarkPlugins() {
-			return remarkPlugins;
-		},
-		get remarkRehypeOptions() {
-			return remarkRehypeOptions;
-		},
-		get rehypePlugins() {
-			return rehypePlugins;
-		},
 		get shikiTheme() {
 			return shikiTheme || 'github-light';
 		},
@@ -132,9 +99,10 @@
 			return shikiPreloadThemes;
 		}
 	});
+
 	const id = $props.id();
 
-	const blocks = $derived(parseMarkdownIntoBlocks(content));
+	const blocks = $derived(parseBlocks(content));
 </script>
 
 {#each blocks as block, index (`${id}-block-${index}`)}

package/dist/Streamdown.svelte.d.ts

@@ -13,6 +13,6 @@ import type { Snippets, 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, {}, "">;
+declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown">;
 type Streamdown = ReturnType<typeof Streamdown>;
 export default Streamdown;

package/dist/hightlighter.svelte.js

@@ -1,7 +1,6 @@
 import {} from 'shiki';
 import { untrack } from 'svelte';
 import { SvelteMap, SvelteSet } from 'svelte/reactivity';
-import { StreamdownContext, useStreamdown } from './Streamdown.svelte';
 // Remove background styles from <pre> tags (inline style)
 const removePreBackground = (html) => {
     return html.replace(/<pre[^>]*style="[^"]*background[^";]*;?[^"]*"[^>]*>/g, (match) => match.replace(/style="[^"]*background[^";]*;?[^"]*"/, ''));

package/dist/marked/index.d.ts

@@ -0,0 +1,16 @@
+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;
+};
+export declare const lex: (markdown: string) => StreamdownToken[];
+export declare const parseBlocks: (markdown: string) => string[];
+export type { MathToken, AlertToken, FootnoteToken };

package/dist/marked/index.js

@@ -0,0 +1,34 @@
+import { Lexer, marked } from 'marked';
+import markedAlert, {} from './marked-alert.js';
+import markedFootnote, {} from './marked-footnotes.js';
+import { markedMath } from './marked-math.js';
+export const lex = (markdown) => {
+    return marked
+        .use({
+        gfm: true
+    })
+        .use(markedAlert())
+        .use(markedFootnote())
+        .use(markedMath())
+        .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) => {
+        if (block.type === 'space' || block.type === 'footnote') {
+            return acc;
+        }
+        else {
+            acc.push(block.raw);
+        }
+        return acc;
+    }, []);
+};

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

@@ -0,0 +1,19 @@
+import type { Token } from 'marked';
+import type { TokenizerExtensionFunction } from 'marked';
+type variantType = 'note' | 'tip' | 'important' | 'warning' | 'caution';
+export declare function createSyntaxPattern(type: variantType): string;
+export default function markedAlert(): {
+    extensions: Array<{
+        name: string;
+        level: 'block' | 'inline';
+        tokenizer: TokenizerExtensionFunction;
+    }>;
+};
+export declare function processAlertToken(token: Token): void;
+export type AlertToken = {
+    type: 'alert';
+    variant: variantType;
+    raw: string;
+    text: string;
+};
+export {};

package/dist/marked/marked-alert.js

@@ -0,0 +1,54 @@
+import { Lexer } from 'marked';
+const variants = ['note', 'tip', 'important', 'warning', 'caution'];
+export function createSyntaxPattern(type) {
+    return `^(?:\\[!${type.toUpperCase()}])\\s*?\n*`;
+}
+export default function markedAlert() {
+    const defaultLexer = new Lexer({ gfm: true });
+    const defaultTokenizer = defaultLexer.options.tokenizer;
+    return {
+        extensions: [
+            {
+                name: 'alert',
+                level: 'block',
+                tokenizer(src, tokens) {
+                    const cap = defaultTokenizer.rules.block.blockquote.exec(src);
+                    if (cap) {
+                        const blockquoteToken = defaultTokenizer.blockquote(src);
+                        blockquoteToken && processAlertToken(blockquoteToken);
+                        return blockquoteToken;
+                    }
+                }
+            }
+        ]
+    };
+}
+export function processAlertToken(token) {
+    const matchedVariant = variants.find((type) => new RegExp(createSyntaxPattern(type)).test(('text' in token && token.text) || ''));
+    if (!matchedVariant)
+        return;
+    const typeRegexp = new RegExp(createSyntaxPattern(matchedVariant));
+    // Transform the token into an alert token
+    Object.assign(token, {
+        type: 'alert',
+        variant: matchedVariant
+    });
+    const firstLine = ('tokens' in token && token.tokens?.[0]);
+    const firstLineText = firstLine.raw?.replace(typeRegexp, '').trim();
+    firstLine.text = firstLineText;
+    if (firstLineText) {
+        const patternToken = firstLine.tokens[0];
+        if (patternToken) {
+            Object.assign(patternToken, {
+                raw: patternToken.raw.replace(typeRegexp, ''),
+                text: patternToken.text.replace(typeRegexp, '')
+            });
+        }
+        if (firstLine.tokens[1]?.type === 'br') {
+            firstLine.tokens.splice(1, 1);
+        }
+    }
+    else if ('tokens' in token && token.tokens) {
+        token.tokens?.shift();
+    }
+}

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

@@ -0,0 +1,28 @@
+import type { TokenizerExtensionFunction } from 'marked';
+import { type StreamdownToken } from './index.js';
+export default function markedFootnote(): {
+    extensions: {
+        name: string;
+        level: 'block' | 'inline';
+        tokenizer: TokenizerExtensionFunction;
+    }[];
+};
+/**
+ * Represents a single footnote.
+ */
+export type Footnote = {
+    type: 'footnote';
+    raw: string;
+    label: string;
+    tokens: StreamdownToken[];
+};
+/**
+ * Represents a reference to a footnote.
+ */
+export type FootnoteRef = {
+    type: 'footnoteRef';
+    raw: string;
+    label: string;
+    content: Footnote;
+};
+export type FootnoteToken = Footnote | FootnoteRef;