@humanspeak/svelte-markdown
Version:
Markdown and HTML renderer for Svelte 5 — built for rendering streaming AI agent output from Claude Code, ChatGPT, and agentic workflows. XSS-safe defaults, streaming-aware sanitization, token caching, TypeScript types, and Svelte 5 runes.
69 lines (68 loc) • 3.27 kB
TypeScript
/**
* @component Parser
*
* Recursive markdown token parser that transforms tokens into Svelte components.
* This component is the core rendering engine of the markdown system, handling
* the transformation of parsed markdown tokens into their corresponding Svelte components.
*
* @example
* ```svelte
* <Parser
* tokens={parsedTokens}
* renderers={customRenderers}
* type="paragraph"
* />
* ```
*
* Features:
* - Recursive token parsing
* - Custom renderer support
* - Snippet-based renderer overrides (snippet > component > default)
* - Special handling for tables, lists, and HTML content
* - Type-safe component rendering
*
* @typedef {Object} Props
* @property {string} [type] - Token type for direct component rendering
* @property {Token[] | TokensList} [tokens] - Markdown tokens to be rendered
* @property {Tokens.TableCell[]} [header] - Table header cells for table rendering
* @property {Tokens.TableCell[][]} [rows] - Table row cells for table rendering
* @property {boolean} [ordered=false] - Whether the list is ordered (for list rendering)
* @property {Renderers} renderers - Component mapping for markdown elements
* @property {Record<string, any>} [snippetOverrides] - Snippet overrides for markdown renderers
* @property {Record<string, any>} [htmlSnippetOverrides] - Snippet overrides for HTML tag renderers
*
* Implementation Notes:
* - Uses recursive rendering for nested tokens
* - Implements special logic for tables, lists, and HTML content
* - Handles component prop spreading carefully to avoid conflicts
* - Maintains type safety through TypeScript interfaces
* - HTML token handling in table cells uses type assertions for better type safety
* - Table cell HTML content is processed with proper token nesting and attribute preservation
* - Improved HTML component rendering with proper type checking for tag properties
* - Added support for nested markdown within HTML table cells (see test at lines 311-343 in SvelteMarkdown.test.ts)
* - Token cleanup utilities handle complex nested structures (see lines 105-127 in token-cleanup.test.ts)
* - HTML parsing maintains proper structure for both simple and complex nested elements
*
*/
import Parser from './Parser.svelte';
import { type Renderers, type Token, type TokensList, type Tokens } from './utils/markdown-parser.js';
import { type SanitizeAttributesFn, type SanitizeUrlFn } from './utils/sanitize.js';
type AnySnippet = (..._args: any[]) => any;
interface Props<T extends Renderers = Renderers> {
type?: string;
tokens?: Token[] | TokensList;
header?: Tokens.TableCell[];
rows?: Tokens.TableCell[][];
ordered?: boolean;
renderers: T;
snippetOverrides?: Record<string, AnySnippet>;
htmlSnippetOverrides?: Record<string, AnySnippet>;
sanitizeUrl?: SanitizeUrlFn;
sanitizeAttributes?: SanitizeAttributesFn;
}
type $$ComponentProps = Props & {
[key: string]: unknown;
};
declare const Parser: import("svelte").Component<$$ComponentProps, {}, "">;
type Parser = ReturnType<typeof Parser>;
export default Parser;