@comark/vue 0.2.1 → 0.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Comark team and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/Binding.d.ts

@@ -0,0 +1,24 @@
+export declare const Binding: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (ArrayConstructor | ObjectConstructor | StringConstructor | NumberConstructor | BooleanConstructor)[];
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    value: string | number | boolean | Record<string, any> | unknown[];
+    defaultValue: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/Binding.js

@@ -0,0 +1,23 @@
+import { Text, computed, defineComponent, h } from 'vue';
+export const Binding = defineComponent({
+    name: 'Binding',
+    props: {
+        value: {
+            type: [String, Number, Boolean, Object, Array],
+            default: undefined,
+        },
+        defaultValue: {
+            type: String,
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const rendered = computed(() => {
+            if (props.value !== undefined && props.value !== null) {
+                return typeof props.value === 'object' ? JSON.stringify(props.value) : String(props.value);
+            }
+            return props.defaultValue ?? '';
+        });
+        return () => h(Text, rendered.value);
+    },
+});

package/dist/components/Comark.d.ts

@@ -38,6 +38,10 @@ export interface ComarkProps {
     caret?: boolean | {
         class: string;
     };
+    /**
+     * Additional data to pass to the renderer
+     */
+    data?: Record<string, unknown>;
 }
 type ComarkComponent = ReturnType<typeof defineComponent<ComarkProps>>;
 /**

package/dist/components/Comark.js

@@ -96,6 +96,13 @@ export const Comark = defineComponent({
             type: [Boolean, Object],
             default: false,
         },
+        /**
+         * Additional data to pass to the renderer
+         */
+        data: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     async setup(props, ctx) {
         const markdown = computed(() => {
@@ -123,6 +130,7 @@ export const Comark = defineComponent({
                 componentsManifest: props.componentsManifest,
                 class: props.streaming ? 'comark-stream' : '',
                 caret: props.caret,
+                data: props.data,
             });
         };
     },

package/dist/components/ComarkRenderer.d.ts

@@ -26,6 +26,10 @@ export interface ComarkRendererProps {
     caret?: boolean | {
         class: string;
     };
+    /**
+     * Additional data to pass to the renderer
+     */
+    data?: Record<string, unknown>;
 }
 type ComarkRendererComponent = ReturnType<typeof defineComponent<ComarkRendererProps>>;
 /**

package/dist/components/ComarkRenderer.js

@@ -1,10 +1,8 @@
 import { computed, defineAsyncComponent, defineComponent, getCurrentInstance, h, inject, onErrorCaptured, ref, toRaw } from 'vue';
 import { findLastTextNodeAndAppendNode, getCaret } from "../utils/caret.js";
+import { pascalCase, resolveAttributes } from 'comark/utils';
 // Cache for dynamically resolved components
 const asyncComponentCache = new Map();
-const camelize = (s) => s.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : '');
-const capitalize = (s) => s.charAt(0).toUpperCase() + s.slice(1);
-const pascalCase = (str) => capitalize(camelize(str));
 /**
  * Helper to get tag from a ComarkNode
  */
@@ -23,21 +21,6 @@ function getProps(node) {
     }
     return {};
 }
-function parsePropValue(value) {
-    if (value === 'true')
-        return true;
-    if (value === 'false')
-        return false;
-    if (value === 'null')
-        return null;
-    try {
-        return JSON.parse(value);
-    }
-    catch {
-        // noop
-    }
-    return value;
-}
 /**
  * Helper to get children from a ComarkNode
  */
@@ -74,7 +57,7 @@ function resolveComponent(tag, components, componentsManifest) {
 /**
  * Render a single Comark node to Vue VNode
  */
-function renderNode(node, components = {}, key, componentsManifest, parent) {
+function renderNode(node, components = {}, key, componentsManifest, parent, renderData = { frontmatter: {}, meta: {}, data: {}, props: {} }) {
     // Handle text nodes (strings)
     if (typeof node === 'string') {
         return node;
@@ -97,21 +80,16 @@ function renderNode(node, components = {}, key, componentsManifest, parent) {
             }
         }
         const component = customComponent || tag;
-        // Prepare props
-        // Prepare props — use for...in instead of Object.entries() to avoid intermediate array allocation
+        // Resolve `:prefix` bindings and let Vue-specific attribute mapping run
+        // on top (e.g. `className` → `class`).
+        const resolved = resolveAttributes(nodeProps, renderData, { parseJson: true });
         const props = {};
-        for (const k in nodeProps) {
-            if (k === '$') {
-                continue;
-            }
+        for (const k in resolved) {
             if (k === 'className') {
-                props.class = nodeProps[k];
-            }
-            else if (k.charCodeAt(0) === 58 /* ':' */) {
-                props[k.substring(1)] = parsePropValue(nodeProps[k]);
+                props.class = resolved[k];
             }
             else {
-                props[k] = nodeProps[k];
+                props[k] = resolved[k];
             }
         }
         // @ts-expect-error - component might be a Vue component
@@ -125,6 +103,11 @@ function renderNode(node, components = {}, key, componentsManifest, parent) {
         if (node.length === 2) {
             return h(component, props);
         }
+        // Only shadow the parent's `props` scope when the current element has its
+        // own attributes. Bare wrappers (`<p>`, `<ul>`, `<li>`, …) must keep the
+        // parent's scope so bindings like `{{ props.x }}` reach across them.
+        const hasOwnAttrs = Object.keys(resolved).length > 0;
+        const childrenRenderData = hasOwnAttrs ? { ...renderData, props } : renderData;
         // Separate template elements (slots) from regular children
         const slots = {};
         const regularChildren = [];
@@ -154,12 +137,12 @@ function renderNode(node, components = {}, key, componentsManifest, parent) {
                 if (slotName) {
                     const slotChildren = getChildren(child);
                     slots[slotName] = () => slotChildren
-                        .map((slotChild, idx) => renderNode(slotChild, components, idx, componentsManifest, node))
+                        .map((slotChild, idx) => renderNode(slotChild, components, idx, componentsManifest, node, childrenRenderData))
                         .filter((slotChild) => slotChild !== null);
                     continue;
                 }
             }
-            const rendered = renderNode(child, components, i, componentsManifest, node);
+            const rendered = renderNode(child, components, i, componentsManifest, node, childrenRenderData);
             if (rendered !== null) {
                 regularChildren.push(rendered);
             }
@@ -244,6 +227,13 @@ export const ComarkRenderer = defineComponent({
             type: [Boolean, Object],
             default: false,
         },
+        /**
+         * Additional data to pass to the renderer
+         */
+        data: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     async setup(props) {
         const componentErrors = ref(new Set());
@@ -278,8 +268,14 @@ export const ComarkRenderer = defineComponent({
                     nodes.push(caret.value);
                 }
             }
+            const renderData = {
+                frontmatter: props.tree.frontmatter,
+                meta: props.tree.meta,
+                data: props.data || {},
+                props: {},
+            };
             const children = nodes
-                .map((node, index) => renderNode(node, components.value, index, componentManifest))
+                .map((node, index) => renderNode(node, components.value, index, componentManifest, undefined, renderData))
                 .filter((child) => child !== null);
             // Wrap in a fragment
             return h('div', { class: 'comark-content' }, children);

package/dist/components/Mermaid.d.ts

@@ -55,8 +55,8 @@ export declare const Mermaid: import("vue").DefineComponent<import("vue").Extrac
     };
 }>> & Readonly<{}>, {
     class: string;
+    width: string;
     theme: ThemeNames | DiagramColors;
     themeDark: ThemeNames | DiagramColors;
     height: string;
-    width: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/Mermaid.js

@@ -13,7 +13,7 @@ export const Mermaid = defineComponent({
         },
         height: {
             type: String,
-            default: '400px',
+            default: 'auto',
         },
         width: {
             type: String,

package/dist/plugins/binding.d.ts

@@ -0,0 +1,3 @@
+export * from 'comark/plugins/binding';
+export { default } from 'comark/plugins/binding';
+export { Binding } from '../components/Binding.ts';

package/dist/plugins/binding.js

@@ -0,0 +1,3 @@
+export * from 'comark/plugins/binding';
+export { default } from 'comark/plugins/binding';
+export { Binding } from "../components/Binding.js";

package/dist/plugins/breaks.d.ts

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/breaks';
+export { default } from 'comark/plugins/breaks';

package/dist/plugins/breaks.js

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/breaks';
+export { default } from 'comark/plugins/breaks';

package/dist/plugins/footnotes.d.ts

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/footnotes';
+export { default } from 'comark/plugins/footnotes';

package/dist/plugins/footnotes.js

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/footnotes';
+export { default } from 'comark/plugins/footnotes';

package/dist/plugins/punctuation.d.ts

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/punctuation';
+export { default } from 'comark/plugins/punctuation';

package/dist/plugins/punctuation.js

@@ -0,0 +1,2 @@
+export * from 'comark/plugins/punctuation';
+export { default } from 'comark/plugins/punctuation';

package/dist/vite.d.ts

@@ -18,4 +18,6 @@ import type { Plugin } from 'vite';
  * })
  * ```
  */
-export default function comark(): Plugin;
+export default function comark(opts?: {
+    prose?: boolean;
+}): Plugin;

package/dist/vite.js

@@ -5,7 +5,7 @@ import { existsSync } from 'node:fs';
 const runtimeDir = fileURLToPath(new URL('./utils', import.meta.url));
 function viteComarkSlot(node, context) {
     const isVueSlotWithUnwrap = node.tag === 'slot'
-        && node.props.find(p => p.name === 'unwrap' || p.name === 'mdc-wunwrap' || (p.name === 'bind' && p.rawName === ':comark-unwrap'));
+        && node.props.find(p => p.name === 'unwrap' || p.name === 'mdc-unwrap' || (p.name === 'bind' && p.rawName === ':comark-unwrap'));
     if (isVueSlotWithUnwrap) {
         const transform = context.ssr
             ? context.nodeTransforms.find(nt => nt.name === 'ssrTransformSlotOutlet')
@@ -96,7 +96,7 @@ function generateComponentsModule(files) {
  * })
  * ```
  */
-export default function comark() {
+export default function comark(opts = {}) {
     let proseDir;
     let proseFilesCache = null;
     async function resolveProseFiles() {
@@ -146,6 +146,8 @@ export default function comark() {
             return generateComponentsModule(files);
         },
         async transform(code) {
+            if (opts.prose === false)
+                return null;
             if (!code.includes('createApp') || !code.includes('.mount('))
                 return null;
             // Skip if already injected

package/package.json

@@ -1,8 +1,16 @@
 {
   "name": "@comark/vue",
   "type": "module",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "description": "Vue components for Comark",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/comarkdown/comark.git"
+  },
+  "bugs": {
+    "url": "https://github.com/comarkdown/comark/issues"
+  },
+  "homepage": "https://comark.dev/rendering/vue",
   "exports": {
     ".": "./dist/index.js",
     "./vite": "./dist/vite.js",
@@ -21,17 +29,9 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "stub": "node ../../scripts/stub.mjs",
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "test": "vitest run",
-    "prepack": "tsc",
-    "release": "release-it"
-  },
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
-    "katex": "^0.16.33",
+    "katex": "^0.16.45",
     "shiki": "^4.0.0",
     "vue": "^3.5.0"
   },
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "comark": "^0.2.1"
+    "comark": "^0.3.1"
   },
   "devDependencies": {
     "@vue/compiler-core": "^3.5.32",
@@ -55,5 +55,12 @@
     "vite": "^8.0.8",
     "vitest": "^4.1.4",
     "vue": "^3.5.32"
+  },
+  "scripts": {
+    "stub": "node ../../scripts/stub.mjs",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "release": "release-it"
   }
-}
+}