cnhis-design-vue 3.1.7-beta.1 → 3.1.7-beta.2

package/md-plugin.ts

@@ -0,0 +1,201 @@
+import MarkdownIt from 'markdown-it';
+import { parse, compileScript, compileTemplate, SFCDescriptor } from '@vue/compiler-sfc';
+import { PluginOption } from 'vite';
+import fs from 'fs';
+import { resolve } from 'path';
+import hljs from 'highlight.js';
+
+type ComponentInfo = {
+	alias: string;
+	path: string;
+	title?: string;
+	description?: string;
+	code: string;
+};
+
+const demoMatcher = /(::: demo\s*([^]+?)\s:::)/g;
+const tipMatcher = /(::: tip\s*(\S*)([^]+?)\s:::)/g;
+const getVueImportMatcher = (flags?: string) =>
+	new RegExp('([\\\\/.a-zA-Z-_\\d]+\\.vue)(\\[.+?])?(\\{.+?})?', flags);
+
+const isMdExtension = (id: string) => /\.md$/.test(id);
+
+function highlight(str: string, lang = 'html') {
+	if (lang && hljs.getLanguage(lang)) {
+		try {
+			return (
+				'<pre><code class="hljs">' +
+				hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
+				'</code></pre>'
+			);
+		} catch (e) {
+			console.warn(e);
+			return '';
+		}
+	}
+	return '';
+}
+
+const md2html = MarkdownIt({ highlight });
+
+function escape(code: string) {
+	return code
+		.replace(/<script/g, '\\<script')
+		.replace(/<\/script/g, '\\<\\/script')
+		.replace(/`/g, '\\`')
+		.replace(/\t/g, '  ');
+}
+
+function transformMd2Html(md: string) {
+	return md2html.render(md);
+}
+
+function parseDemo(html: string, id: string) {
+	let totalIndex = 0;
+	const resultComponents: ComponentInfo[] = [];
+
+	const resultCode = html.replace(demoMatcher, (_, wrapper, innerContent) => {
+		if (!wrapper || !innerContent) return '';
+
+		const vueDemos: string[] = innerContent.match(getVueImportMatcher('g')) || [];
+		const componentList = vueDemos.map(pathAndInfo => createComponentInfo(pathAndInfo));
+		resultComponents.push(...componentList);
+
+		return componentList.reduce((fin, cur) => {
+			return fin + generateTemplateString(cur, cur.alias);
+		}, '');
+	});
+
+	return { code: resultCode, components: resultComponents };
+
+	function generateTemplateString(info: ComponentInfo, alias: string) {
+		return `<demo-collapse>
+            ${generateTitleString(info)}
+            ${generateDescriptionString(info)}
+           <template #source>
+              <highlightjs :code="code__${alias}" /> 
+           </template>
+           <${info.alias}/>
+         </demo-collapse>\n`;
+	}
+
+	function generateTitleString(info: ComponentInfo) {
+		return info.title ? `<template #title>${info.title.replace(/[\[\]]/g, '')}</template>` : '';
+	}
+
+	function generateDescriptionString(info: ComponentInfo) {
+		return info.description
+			? `<template #description>${info.description.replace(/[{}]/g, '')}</template>`
+			: '';
+	}
+
+	function createComponentInfo(pathAndInfo: string): ComponentInfo {
+		const [_, path, title, description] = pathAndInfo.match(getVueImportMatcher()) || [];
+		return {
+			alias: `Component${totalIndex++}`,
+			title,
+			description,
+			path: resolveIdPath(path),
+			code: getCodeFromPath(path)
+		};
+	}
+
+	function getCodeFromPath(path: string) {
+		return escape(fs.readFileSync(resolveIdPath(path), 'utf-8'));
+	}
+
+	function resolveIdPath(path: string) {
+		return resolve(id, '..', path).replace(/\\/g, '/');
+	}
+}
+
+function parseTip(html: string) {
+	return html.replace(tipMatcher, (_, __, type, content) => {
+		return `<n-alert type="${type}">${content}</n-alert>`;
+	});
+}
+
+function parseMarkdown(md: string, id: string) {
+	const html = transformMd2Html(md);
+	const res = parseDemo(html, id);
+	const code = parseTip(res.code);
+	return { code, components: res.components };
+}
+
+function transformMd2VueComponent(src: string, id: string) {
+	const { code, components } = parseMarkdown(src, id);
+	const { descriptor } = parse(generateSourceCode());
+
+	return combine(getTemplateCode(descriptor), getScriptCode(descriptor));
+
+	function generateSourceCode() {
+		return `
+<template>
+  <div class='markdown'>
+   <anchor-list>
+     ${code}
+   </anchor-list>
+  </div>
+</template>
+<script>
+${generateImports()}
+const __script={
+  components:{${generateComponents()}},
+  setup(){
+     ${generateVarDeclare()}
+     return {${generateSetupReturn()}}
+  }
+};
+export default __script;
+</script>
+`;
+	}
+
+	function getTemplateCode(descriptor: SFCDescriptor) {
+		return compileTemplate({
+			source: descriptor.template?.content ?? '',
+			id: '-1',
+			filename: 'index.vue'
+		}).code;
+	}
+
+	function getScriptCode(descriptor: SFCDescriptor) {
+		return compileScript(descriptor, { id: '-1' }).content;
+	}
+
+	function combine(template: string, script: string) {
+		return `${template}\n${script.replace(
+			'export default',
+			'__script.render=render;\nexport default'
+		)}`;
+	}
+
+	function generateImports() {
+		return components.map(({ alias, path }) => `import ${alias} from "${path}";\n`).join('');
+	}
+
+	function generateComponents() {
+		return components.map(({ alias }) => `${alias}`).join(',');
+	}
+
+	function generateVarDeclare() {
+		return components.map(({ code, alias }) => `const code__${alias} = \`${code}\`;\n`).join('');
+	}
+
+	function generateSetupReturn() {
+		return `${components.map(({ alias }) => `code__${alias}`).join(',')}`;
+	}
+}
+
+export function MDPlugin(): PluginOption {
+	return {
+		name: 'MDPlugin',
+		transform(src, id) {
+			if (isMdExtension(id)) {
+				return {
+					code: transformMd2VueComponent(src, id)
+				};
+			}
+		}
+	};
+}

package/package.json

@@ -1,119 +1,126 @@
-{
-  "name": "cnhis-design-vue",
-  "private": false,
-  "version": "3.1.7-beta.1",
-  "module": "es/packages/index.mjs",
-  "main": "es/packages/index.mjs",
-  "types": "es/packages/index.d.ts",
-  "sideEffects": [
-    "es/packages/**/style/*",
-    "es/packages/*(.css,.less)"
-  ],
-  "scripts": {
-    "dev": "vite --host --port 3200",
-    "start": "gulp --require @esbuild-kit/cjs-loader -f build/gulpfile.ts",
-    "build": "npm run start",
-    "preview": "vite preview",
-    "release": "standard-version"
-  },
-  "peerDependencies": {
-    "naive-ui": "^2.29.0",
-    "vue": ">=3.2.0",
-    "vxe-table": "~4.2.1"
-  },
-  "dependencies": {
-    "@highlightjs/vue-plugin": "^2.1.0",
-    "@vicons/ionicons5": "^0.12.0",
-    "@vueuse/core": "^8.6.0",
-    "@vueuse/shared": "^8.6.0",
-    "@wangeditor/editor": "^5.1.1",
-    "@wangeditor/editor-for-vue": "^5.1.11",
-    "axios": "^0.27.2",
-    "babel-preset-typescript": "7.0.0-alpha.19",
-    "bpmn-js": "^9.2.2",
-    "crypto-js": "^4.1.1",
-    "highlight.js": "^11.5.1",
-    "lodash": "^4.17.21",
-    "lodash-es": "^4.17.21",
-    "lodash-unified": "^1.0.2",
-    "moment": "^2.29.1",
-    "naive-ui": "^2.29.0",
-    "rimraf": "^3.0.2",
-    "spark-md5": "^3.0.2",
-    "type-fest": "^2.13.0",
-    "v-viewer": "^3.0.10",
-    "video.js": "^7.19.2",
-    "videojs-contrib-hls": "^5.15.0",
-    "viewerjs": "^1.10.5",
-    "vue": "^3.2.36",
-    "vue-simple-uploader": "^1.0.0-beta.5",
-    "vuedraggable": "4.1.0",
-    "vxe-table": "4.2.1",
-    "xe-utils": "^3.5.4"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@babel/preset-typescript": "^7.17.12",
-    "@esbuild-kit/cjs-loader": "^2.0.0",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^22.0.0",
-    "@rollup/plugin-image": "^2.1.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@types/babel__core": "^7.1.19",
-    "@types/fs-extra": "^9.0.13",
-    "@types/gulp": "^4.0.9",
-    "@types/gulp-less": "^0.0.32",
-    "@types/lodash-es": "^4.17.6",
-    "@types/node": "^17.0.38",
-    "@types/replacestream": "^4.0.1",
-    "@types/vue-router": "^2.0.0",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vue/babel-preset-jsx": "^1.2.4",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@vue/shared": "^3.2.36",
-    "autoprefixer": "^10.4.7",
-    "axios": "^0.27.2",
-    "bpmn-js": "^9.2.2",
-    "chalk": "^5.0.1",
-    "consola": "^2.15.3",
-    "cssnano": "^5.1.7",
-    "esbuild": "^0.14.42",
-    "eslint": "^8.10.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.5.0",
-    "fast-glob": "^3.2.11",
-    "gulp": "^4.0.2",
-    "gulp-cssimport": "^7.0.0",
-    "gulp-less": "^5.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-replace": "^1.1.3",
-    "gulp-util": "^3.0.8",
-    "less": "^4.1.2",
-    "postcss": "^8.4.14",
-    "replacestream": "^4.0.3",
-    "rollup": "^2.75.5",
-    "rollup-plugin-delete": "^2.0.0",
-    "rollup-plugin-esbuild": "^4.9.1",
-    "rollup-plugin-external-globals": "^0.6.1",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.32.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "standard-version": "^9.3.2",
-    "ts-morph": "^15.1.0",
-    "typescript": "4.6.4",
-    "vite": "^2.9.9",
-    "vue-tsc": "^0.29.8"
-  },
-  "browserslist": [
-    "defaults",
-    "not ie < 8",
-    "last 2 versions",
-    "> 1%",
-    "iOS 7",
-    "last 3 iOS versions"
-  ]
-}
+{
+  "name": "cnhis-design-vue",
+  "private": false,
+  "version": "3.1.7-beta.2",
+  "module": "es/packages/index.mjs",
+  "main": "es/packages/index.mjs",
+  "types": "es/packages/index.d.ts",
+  "sideEffects": [
+    "es/packages/**/style/*",
+    "es/packages/*(.css,.less)"
+  ],
+  "scripts": {
+    "dev": "node --max-old-space-size=8192 node_modules/vite/bin/vite.js --host --port 3200",
+    "start": "gulp --require @esbuild-kit/cjs-loader -f build/gulpfile.ts",
+    "build": "npm run start",
+    "preview": "vite preview",
+    "release": "standard-version"
+  },
+  "peerDependencies": {
+    "naive-ui": "^2.29.0",
+    "vue": ">=3.2.0",
+    "vxe-table": "~4.2.1"
+  },
+  "dependencies": {
+    "@formily/core": "^2.1.9",
+    "@formily/vue": "^2.1.9",
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "@vicons/ionicons5": "^0.12.0",
+    "@vueuse/core": "^8.6.0",
+    "@vueuse/shared": "^8.6.0",
+    "@wangeditor/editor": "^5.1.1",
+    "@wangeditor/editor-for-vue": "^5.1.11",
+    "axios": "^0.27.2",
+    "babel-preset-typescript": "7.0.0-alpha.19",
+    "bpmn-js": "^9.2.2",
+    "crypto-js": "^4.1.1",
+    "highlight.js": "^11.5.1",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lodash-unified": "^1.0.2",
+    "moment": "^2.29.1",
+    "naive-ui": "^2.29.0",
+    "rimraf": "^3.0.2",
+    "spark-md5": "^3.0.2",
+    "type-fest": "^2.13.0",
+    "v-viewer": "^3.0.10",
+    "video.js": "^7.19.2",
+    "videojs-contrib-hls": "^5.15.0",
+    "viewerjs": "^1.10.5",
+    "vue": "^3.2.36",
+    "vue-simple-uploader": "^1.0.0-beta.5",
+    "vuedraggable": "4.1.0",
+    "vxe-table": "4.2.1",
+    "xe-utils": "^3.5.4"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-typescript": "^7.17.12",
+    "@esbuild-kit/cjs-loader": "^2.0.0",
+    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-image": "^2.1.1",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@types/babel__core": "^7.1.19",
+    "@types/fs-extra": "^9.0.13",
+    "@types/gulp": "^4.0.9",
+    "@types/gulp-less": "^0.0.32",
+    "@types/lodash-es": "^4.17.6",
+    "@types/markdown-it": "^12.2.3",
+    "@types/node": "^17.0.38",
+    "@types/replacestream": "^4.0.1",
+    "@types/vue-router": "^2.0.0",
+    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/babel-preset-jsx": "^1.2.4",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vue/shared": "^3.2.36",
+    "autoprefixer": "^10.4.7",
+    "axios": "^0.27.2",
+    "bpmn-js": "^9.2.2",
+    "chalk": "^5.0.1",
+    "consola": "^2.15.3",
+    "cssnano": "^5.1.7",
+    "esbuild": "^0.14.42",
+    "eslint": "^8.10.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.5.0",
+    "fast-glob": "^3.2.11",
+    "gulp": "^4.0.2",
+    "gulp-cssimport": "^7.0.0",
+    "gulp-less": "^5.0.0",
+    "gulp-rename": "^2.0.0",
+    "gulp-replace": "^1.1.3",
+    "gulp-util": "^3.0.8",
+    "less": "^4.1.2",
+    "markdown-it": "^13.0.1",
+    "postcss": "^8.4.14",
+    "replacestream": "^4.0.3",
+    "rollup": "^2.75.5",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-esbuild": "^4.9.1",
+    "rollup-plugin-external-globals": "^0.6.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.32.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "standard-version": "^9.3.2",
+    "ts-morph": "^15.1.0",
+    "typescript": "4.6.4",
+    "unocss": "^0.41.1",
+    "vite": "^2.9.9",
+    "vite-plugin-markdown": "^2.0.2",
+    "vue-tsc": "^0.29.8",
+    "xe-css": "^1.2.3"
+  },
+  "browserslist": [
+    "defaults",
+    "not ie < 8",
+    "last 2 versions",
+    "> 1%",
+    "iOS 7",
+    "last 3 iOS versions"
+  ]
+}

package/uno.config.ts

@@ -0,0 +1,22 @@
+import presetAttributify from '@unocss/preset-attributify';
+import { XeCSSDefaultRules } from 'xe-css/dist/presets';
+import Unocss from 'unocss/vite';
+
+export const UnoConfig =  Unocss({
+  rules: XeCSSDefaultRules.concat([
+    [/^fw-(\d+)$/, ([ weight]) => {
+      return { 'font-weight': weight };
+    }]
+  ]).map(item => {
+    return [
+      new RegExp(`${ item[0].toString().replace(/^\/\^(.+)\/$/, '^$1') }`),
+      (args: any[]) => {
+        return item[1](args.slice(1));
+      }
+    ];
+  }),
+  presets: [presetAttributify({})],
+  shortcuts: {
+    'gray-border': 'bor-s-solid bor-w-1 bor-c-c5c5c5-20'
+  }
+})