@humanspeak/svelte-markdown 0.6.0 → 0.6.1

package/dist/SvelteMarkdown.svelte

@@ -61,7 +61,7 @@
         }
     }
 
-    $inspect(tokens)
+    // $inspect(tokens)
 </script>
 
 <Parser

package/dist/SvelteMarkdown.svelte.d.ts

@@ -1,12 +1,14 @@
-import { type Token, type TokensList, type SvelteMarkdownOptions, type Renderers } from './utils/markdown-parser.js';
-declare const SvelteMarkdown: import("svelte").Component<{
+type Props = {
     source: Token[] | string;
     renderers?: Renderers;
     options?: SvelteMarkdownOptions;
     isInline?: boolean;
     parsed?: (tokens: Token[] | TokensList) => void;
-} & {
+};
+type $$ComponentProps = Props & {
     [key: string]: unknown;
-}, {}, "">;
+};
+import { type Token, type TokensList, type SvelteMarkdownOptions, type Renderers } from './utils/markdown-parser.js';
+declare const SvelteMarkdown: import("svelte").Component<$$ComponentProps, {}, "">;
 type SvelteMarkdown = ReturnType<typeof SvelteMarkdown>;
 export default SvelteMarkdown;

package/dist/renderers/Blockquote.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Blockquote: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Blockquote: import("svelte").Component<Props, {}, "">;
 type Blockquote = ReturnType<typeof Blockquote>;
 export default Blockquote;

package/dist/renderers/Br.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Br: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Br: import("svelte").Component<Props, {}, "">;
 type Br = ReturnType<typeof Br>;
 export default Br;

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

@@ -1,6 +1,7 @@
-declare const Code: import("svelte").Component<{
+type Props = {
     lang: string;
     text: string;
-}, {}, "">;
+};
+declare const Code: import("svelte").Component<Props, {}, "">;
 type Code = ReturnType<typeof Code>;
 export default Code;

package/dist/renderers/Codespan.svelte.d.ts

@@ -1,5 +1,6 @@
-declare const Codespan: import("svelte").Component<{
+type Props = {
     raw: string;
-}, {}, "">;
+};
+declare const Codespan: import("svelte").Component<Props, {}, "">;
 type Codespan = ReturnType<typeof Codespan>;
 export default Codespan;

package/dist/renderers/Del.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Del: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Del: import("svelte").Component<Props, {}, "">;
 type Del = ReturnType<typeof Del>;
 export default Del;

package/dist/renderers/Em.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Em: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Em: import("svelte").Component<Props, {}, "">;
 type Em = ReturnType<typeof Em>;
 export default Em;

package/dist/renderers/Heading.svelte.d.ts

@@ -1,12 +1,13 @@
-import type { Snippet } from 'svelte';
-import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js';
-declare const Heading: import("svelte").Component<{
+type Props = {
     depth: number;
     raw: string;
     text: string;
     options: SvelteMarkdownOptions;
     slug: (val: string) => string;
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+import type { SvelteMarkdownOptions } from '../utils/markdown-parser.js';
+declare const Heading: import("svelte").Component<Props, {}, "">;
 type Heading = ReturnType<typeof Heading>;
 export default Heading;

package/dist/renderers/Image.svelte.d.ts

@@ -1,7 +1,8 @@
-declare const Image: import("svelte").Component<{
+type Props = {
     href?: string;
     title?: string;
     text?: string;
-}, {}, "">;
+};
+declare const Image: import("svelte").Component<Props, {}, "">;
 type Image = ReturnType<typeof Image>;
 export default Image;

package/dist/renderers/Link.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Snippet } from 'svelte';
-declare const Link: import("svelte").Component<{
+type Props = {
     href?: string;
     title?: string;
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Link: import("svelte").Component<Props, {}, "">;
 type Link = ReturnType<typeof Link>;
 export default Link;

package/dist/renderers/List.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Snippet } from 'svelte';
-declare const List: import("svelte").Component<{
+type Props = {
     ordered?: boolean;
     start?: number;
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const List: import("svelte").Component<Props, {}, "">;
 type List = ReturnType<typeof List>;
 export default List;

package/dist/renderers/ListItem.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const ListItem: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const ListItem: import("svelte").Component<Props, {}, "">;
 type ListItem = ReturnType<typeof ListItem>;
 export default ListItem;

package/dist/renderers/Paragraph.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Paragraph: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Paragraph: import("svelte").Component<Props, {}, "">;
 type Paragraph = ReturnType<typeof Paragraph>;
 export default Paragraph;

package/dist/renderers/Strong.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Strong: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Strong: import("svelte").Component<Props, {}, "">;
 type Strong = ReturnType<typeof Strong>;
 export default Strong;

package/dist/renderers/Table.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const Table: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const Table: import("svelte").Component<Props, {}, "">;
 type Table = ReturnType<typeof Table>;
 export default Table;

package/dist/renderers/TableBody.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const TableBody: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const TableBody: import("svelte").Component<Props, {}, "">;
 type TableBody = ReturnType<typeof TableBody>;
 export default TableBody;

package/dist/renderers/TableCell.svelte.d.ts

@@ -1,8 +1,9 @@
-import type { Snippet } from 'svelte';
-declare const TableCell: import("svelte").Component<{
+type Props = {
     header: boolean;
-    align: "left" | "center" | "right" | "justify" | "char" | null | undefined;
+    align: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const TableCell: import("svelte").Component<Props, {}, "">;
 type TableCell = ReturnType<typeof TableCell>;
 export default TableCell;

package/dist/renderers/TableHead.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const TableHead: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const TableHead: import("svelte").Component<Props, {}, "">;
 type TableHead = ReturnType<typeof TableHead>;
 export default TableHead;

package/dist/renderers/TableRow.svelte.d.ts

@@ -1,6 +1,7 @@
-import type { Snippet } from 'svelte';
-declare const TableRow: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import type { Snippet } from 'svelte';
+declare const TableRow: import("svelte").Component<Props, {}, "">;
 type TableRow = ReturnType<typeof TableRow>;
 export default TableRow;

package/dist/renderers/Text.svelte.d.ts

@@ -1,6 +1,7 @@
-import { type Snippet } from 'svelte';
-declare const Text: import("svelte").Component<{
+type Props = {
     children?: Snippet;
-}, {}, "">;
+};
+import { type Snippet } from 'svelte';
+declare const Text: import("svelte").Component<Props, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/renderers/html/index.js

@@ -1,61 +1,169 @@
 import A from './A.svelte';
+import Abbr from './Abbr.svelte';
+import Address from './Address.svelte';
+import Article from './Article.svelte';
+import Aside from './Aside.svelte';
+import Audio from './Audio.svelte';
+import B from './B.svelte';
+import Bdi from './Bdi.svelte';
+import Bdo from './Bdo.svelte';
 import Blockquote from './Blockquote.svelte';
+import Button from './Button.svelte';
+import Canvas from './Canvas.svelte';
+import Cite from './Cite.svelte';
 import Code from './Code.svelte';
+import Datalist from './Datalist.svelte';
+import Dd from './Dd.svelte';
 import Del from './Del.svelte';
+import Details from './Details.svelte';
+import Dfn from './Dfn.svelte';
+import Dialog from './Dialog.svelte';
+import Div from './Div.svelte';
+import Dl from './Dl.svelte';
+import Dt from './Dt.svelte';
 import Em from './Em.svelte';
+import Embed from './Embed.svelte';
+import Fieldset from './Fieldset.svelte';
+import Footer from './Footer.svelte';
+import Form from './Form.svelte';
 import H1 from './H1.svelte';
 import H2 from './H2.svelte';
 import H3 from './H3.svelte';
 import H4 from './H4.svelte';
 import H5 from './H5.svelte';
 import H6 from './H6.svelte';
+import Header from './Header.svelte';
+import Hgroup from './Hgroup.svelte';
 import Hr from './Hr.svelte';
 import I from './I.svelte';
+import Iframe from './Iframe.svelte';
 import Img from './Img.svelte';
+import Input from './Input.svelte';
+import Kbd from './Kbd.svelte';
+import Label from './Label.svelte';
+import Legend from './Legend.svelte';
 import Li from './Li.svelte';
+import Main from './Main.svelte';
+import Mark from './Mark.svelte';
+import Menu from './Menu.svelte';
+import Meter from './Meter.svelte';
+import Nav from './Nav.svelte';
+import Object from './Object.svelte';
 import Ol from './Ol.svelte';
+import Optgroup from './Optgroup.svelte';
+import Option from './Option.svelte';
+import Output from './Output.svelte';
 import P from './P.svelte';
+import Param from './Param.svelte';
+import Picture from './Picture.svelte';
 import Pre from './Pre.svelte';
+import Progress from './Progress.svelte';
+import S from './S.svelte';
+import Samp from './Samp.svelte';
+import Section from './Section.svelte';
+import Select from './Select.svelte';
+import Small from './Small.svelte';
+import Source from './Source.svelte';
+import Span from './Span.svelte';
 import Strong from './Strong.svelte';
 import Sub from './Sub.svelte';
+import Summary from './Summary.svelte';
 import Sup from './Sup.svelte';
 import Table from './Table.svelte';
 import Tbody from './Tbody.svelte';
 import Td from './Td.svelte';
+import Textarea from './Textarea.svelte';
 import Tfoot from './Tfoot.svelte';
 import Th from './Th.svelte';
 import Thead from './Thead.svelte';
 import Tr from './Tr.svelte';
+import Track from './Track.svelte';
+import U from './U.svelte';
 import Ul from './Ul.svelte';
+import Var from './Var.svelte';
 export const Html = {
     a: A,
+    abbr: Abbr,
+    address: Address,
+    article: Article,
+    aside: Aside,
+    audio: Audio,
+    b: B,
+    bdi: Bdi,
+    bdo: Bdo,
     blockquote: Blockquote,
+    button: Button,
+    canvas: Canvas,
+    cite: Cite,
     code: Code,
+    datalist: Datalist,
+    dd: Dd,
     del: Del,
+    details: Details,
+    dfn: Dfn,
+    dialog: Dialog,
+    div: Div,
+    dl: Dl,
+    dt: Dt,
     em: Em,
+    embed: Embed,
+    fieldset: Fieldset,
+    footer: Footer,
+    form: Form,
     h1: H1,
     h2: H2,
     h3: H3,
     h4: H4,
     h5: H5,
     h6: H6,
+    header: Header,
+    hgroup: Hgroup,
     hr: Hr,
     i: I,
+    iframe: Iframe,
     img: Img,
+    input: Input,
+    kbd: Kbd,
+    label: Label,
+    legend: Legend,
     li: Li,
+    main: Main,
+    mark: Mark,
+    menu: Menu,
+    meter: Meter,
+    nav: Nav,
+    object: Object,
     ol: Ol,
+    optgroup: Optgroup,
+    option: Option,
+    output: Output,
     p: P,
+    param: Param,
+    picture: Picture,
     pre: Pre,
+    progress: Progress,
+    s: S,
+    samp: Samp,
+    section: Section,
+    select: Select,
+    small: Small,
+    source: Source,
+    span: Span,
     strong: Strong,
     sub: Sub,
+    summary: Summary,
     sup: Sup,
     table: Table,
     tbody: Tbody,
     td: Td,
+    textarea: Textarea,
+    tfoot: Tfoot,
     th: Th,
     thead: Thead,
     tr: Tr,
-    tfoot: Tfoot,
-    ul: Ul
+    track: Track,
+    u: U,
+    ul: Ul,
+    var: Var
 };
 export default Html;

package/dist/utils/token-cleanup.d.ts

@@ -1,6 +1,6 @@
-import type { Token, TokensList } from 'marked';
+import type { Token } from 'marked';
 export declare const isHtmlOpenTag: (raw: string) => {
     tag: string;
     isOpening: boolean;
 } | null;
-export declare const shrinkHtmlTokens: (tokens: Token[] | TokensList) => Token[];
+export declare const shrinkHtmlTokens: (tokens: Token[]) => Token[];

package/dist/utils/token-cleanup.js

@@ -1,3 +1,4 @@
+import { Parser } from 'htmlparser2';
 // Cache the regex pattern
 const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9-]{0,})(?:\s+[^>]*)?>/;
 const htmlTagRegex = new RegExp(HTML_TAG_PATTERN);
@@ -10,63 +11,126 @@ export const isHtmlOpenTag = (raw) => {
         return null;
     return { tag: match[1], isOpening: !raw.startsWith('</') };
 };
+function extractAttributes(raw) {
+    const attributes = {};
+    const attributeRegex = /(\w+)=["']([^"']*?)["']/g;
+    let match;
+    while ((match = attributeRegex.exec(raw)) !== null) {
+        const [, key, value] = match;
+        attributes[key] = value.trim();
+    }
+    return attributes;
+}
+function parseHtmlBlock(html) {
+    const tokens = [];
+    let currentText = '';
+    const parser = new Parser({
+        onopentag(name, attributes) {
+            if (currentText.trim()) {
+                tokens.push({
+                    type: 'text',
+                    raw: currentText,
+                    text: currentText
+                });
+                currentText = '';
+            }
+            tokens.push({
+                type: 'html',
+                raw: `<${name}${Object.entries(attributes)
+                    .map(([key, value]) => ` ${key}="${value}"`)
+                    .join('')}>`,
+                tag: name,
+                attributes
+            });
+        },
+        ontext(text) {
+            currentText += text;
+        },
+        onclosetag(name) {
+            if (currentText.trim()) {
+                tokens.push({
+                    type: 'text',
+                    raw: currentText,
+                    text: currentText
+                });
+                currentText = '';
+            }
+            tokens.push({
+                type: 'html',
+                raw: `</${name}>`,
+                tag: name
+            });
+        }
+    });
+    parser.write(html);
+    parser.end();
+    return tokens;
+}
+function containsMultipleTags(html) {
+    // Count the number of opening tags (excluding self-closing)
+    const openingTags = html.match(/<[a-zA-Z][^>]*>/g) || [];
+    const closingTags = html.match(/<\/[a-zA-Z][^>]*>/g) || [];
+    return openingTags.length > 1 || closingTags.length > 1;
+}
 export const shrinkHtmlTokens = (tokens) => {
     const result = [];
-    const len = tokens.length;
-    for (let i = 0; i < len; i++) {
-        const currentToken = { ...tokens[i] };
-        // Handle nested tokens first
-        if ('tokens' in currentToken && currentToken.tokens) {
-            currentToken.tokens = shrinkHtmlTokens(currentToken.tokens);
-            result.push(currentToken);
-            continue;
+    for (const token of tokens) {
+        if (token.type === 'html' && containsMultipleTags(token.raw)) {
+            // Parse HTML with multiple tags into separate tokens
+            result.push(...parseHtmlBlock(token.raw));
         }
-        // Check for HTML pattern
-        if (currentToken.type === 'html') {
-            const openTag = isHtmlOpenTag(currentToken.raw);
-            if (openTag?.isOpening) {
-                // Search forward for the next matching closing tag
-                let closingIndex = -1;
-                let depth = 0;
-                for (let j = i + 1; j < len; j++) {
-                    const potentialTag = isHtmlOpenTag(tokens[j].raw);
-                    if (potentialTag?.tag === openTag.tag) {
-                        if (potentialTag.isOpening) {
-                            depth++;
-                        }
-                        else if (depth === 0) {
-                            closingIndex = j;
-                            break;
-                        }
-                        else {
-                            depth--;
-                        }
-                    }
-                }
-                if (closingIndex !== -1) {
-                    // Collect all content between tags
-                    const contentTokens = tokens.slice(i + 1, closingIndex);
-                    result.push({
-                        type: 'html',
-                        raw: currentToken.raw,
-                        text: currentToken.raw.replace(/<|>/g, ''),
-                        tokens: shrinkHtmlTokens(contentTokens),
-                        tag: openTag.tag,
-                        attributes: Object.fromEntries((currentToken.raw.match(/\s+([^>]*)/)?.[1] || '')
-                            .split(/\s+/)
-                            .filter(Boolean)
-                            .map((attr) => {
-                            const [key, value] = attr.split('=');
-                            return [key, value ? value.replace(/['"]/g, '') : true];
-                        }))
-                    });
-                    // Skip ahead past the closing tag
-                    i = closingIndex;
+        else {
+            result.push(token);
+        }
+    }
+    // Then process the tokens as before
+    return processHtmlTokens(result);
+};
+// Rename the existing shrinkHtmlTokens logic to processHtmlTokens
+function processHtmlTokens(tokens) {
+    const result = [];
+    const stack = [];
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        // Recursively process any nested tokens first
+        if ('tokens' in token && Array.isArray(token.tokens)) {
+            token.tokens = processHtmlTokens(token.tokens);
+        }
+        if (token.type === 'html') {
+            const tagInfo = isHtmlOpenTag(token.raw);
+            if (!tagInfo) {
+                result.push(token);
+                continue;
+            }
+            if (tagInfo.isOpening) {
+                stack.push({ tag: tagInfo.tag, startIndex: result.length });
+                result.push(token);
+            }
+            else {
+                const lastOpening = stack.pop();
+                if (!lastOpening || lastOpening.tag !== tagInfo.tag) {
+                    result.push(token);
                     continue;
                 }
+                const startIndex = lastOpening.startIndex;
+                const innerTokens = result.splice(startIndex + 1, result.length - startIndex - 1);
+                const openingToken = result.pop();
+                const attributes = extractAttributes(openingToken.raw);
+                result.push({
+                    type: 'html',
+                    raw: openingToken.raw,
+                    tag: tagInfo.tag,
+                    tokens: processHtmlTokens(innerTokens),
+                    attributes
+                });
             }
         }
-        result.push(currentToken);
+        else {
+            result.push(token);
+        }
+    }
+    if (stack.length > 0) {
+        return tokens;
     }
     return result;
-};
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@humanspeak/svelte-markdown",
     "description": "A markdown renderer for Svelte",
-    "version": "0.6.0",
+    "version": "0.6.1",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -53,23 +53,24 @@
     },
     "dependencies": {
         "github-slugger": "^2.0.0",
+        "htmlparser2": "^9.1.0",
         "marked": "^15.0.0"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "^9.14.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.15.0",
         "@sveltejs/adapter-auto": "^3.3.1",
-        "@sveltejs/kit": "^2.8.0",
+        "@sveltejs/kit": "^2.8.1",
         "@sveltejs/package": "^2.3.7",
-        "@sveltejs/vite-plugin-svelte": "^4.0.0",
+        "@sveltejs/vite-plugin-svelte": "^4.0.1",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.4",
         "@testing-library/user-event": "^14.5.2",
         "@types/node": "^22.9.0",
         "@typescript-eslint/eslint-plugin": "^8.14.0",
         "@typescript-eslint/parser": "^8.14.0",
-        "@vitest/coverage-v8": "^2.1.4",
-        "eslint": "^9.14.0",
+        "@vitest/coverage-v8": "^2.1.5",
+        "eslint": "^9.15.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.46.0",
         "globals": "^15.12.0",
@@ -79,11 +80,11 @@
         "prettier-plugin-svelte": "^3.2.8",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "publint": "^0.2.12",
-        "svelte": "^5.1.15",
-        "svelte-check": "^4.0.7",
+        "svelte": "^5.2.2",
+        "svelte-check": "^4.0.9",
         "typescript": "^5.6.3",
         "vite": "^5.4.11",
-        "vitest": "^2.1.4"
+        "vitest": "^2.1.5"
     },
     "overrides": {
         "@sveltejs/kit": {

package/dist/renderers/html/Video.svelte

@@ -1,12 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte'
-
-    interface Props {
-        children?: Snippet
-        attributes?: Record<string, any>
-    }
-
-    const { children, attributes }: Props = $props()
-</script>
-
-<video {...attributes}>{@render children?.()}</video>

package/dist/renderers/html/Video.svelte.d.ts

@@ -1,7 +0,0 @@
-import type { Snippet } from 'svelte';
-declare const Video: import("svelte").Component<{
-    children?: Snippet;
-    attributes?: Record<string, any>;
-}, {}, "">;
-type Video = ReturnType<typeof Video>;
-export default Video;