@comark/vue 0.1.0

package/dist/components/Comark.d.ts

@@ -0,0 +1,77 @@
+import { defineComponent } from 'vue';
+import type { ParseOptions, ComponentManifest } from 'comark';
+/**
+ * Props for the Comark component
+ */
+export interface ComarkProps {
+    /**
+     * The markdown content to parse and render
+     */
+    markdown?: string;
+    /**
+     * Parser options (excluding plugins)
+     */
+    options?: Exclude<ParseOptions, 'plugins'>;
+    /**
+     * Additional plugins to use
+     */
+    plugins?: ParseOptions['plugins'];
+    /**
+     * Custom component mappings for element tags
+     */
+    components?: Record<string, any>;
+    /**
+     * Dynamic component resolver function
+     */
+    componentsManifest?: ComponentManifest;
+    /**
+     * Enable streaming mode with stream-specific components
+     */
+    streaming?: boolean;
+    /**
+     * If document has a <!-- more --> comment, only render the content before the comment
+     */
+    summary?: boolean;
+    /**
+     * If caret is true, a caret will be appended to the last text node in the tree
+     */
+    caret?: boolean | {
+        class: string;
+    };
+}
+type ComarkComponent = ReturnType<typeof defineComponent<ComarkProps>>;
+/**
+ * Comark component
+ *
+ * Comark component that accepts markdown as a string prop,
+ * parses it, and renders it.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <Comark :markdown="content" :components="customComponents" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { Comark } from '@comark/vue'
+ * import CustomHeading from './CustomHeading.vue'
+ *
+ * const content = `
+ * # Hello World
+ *
+ * This is a **markdown** document with components.
+ *
+ * ::alert{type="info"}
+ * This is an alert component
+ * ::
+ * `
+ *
+ * const customComponents = {
+ *   h1: CustomHeading,
+ *   alert: AlertComponent,
+ * }
+ * </script>
+ * ```
+ */
+export declare const Comark: ComarkComponent;
+export {};

package/dist/components/Comark.js

@@ -0,0 +1,131 @@
+import { computed, defineComponent, h, shallowRef, watch } from 'vue';
+import { createParse } from 'comark';
+import { ComarkRenderer } from "./ComarkRenderer.js";
+/**
+ * Comark component
+ *
+ * Comark component that accepts markdown as a string prop,
+ * parses it, and renders it.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <Comark :markdown="content" :components="customComponents" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { Comark } from '@comark/vue'
+ * import CustomHeading from './CustomHeading.vue'
+ *
+ * const content = `
+ * # Hello World
+ *
+ * This is a **markdown** document with components.
+ *
+ * ::alert{type="info"}
+ * This is an alert component
+ * ::
+ * `
+ *
+ * const customComponents = {
+ *   h1: CustomHeading,
+ *   alert: AlertComponent,
+ * }
+ * </script>
+ * ```
+ */
+export const Comark = defineComponent({
+    name: 'Comark',
+    props: {
+        /**
+         * The markdown content to parse and render
+         */
+        markdown: {
+            type: String,
+            default: undefined,
+        },
+        /**
+         * Parser options
+         */
+        options: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * Additional plugins to use
+         */
+        plugins: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         * Custom component mappings for element tags
+         * Key: tag name (e.g., 'h1', 'p', 'MyComponent')
+         * Value: Vue component
+         */
+        components: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * Dynamic component resolver function
+         * Used to resolve components that aren't in the components map
+         */
+        componentsManifest: {
+            type: Function,
+            default: undefined,
+        },
+        /**
+         * Enable streaming mode with stream-specific components
+         */
+        streaming: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * If document has a <!-- more --> comment, only render the content before the comment
+         */
+        summary: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * If caret is true, a caret will be appended to the last text node in the tree
+         */
+        caret: {
+            type: [Boolean, Object],
+            default: false,
+        },
+    },
+    async setup(props, ctx) {
+        const markdown = computed(() => {
+            let result = props.markdown;
+            const childrent = ctx.slots.default?.();
+            if (childrent && childrent.length > 0 && typeof childrent[0].children === 'string') {
+                result = childrent[0].children;
+            }
+            if (props.summary) {
+                result = result?.split('<!-- more -->')[0];
+            }
+            return (result || '').trim();
+        });
+        const parsed = shallowRef(null);
+        const parse = createParse({ ...props.options, plugins: props.plugins });
+        async function parseMarkdown() {
+            parsed.value = await parse(markdown.value, { streaming: props.streaming });
+        }
+        watch(markdown, parseMarkdown);
+        await parseMarkdown();
+        return () => {
+            // Render using ComarkRenderer
+            return h(ComarkRenderer, {
+                tree: parsed.value || { nodes: [], frontmatter: {}, meta: {} },
+                components: props.components,
+                streaming: props.streaming,
+                componentsManifest: props.componentsManifest,
+                class: `comark-content ${props.streaming ? 'comark-stream' : ''}`,
+                caret: props.caret,
+            });
+        };
+    },
+});

package/dist/components/ComarkRenderer.d.ts

@@ -0,0 +1,57 @@
+import type { ComponentManifest, ComarkTree } from 'comark';
+import { defineComponent } from 'vue';
+/**
+ * Props for the ComarkRenderer component
+ */
+export interface ComarkRendererProps {
+    /**
+     * The Comark tree to render
+     */
+    tree: ComarkTree;
+    /**
+     * Custom component mappings for element tags
+     */
+    components?: Record<string, any>;
+    /**
+     * Dynamic component resolver function
+     */
+    componentsManifest?: ComponentManifest;
+    /**
+     * Enable streaming mode with enhanced components
+     */
+    streaming?: boolean;
+    /**
+     * If caret is true, a caret will be appended to the last text node in the tree
+     */
+    caret?: boolean | {
+        class: string;
+    };
+}
+type ComarkRendererComponent = ReturnType<typeof defineComponent<ComarkRendererProps>>;
+/**
+ * ComarkRenderer component
+ *
+ * Renders a Comark tree to Vue components/HTML.
+ * Supports custom component mapping for element tags.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ComarkTree :tree="comarktree" :components="customComponents" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { ComarkRenderer } from '@comark/vue'
+ * import CustomHeading from './CustomHeading.vue'
+ *
+ * const customComponents = {
+ *   h1: CustomHeading,
+ *   h2: CustomHeading,
+ * }
+ *
+ * const comarktree = await parse(`This is **markdown** with components.`)
+ * </script>
+ * ```
+ */
+export declare const ComarkRenderer: ComarkRendererComponent;
+export {};

package/dist/components/ComarkRenderer.js

@@ -0,0 +1,288 @@
+import { computed, defineAsyncComponent, defineComponent, getCurrentInstance, h, inject, onErrorCaptured, ref, toRaw } from 'vue';
+import { findLastTextNodeAndAppendNode, getCaret } from "../utils/caret.js";
+// 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
+ */
+function getTag(node) {
+    if (Array.isArray(node) && node.length >= 1) {
+        return node[0];
+    }
+    return null;
+}
+/**
+ * Helper to get props from a ComarkNode
+ */
+function getProps(node) {
+    if (Array.isArray(node) && node.length >= 2) {
+        return node[1] || {};
+    }
+    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
+ */
+function getChildren(node) {
+    if (Array.isArray(node) && node.length > 2) {
+        return node.slice(2);
+    }
+    return [];
+}
+function resolveComponent(tag, components, componentsManifest) {
+    const appComponents = getCurrentInstance()?.appContext?.components;
+    const pascalTag = pascalCase(tag);
+    const proseTag = `Prose${pascalTag}`;
+    let resolvedComponent = components[proseTag]
+        || components[tag]
+        || components[pascalTag]
+        // If the component is not found in the components map, try to find it in the app context
+        || appComponents?.[proseTag]
+        || appComponents?.[pascalTag];
+    // If not in components map and manifest is provided, try dynamic resolution
+    if (!resolvedComponent && componentsManifest) {
+        // Check cache first to avoid creating duplicate async components
+        const cacheKey = tag;
+        if (!asyncComponentCache.has(cacheKey)) {
+            const promise = componentsManifest(tag);
+            if (promise) {
+                asyncComponentCache.set(cacheKey, defineAsyncComponent(() => promise));
+            }
+        }
+        resolvedComponent = asyncComponentCache.get(cacheKey);
+    }
+    return resolvedComponent;
+}
+/**
+ * Render a single Comark node to Vue VNode
+ */
+function renderNode(node, components = {}, key, componentsManifest, parent) {
+    // Handle text nodes (strings)
+    if (typeof node === 'string') {
+        return node;
+    }
+    // Handle element nodes (arrays)
+    if (Array.isArray(node)) {
+        const tag = getTag(node);
+        if (!tag)
+            return null;
+        const nodeProps = getProps(node);
+        const children = getChildren(node);
+        // Check if there's a custom component for this tag
+        let customComponent;
+        if (parent?.[0] !== 'pre') {
+            if (nodeProps.as) {
+                customComponent = resolveComponent(nodeProps.as, components, componentsManifest);
+            }
+            if (!customComponent) {
+                customComponent = resolveComponent(tag, components, componentsManifest);
+            }
+        }
+        const component = customComponent || tag;
+        // Prepare props
+        // Prepare props — use for...in instead of Object.entries() to avoid intermediate array allocation
+        const props = {};
+        for (const k in nodeProps) {
+            if (k === '$') {
+                continue;
+            }
+            if (k === 'className') {
+                props.class = nodeProps[k];
+            }
+            else if (k.charCodeAt(0) === 58 /* ':' */) {
+                props[k.substring(1)] = parsePropValue(nodeProps[k]);
+            }
+            else {
+                props[k] = nodeProps[k];
+            }
+        }
+        // @ts-expect-error - component might be a Vue component
+        if (component?.props?.__node || component?.__asyncResolved?.props?.__node) {
+            props.__node = node;
+        }
+        // Add key if provided
+        if (key !== undefined) {
+            props.key = key;
+        }
+        if (node.length === 2) {
+            return h(component, props);
+        }
+        // Separate template elements (slots) from regular children
+        const slots = {};
+        const regularChildren = [];
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (child === undefined || child === null)
+                continue;
+            // Check if this is a slot template (array with tag 'template')
+            const childTag = getTag(child);
+            const childProps = getProps(child);
+            if (childTag === 'template' && childProps) {
+                // Find the slot name from props
+                // Support both { name: 'title' } and { '#title': '' } formats
+                let slotName;
+                if (childProps.name) {
+                    slotName = childProps.name;
+                }
+                else {
+                    // Use for...in instead of Object.keys().find() — avoids intermediate array
+                    for (const pk in childProps) {
+                        if (pk.startsWith('v-slot:')) {
+                            slotName = pk.substring(7);
+                            break;
+                        }
+                    }
+                }
+                if (slotName) {
+                    const slotChildren = getChildren(child);
+                    slots[slotName] = () => slotChildren
+                        .map((slotChild, idx) => renderNode(slotChild, components, idx, componentsManifest, node))
+                        .filter((slotChild) => slotChild !== null);
+                    continue;
+                }
+            }
+            const rendered = renderNode(child, components, i, componentsManifest, node);
+            if (rendered !== null) {
+                regularChildren.push(rendered);
+            }
+        }
+        // If using a custom component, pass slots
+        if (customComponent) {
+            // Always include default slot if there are regular children
+            if (regularChildren.length > 0) {
+                slots.default = () => regularChildren;
+            }
+            return h(component, props, slots);
+        }
+        // For native HTML tags, pass children directly (ignore slot templates)
+        return h(component, props, regularChildren);
+    }
+    return null;
+}
+/**
+ * ComarkRenderer component
+ *
+ * Renders a Comark tree to Vue components/HTML.
+ * Supports custom component mapping for element tags.
+ *
+ * @example
+ * ```vue
+ * <template>
+ *   <ComarkTree :tree="comarktree" :components="customComponents" />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import { ComarkRenderer } from '@comark/vue'
+ * import CustomHeading from './CustomHeading.vue'
+ *
+ * const customComponents = {
+ *   h1: CustomHeading,
+ *   h2: CustomHeading,
+ * }
+ *
+ * const comarktree = await parse(`This is **markdown** with components.`)
+ * </script>
+ * ```
+ */
+export const ComarkRenderer = defineComponent({
+    name: 'ComarkRenderer',
+    props: {
+        /**
+         * The Comark tree to render
+         */
+        tree: {
+            type: Object,
+            required: true,
+        },
+        /**
+         * Custom component mappings for element tags
+         * Key: tag name (e.g., 'h1', 'p', 'MyComponent')
+         * Value: Vue component
+         */
+        components: {
+            type: Object,
+            default: () => ({}),
+        },
+        /**
+         * Dynamic component resolver function
+         * Used to resolve components that aren't in the components map
+         */
+        componentsManifest: {
+            type: Function,
+            default: undefined,
+        },
+        /**
+         * Enable streaming mode with stream-specific components
+         */
+        streaming: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * If caret is true, a caret will be appended to the last text node in the tree
+         * If caret is an object, it will be appended to the last text node in the tree with the given class
+         */
+        caret: {
+            type: [Boolean, Object],
+            default: false,
+        },
+    },
+    async setup(props) {
+        const componentErrors = ref(new Set());
+        // Capture errors from child components (e.g., during streaming when props are incomplete)
+        onErrorCaptured((_err, instance, _info) => {
+            // Get component name from instance
+            const componentName = instance?.$?.type?.name || instance?.type?.name || 'unknown';
+            // Track failed component to prevent re-rendering during streaming
+            componentErrors.value.add(componentName);
+            // Prevent error from propagating (don't crash the app during streaming)
+            return false;
+        });
+        const comark = inject('comark', { components: {}, componentManifest: () => null });
+        const components = computed(() => ({
+            ...comark?.components,
+            ...props.components,
+        }));
+        const componentManifest = (name) => {
+            let resolved = props.componentsManifest?.(name);
+            if (!resolved) {
+                resolved = comark?.componentManifest(name);
+            }
+            return resolved || null;
+        };
+        const caret = computed(() => getCaret(props.caret || false));
+        return () => {
+            // Render all nodes from the tree value
+            const nodes = toRaw(props.tree.nodes || []) || [];
+            if (props.streaming && caret.value && nodes.length > 0) {
+                const hasStreamCaret = findLastTextNodeAndAppendNode(nodes[nodes.length - 1], caret.value);
+                if (!hasStreamCaret) {
+                    nodes.push(caret.value);
+                }
+            }
+            const children = nodes
+                .map((node, index) => renderNode(node, components.value, index, componentManifest))
+                .filter((child) => child !== null);
+            // Wrap in a fragment
+            return h('div', { class: 'comark-content' }, children);
+        };
+    },
+});

package/dist/components/Math.d.ts

@@ -0,0 +1,33 @@
+import 'katex/dist/katex.min.css';
+export declare const Math: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    __node: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, () => 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<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    __node: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    __node: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/Math.js

@@ -0,0 +1,47 @@
+import { defineComponent, h, computed, watch, ref } from 'vue';
+import katex from 'katex';
+import 'katex/dist/katex.min.css';
+export const Math = defineComponent({
+    name: 'Math',
+    props: {
+        content: {
+            type: String,
+            required: true,
+        },
+        class: {
+            type: String,
+            default: '',
+        },
+        __node: {
+            type: Object,
+            default: () => ({}),
+        },
+    },
+    setup(props) {
+        const isInline = computed(() => {
+            return props.class?.includes('inline');
+        });
+        const mathml = ref('...');
+        watch(() => props.content, () => {
+            try {
+                mathml.value = katex.renderToString(props.content, {
+                    throwOnError: true,
+                    displayMode: !isInline.value,
+                });
+            }
+            catch {
+                // Keep loading state on error
+            }
+        }, { immediate: true });
+        if (isInline.value) {
+            return () => h('span', {
+                class: 'math inline',
+                innerHTML: mathml.value,
+            });
+        }
+        return () => h('div', {
+            class: 'math block',
+            innerHTML: mathml.value,
+        });
+    },
+});

package/dist/components/Mermaid.d.ts

@@ -0,0 +1,62 @@
+import type { PropType } from 'vue';
+import { type DiagramColors } from 'beautiful-mermaid';
+import type { ThemeNames } from 'comark/plugins/mermaid';
+export declare const Mermaid: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: PropType<ThemeNames | DiagramColors>;
+        default: undefined;
+    };
+    themeDark: {
+        type: PropType<ThemeNames | DiagramColors>;
+        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<{
+    content: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    theme: {
+        type: PropType<ThemeNames | DiagramColors>;
+        default: undefined;
+    };
+    themeDark: {
+        type: PropType<ThemeNames | DiagramColors>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+    height: string;
+    width: string;
+    theme: ThemeNames | DiagramColors;
+    themeDark: ThemeNames | DiagramColors;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;