svelte-streamdown 2.0.0 → 2.0.1

package/README.md

@@ -45,14 +45,21 @@ Perfect for AI-powered applications that need to stream and render markdown cont
 
 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.
 
-### 📝 GitHub Flavored Markdown
-
-Full support for GitHub Flavored Markdown including:
-
-- Tables
-- ~~Strikethrough~~
-- Subscript (H~2~O)
-- Superscript (E = mc^2^)
+### 📝 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]:
@@ -243,6 +250,7 @@ This Svelte port maintains feature parity with the original [Streamdown](https:/
 > [!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

package/dist/Block.svelte

@@ -13,32 +13,12 @@
 	} = $props();
 
 	const tokens = $derived(lex(parseIncompleteMarkdown(block.trim())));
-
-	const getChildren = (token: StreamdownToken) => {
-		if (!token) {
-			return [];
-		}
-		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}
 		{#if token}
-			{@const children = getChildren(token)}
+			{@const children = (token as any)?.tokens || []}
 			{@const isTextOnlyNode = children.length === 0}
 			<Element {token}>
 				{#if isTextOnlyNode}

package/dist/Elements/Code.svelte

@@ -65,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,
@@ -80,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/marked/index.d.ts

@@ -5,7 +5,7 @@ import { type MathToken } from './marked-math.js';
 import { type SubSupToken } from './marked-subsup.js';
 import { type ListItemToken, type ListToken } from './marked-list.js';
 import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, type TRow, type TH, type TD } from './marked-table.js';
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem | Tokens.Table> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD;
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string) => StreamdownToken[];
 export declare const parseBlocks: (markdown: string) => string[];

package/dist/marked/index.js

@@ -6,8 +6,6 @@ import markedSubSup, {} from './marked-subsup.js';
 import { markedList } from './marked-list.js';
 import { markedTable } from './marked-table.js';
 const completeLexer = new Marked({
-    // Enable GFM features but disable built-in tables
-    gfm: true,
     tokenizer: {
         table: () => {
             return false;
@@ -21,7 +19,6 @@ const completeLexer = new Marked({
     .use(markedList())
     .use(markedTable());
 const blockLexer = new Lexer({
-    gfm: true,
     extensions: {
         childTokens: {},
         renderers: {},

package/dist/marked/marked-alert.js

@@ -1,8 +1,5 @@
 import { Lexer } from 'marked';
 const variants = ['note', 'tip', 'important', 'warning', 'caution'];
-// export function createSyntaxPattern(type: variantType): string {
-// 	return `^(?:\\[!${type.toUpperCase()}])\\s*?\n*`;
-// }
 export function createSyntaxPattern(type) {
     return `^\\s*\\[!${type.toUpperCase()}\\]\\s+`;
 }
@@ -14,7 +11,7 @@ export default function markedAlert() {
             {
                 name: 'alert',
                 level: 'block',
-                tokenizer(src, tokens) {
+                tokenizer(src) {
                     const cap = defaultTokenizer.rules.block.blockquote.exec(src);
                     if (cap) {
                         const blockquoteToken = defaultTokenizer.blockquote(src);
@@ -30,9 +27,11 @@ export function processAlertToken(token, tokenizer) {
     const matchedVariant = variants.find((type) => new RegExp(createSyntaxPattern(type)).test(('text' in token && token.text) || ''));
     if (!matchedVariant)
         return;
-    const tokens = token.tokens.map((token) => {
+    const tokens = token.tokens
+        .map((token) => {
         return tokenizer.lexer.blockTokens(token.raw.replaceAll(`[!${matchedVariant.toUpperCase()}]`, '').trim(), [])[0];
-    });
+    })
+        .filter(Boolean);
     Object.assign(token, {
         type: 'alert',
         variant: matchedVariant,

package/dist/marked/marked-footnotes.js

@@ -1,4 +1,4 @@
-import { lex } from './index.js';
+import {} from './index.js';
 import { StreamdownContext } from '../Streamdown.js';
 import { getContext } from 'svelte';
 const safeGetContext = () => {

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

@@ -1,4 +1,4 @@
-import type { MarkedExtension } from 'marked';
+import type { TokenizerExtensionFunction } from 'marked';
 export interface SpanTableOptions {
     useTheadTbody?: boolean;
     useTfoot?: boolean;
@@ -55,5 +55,12 @@ type WorkingRow = WorkingCell[];
 export declare const DEFAULT_OPTIONS: Required<SpanTableOptions>;
 export declare const getTableCell: (text: string, cell: BaseCell, type: "th" | "td", align: string | null) => string;
 export declare const splitCells: (tableRow: string, count: number | null, prevRow?: WorkingRow | null, maxColspan?: number | null) => WorkingRow;
-export declare function markedTable(options?: SpanTableOptions): MarkedExtension;
+export declare function markedTable(options?: SpanTableOptions): {
+    extensions: {
+        name: string;
+        level: 'block' | 'inline';
+        start: (src: string) => number | undefined;
+        tokenizer: TokenizerExtensionFunction;
+    }[];
+};
 export {};

package/dist/theme.js

@@ -35,7 +35,7 @@ export const theme = {
     },
     li: {
         base: 'py-1 marker:hidden',
-        checkbox: '-ml-2'
+        checkbox: ' mr-2'
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-xl border border-gray-200 flex flex-col',
@@ -43,7 +43,7 @@ export const theme = {
         header: 'flex items-center justify-between bg-gray-100/80 p-2 pb-0	 text-gray-600 text-xs',
         button: 'cursor-pointer size-6 p-1 text-gray-600 transition-all hover:text-gray-900 rounded hover:bg-gray-100',
         language: 'ml-1 font-mono lowercase',
-        skeleton: 'rounded-md font-mono text-transparent bg-gray-200 whitespace-nowrap inline-block',
+        skeleton: 'rounded-md font-mono text-transparent bg-gray-200 scale-y-90 animate-pulse whitespace-nowrap inline-block',
         pre: 'overflow-x-auto font-mono p-0 bg-gray-100/40'
     },
     codespan: {
@@ -162,7 +162,7 @@ export const shadcnTheme = {
     },
     li: {
         base: 'py-1',
-        checkbox: '-ml-2'
+        checkbox: ' mr-2'
     },
     code: {
         base: 'my-4 w-full overflow-hidden rounded-lg border border-border flex flex-col',
@@ -170,7 +170,7 @@ export const shadcnTheme = {
         header: 'flex items-center justify-between bg-muted/80 p-2 pb-0 text-muted-foreground text-xs',
         button: 'cursor-pointer size-6 p-1 text-muted-foreground transition-all hover:text-foreground rounded hover:bg-muted',
         language: 'ml-1 font-mono lowercase',
-        skeleton: 'rounded-md font-mono text-transparent bg-muted whitespace-nowrap inline-block',
+        skeleton: 'rounded-md font-mono text-transparent bg-border/80 scale-y-90 w-fit animate-pulse whitespace-nowrap inline-block',
         pre: 'overflow-x-auto font-mono p-0 bg-muted/40'
     },
     codespan: {

package/package.json

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