@comark/vue 0.1.1 → 0.2.0

package/dist/components/Comark.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h, shallowRef, watch } from 'vue';
-import { createParse } from 'comark';
+import { createSerializedParse } from 'comark';
 import { ComarkRenderer } from "./ComarkRenderer.js";
 /**
  * Comark component
@@ -110,12 +110,10 @@ export const Comark = defineComponent({
             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();
+        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);
         return () => {
             // Render using ComarkRenderer
             return h(ComarkRenderer, {
@@ -123,7 +121,7 @@ export const Comark = defineComponent({
                 components: props.components,
                 streaming: props.streaming,
                 componentsManifest: props.componentsManifest,
-                class: `comark-content ${props.streaming ? 'comark-stream' : ''}`,
+                class: props.streaming ? 'comark-stream' : '',
                 caret: props.caret,
             });
         };

package/dist/components/Mermaid.d.ts

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

package/dist/index.d.ts

@@ -8,11 +8,19 @@ interface DefineComarkComponentOptions extends ParseOptions {
     extends?: typeof Comark;
     name?: string;
     components?: Record<string, any>;
+    /**
+     * Additional classes for the wrapper div
+     */
+    class?: string;
 }
 interface DefineComarkRendererOptions {
     extends?: typeof ComarkRenderer;
     name?: string;
     components?: Record<string, any>;
+    /**
+     * Additional classes for the wrapper div
+     */
+    class?: string;
 }
 export declare function defineComarkComponent(config?: DefineComarkComponentOptions): typeof Comark;
 export declare function defineComarkRendererComponent(config?: DefineComarkRendererOptions): typeof ComarkRenderer;

package/dist/index.js

@@ -92,6 +92,7 @@ export function defineComarkComponent(config = {}) {
                     streaming: props.streaming,
                     summary: props.summary,
                     caret: props.caret,
+                    class: config.class,
                 }, {
                     default: slots.default,
                 });
@@ -155,6 +156,7 @@ export function defineComarkRendererComponent(config = {}) {
                     componentsManifest: props.componentsManifest,
                     streaming: props.streaming,
                     caret: props.caret,
+                    class: config.class,
                 }, {
                     default: slots.default,
                 });

package/dist/utils/caret.js

@@ -1,4 +1,4 @@
-const CARET_TEXT = ' '; // thin space is used to avoid wide spaces between text and caret
+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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comark/vue",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Vue components for Comark",
   "exports": {
     ".": "./dist/index.js",
@@ -30,10 +30,10 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
     "beautiful-mermaid": "^1.1.3",
     "katex": "^0.16.33",
-    "shiki": "^3.22.0"
+    "shiki": "^3.22.0",
+    "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
     "shiki": {
@@ -47,10 +47,12 @@
     }
   },
   "dependencies": {
-    "comark": "^0.1.1"
+    "comark": "^0.2.0"
   },
   "devDependencies": {
+    "@vue/compiler-core": "^3.5.31",
     "@vue/server-renderer": "^3.5.30",
+    "vite": "^8.0.2",
     "vitest": "^4.1.1",
     "vue": "^3.5.30"
   }