svelte-streamdown 2.3.2 → 2.3.3

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/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/package.json

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