update: 完全升级Vue3过程中的记录

src/libs/bundle-core-esm.js

@@ -1,7 +1,7 @@
 //该文件会遍历Object，获取关键的class,事件,data, 最终拼装为一个完整的SFC文件
-
-import stringifyObject from 'stringify-object';
-import _ from 'lodash';
+import stringifyObject from '@/libs/stringify-object'
+import merge from 'lodash-es/merge';
+import cloneDeep from 'lodash-es/cloneDeep';
 import prettier from 'prettier/standalone.js';
 import parserBabel from 'prettier/parser-babel.js';
 
@@ -422,14 +422,6 @@ const scriptTemplate = `{
     fillter: {},
   };`;
 
-const { merge, cloneDeep } = _;
-
-const rawAdd = Set.prototype.add;
-Set.prototype.add = function (value) {
-  if (typeof value === "string" && checkKeyword(value))
-    rawAdd.apply(this, arguments);
-};
-
 function checkKeyword(value) {
   return value != "true" && value != "false";
 }
@@ -499,7 +491,7 @@ function findVarFormExpression(expression) {
   }
 }
 
-class CodeGenerator {
+export class CodeGenerator {
 
   constructor(options = {}) {
     this.options = options;
@@ -629,23 +621,23 @@ class CodeGenerator {
       classes.forEach((item) => {
         // 处理多个空字符串
         if (!item) return;
-        this.classSet.add(item);
+        this.classSet.addeee(item);
       });
     } else if (/^v-on/g.test(key) || /^@/g.test(key)) {
       // 匹配@,v-on
       if (getVarName(value)) {
-        this.methodSet.add(value);
+        this.methodSet.addeee(value);
       }
     } else if (/^v-/g.test(key) || /^:+/g.test(key)) {
       // 优先使Method消费，因为有的:也是method
       if (this.options.checkIsMethodDirectives && this.options.checkIsMethodDirectives(key)) {
         value = getVarName(value);
-        value && this.methodSet.add(value);
+        value && this.methodSet.addeee(value);
       } else
         // 业务侧可能会全部消费/^:+/g.test(key)
         if (this.options.checkIsDataDirectives && this.options.checkIsDataDirectives(key)) {
           value = getVarName(value);
-          value && this.dataSet.add(value);
+          value && this.dataSet.addeee(value);
         } else {
           this.options.unSupportedKey && this.options.unSupportedKey(key, value);
         }
@@ -655,7 +647,7 @@ class CodeGenerator {
         // 用于匹配v-text {{}}
         const temp = findVarFormExpression(value);
         temp.forEach((element) => {
-          this.dataSet.add(element);
+          this.dataSet.addeee(element);
         });
       }
     } else {
@@ -693,4 +685,15 @@ class CodeGenerator {
   }
 }
 
-export { CodeGenerator };
+
+const rawAdd = Set.prototype.add;
+try {
+  //为何不能给add赋值？且没有报错？
+  Set.prototype.addeee = function (value) {
+    if (typeof value === "string" && checkKeyword(value))
+      rawAdd.apply(this, arguments);
+  };
+  // 经验证可以赋值，而代码会直接跳转至最后一行
+} catch (error) {
+  console.error(error);
+}

src/libs/bundle-html2json-esm.js

@@ -1,6 +1,5 @@
 //该文件用于解析HTML，输出为Object对象
-
-const htmlparser2 = require("htmlparser2");
+import htmlparser2 from "htmlparser2"
 
 function getNodeContent(node) {
   return node[Object.keys(node)[0]];

src/libs/code-generator-factory.js

@@ -1,8 +1,7 @@
 // 代码生成对象工厂，每次初始化需要获取一个新的实例，所以工厂方法模式最为适用
 import { CodeGenerator } from "./bundle-core-esm";
 import { checkIsDataDirectives, checkIsMethodDirectives } from '@/libs/directiveCheck';
-
-const stringifyObject = require("stringify-object");
+import stringifyObject from '@/libs/stringify-object'
 
 export function createNewCodeGenerator() {
     return new CodeGenerator({

src/libs/main-panel.js

@@ -9,8 +9,8 @@ import { parseComponent } from 'vue-template-compiler/browser';
 import { merge, insertPresetAttribute, getSplitTag, replaceRowID, updateLinkTree, findCodeElemNode, findRawVueInfo, removeAllID } from "@/utils/forCode";
 import { getRawComponentContent, getRawComponentKey, isObject } from '@/utils/common';
 import { createNewCodeGenerator } from "@/libs/code-generator-factory";
-const EventEmitter = require('eventemitter3');
-const { cloneDeep } = require('lodash');
+import EventEmitter from 'eventemitter3'
+import { cloneDeep } from 'lodash-es';
 
 /**
  * 主控制面板辅助类，用于代码的生成与绘制
@@ -64,17 +64,16 @@ export class MainPanelProvider {
         let newScript = script.content.replace(/\s*export default\s*/, "")
 
         const componentOptions = (new Function(`return ${newScript}`))();
-
-        const res = Vue.compile(template.content);
+        const render = compile(template.content);
 
         componentOptions.render = function () {
-            const rootVNode = res.render.apply(this, arguments);
+            const rootVNode = render.apply(this, arguments);
             return rootVNode;
         };
-        componentOptions.staticRenderFns = res.staticRenderFns;
+        // componentOptions.staticRenderFns = render.staticRenderFns;
 
         // 渲染当前代码
-        new Vue(componentOptions).$mount(readyForMoutedElement);
+        createBaseApp(componentOptions).mount(readyForMoutedElement);
 
         // 拍平数据结构
         this.editMode && this.flatDataStructure(rawDataStructure);

src/libs/stringify-object.js

@@ -0,0 +1,139 @@
+import isRegexp from 'is-regexp';
+import isObject from 'is-obj';
+
+const getOwnEnumPropSymbols = (object) => Object
+.getOwnPropertySymbols(object)
+.filter((keySymbol) => Object.prototype.propertyIsEnumerable.call(object, keySymbol));
+
+export default function stringifyObject(input, options, pad) {
+	const seen = [];
+
+	return (function stringify(input, options = {}, pad = '') {
+		const indent = options.indent || '\t';
+
+		let tokens;
+		if (options.inlineCharacterLimit === undefined) {
+			tokens = {
+				newline: '\n',
+				newlineOrSpace: '\n',
+				pad,
+				indent: pad + indent,
+			};
+		} else {
+			tokens = {
+				newline: '@@__STRINGIFY_OBJECT_NEW_LINE__@@',
+				newlineOrSpace: '@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@',
+				pad: '@@__STRINGIFY_OBJECT_PAD__@@',
+				indent: '@@__STRINGIFY_OBJECT_INDENT__@@',
+			};
+		}
+
+		const expandWhiteSpace = string => {
+			if (options.inlineCharacterLimit === undefined) {
+				return string;
+			}
+
+			const oneLined = string
+				.replace(new RegExp(tokens.newline, 'g'), '')
+				.replace(new RegExp(tokens.newlineOrSpace, 'g'), ' ')
+				.replace(new RegExp(tokens.pad + '|' + tokens.indent, 'g'), '');
+
+			if (oneLined.length <= options.inlineCharacterLimit) {
+				return oneLined;
+			}
+
+			return string
+				.replace(new RegExp(tokens.newline + '|' + tokens.newlineOrSpace, 'g'), '\n')
+				.replace(new RegExp(tokens.pad, 'g'), pad)
+				.replace(new RegExp(tokens.indent, 'g'), pad + indent);
+		};
+
+		if (seen.includes(input)) {
+			return '"[Circular]"';
+		}
+
+		if (
+			input === null
+			|| input === undefined
+			|| typeof input === 'number'
+			|| typeof input === 'boolean'
+			|| typeof input === 'function'
+			|| typeof input === 'symbol'
+			|| isRegexp(input)
+		) {
+			return String(input);
+		}
+
+		if (input instanceof Date) {
+			return `new Date('${input.toISOString()}')`;
+		}
+
+		if (Array.isArray(input)) {
+			if (input.length === 0) {
+				return '[]';
+			}
+
+			seen.push(input);
+
+			const returnValue = '[' + tokens.newline + input.map((element, i) => {
+				const eol = input.length - 1 === i ? tokens.newline : ',' + tokens.newlineOrSpace;
+
+				let value = stringify(element, options, pad + indent);
+				if (options.transform) {
+					value = options.transform(input, i, value);
+				}
+
+				return tokens.indent + value + eol;
+			}).join('') + tokens.pad + ']';
+
+			seen.pop();
+
+			return expandWhiteSpace(returnValue);
+		}
+
+		if (isObject(input)) {
+			let objectKeys = [
+				...Object.keys(input),
+				...getOwnEnumPropSymbols(input),
+			];
+
+			if (options.filter) {
+				objectKeys = objectKeys.filter(element => options.filter(input, element));
+			}
+
+			if (objectKeys.length === 0) {
+				return '{}';
+			}
+
+			seen.push(input);
+
+			const returnValue = '{' + tokens.newline + objectKeys.map((element, i) => {
+				const eol = objectKeys.length - 1 === i ? tokens.newline : ',' + tokens.newlineOrSpace;
+				const isSymbol = typeof element === 'symbol';
+				const isClassic = !isSymbol && /^[a-z$_][$\w]*$/i.test(element);
+				const key = isSymbol || isClassic ? element : stringify(element, options);
+
+				let value = stringify(input[element], options, pad + indent);
+				if (options.transform) {
+					value = options.transform(input, element, value);
+				}
+
+				return tokens.indent + String(key) + ': ' + value + eol;
+			}).join('') + tokens.pad + '}';
+
+			seen.pop();
+
+			return expandWhiteSpace(returnValue);
+		}
+
+		input = String(input).replace(/[\r\n]/g, x => x === '\n' ? '\\n' : '\\r');
+
+		if (options.singleQuotes === false) {
+			input = input.replace(/"/g, '\\"');
+			return `"${input}"`;
+		}
+
+		input = input.replace(/\\?'/g, '\\\'');
+		return `'${input}'`;
+	})(input, options, pad);
+}