svelte-streamdown 1.0.9 → 2.0.1

package/README.md

@@ -20,19 +20,46 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 
 ## ✨ Main Features
 
-### 🎨 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.
+### 🔄 Streaming-Optimized
 
-### 📝 GitHub Flavored Markdown
+- **Incomplete Markdown Parsing**: Handles unterminated blocks gracefully
+- **Progressive Rendering**: Perfect for streaming AI responses
+- **Real-time Updates**: Optimized for dynamic content
 
-Full support for GitHub Flavored Markdown including:
+### 🔒 Security Hardening
 
-- Task lists
-- Tables
-- ~~Strikethrough~~
-- Subscript (H~2~O)
-- Superscript (E = mc^2^)
+- **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.
+
+### 📝 Extensive Markdown Features
+
+Full support for 
+- Basic text marks: **bold**, *italic*, `code`, ~~Strikethrough~~
+- ~Subscript~ and ^Superscript^
+- [Links](https://svelte-streamdown.beynar.workers.dev/)
+- Headings (H1–H6)
+- Blockquotes
+- Github alert
+- Ordered & unordered lists (including roman, alpha, nested)
+- Task lists ([ ] and [x])
+- Code blocks 
+- Mermaid diagrams
+- Math $expressions$
+- Complex tables
 - Footnotes [^1]
 
 [^1]:
@@ -99,49 +126,131 @@ 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
 
 > [!NOTE]
 > Streamdown comes with **built-in Tailwind CSS classes** for beautiful default styling. To ensure all styles are included in your build, add the following to your `app.css` or main CSS file:
 > This setup is primarily necessary if you're using Tailwind CSS v4's new `@source` directive or if you have aggressive purging enabled in older versions. If you're using standard Tailwind CSS v3+ with default purging, Streamdown's styles should be automatically included when the component is imported and used in your application.
+> 
 > This ensures that all Streamdown's default styling is included in your Tailwind build process.
 
 ```css
@@ -184,13 +293,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 +329,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 +338,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 +355,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 +396,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
@@ -13,81 +13,21 @@
 	} = $props();
 
 	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;
-		}
-		const children =
-			'tokens' in token ? ((token.tokens || []) as StreamdownToken[]) : ([] as StreamdownToken[]);
-
-		if (!children.length && token.type !== 'text') {
-			return [
-				{
-					type: 'text',
-					text: 'text' in token ? token.text : '',
-					raw: 'raw' in token ? token.raw : '',
-					tokens: []
-				}
-			] satisfies StreamdownToken[];
-		}
-		return children;
-	};
 </script>
 
 {#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 = (token as any)?.tokens || []}
+			{@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();
@@ -67,7 +65,10 @@
 	</div>
 	<div style="height: fit-content; width: 100%;" class={streamdown.theme.code.container}>
 		<div>
+			<!-- {@render Skeleton()} -->
 			{#if highlighter.isReady(theme, language as any)}
+				<!-- {@render Skeleton()} -->
+
 				{@const code = highlighter.highlightCode(
 					codeContent,
 					language as any,
@@ -82,16 +83,15 @@
 	</div>
 </div>
 
-<!-- Need to improve this -->
 {#snippet Skeleton()}
-	{@const lines = codeContent.split('\n')}
+	{@const lines = token.text.split('\n')}
 	<!--  -->
 
 	<!--  --><code
 		class={streamdown.theme.code.pre}
 		style="height: fit-content; width: 100%; display: flex; flex-direction: column;"
 		><!--  -->{#each lines as line}<!--  --><span class={streamdown.theme.code.skeleton}
-				>{line}</span
+				>{line.trim().length > 0 ? line : '\u200B'}</span
 			><!--  -->
 			<!--  -->{/each}<!--  --></code
 	><!--  -->

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>;