@comark/vue 0.1.0

package/dist/components/Mermaid.js

@@ -0,0 +1,101 @@
+import { defineComponent, h, ref, onMounted, watch, computed } from 'vue';
+import { renderMermaidSVG, THEMES } from 'beautiful-mermaid';
+export const Mermaid = defineComponent({
+    name: 'Mermaid',
+    props: {
+        content: {
+            type: String,
+            required: true,
+        },
+        class: {
+            type: String,
+            default: '',
+        },
+        height: {
+            type: String,
+            default: '400px',
+        },
+        width: {
+            type: String,
+            default: '100%',
+        },
+        theme: {
+            type: [String, Object],
+            default: undefined,
+        },
+        themeDark: {
+            type: [String, Object],
+            default: undefined,
+        },
+    },
+    setup(props) {
+        const svgContent = ref('');
+        const error = ref(null);
+        const isDark = ref(false);
+        const beautifulTheme = computed(() => {
+            // Determine which theme to use based on dark mode and props
+            const isDarkMode = isDark.value;
+            // Get theme-dark prop (using bracket notation for kebab-case prop)
+            const themeDarkProp = props.themeDark;
+            // If dark mode, prefer theme-dark, otherwise prefer theme
+            const themeProp = isDarkMode ? themeDarkProp : props.theme;
+            let theme;
+            if (typeof themeProp === 'string') {
+                theme = THEMES[themeProp];
+            }
+            else if (typeof themeProp === 'object') {
+                theme = themeProp;
+            }
+            // Fallback to default themes if no prop is set
+            if (!theme) {
+                theme = THEMES[isDarkMode ? 'tokyo-night' : 'tokyo-light'];
+            }
+            return theme;
+        });
+        const renderDiagram = () => {
+            try {
+                error.value = null;
+                const svg = renderMermaidSVG(props.content, beautifulTheme.value);
+                svgContent.value = svg;
+            }
+            catch (err) {
+                error.value = err instanceof Error ? err.message : 'Failed to render diagram';
+            }
+        };
+        onMounted(() => {
+            const htmlEl = document.querySelector('html');
+            if (htmlEl) {
+                isDark.value = htmlEl.classList.contains('dark') || false;
+                // Watch for class changes on HTML element
+                const observer = new MutationObserver(() => {
+                    const newIsDark = htmlEl.classList.contains('dark');
+                    if (newIsDark !== isDark.value) {
+                        isDark.value = newIsDark;
+                    }
+                });
+                observer.observe(htmlEl, {
+                    attributes: true,
+                    attributeFilter: ['class'],
+                });
+            }
+            renderDiagram();
+        });
+        // Watch for theme changes (including isDark changes that affect beautifulTheme)
+        watch([beautifulTheme, () => props.content, isDark, () => props.theme, () => props.themeDark], () => {
+            renderDiagram();
+        });
+        return () => {
+            return h('div', {
+                'class': `mermaid ${props.class}`,
+                'style': {
+                    display: 'flex',
+                    justifyContent: 'center',
+                    width: props.width,
+                    height: props.height,
+                },
+                'data-error': error.value,
+                'innerHTML': svgContent.value,
+            });
+        };
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { Comark } from './components/Comark.ts';
+import type { ParseOptions } from 'comark';
+import { ComarkRenderer } from './components/ComarkRenderer.ts';
+export { ComarkRenderer } from './components/ComarkRenderer.ts';
+export { Comark } from './components/Comark.ts';
+export type * from 'comark';
+interface DefineComarkComponentOptions extends ParseOptions {
+    extends?: typeof Comark;
+    name?: string;
+    components?: Record<string, any>;
+}
+interface DefineComarkRendererOptions {
+    extends?: typeof ComarkRenderer;
+    name?: string;
+    components?: Record<string, any>;
+}
+export declare function defineComarkComponent(config?: DefineComarkComponentOptions): typeof Comark;
+export declare function defineComarkRendererComponent(config?: DefineComarkRendererOptions): typeof ComarkRenderer;

package/dist/index.js

@@ -0,0 +1,164 @@
+import { computed, defineComponent, h } from 'vue';
+import { Comark } from "./components/Comark.js";
+import { ComarkRenderer } from "./components/ComarkRenderer.js";
+export { ComarkRenderer } from "./components/ComarkRenderer.js";
+export { Comark } from "./components/Comark.js";
+export function defineComarkComponent(config = {}) {
+    const { name, ...parseOptions } = config;
+    return defineComponent({
+        name: name ?? 'ComarkComponent',
+        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,
+            },
+        },
+        setup(props, { slots }) {
+            const options = computed(() => ({
+                ...parseOptions,
+                ...props.options,
+            }));
+            const plugins = computed(() => [
+                ...(config.plugins || []),
+                ...(props.plugins || []),
+            ]);
+            const components = computed(() => ({
+                ...config.components,
+                ...props.components,
+            }));
+            return () => {
+                const component = config.extends || Comark;
+                return h(component, {
+                    markdown: props.markdown,
+                    options: options.value,
+                    plugins: plugins.value,
+                    components: components.value,
+                    componentsManifest: props.componentsManifest,
+                    streaming: props.streaming,
+                    summary: props.summary,
+                    caret: props.caret,
+                }, {
+                    default: slots.default,
+                });
+            };
+        },
+    });
+}
+export function defineComarkRendererComponent(config = {}) {
+    return defineComponent({
+        name: config.name ?? 'ComarkRendererComponent',
+        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
+             */
+            caret: {
+                type: [Boolean, Object],
+                default: false,
+            },
+        },
+        setup(props, { slots }) {
+            const components = computed(() => ({
+                ...config.components,
+                ...props.components,
+            }));
+            return () => {
+                const component = config.extends || ComarkRenderer;
+                return h(component, {
+                    tree: props.tree,
+                    components: components.value,
+                    componentsManifest: props.componentsManifest,
+                    streaming: props.streaming,
+                    caret: props.caret,
+                }, {
+                    default: slots.default,
+                });
+            };
+        },
+    });
+}

package/dist/parse.d.ts

@@ -0,0 +1 @@
+export * from 'comark/parse';

package/dist/parse.js

@@ -0,0 +1 @@
+export * from 'comark/parse';

package/dist/plugins/alert.d.ts

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

package/dist/plugins/alert.js

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

package/dist/plugins/emoji.d.ts

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

package/dist/plugins/emoji.js

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

package/dist/plugins/headings.d.ts

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

package/dist/plugins/headings.js

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

package/dist/plugins/highlight.d.ts

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

package/dist/plugins/highlight.js

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

package/dist/plugins/math.d.ts

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

package/dist/plugins/math.js

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

package/dist/plugins/mermaid.d.ts

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

package/dist/plugins/mermaid.js

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

package/dist/plugins/security.d.ts

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

package/dist/plugins/security.js

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

package/dist/plugins/summary.d.ts

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

package/dist/plugins/summary.js

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

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

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

package/dist/plugins/task-list.js

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

package/dist/plugins/toc.d.ts

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

package/dist/plugins/toc.js

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

package/dist/render.d.ts

@@ -0,0 +1 @@
+export * from 'comark/render';

package/dist/render.js

@@ -0,0 +1 @@
+export * from 'comark/render';

package/dist/utils/caret.d.ts

@@ -0,0 +1,7 @@
+import type { ComarkElement } from 'comark';
+interface CaretOptions {
+    class?: string;
+}
+export declare function getCaret(options: boolean | CaretOptions): ComarkElement | null;
+export declare function findLastTextNodeAndAppendNode(parent: ComarkElement, nodeToAppend: ComarkElement): boolean;
+export {};

package/dist/utils/caret.js

@@ -0,0 +1,38 @@
+const CARET_TEXT = ' '; // thin space is used to avoid wide spaces between text and caret
+const CARET_STYLE = 'background-color: currentColor; display: inline-block; margin-left: 0.25rem; margin-right: 0.25rem; animation: pulse 0.75s cubic-bezier(0.4,0,0.6,1) infinite;';
+export function getCaret(options) {
+    if (options === true) {
+        return ['span', { key: 'stream-caret', style: CARET_STYLE }, CARET_TEXT];
+    }
+    if (typeof options === 'object') {
+        const userClass = options?.class || '';
+        return [
+            'span',
+            {
+                key: 'stream-caret',
+                style: CARET_STYLE,
+                ...(userClass ? { class: userClass } : {}),
+            },
+            CARET_TEXT,
+        ];
+    }
+    return null;
+}
+export function findLastTextNodeAndAppendNode(parent, nodeToAppend) {
+    // Traverse nodes backwards to find the last text node
+    for (let i = parent.length - 1; i >= 2; i--) {
+        const node = parent[i];
+        if (typeof node === 'string' && parent[1]?.key !== 'stream-caret') {
+            // Found a text node - insert stream indicator after it
+            parent.push(nodeToAppend);
+            return true;
+        }
+        if (Array.isArray(node)) {
+            // This is an element node - recursively check its children
+            if (findLastTextNodeAndAppendNode(node, nodeToAppend)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export * from 'comark/utils';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export * from 'comark/utils';

package/dist/utils/node.d.ts

@@ -0,0 +1,8 @@
+import type { VNode } from 'vue';
+export declare const TEXT_TAGS: string[];
+export declare function isTag(vnode: VNode, tag: string | symbol): boolean;
+export declare function isText(vnode: VNode): boolean;
+export declare function nodeChildren(node: VNode): any;
+export declare function nodeTextContent(node: VNode): string;
+export declare function unwrap(vnode: VNode, tags?: string[]): VNode | VNode[];
+export declare function flatUnwrap(vnodes: VNode | VNode[], tags?: string | string[]): Array<VNode | string> | VNode;

package/dist/utils/node.js

@@ -0,0 +1,83 @@
+export const TEXT_TAGS = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'];
+export function isTag(vnode, tag) {
+    if (vnode.type === tag) {
+        return true;
+    }
+    if (typeof vnode.type === 'object' && vnode.type.tag === tag) {
+        return true;
+    }
+    return false;
+}
+export function isText(vnode) {
+    return isTag(vnode, 'text') || isTag(vnode, Symbol.for('v-txt'));
+}
+export function nodeChildren(node) {
+    if (Array.isArray(node.children) || typeof node.children === 'string') {
+        return node.children;
+    }
+    if (typeof node.children?.default === 'function') {
+        return node.children.default();
+    }
+    return [];
+}
+export function nodeTextContent(node) {
+    if (!node) {
+        return '';
+    }
+    if (Array.isArray(node)) {
+        return node.map(nodeTextContent).join('');
+    }
+    if (isText(node)) {
+        return node.children || '';
+    }
+    const children = nodeChildren(node);
+    if (Array.isArray(children)) {
+        return children.map(nodeTextContent).filter(Boolean).join('');
+    }
+    return '';
+}
+export function unwrap(vnode, tags = []) {
+    if (Array.isArray(vnode)) {
+        return vnode.flatMap(node => unwrap(node, tags));
+    }
+    let result = vnode;
+    if (tags.some(tag => tag === '*' || isTag(vnode, tag))) {
+        result = nodeChildren(vnode) || vnode;
+        if (!Array.isArray(result) && TEXT_TAGS.some(tag => isTag(vnode, tag))) {
+            result = [result];
+        }
+    }
+    return result;
+}
+function _flatUnwrap(vnodes, tags = []) {
+    vnodes = Array.isArray(vnodes) ? vnodes : [vnodes];
+    if (!tags.length) {
+        return vnodes;
+    }
+    return vnodes
+        .flatMap(vnode => _flatUnwrap(unwrap(vnode, [tags[0]]), tags.slice(1)))
+        .filter(vnode => !(isText(vnode) && nodeTextContent(vnode).trim() === ''));
+}
+export function flatUnwrap(vnodes, tags = []) {
+    if (typeof tags === 'string') {
+        tags = tags.split(/[,\s]/).map(tag => tag.trim()).filter(Boolean);
+    }
+    if (!tags.length) {
+        return vnodes;
+    }
+    return _flatUnwrap(vnodes, tags)
+        .reduce((acc, item) => {
+        if (isText(item)) {
+            if (typeof acc[acc.length - 1] === 'string') {
+                acc[acc.length - 1] += item.children;
+            }
+            else {
+                acc.push(item.children);
+            }
+        }
+        else {
+            acc.push(item);
+        }
+        return acc;
+    }, []);
+}

package/dist/utils/slot.d.ts

@@ -0,0 +1,3 @@
+export declare const renderSlot: (slots: Record<string, any>, name: string, props: any, ...rest: any[]) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>;

package/dist/utils/slot.js

@@ -0,0 +1,8 @@
+import { renderSlot as _renderSlot } from 'vue';
+import { flatUnwrap } from "./node.js";
+export const renderSlot = (slots, name, props, ...rest) => {
+    if (slots[name]) {
+        return _renderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap || props?.mdcUnwrap || props?.comarkUnwrap) }, name, props, ...rest);
+    }
+    return _renderSlot(slots, name, props, ...rest);
+};

package/dist/utils/ssrSlot.d.ts

@@ -0,0 +1 @@
+export declare const ssrRenderSlot: (slots: Record<string, any>, name: string, props: any, fallbackRenderFn: (() => void) | null, push: any, parentComponent: any, slotScopeId?: string | undefined) => void;

package/dist/utils/ssrSlot.js

@@ -0,0 +1,8 @@
+import { ssrRenderSlot as _ssrRenderSlot } from 'vue/server-renderer';
+import { flatUnwrap } from "./node.js";
+export const ssrRenderSlot = (slots, name, props, fallbackRenderFn, push, parentComponent, slotScopeId) => {
+    if (slots[name]) {
+        return _ssrRenderSlot({ ...slots, [name]: () => flatUnwrap(slots[name](), props?.unwrap || props?.mdcUnwrap || props?.comarkUnwrap) }, name, props, fallbackRenderFn, push, parentComponent, slotScopeId);
+    }
+    return _ssrRenderSlot(slots, name, props, fallbackRenderFn, push, parentComponent, slotScopeId);
+};

package/dist/vite.d.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vite';
+/**
+ * Vite plugin for @comark/vue.
+ *
+ * - Adds `<slot unwrap="...">` support inside custom markdown components.
+ * - Auto-registers every `.vue` file in `src/components/prose` as a global
+ *   component
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite'
+ * import vue from '@vitejs/plugin-vue'
+ * import comark from '@comark/vue/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), comark()],
+ * })
+ * ```
+ */
+export default function comark(): Plugin;