@comark/vue 0.3.1 → 0.4.0

package/README.md

@@ -0,0 +1,104 @@
+<img src="https://github.com/comarkdown/comark/blob/main/assets/banner.jpg" width="100%" alt="Comark banner" />
+
+# @comark/vue
+
+[![npm version](https://img.shields.io/npm/v/@comark/vue?color=black)](https://npmx.dev/@comark/vue)
+[![npm downloads](https://img.shields.io/npm/dm/@comark/vue?color=black)](https://npm.chart.dev/@comark/vue)
+[![CI](https://img.shields.io/github/actions/workflow/status/comarkdown/comark/ci.yml?branch=main&color=black)](https://github.com/comarkdown/comark/actions/workflows/ci.yml)
+[![Documentation](https://img.shields.io/badge/Documentation-black?logo=readme&logoColor=white)](https://comark.dev/rendering/vue)
+[![license](https://img.shields.io/github/license/comarkdown/comark?color=black)](https://github.com/comarkdown/comark/blob/main/LICENSE)
+
+Vue renderer for [Comark](https://comark.dev) — render markdown with custom Vue components, streaming support, and SSR.
+
+## Features
+
+- 🧩 `<Comark>` component for one-shot markdown rendering
+- 🎯 Map any Comark tag to a custom Vue component
+- 🌊 Streaming-friendly with auto-close and caret support
+- 🖥️ SSR-safe, works in Nuxt and Vite
+- 🎨 Optional Vite plugin for compile-time component resolution
+- 🔌 Plugin ecosystem (math, mermaid, highlight, binding…)
+
+## Installation
+
+```bash
+npm install @comark/vue
+# or
+pnpm add @comark/vue
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Comark } from '@comark/vue'
+import math, { Math } from '@comark/vue/plugins/math'
+
+const content = `# Hello\n\nThis is **Comark** in Vue.`
+</script>
+
+<template>
+  <Comark :components="{ math: Math }" :plugins="[math()]">
+    {{ content }}
+  </Comark>
+</template>
+```
+
+### Custom components
+
+```vue
+<script setup lang="ts">
+import { Comark } from '@comark/vue'
+import Alert from './components/Alert.vue'
+</script>
+
+<template>
+  <Comark :components="{ alert: Alert }">{{ content }}</Comark>
+</template>
+```
+
+```mdc
+::alert{type="warning"}
+Heads up!
+::
+```
+
+### Streaming
+
+```vue
+<Comark :streaming="isStreaming" caret>{{ content }}</Comark>
+```
+
+## Using with Vite
+
+`@comark/vue` ships an optional Vite plugin that:
+
+- Enables `<slot unwrap="...">` inside custom markdown components.
+- Auto-registers every `.vue` file under `src/components/prose` (or `components/prose`) as a global component.
+
+```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()],
+})
+```
+
+Pass `comark({ prose: false })` to opt out of the auto-registered prose components.
+
+## Using with Nuxt
+
+For Nuxt, use [`@comark/nuxt`](https://comark.dev/rendering/nuxt) which auto-imports the `<Comark>` component and wires up `~/components/prose` overrides.
+
+## Documentation
+
+Full guide and API reference at [comark.dev/rendering/vue](https://comark.dev/rendering/vue).
+
+## License
+
+Made with ❤️
+
+Published under [MIT License](https://github.com/comarkdown/comark/blob/main/LICENSE).

package/dist/components/Comark.js

@@ -118,9 +118,8 @@ export const Comark = defineComponent({
         });
         const parsed = shallowRef(null);
         const parse = createSerializedParse({ ...props.options, plugins: props.plugins });
-        watch(() => [markdown.value, props.streaming], () => parse(markdown.value, { streaming: props.streaming }).then(result => parsed.value = result));
-        await parse(markdown.value, { streaming: props.streaming })
-            .then(result => parsed.value = result);
+        watch(() => [markdown.value, props.streaming], () => parse(markdown.value, { streaming: props.streaming }).then((result) => (parsed.value = result)));
+        await parse(markdown.value, { streaming: props.streaming }).then((result) => (parsed.value = result));
         return () => {
             // Render using ComarkRenderer
             return h(ComarkRenderer, {

package/dist/components/ComarkRenderer.js

@@ -1,8 +1,14 @@
-import { computed, defineAsyncComponent, defineComponent, getCurrentInstance, h, inject, onErrorCaptured, ref, toRaw } from 'vue';
+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();
+function isPromiseLike(value) {
+    return !!value && typeof value.then === 'function';
+}
+function unwrapComponent(mod) {
+    return mod && typeof mod === 'object' && 'default' in mod ? mod.default : mod;
+}
 /**
  * Helper to get tag from a ComarkNode
  */
@@ -34,20 +40,23 @@ 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]
+    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];
+        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));
+            const resolved = componentsManifest(tag);
+            if (isPromiseLike(resolved)) {
+                asyncComponentCache.set(cacheKey, defineAsyncComponent(() => resolved));
+            }
+            else if (resolved) {
+                asyncComponentCache.set(cacheKey, unwrapComponent(resolved));
             }
         }
         resolvedComponent = asyncComponentCache.get(cacheKey);

package/dist/components/Math.d.ts

@@ -1,4 +1,3 @@
-import 'katex/dist/katex.min.css';
 export declare const Math: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     content: {
         type: StringConstructor;

package/dist/components/Math.js

@@ -1,6 +1,5 @@
 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: {

package/dist/components/Mermaid.js

@@ -86,15 +86,15 @@ export const Mermaid = defineComponent({
         });
         return () => {
             return h('div', {
-                'class': `mermaid ${props.class}`,
-                'style': {
+                class: `mermaid ${props.class}`,
+                style: {
                     display: 'flex',
                     justifyContent: 'center',
                     width: props.width,
                     height: props.height,
                 },
                 'data-error': error.value,
-                'innerHTML': svgContent.value,
+                innerHTML: svgContent.value,
             });
         };
     },

package/dist/index.js

@@ -73,10 +73,7 @@ export function defineComarkComponent(config = {}) {
                 ...parseOptions,
                 ...props.options,
             }));
-            const plugins = computed(() => [
-                ...(config.plugins || []),
-                ...(props.plugins || []),
-            ]);
+            const plugins = computed(() => [...(config.plugins || []), ...(props.plugins || [])]);
             const components = computed(() => ({
                 ...config.components,
                 ...props.components,

package/dist/plugins/syntax.d.ts

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

package/dist/plugins/syntax.js

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

package/dist/utils/node.js

@@ -38,12 +38,12 @@ export function nodeTextContent(node) {
 }
 export function unwrap(vnode, tags = []) {
     if (Array.isArray(vnode)) {
-        return vnode.flatMap(node => unwrap(node, tags));
+        return vnode.flatMap((node) => unwrap(node, tags));
     }
     let result = vnode;
-    if (tags.some(tag => tag === '*' || isTag(vnode, tag))) {
+    if (tags.some((tag) => tag === '*' || isTag(vnode, tag))) {
         result = nodeChildren(vnode) || vnode;
-        if (!Array.isArray(result) && TEXT_TAGS.some(tag => isTag(vnode, tag))) {
+        if (!Array.isArray(result) && TEXT_TAGS.some((tag) => isTag(vnode, tag))) {
             result = [result];
         }
     }
@@ -55,18 +55,20 @@ function _flatUnwrap(vnodes, tags = []) {
         return vnodes;
     }
     return vnodes
-        .flatMap(vnode => _flatUnwrap(unwrap(vnode, [tags[0]]), tags.slice(1)))
-        .filter(vnode => !(isText(vnode) && nodeTextContent(vnode).trim() === ''));
+        .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);
+        tags = tags
+            .split(/[,\s]/)
+            .map((tag) => tag.trim())
+            .filter(Boolean);
     }
     if (!tags.length) {
         return vnodes;
     }
-    return _flatUnwrap(vnodes, tags)
-        .reduce((acc, item) => {
+    return _flatUnwrap(vnodes, tags).reduce((acc, item) => {
         if (isText(item)) {
             if (typeof acc[acc.length - 1] === 'string') {
                 acc[acc.length - 1] += item.children;

package/dist/vite.js

@@ -3,13 +3,18 @@ import { readdir } from 'node:fs/promises';
 import { join, basename } from 'node:path';
 import { existsSync } from 'node:fs';
 const runtimeDir = fileURLToPath(new URL('./utils', import.meta.url));
+function toImportPath(filePath) {
+    return filePath.replace(/\\/g, '/');
+}
 function viteComarkSlot(node, context) {
-    const isVueSlotWithUnwrap = node.tag === 'slot'
-        && node.props.find(p => p.name === 'unwrap' || p.name === 'mdc-unwrap' || (p.name === 'bind' && p.rawName === ':comark-unwrap'));
+    const isVueSlotWithUnwrap = node.tag === 'slot' &&
+        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')
-            : context.nodeTransforms.find(nt => nt.name === 'transformSlotOutlet');
+            ? context.nodeTransforms.find((nt) => nt.name === 'ssrTransformSlotOutlet')
+            : context.nodeTransforms.find((nt) => nt.name === 'transformSlotOutlet');
         return () => {
             node.tag = 'slot';
             node.type = 1;
@@ -20,16 +25,16 @@ function viteComarkSlot(node, context) {
             const importExp = context.ssr
                 ? '{ ssrRenderSlot as _ssrRenderComarkSlot }'
                 : '{ renderSlot as _renderComarkSlot }';
-            if (!context.imports.some(i => String(i.exp) === importExp)) {
+            if (!context.imports.some((i) => String(i.exp) === importExp)) {
                 context.imports.push({
                     exp: importExp,
-                    path: `${runtimeDir}/${context.ssr ? 'ssrSlot' : 'slot'}`,
+                    path: `${toImportPath(runtimeDir)}/${context.ssr ? 'ssrSlot' : 'slot'}`,
                 });
             }
         };
     }
     if (context.nodeTransforms[0]?.name !== 'viteComarkSlot') {
-        const index = context.nodeTransforms.findIndex(f => f.name === 'viteComarkSlot');
+        const index = context.nodeTransforms.findIndex((f) => f.name === 'viteComarkSlot');
         if (index !== -1) {
             const nt = context.nodeTransforms.splice(index, 1);
             context.nodeTransforms.unshift(nt[0]);
@@ -64,7 +69,7 @@ function generateComponentsModule(files) {
     }
     const lines = [];
     for (let i = 0; i < files.length; i++) {
-        lines.push(`import __comp_${i} from ${JSON.stringify(files[i].replace(/\\/g, '/'))}`);
+        lines.push(`import __comp_${i} from ${JSON.stringify(toImportPath(files[i]))}`);
     }
     lines.push('');
     lines.push('export default {');
@@ -122,7 +127,7 @@ export default function comark(opts = {}) {
             if (existsSync(join(config.root, 'components', 'prose'))) {
                 proseDir = join(config.root, 'components', 'prose');
             }
-            const vuePlugin = config.plugins.find(p => p.name === 'vite:vue');
+            const vuePlugin = config.plugins.find((p) => p.name === 'vite:vue');
             if (!vuePlugin) {
                 console.warn('[comark-vue] @vitejs/plugin-vue not found. Make sure vue() is in your plugins.');
                 return;
@@ -156,8 +161,8 @@ export default function comark(opts = {}) {
             const files = await resolveProseFiles();
             if (!files.length)
                 return null;
-            const injected = `import __comarkProse from ${JSON.stringify(VIRTUAL_COMPONENTS_ID)};\n`
-                + code.replace(/\.mount\s*\(/, '.use(__comarkProse).mount(');
+            const injected = `import __comarkProse from ${JSON.stringify(VIRTUAL_COMPONENTS_ID)};\n` +
+                code.replace(/\.mount\s*\(/, '.use(__comarkProse).mount(');
             return { code: injected, map: null };
         },
         configureServer(server) {

package/package.json

@@ -1,16 +1,31 @@
 {
   "name": "@comark/vue",
-  "type": "module",
-  "version": "0.3.1",
-  "description": "Vue components for Comark",
+  "version": "0.4.0",
+  "description": "Vue renderer for Comark (Components in Markdown)",
+  "keywords": [
+    "comark",
+    "markdown",
+    "mdc",
+    "renderer",
+    "streaming",
+    "vue"
+  ],
+  "homepage": "https://comark.dev/rendering/vue",
+  "bugs": {
+    "url": "https://github.com/comarkdown/comark/issues"
+  },
   "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",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./vite": "./dist/vite.js",
@@ -20,15 +35,19 @@
     "./render": "./dist/render.js",
     "./components/*": "./dist/components/*.js"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "comark": "^0.4.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-core": "^3.5.32",
+    "@vue/server-renderer": "^3.5.32",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4",
+    "vue": "^3.5.32"
+  },
   "peerDependencies": {
     "beautiful-mermaid": "^1.1.3",
     "katex": "^0.16.45",
@@ -46,16 +65,6 @@
       "optional": true
     }
   },
-  "dependencies": {
-    "comark": "^0.3.1"
-  },
-  "devDependencies": {
-    "@vue/compiler-core": "^3.5.32",
-    "@vue/server-renderer": "^3.5.32",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4",
-    "vue": "^3.5.32"
-  },
   "scripts": {
     "stub": "node ../../scripts/stub.mjs",
     "build": "tsc",