@humanspeak/svelte-markdown 0.6.0 → 0.6.8

package/dist/renderers/html/U.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Ul.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/Var.svelte

@@ -3,7 +3,7 @@
 
     interface Props {
         children?: Snippet
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { children, attributes }: Props = $props()

package/dist/renderers/html/index.js

@@ -1,61 +1,167 @@
 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 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,
     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/markdown-parser.d.ts

@@ -1,11 +1,36 @@
 export { default as Slugger } from 'github-slugger';
 export { Lexer, type Token, type Tokens, type TokensList } from 'marked';
-import { type HtmlRenderers } from '../renderers/html/index.js';
 import type { Component } from 'svelte';
+import { type HtmlRenderers } from '../renderers/html/index.js';
+/**
+ * Type definition for markdown renderers
+ * Maps each markdown element to its corresponding Svelte component
+ */
+export type RendererComponent = Component<any, any, any> | undefined | null;
 export type Renderers = {
     html: HtmlRenderers;
-} & {
-    [key: string]: Component<any> | null;
+    heading: RendererComponent;
+    paragraph: RendererComponent;
+    blockquote: RendererComponent;
+    code: RendererComponent;
+    list: RendererComponent;
+    listitem: RendererComponent;
+    hr: RendererComponent;
+    table: RendererComponent;
+    tablehead: RendererComponent;
+    tablebody: RendererComponent;
+    tablerow: RendererComponent;
+    tablecell: RendererComponent;
+    text: RendererComponent;
+    link: RendererComponent;
+    image: RendererComponent;
+    em: RendererComponent;
+    strong: RendererComponent;
+    codespan: RendererComponent;
+    br: RendererComponent;
+    del: RendererComponent;
+    orderedlistitem: RendererComponent;
+    unorderedlistitem: RendererComponent;
 };
 export declare const defaultRenderers: Renderers;
 export type SvelteMarkdownOptions = {

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

@@ -1,6 +1,17 @@
-import type { Token, TokensList } from 'marked';
+import type { Token } from 'marked';
+/**
+ * Determines if a string contains an HTML opening or closing tag
+ * @param raw - The string to check for HTML tags
+ * @returns Object containing the tag name and whether it's an opening tag, or null if no tag found
+ */
 export declare const isHtmlOpenTag: (raw: string) => {
     tag: string;
     isOpening: boolean;
 } | null;
-export declare const shrinkHtmlTokens: (tokens: Token[] | TokensList) => Token[];
+/**
+ * Main function to process and shrink HTML tokens
+ * Breaks down complex HTML structures into manageable tokens
+ * @param tokens - Array of tokens to process
+ * @returns Processed array of tokens with nested structure
+ */
+export declare const shrinkHtmlTokens: (tokens: Token[]) => Token[];

package/dist/utils/token-cleanup.js

@@ -1,72 +1,211 @@
-// Cache the regex pattern
+import { Parser } from 'htmlparser2';
+/**
+ * Regular expression pattern to match HTML tags
+ * Matches both opening and closing tags with optional attributes
+ * Example matches: <div>, </div>, <img src="...">, <input type="text"/>
+ */
 const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9-]{0,})(?:\s+[^>]*)?>/;
 const htmlTagRegex = new RegExp(HTML_TAG_PATTERN);
+/**
+ * Determines if a string contains an HTML opening or closing tag
+ * @param raw - The string to check for HTML tags
+ * @returns Object containing the tag name and whether it's an opening tag, or null if no tag found
+ */
 export const isHtmlOpenTag = (raw) => {
-    // Use test() first as it's faster than match()
+    // First check if the string contains any HTML tags at all (faster than full regex match)
     if (!htmlTagRegex.test(raw))
         return null;
+    // If we found a tag, extract its name and check if it's an opening tag
     const match = raw.match(HTML_TAG_PATTERN);
     if (!match)
         return null;
     return { tag: match[1], isOpening: !raw.startsWith('</') };
 };
+/**
+ * Extracts HTML attributes from a tag string
+ * @param raw - The raw HTML tag string (e.g., '<div class="example" id="test">')
+ * @returns An object containing key-value pairs of attributes
+ */
+const extractAttributes = (raw) => {
+    const attributes = {};
+    // Match pattern: attribute="value" or attribute='value'
+    const attributeRegex = /(\w+)=["']([^"']*?)["']/g;
+    let match;
+    // Continue finding matches until we've processed all attributes
+    while ((match = attributeRegex.exec(raw)) !== null) {
+        const [, key, value] = match;
+        attributes[key] = value.trim();
+    }
+    return attributes;
+};
+/**
+ * Parses an HTML string into an array of tokens
+ * Uses htmlparser2 to properly handle nested tags and text content
+ * @param html - The HTML string to parse
+ * @returns Array of tokens representing the HTML structure
+ */
+const parseHtmlBlock = (html) => {
+    const tokens = [];
+    // Buffer for accumulating text content between tags
+    let currentText = '';
+    const parser = new Parser({
+        // Called when an opening tag is encountered (<div>, <span>, etc.)
+        onopentag: (name, attributes) => {
+            // If we have accumulated any text, create a text token first
+            if (currentText.trim()) {
+                tokens.push({
+                    type: 'text',
+                    raw: currentText,
+                    text: currentText
+                });
+                currentText = '';
+            }
+            // Create a token for the opening tag with its attributes
+            tokens.push({
+                type: 'html',
+                raw: `<${name}${Object.entries(attributes)
+                    .map(([key, value]) => ` ${key}="${value}"`)
+                    .join('')}>`,
+                tag: name,
+                attributes
+            });
+        },
+        // Called for text content between tags
+        ontext: (text) => {
+            currentText += text;
+        },
+        // Called when a closing tag is encountered (</div>, </span>, etc.)
+        onclosetag: (name) => {
+            // Push any accumulated text before the closing tag
+            if (currentText.trim()) {
+                tokens.push({
+                    type: 'text',
+                    raw: currentText,
+                    text: currentText
+                });
+                currentText = '';
+            }
+            // Create a token for the closing tag
+            tokens.push({
+                type: 'html',
+                raw: `</${name}>`,
+                tag: name
+            });
+        }
+    });
+    // Process the HTML string
+    parser.write(html);
+    parser.end();
+    return tokens;
+};
+/**
+ * Checks if an HTML string contains multiple tags
+ * Used to determine if further parsing is needed
+ * @param html - The HTML string to check
+ * @returns boolean indicating if multiple tags are present
+ */
+const 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;
+};
+/**
+ * Main function to process and shrink HTML tokens
+ * Breaks down complex HTML structures into manageable tokens
+ * @param tokens - Array of tokens to process
+ * @returns Processed array of tokens with nested structure
+ */
 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);
+};
+/**
+ * Processes HTML tokens to create a nested structure
+ * Handles matching opening and closing tags, maintains proper nesting
+ * and preserves attributes
+ *
+ * @param tokens - Array of tokens to process
+ * @returns Processed array of tokens with proper nesting structure
+ *
+ * @example
+ * Input tokens: [
+ *   { type: 'html', raw: '<div>' },
+ *   { type: 'text', raw: 'Hello' },
+ *   { type: 'html', raw: '</div>' }
+ * ]
+ * Output: [
+ *   { type: 'html', tag: 'div', tokens: [
+ *     { type: 'text', raw: 'Hello' }
+ *   ]}
+ * ]
+ */
+const processHtmlTokens = (tokens) => {
+    const result = [];
+    // Stack to keep track of opening tags and their positions
+    const stack = [];
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        // If token contains nested tokens, process them recursively
+        if ('tokens' in token && Array.isArray(token.tokens)) {
+            token.tokens = processHtmlTokens(token.tokens);
+        }
+        if (token.type === 'html') {
+            const tagInfo = isHtmlOpenTag(token.raw);
+            if (!tagInfo) {
+                // If we can't parse the tag, just add it as-is
+                result.push(token);
+                continue;
+            }
+            if (tagInfo.isOpening) {
+                // For opening tags, push to stack and add to result
+                stack.push({ tag: tagInfo.tag, startIndex: result.length });
+                result.push(token);
+            }
+            else {
+                // For closing tags, try to match with last opening tag
+                const lastOpening = stack.pop();
+                if (!lastOpening || lastOpening.tag !== tagInfo.tag) {
+                    // If no matching opening tag, add closing tag as-is
+                    result.push(token);
                     continue;
                 }
+                // Found matching tags - create nested structure
+                const startIndex = lastOpening.startIndex;
+                // Remove all tokens between opening and closing tags
+                const innerTokens = result.splice(startIndex + 1, result.length - startIndex - 1);
+                // Remove the opening tag
+                const openingToken = result.pop();
+                // Extract attributes from opening tag
+                const attributes = extractAttributes(openingToken.raw);
+                // Create new nested token structure
+                result.push({
+                    type: 'html',
+                    raw: openingToken.raw,
+                    tag: tagInfo.tag,
+                    tokens: processHtmlTokens(innerTokens),
+                    attributes
+                });
             }
         }
-        result.push(currentToken);
+        else {
+            // Non-HTML tokens are added as-is
+            result.push(token);
+        }
+    }
+    // If we have unclosed tags, return original tokens
+    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.8",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -53,41 +53,42 @@
     },
     "dependencies": {
         "github-slugger": "^2.0.0",
-        "marked": "^15.0.0"
+        "htmlparser2": "^10.0.0",
+        "marked": "^15.0.4"
     },
     "devDependencies": {
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "^9.14.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "^9.17.0",
         "@sveltejs/adapter-auto": "^3.3.1",
-        "@sveltejs/kit": "^2.8.0",
+        "@sveltejs/kit": "^2.15.1",
         "@sveltejs/package": "^2.3.7",
-        "@sveltejs/vite-plugin-svelte": "^4.0.0",
+        "@sveltejs/vite-plugin-svelte": "^5.0.3",
         "@testing-library/jest-dom": "^6.6.3",
-        "@testing-library/svelte": "^5.2.4",
+        "@testing-library/svelte": "^5.2.6",
         "@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",
+        "@types/node": "^22.10.3",
+        "@typescript-eslint/eslint-plugin": "^8.19.0",
+        "@typescript-eslint/parser": "^8.19.0",
+        "@vitest/coverage-v8": "^2.1.8",
+        "eslint": "^9.17.0",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-svelte": "^2.46.0",
-        "globals": "^15.12.0",
+        "eslint-plugin-svelte": "^2.46.1",
+        "globals": "^15.14.0",
         "jsdom": "^25.0.1",
-        "prettier": "^3.3.3",
+        "prettier": "^3.4.2",
         "prettier-plugin-organize-imports": "^4.1.0",
-        "prettier-plugin-svelte": "^3.2.8",
-        "prettier-plugin-tailwindcss": "^0.6.8",
+        "prettier-plugin-svelte": "^3.3.2",
+        "prettier-plugin-tailwindcss": "^0.6.9",
         "publint": "^0.2.12",
-        "svelte": "^5.1.15",
-        "svelte-check": "^4.0.7",
-        "typescript": "^5.6.3",
-        "vite": "^5.4.11",
-        "vitest": "^2.1.4"
+        "svelte": "^5.16.0",
+        "svelte-check": "^4.1.1",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.6",
+        "vitest": "^2.1.8"
     },
     "overrides": {
         "@sveltejs/kit": {
             "cookie": "^0.7.0"
         }
     }
-}
+}

package/dist/renderers/html/Object.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>
-
-<object {...attributes}>{@render children?.()}</object>

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

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

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;