comark 0.2.0 → 0.2.1

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/plugins/highlight.d.ts

@@ -1,4 +1,4 @@
-import type { LanguageRegistration, ShikiTransformer, ShikiInternal, ThemeRegistration } from 'shiki';
+import type { LanguageRegistration, ShikiTransformer, ShikiPrimitive, ThemeRegistration } from 'shiki';
 import type { ComarkNode, ComarkTree } from 'comark';
 export interface HighlightOptions {
     /**
@@ -45,7 +45,7 @@ export interface CodeBlockAttributes {
  * Get or create the Shiki highlighter instance
  * Uses a singleton pattern to avoid creating multiple highlighters
  */
-export declare function getHighlighter(options?: HighlightOptions): Promise<ShikiInternal>;
+export declare function getHighlighter(options?: HighlightOptions): Promise<ShikiPrimitive>;
 /**
  * Highlight code using Shiki with codeToTokens
  * Returns comark nodes built from hast

package/dist/plugins/highlight.js

@@ -1,5 +1,5 @@
 import { defineComarkPlugin } from "../utils/helpers.js";
-import { createShikiInternal } from 'shiki';
+import { createShikiPrimitive } from 'shiki';
 import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
 import { codeToHast } from 'shiki/core';
 let highlighter = null;
@@ -24,7 +24,7 @@ export async function getHighlighter(options = {}) {
     try {
         highlighterPromise = (async () => {
             const { themes, languages } = await registerDefaults(options);
-            const hl = await createShikiInternal({
+            const hl = await createShikiPrimitive({
                 themes: themes,
                 langs: languages,
                 langAlias: {

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "comark",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Components in Markdown (Comark) parser with streaming support for Vue, React, Svelte and HTML",
   "author": "",
   "license": "MIT",
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
     "katex": "^0.16.33",
-    "shiki": "^3.22.0"
+    "shiki": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "shiki": {
@@ -56,6 +56,7 @@
     }
   },
   "devDependencies": {
+    "@json-render/core": "^0.16.0",
     "@nuxt/kit": "^4.4.2",
     "@shikijs/primitive": "^4.0.2",
     "@shikijs/twoslash": "^4.0.2",
@@ -67,10 +68,10 @@
     "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",