@lcap/nasl 3.2.0-beta.4 → 3.3.0-alpha

package/out/concepts/ViewElement__.js

@@ -34,34 +34,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 var ViewElement_1;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ViewElement = void 0;
-const translator_1 = require("../translator");
-const concepts_1 = require("../concepts");
 const babelParser = __importStar(require("@babel/parser"));
 const json5 = __importStar(require("json5"));
 const compiler = __importStar(require("vue-template-compiler"));
-const LogicItem__1 = __importDefault(require("./LogicItem__"));
-const __1 = require("..");
+const translator_1 = require("../translator");
+const concepts_1 = require("../concepts");
+const LogicItem__1 = require("./LogicItem__");
+const config_1 = require("../config");
 const MemberExpression__1 = __importDefault(require("./MemberExpression__"));
 const Identifier__1 = __importDefault(require("./Identifier__"));
+const utils_1 = require("../utils");
+const decorators_1 = require("../decorators");
+const utils = __importStar(require("../utils"));
+const BaseNode_1 = __importDefault(require("../common/BaseNode"));
+const classMap_1 = __importDefault(require("../common/classMap"));
+const BindAttribute__1 = __importDefault(require("./BindAttribute__"));
+const BindEvent__1 = __importDefault(require("./BindEvent__"));
+const BindDirective__1 = __importDefault(require("./BindDirective__"));
+const BindStyle__1 = __importDefault(require("./BindStyle__"));
 /**
  * 自闭合标签
  */
-const selfClosingTag = [
-    'base',
-    'meta',
-    'area',
-    'embed',
-    'link',
-    'img',
-    'input',
-    'param',
-    'hr',
-    'br',
-    'source',
-    'track',
-    'wbr',
-    'col',
-];
+const selfClosingTag = ['base', 'meta', 'area', 'embed', 'link', 'img', 'input', 'param', 'hr', 'br', 'source', 'track', 'wbr', 'col'];
 function genArgumentMemberExpression(arr) {
     let expressionNode;
     const propertyName = arr.pop();
@@ -98,14 +92,16 @@ function transAstNodeToNaslNode(astNode, namespace) {
             kind: 'Expression',
             calleeNamespace: 'nasl.util',
             calleeName,
-            arguments: astNode.arguments.map((argument) => ({
+            arguments: astNode.arguments
+                .map((argument) => ({
                 concept: 'Argument',
                 name: '',
                 kind: 'Statement',
                 keyword: '',
-                expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-            })).filter((item) => item.expression),
-            typeArguments: astNode.arguments.map((argument) => (transAstNodeToNaslTypeNode(Object.assign({}, argument)))).filter((item) => item),
+                expression: transAstNodeToNaslNode({ ...argument }),
+            }))
+                .filter((item) => item.expression),
+            typeArguments: astNode.arguments.map((argument) => transAstNodeToNaslTypeNode({ ...argument })).filter((item) => item),
         };
     }
     else if (astNode.type === 'MemberExpression') {
@@ -159,17 +155,15 @@ function transAstNodeToNaslNode(astNode, namespace) {
         if (astNode?.value?.startsWith('__enumTypeAnnotation_')) {
             return null;
         }
-        else {
-            node = {
-                concept: 'StringLiteral',
-                kind: 'Expression',
-                name: '',
-                value: astNode.value,
-            };
-        }
+        node = {
+            concept: 'StringLiteral',
+            kind: 'Expression',
+            name: '',
+            value: astNode.value,
+        };
     }
     else if (astNode.type === 'UnaryExpression') {
-        const argument = astNode.argument;
+        const { argument } = astNode;
         if (argument.type === 'NumericLiteral') {
             node = {
                 concept: 'NumericLiteral',
@@ -215,14 +209,6 @@ function transAstNodeToNaslTypeNode(astNode, namespace) {
     }
     return node;
 }
-const decorators_1 = require("../decorators");
-const utils = __importStar(require("../utils"));
-const BaseNode_1 = __importDefault(require("../common/BaseNode"));
-const classMap_1 = __importDefault(require("../common/classMap"));
-const BindAttribute__1 = __importDefault(require("./BindAttribute__"));
-const BindEvent__1 = __importDefault(require("./BindEvent__"));
-const BindDirective__1 = __importDefault(require("./BindDirective__"));
-const BindStyle__1 = __importDefault(require("./BindStyle__"));
 /**
  * 页面元素
  */
@@ -315,7 +301,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
      * @param source 需要合并的部分参数
      */
     constructor(source) {
-        source = Object.assign({}, ViewElement_1.getDefaultOptions(), source);
+        // @ts-ignore
+        source = { ...ViewElement_1.getDefaultOptions(), ...source };
         super(source);
         super.subConstructor(source);
     }
@@ -665,7 +652,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (typeof options === 'string') {
             bindAttribute = this.bindAttrs.find((item) => item.name === options);
             if (!bindAttribute) {
-                throw new Error('找不到元素绑定属性 ' + options);
+                throw new Error(`找不到元素绑定属性 ${options}`);
             }
         }
         else {
@@ -674,7 +661,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return bindAttribute.delete();
     }
     __removeBindAttribute(bindAttribute) {
-        const parentKey = bindAttribute.parentKey;
+        const { parentKey } = bindAttribute;
         const params = {
             parentNode: this,
             parentKey,
@@ -701,7 +688,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (typeof options === 'string') {
             bindEvent = this.bindEvents.find((item) => item.name === options);
             if (!bindEvent) {
-                throw new Error('找不到元素绑定事件 ' + options);
+                throw new Error(`找不到元素绑定事件 ${options}`);
             }
         }
         else {
@@ -710,7 +697,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return bindEvent.delete();
     }
     __removeBindEvent(bindEvent) {
-        const parentKey = bindEvent.parentKey;
+        const { parentKey } = bindEvent;
         const params = {
             parentNode: this,
             parentKey,
@@ -737,7 +724,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (typeof options === 'string') {
             bindDirective = this.bindDirectives.find((item) => item.name === options);
             if (!bindDirective) {
-                throw new Error('找不到元素指令 ' + options);
+                throw new Error(`找不到元素指令 ${options}`);
             }
         }
         else {
@@ -746,7 +733,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return bindDirective.delete();
     }
     __removeBindDirective(bindDirective) {
-        const parentKey = bindDirective.parentKey;
+        const { parentKey } = bindDirective;
         const params = {
             parentNode: this,
             parentKey,
@@ -773,7 +760,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (typeof options === 'string') {
             bindStyle = this.bindStyles.find((item) => item.name === options);
             if (!bindStyle) {
-                throw new Error('找不到元素绑定样式 ' + options);
+                throw new Error(`找不到元素绑定样式 ${options}`);
             }
         }
         else {
@@ -782,7 +769,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return bindStyle.delete();
     }
     __removeBindStyle(bindStyle) {
-        const parentKey = bindStyle.parentKey;
+        const { parentKey } = bindStyle;
         const params = {
             parentNode: this,
             parentKey,
@@ -809,7 +796,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (typeof options === 'string') {
             viewElement = this.children.find((item) => item.name === options);
             if (!viewElement) {
-                throw new Error('找不到页面元素 ' + options);
+                throw new Error(`找不到页面元素 ${options}`);
             }
         }
         else {
@@ -818,7 +805,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return viewElement.delete();
     }
     __removeViewElement(viewElement) {
-        const parentKey = viewElement.parentKey;
+        const { parentKey } = viewElement;
         const params = {
             parentNode: this,
             parentKey,
@@ -840,10 +827,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return params;
     }
-    //================================================================================
+    //= ===============================================================================
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
-    //================================================================================
+    //= ===============================================================================
     /* 主页面有没有权限 */
     get parentAuth() {
         const _nameSpace = this.view.getNamespace();
@@ -926,7 +913,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         // formItem的单独处理
         if (this.tag === 'u-form-item') {
             if (Array.isArray(this.children) && this.children.length) {
-                const tag = this.children[0].tag;
+                const { tag } = this.children[0];
                 if (tag === 'u-input') {
                     code += '<nasl.core.String>';
                 }
@@ -939,7 +926,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }
             return code;
         }
-        const bindAttrs = this.bindAttrs;
+        const { bindAttrs } = this;
         if (bindAttrs && bindAttrs.length) {
             const attr = bindAttrs.find((item) => item.name === 'data-source');
             if (attr && attr.expression) {
@@ -956,7 +943,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     getDatasourceTypeCodeStr(state, eleArr) {
         let code = '';
         (eleArr || []).forEach((element, index) => {
-            const bindAttrs = element.bindAttrs;
+            const { bindAttrs } = element;
             if (bindAttrs && bindAttrs.length) {
                 const attr = bindAttrs.find((item) => item.name === 'data-source');
                 if (attr && attr.expression) {
@@ -982,20 +969,18 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return code;
     }
     toEmbeddedTS(state, parentLevel) {
-        const { parentNode, app, tag, staticClass, name, bindDirectives, bindRoles, bindEvents, children, } = this;
+        const { parentNode, app, tag, staticClass, name, bindDirectives, bindRoles, bindEvents, children } = this;
         const chineseTsName = (name) => {
             let tsName = name;
             // 匹配所有特殊字符都转为_
             tsName = tsName.replace(/[^\u4e00-\u9fa5a-zA-Z0-9]/g, '_');
             if (/^\d/.test(tsName)) {
-                tsName = '$' + tsName;
+                tsName = `$${tsName}`;
             }
             return tsName;
         };
         // 过滤模板的登录中的一些翻译，这里只过滤h5表格中的两个列
-        if (parentNode.concept === 'ViewElement' &&
-            parentNode.tag && this.toHump(parentNode.tag) === 'lcapLogin' ||
-            staticClass === 'login-cell') {
+        if ((parentNode.concept === 'ViewElement' && parentNode.tag && this.toHump(parentNode.tag) === 'lcapLogin') || staticClass === 'login-cell') {
             return '';
         }
         // pc事件翻译
@@ -1015,7 +1000,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         let levelIndex = parentLevel || 0;
         if (tag === 'template' && this.haveScope()) {
-            const slotTarget = !this.slotTarget ? 'slotDefault' : 'slot' + this.toFirstUpper(this.toHump(this.slotTarget));
+            const slotTarget = !this.slotTarget ? 'slotDefault' : `slot${this.toFirstUpper(this.toHump(this.slotTarget))}`;
             let code = '';
             code += `${slotTarget}: (current${levelIndex === 0 ? '' : levelIndex})=> {\n`;
             code += this.getDatasourceTypeCodeStr(state, this.children);
@@ -1023,7 +1008,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             code += 'return [';
             this.children.forEach((element) => {
                 code += element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
-                    tabSize: (state?.tabSize || 0),
+                    tabSize: state?.tabSize || 0,
                 }), levelIndex);
             });
             code += ']';
@@ -1031,15 +1016,15 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             code += '},\n';
             return code;
         }
-        else if (tag === 'template') {
-            const slotTarget = !this.slotTarget ? 'slotDefault' : 'slot' + this.toFirstUpper(this.toHump(this.slotTarget));
+        if (tag === 'template') {
+            const slotTarget = !this.slotTarget ? 'slotDefault' : `slot${this.toFirstUpper(this.toHump(this.slotTarget))}`;
             let code = '';
             code += `${slotTarget}: ()=> {\n`;
             code += this.getDatasourceTypeCodeStr(state, this.children);
             code += 'return [';
             this.children.forEach((element) => {
                 code += element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
-                    tabSize: (state?.tabSize || 0),
+                    tabSize: state?.tabSize || 0,
                 }), levelIndex);
             });
             code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
@@ -1080,10 +1065,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             code += (0, translator_1.indent)((state?.tabSize || 0) + 1);
             if (Array.isArray(this.bindAttrs)) {
                 code += `bindAttr: () => [\n`;
-                this.bindAttrs.forEach((attr) => code += attr.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 })) + ',\n');
-                this.bindDirectives.forEach((directive) => code += directive.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 })) + ',\n');
-                this.bindStyles.forEach((bindStyle) => code += bindStyle.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 })) + ',\n');
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 2) + '],\n';
+                this.bindAttrs.forEach((attr) => (code += `${attr.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))},\n`));
+                this.bindDirectives.forEach((directive) => (code += `${directive.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))},\n`));
+                this.bindStyles.forEach((bindStyle) => (code += `${bindStyle.toEmbeddedTS((0, translator_1.shiftState)(state, code, { tabSize: 1 }))},\n`));
+                code += `${(0, translator_1.indent)((state?.tabSize || 0) + 2)}],\n`;
             }
             // 如果子集中有插槽的就
             if (children.find((item) => item.tag === 'template' && item.slotTarget)) {
@@ -1093,7 +1078,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 children.forEach((element) => {
                     if (element.tag === 'template') {
                         code += element.toEmbeddedTS((0, translator_1.shiftState)(state, code, {
-                            tabSize: (state?.tabSize || 0),
+                            tabSize: state?.tabSize || 0,
                         }), levelIndex);
                     }
                     else {
@@ -1135,7 +1120,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 code += '}\n';
             }
         }
-        code += (0, translator_1.indent)((state?.tabSize || 0)) + '})';
+        code += `${(0, translator_1.indent)(state?.tabSize || 0)}})`;
         // 顶层元素是单独的表达式
         if (parentNode.concept === 'View') {
             code += ';\n';
@@ -1145,6 +1130,69 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return code;
     }
+    toNaturalTS(state, parentLevel) {
+        let code = '';
+        const levelIndex = parentLevel || 0;
+        if (Array.isArray(this.bindEvents)) {
+            this.bindEvents.forEach((event) => {
+                code += event.toNaturalTS((0, translator_1.shiftState)(state, code, {
+                    tabSize: state.tabSize,
+                }));
+                // code += '\n';
+            });
+        }
+        if (Array.isArray(this.children)) {
+            if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+                // code += indent(state.tabSize + 2);
+                const defaultArr = [];
+                // 先把插槽翻译了
+                this.children.forEach((element) => {
+                    if (element.tag === 'template') {
+                        code += element.toNaturalTS((0, translator_1.shiftState)(state, code, {
+                            tabSize: state.tabSize,
+                        }), levelIndex);
+                    }
+                    else {
+                        defaultArr.push(element);
+                    }
+                });
+                // 翻译其余的子集
+                if (defaultArr.length) {
+                    defaultArr.forEach((element) => {
+                        code += element.toNaturalTS((0, translator_1.shiftState)(state, code, {
+                            tabSize: state.tabSize,
+                        }), levelIndex);
+                    });
+                }
+            }
+            else {
+                this.children.forEach((element) => {
+                    code += element.toNaturalTS((0, translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize,
+                    }), levelIndex);
+                });
+            }
+        }
+        return code;
+    }
+    toNaturalTSDefinition(state) {
+        let code = '';
+        if (['u-button', 'u-form', 'u-modal', 'u-table-view', 'u-select', 'u-input', 'u-number-input'].includes(this.tag)) {
+            code += (0, translator_1.indent)(state.tabSize + 1);
+            // 登录组件不翻译
+            // if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form') {
+            //     code += `${this.name}: nasl.ui.div;\n`;
+            // } else {
+            code += `${this.name}: nasl.ui.${(0, utils_1.kebab2Camel)(this.tag.replace(/^\w-/, ''))},\n`;
+            // }
+        }
+        if (Array.isArray(this.children)) {
+            this.children.forEach((element) => {
+                code += element.toNaturalTSDefinition((0, translator_1.shiftState)(state, code));
+            });
+        }
+        return code;
+    }
     _duplicate() {
         const element = ViewElement_1.from(this.toTemplateJSON());
         const nameMap = element.deepRenameElements(this);
@@ -1188,7 +1236,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         try {
             const ast = babelParser.parseExpression(value);
             const node = transAstNodeToNaslNode(ast);
-            return LogicItem__1.default.from(node, null, null);
+            return LogicItem__1.LogicItem.from(node, null, null);
         }
         catch (e) {
             return null;
@@ -1208,7 +1256,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     name: '',
                     kind: 'Statement',
                     keyword: func?.params?.[index]?.name ?? '',
-                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+                    expression: transAstNodeToNaslNode({ ...argument }),
                 }));
             }
         }
@@ -1230,10 +1278,10 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     static _fromASTNode(astNode, context) {
         const view = context?.view;
         // 临时处理组件的 text
-        //h5-mock
-        if (['u-text', 'van-text', 'u-link', 'u-button', 'u-label', 'u-radio', 'u-checkbox', 'u-navbar-item', 'u-sidebar-item', 'u-menu-item'].includes(astNode.tag)
-            && astNode.children.length === 1
-            && astNode.children[0].type === 3) {
+        // h5-mock
+        if (['u-text', 'van-text', 'u-link', 'u-button', 'u-label', 'u-radio', 'u-checkbox', 'u-navbar-item', 'u-sidebar-item', 'u-menu-item'].includes(astNode.tag) &&
+            astNode.children.length === 1 &&
+            astNode.children[0].type === 3) {
             astNode.attrs = astNode.attrs || [];
             astNode.attrs.push({
                 name: 'text',
@@ -1252,7 +1300,18 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             delete astNode.scopedSlots;
         }
         // 提示不支持的属性
-        ['component', 'inlineTemplate', 'pre', 'ns', 'transition', 'transitionOnAppear', 'transitionMode', 'slotName', 'classBinding', 'styleBinding'].forEach((key) => {
+        [
+            'component',
+            'inlineTemplate',
+            'pre',
+            'ns',
+            'transition',
+            'transitionOnAppear',
+            'transitionMode',
+            'slotName',
+            'classBinding',
+            'styleBinding',
+        ].forEach((key) => {
             if (astNode[key])
                 console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
         });
@@ -1322,8 +1381,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 element.addBindAttribute(attr);
             });
             // compiler 处理:value.sync 时会加上update:value事件，需要过滤
-            astNode.events
-                && Object.keys(astNode.events)
+            astNode.events &&
+                Object.keys(astNode.events)
                     .filter((name) => !name.startsWith('update:'))
                     .forEach((name) => {
                     const oldEvent = astNode.events[name];
@@ -1357,8 +1416,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         }));
                     }
                 });
-            astNode.directives
-                && astNode.directives.forEach((directive) => {
+            astNode.directives &&
+                astNode.directives.forEach((directive) => {
                     if (directive.name === 'model') {
                         const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
                         if (!valueAttr) {
@@ -1396,7 +1455,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }
         }
         else if (astNode.type === 2) {
-            const tagName = __1.config.scope === 'h5' ? 'van-text' : 'u-text';
+            const tagName = config_1.config.scope === 'h5' ? 'van-text' : 'u-text';
             const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
             element = new ViewElement_1({
                 tag: tagName,
@@ -1412,7 +1471,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }));
         }
         else if (astNode.type === 3) {
-            const tagName = __1.config.scope === 'h5' ? 'van-text' : 'u-text';
+            const tagName = config_1.config.scope === 'h5' ? 'van-text' : 'u-text';
             const baseName = tagName.replace(ViewElement_1.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
             element = new ViewElement_1({
                 tag: tagName,
@@ -1438,7 +1497,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             preserveWhitespace: false,
             outputSourceRange: true,
         };
-        let ast = compiler.compile(code, compilerOptions).ast;
+        let { ast } = compiler.compile(code, compilerOptions);
         if (ast.tag === 'template' && !ast.slotTarget)
             ast = ast.children[0];
         return this._fromASTNode(ast, {
@@ -1462,14 +1521,14 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             nodePathAttr: true,
             attrFormat: (attr, element, defaultResult) => {
                 if (attr.concept === 'BindAttribute' && !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
-                    const api = __1.config?.allNodesAPI?.[element.tag];
+                    const api = config_1.config?.allNodesAPI?.[element.tag];
                     const apiOfAttr = api && api.attrs && api.attrs.find((_attr) => _attr.name === attr.name);
                     if (['u-form-item', 'u-validator', 'van-field'].includes(element.tag) && attr.name === 'rules') {
                         return `${attr.name}=""`;
                     }
                     if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
                         let designerValue = apiOfAttr['designer-value'];
-                        //对流程模板拖拽进行特判
+                        // 对流程模板拖拽进行特判
                         element.bindAttrs.forEach((property) => {
                             if (property.name === 'repeat' && property.value === '1')
                                 designerValue = '[{}, {}]';
@@ -1486,7 +1545,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                         }
                     }
                     if (attr.type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
-                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="(.*)"/, (m, name, value) => {
+                        return defaultResult.replace(/:?([\w-]+)(?:.*?)="([\s\S]*)"/, (m, name, value) => {
                             try {
                                 const tempValue = json5.parse(value);
                                 if (typeof tempValue === 'boolean' || typeof tempValue === 'number') {
@@ -1508,15 +1567,14 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                                 .replace(/\bcurrent\.item\.\b/g, '');
                             return `${name}="{{ ${value} }}"`;
                         });
-                    else
-                        return defaultResult;
+                    return defaultResult;
                 }
                 return false;
             },
             bindStylesFormat: (bindStyles, element) => false,
             getExtraParts: (el) => {
                 const parts = [];
-                const api = __1.config.allNodesAPI[el.tag];
+                const api = config_1.config.allNodesAPI[el.tag];
                 const emptySlot = api && api.slots && api.slots.find((slot) => slot.name === 'default' && slot['empty-background']);
                 const hasSupport = api && api.slots && api.slots.some((slot) => slot.support);
                 if (emptySlot || hasSupport) {
@@ -1529,11 +1587,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     }
                     if (childEmpty) {
                         let addEmpty = true;
-                        if (['u-grid-view',
-                            'u-list-view',
-                            'van-list-view',
-                            'van-grid-view',
-                            'u-carousel'].includes(el.tag)) {
+                        if (['u-grid-view', 'u-list-view', 'van-list-view', 'van-grid-view', 'u-carousel'].includes(el.tag)) {
                             const hasDataSource = el.bindAttrs.find((attr) => attr.name === 'data-source');
                             addEmpty = !hasDataSource;
                         }
@@ -1543,7 +1597,21 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                             if (hasAuto)
                                 addEmpty = false;
                         }
-                        if (['u-select', 'u-dropdown', 'u-panel', 'u-toc', 'u-toc-item', 'u-tree-view-new', 'u-tree-view-node-new', 'u-tree-select', 'u-tree-select-new', 'u-anchor', 'u-drawer', 'u-timeline', 'u-tabs'].includes(el.tag)) {
+                        if ([
+                            'u-select',
+                            'u-dropdown',
+                            'u-panel',
+                            'u-toc',
+                            'u-toc-item',
+                            'u-tree-view-new',
+                            'u-tree-view-node-new',
+                            'u-tree-select',
+                            'u-tree-select-new',
+                            'u-anchor',
+                            'u-drawer',
+                            'u-timeline',
+                            'u-tabs',
+                        ].includes(el.tag)) {
                             addEmpty = false;
                         }
                         const background = (emptySlot && emptySlot['empty-background']) || (hasSupport ? 'add-sub' : '');
@@ -1552,7 +1620,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 }
                 if (['u-router-view', 'van-router-view'].includes(el.tag)) {
                     const excludes = ['background-color:', 'background:', 'background-image:'];
-                    if (excludes.some((key) => (el.staticStyle && el.staticStyle.includes(key)))) {
+                    if (excludes.some((key) => el.staticStyle && el.staticStyle.includes(key))) {
                         parts.push(':designer="false"');
                     }
                 }
@@ -1567,7 +1635,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         let index = 0;
         while (parent && parent.concept !== 'View') {
             if (parent.slotScope) {
-                argsList.push(index === 0 ? 'current' : 'current' + index);
+                argsList.push(index === 0 ? 'current' : `current${index}`);
                 index++;
             }
             parent = parent.parentNode;
@@ -1595,7 +1663,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         if (this.slotScope) {
             currentList.unshift(this.slotScope);
         }
-        const newOptions = Object.assign({
+        const newOptions = {
             indentStyle: 'space',
             tabSize: 4,
             indentLevel: 0,
@@ -1611,19 +1679,21 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                     .filter((item) => item !== undefined)
                     .join(', ')}}"`;
             },
-        }, options, {
+            ...options,
             currentList,
-        });
+        };
         const tabString = ' '.repeat(newOptions.tabSize * newOptions.indentLevel);
         const insideTabString = ' '.repeat(newOptions.tabSize * (newOptions.indentLevel + 1));
         let shouldIndent = true;
-        const content = !this.children ? '' : this.children
-            .map((element) => {
-            const childOptions = Object.assign({}, newOptions);
-            childOptions.indentLevel++;
-            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
-        })
-            .join('');
+        const content = !this.children
+            ? ''
+            : this.children
+                .map((element) => {
+                const childOptions = { ...newOptions };
+                childOptions.indentLevel++;
+                return (shouldIndent ? `\n${insideTabString}` : '') + element?.toVue(childOptions);
+            })
+                .join('');
         if (!content.length) {
             shouldIndent = false;
         }
@@ -1639,7 +1709,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             parts.push(`vusion-node-path="${this.nodePath}"`);
         }
         // 模板里解析时候，可能会有多级嵌套的 current，所以当前有多少的长度，当前就是多大的下标
-        this.slotTarget && parts.push(`#${this.slotTarget}` + (this.slotScope ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"` : ''));
+        this.slotTarget &&
+            parts.push(`#${this.slotTarget}${this.slotScope ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"` : ''}`);
         this.refName && parts.push(`:ref="\`${this.refName}\`"`);
         this.staticClass && parts.push(`class="${this.staticClass}"`);
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
@@ -1678,13 +1749,13 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         let partsString = '';
         parts.forEach((part) => {
             if (partsLength >= 120 || part.length >= 120) {
-                partsString += '\n' + tabString + ' '.repeat(3); // ' '.repeat(el.tag.length + 1);
+                partsString += `\n${tabString}${' '.repeat(3)}`; // ' '.repeat(el.tag.length + 1);
                 partsLength = 0;
             }
-            partsString += ' ' + part;
+            partsString += ` ${part}`;
             partsLength += part.length;
         });
-        let htmlContent = `<${this.tag}${partsString.length ? partsString : ''}>` + content + (shouldIndent ? '\n' + tabString : '') + `</${this.tag}>`;
+        let htmlContent = `<${this.tag}${partsString.length ? partsString : ''}>${content}${shouldIndent ? `\n${tabString}` : ''}</${this.tag}>`;
         if (!content.trim() && selfClosingTag.includes(this.tag)) {
             htmlContent = `<${this.tag}${partsString.length ? partsString : ''} />`;
         }
@@ -1731,7 +1802,7 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             }
             parent = parent.parentNode;
         }
-        current = (index === 0 ? 'current' : 'current' + index);
+        current = index === 0 ? 'current' : `current${index}`;
         return current;
     }
     /**
@@ -1739,14 +1810,14 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
      * @param positionData 位置数据
      * @param doNotRecordLastWidthHeight 是否不记录上一次的宽高
      */
-    computeConstraintStyle(positionData, doNotRecordLastWidthHeight = false) {
+    computeConstraintStyle(positionData, ops = {}) {
         const { nodeRect, parentRect, parentBorder } = positionData;
         const staticWidth = nodeRect.width;
         const staticHeight = nodeRect.height;
-        const staticLeft = nodeRect.x - parentRect.x - parentBorder.left;
-        const staticTop = nodeRect.y - parentRect.y - parentBorder.top;
-        const staticRight = (parentRect.width - nodeRect.width - staticLeft - parentBorder.right - parentBorder.left);
-        const staticBottom = (parentRect.height - nodeRect.height - staticTop - parentBorder.bottom - parentBorder.top);
+        const staticLeft = nodeRect.left - parentRect.left - parentBorder.left;
+        const staticTop = nodeRect.top - parentRect.top - parentBorder.top;
+        const staticRight = parentRect.width - nodeRect.width - staticLeft - parentBorder.right - parentBorder.left;
+        const staticBottom = parentRect.height - nodeRect.height - staticTop - parentBorder.bottom - parentBorder.top;
         const styleObj = this.parseStyleToObject(this.staticStyle);
         const constraintX = styleObj['--constraint-x'] || 'left';
         const constraintY = styleObj['--constraint-y'] || 'top';
@@ -1766,12 +1837,12 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         const parentWidth = staticLeft + staticWidth + staticRight;
         const parentHeight = staticTop + staticHeight + staticBottom;
         if (constraintX === 'left') {
-            left = staticLeft + 'px';
+            left = `${staticLeft}px`;
             right = '';
         }
         else if (constraintX === 'right') {
             left = '';
-            right = staticRight + 'px';
+            right = `${staticRight}px`;
         }
         else if (constraintX === 'center') {
             const offset = staticLeft + staticWidth / 2 - parentWidth / 2;
@@ -1780,24 +1851,24 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             transform = 'translateX(-50%)';
         }
         else if (constraintX === 'scale') {
-            left = staticLeft * 100 / parentWidth + '%';
+            left = `${(staticLeft * 100) / parentWidth}%`;
             right = '';
-            width = staticWidth * 100 / parentWidth + '%';
+            width = `${(staticWidth * 100) / parentWidth}%`;
             constraintWidthAuto = 1;
         }
         else if (constraintX === 'left-right') {
-            left = staticLeft + 'px';
-            right = staticRight + 'px';
+            left = `${staticLeft}px`;
+            right = `${staticRight}px`;
             width = 'auto';
             constraintWidthAuto = 1;
         }
         if (constraintY === 'top') {
-            top = staticTop + 'px';
+            top = `${staticTop}px`;
             bottom = '';
         }
         else if (constraintY === 'bottom') {
             top = '';
-            bottom = staticBottom + 'px';
+            bottom = `${staticBottom}px`;
         }
         else if (constraintY === 'center') {
             const offset = staticTop + staticHeight / 2 - parentHeight / 2;
@@ -1806,14 +1877,14 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             transform = transform ? 'translate(-50%, -50%)' : 'translateY(-50%)';
         }
         else if (constraintY === 'scale') {
-            top = staticTop * 100 / parentHeight + '%';
+            top = `${(staticTop * 100) / parentHeight}%`;
             bottom = '';
-            height = staticHeight * 100 / parentHeight + '%';
+            height = `${(staticHeight * 100) / parentHeight}%`;
             constraintHeightAuto = 1;
         }
         else if (constraintY === 'top-bottom') {
-            top = staticTop + 'px';
-            bottom = staticBottom + 'px';
+            top = `${staticTop}px`;
+            bottom = `${staticBottom}px`;
             height = 'auto';
             constraintHeightAuto = 1;
         }
@@ -1828,11 +1899,8 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
             height,
             '--constraint-width-auto': constraintWidthAuto,
             '--constraint-height-auto': constraintHeightAuto,
-            // 如果上次已经是 auto 了，就用上上次的宽高
-            '--last-width': rawWidth === 'auto' ? styleObj['--last-width'] : rawWidth,
-            '--last-height': rawHeight === 'auto' ? styleObj['--last-height'] : rawHeight,
         };
-        if (!doNotRecordLastWidthHeight) {
+        if (!ops.doNotRecordLastWidthHeight) {
             if (rawWidth !== 'auto') {
                 newStyleObj['--last-width'] = rawWidth;
             }
@@ -1840,10 +1908,9 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
                 newStyleObj['--last-height'] = rawHeight;
             }
         }
+        ops.beforeSetStyleCb?.(newStyleObj);
         const newStaticStyle = this.stringifyStyleAttr(newStyleObj);
-        this.update({
-            staticStyle: newStaticStyle,
-        });
+        this.setStaticStyle(newStaticStyle);
     }
     updateStyleObj(styleObj) {
         this.setStaticStyle(this.stringifyStyleAttr({
@@ -1866,14 +1933,16 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         return styleObj;
     }
     stringifyStyleAttr(styleObj) {
-        return Object.keys(styleObj)
+        return (Object.keys(styleObj)
+            // 空字符串是允许的，因为有时候想要覆盖之前的样式。undefined 则不允许
+            .filter((key) => styleObj[key] !== undefined)
             .map((key) => `${key}:${String(styleObj[key]).trim()};`)
-            .join('');
+            .join(''));
     }
     // 批量更新绑定属性
     batchUpdateBindAttrs(attrOptions) {
-        const oldBindAttrs = this.bindAttrs.filter(it => !attrOptions.some(item => item.name === it.name));
-        const newBindAttrs = attrOptions.map(it => BindAttribute__1.default.from(it, this, 'bindAttrs'));
+        const oldBindAttrs = this.bindAttrs.filter((it) => !attrOptions.some((item) => item.name === it.name));
+        const newBindAttrs = attrOptions.map((it) => BindAttribute__1.default.from(it, this, 'bindAttrs'));
         this.update({
             bindAttrs: [...oldBindAttrs, ...newBindAttrs],
         });
@@ -1927,6 +1996,9 @@ __decorate([
 __decorate([
     (0, translator_1.withSourceMap)()
 ], ViewElement.prototype, "toEmbeddedTS", null);
+__decorate([
+    (0, translator_1.withSourceMap)()
+], ViewElement.prototype, "toNaturalTS", null);
 __decorate([
     (0, decorators_1.excludedInJSON)()
 ], ViewElement.prototype, "computedStyle", void 0);
@@ -1936,8 +2008,8 @@ ViewElement = ViewElement_1 = __decorate([
 exports.ViewElement = ViewElement;
 classMap_1.default.ViewElement = ViewElement;
 exports.default = ViewElement;
-//================================================================================
+//= ===============================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
 // 自动生成的代码已结束。下面可以手动编写。
-//================================================================================
+//= ===============================================================================
 //# sourceMappingURL=ViewElement__.js.map