@oiij/markdown-it 0.0.10 → 0.0.11

package/dist/index.d.mts

@@ -1,19 +1,21 @@
 import markdownIt, { Options } from "markdown-it";
 import * as vue0 from "vue";
-import { Ref, TemplateRef } from "vue";
+import { MaybeRefOrGetter, TemplateRef } from "vue";
 
 //#region src/index.d.ts
-type MarkDownItOptions = Options & {
+type UseMarkDownItOptions = {
+  value?: MaybeRefOrGetter<string>;
   manual?: boolean;
   domPurify?: boolean;
+  markdownItOptions?: Options;
 };
-declare function useMarkdownIt(templateRef?: TemplateRef<HTMLElement>, defaultValue?: Ref<string> | string, options?: MarkDownItOptions): {
-  value: Ref<string | undefined, string | undefined>;
-  html: Ref<string, string>;
+declare function useMarkdownIt(templateRef?: TemplateRef<HTMLElement>, options?: UseMarkDownItOptions): {
   templateRef: Readonly<vue0.ShallowRef<HTMLElement | null>> | undefined;
-  md: markdownIt;
-  render: (value: string) => string;
+  valueRef: vue0.Ref<string | undefined, string | undefined>;
+  htmlRef: vue0.Ref<string, string>;
+  markdownItInst: markdownIt;
+  render: (value?: string) => string;
 };
 type MarkdownItReturns = ReturnType<typeof useMarkdownIt>;
 //#endregion
-export { MarkDownItOptions, MarkdownItReturns, useMarkdownIt };
+export { MarkdownItReturns, UseMarkDownItOptions, useMarkdownIt };

package/dist/index.mjs

@@ -1,33 +1,47 @@
 import DOMPurify from "dompurify";
 import markdownIt from "markdown-it";
-import { isReactive, isRef, ref, toValue, watch, watchEffect } from "vue";
+import { onMounted, onUnmounted, ref, toValue, watch, watchEffect } from "vue";
+import "@vueuse/core";
 
+//#region ../_utils/custom-watch.ts
+function watchRefOrGetter(value, callback) {
+	const refValue = ref(toValue(value));
+	watchEffect(() => {
+		refValue.value = toValue(value);
+	});
+	watch(refValue, (val) => {
+		callback?.(val);
+	});
+	return refValue;
+}
+
+//#endregion
 //#region src/index.ts
-function useMarkdownIt(templateRef, defaultValue, options) {
-	const { manual = false, domPurify = true, ..._options } = options ?? {};
-	const value = ref(isRef(defaultValue) ? toValue(defaultValue.value) : isReactive(defaultValue) ? toValue(defaultValue) : defaultValue);
-	if (isRef(defaultValue)) watchEffect(() => {
-		value.value = toValue(defaultValue.value);
+function useMarkdownIt(templateRef, options) {
+	const { value, manual = false, domPurify = true, markdownItOptions } = options ?? {};
+	const valueRef = watchRefOrGetter(value, () => {
+		if (!manual) render();
 	});
-	const html = ref("");
-	const md = markdownIt({ ..._options });
-	function render(value$1) {
-		const mdValue = md.render(value$1);
-		html.value = domPurify ? DOMPurify.sanitize(mdValue) : mdValue;
-		if (templateRef && templateRef.value) templateRef.value.innerHTML = html.value;
-		return html.value;
-	}
-	if (!manual) {
-		render(value.value ?? "");
-		watch(value, (v) => {
-			render(v ?? "");
-		});
+	const htmlRef = ref("");
+	const markdownItInst = markdownIt({ ...markdownItOptions });
+	function render(value) {
+		if (value) valueRef.value = value;
+		const mdValue = markdownItInst.render(valueRef.value ?? "");
+		htmlRef.value = domPurify ? DOMPurify.sanitize(mdValue) : mdValue;
+		if (templateRef?.value) templateRef.value.innerHTML = htmlRef.value;
+		return htmlRef.value;
 	}
+	onMounted(() => {
+		if (!manual) render();
+	});
+	onUnmounted(() => {
+		if (templateRef?.value) templateRef.value.innerHTML = "";
+	});
 	return {
-		value,
-		html,
 		templateRef,
-		md,
+		valueRef,
+		htmlRef,
+		markdownItInst,
 		render
 	};
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oiij/markdown-it",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A Vue Composable for markdown-it",
   "author": "oiij",
   "license": "MIT",
@@ -29,14 +29,14 @@
     "@vueuse/core": "^14.1.0",
     "dompurify": "^3.3.1",
     "markdown-it": "^14.1.0",
-    "vue": "^3.5.26"
+    "vue": "^3.5.27"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
     "@vueuse/core": "^14.1.0",
     "dompurify": "^3.3.1",
     "markdown-it": "^14.1.0",
-    "vue": "^3.5.26"
+    "vue": "^3.5.27"
   },
   "publishConfig": {
     "access": "public"