@humanspeak/svelte-markdown 0.5.5 → 0.6.1

package/dist/utils/token-cleanup.js

@@ -1,45 +1,136 @@
+import { Parser } from 'htmlparser2';
 // Cache the regex pattern
-const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9]*).*?>/;
+const HTML_TAG_PATTERN = /<\/?([a-zA-Z][a-zA-Z0-9-]{0,})(?:\s+[^>]*)?>/;
+const htmlTagRegex = new RegExp(HTML_TAG_PATTERN);
 export const isHtmlOpenTag = (raw) => {
+    // Use test() first as it's faster than match()
+    if (!htmlTagRegex.test(raw))
+        return null;
     const match = raw.match(HTML_TAG_PATTERN);
     if (!match)
         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));
+        }
+        else {
+            result.push(token);
         }
-        // Check for HTML pattern
-        if (currentToken.type === 'html' && i + 2 < len) {
-            const openTag = isHtmlOpenTag(currentToken.raw);
-            if (openTag?.isOpening) {
-                const contentToken = tokens[i + 1];
-                const closingToken = tokens[i + 2];
-                const closeTag = isHtmlOpenTag(closingToken.raw);
-                if (contentToken.type === 'text' &&
-                    closeTag &&
-                    !closeTag.isOpening &&
-                    openTag.tag === closeTag.tag) {
-                    result.push({
-                        type: 'html',
-                        raw: currentToken.raw + contentToken.raw + closingToken.raw,
-                        text: currentToken.raw + contentToken.raw + closingToken.raw,
-                        tag: openTag.tag
-                    });
-                    i += 2;
+    }
+    // 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.5.5",
+    "version": "0.6.1",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build && npm run package",
@@ -53,41 +53,42 @@
     },
     "dependencies": {
         "github-slugger": "^2.0.0",
-        "marked": "^14.1.3"
+        "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.7.4",
+        "@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.8.7",
-        "@typescript-eslint/eslint-plugin": "^8.13.0",
-        "@typescript-eslint/parser": "^8.13.0",
-        "@vitest/coverage-v8": "^2.1.4",
-        "eslint": "^9.14.0",
+        "@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",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-svelte": "^2.46.0",
         "globals": "^15.12.0",
         "jsdom": "^25.0.1",
         "prettier": "^3.3.3",
         "prettier-plugin-organize-imports": "^4.1.0",
-        "prettier-plugin-svelte": "^3.2.7",
+        "prettier-plugin-svelte": "^3.2.8",
         "prettier-plugin-tailwindcss": "^0.6.8",
         "publint": "^0.2.12",
-        "svelte": "^5.1.9",
-        "svelte-check": "^4.0.5",
+        "svelte": "^5.2.2",
+        "svelte-check": "^4.0.9",
         "typescript": "^5.6.3",
-        "vite": "^5.4.10",
-        "vitest": "^2.1.4"
+        "vite": "^5.4.11",
+        "vitest": "^2.1.5"
     },
     "overrides": {
         "@sveltejs/kit": {
             "cookie": "^0.7.0"
         }
     }
-}
+}

package/dist/renderers/Html.svelte

@@ -1,9 +0,0 @@
-<script lang="ts">
-    interface Props {
-        text: string
-    }
-
-    const { text }: Props = $props()
-</script>
-
-{@html text}

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

@@ -1,4 +0,0 @@
-declare const Html: import("svelte").Component<{
-    text: string;
-}, {}, "">;
-export default Html;