feat: 支持单文件二次编辑

src/App.vue

@@ -1,14 +1,17 @@
 <template>
-  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
+  <!-- <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc> -->
+  <compile-vue-online></compile-vue-online>
 </template>
 
 <script>
+import CompileVueOnline from './test/compileVueOnline.vue'
 // 以这样一段结构初始化VCC组件
 const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
 
 export default {
   components: {
-    vcc: () => import('./components-v2/VCC.vue')
+    vcc: () => import('./components-v2/VCC.vue'),
+    CompileVueOnline
   },
   data() {
     return {

src/components-v2/VCC.vue

@@ -24,7 +24,8 @@
 
     <div class="copy">
       <div style="display:inline-block; width:260px;">
-        <el-alert title="遇到问题请查阅页面左下角的帮助" type="info"></el-alert>
+        <el-alert title="遇到问题？点击我查看帮助文档" @click="help" type="info">
+        </el-alert>
       </div>
 
       <el-tooltip effect="dark" content="编辑JS逻辑" placement="top-start">
@@ -230,6 +231,10 @@ export default {
 
     saveJSCode(code) {
       this.mainPanelProvider.saveJSCode(code);
+    },
+
+    help() {
+      window.open('/doc')
     }
   },
   fillter: {},

src/components/Code.vue

@@ -84,11 +84,16 @@ export default {
   },
   computed: {
     prettyCode() {
-      return prettier.format(this.rawCode, {
-        parser: "html",
-        plugins: [parserHtml],
-        vueIndentScriptAndStyle: true,
-      });
+      try {
+        return prettier.format(this.rawCode, {
+          parser: "html",
+          plugins: [parserHtml],
+          vueIndentScriptAndStyle: true,
+        });
+      } catch (error) {
+        return this.rawCode;
+      }
+
     },
 
     formatCode() {

src/libs/main-panel.js

@@ -47,10 +47,14 @@ export class MainPanelProvider {
         const readyForMoutedElement = this.createMountedElement();
 
         // 生成原始代码
-        const code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
+        let code = this.codeGenerator.outputVueCodeWithJsonObj(rawDataStructure);
+
+        // 将xxx: () => {} 转换为xxx(){}
+        code = code.replace(/:\s*\(([\w\s]*)\)\s*=>/g,"\($1\)");
 
         // 生成展示代码
-        const codeForShow = code.replace(/\s{1}lc_id=".+"/g, '');
+        let codeForShow = code.replace(/\s{1}lc_id=".+"/g, '');
+        codeForShow = codeForShow.replace(/\s{1}lc-mark/g, "");
         this.eventEmitter.emit("codeCreated", codeForShow);
 
         console.groupEnd();
@@ -59,9 +63,6 @@ export class MainPanelProvider {
 
         let newScript = script.content.replace(/\s*export default\s*/, "")
 
-        // 将xxx: () => {} 转换为xxx(){}
-        newScript = newScript.replace(/:\s*\(([\w\s]*)\)\s*=>/g,"\($1\)");
-
         const componentOptions = (new Function(`return ${newScript}`))();
 
         const res = Vue.compile(template.content);
@@ -249,7 +250,7 @@ export class MainPanelProvider {
                     this.eventEmitter.emit('onMerged');
                 });
 
-                this.render(window.tree.root);
+                this.render(this._rawDataStructure);
             }
         });
     }

src/script/compile.js

@@ -1,4 +1,4 @@
-const compiler = require("./compileComponent.js");
+const { compiler } = require("./compileComponent.js");
 
 const glob = require("glob");
 const path = require("path");
@@ -14,13 +14,13 @@ glob(
   {
     cwd: componentsPath,
     absolute: true,
-    ignore: ['**/element/index.vue', '**/vant/index.vue', '**/iview/index.vue']
+    ignore: ["**/element/index.vue", "**/vant/index.vue", "**/iview/index.vue"],
   },
   function (er, files) {
     console.info(`正在对${files.length}个文件进行编译...`);
     files.forEach((filePath) => {
       console.info(`正在编译${filePath}`);
-      
+      compiler(filePath);
     });
   }
-);
+);

src/script/compileComponent.js

@@ -178,7 +178,7 @@ function findAObject(array, propertyName) {
   return module ? module[propertyName] : null;
 }
 
-module.exports = async function (path) {
+async function compiler(path) {
   if (!_path.isAbsolute(path)) path = _path.join(process.cwd(), path);
   if (fse.pathExistsSync(path)) {
     const xmlData = fs.readFileSync(path, {
@@ -277,4 +277,9 @@ function outputToFile(sourceObject, path) {
   const outputPath = _path.join(process.cwd(), path);
   fse.ensureFileSync(outputPath);
   fs.writeFileSync(outputPath, `export default ${JSON.stringify(sourceObject)}`);
+}
+
+module.exports = {
+  compiler,
+  ergodic
 }

src/test/compileVueOnline.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="container" style="min-height: 100%; padding-bottom: 100px;">
+
+    <div>
+
+      <el-input v-model="code" type="textarea" :rows="4" />
+      <el-button lc-mark @click="compile">解析</el-button>
+
+    </div>
+    <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
+  </div>
+</template>
+
+<script>
+import { html2Json } from '../libs/bundle-html2json-esm';
+import vcc from '../components-v2/VCC.vue';
+import { ergodic } from '../utils/common';
+
+function findAObject(array, propertyName) {
+  const module = array.find(function (ele) {
+    return ele[propertyName];
+  });
+  return module || null;
+}
+
+export default {
+  props: [],
+  components: {
+    vcc,
+  },
+  data: () => {
+    return {
+      code: '',
+      codeStructure: ""
+    }
+  },
+  watch: {},
+  computed: {},
+  beforeCreate: () => { },
+  created: () => { },
+  beforeMount: () => { },
+  mounted: async () => {
+  },
+  beforeUpdate: () => { },
+  updated: () => { },
+  destoryed: () => { },
+  methods: {
+    async compile() {
+      const obj = await html2Json(this.code);
+
+      const template = findAObject(obj.root.__children, 'template');
+
+      ergodic(template);
+
+      this.codeStructure = template;
+
+    },
+    onCodeUpdate(newCodeEntity) {
+      // 编辑后新的代码结构
+    }
+  },
+  fillter: {},
+}
+</script>
+
+<style scoped>
+.container {
+}
+</style>

src/utils/common.js

@@ -1,4 +1,5 @@
 import isEqual from "lodash/isEqual";
+import cryptoRandomString from "crypto-random-string";
 
 export function getRawComponentKey(__rawVueInfo__) {
     return Object.keys(__rawVueInfo__)[0];
@@ -21,4 +22,35 @@ export function isArray(arr) {
 
 export function isObject(obj) {
     return Object.prototype.toString.apply(obj) === "[object Object]";
+}
+
+ /**
+* 遍历对象，添加ID
+* @param {*} jsonObj
+*/
+export function ergodic(jsonObj) {
+ if (jsonObj) {
+   for (const key in jsonObj) {
+     if (jsonObj.hasOwnProperty(key)) {
+       const element = jsonObj[key];
+
+       if (isArray(element)) {
+         element.forEach((item) => {
+           if (isObject(item)) {
+             ergodic(item);
+             delete item.lc_id;
+           }
+         });
+       } else if (isObject(element)) {
+         ergodic(element);
+       } else {
+       }
+     }
+   }
+
+   // 添加ID
+   if (!jsonObj["lc_id"]) {
+     jsonObj["lc_id"] = cryptoRandomString({ length: 10, type: "base64" });
+   }
+ }
 }