mirror of
https://github.com/sahadev/vue-component-creater-ui.git
synced 2025-06-07 21:54:05 +08:00
更新代码生成库
This commit is contained in:
shangbin
parent
fee37b267a
commit
8ca6a9b725
192
package-lock.json
generated
192
package-lock.json
generated
@ -1931,6 +1931,16 @@
|
||||
"integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
|
||||
"dev": true
|
||||
},
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"big.js": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
|
||||
@ -1963,6 +1973,23 @@
|
||||
"unique-filename": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.4.tgz",
|
||||
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
|
||||
@ -2001,6 +2028,13 @@
|
||||
"universalify": "^0.1.0"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.nlark.com/has-flag/download/has-flag-4.0.0.tgz?cache=0&sync_timestamp=1626715907927&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fhas-flag%2Fdownload%2Fhas-flag-4.0.0.tgz",
|
||||
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"html-webpack-plugin": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1608278250985&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz",
|
||||
@ -2098,6 +2132,16 @@
|
||||
"minipass": "^3.1.1"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.nlark.com/supports-color/download/supports-color-7.2.0.tgz?cache=0&sync_timestamp=1626703400240&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsupports-color%2Fdownload%2Fsupports-color-7.2.0.tgz",
|
||||
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"terser-webpack-plugin": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "http://npm.xesv5.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
|
||||
@ -2124,6 +2168,67 @@
|
||||
"define-properties": "^1.1.2",
|
||||
"object.getownpropertydescriptors": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.5.0",
|
||||
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz?cache=0&sync_timestamp=1628666727543&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-loader%2Fdownload%2Fvue-loader-16.5.0.tgz",
|
||||
"integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"big.js": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.nlark.com/big.js/download/big.js-5.2.2.tgz",
|
||||
"integrity": "sha1-ZfCvOC9Xi83HQr2cKB6cstd2gyg=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646734234&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
|
||||
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-3.0.0.tgz",
|
||||
"integrity": "sha1-VXBmIEatKeLpFucariYKvf9Pang=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"json5": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/json5/download/json5-2.2.0.tgz",
|
||||
"integrity": "sha1-Lf7+cgxrpSXZ69kJlQ8FFTFsiaM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.5"
|
||||
}
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -10438,9 +10543,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"prettier": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npm.taobao.org/prettier/download/prettier-2.1.1.tgz",
|
||||
"integrity": "sha1-2Uhd1eSZ2qbLVHAjuHps9RvuN9Y="
|
||||
"version": "2.4.0",
|
||||
"resolved": "https://registry.nlark.com/prettier/download/prettier-2.4.0.tgz",
|
||||
"integrity": "sha1-hb3+D3DD53fPE6T//zlxPKb2TLo="
|
||||
},
|
||||
"pretty-bytes": {
|
||||
"version": "5.4.1",
|
||||
@ -12914,87 +13019,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-loader-v16": {
|
||||
"version": "npm:vue-loader@16.5.0",
|
||||
"resolved": "https://r.cnpmjs.org/vue-loader/download/vue-loader-16.5.0.tgz",
|
||||
"integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"chalk": "^4.1.0",
|
||||
"hash-sum": "^2.0.0",
|
||||
"loader-utils": "^2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://r.cnpmjs.org/ansi-styles/download/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-convert": "^2.0.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://r.cnpmjs.org/chalk/download/chalk-4.1.2.tgz",
|
||||
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
}
|
||||
},
|
||||
"color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://r.cnpmjs.org/color-convert/download/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"color-name": "~1.1.4"
|
||||
}
|
||||
},
|
||||
"color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://r.cnpmjs.org/color-name/download/color-name-1.1.4.tgz",
|
||||
"integrity": "sha1-wqCah6y95pVD3m9j+jmVyCbFNqI=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://r.cnpmjs.org/has-flag/download/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha1-lEdx/ZyByBJlxNaUGGDaBrtZR5s=",
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://r.cnpmjs.org/loader-utils/download/loader-utils-2.0.0.tgz",
|
||||
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"big.js": "^5.2.2",
|
||||
"emojis-list": "^3.0.0",
|
||||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://r.cnpmjs.org/supports-color/download/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha1-G33NyzK4E4gBs+R4umpRyqiWSNo=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"has-flag": "^4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-nestable": {
|
||||
"version": "2.6.0",
|
||||
"resolved": "https://r.cnpmjs.org/vue-nestable/download/vue-nestable-2.6.0.tgz",
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
"md5": "^2.3.0",
|
||||
"modern-normalize": "^1.0.0",
|
||||
"parse-package-name": "^0.1.0",
|
||||
"prettier": "^2.0.5",
|
||||
"prettier": "^2.4.0",
|
||||
"prismjs": "^1.20.0",
|
||||
"query-string": "^6.13.7",
|
||||
"register-service-worker": "^1.6.2",
|
||||
|
||||
@ -92,7 +92,6 @@ export default {
|
||||
},
|
||||
|
||||
formatCode() {
|
||||
// 代码格式化工具需要赓续为支持Vue的，当前prettier对js代码不够友好
|
||||
return Prism.highlight(this.prettyCode, Prism.languages.markup, "html");
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<el-dialog title="JS逻辑编辑" :visible.sync="codeDialogVisible" width="70%" top="10vh" :before-close="handleClose"
|
||||
:center=true>
|
||||
<CodeEditor ref="codeEditor"></CodeEditor>
|
||||
<CodeEditor style="max-height: 65vh;" ref="codeEditor"></CodeEditor>
|
||||
|
||||
<div style="text-align:center;padding: 10px;">
|
||||
<el-button type="primary" @click="onSave">确认修改</el-button>
|
||||
|
||||
@ -1,600 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
//该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
|
||||
|
||||
Object.defineProperty(exports, '__esModule', { value: true });
|
||||
|
||||
// 导出组件模板文件
|
||||
|
||||
function vueTemplate () {
|
||||
return `
|
||||
<template> <!--在此自动生成--> </template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// 在此自动生成
|
||||
// $datas
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
beforeCreate() {},
|
||||
created() {},
|
||||
beforeMount() {},
|
||||
mounted() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
destoryed() {},
|
||||
methods: {
|
||||
// 在此自动生成
|
||||
request() {
|
||||
// 网络请求，可选
|
||||
},
|
||||
// $eventMethods
|
||||
},
|
||||
fillter: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 在此自动生成 */
|
||||
/** $stylesTemplate */
|
||||
</style>
|
||||
`;
|
||||
}
|
||||
|
||||
// 生成一个方法
|
||||
function generateFunction(functionName) {
|
||||
return `${functionName}(){}`;
|
||||
}
|
||||
|
||||
// 生成一个class
|
||||
function generateClass(className) {
|
||||
return `.${className}{}`;
|
||||
}
|
||||
|
||||
// 生成一个键值对
|
||||
function generateData(dataName) {
|
||||
return `${dataName}:''`;
|
||||
}
|
||||
|
||||
// 合成方法集
|
||||
function convertMethods(set) {
|
||||
const methodsStr = [...set].map(generateFunction);
|
||||
return methodsStr.join(",\n");
|
||||
}
|
||||
|
||||
// 合成style集
|
||||
function convertStyles(set) {
|
||||
const classStr = [...set].map(generateClass);
|
||||
return classStr.join("\n");
|
||||
}
|
||||
|
||||
// 合成data集
|
||||
function convertDatas(set, options) {
|
||||
let dataStr = [...set].map(generateData);
|
||||
// 回调外部，使外部作用最后结果
|
||||
if (options.convertDataResult) {
|
||||
dataStr = options.convertDataResult(dataStr);
|
||||
}
|
||||
return dataStr.join(",\n");
|
||||
}
|
||||
|
||||
// 从模板中替换方法
|
||||
function replaceMethods(template, set) {
|
||||
return template.replace("// $eventMethods", convertMethods(set));
|
||||
}
|
||||
|
||||
// 从模板中替换样式
|
||||
function replaceStyles(template, set) {
|
||||
return template.replace("/** $stylesTemplate */", convertStyles(set));
|
||||
}
|
||||
// 从模板中替换样式
|
||||
function replaceDatas(template, set, options) {
|
||||
const defaultCode = convertDatas(set, options);
|
||||
return template.replace("// $datas", defaultCode);
|
||||
}
|
||||
|
||||
// const fakeCall = function(a) {return a;};
|
||||
// const fakeCallNoReturn = function() {};
|
||||
|
||||
function buildOptions(options, defaultOptions, props) {
|
||||
var newOptions = {};
|
||||
if (!options) {
|
||||
return defaultOptions; //if there are not options
|
||||
}
|
||||
|
||||
for (let i = 0; i < props.length; i++) {
|
||||
if (options[props[i]] !== undefined) {
|
||||
newOptions[props[i]] = options[props[i]];
|
||||
} else {
|
||||
newOptions[props[i]] = defaultOptions[props[i]];
|
||||
}
|
||||
}
|
||||
return newOptions;
|
||||
}
|
||||
|
||||
const defaultOptions = {
|
||||
attributeNamePrefix: '@_',
|
||||
attrNodeName: false,
|
||||
textNodeName: '#text',
|
||||
ignoreAttributes: true,
|
||||
cdataTagName: false,
|
||||
cdataPositionChar: '\\c',
|
||||
format: true,
|
||||
indentBy: ' ',
|
||||
supressEmptyNode: false,
|
||||
tagValueProcessor: function (a) {
|
||||
return a;
|
||||
},
|
||||
attrValueProcessor: function (a) {
|
||||
return a;
|
||||
},
|
||||
attributeProtectArray: [] // 哪些属性的值为''但需要渲染出来，默认：如果value为''就不生成key=value，只生成key
|
||||
};
|
||||
|
||||
const props = [
|
||||
'attributeNamePrefix',
|
||||
'attrNodeName',
|
||||
'textNodeName',
|
||||
'ignoreAttributes',
|
||||
'cdataTagName',
|
||||
'cdataPositionChar',
|
||||
'format',
|
||||
'indentBy',
|
||||
'supressEmptyNode',
|
||||
'tagValueProcessor',
|
||||
'attrValueProcessor',
|
||||
'attributeProtectArray'
|
||||
];
|
||||
|
||||
function Parser(options) {
|
||||
this.options = buildOptions(options, defaultOptions, props);
|
||||
if (this.options.ignoreAttributes || this.options.attrNodeName) {
|
||||
this.isAttribute = function (/*a*/) {
|
||||
return false;
|
||||
};
|
||||
} else {
|
||||
this.attrPrefixLen = this.options.attributeNamePrefix.length;
|
||||
this.isAttribute = isAttribute;
|
||||
}
|
||||
if (this.options.cdataTagName) {
|
||||
this.isCDATA = isCDATA;
|
||||
} else {
|
||||
this.isCDATA = function (/*a*/) {
|
||||
return false;
|
||||
};
|
||||
}
|
||||
this.replaceCDATAstr = replaceCDATAstr;
|
||||
this.replaceCDATAarr = replaceCDATAarr;
|
||||
|
||||
if (this.options.format) {
|
||||
this.indentate = indentate;
|
||||
this.tagEndChar = '>\n';
|
||||
this.newLine = '\n';
|
||||
} else {
|
||||
this.indentate = function () {
|
||||
return '';
|
||||
};
|
||||
this.tagEndChar = '>';
|
||||
this.newLine = '';
|
||||
}
|
||||
|
||||
if (this.options.supressEmptyNode) {
|
||||
this.buildTextNode = buildEmptyTextNode;
|
||||
this.buildObjNode = buildEmptyObjNode;
|
||||
} else {
|
||||
this.buildTextNode = buildTextValNode;
|
||||
this.buildObjNode = buildObjectNode;
|
||||
}
|
||||
|
||||
this.buildTextValNode = buildTextValNode;
|
||||
this.buildObjectNode = buildObjectNode;
|
||||
}
|
||||
|
||||
Parser.prototype.parse = function (jObj) {
|
||||
return this.j2x(jObj, 0).val;
|
||||
};
|
||||
|
||||
Parser.prototype.j2x = function (jObj, level) {
|
||||
let attrStr = '';
|
||||
let val = '';
|
||||
const keys = Object.keys(jObj);
|
||||
const len = keys.length;
|
||||
for (let i = 0; i < len; i++) {
|
||||
const key = keys[i];
|
||||
if (typeof jObj[key] === 'undefined') ; else if (jObj[key] === null) {
|
||||
val += this.indentate(level) + '<' + key + '/' + this.tagEndChar;
|
||||
} else if (jObj[key] instanceof Date) {
|
||||
val += this.buildTextNode(jObj[key], key, '', level);
|
||||
} else if (key === '__children'){ // 生成子节点
|
||||
const item = jObj[key];
|
||||
|
||||
if(item instanceof Array){
|
||||
item.forEach(i =>{
|
||||
const result = this.j2x(i, level + 1);
|
||||
val += result.val;
|
||||
});
|
||||
} else
|
||||
if (typeof item === 'object') {
|
||||
console.info(`不应该出现的意外`);
|
||||
} else {
|
||||
val += this.buildTextNode(item, key, '', level);
|
||||
}
|
||||
}
|
||||
|
||||
else if (typeof jObj[key] !== 'object') {
|
||||
//premitive type
|
||||
const attr = this.isAttribute(key);
|
||||
|
||||
if (key === '__text__') {
|
||||
val = jObj[key] + val; // 2020年12月14日19:35:54 文本内容通常在子节点之前
|
||||
continue;
|
||||
}
|
||||
|
||||
if (attr) {
|
||||
if (typeof jObj[key] === "boolean" && jObj[key]) {
|
||||
attrStr += ` ${key} `;
|
||||
} else if(jObj[key] || this.options.attributeProtectArray.includes(key)){
|
||||
attrStr += ' ' + key + '="' + this.options.attrValueProcessor('' + jObj[key]) + '"';
|
||||
} else {
|
||||
attrStr += ' ' + key;
|
||||
}
|
||||
|
||||
} else if (this.isCDATA(key)) {
|
||||
if (jObj[this.options.textNodeName]) {
|
||||
val += this.replaceCDATAstr(jObj[this.options.textNodeName], jObj[key]);
|
||||
} else {
|
||||
val += this.replaceCDATAstr('', jObj[key]);
|
||||
}
|
||||
} else {
|
||||
//tag value
|
||||
if (key === this.options.textNodeName) {
|
||||
if (jObj[this.options.cdataTagName]) ; else {
|
||||
val += this.options.tagValueProcessor('' + jObj[key]);
|
||||
}
|
||||
} else {
|
||||
val += this.buildTextNode(jObj[key], key, '', level);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
else if (Array.isArray(jObj[key])) {
|
||||
//repeated nodes
|
||||
if (this.isCDATA(key)) {
|
||||
val += this.indentate(level);
|
||||
if (jObj[this.options.textNodeName]) {
|
||||
val += this.replaceCDATAarr(jObj[this.options.textNodeName], jObj[key]);
|
||||
} else {
|
||||
val += this.replaceCDATAarr('', jObj[key]);
|
||||
}
|
||||
} else {
|
||||
//nested nodes
|
||||
const arrLen = jObj[key].length;
|
||||
for (let j = 0; j < arrLen; j++) {
|
||||
const item = jObj[key][j];
|
||||
if (typeof item === 'undefined') ; else if (item === null) {
|
||||
val += this.indentate(level) + '<' + key + '/' + this.tagEndChar;
|
||||
} else if (typeof item === 'object') {
|
||||
const result = this.j2x(item, level + 1);
|
||||
val += this.buildObjNode(result.val, key, result.attrStr, level);
|
||||
} else {
|
||||
val += this.buildTextNode(item, key, '', level);
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//nested node
|
||||
if (this.options.attrNodeName && key === this.options.attrNodeName) {
|
||||
const Ks = Object.keys(jObj[key]);
|
||||
const L = Ks.length;
|
||||
for (let j = 0; j < L; j++) {
|
||||
attrStr += ' ' + Ks[j] + '="' + this.options.attrValueProcessor('' + jObj[key][Ks[j]]) + '"';
|
||||
}
|
||||
} else {
|
||||
const result = this.j2x(jObj[key], level + 1);
|
||||
val += this.buildObjNode(result.val, key, result.attrStr, level);
|
||||
}
|
||||
}
|
||||
}
|
||||
return { attrStr: attrStr, val: val };
|
||||
};
|
||||
|
||||
function replaceCDATAstr(str, cdata) {
|
||||
str = this.options.tagValueProcessor('' + str);
|
||||
if (this.options.cdataPositionChar === '' || str === '') {
|
||||
return str + '<![CDATA[' + cdata + ']]' + this.tagEndChar;
|
||||
} else {
|
||||
return str.replace(this.options.cdataPositionChar, '<![CDATA[' + cdata + ']]' + this.tagEndChar);
|
||||
}
|
||||
}
|
||||
|
||||
function replaceCDATAarr(str, cdata) {
|
||||
str = this.options.tagValueProcessor('' + str);
|
||||
if (this.options.cdataPositionChar === '' || str === '') {
|
||||
return str + '<![CDATA[' + cdata.join(']]><![CDATA[') + ']]' + this.tagEndChar;
|
||||
} else {
|
||||
for (let v in cdata) {
|
||||
str = str.replace(this.options.cdataPositionChar, '<![CDATA[' + cdata[v] + ']]>');
|
||||
}
|
||||
return str + this.newLine;
|
||||
}
|
||||
}
|
||||
|
||||
function buildObjectNode(val, key, attrStr, level) {
|
||||
if (attrStr && !val.includes('<')) {
|
||||
|
||||
if (key === "img" || key === "input") {
|
||||
return (this.indentate(level) + '<' + key + attrStr + '/>');
|
||||
}
|
||||
|
||||
return (
|
||||
this.indentate(level) +
|
||||
'<' +
|
||||
key +
|
||||
attrStr +
|
||||
'>' +
|
||||
val +
|
||||
//+ this.newLine
|
||||
// + this.indentate(level)
|
||||
'</' +
|
||||
key +
|
||||
this.tagEndChar
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
this.indentate(level) +
|
||||
'<' +
|
||||
key +
|
||||
attrStr +
|
||||
this.tagEndChar +
|
||||
val +
|
||||
//+ this.newLine
|
||||
this.indentate(level) +
|
||||
'</' +
|
||||
key +
|
||||
this.tagEndChar
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function buildEmptyObjNode(val, key, attrStr, level) {
|
||||
if (val !== '') {
|
||||
return this.buildObjectNode(val, key, attrStr, level);
|
||||
} else {
|
||||
return this.indentate(level) + '<' + key + attrStr + '/' + this.tagEndChar;
|
||||
//+ this.newLine
|
||||
}
|
||||
}
|
||||
|
||||
function buildTextValNode(val, key, attrStr, level) {
|
||||
return (
|
||||
this.indentate(level) +
|
||||
'<' +
|
||||
key +
|
||||
attrStr +
|
||||
'>' +
|
||||
this.options.tagValueProcessor(val) +
|
||||
'</' +
|
||||
key +
|
||||
this.tagEndChar
|
||||
);
|
||||
}
|
||||
|
||||
function buildEmptyTextNode(val, key, attrStr, level) {
|
||||
if (val !== '') {
|
||||
return this.buildTextValNode(val, key, attrStr, level);
|
||||
} else {
|
||||
return this.indentate(level) + '<' + key + attrStr + '/' + this.tagEndChar;
|
||||
}
|
||||
}
|
||||
|
||||
function indentate(level) {
|
||||
return this.options.indentBy.repeat(level);
|
||||
}
|
||||
|
||||
function isAttribute(name /*, options*/) {
|
||||
return true;
|
||||
}
|
||||
|
||||
function isCDATA(name) {
|
||||
return name === this.options.cdataTagName;
|
||||
}
|
||||
|
||||
//formatting
|
||||
//indentation
|
||||
//\n after each closing or self closing tag
|
||||
|
||||
// 类定义放入其中
|
||||
let classSet = new Set();
|
||||
// 事件放入其中
|
||||
let methodSet = new Set();
|
||||
// 数据引用放入其中
|
||||
let dataSet = new Set();
|
||||
const rawAdd = Set.prototype.add;
|
||||
Set.prototype.add = function (value) {
|
||||
if (typeof value === "string" && checkKeyword(value))
|
||||
rawAdd.apply(this, arguments);
|
||||
};
|
||||
// 解析后的Json对象
|
||||
let jsonObj = null;
|
||||
|
||||
function checkKeyword(value) {
|
||||
return value != "true" && value != "false";
|
||||
}
|
||||
|
||||
function clearDataSet() {
|
||||
classSet.clear();
|
||||
methodSet.clear();
|
||||
dataSet.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* 直接输入Json文本
|
||||
* @param {*} json
|
||||
*/
|
||||
function outputVueCode(json, options = {}) {
|
||||
jsonObj = JSON.parse(json);
|
||||
|
||||
return outputVueCodeWithJsonObj(jsonObj, options);
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入Json对象
|
||||
* @param {*} jsonObj
|
||||
*/
|
||||
function outputVueCodeWithJsonObj(_jsonObj, options = {}) {
|
||||
jsonObj = _jsonObj;
|
||||
parseJson(_jsonObj);
|
||||
|
||||
// 对集合进行排序
|
||||
dataSet = sort(dataSet);
|
||||
methodSet = sort(methodSet);
|
||||
classSet = sort(classSet);
|
||||
|
||||
// 生成执行结果
|
||||
return generateResult(options);
|
||||
}
|
||||
|
||||
function sort(set) {
|
||||
return new Set(Array.from(set).sort());
|
||||
}
|
||||
|
||||
// 递归解析Json
|
||||
function parseJson(json) {
|
||||
for (const key in json) {
|
||||
if (json.hasOwnProperty(key)) {
|
||||
const value = json[key];
|
||||
if (value instanceof Array) {
|
||||
value.forEach((item) => parseJson(item));
|
||||
} else if (value instanceof Object) {
|
||||
parseJson(value);
|
||||
} else {
|
||||
deliveryResult(key, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 将所有需要替换的内容通过装饰器逐步替换
|
||||
function replaceKeyInfo(options) {
|
||||
return replaceStyles(
|
||||
replaceDatas(
|
||||
replaceMethods(replaceHtmlTemplate(getVueTemplate()), methodSet),
|
||||
dataSet,
|
||||
options
|
||||
),
|
||||
classSet
|
||||
);
|
||||
}
|
||||
|
||||
function replaceHtmlTemplate(template) {
|
||||
const defaultOptions = {
|
||||
attributeNamePrefix: "@_",
|
||||
attrNodeName: false, //default is false
|
||||
textNodeName: "#text",
|
||||
ignoreAttributes: false,
|
||||
cdataTagName: "__cdata", //default is false
|
||||
cdataPositionChar: "\\c",
|
||||
format: true,
|
||||
indentBy: " ",
|
||||
supressEmptyNode: false,
|
||||
attributeProtectArray: [] // 哪些属性的值为''但需要渲染出来，默认：如果value为''就不生成key=value，只生成key
|
||||
};
|
||||
|
||||
const parser = new Parser(defaultOptions);
|
||||
// 只面向代码生成使用，故jsonObj.template不能变更，2020年12月15日16:04:28
|
||||
const xml = parser.parse(jsonObj.template);
|
||||
|
||||
return template.replace("<!--在此自动生成-->", xml);
|
||||
}
|
||||
|
||||
// 分发解析结果
|
||||
function deliveryResult(key, value) {
|
||||
if (key === "class") {
|
||||
const classes = value.split(" ");
|
||||
classes.forEach((item) => {
|
||||
// 处理多个空字符串
|
||||
if (!item) return;
|
||||
classSet.add(item);
|
||||
});
|
||||
} else if (/^v-on/g.test(key) || /^@/g.test(key)) {
|
||||
// 匹配@,v-on
|
||||
let expresionArray = null;
|
||||
if (checkIsVar(value)) {
|
||||
methodSet.add(value);
|
||||
} else if ((expresionArray = findVarFormExpression(value)).length > 0) {
|
||||
// 如果是表达式的话，则一定代表是变量参与了运算
|
||||
expresionArray.forEach((element) => {
|
||||
dataSet.add(element);
|
||||
});
|
||||
}
|
||||
// TODO 支持自定义传参情况：handleJump(scope.row.lc_id, scope.row.name)
|
||||
} else if (/^v-/g.test(key) || /^:+/g.test(key)) {
|
||||
// 匹配v-,:(v-bind)
|
||||
let expresionArray = null;
|
||||
if (checkIsVar(value)) {
|
||||
dataSet.add(value);
|
||||
} else if ((expresionArray = findVarFormExpression(value)).length > 0) {
|
||||
expresionArray.forEach((element) => {
|
||||
dataSet.add(element);
|
||||
});
|
||||
}
|
||||
} else if (key === "__text__") {
|
||||
// 匹配v-text,{{}}
|
||||
if (/[{]{2}.+[}]{2}/g.test(value)) {
|
||||
// 用于匹配v-text {{}}
|
||||
const temp = findVarFormExpression(value);
|
||||
temp.forEach((element) => {
|
||||
dataSet.add(element);
|
||||
});
|
||||
}
|
||||
} else ;
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查这个值是不是符合一个变量的规则, 这里情况特殊，不可以以大写字母开头，以驼峰命名为准
|
||||
* @param {*} value
|
||||
*/
|
||||
function checkIsVar(value) {
|
||||
return /^[_a-z]{1}[_0-9a-zA-Z]*$/g.test(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* 从表达式中提取变量，这里情况特殊，不可以以大写字母开头，以驼峰命名为准
|
||||
* @param {*} expression
|
||||
*/
|
||||
function findVarFormExpression(expression) {
|
||||
if (typeof expression === "string") {
|
||||
let temp = expression.match(/[_a-z]{1}[_0-9a-zA-Z]*/g);
|
||||
if (!temp) {
|
||||
temp = [];
|
||||
}
|
||||
return temp;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function generateResult(options) {
|
||||
// 需要输出的结果有：
|
||||
// 1.html template
|
||||
// 1) 支持解析v-model/@click/
|
||||
// 2.script template
|
||||
// 3.style template
|
||||
// 返回一个格式化后的字符串
|
||||
return replaceKeyInfo(options);
|
||||
}
|
||||
|
||||
function getVueTemplate() {
|
||||
return vueTemplate();
|
||||
}
|
||||
|
||||
exports.clearDataSet = clearDataSet;
|
||||
exports.outputVueCode = outputVueCode;
|
||||
exports.outputVueCodeWithJsonObj = outputVueCodeWithJsonObj;
|
||||
@ -1,5 +1,10 @@
|
||||
//该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
|
||||
|
||||
import stringifyObject from 'stringify-object';
|
||||
import _ from 'lodash';
|
||||
import prettier from 'prettier/standalone.js';
|
||||
import parserBabel from 'prettier/parser-babel.js';
|
||||
|
||||
// 导出组件模板文件
|
||||
|
||||
function vueTemplate () {
|
||||
@ -7,30 +12,7 @@ function vueTemplate () {
|
||||
<template> <!--在此自动生成--> </template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// $datas
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
beforeCreate() {},
|
||||
created() {},
|
||||
beforeMount() {},
|
||||
mounted() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
destoryed() {},
|
||||
methods: {
|
||||
request() {
|
||||
},
|
||||
// $eventMethods
|
||||
},
|
||||
fillter: {},
|
||||
};
|
||||
export default // $script
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -95,6 +77,7 @@ function replaceMethods(template, set, options) {
|
||||
function replaceStyles(template, set, options) {
|
||||
return template.replace("/** $stylesTemplate */", convertStyles(set, options));
|
||||
}
|
||||
|
||||
// 从模板中替换样式
|
||||
function replaceDatas(template, set, options) {
|
||||
const defaultCode = convertDatas(set, options);
|
||||
@ -414,6 +397,33 @@ function isCDATA(name) {
|
||||
//indentation
|
||||
//\n after each closing or self closing tag
|
||||
|
||||
const scriptTemplate = `{
|
||||
props: [],
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
// $datas
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
beforeCreate() {},
|
||||
created() {},
|
||||
beforeMount() {},
|
||||
mounted() {},
|
||||
beforeUpdate() {},
|
||||
updated() {},
|
||||
destoryed() {},
|
||||
methods: {
|
||||
request() {
|
||||
},
|
||||
// $eventMethods
|
||||
},
|
||||
fillter: {},
|
||||
};`;
|
||||
|
||||
const { merge } = _;
|
||||
|
||||
const rawAdd = Set.prototype.add;
|
||||
Set.prototype.add = function (value) {
|
||||
if (typeof value === "string" && checkKeyword(value))
|
||||
@ -515,7 +525,7 @@ class CodeGenerator {
|
||||
*/
|
||||
outputVueCode(json) {
|
||||
this.jsonObj = JSON.parse(json);
|
||||
return this.outputVueCodeWithJsonObj(jsonObj);
|
||||
return this.outputVueCodeWithJsonObj(this.jsonObj);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -542,12 +552,64 @@ class CodeGenerator {
|
||||
replaceKeyInfo() {
|
||||
// 将对象转换为html并替换
|
||||
const templateTemp = replaceHtmlTemplate(getVueTemplate(), this.jsonObj);
|
||||
|
||||
// ==================== 生成脚本 ====================
|
||||
|
||||
// 生成方法
|
||||
const methodTemp = replaceMethods(templateTemp, this.methodSet, this.options);
|
||||
const methodTemp = replaceMethods(scriptTemplate, this.methodSet, this.options);
|
||||
// 生成data
|
||||
const dataTemp = replaceDatas(methodTemp, this.dataSet, this.options);
|
||||
|
||||
// 转化为对象
|
||||
const JSCodeInfo = eval(`(function(){return ${dataTemp}})()`);
|
||||
|
||||
// 合并外部脚本对象
|
||||
let externalData = {};
|
||||
|
||||
if (this.options.getExternalJS) {
|
||||
externalData = this.options.getExternalJS.data();
|
||||
// 防止在后面的生成污染新的对象
|
||||
delete this.options.getExternalJS.data;
|
||||
}
|
||||
|
||||
// 生成新的data返回值
|
||||
const newData = merge({}, JSCodeInfo.data(), externalData);
|
||||
|
||||
const dataFunction = new Function(`return ${stringifyObject(newData)}`);
|
||||
|
||||
console.info(dataFunction.toString());
|
||||
|
||||
JSCodeInfo.data = dataFunction;
|
||||
|
||||
let externalJSLogic = {};
|
||||
|
||||
if (this.options.getExternalJS) {
|
||||
externalJSLogic = this.options.getExternalJS;
|
||||
}
|
||||
|
||||
const mergedJSObject = merge(JSCodeInfo, externalJSLogic);
|
||||
|
||||
// 序列化为脚本代码
|
||||
const finalJSCode = stringifyObject(mergedJSObject, {
|
||||
transform: (object, property, originalResult) => {
|
||||
if (!originalResult.match(/^\([^\(]+/g) && !originalResult.match(/^\{/g)) { // 不对以(/{ 开头的情况做处理，只对包含有方法名的情况做处理
|
||||
const after = originalResult.replace(/[^\(]+?\(([\w,\s]*)\)/g, '\($1\)=>');
|
||||
return after;
|
||||
}
|
||||
|
||||
return originalResult;
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== 生成脚本 ====================
|
||||
|
||||
const beautiful = prettier.format(`export default ` + finalJSCode, { semi: false, parser: "babel", plugins: [parserBabel], });
|
||||
const excludeUnuseal = beautiful.replace('export default ', '');
|
||||
// 插入到最终模板
|
||||
const JSTemp = templateTemp.replace('// $script', excludeUnuseal);
|
||||
|
||||
// 生成class
|
||||
const styleTemp = replaceStyles(dataTemp, this.classSet, this.options);
|
||||
const styleTemp = replaceStyles(JSTemp, this.classSet, this.options);
|
||||
return styleTemp;
|
||||
}
|
||||
|
||||
@ -571,13 +633,13 @@ class CodeGenerator {
|
||||
value = getVarName(value);
|
||||
value && this.methodSet.add(value);
|
||||
} else
|
||||
// 业务侧可能会全部消费/^:+/g.test(key)
|
||||
if (this.options.checkIsDataDirectives && this.options.checkIsDataDirectives(key)) {
|
||||
value = getVarName(value);
|
||||
value && this.dataSet.add(value);
|
||||
} else {
|
||||
this.options.unSupportedKey && this.options.unSupportedKey(key, value);
|
||||
}
|
||||
// 业务侧可能会全部消费/^:+/g.test(key)
|
||||
if (this.options.checkIsDataDirectives && this.options.checkIsDataDirectives(key)) {
|
||||
value = getVarName(value);
|
||||
value && this.dataSet.add(value);
|
||||
} else {
|
||||
this.options.unSupportedKey && this.options.unSupportedKey(key, value);
|
||||
}
|
||||
} else if (key === "__text__") {
|
||||
// 匹配v-text,{{}}
|
||||
if (/[{]{2}.+[}]{2}/g.test(value)) {
|
||||
|
||||
23
yarn.lock
23
yarn.lock
@ -7427,16 +7427,16 @@ prepend-http@^1.0.0:
|
||||
resolved "https://registry.npm.taobao.org/prepend-http/download/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
|
||||
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
||||
|
||||
prettier@2.4.0:
|
||||
version "2.4.0"
|
||||
resolved "https://registry.nlark.com/prettier/download/prettier-2.4.0.tgz#85bdfe0f70c3e777cf13a4ffff39713ca6f64cba"
|
||||
integrity sha1-hb3+D3DD53fPE6T//zlxPKb2TLo=
|
||||
|
||||
prettier@^1.18.2:
|
||||
version "1.19.1"
|
||||
resolved "https://registry.npm.taobao.org/prettier/download/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
|
||||
integrity sha1-99f1/4qc2HKnvkyhQglZVqYHl8s=
|
||||
|
||||
prettier@^2.0.5:
|
||||
version "2.0.5"
|
||||
resolved "https://registry.npm.taobao.org/prettier/download/prettier-2.0.5.tgz?cache=0&sync_timestamp=1587488858835&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fprettier%2Fdownload%2Fprettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
|
||||
integrity sha1-1tVigkVSQ/L5LMFxZpLAiqMVItQ=
|
||||
|
||||
pretty-bytes@^5.1.0:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.npm.taobao.org/pretty-bytes/download/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
|
||||
@ -9385,9 +9385,9 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
|
||||
hash-sum "^1.0.2"
|
||||
loader-utils "^1.0.2"
|
||||
|
||||
vue-template-compiler@^2.6.12:
|
||||
vue-template-compiler@^2.6.14:
|
||||
version "2.6.14"
|
||||
resolved "https://r.cnpmjs.org/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
|
||||
resolved "https://registry.nlark.com/vue-template-compiler/download/vue-template-compiler-2.6.14.tgz#a2f0e7d985670d42c9c9ee0d044fed7690f4f763"
|
||||
integrity sha1-ovDn2YVnDULJye4NBE/tdpD092M=
|
||||
dependencies:
|
||||
de-indent "^1.0.2"
|
||||
@ -9398,14 +9398,9 @@ vue-template-es2015-compiler@^1.9.0:
|
||||
resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
|
||||
integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
|
||||
|
||||
vue@^2.6.11:
|
||||
version "2.6.11"
|
||||
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz?cache=0&sync_timestamp=1584427516192&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
|
||||
integrity sha1-dllNh31LEiNEBuhONSdcbVFBJcU=
|
||||
|
||||
vue@^2.6.12:
|
||||
vue@^2.6.12, vue@^2.6.14:
|
||||
version "2.6.14"
|
||||
resolved "https://r.cnpmjs.org/vue/download/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
|
||||
resolved "https://registry.nlark.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1631142011059&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
|
||||
integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
|
||||
|
||||
vuex@^3.1.2:
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user