feat: add vite markdown plugin (#2650)

将 markdown 相关插件独立为 @nutui/vite-plugins 子包。
将 demo 拆分为单独的文件，中英文文档内容由 demo 代码直接生成。

package.json

@@ -81,7 +81,8 @@
     "@commitlint/cli": "^18.0.0",
     "@commitlint/config-conventional": "^18.0.0",
     "@nutui/eslint-config": "workspace:*",
-    "@nutui/prettier-plugin": "workspace:^",
+    "@nutui/prettier-plugin": "workspace:*",
+    "@nutui/vite-plugins": "workspace:*",
     "@tarojs/taro": "3.6.14",
     "@types/node": "^18.18.5",
     "@vitejs/plugin-vue": "^4.4.0",
@@ -93,23 +94,21 @@
     "codesandbox": "^2.2.3",
     "eslint": "^8.51.0",
     "fs-extra": "^11.1.1",
-    "highlight.js": "^11.9.0",
     "husky": "^8.0.3",
     "inquirer": "^9.2.11",
     "lint-staged": "^15.0.1",
     "lzutf8": "^0.6.3",
     "markdown-it": "^13.0.2",
-    "markdown-it-container": "^3.0.0",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
     "unplugin-vue-components": "^0.25.2",
-    "unplugin-vue-markdown": "^0.25.0",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vitest": "^0.34.6",
     "vitest-canvas-mock": "^0.3.3",
     "vue": "^3.3.4",
-    "vue-tsc": "^1.8.22"
+    "vue-tsc": "^1.8.22",
+    "vite-plugin-inspect": "^0.7.42"
   },
   "engines": {
     "pnpm": ">= 8.0.0"

packages/nutui-taro-demo/tsconfig.json

@@ -18,7 +18,10 @@
     "jsx": "preserve",
     "allowJs": true,
     "resolveJsonModule": true,
-    "typeRoots": ["node_modules/@types"]
+    "typeRoots": ["node_modules/@types"],
+    "paths": {
+      "@/packages/*": ["../../src/packages/*"]
+    }
   },
   "include": ["./src", "./types", "components.d.ts"],
   "compileOnSave": false

packages/nutui-vite-plugins/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@nutui/vite-plugins",
+  "version": "1.0.0",
+  "private": "true",
+  "type": "module",
+  "description": "",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./markdown": {
+      "import": "./dist/markdown.js",
+      "require": "./dist/markdown.cjs",
+      "types": "./dist/markdown.d.ts"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "prepare": "pnpm build",
+    "dev": "tsup --watch",
+    "build": "tsup"
+  },
+  "author": "jdf2e",
+  "license": "MIT",
+  "dependencies": {
+    "lzutf8": "^0.6.3",
+    "markdown-it-container": "^3.0.0",
+    "unplugin-vue-markdown": "^0.24.3",
+    "highlight.js": "^11.9.0",
+    "fs-extra": "^11.1.1"
+  },
+  "devDependencies": {
+    "tsup": "^7.2.0",
+    "typescript": "^5.0.4",
+    "@types/markdown-it-container": "^2.0.8",
+    "@types/fs-extra": "^11.0.3"
+  }
+}

packages/nutui-vite-plugins/src/index.ts

@@ -0,0 +1,2 @@
+export * from './markdown';
+export { default as markdown } from './markdown';

packages/nutui-vite-plugins/src/markdown.ts

@@ -0,0 +1,90 @@
+import Markdown from 'unplugin-vue-markdown/vite';
+import MarkdownIt from 'markdown-it-container';
+import hljs from 'highlight.js';
+import LZUTF8 from 'lzutf8';
+import fs from 'fs-extra';
+import path from 'path';
+import { Plugin } from 'vite';
+
+function compressText(str: string): any {
+  // @ts-ignore
+  return LZUTF8.encodeBase64(LZUTF8.compress(str, { outputEncoding: 'ByteArray' }));
+}
+
+interface MarkdownOptions {
+  docRoot: string;
+}
+
+const fileRegex = /\.md$/;
+
+const TransformMarkdownDemo = (options: MarkdownOptions): Plugin => {
+  return {
+    name: 'nutui-transform-markdown-demo',
+    enforce: 'pre',
+    transform(src, id) {
+      if (fileRegex.test(id)) {
+        return {
+          code: src.replace(/> demo: ([0-9a-z .]*)[\n|\r\n]/g, (_match, $1: string) => {
+            const [left, right] = $1.split(' ');
+            let code = '';
+            try {
+              code = fs.readFileSync(path.resolve(options.docRoot, left, 'demo', `${right}.vue`), 'utf-8');
+            } catch (err) {
+              code =
+                '[@nutui/vite-plugins] File not found: ' + path.resolve(options.docRoot, left, 'demo', `${right}.vue`);
+              console.warn(code);
+            }
+            return code
+              ? `:::demo
+
+\`\`\`vue
+${code}
+\`\`\`
+
+:::\n`
+              : '';
+          }),
+          map: null // 如果可行将提供 source map
+        };
+      }
+    }
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function markdown(options: MarkdownOptions) {
+  return [
+    TransformMarkdownDemo(options),
+    Markdown({
+      markdownItOptions: {
+        typographer: false,
+        highlight: function (str, lang) {
+          if (lang && (lang === 'vue' || hljs.getLanguage(lang))) {
+            return hljs.highlight(str, {
+              language: lang === 'vue' ? 'html' : lang
+            }).value;
+          }
+          return '';
+        }
+      },
+      markdownItSetup(md) {
+        md.use(MarkdownIt, 'demo', {
+          validate: function (params: any) {
+            return params.match(/^demo\s*(.*)$/);
+          },
+          render: function (tokens: any, idx: any) {
+            const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
+            if (tokens[idx].nesting === 1) {
+              // opening tag
+              const contentHtml = compressText(tokens[idx + 1].content);
+              return `<demo-block data-type="vue" data-value="${contentHtml}">` + md.utils.escapeHtml(m[1]) + '\n';
+            } else {
+              // closing tag
+              return '</demo-block>\n';
+            }
+          }
+        });
+      }
+    })
+  ];
+}

packages/nutui-vite-plugins/tsup.config.ts

@@ -0,0 +1,10 @@
+import type { Options } from 'tsup';
+
+export default <Options>{
+  entryPoints: ['src/*.ts'],
+  clean: true,
+  format: ['cjs', 'esm'],
+  dts: true,
+  shims: true,
+  silent: true
+};