comark 0.1.2 → 0.2.1

package/dist/internal/parse/incremental.js

@@ -27,8 +27,7 @@ export function extractReusableNodes(markdown, lastOutput) {
         return {
             remainingMarkdownStartLine,
             reusedNodes: lastOutput.nodes.slice(0, lastValidNodeIndex + 1),
-            remainingMarkdown: '\n' // Add back the new line character which will be remove by the slice and join
-                + markdown.split('\n').slice(remainingMarkdownStartLine + 1).join('\n') || '',
+            remainingMarkdown: markdown.split('\n').slice(remainingMarkdownStartLine).join('\n') || '',
         };
     }
     return {

package/dist/internal/parse/token-processor.js

@@ -24,16 +24,22 @@ const INLINE_TAG_MAP = {
  * Convert Markdown-It tokens to a Comark tree
  */
 export function marmdownItTokensToComarkTree(tokens, options = { startLine: 0, preservePositions: false }) {
+    const state = {
+        headingSlugCounts: new Map(),
+        preservePositions: options.preservePositions,
+    };
     const nodes = [];
     let i = 0;
     let endLine = options.startLine;
     while (i < tokens.length) {
-        const result = processBlockToken(tokens, i, false);
+        const result = processBlockToken(tokens, i, false, state);
         if (result.node) {
             if (options.preservePositions) {
                 for (let j = i; j < result.nextIndex; j++) {
                     if (tokens[j].map && tokens[j].map[1]) {
-                        endLine = tokens[j].map[1] + options.startLine;
+                        endLine = tokens[j].map[1]
+                            + options.startLine
+                            + (tokens[j].type?.endsWith('_close') ? 1 : 0);
                     }
                 }
                 if (!result.node[1].$) {
@@ -207,7 +213,7 @@ function extractAttributes(tokens, startIndex, skipEmptyText = true) {
     }
     return { attrs: {}, nextIndex: startIndex };
 }
-function processBlockToken(tokens, startIndex, insideNestedContext = false) {
+function processBlockToken(tokens, startIndex, insideNestedContext = false, state) {
     const token = tokens[startIndex];
     if (token.type === 'hr') {
         return { node: ['hr', {}], nextIndex: startIndex + 1 };
@@ -221,7 +227,7 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false) {
             const inner = content.endsWith('-->') ? content.slice(4, -3) : content.slice(4);
             return { node: [null, {}, inner], nextIndex: startIndex + 1 };
         }
-        const children = processBlockChildren(tokens, startIndex + 1, 'html_block_close', false, false, false);
+        const children = processBlockChildren(tokens, startIndex + 1, 'html_block_close', false, false, false, state);
         const [node1] = htmlToComarkNodes(content);
         if (!node1) {
             return { node: null, nextIndex: startIndex + 1 };
@@ -234,7 +240,7 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false) {
         const componentName = token.tag || 'component';
         const attrs = processAttributes(token.attrs);
         // Process children until mdc_block_close, handling slots (#slotname)
-        const children = processBlockChildrenWithSlots(tokens, startIndex + 1, 'mdc_block_close');
+        const children = processBlockChildrenWithSlots(tokens, startIndex + 1, 'mdc_block_close', state);
         // Return the component even if it has no children (empty component like ::component\n::)
         return { node: [componentName, attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
     }
@@ -299,11 +305,11 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false) {
         const level = token.tag.replace('h', '');
         const headingTag = `h${level}`;
         // Process heading children with inHeading flag for Comark component handling
-        const children = processBlockChildren(tokens, startIndex + 1, 'heading_close', true, true, insideNestedContext);
+        const children = processBlockChildren(tokens, startIndex + 1, 'heading_close', true, true, insideNestedContext, state);
         if (children.nodes.length > 0) {
             // Always generate ID for all headings, no exceptions
             const textContent = extractTextContent(children.nodes);
-            const headingId = slugify(textContent);
+            const headingId = uniqueSlug(slugify(textContent), state);
             // Always attach ID to the heading element itself
             return { node: [headingTag, { id: headingId }, ...children.nodes], nextIndex: children.nextIndex + 1 };
         }
@@ -312,7 +318,7 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false) {
     // Handle list items - paragraphs should be unwrapped
     if (token.type === 'list_item_open') {
         const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false });
-        const children = processBlockChildren(tokens, startIndex + 1, 'list_item_close', false, false, true);
+        const children = processBlockChildren(tokens, startIndex + 1, 'list_item_close', false, false, true, state);
         // Unwrap paragraphs in list items
         const unwrapped = [];
         for (const child of children.nodes) {
@@ -334,46 +340,15 @@ function processBlockToken(tokens, startIndex, insideNestedContext = false) {
     if (tagName) {
         const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false });
         const closeType = token.type.replace('_open', '_close');
-        // Special handling for blockquotes
-        if (tagName === 'blockquote') {
-            // First pass: get children
-            const children = processBlockChildren(tokens, startIndex + 1, closeType, false, false, false);
-            // Rule: If a heading is the FIRST child AND there are additional children after it,
-            // then the heading should NOT have an ID. Otherwise, headings should have IDs.
-            if (children.nodes.length > 1) {
-                const firstChild = children.nodes[0];
-                // Check if first child is a heading (h1-h6)
-                const isHeading = Array.isArray(firstChild)
-                    && typeof firstChild[0] === 'string'
-                    && /^h[1-6]$/.test(firstChild[0]);
-                if (isHeading) {
-                    // Heading is first child with more siblings - reprocess without IDs
-                    const childrenNoIds = processBlockChildren(tokens, startIndex + 1, closeType, false, false, true);
-                    if (childrenNoIds.nodes.length > 0) {
-                        return { node: [tagName, attrs, ...childrenNoIds.nodes], nextIndex: childrenNoIds.nextIndex + 1 };
-                    }
-                    return { node: null, nextIndex: childrenNoIds.nextIndex + 1 };
-                }
-            }
-            // All other cases: use original processing (allows IDs)
-            if (children.nodes.length > 0) {
-                return { node: [tagName, attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
-            }
-            return { node: null, nextIndex: children.nextIndex + 1 };
-        }
-        // For other elements (tables, etc.)
         const isNestedContext = ['td', 'th'].includes(tagName);
-        const children = processBlockChildren(tokens, startIndex + 1, closeType, false, false, isNestedContext);
-        if (children.nodes.length > 0) {
-            return { node: [tagName, attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
-        }
-        return { node: null, nextIndex: children.nextIndex + 1 };
+        const children = processBlockChildren(tokens, startIndex + 1, closeType, false, false, isNestedContext, state);
+        return { node: [tagName, attrs, ...children.nodes], nextIndex: children.nextIndex + 1 };
     }
     const componentName = token.tag || 'component';
     const attrs = processAttributes(token.attrs, { handleBoolean: false, handleJSON: false });
     return { node: [componentName, attrs], nextIndex: startIndex + 1 };
 }
-function processBlockChildrenWithSlots(tokens, startIndex, closeType) {
+function processBlockChildrenWithSlots(tokens, startIndex, closeType, state) {
     const nodes = [];
     let i = startIndex;
     let currentSlotName = null;
@@ -420,7 +395,7 @@ function processBlockChildrenWithSlots(tokens, startIndex, closeType) {
         }
         // Process other block tokens
         // Comark components are not nested contexts - headings inside them should get IDs
-        const result = processBlockToken(tokens, i, false);
+        const result = processBlockToken(tokens, i, false, state);
         i = result.nextIndex;
         if (result.node) {
             if (currentSlotName !== null) {
@@ -439,7 +414,7 @@ function processBlockChildrenWithSlots(tokens, startIndex, closeType) {
     }
     return { nodes, nextIndex: i };
 }
-function processBlockChildren(tokens, startIndex, closeType, inlineOnly, inHeading = false, insideNestedContext = false) {
+function processBlockChildren(tokens, startIndex, closeType, inlineOnly, inHeading = false, insideNestedContext = false, state) {
     const nodes = [];
     let i = startIndex;
     while (i < tokens.length && tokens[i].type !== closeType) {
@@ -471,7 +446,7 @@ function processBlockChildren(tokens, startIndex, closeType, inlineOnly, inHeadi
             i++;
         }
         else {
-            const result = processBlockToken(tokens, i, insideNestedContext);
+            const result = processBlockToken(tokens, i, insideNestedContext, state);
             i = result.nextIndex;
             if (result.node) {
                 nodes.push(result.node);
@@ -544,6 +519,16 @@ function slugify(text) {
     }
     return slug;
 }
+/**
+ * Return a unique slug by appending a numeric suffix for duplicates
+ */
+function uniqueSlug(slug, state) {
+    if (!state)
+        return slug;
+    const count = state.headingSlugCounts.get(slug) ?? 0;
+    state.headingSlugCounts.set(slug, count + 1);
+    return count === 0 ? slug : `${slug}-${count}`;
+}
 export function processInlineTokens(tokens, inHeading = false) {
     const nodes = [];
     let i = 0;

package/dist/internal/stringify/handlers/hr.d.ts

@@ -1,3 +1,3 @@
 import type { State } from 'comark/render';
 import type { ComarkElement } from 'comark';
-export declare function hr(_: ComarkElement, state: State): string;
+export declare function hr(_: ComarkElement, state: State, parent?: ComarkElement): string;

package/dist/internal/stringify/handlers/hr.js

@@ -1,3 +1,6 @@
-export function hr(_, state) {
+export function hr(_, state, parent) {
+    if (parent?.[0] === 'p') {
+        return ':hr';
+    }
     return '---' + state.context.blockSeparator;
 }

package/dist/internal/stringify/handlers/html.js

@@ -37,7 +37,7 @@ export async function html(node, state, parent) {
     for (let i = 0; i < children.length; i++) {
         const childContent = childrenContent[i];
         const child = children[i];
-        const isBlock = blockTags.has(String(child?.[0])) || (!inlineTags.has(String(child?.[0])) && !hasTextSibling);
+        const isBlock = typeof child !== 'string' && (blockTags.has(String(child?.[0])) || (!inlineTags.has(String(child?.[0])) && !hasTextSibling));
         if (i > 0 && !isPrevBlock && isBlock) {
             content += state.context.blockSeparator;
         }

package/dist/internal/stringify/handlers/mdc.js

@@ -28,7 +28,8 @@ export async function mdc(node, state, parent) {
     content = content.trimEnd();
     const attrs = attributeEntries.length > 0 ? comarkAttributes(attributes) : '';
     if (tag === 'span') {
-        return `[${content}]${attrs}`;
+        return `[${content}]${attrs}`
+            + (inline ? '' : state.context.blockSeparator);
     }
     const fence = ':'.repeat((state.nodeDepthInTree || 0) + 2);
     let result = `:${tag}${content && `[${content}]`}${attrs}` + (!parent ? state.context.blockSeparator : '');

package/dist/internal/stringify/handlers/pre.js

@@ -15,21 +15,10 @@ export function pre(node, state) {
         ? ' ' + attributes.meta
         : '';
     const result = '```' + language + filename + highlights + meta + '\n'
-        + String(node[1]?.code || extractCode(node)).trim()
+        + String(node[1]?.code || textContent(node)).trim()
         + '\n```';
     return result + state.context.blockSeparator;
 }
-function extractCode(node) {
-    const codeNode = node[2];
-    if (Array.isArray(codeNode) && codeNode[0] === 'code') {
-        const spans = codeNode.slice(2);
-        const lineSpans = spans.filter(s => Array.isArray(s) && String(s[1]?.class ?? '').includes('line'));
-        if (lineSpans.length > 0) {
-            return lineSpans.map(span => textContent(span)).join('\n');
-        }
-    }
-    return textContent(node);
-}
 function formatHighlights(highlights) {
     if (highlights.length === 0)
         return '';

package/dist/parse.d.ts

@@ -1,5 +1,6 @@
 import type { ComarkParseFn, ParseOptions, ComarkTree } from './types.ts';
 export { parseFrontmatter } from './internal/frontmatter.ts';
+export { defineComarkPlugin } from './utils/helpers.ts';
 /**
  * Creates a parser function for Comark content.
  *
@@ -64,3 +65,19 @@ export declare function createParse(options?: ParseOptions): ComarkParseFn;
  * ```
  */
 export declare function parse(markdown: string, options?: ParseOptions): Promise<ComarkTree>;
+/**
+ * Creates a serialized parser function for Comark content.
+ * This is useful for parsing large files in a streaming manner.
+ *
+ * @param options - Parser options
+ * @returns ComarkParseFn - The serialized parser function
+ *
+ * @example
+ * ```typescript
+ * import { createSerializedParse } from 'comark'
+ *
+ * const parse = createSerializedParse()
+ * const tree = await parse(content)
+ * console.log(tree.nodes)
+ */
+export declare function createSerializedParse(options?: ParseOptions): ComarkParseFn;

package/dist/parse.js

@@ -9,8 +9,11 @@ import { parseFrontmatter } from "./internal/frontmatter.js";
 import { extractReusableNodes } from "./internal/parse/incremental.js";
 import html_block from "./internal/parse/html/html_block_rule.js";
 import html_inline from "./internal/parse/html/html_inline_rule.js";
+import { createSerializedTask } from "./utils/helpers.js";
 // Re-export frontmatter utilities
 export { parseFrontmatter } from "./internal/frontmatter.js";
+// Re-export plugin utilities
+export { defineComarkPlugin } from "./utils/helpers.js";
 /**
  * Creates a parser function for Comark content.
  *
@@ -161,3 +164,21 @@ export async function parse(markdown, options = {}) {
     const parse = createParse(options);
     return await parse(markdown);
 }
+/**
+ * Creates a serialized parser function for Comark content.
+ * This is useful for parsing large files in a streaming manner.
+ *
+ * @param options - Parser options
+ * @returns ComarkParseFn - The serialized parser function
+ *
+ * @example
+ * ```typescript
+ * import { createSerializedParse } from 'comark'
+ *
+ * const parse = createSerializedParse()
+ * const tree = await parse(content)
+ * console.log(tree.nodes)
+ */
+export function createSerializedParse(options = {}) {
+    return createSerializedTask(createParse(options));
+}

package/dist/plugins/alert.d.ts

@@ -1,2 +1,2 @@
-import type { ComarkPlugin } from 'comark';
-export default function alert(): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<unknown>;
+export default _default;

package/dist/plugins/alert.js

@@ -1,4 +1,5 @@
 import { visit } from 'comark/utils';
+import { defineComarkPlugin } from "../utils/helpers.js";
 const markers = {
     '!TIP': {
         type: 'tip',
@@ -26,41 +27,39 @@ const markers = {
         color: '#da3633',
     },
 };
-export default function alert() {
-    return {
-        name: 'alert',
-        post(state) {
-            visit(state.tree, node => Array.isArray(node) && node[0] === 'blockquote', (node) => {
-                const element = node;
-                if (node[2]?.[0] === 'span') {
-                    const content = String(node[2][2]).toUpperCase();
+export default defineComarkPlugin(() => ({
+    name: 'alert',
+    post(state) {
+        visit(state.tree, node => Array.isArray(node) && node[0] === 'blockquote', (node) => {
+            const element = node;
+            if (node[2]?.[0] === 'span') {
+                const content = String(node[2][2]).toUpperCase();
+                const marker = markers[content];
+                if (marker) {
+                    if (typeof node[3] === 'string') {
+                        element[3] = String(element[3]).trimStart();
+                    }
+                    // remove span node
+                    element.splice(2, 1);
+                    element[1].as = marker.type;
+                }
+            }
+            else if (node[2]?.[0] === 'p') {
+                const paragraph = node[2];
+                if (paragraph[2]?.[0] === 'span') {
+                    const content = String(paragraph[2][2]).toUpperCase();
                     const marker = markers[content];
                     if (marker) {
-                        if (typeof node[3] === 'string') {
-                            element[3] = String(element[3]).trimStart();
+                        if (typeof paragraph[3] === 'string') {
+                            paragraph[3] = String(paragraph[3]).trimStart();
                         }
                         // remove span node
-                        element.splice(2, 1);
+                        paragraph.splice(2, 1);
+                        // transform node
                         element[1].as = marker.type;
                     }
                 }
-                else if (node[2]?.[0] === 'p') {
-                    const paragraph = node[2];
-                    if (paragraph[2]?.[0] === 'span') {
-                        const content = String(paragraph[2][2]).toUpperCase();
-                        const marker = markers[content];
-                        if (marker) {
-                            if (typeof paragraph[3] === 'string') {
-                                paragraph[3] = String(paragraph[3]).trimStart();
-                            }
-                            // remove span node
-                            paragraph.splice(2, 1);
-                            // transform node
-                            element[1].as = marker.type;
-                        }
-                    }
-                }
-            });
-        },
-    };
-}
+            }
+        });
+    },
+}));

package/dist/plugins/emoji.d.ts

@@ -1,3 +1,4 @@
-import type { ComarkPlugin, MarkdownItPlugin } from 'comark';
+import type { MarkdownItPlugin } from 'comark';
 export declare const markdownItEmoji: MarkdownItPlugin;
-export default function comarkEmoji(): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<unknown>;
+export default _default;

package/dist/plugins/emoji.js

@@ -1,3 +1,4 @@
+import { defineComarkPlugin } from "../utils/helpers.js";
 // Common emoji definitions (200+ emojis)
 // Organized by category for easier maintenance
 const EMOJI_MAP = new Map([
@@ -430,9 +431,7 @@ const emojiRule = (state, silent) => {
 export const markdownItEmoji = (md) => {
     md.inline.ruler.before('emphasis', 'emoji', emojiRule);
 };
-export default function comarkEmoji() {
-    return {
-        name: 'emoji',
-        markdownItPlugins: [markdownItEmoji],
-    };
-}
+export default defineComarkPlugin(() => ({
+    name: 'emoji',
+    markdownItPlugins: [markdownItEmoji],
+}));

package/dist/plugins/headings.d.ts

@@ -1,4 +1,3 @@
-import type { ComarkPlugin } from 'comark';
 export interface HeadingsOptions {
     /**
      * Tag to extract as title and set to `tree.meta.title`.
@@ -45,4 +44,5 @@ export interface HeadingsOptions {
  * headings({ remove: false })
  * ```
  */
-export default function headings(options?: HeadingsOptions): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<HeadingsOptions>;
+export default _default;

package/dist/plugins/headings.js

@@ -1,3 +1,4 @@
+import { defineComarkPlugin } from "../utils/helpers.js";
 function getTag(node) {
     if (Array.isArray(node) && node.length >= 1) {
         return node[0];
@@ -49,7 +50,7 @@ function flattenNodeText(node) {
  * headings({ remove: false })
  * ```
  */
-export default function headings(options = {}) {
+export default defineComarkPlugin((options = {}) => {
     const { titleTag = 'h1', descriptionTag = 'p', remove = false } = options;
     return {
         name: 'headings',
@@ -82,4 +83,4 @@ export default function headings(options = {}) {
             }
         },
     };
-}
+});

package/dist/plugins/highlight.d.ts

@@ -1,7 +1,5 @@
-import type { LanguageRegistration } from 'shiki';
-import type { ComarkNode, ComarkTree, ComarkPlugin } from 'comark';
-import type { ShikiPrimitive, ThemeRegistration } from '@shikijs/primitive';
-import type { ShikiTransformer } from '@shikijs/types';
+import type { LanguageRegistration, ShikiTransformer, ShikiPrimitive, ThemeRegistration } from 'shiki';
+import type { ComarkNode, ComarkTree } from 'comark';
 export interface HighlightOptions {
     /**
      * Whether to use the default language definitions
@@ -68,4 +66,5 @@ export declare function highlightCodeBlocks(tree: ComarkTree, options?: Highligh
  * Useful for testing or when you want to reconfigure
  */
 export declare function resetHighlighter(): void;
-export default function highlight(options?: HighlightOptions): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<HighlightOptions>;
+export default _default;

package/dist/plugins/highlight.js

@@ -1,4 +1,5 @@
-import { createShikiPrimitive } from '@shikijs/primitive';
+import { defineComarkPlugin } from "../utils/helpers.js";
+import { createShikiPrimitive } from 'shiki';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 import { codeToHast } from 'shiki/core';
 let highlighter = null;
@@ -23,7 +24,7 @@ export async function getHighlighter(options = {}) {
     try {
         highlighterPromise = (async () => {
             const { themes, languages } = await registerDefaults(options);
-            const hl = createShikiPrimitive({
+            const hl = await createShikiPrimitive({
                 themes: themes,
                 langs: languages,
                 langAlias: {
@@ -51,10 +52,10 @@ async function registerDefaults(options) {
     const languages = options.languages || [];
     const promises = [];
     if (options.registerDefaultThemes !== false) {
-        promises.push(import('@shikijs/themes/material-theme-lighter').then(m => ({ type: 'theme', value: m.default })), import('@shikijs/themes/material-theme-palenight').then(m => ({ type: 'theme', value: m.default })));
+        promises.push(import('shiki/dist/themes/material-theme-lighter.mjs').then(m => ({ type: 'theme', value: m.default })), import('shiki/dist/themes/material-theme-palenight.mjs').then(m => ({ type: 'theme', value: m.default })));
     }
     if (options.registerDefaultLanguages !== false) {
-        promises.push(import('@shikijs/langs/vue').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/tsx').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/svelte').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/typescript').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/javascript').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/mdc').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/bash').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/json').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/yaml').then(m => ({ type: 'lang', value: m.default })), import('@shikijs/langs/astro').then(m => ({ type: 'lang', value: m.default })));
+        promises.push(import('shiki/dist/langs/vue.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/tsx.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/svelte.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/typescript.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/javascript.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/mdc.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/bash.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/json.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/yaml.mjs').then(m => ({ type: 'lang', value: m.default })), import('shiki/dist/langs/astro.mjs').then(m => ({ type: 'lang', value: m.default })));
     }
     const results = await Promise.all(promises);
     for (const result of results) {
@@ -163,6 +164,7 @@ export async function highlightCodeBlocks(tree, options = {}) {
     const newNodes = JSON.parse(JSON.stringify(tree.nodes));
     for (let i = 0; i < codeBlocks.length; i++) {
         const { node, path } = codeBlocks[i];
+        const preAttrs = node[1];
         const result = highlightedResults[i];
         const preNode = result.nodes[0];
         const preNodeClasses = typeof preNode === 'string'
@@ -171,8 +173,26 @@ export async function highlightCodeBlocks(tree, options = {}) {
                 ? preNode[1].class
                 : String(preNode[1].class).split(' '));
         const codeChildren = preNode[2].slice(2);
-        const children = typeof preNode === 'string' ? preNode : codeChildren.filter(element => element !== '\n');
-        const preAttrs = node[1];
+        const children = typeof preNode === 'string'
+            ? preNode
+            : codeChildren;
+        if (Array.isArray(children)) {
+            let line = 1;
+            for (const child of children) {
+                if (Array.isArray(child)) {
+                    if (Array.isArray(preAttrs.highlights) && preAttrs.highlights.includes(line)) {
+                        child[1].class = `${child[1].class ?? ''} highlight`.trim();
+                        // TODO: (enforcing default style) once we unify all ecosystem styles we can remove this
+                        child[1].style = 'display: inline-block';
+                    }
+                    else {
+                        // TODO: (enforcing default style) once we unify all ecosystem styles we can remove this
+                        child[1].style = 'display: inline';
+                    }
+                    line += 1;
+                }
+            }
+        }
         const newPreAttrs = {
             ...preAttrs,
             class: [...preNodeClasses, options.themes?.dark?.name ? `dark:${options.themes?.dark?.name}` : ''].filter(Boolean).join(' '),
@@ -224,11 +244,9 @@ export function resetHighlighter() {
     highlighterPromise = null;
     loadedThemes.clear();
 }
-export default function highlight(options = {}) {
-    return {
-        name: 'highlight',
-        async post(state) {
-            state.tree = await highlightCodeBlocks(state.tree, options);
-        },
-    };
-}
+export default defineComarkPlugin((options = {}) => ({
+    name: 'highlight',
+    async post(state) {
+        state.tree = await highlightCodeBlocks(state.tree, options);
+    },
+}));

package/dist/plugins/json-render.d.ts

@@ -0,0 +1,53 @@
+interface JsonRenderConfig {
+}
+/**
+ * Plugin for rendering [JSON Render](https://json-render.dev/) specs as UI components.
+ *
+ * Transforms `json-render` fenced code blocks into Comark AST nodes at parse time.
+ * Supports both full specs (with `root` and `elements`) and single-element shorthand.
+ *
+ * @param config - Plugin configuration options
+ *
+ * @example
+ * ```ts
+ * import { parse } from 'comark'
+ * import jsonRender from 'comark/plugins/json-render'
+ *
+ * const result = await parse(`
+ * \`\`\`json-render
+ * {
+ *   "root": "card",
+ *   "elements": {
+ *     "card": {
+ *       "type": "Card",
+ *       "props": { "title": "Hello" },
+ *       "children": ["text"]
+ *     },
+ *     "text": {
+ *       "type": "Text",
+ *       "props": { "content": "World" }
+ *     }
+ *   }
+ * }
+ * \`\`\`
+ * `, {
+ *   plugins: [jsonRender()]
+ * })
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { Comark } from '@comark/vue'
+ * import jsonRender from '@comark/vue/plugins/json-render'
+ * </script>
+ *
+ * <template>
+ *   <Suspense>
+ *     <Comark :plugins="[jsonRender()]">{{ content }}</Comark>
+ *   </Suspense>
+ * </template>
+ * ```
+ */
+declare const _default: import("..").ComarkPluginFactory<JsonRenderConfig>;
+export default _default;

package/dist/plugins/json-render.js

@@ -0,0 +1,99 @@
+import { defineComarkPlugin } from '../parse';
+import { textContent, visit } from '../utils';
+import { parseYaml } from '../internal/yaml';
+function jsonRenderToAst(jrt) {
+    if (!jrt.root) {
+        jrt = {
+            root: 'template',
+            elements: { template: jrt },
+        };
+    }
+    const tree = jrt;
+    const root = tree.elements[tree.root];
+    return jsonRenderElementToAst(root, tree.elements);
+}
+function jsonRenderElementToAst(element, elements) {
+    if (element.type === 'Text') {
+        return String(element.props.content);
+    }
+    const children = element.children?.map(childName => elements[childName])
+        .filter(Boolean) || [];
+    return [
+        element.type,
+        element.props,
+        ...children.map(child => jsonRenderElementToAst(child, elements)),
+    ];
+}
+/**
+ * Plugin for rendering [JSON Render](https://json-render.dev/) specs as UI components.
+ *
+ * Transforms `json-render` fenced code blocks into Comark AST nodes at parse time.
+ * Supports both full specs (with `root` and `elements`) and single-element shorthand.
+ *
+ * @param config - Plugin configuration options
+ *
+ * @example
+ * ```ts
+ * import { parse } from 'comark'
+ * import jsonRender from 'comark/plugins/json-render'
+ *
+ * const result = await parse(`
+ * \`\`\`json-render
+ * {
+ *   "root": "card",
+ *   "elements": {
+ *     "card": {
+ *       "type": "Card",
+ *       "props": { "title": "Hello" },
+ *       "children": ["text"]
+ *     },
+ *     "text": {
+ *       "type": "Text",
+ *       "props": { "content": "World" }
+ *     }
+ *   }
+ * }
+ * \`\`\`
+ * `, {
+ *   plugins: [jsonRender()]
+ * })
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { Comark } from '@comark/vue'
+ * import jsonRender from '@comark/vue/plugins/json-render'
+ * </script>
+ *
+ * <template>
+ *   <Suspense>
+ *     <Comark :plugins="[jsonRender()]">{{ content }}</Comark>
+ *   </Suspense>
+ * </template>
+ * ```
+ */
+export default defineComarkPlugin((_config = {}) => ({
+    name: 'json-render',
+    post: async (state) => {
+        visit(state.tree, node => node[0] === 'pre' && (node[1].language === 'json-render'
+            || node[1].language === 'yaml-render'), (preNode) => {
+            const language = preNode[1].language;
+            try {
+                let spec = undefined;
+                if (language === 'json-render') {
+                    spec = JSON.parse(textContent(preNode));
+                }
+                else if (language === 'yaml-render') {
+                    spec = parseYaml(textContent(preNode));
+                }
+                if (spec) {
+                    return jsonRenderToAst(spec);
+                }
+            }
+            catch {
+                // nothing to do
+            }
+        });
+    },
+}));

package/dist/plugins/math.d.ts

@@ -1,4 +1,3 @@
-import type { ComarkPlugin } from 'comark';
 export interface MathConfig {
     /**
      * Throw on parse errors or return error message
@@ -56,4 +55,5 @@ export declare function validateMath(code: string): boolean;
  * })
  * ```
  */
-export default function math(config?: MathConfig): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<MathConfig>;
+export default _default;

package/dist/plugins/math.js

@@ -1,4 +1,5 @@
 import katex from 'katex';
+import { defineComarkPlugin } from "../utils/helpers.js";
 /**
  * Render LaTeX math expression to HTML using KaTeX
  *
@@ -253,11 +254,9 @@ function markdownItMath(md, config = {}) {
  * })
  * ```
  */
-export default function math(config) {
-    return {
-        name: 'math',
-        markdownItPlugins: [
-            ((md) => markdownItMath(md, config ?? {})),
-        ],
-    };
-}
+export default defineComarkPlugin((config = {}) => ({
+    name: 'math',
+    markdownItPlugins: [
+        ((md) => markdownItMath(md, config)),
+    ],
+}));

package/dist/plugins/mermaid.d.ts

@@ -1,4 +1,3 @@
-import type { ComarkPlugin } from 'comark';
 export type ThemeNames = 'zinc-light' | 'zinc-dark' | 'tokyo-night' | 'tokyo-night-storm' | 'tokyo-night-light' | 'catppuccin-mocha' | 'catppuccin-latte' | 'nord' | 'nord-light' | 'dracula' | 'github-light' | 'github-dark' | 'solarized-light' | 'solarized-dark' | 'one-dark';
 export interface MermaidConfig {
     /**
@@ -35,4 +34,5 @@ export declare function searchProps(content: string, index?: number): {
  * })
  * ```
  */
-export default function comarkMermaid(config?: MermaidConfig): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<MermaidConfig>;
+export default _default;

package/dist/plugins/mermaid.js

@@ -1,3 +1,4 @@
+import { defineComarkPlugin } from "../utils/helpers.js";
 /**
  * markdown-it plugin for mermaid diagrams
  * This handles ```mermaid code blocks
@@ -175,11 +176,9 @@ export function searchProps(content, index = 0) {
  * })
  * ```
  */
-export default function comarkMermaid(config) {
-    return {
-        name: 'mermaid',
-        markdownItPlugins: [
-            ((md) => markdownItMermaid(md, config)),
-        ],
-    };
-}
+export default defineComarkPlugin((config = {}) => ({
+    name: 'mermaid',
+    markdownItPlugins: [
+        ((md) => markdownItMermaid(md, config)),
+    ],
+}));

package/dist/plugins/security.d.ts

@@ -1,4 +1,3 @@
-import type { ComarkPlugin } from 'comark';
 import type { PropsValidationOptions } from '../internal/props-validation.ts';
 interface SecurityOptions extends PropsValidationOptions {
     /**
@@ -7,5 +6,5 @@ interface SecurityOptions extends PropsValidationOptions {
      */
     blockedTags?: string[];
 }
-export default function security(options?: SecurityOptions): ComarkPlugin;
-export {};
+declare const _default: import("comark").ComarkPluginFactory<SecurityOptions>;
+export default _default;

package/dist/plugins/security.js

@@ -1,6 +1,7 @@
+import { defineComarkPlugin } from "../utils/helpers.js";
 import { visit } from 'comark/utils';
 import { validateProps } from "../internal/props-validation.js";
-export default function security(options = {}) {
+export default defineComarkPlugin((options = {}) => {
     const { blockedTags = [], allowedLinkPrefixes, allowedImagePrefixes, allowedProtocols, defaultOrigin, allowDataImages, } = options;
     const dropSet = new Set(blockedTags.map(t => t.toLowerCase()));
     const propsOptions = {
@@ -29,4 +30,4 @@ export default function security(options = {}) {
             });
         },
     };
-}
+});

package/dist/plugins/summary.d.ts

@@ -1,2 +1,4 @@
-import type { ComarkPlugin } from '../types';
-export default function summary(delimiter?: string): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<{
+    delimiter?: string;
+}>;
+export default _default;

package/dist/plugins/summary.js

@@ -1,6 +1,8 @@
 import { applyAutoUnwrap } from "../internal/parse/auto-unwrap.js";
 import { marmdownItTokensToComarkTree } from "../internal/parse/token-processor.js";
-export default function summary(delimiter = '<!-- more -->') {
+import { defineComarkPlugin } from "../utils/helpers.js";
+export default defineComarkPlugin((options = {}) => {
+    const { delimiter = '<!-- more -->' } = options;
     return {
         name: 'summary',
         post(state) {
@@ -19,4 +21,4 @@ export default function summary(delimiter = '<!-- more -->') {
             }
         },
     };
-}
+});

package/dist/plugins/task-list.d.ts

@@ -4,5 +4,5 @@
  * This plugin runs before inline parsing to prevent Comark from interpreting
  * task list markers [X] and [ ] as Comark inline span syntax.
  */
-import type { ComarkPlugin } from 'comark';
-export default function comarkTaskList(): ComarkPlugin;
+declare const _default: import("../types.ts").ComarkPluginFactory<unknown>;
+export default _default;

package/dist/plugins/task-list.js

@@ -4,6 +4,7 @@
  * This plugin runs before inline parsing to prevent Comark from interpreting
  * task list markers [X] and [ ] as Comark inline span syntax.
  */
+import { defineComarkPlugin } from "../utils/helpers.js";
 function attrSet(token, name, value) {
     const index = token.attrIndex(name);
     const attr = [name, value];
@@ -109,9 +110,7 @@ function markdownItTaskList(md, options) {
         }
     });
 }
-export default function comarkTaskList() {
-    return {
-        name: 'task-list',
-        markdownItPlugins: [markdownItTaskList],
-    };
-}
+export default defineComarkPlugin(() => ({
+    name: 'task-list',
+    markdownItPlugins: [markdownItTaskList],
+}));

package/dist/plugins/toc.d.ts

@@ -1,4 +1,4 @@
-import type { ComarkPlugin, ComarkTree } from 'comark';
+import type { ComarkTree } from 'comark';
 export interface TocLink {
     id: string;
     text: string;
@@ -12,4 +12,5 @@ export interface Toc {
     links: TocLink[];
 }
 export declare function generateFlatToc(body: ComarkTree, options: Toc): Toc;
-export default function toc(options?: Partial<Toc>): ComarkPlugin;
+declare const _default: import("comark").ComarkPluginFactory<Partial<Toc>>;
+export default _default;

package/dist/plugins/toc.js

@@ -1,3 +1,4 @@
+import { defineComarkPlugin } from "../utils/helpers.js";
 const TOC_TAGS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 const TOC_TAGS_DEPTH = TOC_TAGS.reduce((tags, tag) => {
     tags[tag] = Number(tag.charAt(tag.length - 1));
@@ -105,7 +106,7 @@ export function generateFlatToc(body, options) {
         links,
     };
 }
-export default function toc(options = {}) {
+export default defineComarkPlugin((options = {}) => {
     const { title = '', depth = 2, searchDepth = 2, links = [] } = options;
     return {
         name: 'toc',
@@ -115,4 +116,4 @@ export default function toc(options = {}) {
             state.tree.meta.toc = toc;
         },
     };
-}
+});

package/dist/types.d.ts

@@ -11,7 +11,7 @@ export type ComarkText = string;
  * @param {} - The attributes of the comment
  * @param string - The content of the comment
  */
-export type ComarkComment = [null, {}, string];
+export type ComarkComment = [null, ComarkElementAttributes, string];
 /**
  * The Comark element attributes
  * @param [key: string]: unknown - The attributes of the element
@@ -190,6 +190,7 @@ export type ComarkPlugin = {
     pre?: (state: ComarkParsePreState) => Promise<void> | void;
     post?: (state: ComarkParsePostState) => Promise<void> | void;
 };
+export type ComarkPluginFactory<Options> = (opts?: Options) => ComarkPlugin;
 export type ComponentManifest = (name: string) => Promise<unknown> | undefined | null;
 export interface ComarkContextProvider {
     components: Record<string, any>;

package/dist/utils/helpers.d.ts

@@ -0,0 +1,12 @@
+import type { ComarkPluginFactory } from '../types.ts';
+/**
+ * Returns a function that invokes `fn` **strictly one at a time**: each call waits until the
+ * previous invocation has settled (resolved or rejected) before starting the next.
+ */
+export declare function createSerializedTask<TArgs extends unknown[], TResult>(fn: (...args: TArgs) => Promise<TResult>): (...args: TArgs) => Promise<TResult>;
+/**
+ * Define a Comark plugin
+ * @param fn - The plugin factory function
+ * @returns The defined plugin
+ */
+export declare function defineComarkPlugin<Options>(fn: ComarkPluginFactory<Options>): ComarkPluginFactory<Options>;

package/dist/utils/helpers.js

@@ -0,0 +1,23 @@
+/**
+ * Returns a function that invokes `fn` **strictly one at a time**: each call waits until the
+ * previous invocation has settled (resolved or rejected) before starting the next.
+ */
+export function createSerializedTask(fn) {
+    let chain = Promise.resolve(null);
+    return (...args) => {
+        chain = chain
+            .then(() => fn(...args))
+            .catch(() => null);
+        return chain;
+    };
+}
+// #region define plugin
+/**
+ * Define a Comark plugin
+ * @param fn - The plugin factory function
+ * @returns The defined plugin
+ */
+export function defineComarkPlugin(fn) {
+    return fn;
+}
+// #endregion

package/dist/utils/serialized-task.d.ts

@@ -0,0 +1 @@
+export * from '../../src/utils/serialized-task'

package/dist/utils/serialized-task.js

@@ -0,0 +1 @@
+export * from '../../src/utils/serialized-task.ts'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "comark",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
   "author": "",
   "license": "MIT",
@@ -35,7 +35,6 @@
     "build": "tsc",
     "dev": "tsc --watch",
     "test": "vitest run",
-    "benchmark": "node --import tsx benchmark.ts",
     "prepack": "tsc",
     "release": "release-it",
     "release:dry": "release-it --dry-run"
@@ -43,7 +42,7 @@
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
     "katex": "^0.16.33",
-    "shiki": "^3.22.0"
+    "shiki": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "shiki": {
@@ -57,21 +56,22 @@
     }
   },
   "devDependencies": {
+    "@json-render/core": "^0.16.0",
     "@nuxt/kit": "^4.4.2",
     "@shikijs/primitive": "^4.0.2",
     "@shikijs/twoslash": "^4.0.2",
     "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it": "^14.1.2",
     "github-slugger": "^2.0.0",
     "hast-util-to-string": "^3.0.1",
-    "markdown-it": "^14.1.1",
     "minimark": "0.2.0",
     "mitata": "^1.0.34",
     "tsx": "^4.21.0",
     "twoslash": "^0.3.6",
-    "vitest": "^4.1.1"
+    "vitest": "^4.1.4"
   },
   "dependencies": {
-    "@comark/markdown-it": "^0.3.2",
+    "@comark/markdown-it": "^0.3.3",
     "entities": "^8.0.0",
     "htmlparser2": "^12.0.0",
     "js-yaml": "^4.1.1",