@humanspeak/svelte-markdown 0.6.1 → 0.7.0

package/dist/renderers/html/Summary.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/Table.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/Tbody.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/Td.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/Textarea.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte'
-
     interface Props {
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { attributes }: Props = $props()

package/dist/renderers/html/Tfoot.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/Th.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/Thead.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/Tr.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/Track.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     interface Props {
-        attributes?: Record<string, any>
+        attributes?: Record<string, any> // eslint-disable-line @typescript-eslint/no-explicit-any
     }
 
     const { attributes }: Props = $props()

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

@@ -48,7 +48,6 @@ 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';
@@ -132,7 +131,6 @@ export const Html = {
     menu: Menu,
     meter: Meter,
     nav: Nav,
-    object: Object,
     ol: Ol,
     optgroup: Optgroup,
     option: Option,

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 } 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;
+/**
+ * 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,31 +1,57 @@
 import { Parser } from 'htmlparser2';
-// Cache the regex pattern
+/**
+ * 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('</') };
 };
-function extractAttributes(raw) {
+/**
+ * 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;
-}
-function parseHtmlBlock(html) {
+};
+/**
+ * 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({
-        onopentag(name, attributes) {
+        // 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',
@@ -34,6 +60,7 @@ function parseHtmlBlock(html) {
                 });
                 currentText = '';
             }
+            // Create a token for the opening tag with its attributes
             tokens.push({
                 type: 'html',
                 raw: `<${name}${Object.entries(attributes)
@@ -43,10 +70,13 @@ function parseHtmlBlock(html) {
                 attributes
             });
         },
-        ontext(text) {
+        // Called for text content between tags
+        ontext: (text) => {
             currentText += text;
         },
-        onclosetag(name) {
+        // 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',
@@ -55,6 +85,7 @@ function parseHtmlBlock(html) {
                 });
                 currentText = '';
             }
+            // Create a token for the closing tag
             tokens.push({
                 type: 'html',
                 raw: `</${name}>`,
@@ -62,16 +93,29 @@ function parseHtmlBlock(html) {
             });
         }
     });
+    // Process the HTML string
     parser.write(html);
     parser.end();
     return tokens;
-}
-function containsMultipleTags(html) {
+};
+/**
+ * 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 = [];
     for (const token of tokens) {
@@ -86,36 +130,65 @@ export const shrinkHtmlTokens = (tokens) => {
     // Then process the tokens as before
     return processHtmlTokens(result);
 };
-// Rename the existing shrinkHtmlTokens logic to processHtmlTokens
-function processHtmlTokens(tokens) {
+/**
+ * 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];
-        // Recursively process any nested tokens first
+        // 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,
@@ -126,11 +199,13 @@ function processHtmlTokens(tokens) {
             }
         }
         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.1",
+    "version": "0.7.0",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -30,7 +30,7 @@
         "svelte",
         "markdown"
     ],
-    "homepage": "sveltemarkdown.com",
+    "homepage": "https://markdown.svelte.page",
     "files": [
         "dist",
         "!dist/**/*.test.*",
@@ -53,42 +53,45 @@
     },
     "dependencies": {
         "github-slugger": "^2.0.0",
-        "htmlparser2": "^9.1.0",
-        "marked": "^15.0.0"
+        "htmlparser2": "^10.0.0",
+        "marked": "^15.0.5"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.2.0",
-        "@eslint/js": "^9.15.0",
+        "@eslint/js": "^9.17.0",
         "@sveltejs/adapter-auto": "^3.3.1",
-        "@sveltejs/kit": "^2.8.1",
+        "@sveltejs/kit": "^2.15.1",
         "@sveltejs/package": "^2.3.7",
-        "@sveltejs/vite-plugin-svelte": "^4.0.1",
+        "@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.5",
-        "eslint": "^9.15.0",
+        "@types/node": "^22.10.5",
+        "@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.2.2",
-        "svelte-check": "^4.0.9",
-        "typescript": "^5.6.3",
-        "vite": "^5.4.11",
-        "vitest": "^2.1.5"
+        "svelte": "^5.16.1",
+        "svelte-check": "^4.1.1",
+        "typescript": "^5.7.2",
+        "vite": "^6.0.7",
+        "vitest": "^2.1.8"
     },
     "overrides": {
         "@sveltejs/kit": {
             "cookie": "^0.7.0"
         }
+    },
+    "volta": {
+        "node": "22.12.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;