svelte-streamdown 1.0.9 → 2.0.0

package/README.md

@@ -20,6 +20,27 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 
 ## ✨ Main Features
 
+
+### 🔄 Streaming-Optimized
+
+- **Incomplete Markdown Parsing**: Handles unterminated blocks gracefully
+- **Progressive Rendering**: Perfect for streaming AI responses
+- **Real-time Updates**: Optimized for dynamic content
+
+### 🔒 Security Hardening
+
+- **Image Origin Control**: Whitelist allowed image sources
+- **Link Safety**: Control link destinations
+- **HTML Sanitization**: Prevent XSS attacks
+
+### 🎯 Fully Customizable Components & Theming
+
+- **Every component customizable** with Svelte snippets
+- **Granular theming system** - customize every part of every component
+- Override default styling and behavior for any markdown element
+- Full control over rendering with type-safe props
+- Seamless integration with your design system
+
 ### 🎨 Built-in Typography Styles
 
 Beautiful, responsive typography with **built-in Tailwind CSS classes** for headings, lists, code blocks, and more. Comes with a complete default theme that works out of the box.
@@ -28,7 +49,6 @@ Beautiful, responsive typography with **built-in Tailwind CSS classes** for head
 
 Full support for GitHub Flavored Markdown including:
 
-- Task lists
 - Tables
 - ~~Strikethrough~~
 - Subscript (H~2~O)
@@ -99,43 +119,124 @@ pie title Project Time Allocation
     "Meetings" : 15
 ```
 
-### Alert Support
+### Complex table support
 
-> [!IMPORTANT]
-> Native support for Github style Alert
+#### Colspan
 
-### 🔄 Streaming-Optimized
+| H1                        | H2  | H3  |
+| ------------------------- | --- | --- |
+| This cell spans 3 columns |||
 
-- **Incomplete Markdown Parsing**: Handles unterminated blocks gracefully
-- **Progressive Rendering**: Perfect for streaming AI responses
-- **Real-time Updates**: Optimized for dynamic content
+| Header 1                  | Header 2 | Header 3 |
+| ------------------------- | -------- | -------- |
+| This cell spans 2 columns || Normal
+| Normal                    | Normal   | Normal   |
 
-### 🔒 Security Hardening
+#### Rowspan
+| Header 1        | Header 2 |
+| --------------- | -------- |
+| This cell spans | Cell A   |
+| two rows ^      | Cell B   |
+#### Footer
+| Header 1        | Header 2 |
+| --------------- | -------- |
+| Cell B 		  | Cell A   |
+| --------------- | -------- |
+| Footer ||
 
-- **Image Origin Control**: Whitelist allowed image sources
-- **Link Safety**: Control link destinations
-- **HTML Sanitization**: Prevent XSS attacks
+#### Column alignment
 
-### 🎯 Fully Customizable Components & Theming
+| Left | Center | Right |
+| :--- | :----: | ----: |
+| A    |   B    |     C |
+
+#### Multiple headers and very complex layout
+
+
+| Product Category ||| Sales Data Q1-Q4 2024 ||||
+| Product | Region || Q1 | Q2 | Q3 | Q4 |
+| Name | Type | Area | Revenue | Revenue | Revenue | Revenue |
+|-------------|---------|------------|---------|---------|---------|---------|
+| Laptop Pro | Electronics | North America || $45,000 | $52,000 | $48,000 |
+| Laptop Pro ^ | ^ | Europe | $32,000 | $38,000 | $41,000 | $44,000 |
+| Laptop Pro ^ | ^ | Asia || $28,000 | $35,000 | $42,000 |
+| Office Chair | Furniture | North America | $15,000 | $18,000 | $16,000 | $17,000 |
+| Office Chair ^ | ^ | Europe | $12,000 | $14,000 | $15,000 | $16,000 |
+| Wireless Mouse | Electronics | Global ||| $25,000 | $28,000 |
+|-------------|---------|------------|---------|---------|---------|---------|
+| **Total Revenue** ||| **$152,000** | **$185,000** | **$187,000** | **$205,000** |
+
+### Complex list support
+
+#### decimal
+
+1. First item  
+2. Second item  
+3. Third item
+
+#### lower-alpha
+
+a. First item  
+b. Second item  
+c. Third item
+
+#### upper-alpha
+
+A. First item  
+B. Second item  
+C. Third item
+
+#### lower-roman
+
+i. First item  
+ii. Second item  
+iii. Third item
+
+#### upper-roman
+
+I. First item  
+II. Second item  
+III. Third item
+
+#### Nested Lists
+
+1. First level (numeric)
+   a. Second level (lowercase alpha)
+      i. Third level (lowercase roman)
+         - Fourth level (bullet)
+            I. Fifth level (uppercase roman)
+               A. Sixth level (uppercase alpha)
+
+2. Back to the first level
+
+#### Task List
+
+- [ ] Uncompleted task
+- [x] Completed task
+- [ ] Another uncompleted task
+  - [ ] Nested uncompleted subtask
+  - [x] Nested completed subtask
+
+
+### Alert Support
+
+> [!IMPORTANT]
+> Native support for Github style Alert
 
-- **Every component customizable** with Svelte snippets
-- **Granular theming system** - customize every part of every component
-- Override default styling and behavior for any markdown element
-- Full control over rendering with type-safe props
-- Seamless integration with your design system
 
 ## 🔄 Differences from Original React Version
 
 This Svelte port maintains feature parity with the original [Streamdown](https://streamdown.ai/) while adapting to Svelte's patterns:
 
-| Aspect            | Original (React) | Svelte Port               |
-| ----------------- | ---------------- | ------------------------- |
-| **Framework**     | React            | Svelte 5                  |
-| **Component API** | JSX Components   | Svelte Snippets           |
-| **Styling**       | Tailwind CSS     | Tailwind CSS (compatible) |
-| **Context**       | React Context    | Svelte Context            |
-| **Build System**  | Vite/React       | Vite/SvelteKit            |
-| **TypeScript**    | Full TS support  | Full TS support           |
+| Aspect            | Original (React)         | Svelte Port               |
+| ----------------- | ------------------------ | ------------------------- |
+| **Framework**     | React                    | Svelte 5                  |
+| **Component API** | JSX Components           | Svelte Snippets           |
+| **Styling**       | Tailwind CSS             | Tailwind CSS (compatible) |
+| **Context**       | React Context            | Svelte Context            |
+| **Build System**  | Vite/React               | Vite/SvelteKit            |
+| **TypeScript**    | Full TS support          | Full TS support           |
+| **Engine**        | Remark / Rehype + marked | marked only               |
 
 ### Tailwind CSS Setup
 
@@ -184,13 +285,13 @@ This heading will use a custom component!`;
 	// Custom heading component
 </script>
 
-{#snippet customH1({ children, props })}
-	<h1 class="mb-4 text-4xl font-bold text-blue-600" {...props}>
-		{children}
+{#snippet customHeading({ children, token })}
+	<h1 class="mb-4 text-4xl font-bold text-blue-600" {...token.props}>
+		{@render children()}
 	</h1>
 {/snippet}
 
-<Streamdown {content} h1={customH1} />
+<Streamdown {content} heading={customHeading} />
 ```
 
 ### Security Configuration
@@ -220,9 +321,6 @@ This heading will use a custom component!`;
 | `defaultOrigin`           | `string`                                              | -                | Default origin for relative URLs               |
 | `allowedLinkPrefixes`     | `string[]`                                            | `['*']`          | Allowed URL prefixes for links                 |
 | `allowedImagePrefixes`    | `string[]`                                            | `['*']`          | Allowed URL prefixes for images                |
-| `allowElement`            | `AllowElement \| null`                                | -                | Custom element filtering function              |
-| `allowedElements`         | `readonly string[] \| null`                           | -                | Whitelist of allowed HTML elements             |
-| `disallowedElements`      | `readonly string[] \| null`                           | -                | Blacklist of disallowed HTML elements          |
 | `skipHtml`                | `boolean`                                             | -                | Skip HTML parsing entirely                     |
 | `unwrapDisallowed`        | `boolean`                                             | -                | Unwrap instead of removing disallowed elements |
 | `urlTransform`            | `UrlTransform \| null`                                | -                | Custom URL transformation function             |
@@ -232,14 +330,13 @@ This heading will use a custom component!`;
 | `shikiTheme`              | `BundledTheme`                                        | `'github-light'` | Code highlighting theme                        |
 | `mermaidConfig`           | `MermaidConfig`                                       | -                | Mermaid diagram configuration                  |
 | `katexConfig`             | `KatexOptions \| ((inline: boolean) => KatexOptions)` | -                | KaTeX math rendering options                   |
-| `remarkPlugins`           | `PluggableList`                                       | -                | Additional remark plugins                      |
-| `rehypePlugins`           | `PluggableList`                                       | -                | Additional rehype plugins                      |
-| `remarkRehypeOptions`     | `RemarkRehypeOptions`                                 | -                | Remark-rehype conversion options               |
-| `customElements`          | `Record<string, Snippet<[ElementProps]>>`             | -                | Custom snippets for not handled nodes          |
 
 ### Custom Component Props
 
-**Every single markdown element** can be customized with Svelte snippets, giving you complete control over styling and behavior:
+**Every single markdown element** can be customized with Svelte snippets, giving you
+complete control over styling and behavior:
+
+Each snippet receives `{ children, token }` where `token` is a typed token object containing the parsed markdown token with its properties and children is a snippet to be rendered.
 
 ```svelte
 <script>
@@ -250,36 +347,36 @@ This heading will use a custom component!`;
 This heading uses a custom component with your design system!`;
 </script>
 
-{#snippet customH1({ children, ...props })}
+{#snippet customHeading({ children, token })}
 	<h1
 		class="text-gradient mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-4xl font-bold text-transparent"
-		{...props}
+		{...token.props}
 	>
 		{@render children()}
 	</h1>
 {/snippet}
 
-{#snippet customCode({ children, ...props })}
-	<code class="rounded bg-gray-100 px-2 py-1 font-mono text-sm dark:bg-gray-800" {...props}>
+{#snippet customCode({ children, token })}
+	<code class="rounded bg-gray-100 px-2 py-1 font-mono text-sm dark:bg-gray-800" {...token.props}>
 		{@render children()}
 	</code>
 {/snippet}
 
-{#snippet customBlockquote({ children, ...props })}
+{#snippet customBlockquote({ children, token })}
 	<blockquote
 		class="border-l-4 border-blue-500 pl-4 text-gray-600 italic dark:text-gray-300"
-		{...props}
+		{...token.props}
 	>
 		{@render children()}
 	</blockquote>
 {/snippet}
 
-<Streamdown {content} h1={customH1} code={customCode} blockquote={customBlockquote} />
+<Streamdown {content} heading={customHeading} code={customCode} blockquote={customBlockquote} />
 ```
 
 #### All Available Customizable Elements:
 
-**Text Elements**: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `strong`, `em`, `del`
+**Text Elements**: `heading`, `p`, `strong`, `em`, `del`
 
 **Links & Media**: `a`, `img`
 
@@ -291,95 +388,7 @@ This heading uses a custom component with your design system!`;
 
 **Special Content**: `blockquote`, `hr`, `alert`, `mermaid`, `math`, `inlineMath`
 
-**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system. Use `customElements` only for HTML elements **not in this list** (like `div`, `span`, `section`, `article`, etc.).
-
-Each snippet receives `{ children, ...props }` where `props` contains all element attributes and classes.
-
-### Using `customElements` Record
-
-The `customElements` prop is specifically for HTML elements that are **not handled by the library by default**. For elements already supported by Streamdown (like `h1`, `p`, `code`, etc.), use individual props or the theme system instead.
-
-```svelte
-<script>
-	import { Streamdown } from 'svelte-streamdown';
-
-	let content = `# Custom Elements Example
-
-This content contains HTML elements not handled by Streamdown by default:
-
-<div class="special">This is a custom div element</div>
-
-<span class="highlight">This is a custom span element</span>
-
-<section class="wrapper">
-	<article>This is a custom article inside a section</article>
-</section>`;
-
-	// Define custom components for unsupported HTML elements
-</script>
-
-{#snippet customDiv({ children, props, className, node })}
-	<div class="rounded-lg border-2 border-blue-500 p-4 {className}" {...props}>
-		{@render children()}
-	</div>
-{/snippet}
-
-{#snippet customSpan({ children, props, className, node })}
-	<span class="rounded bg-yellow-200 px-2 py-1 {className}" {...props}>
-		{@render children()}
-	</span>
-{/snippet}
-
-{#snippet customSection({ children, props, className, node })}
-	<section class="my-8 rounded-xl bg-gray-50 p-6 {className}" {...props}>
-		{@render children()}
-	</section>
-{/snippet}
-
-{#snippet customArticle({ children, props, className, node })}
-	<article class="prose max-w-none {className}" {...props}>
-		{@render children()}
-	</article>
-{/snippet}
-
-<Streamdown
-	{content}
-	customElements={{
-		div: customDiv,
-		span: customSpan,
-		section: customSection,
-		article: customArticle
-	}}
-/>
-```
-
-### Benefits of `customElements`
-
-- **Handle Unsupported Elements**: Define components for HTML elements not built into Streamdown
-- **Semantic HTML Support**: Use elements like `<section>`, `<article>`, `<aside>`, `<nav>`, etc.
-- **Fallback Support**: Automatically handles unknown elements that would otherwise be ignored
-- **Type Safety**: Full TypeScript support with `ElementProps` interface
-
-### `customElements` vs Individual Props
-
-Use the right approach for the right elements:
-
-**Individual Props** (for supported Streamdown elements):
-
-```svelte
-<Streamdown {content} h1={customH1} p={customP} code={customCode} />
-```
-
-**CustomElements Record** (for unsupported HTML elements):
-
-```svelte
-<Streamdown
-	{content}
-	customElements={{ div: customDiv, span: customSpan, section: customSection }}
-/>
-```
-
-**Note**: For supported elements (h1, p, code, etc.), use individual props or the theme system. For unsupported elements (div, span, section, etc.), use `customElements`.
+**Note**: The above elements are **supported by Streamdown** and should be customized using individual props or the theme system.
 
 ## 🎨 Advanced Theming System
 

package/dist/Block.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">
 	import { parseIncompleteMarkdown } from './utils/parse-incomplete-markdown.js';
 	import Element from './Elements/Element.svelte';
-	import { lex, type StreamdownToken, type TableRow } from './marked/index.js';
+	import { lex, type StreamdownToken } from './marked/index.js';
 
 	let {
 		block
@@ -15,50 +15,8 @@
 	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
 
 	const getChildren = (token: StreamdownToken) => {
-		if (token.type === 'list') {
-			return token.items as StreamdownToken[];
-		}
-
-		if (token.type === 'table') {
-			const headerRow = token.header?.length
-				? ({
-						type: 'tableRow',
-						raw: '',
-						tokens: token.header.map((cell) => ({
-							type: 'th',
-							raw: '',
-							...cell
-						})),
-						isHeader: true
-					} satisfies TableRow)
-				: null;
-
-			const rows = token.rows.reduce(
-				(acc, cells) => {
-					const row = {
-						type: 'tableRow',
-						raw: '',
-						tokens: cells.map((cell) => ({
-							type: 'td',
-							raw: '',
-							...cell
-						})),
-						isHeader: false
-					} satisfies TableRow;
-					acc.push(row);
-					return acc;
-				},
-				headerRow
-					? ([
-							{
-								type: 'tableHead',
-								tokens: [headerRow]
-							}
-						] as StreamdownToken[])
-					: []
-			);
-
-			return rows;
+		if (!token) {
+			return [];
 		}
 		const children =
 			'tokens' in token ? ((token.tokens || []) as StreamdownToken[]) : ([] as StreamdownToken[]);
@@ -79,15 +37,17 @@
 
 {#snippet renderChildren(tokens: StreamdownToken[])}
 	{#each tokens as token}
-		{@const children = getChildren(token)}
-		{@const isTextOnlyNode = children.length === 0}
-		<Element {token}>
-			{#if isTextOnlyNode}
-				{'text' in token ? token.text : ''}
-			{:else}
-				{@render renderChildren(children)}
-			{/if}
-		</Element>
+		{#if token}
+			{@const children = getChildren(token)}
+			{@const isTextOnlyNode = children.length === 0}
+			<Element {token}>
+				{#if isTextOnlyNode}
+					{'text' in token ? token.text : ''}
+				{:else}
+					{@render renderChildren(children)}
+				{/if}
+			</Element>
+		{/if}
 	{/each}
 {/snippet}
 

package/dist/Elements/Alert.svelte

@@ -13,7 +13,7 @@
 	/><path d="M12 17h.01" />`
 	};
 
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import Slot from './Slot.svelte';
 	import type { AlertToken } from '../marked/index.js';
 	import type { Snippet } from 'svelte';
@@ -35,7 +35,6 @@
 <Slot
 	props={{
 		children,
-		alertType,
 		token
 	}}
 	render={streamdown.snippets.alert}

package/dist/Elements/Code.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import { save } from '../utils/save.js';
 	import { useCopy } from '../utils/copy.svelte.js';
 	import { HighlighterManager, languageExtensionMap } from '../utils/hightlighter.svelte.js';
@@ -7,11 +7,9 @@
 	import type { Snippet } from 'svelte';
 
 	const {
-		token,
-		children
+		token
 	}: {
 		token: Tokens.Code;
-		children: Snippet;
 	} = $props();
 
 	const streamdown = useStreamdown();

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

@@ -1,8 +1,6 @@
 import type { Tokens } from 'marked';
-import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     token: Tokens.Code;
-    children: Snippet;
 };
 declare const Code: import("svelte").Component<$$ComponentProps, {}, "">;
 type Code = ReturnType<typeof Code>;

package/dist/Elements/Element.svelte

@@ -3,13 +3,12 @@
 	import Link from './Link.svelte';
 	import Code from './Code.svelte';
 	import Image from './Image.svelte';
-	import Table from './Table.svelte';
 	import Mermaid from './Mermaid.svelte';
 	import Math from './Math.svelte';
 	import Alert from './Alert.svelte';
 	import type { StreamdownToken } from '../marked/index.js';
 	import Slot from './Slot.svelte';
-	import { useStreamdown } from '../Streamdown.svelte';
+	import { useStreamdown } from '../Streamdown.js';
 	import FootnoteRef from './FootnoteRef.svelte';
 	let { token, children }: { token: StreamdownToken; children: Snippet } = $props();
 	const id = $props.id();
@@ -43,9 +42,13 @@
 		</blockquote>
 	</Slot>
 {:else if token.type === 'code' && token.lang === 'mermaid'}
-	<Mermaid {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.code}>
+		<Mermaid {token} />
+	</Slot>
 {:else if token.type === 'code'}
-	<Code {token} {children} />
+	<Slot props={{ children, token }} render={streamdown.snippets.code}>
+		<Code {token} />
+	</Slot>
 {:else if token.type === 'codespan'}
 	<Slot props={{ children, token }} render={streamdown.snippets.codespan}>
 		<code class={streamdown.theme.codespan.base}>
@@ -54,8 +57,6 @@
 	</Slot>
 {:else if token.type === 'list'}
 	{#if token.ordered}
-		{@const firstItemValue = token.items[0]?.value || 1}
-		{@const counterName = `counter-${id}`}
 		<Slot props={{ children, token }} render={streamdown.snippets.ol}>
 			<ol style:list-style-type={token.listType} class={streamdown.theme.ol.base}>
 				{@render children()}
@@ -72,7 +73,7 @@
 	<Slot props={{ children, token }} render={streamdown.snippets.li}>
 		<li
 			style:list-style-type={token.task ? 'none' : undefined}
-			value={token.value}
+			{...token.value && !token.task ? { value: token.value } : {}}
 			class={streamdown.theme.li.base}
 		>
 			{#if token.task}
@@ -87,31 +88,67 @@
 		</li>
 	</Slot>
 {:else if token.type === 'table'}
-	<Table {token} {children} />
-{:else if token.type === 'tableRow'}
-	<Slot props={{ token, children }} render={streamdown.snippets.tableRow}>
-		<tr class={streamdown.theme.tableRow.base}>
-			{@render children?.()}
-		</tr>
+	<Slot props={{ token, children }} render={streamdown.snippets.table}>
+		<div class={streamdown.theme.table.base}>
+			<table class={streamdown.theme.table.table}>
+				{@render children()}
+			</table>
+		</div>
 	</Slot>
-{:else if token.type === 'tableHead'}
-	<Slot props={{ token, children }} render={streamdown.snippets.tableHead}>
-		<thead class={streamdown.theme.tableHead.base}>
+{:else if token.type === 'thead'}
+	<Slot props={{ token, children }} render={streamdown.snippets.thead}>
+		<thead class={streamdown.theme.thead.base}>
 			{@render children?.()}
 		</thead>
 	</Slot>
-{:else if token.type === 'td'}
-	<Slot props={{ children, token }} render={streamdown.snippets.td}>
-		<td class={streamdown.theme.td.base}>
+{:else if token.type === 'tbody'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tbody}>
+		<tbody class={streamdown.theme.tbody.base}>
 			{@render children?.()}
-		</td>
+		</tbody>
 	</Slot>
-{:else if token.type === 'th'}
-	<Slot props={{ children, token }} render={streamdown.snippets.th}>
-		<th class={streamdown.theme.th.base}>
+{:else if token.type === 'tfoot'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tfoot}>
+		<tfoot class={streamdown.theme.tfoot.base}>
+			{@render children?.()}
+		</tfoot>
+	</Slot>
+{:else if token.type === 'tr'}
+	<Slot props={{ token, children }} render={streamdown.snippets.tr}>
+		<tr class={streamdown.theme.tr.base}>
 			{@render children?.()}
-		</th>
+		</tr>
 	</Slot>
+{:else if token.type === 'td'}
+	{#if token.rowspan > 0}
+		<Slot props={{ children, token }} render={streamdown.snippets.td}>
+			<td
+				class={streamdown.theme.td.base}
+				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
+				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
+				{...token.align && ['left', 'center', 'right', 'justify', 'char'].includes(token.align)
+					? { align: token.align as 'left' | 'center' | 'right' | 'justify' | 'char' }
+					: { align: 'left' }}
+			>
+				{@render children?.()}
+			</td>
+		</Slot>
+	{/if}
+{:else if token.type === 'th'}
+	{#if token.rowspan > 0}
+		<Slot props={{ children, token }} render={streamdown.snippets.th}>
+			<th
+				class={streamdown.theme.th.base}
+				{...token.colspan > 1 ? { colspan: token.colspan } : {}}
+				{...token.rowspan > 1 ? { rowspan: token.rowspan } : {}}
+				{...token.align && ['left', 'center', 'right', 'justify', 'char'].includes(token.align)
+					? { align: token.align as 'left' | 'center' | 'right' | 'justify' | 'char' }
+					: { align: 'left' }}
+			>
+				{@render children?.()}
+			</th>
+		</Slot>
+	{/if}
 {:else if token.type === 'image'}
 	<Image {token} {children} />
 {:else if token.type === 'link'}
@@ -153,7 +190,15 @@
 {:else if token.type === 'br'}
 	<br />
 {:else if token.type === 'math'}
-	<Math {token} {children} />
+	<Slot
+		props={{
+			children,
+			token
+		}}
+		render={streamdown.snippets.math}
+	>
+		<Math {token} />
+	</Slot>
 {:else if token.type === 'alert'}
 	<Alert {token} {children} />
 {:else if token.type === 'footnoteRef'}