svelte-streamdown 2.2.1 → 2.2.3

package/dist/AnimatedBlock.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { useStreamdown } from './streamdown.svelte.js';
+	import { useStreamdown } from './context.svelte.js';
 
 	let { children }: { children: Snippet } = $props();
 

package/dist/AnimatedText.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from './streamdown.svelte.js';
-
+	import { useStreamdown } from './context.svelte.js';
 	let { text }: { text: string } = $props();
 
 	const streamdown = useStreamdown();
@@ -17,10 +16,7 @@
 
 		return text.split(splitRegex).filter((token) => token.length > 0);
 	};
-
-	let tokens = $derived.by(() => {
-		return tokenizeNewContent(text);
-	});
+	const tokens = $derived(tokenizeNewContent(text));
 
 	const isMounted = streamdown.isMounted;
 </script>

package/dist/Block.svelte

@@ -3,13 +3,15 @@
 	import Element from './Elements/Element.svelte';
 	import { lex, type StreamdownToken } from './marked/index.js';
 	import AnimatedText from './AnimatedText.svelte';
-	import { useStreamdown } from './streamdown.svelte.js';
+	import { useStreamdown } from './context.svelte.js';
 	import AnimatedBlock from './AnimatedBlock.svelte';
 
 	let {
-		block
+		block,
+		insideFootnote = false
 	}: {
 		block: string;
+		insideFootnote?: boolean;
 	} = $props();
 	const id = $props.id();
 	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
@@ -23,7 +25,7 @@
 			{@const isTextOnlyNode = children.length === 0}
 			<Element {token}>
 				{#if isTextOnlyNode}
-					{#if streamdown.animation.enabled}
+					{#if streamdown.animation.enabled && !insideFootnote}
 						<AnimatedText text={'text' in token ? token.text : ''} />
 					{:else}
 						{'text' in token ? token.text : ''}
@@ -36,7 +38,7 @@
 	{/each}
 {/snippet}
 
-{#if streamdown.animation.enabled}
+{#if streamdown.animation.enabled && !insideFootnote}
 	<AnimatedBlock>
 		{@render renderChildren(tokens)}
 	</AnimatedBlock>

package/dist/Block.svelte.d.ts

@@ -1,5 +1,6 @@
 type $$ComponentProps = {
     block: string;
+    insideFootnote?: boolean;
 };
 declare const Block: import("svelte").Component<$$ComponentProps, {}, "">;
 type Block = ReturnType<typeof Block>;

package/dist/Elements/Alert.svelte

@@ -13,7 +13,7 @@
 	/><path d="M12 17h.01" />`
 	};
 
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { AlertToken } from '../marked/index.js';
 	import type { Snippet } from 'svelte';

package/dist/Elements/Code.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';

package/dist/Elements/Element.svelte

@@ -8,7 +8,7 @@
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const streamdown = useStreamdown();

package/dist/Elements/FootnoteRef.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import Slot from './Slot.svelte';
 	import type { FootnoteRef } from '../marked/marked-footnotes.js';
 	import {
@@ -100,7 +100,7 @@
 			class={`${streamdown.theme.footnotePopover.base}`}
 		>
 			{#each token.content.lines as line}
-				<Block block={line} />
+				<Block insideFootnote block={line} />
 			{/each}
 		</dialog>
 	</Slot>

package/dist/Elements/Image.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.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.js';
+	import { useStreamdown } from '../context.svelte.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.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import type { MathToken } from '../marked/index.js';
 	import type { KatexOptions } from 'katex';
 	import 'katex/dist/katex.min.css';

package/dist/Elements/Mermaid.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { useStreamdown } from '../streamdown.svelte.js';
+	import { useStreamdown } from '../context.svelte.js';
 	import type { Tokens } from 'marked';
 	import type { MermaidConfig } from 'mermaid';
 	import { on } from 'svelte/events';

package/dist/Elements/Table.svelte

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

package/dist/Streamdown.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Block from './Block.svelte';
-	import { StreamdownContext, type StreamdownProps } from './streamdown.svelte.js';
+	import { StreamdownContext, type StreamdownProps } from './context.svelte.js';
 	import { mergeTheme, shadcnTheme } from './theme.js';
 	import { parseBlocks } from './marked/index.js';
 

package/dist/Streamdown.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type StreamdownProps } from './context.svelte.js';
+declare const Streamdown: import("svelte").Component<StreamdownProps, {}, "streamdown" | "element">;
+type Streamdown = ReturnType<typeof Streamdown>;
+export default Streamdown;

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown, type StreamdownProps } from './streamdown.svelte.js';
+export { useStreamdown, type StreamdownProps } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme, type Theme } from './theme.js';
 export { lex, parseBlocks, type StreamdownToken } from './marked/index.js';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { default as Streamdown } from './Streamdown.svelte';
-export { useStreamdown } from './streamdown.svelte.js';
+export { useStreamdown } from './context.svelte.js';
 export { theme, shadcnTheme, mergeTheme } from './theme.js';
 export { lex, parseBlocks } from './marked/index.js';

package/dist/marked/index.js

@@ -1,33 +1,56 @@
-import { Lexer, Marked } from 'marked';
+import { Lexer } 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({
-    tokenizer: {
-        table: () => {
-            return false;
+const extensions = [
+    markedTable(),
+    markedFootnote(),
+    markedAlert(),
+    markedMath(),
+    markedSubSup(),
+    markedList()
+];
+const parseExtensions = (...ext) => {
+    const options = {
+        gfm: true,
+        extensions: {
+            block: [],
+            inline: [],
+            childTokens: {},
+            renderers: {},
+            startBlock: [],
+            startInline: []
         }
-    }
-})
-    .use(markedAlert())
-    .use(markedFootnote())
-    .use(markedMath())
-    .use(markedSubSup())
-    .use(markedList())
-    .use(markedTable());
-const blockLexer = new Lexer({
-    extensions: {
-        childTokens: {},
-        renderers: {},
-        block: [markedFootnote().extensions[0].tokenizer, markedTable().extensions[0].tokenizer]
-    }
-});
+    };
+    ext.forEach(({ extensions }) => {
+        extensions.forEach(({ level, name, tokenizer, ...rest }) => {
+            if ('start' in rest && rest.start) {
+                if (level === 'block') {
+                    options.extensions.startBlock.push(rest.start);
+                }
+                else {
+                    options.extensions.startInline.push(rest.start);
+                }
+            }
+            if (tokenizer) {
+                if (level === 'block') {
+                    options.extensions.block.push(tokenizer);
+                }
+                else {
+                    options.extensions.inline.push(tokenizer);
+                }
+            }
+        });
+    });
+    return options;
+};
+const blockLexer = new Lexer(parseExtensions(markedFootnote(), markedTable()));
 export const lex = (markdown) => {
-    return completeLexer
-        .lexer(markdown)
+    return new Lexer(parseExtensions(...extensions))
+        .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
 export const parseBlocks = (markdown) => {

package/dist/marked/marked-footnotes.js

@@ -1,5 +1,5 @@
 import {} from './index.js';
-import { StreamdownContext } from '../streamdown.svelte.js';
+import { StreamdownContext } from '../context.svelte.js';
 import { getContext } from 'svelte';
 const safeGetContext = () => {
     try {

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

@@ -1,6 +1,11 @@
-import type { TokenizerAndRendererExtension } from 'marked';
+import type { TokenizerExtensionFunction, TokenizerStartFunction } from 'marked';
 export declare function markedMath(): {
-    extensions: TokenizerAndRendererExtension<string, string>[];
+    extensions: Array<{
+        name: string;
+        level: 'block' | 'inline';
+        start?: TokenizerStartFunction;
+        tokenizer: TokenizerExtensionFunction;
+    }>;
 };
 export type MathToken = {
     type: 'math';

package/dist/marked/marked-math.js

@@ -1,9 +1,25 @@
-const inlineRule = /^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n\$]))\1(?=[\s?!\.,:？！。，：]|$)/;
+// const inlineRule =
+// 	/^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n\$]))\1(?=[\s?!\.,:？！。，：]|$)/;
 const inlineRuleNonStandard = /^(\${1,2})(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n\$]))\1/; // Non-standard, even if there are no spaces before and after $ or $$, try to parse
 const blockRule = /^(\${1,2})\n((?:\\[\s\S]|[^\\])+?)\n\1(?:\n|$)/;
 export function markedMath() {
     return {
         extensions: [
+            {
+                name: 'block-math',
+                level: 'block',
+                tokenizer(src) {
+                    const match = src.match(blockRule);
+                    if (match) {
+                        return {
+                            type: 'math',
+                            isInline: false,
+                            raw: match[0],
+                            text: match[2].trim()
+                        };
+                    }
+                }
+            },
             {
                 name: 'inline-math',
                 level: 'inline',
@@ -36,21 +52,6 @@ export function markedMath() {
                         };
                     }
                 }
-            },
-            {
-                name: 'block-math',
-                level: 'block',
-                tokenizer(src) {
-                    const match = src.match(blockRule);
-                    if (match) {
-                        return {
-                            type: 'math',
-                            isInline: false,
-                            raw: match[0],
-                            text: match[2].trim()
-                        };
-                    }
-                }
             }
         ]
     };

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

@@ -1,10 +1,10 @@
-import type { TokenizerExtensionFunction } from 'marked';
+import type { TokenizerExtensionFunction, TokenizerStartFunction } from 'marked';
 export default function markedSubSup(): {
     extensions: {
         name: string;
         level: 'inline';
         tokenizer: TokenizerExtensionFunction;
-        start?: (src: string) => number | undefined;
+        start?: TokenizerStartFunction;
     }[];
 };
 /**

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

@@ -1,4 +1,4 @@
-import type { TokenizerExtensionFunction } from 'marked';
+import type { TokenizerExtensionFunction, TokenizerStartFunction } from 'marked';
 export interface SpanTableOptions {
     useTheadTbody?: boolean;
     useTfoot?: boolean;
@@ -59,7 +59,7 @@ export declare function markedTable(options?: SpanTableOptions): {
     extensions: {
         name: string;
         level: 'block' | 'inline';
-        start: (src: string) => number | undefined;
+        start: TokenizerStartFunction;
         tokenizer: TokenizerExtensionFunction;
     }[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "2.2.1",
+	"version": "2.2.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",