@tanstack/markdown 0.0.6 → 0.0.8

package/README.md

@@ -1,36 +1,73 @@
 # TanStack Markdown
 
-A tiny deterministic TanStack-flavored Markdown renderer.
+A tiny, fast, deterministic Markdown parser and renderer for blogs and documentation.
+
+- 4.6 KB gzip parser
+- 6.4 KB gzip HTML renderer
+- 6.3 KB gzip React adapter
+- 6.3 KB gzip Octane adapter
+- zero runtime dependencies
+- serializable AST
+- safe defaults for raw HTML and executable URLs
+- optional docs extensions and external syntax highlighting
 
 ```bash
 pnpm add @tanstack/markdown
 ```
 
-## Commands
+```ts
+import { renderHtml } from '@tanstack/markdown/html'
+
+const html = renderHtml('# Fast by default')
+```
+
+```tsx
+import { Markdown } from '@tanstack/markdown/react'
+
+export function Article({ source }: { source: string }) {
+  return <Markdown>{source}</Markdown>
+}
+```
+
+```tsrx
+import { Markdown } from '@tanstack/markdown/octane'
+
+export function Article({ source }: { source: string }) @{
+  <Markdown>{source}</Markdown>
+}
+```
+
+TanStack Markdown targets controlled technical content. It supports the Markdown used by blogs and docs, then spends its remaining complexity budget on deterministic output, renderer parity, malformed-input resilience, and small entry points. It is intentionally not a complete CommonMark, GFM, MDX, or general content-processing implementation.
+
+## Documentation
+
+- [Overview](./docs/overview.md)
+- [Installation](./docs/installation.md)
+- [Quick Start](./docs/quick-start.md)
+- [Comparison](./docs/comparison.md)
+- [Syntax Profile](./docs/core-concepts/syntax-profile.md)
+- [React Guide](./docs/guides/react.md)
+- [Octane Guide](./docs/guides/octane.md)
+- [Syntax Highlighting](./docs/guides/syntax-highlighting.md)
+- [Extensions](./docs/guides/extensions.md)
+- [API Reference](./docs/reference/index.md)
+- [Architecture](./docs/project/architecture.md)
+
+## Verification
 
 ```bash
-pnpm test
-pnpm run typecheck
-pnpm run build
-pnpm run research
+pnpm run verify
 ```
 
-## Entry Points
+To include downstream content in the corpus gate:
 
-- `src/parser.ts`: Markdown subset parser to a serializable AST
-- `src/html.ts`: HTML string renderer
-- `src/react.ts`: React adapter
-- `src/extensions/*`: optional docs-site extension functions
-- `scripts/measure-size.ts`: bundle size matrix
-- `scripts/bench.ts`: CPU benchmark matrix
+```bash
+MARKDOWN_CORPUS_DIRS=../tanstack.com/src/blog:../tanstack.com/docs \
+  pnpm run test:corpus
+```
 
-## Reports
+Generated reports:
 
 - [Bundle sizes](./reports/sizes.md)
 - [Benchmarks](./reports/benchmarks.md)
-- [Audit](./docs/audit.md)
-- [Spec and API](./docs/spec.md)
-- [Goal and coverage map](./docs/goal.md)
-- [Bundle strategy](./docs/bundle-strategy.md)
-- [Extensions](./docs/extensions.md)
-- [Recommendation](./docs/recommendation.md)
+- [CommonMark compatibility accounting](./reports/conformance.md)

package/dist/html.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAyD,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAG7K,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAGpF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAwChF;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CA0BlF;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE9F"}
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../src/html.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAyD,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAG7K,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAGpF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CA0ChF;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CA0BlF;AAED,wBAAgB,cAAc,CAAC,QAAQ,EAAE,gBAAgB,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAE9F"}

package/dist/html.js

@@ -28,9 +28,11 @@ export function renderBlock(node, options = {}) {
             return `<blockquote>\n${node.children.map(child => renderBlock(child, options)).join('\n')}\n</blockquote>`;
         case 'table': {
             const header = `<thead><tr>${node.header.map((cell, index) => renderTableCell('th', cell, node.align[index], options)).join('')}</tr></thead>`;
-            const body = `<tbody>${node.rows
-                .map(row => `<tr>${row.map((cell, index) => renderTableCell('td', cell, node.align[index], options)).join('')}</tr>`)
-                .join('')}</tbody>`;
+            const body = node.rows.length
+                ? `<tbody>${node.rows
+                    .map(row => `<tr>${row.map((cell, index) => renderTableCell('td', cell, node.align[index], options)).join('')}</tr>`)
+                    .join('')}</tbody>`
+                : '';
             return `<table>${header}${body}</table>`;
         }
         case 'footnotes':

package/dist/inline.js

@@ -7,7 +7,12 @@ export function parseInline(value, options = {}) {
     }
     return result;
 }
-function parseInlineRaw(value, options) {
+const maxInlineDepth = 32;
+const scansPerCharacter = 16;
+function parseInlineRaw(value, options, budget = { scans: Math.max(value.length * scansPerCharacter, 1024), depth: 0 }) {
+    if (budget.depth >= maxInlineDepth)
+        return value ? [{ type: 'text', value }] : [];
+    budget.depth++;
     const nodes = [];
     let index = 0;
     let text = '';
@@ -35,7 +40,7 @@ function parseInlineRaw(value, options) {
         }
         if (char === '`') {
             const tickCount = countRun(value, index, '`');
-            const close = findClosingRun(value, index + tickCount, '`', tickCount);
+            const close = findClosingRun(value, index + tickCount, '`', tickCount, budget);
             if (close !== -1) {
                 pushText();
                 nodes.push({
@@ -45,15 +50,18 @@ function parseInlineRaw(value, options) {
                 index = close + tickCount;
                 continue;
             }
+            text += value.slice(index, index + tickCount);
+            index += tickCount;
+            continue;
         }
         if (char === '!' && next === '[') {
-            const parsed = parseLinkish(value, index + 1, options);
+            const parsed = parseLinkish(value, index + 1, options, budget);
             if (parsed) {
                 pushText();
                 nodes.push({
                     type: 'image',
                     src: sanitizeUrl(parsed.href),
-                    alt: textFromMarkdown(parsed.label),
+                    alt: textFromMarkdown(parsed.label, budget),
                     ...(parsed.title ? { title: parsed.title } : {}),
                 });
                 index = parsed.end;
@@ -61,14 +69,14 @@ function parseInlineRaw(value, options) {
             }
         }
         if (char === '[') {
-            const footnote = parseFootnoteReference(value, index, options);
+            const footnote = parseFootnoteReference(value, index, options, budget);
             if (footnote) {
                 pushText();
                 nodes.push(footnote.node);
                 index = footnote.end;
                 continue;
             }
-            const parsed = parseLinkish(value, index, options);
+            const parsed = parseLinkish(value, index, options, budget);
             if (parsed) {
                 const href = sanitizeUrl(parsed.href);
                 pushText();
@@ -77,23 +85,23 @@ function parseInlineRaw(value, options) {
                         type: 'link',
                         href,
                         ...(parsed.title ? { title: parsed.title } : {}),
-                        children: parseInlineRaw(parsed.label, options),
+                        children: parseInlineRaw(parsed.label, options, budget),
                     });
                 }
                 else {
-                    nodes.push(...parseInlineRaw(parsed.label, options));
+                    nodes.push(...parseInlineRaw(parsed.label, options, budget));
                 }
                 index = parsed.end;
                 continue;
             }
         }
         if ((char === '*' && next === '*') || (char === '_' && next === '_')) {
-            const close = findDelimiter(value, index + 2, char + char);
+            const close = findDelimiter(value, index + 2, char + char, budget);
             if (close !== -1) {
                 pushText();
                 nodes.push({
                     type: 'strong',
-                    children: parseInlineRaw(value.slice(index + 2, close), options),
+                    children: parseInlineRaw(value.slice(index + 2, close), options, budget),
                 });
                 index = close + 2;
                 continue;
@@ -102,13 +110,19 @@ function parseInlineRaw(value, options) {
             index += 2;
             continue;
         }
+        if (char === '~' && next === '~' && value[index + 2] === '~') {
+            const run = countRun(value, index, '~');
+            text += value.slice(index, index + run);
+            index += run;
+            continue;
+        }
         if (char === '~' && next === '~') {
-            const close = findDelimiter(value, index + 2, '~~');
+            const close = findDelimiter(value, index + 2, '~~', budget);
             if (close !== -1) {
                 pushText();
                 nodes.push({
                     type: 'strike',
-                    children: parseInlineRaw(value.slice(index + 2, close), options),
+                    children: parseInlineRaw(value.slice(index + 2, close), options, budget),
                 });
                 index = close + 2;
                 continue;
@@ -118,31 +132,31 @@ function parseInlineRaw(value, options) {
             continue;
         }
         if (char === '~') {
-            const close = findSingleTildeDelimiter(value, index + 1);
+            const close = findSingleTildeDelimiter(value, index + 1, budget);
             if (close !== -1) {
                 pushText();
                 nodes.push({
                     type: 'strike',
-                    children: parseInlineRaw(value.slice(index + 1, close), options),
+                    children: parseInlineRaw(value.slice(index + 1, close), options, budget),
                 });
                 index = close + 1;
                 continue;
             }
         }
         if (char === '*' || char === '_') {
-            const close = findDelimiter(value, index + 1, char);
+            const close = findDelimiter(value, index + 1, char, budget);
             if (close !== -1 && !isIntrawordUnderscore(value, index, close, char)) {
                 pushText();
                 nodes.push({
                     type: 'emphasis',
-                    children: parseInlineRaw(value.slice(index + 1, close), options),
+                    children: parseInlineRaw(value.slice(index + 1, close), options, budget),
                 });
                 index = close + 1;
                 continue;
             }
         }
         if (char === '<' && options.allowHtml) {
-            const close = value.indexOf('>', index + 1);
+            const close = findCharacter(value, index + 1, '>', budget);
             if (close !== -1) {
                 pushText();
                 nodes.push({ type: 'inlineHtml', value: value.slice(index, close + 1) });
@@ -154,12 +168,13 @@ function parseInlineRaw(value, options) {
         index++;
     }
     pushText();
+    budget.depth--;
     return nodes;
 }
-function parseFootnoteReference(value, open, options) {
+function parseFootnoteReference(value, open, options, budget) {
     if (value[open + 1] !== '^')
         return undefined;
-    const close = value.indexOf(']', open + 2);
+    const close = findCharacter(value, open + 2, ']', budget);
     if (close === -1)
         return undefined;
     const label = value.slice(open + 2, close);
@@ -185,13 +200,13 @@ function parseFootnoteReference(value, open, options) {
         end: close + 1,
     };
 }
-function parseLinkish(value, open, options) {
-    const closeBracket = findBalanced(value, open, '[', ']');
+function parseLinkish(value, open, options, budget) {
+    const closeBracket = findBalanced(value, open, '[', ']', budget);
     if (closeBracket === -1)
         return undefined;
     const label = value.slice(open + 1, closeBracket);
     if (value[closeBracket + 1] === '(') {
-        const closeParen = findBalanced(value, closeBracket + 1, '(', ')');
+        const closeParen = findBalanced(value, closeBracket + 1, '(', ')', budget);
         if (closeParen === -1)
             return undefined;
         const destination = value.slice(closeBracket + 2, closeParen).trim();
@@ -206,7 +221,7 @@ function parseLinkish(value, open, options) {
         };
     }
     if (value[closeBracket + 1] === '[') {
-        const closeReference = findBalanced(value, closeBracket + 1, '[', ']');
+        const closeReference = findBalanced(value, closeBracket + 1, '[', ']', budget);
         if (closeReference === -1)
             return undefined;
         const definition = options.references?.[normalizeReferenceLabel(value.slice(closeBracket + 2, closeReference))];
@@ -230,9 +245,11 @@ function parseDestination(value) {
         ...(match[2] ? { title: match[2] } : {}),
     };
 }
-function findBalanced(value, openIndex, open, close) {
+function findBalanced(value, openIndex, open, close, budget) {
     let depth = 0;
     for (let index = openIndex; index < value.length; index++) {
+        if (!takeScan(budget))
+            return -1;
         if (value[index - 1] === '\\')
             continue;
         if (value[index] === open)
@@ -245,38 +262,51 @@ function findBalanced(value, openIndex, open, close) {
     }
     return -1;
 }
-function countRun(value, index, char) {
+function countRun(value, index, char, budget) {
     let count = 0;
-    while (value[index + count] === char)
+    while (value[index + count] === char) {
+        if (budget && !takeScan(budget))
+            break;
         count++;
+    }
     return count;
 }
-function findClosingRun(value, start, char, count) {
+function findClosingRun(value, start, char, count, budget) {
     for (let index = start; index < value.length; index++) {
+        if (!takeScan(budget))
+            return -1;
         if (value[index] !== char)
             continue;
-        if (countRun(value, index, char) >= count)
+        if (countRun(value, index, char, budget) >= count)
             return index;
     }
     return -1;
 }
-function findDelimiter(value, start, delimiter) {
+function findDelimiter(value, start, delimiter, budget) {
     for (let index = start; index < value.length; index++) {
+        if (!takeScan(budget))
+            return -1;
         if (value[index - 1] === '\\')
             continue;
+        if (delimiter === '~~' && (value[index - 1] === '~' || value[index + 2] === '~'))
+            continue;
         if (value.startsWith(delimiter, index))
             return index;
     }
     return -1;
 }
-function findSingleTildeDelimiter(value, start) {
+function findSingleTildeDelimiter(value, start, budget) {
     if (isWhitespace(value[start] ?? ''))
         return -1;
     for (let index = start; index < value.length; index++) {
+        if (!takeScan(budget))
+            return -1;
         if (value[index - 1] === '\\')
             continue;
         if (value[index] !== '~')
             continue;
+        if (value[index - 1] === '~')
+            continue;
         if (value[index + 1] === '~')
             continue;
         if (isWhitespace(value[index - 1] ?? ''))
@@ -285,6 +315,21 @@ function findSingleTildeDelimiter(value, start) {
     }
     return -1;
 }
+function findCharacter(value, start, character, budget) {
+    for (let index = start; index < value.length; index++) {
+        if (!takeScan(budget))
+            return -1;
+        if (value[index] === character)
+            return index;
+    }
+    return -1;
+}
+function takeScan(budget) {
+    if (budget.scans <= 0)
+        return false;
+    budget.scans--;
+    return true;
+}
 function isIntrawordUnderscore(value, open, close, delimiter) {
     if (delimiter !== '_')
         return false;
@@ -293,8 +338,8 @@ function isIntrawordUnderscore(value, open, close, delimiter) {
 function isWhitespace(value) {
     return /\s/.test(value);
 }
-function textFromMarkdown(value) {
-    return parseInlineRaw(value, {}).map(node => (node.type === 'text' || node.type === 'inlineCode' ? node.value : '')).join('');
+function textFromMarkdown(value, budget) {
+    return parseInlineRaw(value, {}, budget).map(node => (node.type === 'text' || node.type === 'inlineCode' ? node.value : '')).join('');
 }
 function mergeText(nodes) {
     const result = [];

package/dist/octane.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentBody, ElementDescriptor, OctaneNode } from 'octane';
+import type { BlockNode, InlineNode, MarkdownInput, RenderOptions } from './types.js';
+type ComponentMap = Partial<Record<string, string | ComponentBody<any>>>;
+export interface MarkdownOctaneOptions extends RenderOptions {
+    components?: ComponentMap;
+}
+export interface MarkdownProps extends MarkdownOctaneOptions {
+    children: MarkdownInput;
+}
+export declare function Markdown({ children, ...options }: MarkdownProps): ElementDescriptor;
+export declare function renderMarkdownOctane(input: MarkdownInput, options?: MarkdownOctaneOptions): OctaneNode[];
+export declare function renderBlockOctane(node: BlockNode, options?: MarkdownOctaneOptions, key?: string): ElementDescriptor;
+export declare function renderInlineOctane(node: InlineNode, options?: MarkdownOctaneOptions, key?: string): OctaneNode;
+export {};
+//# sourceMappingURL=octane.d.ts.map

package/dist/octane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"octane.d.ts","sourceRoot":"","sources":["../src/octane.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAA;AAE1E,OAAO,KAAK,EAAE,SAAS,EAAmC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAErI,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAExE,MAAM,WAAW,qBAAsB,SAAQ,aAAa;IAC1D,UAAU,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,qBAAqB;IAC1D,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,iBAAiB,CAEnF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,qBAA0B,GAAG,UAAU,EAAE,CAG5G;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,qBAA0B,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,iBAAiB,CA+DvH;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,qBAA0B,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,UAAU,CAwClH"}

package/dist/octane.js

@@ -0,0 +1,189 @@
+import { Fragment, createElement } from 'octane';
+import { parseMarkdown } from './parser.js';
+export function Markdown({ children, ...options }) {
+    return createElement(Fragment, null, ...renderMarkdownOctane(children, options));
+}
+export function renderMarkdownOctane(input, options = {}) {
+    const document = typeof input === 'string' ? parseMarkdown(input, options) : input;
+    return document.children.map((node, index) => renderBlockOctane(node, options, `b:${index}`));
+}
+export function renderBlockOctane(node, options = {}, key) {
+    switch (node.type) {
+        case 'heading':
+            return h(options, `h${node.depth}`, { key, ...(node.id ? { id: node.id } : {}), ...(node.framework ? { 'data-framework': node.framework } : {}) }, renderInlines(node.children, options), renderHeadingAnchorOctane(node.id, options));
+        case 'paragraph':
+            return h(options, 'p', { key }, renderInlines(node.children, options));
+        case 'code':
+            return renderCodeBlockOctane(node, options, key);
+        case 'list': {
+            const tag = node.ordered ? 'ol' : 'ul';
+            return h(options, tag, { key, ...(node.ordered && node.start && node.start !== 1 ? { start: node.start } : {}) }, node.items.map((item, index) => h(options, 'li', { key: index }, renderListItemChildrenOctane(item.children, item.checked, node.loose, options, `${index}`))));
+        }
+        case 'blockquote':
+            return h(options, 'blockquote', { key }, node.children.map((child, index) => renderBlockOctane(child, options, `${key}:${index}`)));
+        case 'table':
+            return h(options, 'table', { key }, h(options, 'thead', null, h(options, 'tr', null, node.header.map((cell, index) => renderTableCellOctane('th', cell, node.align[index], options, index)))), node.rows.length
+                ? h(options, 'tbody', null, node.rows.map((row, rowIndex) => h(options, 'tr', { key: rowIndex }, row.map((cell, index) => renderTableCellOctane('td', cell, node.align[index], options, index)))))
+                : null);
+        case 'footnotes':
+            return renderFootnotesOctane(node.items, options, key);
+        case 'thematicBreak':
+            return h(options, 'hr', { key });
+        case 'html':
+            return options.allowHtml
+                ? h(options, 'div', { key, dangerouslySetInnerHTML: { __html: node.value } })
+                : h(options, 'p', { key }, node.value);
+        case 'callout':
+            return h(options, 'div', { key, className: `markdown-alert markdown-alert-${node.kind.toLowerCase()}` }, h(options, 'p', { className: 'markdown-alert-title' }, node.title), h(options, 'div', { className: 'markdown-alert-content' }, node.children.map((child, index) => renderBlockOctane(child, options, `${key}:${index}`))));
+        case 'component':
+            return renderComponentOctane(node, options, key);
+    }
+}
+export function renderInlineOctane(node, options = {}, key) {
+    switch (node.type) {
+        case 'text':
+            return node.value;
+        case 'inlineCode':
+            return h(options, 'code', { key }, node.value);
+        case 'strong':
+            return h(options, 'strong', { key }, renderInlines(node.children, options));
+        case 'emphasis':
+            return h(options, 'em', { key }, renderInlines(node.children, options));
+        case 'strike':
+            return h(options, 'del', { key }, renderInlines(node.children, options));
+        case 'footnoteReference':
+            return h(options, 'sup', { key }, h(options, 'a', {
+                id: `user-content-fnref-${footnoteReferenceId(node)}`,
+                'data-footnote-ref': '',
+                'aria-describedby': 'footnote-label',
+                href: `#user-content-fn-${node.id}`,
+            }, node.number));
+        case 'link':
+            return h(options, 'a', { key, href: node.href, ...(node.title ? { title: node.title } : {}) }, renderInlines(node.children, options));
+        case 'image':
+            return h(options, 'img', { key, src: node.src, alt: node.alt, ...(node.title ? { title: node.title } : {}) });
+        case 'break':
+            return h(options, 'br', { key });
+        case 'inlineHtml':
+            return options.allowHtml
+                ? h(options, 'span', { key, dangerouslySetInnerHTML: { __html: node.value } })
+                : node.value;
+    }
+}
+function renderInlines(nodes, options) {
+    return nodes.map((node, index) => renderInlineOctane(node, options, `i:${index}`));
+}
+function renderCodeBlockOctane(node, options, key) {
+    const lang = node.lang ?? 'plaintext';
+    const highlighter = options.highlighter;
+    const content = highlighter ? undefined : node.value;
+    const highlighted = highlighter
+        ? {
+            dangerouslySetInnerHTML: {
+                __html: highlighter(node.value, lang, {
+                    ...(node.highlightLines && { highlightLines: node.highlightLines }),
+                    ...(options.codeLineNumbers !== undefined && { lineNumbers: options.codeLineNumbers }),
+                }),
+            },
+        }
+        : undefined;
+    const pre = h(options, 'pre', {
+        className: 'tm-code',
+        'data-lang': lang,
+        ...(node.title ? { 'data-code-title': node.title } : {}),
+        ...(node.file ? { 'data-filename': node.file } : {}),
+        ...(node.framework ? { 'data-framework': node.framework } : {}),
+    }, h(options, 'code', { className: `language-${lang}`, ...highlighted }, content));
+    if (!node.title)
+        return h(options, Fragment, { key }, pre);
+    return h(options, 'figure', { key, className: 'tm-code-frame', 'data-lang': lang }, h(options, 'figcaption', null, node.title), pre);
+}
+function renderListItemChildrenOctane(children, checked, loose, options, key) {
+    const [first, ...rest] = children;
+    const task = checked === undefined
+        ? []
+        : [
+            h(options, 'input', {
+                key: `${key}:checkbox`,
+                type: 'checkbox',
+                disabled: true,
+                checked,
+                readOnly: true,
+            }),
+            ' ',
+        ];
+    if (first?.type === 'paragraph') {
+        const content = [...task, ...renderInlines(first.children, options)];
+        return [
+            ...(loose ? [h(options, 'p', { key: `${key}:paragraph` }, content)] : content),
+            ...rest.flatMap((child, childIndex) => renderListChildOctane(child, loose, options, `${key}:${childIndex + 1}`)),
+        ];
+    }
+    return [...task, ...children.flatMap((child, childIndex) => renderListChildOctane(child, loose, options, `${key}:${childIndex}`))];
+}
+function renderListChildOctane(child, loose, options, key) {
+    return !loose && child.type === 'paragraph' ? renderInlines(child.children, options) : [renderBlockOctane(child, options, key)];
+}
+function renderTableCellOctane(tag, cell, align, options, key) {
+    return h(options, tag, { key, ...(align ? { style: { textAlign: align } } : {}) }, renderInlines(cell.children, options));
+}
+function renderFootnotesOctane(items, options, key) {
+    return h(options, 'section', { key, 'data-footnotes': '', className: 'footnotes' }, h(options, 'h2', { id: 'footnote-label', className: 'sr-only' }, 'Footnotes', renderHeadingAnchorOctane('footnote-label', options)), h(options, 'ol', null, items.map(item => h(options, 'li', { key: item.id, id: `user-content-fn-${item.id}` }, renderFootnoteItemOctane(item, options)))));
+}
+function renderFootnoteItemOctane(item, options) {
+    const lastIndex = item.children.length - 1;
+    const backrefs = renderFootnoteBackrefsOctane(item, options);
+    if (lastIndex < 0)
+        return [h(options, 'p', { key: 'backref-wrapper' }, backrefs.slice(1))];
+    return item.children.map((child, index) => {
+        if (index === lastIndex && child.type === 'paragraph') {
+            return h(options, 'p', { key: index }, renderInlines(child.children, options), backrefs);
+        }
+        return renderBlockOctane(child, options, `${index}`);
+    });
+}
+function renderFootnoteBackrefsOctane(item, options) {
+    const result = [];
+    for (let index = 1; index <= (item.referenceCount ?? 1); index++) {
+        const referenceId = index === 1 ? item.id : `${item.id}-${index}`;
+        const label = index === 1 ? `${item.number}` : `${item.number}-${index}`;
+        result.push(' ', h(options, 'a', {
+            key: index,
+            'data-footnote-backref': '',
+            'aria-label': `Back to reference ${label}`,
+            className: 'data-footnote-backref',
+            href: `#user-content-fnref-${referenceId}`,
+        }, '\u21a9'));
+    }
+    return result;
+}
+function footnoteReferenceId(node) {
+    return node.referenceIndex && node.referenceIndex > 1 ? `${node.id}-${node.referenceIndex}` : node.id;
+}
+function h(options, tag, props, ...children) {
+    const component = typeof tag === 'string' ? options.components?.[tag] ?? tag : tag;
+    return createElement(component, props ?? undefined, ...children);
+}
+function renderComponentOctane(node, options, key) {
+    const tag = node.tagName ?? 'md-comment-component';
+    const props = {
+        ...(node.properties ?? {}),
+    };
+    if (!node.tagName) {
+        props['data-component'] = node.name;
+        if (!props['data-attributes'])
+            props['data-attributes'] = JSON.stringify(node.attributes);
+    }
+    return h(options, tag, { key, ...props }, node.children.map((child, index) => renderBlockOctane(child, options, `${key}:${index}`)));
+}
+function renderHeadingAnchorOctane(id, options) {
+    if (!id || !options.headingAnchors)
+        return null;
+    const anchorOptions = typeof options.headingAnchors === 'object' ? options.headingAnchors : {};
+    return h(options, 'a', {
+        href: `#${id}`,
+        'aria-hidden': anchorOptions.ariaHidden ?? true,
+        className: anchorOptions.className ?? 'anchor-heading anchor-heading-link',
+        tabIndex: anchorOptions.tabIndex ?? -1,
+    }, anchorOptions.content ?? '#');
+}

package/dist/parser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAQV,gBAAgB,EAChB,YAAY,EAGb,MAAM,YAAY,CAAA;AAKnB,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,gBAAgB,CAyC5F"}
+{"version":3,"file":"parser.d.ts","sourceRoot":"","sources":["../src/parser.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAQV,gBAAgB,EAChB,YAAY,EAGb,MAAM,YAAY,CAAA;AAWnB,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,gBAAgB,CAyC5F"}

package/dist/parser.js

@@ -1,5 +1,6 @@
 import { parseInline } from './inline.js';
 import { createSlugger, footnoteId, isBlank, normalizeInput, normalizeReferenceLabel, plainText, stripIndent } from './utils.js';
+const maxBlockDepth = 64;
 export function parseMarkdown(markdown, options = {}) {
     const normalized = normalizeInput(markdown);
     const frontmatterEnabled = options.frontmatter !== false;
@@ -40,13 +41,21 @@ class BlockParser {
     lines;
     options;
     slugger;
+    budget;
     index = 0;
-    constructor(lines, options, slugger) {
+    constructor(lines, options, slugger, budget = { depth: 0 }) {
         this.lines = lines;
         this.options = options;
         this.slugger = slugger;
+        this.budget = budget;
     }
     parse() {
+        if (this.budget.depth >= maxBlockDepth) {
+            const value = this.lines.slice(this.index).join('\n');
+            this.index = this.lines.length;
+            return value ? [{ type: 'paragraph', children: parseInline(value, this.options) }] : [];
+        }
+        this.budget.depth++;
         const nodes = [];
         while (this.index < this.lines.length) {
             if (isBlank(this.current())) {
@@ -68,6 +77,7 @@ class BlockParser {
                 this.parseParagraph();
             nodes.push(node);
         }
+        this.budget.depth--;
         return nodes;
     }
     parseExtensionBlock() {
@@ -78,7 +88,7 @@ class BlockParser {
                 index: this.index,
                 options: this.options,
                 parseInline: value => parseInline(value, this.options),
-                parseBlocks: value => new BlockParser(normalizeInput(value).split('\n'), this.options, this.slugger).parse(),
+                parseBlocks: value => new BlockParser(normalizeInput(value).split('\n'), this.options, this.slugger, this.budget).parse(),
                 consume: lines => {
                     consumed = lines;
                 },
@@ -151,7 +161,7 @@ class BlockParser {
         }
         return {
             type: 'blockquote',
-            children: new BlockParser(quoted, this.options, this.slugger).parse(),
+            children: new BlockParser(quoted, this.options, this.slugger, this.budget).parse(),
         };
     }
     parseList() {
@@ -211,7 +221,7 @@ class BlockParser {
                 itemLines.push(line.trimStart());
                 this.index++;
             }
-            const children = new BlockParser(itemLines, this.options, this.slugger).parse();
+            const children = new BlockParser(itemLines, this.options, this.slugger, this.budget).parse();
             const item = { type: 'listItem', children };
             if (checked !== undefined)
                 item.checked = checked;
@@ -232,13 +242,15 @@ class BlockParser {
             return undefined;
         const headerCells = splitTableRow(header);
         const align = splitTableRow(delimiter).map(parseAlign);
+        const columns = headerCells.length;
         const rows = [];
         this.index += 2;
         while (this.index < this.lines.length) {
             const line = this.current();
-            if (isBlank(line) || !line.includes('|'))
+            if (isBlank(line) || isBlockStart(line, this.next()))
                 break;
-            rows.push(splitTableRow(line).map(value => cell(value, this.options)));
+            const values = splitTableRow(line);
+            rows.push(Array.from({ length: columns }, (_, index) => cell(values[index] ?? '', this.options)));
             this.index++;
         }
         return {
@@ -434,7 +446,7 @@ function looksLikeTableHeader(header, delimiter) {
     if (!header.includes('|'))
         return false;
     const cells = splitTableRow(delimiter);
-    return cells.length > 0 && cells.every(cell => /^:?-{2,}:?$/.test(cell.trim()));
+    return cells.length === splitTableRow(header).length && cells.every(cell => /^:?-+:?$/.test(cell.trim()));
 }
 function splitTableRow(value) {
     let row = value.trim();

package/dist/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAmC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAErI,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAExE,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,UAAU,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,YAAY,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,oBAAyB,GAAG,SAAS,CAGvG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,CA6DhH;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAwC/G"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAmC,UAAU,EAAE,aAAa,EAAE,aAAa,EAAiB,MAAM,YAAY,CAAA;AAErI,KAAK,YAAY,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;AAExE,MAAM,WAAW,oBAAqB,SAAQ,aAAa;IACzD,UAAU,CAAC,EAAE,YAAY,CAAA;CAC1B;AAED,MAAM,WAAW,aAAc,SAAQ,oBAAoB;IACzD,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE,EAAE,aAAa,GAAG,YAAY,CAE9E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,GAAE,oBAAyB,GAAG,SAAS,CAGvG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,YAAY,CA+DhH;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,GAAE,oBAAyB,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAwC/G"}

package/dist/react.js

@@ -22,7 +22,9 @@ export function renderBlockReact(node, options = {}, key) {
         case 'blockquote':
             return h(options, 'blockquote', { key }, node.children.map((child, index) => renderBlockReact(child, options, `${key}:${index}`)));
         case 'table':
-            return h(options, 'table', { key }, h(options, 'thead', null, h(options, 'tr', null, node.header.map((cell, index) => renderTableCellReact('th', cell, node.align[index], options, index)))), h(options, 'tbody', null, node.rows.map((row, rowIndex) => h(options, 'tr', { key: rowIndex }, row.map((cell, index) => renderTableCellReact('td', cell, node.align[index], options, index))))));
+            return h(options, 'table', { key }, h(options, 'thead', null, h(options, 'tr', null, node.header.map((cell, index) => renderTableCellReact('th', cell, node.align[index], options, index)))), node.rows.length
+                ? h(options, 'tbody', null, node.rows.map((row, rowIndex) => h(options, 'tr', { key: rowIndex }, row.map((cell, index) => renderTableCellReact('td', cell, node.align[index], options, index)))))
+                : null);
         case 'footnotes':
             return renderFootnotesReact(node.items, options, key);
         case 'thematicBreak':

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@tanstack/markdown",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
-  "description": "A tiny deterministic TanStack-flavored markdown renderer.",
+  "description": "A tiny, fast, deterministic Markdown renderer for blogs and documentation.",
   "license": "MIT",
-  "packageManager": "pnpm@11.4.0",
   "sideEffects": false,
   "files": [
     "dist",
@@ -28,6 +27,10 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
+    "./octane": {
+      "types": "./dist/octane.d.ts",
+      "import": "./dist/octane.js"
+    },
     "./extensions/callouts": {
       "types": "./dist/extensions/callouts.d.ts",
       "import": "./dist/extensions/callouts.js"
@@ -53,21 +56,17 @@
       "import": "./dist/extensions/tabs.js"
     }
   },
-  "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "bench": "tsx scripts/bench.ts",
-    "size": "tsx scripts/measure-size.ts",
-    "research": "pnpm run size && pnpm run bench"
-  },
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
+    "octane": ">=0.1.12",
     "react": ">=18"
   },
   "peerDependenciesMeta": {
+    "octane": {
+      "optional": true
+    },
     "react": {
       "optional": true
     }
@@ -77,11 +76,13 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "commonmark": "^0.31.2",
+    "commonmark-spec": "0.31.2",
     "esbuild": "^0.25.0",
     "markdown-it": "^14.2.0",
     "markdown-wasm": "^1.2.0",
     "marked": "^18.0.5",
     "micromark": "^4.0.2",
+    "octane": "0.1.12",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rehype-stringify": "^10.0.1",
@@ -91,5 +92,17 @@
     "typescript": "^5.8.0",
     "unified": "^11.0.5",
     "vitest": "^3.2.0"
+  },
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:corpus": "vitest run tests/corpus.test.tsx",
+    "docs:verify": "node scripts/verify-docs.mjs",
+    "conformance": "tsx scripts/conformance.ts",
+    "bench": "tsx scripts/bench.ts",
+    "size": "tsx scripts/measure-size.ts",
+    "research": "pnpm run conformance && pnpm run size && pnpm run bench",
+    "verify": "pnpm test && pnpm run typecheck && pnpm run build && pnpm run docs:verify && pnpm run research && pnpm pack --dry-run"
   }
-}
+}