svelte-streamdown 4.1.0 → 4.2.0

package/dist/utils/normalize-html-indentation.js

@@ -0,0 +1,52 @@
+/**
+ * Four leading spaces after a blank line is an indented code block, HTML or not.
+ * A pretty-printed document therefore splits into html / code / html and the
+ * indented part renders as source in a code box (upstream 7f9127b).
+ *
+ * This strips the indentation off tag lines only. It is lossy inside `<pre>` and
+ * `<code>`, where whitespace is content, so those bodies are skipped and the
+ * whole thing is behind the opt-in `normalizeHtmlIndentation` prop.
+ */
+// The indentation of a line whose first non-space character opens a tag, a
+// closing tag, or a comment/doctype. Anchored, and the tag itself is a lookahead
+// so the match is exactly the whitespace to drop.
+const INDENTED_TAG = /^[ \t]+(?=<[a-zA-Z!/])/;
+// Inside these, indentation is content. `<pre class=…>` and `<code>` both match.
+const LITERAL_OPEN = /<(?:pre|code)[\s/>]/gi;
+const LITERAL_CLOSE = /<\/(?:pre|code)>/gi;
+const count = (line, re) => {
+    re.lastIndex = 0;
+    let n = 0;
+    while (re.exec(line))
+        n++;
+    return n;
+};
+export const normalizeHtmlIndentation = (content) => {
+    // Only documents that start with a tag; anything else is Markdown whose
+    // indentation we have no business touching. Returned by identity so a Svelte
+    // `$derived` over it does not churn.
+    let i = 0;
+    while (i < content.length && (content[i] === ' ' || content[i] === '\n' || content[i] === '\t'))
+        i++;
+    if (content[i] !== '<')
+        return content;
+    const lines = content.split('\n');
+    let literalDepth = 0;
+    let changed = false;
+    for (let l = 0; l < lines.length; l++) {
+        const line = lines[l];
+        if (literalDepth === 0) {
+            const match = INDENTED_TAG.exec(line);
+            if (match) {
+                lines[l] = line.slice(match[0].length);
+                changed = true;
+            }
+        }
+        if (line.indexOf('<') !== -1) {
+            literalDepth += count(line, LITERAL_OPEN) - count(line, LITERAL_CLOSE);
+            if (literalDepth < 0)
+                literalDepth = 0;
+        }
+    }
+    return changed ? lines.join('\n') : content;
+};

package/dist/utils/parse-incomplete-markdown.d.ts

@@ -1,4 +1,16 @@
 import { type OpenFence } from './fence.js';
+import { type TagMatchers } from '../marked/marked-mdx.js';
+/** Per-call knobs `Block.svelte` threads down from the Streamdown context. */
+export type CompleterOptions = {
+    /** The tag allowlist the lexer uses, so the completer never disagrees with it. */
+    tags?: TagMatchers;
+    /**
+     * Is this the block still being streamed into? Only there may a half-typed
+     * HTML tag be stripped — a sealed paragraph reading `if a <b then` must keep
+     * its tail forever (upstream 3e6a77d strips unconditionally; we do not).
+     */
+    live?: boolean;
+};
 export interface Plugin {
     name: string;
     pattern?: RegExp;
@@ -24,6 +36,8 @@ interface HandlerPayload {
 }
 interface ParseState {
     currentLine: number;
+    /** How many lines the text has, so a plugin can tell the last one. */
+    lineCount: number;
     context: 'normal' | 'list' | 'blockquote' | 'descriptionList';
     blockingContexts: Set<'code' | 'math' | 'center' | 'right'>;
     /** Delimiter that closes the open math block: '$$' or '\]'. */
@@ -40,18 +54,18 @@ interface ParseState {
         tagName: string;
         lineIndex: number;
     }>;
-    mdxLineStates?: Array<{
-        inMdx: boolean;
-        incompletePositions: number[];
-    }>;
+    /** Tag allowlist for this call (see CompleterOptions). */
+    tags: TagMatchers;
+    /** Is this the block still streaming (see CompleterOptions)? */
+    live: boolean;
 }
 export declare class IncompleteMarkdownParser {
     private plugins;
     private state;
     setState: (state: Partial<ParseState>) => void;
     constructor(plugins?: Plugin[]);
-    parse(text: string): string;
+    parse(text: string, options?: CompleterOptions): string;
     static createDefaultPlugins(): Plugin[];
 }
-export declare const parseIncompleteMarkdown: (text: string) => string;
+export declare const parseIncompleteMarkdown: (text: string, options?: CompleterOptions) => string;
 export {};

package/dist/utils/parse-incomplete-markdown.js

@@ -1,11 +1,15 @@
-import { trackFence } from './fence.js';
+import { closingFence, trackFence } from './fence.js';
+import { DEFAULT_TAGS } from '../marked/marked-mdx.js';
 export class IncompleteMarkdownParser {
     plugins = [];
     state = {
         currentLine: 0,
+        lineCount: 0,
         context: 'normal',
         blockingContexts: new Set(),
-        lineContexts: []
+        lineContexts: [],
+        tags: DEFAULT_TAGS,
+        live: true
     };
     setState = (state) => {
         this.state = { ...this.state, ...state };
@@ -14,15 +18,18 @@ export class IncompleteMarkdownParser {
         this.plugins = plugins;
     }
     // Main parsing methods
-    parse(text) {
+    parse(text, options) {
         if (!text || typeof text !== 'string') {
             return text;
         }
         this.state = {
             currentLine: 0,
+            lineCount: 0,
             context: 'normal',
             blockingContexts: new Set(),
-            lineContexts: []
+            lineContexts: [],
+            tags: options?.tags ?? DEFAULT_TAGS,
+            live: options?.live ?? true
         };
         let result = text;
         // Execute preprocess hooks for all plugins
@@ -50,6 +57,7 @@ export class IncompleteMarkdownParser {
         // Split into lines for processing
         const lines = result.split('\n');
         const processedLines = [...lines];
+        this.state.lineCount = processedLines.length;
         // Process each line with each plugin
         for (let i = 0; i < processedLines.length; i++) {
             this.state.currentLine = i;
@@ -99,7 +107,59 @@ export class IncompleteMarkdownParser {
     static createDefaultPlugins() {
         return [
             {
-                // Runs first: in a list item a '>' before a number is a comparison
+                // `Hello <div cla` and `<div>content</di` render as literal source on
+                // every chunk until the `>` lands (upstream 3e6a77d). Strip that tail —
+                // but only on the block still being streamed and only when the name is
+                // really a tag. Upstream strips `/<[a-zA-Z\/][^>]*$/` unconditionally,
+                // which on our per-block completer would eat the tail of a sealed
+                // paragraph reading `if a <b then` for good.
+                // Registered first so the mdx plugin below never sees a half-typed tag.
+                name: 'incompleteHtmlTag',
+                // Cheap gate: a line with no '<' can never match.
+                pattern: /</,
+                skipInBlockTypes: ['code', 'math'],
+                handler: ({ line, state }) => {
+                    // Only the streaming tail: the live block's LAST line. An unfinished
+                    // tag on an earlier line can never complete, and `live` is merely
+                    // "last block", so `Use the <div element to wrap it.` in a finished
+                    // document must keep its text. The patterns below are `$`-anchored,
+                    // so matching on the last line means matching at the end of the text.
+                    if (!state.live || state.currentLine !== state.lineCount - 1)
+                        return line;
+                    // The incomplete tag is the last '<' with no '>' after it, so anchor
+                    // there instead of letting `[^>]*$` backtrack from every '<' on the
+                    // line (that is quadratic on a line full of complete tags).
+                    const start = line.lastIndexOf('<');
+                    if (start === -1)
+                        return line;
+                    // `</` with the name not yet typed is unambiguous — no prose ends a
+                    // line that way — and it is the one frame a name check cannot catch.
+                    if (start === line.length - 2 && line[start + 1] === '/') {
+                        return isWithinCompleteInlineCode(line, start) ? line : line.slice(0, start);
+                    }
+                    const match = incompleteHtmlTag.exec(line.slice(start));
+                    if (!match)
+                        return line;
+                    const name = match[1];
+                    if (!isTagPrefix(name, state.tags))
+                        return line;
+                    // One-letter lowercase elements (a, b, i, p, q, s, u) are also how prose
+                    // looks: `if a <b then` on the last line of a finished document must keep
+                    // its text, and `live` cannot tell finished from streaming. Such a letter
+                    // only counts as a tag once an attribute has started (`<a href="`). An
+                    // uppercase letter (`<C`) can only be a component prefix, never prose.
+                    if (name.length === 1 && name === name.toLowerCase() && !match[0].includes('='))
+                        return line;
+                    // A '<' inside a closed code span is content, not a tag (a725579).
+                    if (isWithinCompleteInlineCode(line, start))
+                        return line;
+                    // No trimEnd (upstream does): 4.1.1 cut PascalCase tags at exactly
+                    // this offset, so `Some text <Comp` keeps rendering as `Some text `.
+                    return line.slice(0, start);
+                }
+            },
+            {
+                // In a list item a '>' before a number is a comparison
                 // ('- > 25: rich'), but marked reads it as a nested blockquote. Escaping it
                 // keeps the text, and the escape renders as a plain '>' (4fffb9f).
                 // `pattern` is only a cheap gate — a line whose first non-space character is
@@ -196,10 +256,12 @@ export class IncompleteMarkdownParser {
                     // Close inner blocks (code/math) before alignment wrappers.
                     let result = text;
                     if (state.blockingContexts.has('code')) {
-                        // Close with the fence that was opened: a '~~~' block is not closed by
-                        // '```', and a longer run needs a closer at least as long.
+                        // Close with the fence that was opened, at the depth it was opened: a
+                        // '~~~' block is not closed by '```', a longer run needs a closer at
+                        // least as long, and a fence inside a list item needs its closer inside
+                        // the item — one at column 0 leaves the block open and starts a new one.
                         const fence = state.openFence;
-                        result += '\n' + (fence ? fence.char.repeat(fence.length) : '```');
+                        result += '\n' + (fence ? closingFence(fence) : '```');
                     }
                     if (state.blockingContexts.has('math')) {
                         if (state.mathCloser === '\\]') {
@@ -841,24 +903,21 @@ export class IncompleteMarkdownParser {
                 skipInBlockTypes: ['code', 'math', 'center', 'right'],
                 preprocess: ({ text, state }) => {
                     // Track MDX component states across the entire text
+                    const tags = state.tags;
                     const lines = text.split('\n');
                     const openTags = [];
-                    let mdxLineStates = [];
                     for (let i = 0; i < lines.length; i++) {
                         // Lines inside code fences or math blocks are opaque content: MDX-looking
                         // tags there must not open/close/track components.
                         const lineCtx = state.lineContexts?.[i];
                         if (lineCtx?.code || lineCtx?.math) {
-                            mdxLineStates[i] = { inMdx: false, incompletePositions: [] };
                             continue;
                         }
                         const line = lines[i];
-                        let inMdx = false;
-                        let incompletePositions = [];
                         // Find all MDX tags in the line
                         let searchPos = 0;
                         while (searchPos < line.length) {
-                            // Look for opening bracket with capital letter (MDX component)
+                            // Look for an opening bracket that starts an allowlisted tag
                             const tagStart = line.indexOf('<', searchPos);
                             if (tagStart === -1 || tagStart >= line.length - 1)
                                 break;
@@ -866,7 +925,7 @@ export class IncompleteMarkdownParser {
                             // Closing tag for a component opened on an earlier line. Handled
                             // inside the scan so a close that is part of a same-line complete
                             // pair (consumed below) is never double-counted against the stack.
-                            const closeTagMatch = line.substring(tagStart).match(/^<\/([A-Z][a-zA-Z0-9]*)>/);
+                            const closeTagMatch = line.substring(tagStart).match(tags.closeTag);
                             if (closeTagMatch) {
                                 const tagName = closeTagMatch[1];
                                 // Pop the innermost same-name open (LIFO) so the auto-appended
@@ -880,82 +939,38 @@ export class IncompleteMarkdownParser {
                                 searchPos = tagStart + closeTagMatch[0].length;
                                 continue;
                             }
-                            // Only match if starts with capital letter (MDX component)
-                            if (!/[A-Z]/.test(nextChar)) {
+                            // Every allowlisted name starts with a letter; cheap gate.
+                            if (!/[a-zA-Z]/.test(nextChar)) {
                                 searchPos = tagStart + 1;
                                 continue;
                             }
                             // Try to match complete self-closing tag
-                            const selfClosingMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*\/>/);
+                            const selfClosingMatch = line.substring(tagStart).match(tags.selfClosing);
                             if (selfClosingMatch) {
                                 searchPos = tagStart + selfClosingMatch[0].length;
                                 continue;
                             }
                             // Try to match complete opening tag with immediate closing
-                            const completeMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>.*?<\/\1>/);
+                            const completeMatch = line.substring(tagStart).match(tags.complete);
                             if (completeMatch) {
                                 searchPos = tagStart + completeMatch[0].length;
                                 continue;
                             }
                             // Try to match opening tag
-                            const openTagMatch = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)((?:\s+\w+=(?:"[^"]*"|{[^}]*}))*)\s*>/);
+                            const openTagMatch = line.substring(tagStart).match(tags.openTag);
                             if (openTagMatch) {
                                 const tagName = openTagMatch[1];
                                 openTags.push({ tagName, lineIndex: i });
-                                inMdx = true;
                                 searchPos = tagStart + openTagMatch[0].length;
                                 continue;
                             }
-                            // Check for incomplete self-closing (e.g., <Component /)
-                            const incompleteSelfClosing = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)[^>]*\/$/);
-                            if (incompleteSelfClosing) {
-                                incompletePositions.push(tagStart);
-                                break; // This is at the end of the line
-                            }
-                            // Check for incomplete tag (no closing >) - only at end of line
-                            const incompleteTag = line
-                                .substring(tagStart)
-                                .match(/^<([A-Z][a-zA-Z0-9]*)(?:\s+[^>]*)?$/);
-                            if (incompleteTag) {
-                                incompletePositions.push(tagStart);
-                                break; // This is at the end of the line
-                            }
+                            // A tag cut off before its `>` is the last thing on the line (the
+                            // incompleteHtmlTag plugin, which ran first, strips it); scanning on
+                            // from the next character finds nothing and ends the loop.
                             searchPos = tagStart + 1;
                         }
-                        mdxLineStates[i] = { inMdx, incompletePositions };
                     }
-                    return {
-                        text,
-                        state: {
-                            mdxUnclosedTags: openTags,
-                            mdxLineStates
-                        }
-                    };
-                },
-                handler: ({ line, state }) => {
-                    // Remove incomplete MDX syntax (don't render it)
-                    const lineStates = state.mdxLineStates || [];
-                    const currentState = lineStates[state.currentLine];
-                    if (currentState?.incompletePositions && currentState.incompletePositions.length > 0) {
-                        // Process incomplete positions from right to left to preserve indices
-                        let result = line;
-                        for (let i = currentState.incompletePositions.length - 1; i >= 0; i--) {
-                            const pos = currentState.incompletePositions[i];
-                            const before = result.substring(0, pos);
-                            // Simply remove the incomplete MDX tag
-                            result = before;
-                        }
-                        return result;
-                    }
-                    return line;
+                    return { text, state: { mdxUnclosedTags: openTags } };
                 },
                 postprocess: ({ text, state }) => {
                     // Complete unclosed MDX components at the end
@@ -977,15 +992,104 @@ export class IncompleteMarkdownParser {
 // Legacy function for backward compatibility
 const defaultPlugins = IncompleteMarkdownParser.createDefaultPlugins();
 const defaultParser = new IncompleteMarkdownParser(defaultPlugins);
-export const parseIncompleteMarkdown = (text) => {
+export const parseIncompleteMarkdown = (text, options) => {
     if (!text || typeof text !== 'string') {
         return text;
     }
-    return defaultParser.parse(text);
+    return defaultParser.parse(text, options);
 };
 // Utility functions
 // Full test for the comparisonOperator plugin, whose `pattern` only gates it.
 const listItemComparison = /^(\s*(?:[-*+]|\d+[.)]) +)>(?==?\s*\$?\d)/;
+// An opening or closing tag that never got its '>', anchored at the line's last
+// '<': the name (hyphens allowed, so `</ai-thinking` is caught too), then any
+// number of COMPLETE attributes, then at most one still being typed. Upstream
+// accepts any `[^>]*` tail, which also swallows ordinary prose — `if a <b then
+// c` and `Use the <div element to wrap it.` both end in a `<name` with no '>'
+// after it. Requiring every attribute but the last to carry a quoted value is
+// what tells a half-typed tag from a sentence.
+const incompleteHtmlTag = /^<\/?([a-zA-Z][a-zA-Z0-9-]*)(?:\s+[\w-]+=(?:"[^"]*"|'[^']*'|\{[^}]*\}))*(?:\s+[\w-]*(?:=(?:"[^"]*|'[^']*|\{[^}]*)?)?)?\s*\/?$/;
+/**
+ * The HTML element names a half-typed tag may be stripped for. Deliberately a
+ * short list of what an LLM actually emits rather than the full HTML vocabulary:
+ * every name here is one the user will never mean literally at the end of a
+ * streamed line, which is what makes the strip safe. Anything else must come in
+ * through `customTags` / `mdxComponents`.
+ */
+const htmlElements = [
+    'a',
+    'abbr',
+    'b',
+    'blockquote',
+    'br',
+    'button',
+    'code',
+    'col',
+    'colgroup',
+    'dd',
+    'del',
+    'details',
+    'div',
+    'dl',
+    'dt',
+    'em',
+    'figcaption',
+    'figure',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'iframe',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'picture',
+    'pre',
+    'q',
+    's',
+    'samp',
+    'section',
+    'small',
+    'source',
+    'span',
+    'strong',
+    'sub',
+    'summary',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'tfoot',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+    'video'
+];
+// A tag arrives one character at a time, so `<d`, `<di` and `<div` must all be
+// recognised or the raw text flashes for a chunk or two anyway. Every prefix of
+// every name above, precomputed — ~250 entries, one Set lookup per probe.
+const htmlPrefixes = new Set();
+for (const element of htmlElements) {
+    for (let i = 1; i <= element.length; i++)
+        htmlPrefixes.add(element.slice(0, i));
+}
+/** Could `name` still grow into a tag we are allowed to strip? */
+const isTagPrefix = (name, tags) => htmlPrefixes.has(name.toLowerCase()) ||
+    // PascalCase is prefix-closed by construction, so this covers `<MyComp` too.
+    tags.name.test(name) ||
+    tags.names.some((tag) => tag.startsWith(name));
 // Emphasis/code markers, as a set so inlineCitation can scan a cell for them
 // without building a substring per bracket.
 const formattingChars = new Set(['*', '~', '`', '_']);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "svelte-streamdown",
-	"version": "4.1.0",
+	"version": "4.2.0",
 	"packageManager": "pnpm@10.32.1",
 	"repository": {
 		"type": "git",