svelte-streamdown 2.3.2 → 2.3.4

package/README.md

@@ -231,6 +231,13 @@ III. Third item
 > [!IMPORTANT]
 > Native support for Github style Alert
 
+### Description List
+
+    :   Topic 1   :  Description 1
+    : **Topic 2** : *Description 2*
+    :   Topic 3   :  Description 3
+    :   Topic 3   :  Description 3
+
 ## 🔄 Differences from Original React Version
 
 This Svelte port maintains feature parity with the original [Streamdown](https://streamdown.ai/) while adapting to Svelte's patterns:

package/dist/Elements/Code.svelte

@@ -14,7 +14,8 @@
 	} = $props();
 
 	const streamdown = useStreamdown();
-	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes || []);
+	const highlighter = HighlighterManager.create(streamdown.shikiPreloadThemes);
+
 	const copy = useCopy({
 		get content() {
 			return token.text;
@@ -44,8 +45,6 @@
 			void highlighter.load(theme, lang);
 		});
 	});
-
-	const isMounted = streamdown.isMounted;
 </script>
 
 <div class={streamdown.theme.code.base}>
@@ -84,7 +83,7 @@
 		<span class={streamdown.theme.code.line}>
 			{#each line as token}
 				<span
-					style={isMounted ? streamdown.animationTextStyle : undefined}
+					style={streamdown.isMounted ? streamdown.animationTextStyle : undefined}
 					style:color={token.color}
 					style:background-color={token.bgColor}
 				>
@@ -97,7 +96,10 @@
 
 {#snippet Skeleton(lines: string[])}
 	{#each lines as line}
-		<span class={streamdown.theme.code.skeleton}>
+		<span
+			style={streamdown.isMounted ? streamdown.animationTextStyle : undefined}
+			class={streamdown.theme.code.skeleton}
+		>
 			{line.trim().length > 0 ? line : '\u200B'}
 		</span>
 	{/each}

package/dist/Elements/Element.svelte

@@ -225,6 +225,30 @@
 	<FootnoteRef {token} />
 {:else if token.type === 'footnote'}
 	<!-- TODO Footnotes are rendered inside the FootnoteRef popover -->
+{:else if token.type === 'descriptionList'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionList}>
+		<dl class={streamdown.theme.descriptionList.base}>
+			{@render children()}
+		</dl>
+	</Slot>
+{:else if token.type === 'description'}
+	<Slot props={{ children, token }} render={streamdown.snippets.description}>
+		<div class={streamdown.theme.description.base}>
+			{@render children()}
+		</div>
+	</Slot>
+{:else if token.type === 'descriptionTerm'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionTerm}>
+		<dt class={streamdown.theme.descriptionTerm.base}>
+			{@render children()}
+		</dt>
+	</Slot>
+{:else if token.type === 'descriptionDetail'}
+	<Slot props={{ children, token }} render={streamdown.snippets.descriptionDetail}>
+		<dd class={streamdown.theme.descriptionDetail.base}>
+			{@render children()}
+		</dd>
+	</Slot>
 {:else if token.type === 'def'}
 	<!-- TODO This does not seems to be tokenized for now -->
 {:else if token.type === 'escape'}

package/dist/context.svelte.d.ts

@@ -32,6 +32,7 @@ import type { AlertToken, MathToken, SubSupToken, TableToken, THead, TBody, TFoo
 import type { Tokens } from 'marked';
 import type { ListItemToken, ListToken } from './marked/marked-list.js';
 import type { Footnote, FootnoteRef, FootnoteToken } from './marked/marked-footnotes.js';
+import type { DescriptionDetailToken, DescriptionListToken, DescriptionTermToken, DescriptionToken } from './marked/marked-dl.js';
 type TokenSnippet = {
     heading: Tokens.Heading;
     paragraph: Tokens.Paragraph;
@@ -62,6 +63,10 @@ type TokenSnippet = {
     footnotePopover: FootnoteToken;
     sup: SubSupToken;
     sub: SubSupToken;
+    descriptionList: DescriptionListToken;
+    description: DescriptionToken;
+    descriptionTerm: DescriptionTermToken;
+    descriptionDetail: DescriptionDetailToken;
 };
 type PredefinedElements = keyof TokenSnippet;
 export type Snippets = {

package/dist/marked/index.d.ts

@@ -7,6 +7,7 @@ import { type ListItemToken, type ListToken } from './marked-list.js';
 import { type BrToken } from './marked-br.js';
 import { type HrToken } from './marked-hr.js';
 import { type TableToken, type THead, type TBody, type TFoot, type THeadRow, type TRow, type TH, type TD } from './marked-table.js';
+import { type DescriptionDetailToken, type DescriptionListToken, type DescriptionTermToken, type DescriptionToken } from './marked-dl.js';
 export type GenericToken = {
     type: string;
     raw: string;
@@ -19,7 +20,7 @@ export type Extension = {
     start?: TokenizerStartFunction;
     applyInBlockParsing?: boolean;
 };
-export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD;
+export type StreamdownToken = Exclude<MarkedToken, Tokens.List | Tokens.ListItem> | ListToken | ListItemToken | MathToken | AlertToken | FootnoteToken | SubSupToken | BrToken | HrToken | TableToken | THead | TBody | TFoot | THeadRow | TRow | TH | TD | DescriptionListToken | DescriptionToken | DescriptionDetailToken | DescriptionTermToken;
 export type { TableToken, THead, TBody, TFoot, THeadRow, TRow, TH, TD } from './marked-table.js';
 export declare const lex: (markdown: string, extensions?: Extension[]) => StreamdownToken[];
 export declare const parseBlocks: (markdown: string, extensions?: Extension[]) => string[];

package/dist/marked/index.js

@@ -7,6 +7,7 @@ import { markedList } from './marked-list.js';
 import { markedBr } from './marked-br.js';
 import { markedHr } from './marked-hr.js';
 import { markedTable } from './marked-table.js';
+import { markedDl, markedDt } from './marked-dl.js';
 const parseExtensions = (...extensions) => {
     const options = {
         gfm: true,
@@ -40,12 +41,12 @@ const parseExtensions = (...extensions) => {
     return options;
 };
 export const lex = (markdown, extensions = []) => {
-    return new Lexer(parseExtensions(markedHr, markedTable, ...markedFootnote(), markedAlert, ...markedMath, markedSub, markedSup, markedList, markedBr, ...extensions))
+    return new Lexer(parseExtensions(markedHr, markedTable, ...markedFootnote(), markedAlert, ...markedMath, markedSub, markedSup, markedList, markedBr, markedDl, markedDt, ...extensions))
         .lex(markdown)
         .filter((token) => token.type !== 'space' && token.type !== 'footnote');
 };
 export const parseBlocks = (markdown, extensions = []) => {
-    const blockLexer = new Lexer(parseExtensions(markedHr, ...markedFootnote(), markedTable, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
+    const blockLexer = new Lexer(parseExtensions(markedHr, ...markedFootnote(), markedDl, markedTable, ...extensions.filter(({ level, applyInBlockParsing }) => level === 'block' && applyInBlockParsing)));
     return blockLexer.blockTokens(markdown, []).reduce((acc, block) => {
         if (block.type === 'space' || block.type === 'footnote') {
             return acc;

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

@@ -0,0 +1,24 @@
+import type { Extension, GenericToken } from './index.js';
+export declare const markedDl: Extension;
+export declare const markedDt: Extension;
+export type DescriptionListToken = {
+    type: 'descriptionList';
+    raw: string;
+    text: string;
+    tokens: DescriptionToken[];
+};
+export type DescriptionToken = {
+    type: 'description';
+    raw: string;
+    tokens: [DescriptionTermToken, DescriptionDetailToken];
+};
+export type DescriptionTermToken = {
+    type: 'descriptionTerm';
+    raw: string;
+    tokens: GenericToken[];
+};
+export type DescriptionDetailToken = {
+    type: 'descriptionDetail';
+    raw: string;
+    tokens: GenericToken[];
+};

package/dist/marked/marked-dl.js

@@ -0,0 +1,45 @@
+export const markedDl = {
+    name: 'descriptionList',
+    level: 'block', // Is this a block-level or inline-level tokenizer?
+    tokenizer(src) {
+        const rule = /^(?:[ \t]*:[^:\n]+:[ \t]?[^\n]*(?:\n|$))+/;
+        const match = rule.exec(src);
+        if (match) {
+            const token = {
+                type: 'descriptionList',
+                raw: match[0],
+                text: match[0].trim(),
+                tokens: this.lexer.inlineTokens(match[0].trim()).filter((t) => t.type === 'description')
+            };
+            return token;
+        }
+    }
+};
+export const markedDt = {
+    name: 'description',
+    level: 'inline',
+    tokenizer(src) {
+        const rule = /^\s*:([^:\n]+):([^:\n]*)(?:\n|$)/;
+        const match = rule.exec(src);
+        if (match) {
+            const term = match[1].trim();
+            const detail = match[2].trim();
+            return {
+                type: 'description',
+                raw: match[0],
+                tokens: [
+                    {
+                        type: 'descriptionTerm',
+                        raw: term,
+                        tokens: this.lexer.inlineTokens(term)
+                    },
+                    {
+                        type: 'descriptionDetail',
+                        raw: detail,
+                        tokens: this.lexer.inlineTokens(detail)
+                    }
+                ]
+            };
+        }
+    }
+};

package/dist/theme.d.ts

@@ -128,6 +128,18 @@ export declare const theme: {
     footnotePopover: {
         base: string;
     };
+    descriptionList: {
+        base: string;
+    };
+    description: {
+        base: string;
+    };
+    descriptionTerm: {
+        base: string;
+    };
+    descriptionDetail: {
+        base: string;
+    };
 };
 export declare const shadcnTheme: {
     link: {
@@ -257,6 +269,18 @@ export declare const shadcnTheme: {
     footnotePopover: {
         base: string;
     };
+    descriptionList: {
+        base: string;
+    };
+    description: {
+        base: string;
+    };
+    descriptionTerm: {
+        base: string;
+    };
+    descriptionDetail: {
+        base: string;
+    };
 };
 export type Theme = typeof theme;
 type DeepPartial<T> = {
@@ -391,5 +415,17 @@ export declare const mergeTheme: (customTheme?: DeepPartialTheme, baseTheme?: "t
     footnotePopover: {
         base: string;
     };
+    descriptionList: {
+        base: string;
+    };
+    description: {
+        base: string;
+    };
+    descriptionTerm: {
+        base: string;
+    };
+    descriptionDetail: {
+        base: string;
+    };
 };
 export {};

package/dist/theme.js

@@ -128,6 +128,18 @@ export const theme = {
     },
     footnotePopover: {
         base: 'fixed z-50 max-h-[30vh] max-w-3xl overflow-y-auto rounded-lg bg-background p-4 shadow'
+    },
+    descriptionList: {
+        base: 'my-4 space-y-2'
+    },
+    description: {
+        base: 'border-l-2 border-gray-200 pl-4'
+    },
+    descriptionTerm: {
+        base: 'font-semibold text-gray-900'
+    },
+    descriptionDetail: {
+        base: 'text-gray-700 ml-4 leading-relaxed'
     }
 };
 export const shadcnTheme = {
@@ -247,7 +259,7 @@ export const shadcnTheme = {
         base: ''
     },
     em: {
-        base: 'italic text-foreground'
+        base: 'italic'
     },
     del: {
         base: 'text-muted-foreground'
@@ -257,6 +269,18 @@ export const shadcnTheme = {
     },
     footnotePopover: {
         base: 'fixed z-50 max-h-[30vh] shadow max-w-3xl overflow-y-auto rounded-lg bg-background p-4'
+    },
+    descriptionList: {
+        base: 'my-4 space-y-2'
+    },
+    description: {
+        base: 'border-l-2 border-border pl-4'
+    },
+    descriptionTerm: {
+        base: 'font-semibold text-foreground'
+    },
+    descriptionDetail: {
+        base: 'text-muted-foreground ml-4 leading-relaxed'
     }
 };
 export const mergeTheme = (customTheme, baseTheme) => {

package/dist/utils/hightlighter.svelte.d.ts

@@ -17,7 +17,7 @@ declare class HighlighterManager {
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
-    preloadThemes(highlighter: Highlighter): Promise<void>;
+    preloadThemes(highlighter: Highlighter): Promise<void[]>;
     /**
      * Ensures the highlighter is ready for the given theme and language.
      */
@@ -26,7 +26,7 @@ declare class HighlighterManager {
      * Highlights code synchronously. Must call isReady() first.
      */
     highlightCode(code: string, language: string | undefined, theme: BundledTheme): ThemedToken[][];
-    static create(preloadedThemes: BundledTheme[]): HighlighterManager;
+    static create(preloadedThemes?: BundledTheme[]): HighlighterManager;
 }
 export { HighlighterManager };
 export declare const languageExtensionMap: Record<string, string>;

package/dist/utils/hightlighter.svelte.js

@@ -23,7 +23,7 @@ class HighlighterManager {
         if (this.highlighter instanceof Promise) {
             return this.highlighter;
         }
-        else {
+        else if (!this.highlighter) {
             this.highlighter = new Promise((resolve, reject) => {
                 loadShiki().then(([engine, createHighlighter]) => {
                     return createHighlighter({
@@ -38,6 +38,9 @@ class HighlighterManager {
             });
             return this.highlighter;
         }
+        else {
+            return this.highlighter;
+        }
     }
     async loadTheme(theme, highlighter) {
         const themeLoader = this.loadedThemes.get(theme);
@@ -50,6 +53,7 @@ class HighlighterManager {
             });
             this.loadedThemes.set(theme, themeLoaderPromise);
             await themeLoaderPromise;
+            this.loadedThemes.set(theme, true);
         }
     }
     async loadLanguage(language, highlighter) {
@@ -63,6 +67,7 @@ class HighlighterManager {
             });
             this.loadedLanguages.set(language, languageLoaderPromise);
             await languageLoaderPromise;
+            this.loadedLanguages.set(language, true);
         }
     }
     isLanguageSupported = (language) => {
@@ -70,26 +75,15 @@ class HighlighterManager {
     };
     isReady(theme, language = 'bash') {
         return (!(this.highlighter instanceof Promise) &&
-            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true &&
-            this.loadedThemes.get(theme) === true);
+            this.loadedThemes.get(theme) === true &&
+            this.loadedLanguages.get(this.isLanguageSupported(language) ? language : 'bash') === true);
     }
     /**
      * Preloads themes by creating minimal highlighter instances.
      * This reduces flickering when switching themes.
      */
     async preloadThemes(highlighter) {
-        for (const theme of this.preloadedThemes) {
-            const themeLoader = this.loadedThemes.get(theme);
-            if (themeLoader === true) {
-                return;
-            }
-            else if (themeLoader instanceof Promise) {
-                await themeLoader;
-            }
-            else {
-                await this.loadTheme(theme, highlighter);
-            }
-        }
+        return Promise.all(Array.from(this.preloadedThemes).map((theme) => this.loadTheme(theme, highlighter)));
     }
     /**
      * Ensures the highlighter is ready for the given theme and language.
@@ -101,7 +95,6 @@ class HighlighterManager {
             !(this.highlighter instanceof Promise) &&
             themeLoader === true &&
             languageLoader === true) {
-            // already loaded
             return;
         }
         const highlighter = await this.loadHighlighter();
@@ -131,7 +124,7 @@ class HighlighterManager {
             return [];
         }
     }
-    static create(preloadedThemes) {
+    static create(preloadedThemes = []) {
         if (typeof window !== 'undefined' && 'STREAMDOWN_HIGHLIGHTER' in window) {
             const previousHighlighter = window.STREAMDOWN_HIGHLIGHTER;
             preloadedThemes.forEach((theme) => previousHighlighter.preloadedThemes.add(theme));

package/package.json

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