@ckpack/markdown-wx 1.0.0 → 1.0.1

package/README.md

@@ -120,6 +120,37 @@ const html = await createMarkdownWx({
 }).render('$E=mc^2$');
 ```
 
+### 小程序组件 (markdown-wx)
+提供一个微信小程序自定义组件，内部基于 `createMarkdownWx` 渲染。
+
+组件属性:
+- src: markdown 字符串
+- html: 直接传入 html (优先于 src)
+- options: MarkdownWxOptions (建议仅使用可序列化字段，如 math.endpoint)
+- env: 透传给 render 的 env
+- autoRender: 是否自动渲染 (默认 true)
+- selectable: rich-text selectable (默认 false)
+
+事件:
+- rendered: 渲染成功，detail { html, src }
+- error: 渲染失败，detail { error }
+
+示例:
+```xml
+<markdown-wx id="md" src="{{markdown}}" options="{{mdOptions}}" bind:rendered="onRendered" />
+```
+```js
+Page({
+  data: {
+    markdown: '# Hello $E=mc^2$',
+    mdOptions: { math: { endpoint: 'https://example.com/katex' } }
+  },
+  onRendered(e) {
+    console.log('html', e.detail.html);
+  }
+});
+```
+
 ## server
 
 ### renderFormulaToSvg(formula, options?)

package/miniprogram_dist/components/markdown-wx/markdown-wx.d.ts

@@ -0,0 +1,35 @@
+//#region src/components/markdown-wx/markdown-wx.d.ts
+declare const _default: WechatMiniprogram.Component.Identifier<{
+  nodes: string;
+  error: string;
+  rendering: boolean;
+}, {
+  src: {
+    type: StringConstructor;
+    value: string;
+  };
+  html: {
+    type: StringConstructor;
+    value: string;
+  };
+  options: {
+    type: ObjectConstructor;
+    value: null;
+  };
+  env: {
+    type: ObjectConstructor;
+    value: null;
+  };
+  autoRender: {
+    type: BooleanConstructor;
+    value: boolean;
+  };
+  selectable: {
+    type: BooleanConstructor;
+    value: boolean;
+  };
+}, {
+  render(): Promise<void>;
+}>;
+//#endregion
+export { _default as default };

package/miniprogram_dist/components/markdown-wx/markdown-wx.js

@@ -0,0 +1,112 @@
+import { r as createWxRequestFetchLike, t as createMarkdownWx } from "../../src-BX9uvc_6.js";
+
+//#region src/components/markdown-wx/markdown-wx.ts
+function isNonEmptyString(value) {
+	return typeof value === "string" && value.trim().length > 0;
+}
+function normalizeOptions(options) {
+	if (!options) return {};
+	if (!options.math || options.math.fetch) return options;
+	return {
+		...options,
+		math: {
+			...options.math,
+			fetch: createWxRequestFetchLike()
+		}
+	};
+}
+var markdown_wx_default = Component({
+	properties: {
+		src: {
+			type: String,
+			value: ""
+		},
+		html: {
+			type: String,
+			value: ""
+		},
+		options: {
+			type: Object,
+			value: null
+		},
+		env: {
+			type: Object,
+			value: null
+		},
+		autoRender: {
+			type: Boolean,
+			value: true
+		},
+		selectable: {
+			type: Boolean,
+			value: false
+		}
+	},
+	data: {
+		nodes: "",
+		error: "",
+		rendering: false
+	},
+	observers: { "src, options, env, html, autoRender": function() {
+		if (this.properties.autoRender) this.render();
+	} },
+	methods: { async render() {
+		const instance = this;
+		const token = (instance._renderToken ?? 0) + 1;
+		instance._renderToken = token;
+		const { src, html, options, env } = this.properties;
+		this.setData({
+			rendering: true,
+			error: ""
+		});
+		try {
+			if (isNonEmptyString(html)) {
+				if (instance._renderToken === token) {
+					this.setData({
+						nodes: html,
+						rendering: false
+					});
+					this.triggerEvent("rendered", {
+						html,
+						src
+					});
+				}
+				return;
+			}
+			if (!isNonEmptyString(src)) {
+				if (instance._renderToken === token) {
+					this.setData({
+						nodes: "",
+						rendering: false
+					});
+					this.triggerEvent("rendered", {
+						html: "",
+						src
+					});
+				}
+				return;
+			}
+			const rendered = await createMarkdownWx(normalizeOptions(options)).render(src, env ?? void 0);
+			if (instance._renderToken !== token) return;
+			this.setData({
+				nodes: rendered,
+				rendering: false
+			});
+			this.triggerEvent("rendered", {
+				html: rendered,
+				src
+			});
+		} catch (error) {
+			if (instance._renderToken !== token) return;
+			const message = error instanceof Error ? error.message : String(error);
+			this.setData({
+				error: message,
+				rendering: false
+			});
+			this.triggerEvent("error", { error: message });
+		}
+	} }
+});
+
+//#endregion
+export { markdown_wx_default as default };

package/miniprogram_dist/components/markdown-wx/markdown-wx.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

package/miniprogram_dist/components/markdown-wx/markdown-wx.wxml

@@ -0,0 +1,3 @@
+<view class="markdown-wx">
+  <rich-text nodes="{{nodes}}" selectable="{{selectable}}"></rich-text>
+</view>

package/miniprogram_dist/components/markdown-wx/markdown-wx.wxss

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.markdown-wx {
+  display: block;
+}
+
+rich-text {
+  display: block;
+}

package/miniprogram_dist/index.js

@@ -0,0 +1,3 @@
+import { i as mathPlugin, n as renderMarkdownToWx, r as createWxRequestFetchLike, t as createMarkdownWx } from "./src-BX9uvc_6.js";
+
+export { createMarkdownWx, createWxRequestFetchLike, mathPlugin, renderMarkdownToWx };

package/{dist/index.js → miniprogram_dist/src-BX9uvc_6.js}

@@ -212,4 +212,4 @@ async function renderMarkdownToWx(src, options = {}) {
 }
 
 //#endregion
-export { createMarkdownWx, createWxRequestFetchLike, mathPlugin, renderMarkdownToWx };
+export { mathPlugin as i, renderMarkdownToWx as n, createWxRequestFetchLike as r, createMarkdownWx as t };

package/package.json

@@ -1,23 +1,26 @@
 {
   "name": "@ckpack/markdown-wx",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "packageManager": "pnpm@10.12.1+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
   "description": "将 Markdown 转换为微信小程序富文本格式.",
+  "miniprogram": "miniprogram_dist",
   "author": "ckvv",
   "license": "MIT",
   "repository": "https://github.com/ckpack/markdown-wx",
   "exports": {
-    ".": "./dist/index.js",
-    "./server": "./dist/server/index.mjs",
+    ".": "./miniprogram_dist/index.js",
+    "./server": "./miniprogram_dist/server/index.mjs",
+    "./components/*": "./miniprogram_dist/components/*",
     "./package.json": "./package.json"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./miniprogram_dist/index.js",
+  "module": "./miniprogram_dist/index.js",
+  "types": "./miniprogram_dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "miniprogram_dist"
   ],
   "scripts": {
     "dev": "node --import=tsx src/index.ts",
@@ -36,6 +39,7 @@
     "@types/node": "^25.0.10",
     "eslint": "^9.39.2",
     "lint-staged": "^16.2.7",
+    "miniprogram-api-typings": "^5.0.0",
     "simple-git-hooks": "^2.13.1",
     "tsdown": "^0.20.1",
     "typescript": "^5.9.3",