1
0
mirror of https://github.com/sahadev/vue-component-creater-ui.git synced 2025-07-25 04:49:31 +08:00

优化代码过渡生成

This commit is contained in:
shangbin 2021-09-14 19:01:50 +08:00
parent 8ca6a9b725
commit 8220a44291
5 changed files with 44 additions and 19 deletions

View File

@ -43,7 +43,7 @@
<code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible" <code-structure @save="onSaveAttr" @remove="onRemove" ref="codeStructure" :visible.sync="structureVisible"
@codeRefresh="generateVueCode" @onLevelChange="onLevelChange"> @codeRefresh="generateVueCode" @onLevelChange="onLevelChange">
</code-structure> </code-structure>
<CodeEditor :codeDialogVisible.sync="jsDialogVisible"></CodeEditor> <CodeEditor :codeDialogVisible.sync="jsDialogVisible" @saveJSCode="saveJSCode"></CodeEditor>
</div> </div>
<!-- 辅助定位线 --> <!-- 辅助定位线 -->
@ -224,6 +224,10 @@ export default {
undo() { undo() {
this.mainPanelProvider.undo(); this.mainPanelProvider.undo();
}, },
saveJSCode(code){
this.mainPanelProvider.saveJSCode(code);
}
}, },
fillter: {}, fillter: {},
}; };

View File

@ -42,9 +42,7 @@ export default {
}, },
onSave() { onSave() {
const code = this.$refs.codeEditor.getEditorCode(); const code = this.$refs.codeEditor.getEditorCode();
const temp = code.replace(/.+\*\/\s*/gs, ""); this.$emit("saveJSCode", code);
const JSCodeInfo = eval(`(function(){return ${temp}})()`);
console.info(JSCodeInfo.methods.request.toString());
} }
}, },
watch: { watch: {

View File

@ -422,7 +422,7 @@ const scriptTemplate = `{
fillter: {}, fillter: {},
};`; };`;
const { merge } = _; const { merge, cloneDeep } = _;
const rawAdd = Set.prototype.add; const rawAdd = Set.prototype.add;
Set.prototype.add = function (value) { Set.prototype.add = function (value) {
@ -511,6 +511,8 @@ class CodeGenerator {
this.methodSet = new Set(); this.methodSet = new Set();
// 数据引用放入其中 // 数据引用放入其中
this.dataSet = new Set(); this.dataSet = new Set();
this.externalJS = {};
} }
clearDataSet() { clearDataSet() {
@ -519,6 +521,15 @@ class CodeGenerator {
this.dataSet.clear(); this.dataSet.clear();
} }
/**
* 设置外部编辑代码
* @param {*} code
*/
setExternalJS(JSCodeInfo) {
this.externalJS = cloneDeep(JSCodeInfo);
}
/** /**
* 直接输入Json文本 * 直接输入Json文本
* @param {*} json * @param {*} json
@ -566,10 +577,10 @@ class CodeGenerator {
// 合并外部脚本对象 // 合并外部脚本对象
let externalData = {}; let externalData = {};
if (this.options.getExternalJS) { if (this.externalJS && typeof this.externalJS.data === 'function') {
externalData = this.options.getExternalJS.data(); externalData = this.externalJS.data();
// 防止在后面的生成污染新的对象 // 防止在后面的生成污染新的对象
delete this.options.getExternalJS.data; delete this.externalJS.data;
} }
// 生成新的data返回值 // 生成新的data返回值
@ -577,14 +588,12 @@ class CodeGenerator {
const dataFunction = new Function(`return ${stringifyObject(newData)}`); const dataFunction = new Function(`return ${stringifyObject(newData)}`);
console.info(dataFunction.toString());
JSCodeInfo.data = dataFunction; JSCodeInfo.data = dataFunction;
let externalJSLogic = {}; let externalJSLogic = {};
if (this.options.getExternalJS) { if (this.externalJS) {
externalJSLogic = this.options.getExternalJS; externalJSLogic = this.externalJS;
} }
const mergedJSObject = merge(JSCodeInfo, externalJSLogic); const mergedJSObject = merge(JSCodeInfo, externalJSLogic);
@ -593,7 +602,7 @@ class CodeGenerator {
const finalJSCode = stringifyObject(mergedJSObject, { const finalJSCode = stringifyObject(mergedJSObject, {
transform: (object, property, originalResult) => { transform: (object, property, originalResult) => {
if (!originalResult.match(/^\([^\(]+/g) && !originalResult.match(/^\{/g)) { // 不对以(/{ 开头的情况做处理,只对包含有方法名的情况做处理 if (!originalResult.match(/^\([^\(]+/g) && !originalResult.match(/^\{/g)) { // 不对以(/{ 开头的情况做处理,只对包含有方法名的情况做处理
const after = originalResult.replace(/[^\(]+?\(([\w,\s]*)\)/g, '\($1\)=>'); const after = originalResult.replace(/[^\(]+?\(([\w,\s]*)\)/, '\($1\)=>');
return after; return after;
} }

View File

@ -27,6 +27,8 @@ export class MainPanelProvider {
// 存储所有的渲染记录, 保存副本 // 存储所有的渲染记录, 保存副本
this.renderStack = []; this.renderStack = [];
this.redoStack = []; this.redoStack = [];
this.externalJS = {};
} }
/** /**
@ -41,18 +43,17 @@ export class MainPanelProvider {
this.initCodeGenerator(); this.initCodeGenerator();
// 生成展示代码
const copyForShow = cloneDeep(rawDataStructure);
removeAllID(copyForShow);
console.groupCollapsed('---> for code generator warn <---'); console.groupCollapsed('---> for code generator warn <---');
const codeForShow = this.codeGenerator.outputVueCodeWithJsonObj(copyForShow);
this.eventEmitter.emit("codeCreated", codeForShow);
const readyForMoutedElement = this.createMountedElement(); const readyForMoutedElement = this.createMountedElement();
// 生成原始代码 // 生成原始代码
const code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure); const code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
// 生成展示代码
const codeForShow = code.replace(/\s{1}lc_id=".+"/g, '');
this.eventEmitter.emit("codeCreated", codeForShow);
console.groupEnd(); console.groupEnd();
const { template, script, styles, customBlocks } = parseComponent(code); const { template, script, styles, customBlocks } = parseComponent(code);
@ -101,12 +102,21 @@ export class MainPanelProvider {
*/ */
initCodeGenerator() { initCodeGenerator() {
this.codeGenerator = createNewCodeGenerator(); this.codeGenerator = createNewCodeGenerator();
this.codeGenerator.setExternalJS(this.externalJS);
} }
getControlPanelRoot() { getControlPanelRoot() {
return document.getElementById('render-control-panel'); return document.getElementById('render-control-panel');
} }
saveJSCode(code) {
const temp = code.replace(/.+\*\/\s*/gs, "");
const JSCodeInfo = eval(`(function(){return ${temp}})()`);
this.externalJS = JSCodeInfo;
this.codeGenerator.setExternalJS(JSCodeInfo);
this.reRender();
}
/** /**
* 生成一个新的待挂载容器 * 生成一个新的待挂载容器
*/ */

View File

@ -11,6 +11,10 @@ import "./assets/nestable.css"
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.use(AntdUI); Vue.use(AntdUI);
Vue.config.errorHandler = function (err, vm, info) {
console.error(err);
}
new Vue({ new Vue({
el: "#app", el: "#app",
render: (h) => h(APP), render: (h) => h(APP),