@lcap/nasl 3.3.0-beta.0 → 3.4.0-alpha.1

package/out/concepts/ViewElement__.js

@@ -44,7 +44,7 @@ const Logic__1 = require("./Logic__");
 const config_1 = require("../config");
 const MemberExpression__1 = __importDefault(require("./MemberExpression__"));
 const Identifier__1 = __importDefault(require("./Identifier__"));
-const View__1 = require("./View__");
+const utils_1 = require("../utils");
 /**
  * 自闭合标签
  */
@@ -100,18 +100,14 @@ 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),
+            })).filter((item) => item.expression),
+            typeArguments: astNode.arguments.map((argument) => (transAstNodeToNaslTypeNode(Object.assign({}, argument)))).filter((item) => item),
         };
     }
     else if (astNode.type === 'MemberExpression') {
@@ -212,18 +208,14 @@ function transAstNodeToNaslNode(astNode, namespace) {
             kind: 'Expression',
             parentNode: astNode.parentNode,
             parentKey: astNode.parentKey,
-            arguments: astNode?.body?.arguments
-                ?.map((argument) => ({
+            arguments: astNode?.body?.arguments?.map((argument) => ({
                 concept: 'Argument',
                 name: '',
                 kind: 'Statement',
                 keyword: '',
                 expression: transAstNodeToNaslNode(Object.assign({}, argument)),
-            }))
-                .filter((item) => item.expression),
-            typeArguments: astNode?.body?.arguments
-                ?.map((argument) => transAstNodeToNaslTypeNode(Object.assign({}, argument)))
-                .filter((item) => item),
+            })).filter((item) => item.expression),
+            typeArguments: astNode?.body?.arguments?.map((argument) => (transAstNodeToNaslTypeNode(Object.assign({}, argument)))).filter((item) => item)
         };
         node = Logic__1.Logic.from({
             ...tempNode,
@@ -254,63 +246,52 @@ function transAstNodeToNaslTypeNode(astNode, namespace) {
 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 View__1 = require("./View__");
 /**
  * 页面元素
  */
-let ViewElement = ViewElement_1 = 
-// @ts-ignore
-class ViewElement extends BaseNode_1.default {
-    /** 类名 */
-    static ConceptName = 'ViewElement';
+let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
     /**
      * 产品概念
      */
-    // @ts-ignore
-    concept;
+    concept = 'ViewElement';
     /**
      * 类型
      */
-    // @ts-ignore
-    type;
+    type = undefined;
     /**
      * 元素标签
      */
-    // @ts-ignore
-    tag;
+    tag = undefined;
     /**
      * 页面元素名称
      */
-    // @ts-ignore
-    name;
+    name = undefined;
     /**
      * 静态 class 名
      */
-    // @ts-ignore
-    staticClass;
+    staticClass = undefined;
     /**
      * 静态 style
      */
-    // @ts-ignore
-    staticStyle;
+    staticStyle = undefined;
     /**
      * 权限资源描述
      */
-    // @ts-ignore
-    authDescription;
+    authDescription = undefined;
     /**
      * 插槽目标
      */
-    // @ts-ignore
-    slotTarget;
+    slotTarget = undefined;
     /**
      * 插槽 scope 表达式
      */
-    // @ts-ignore
-    slotScope;
+    slotScope = undefined;
     /**
      * 元素绑定属性列表
      */
@@ -367,6 +348,9 @@ class ViewElement extends BaseNode_1.default {
         super(source);
         super.subConstructor(source);
     }
+    getClassName() {
+        return 'ViewElement';
+    }
     /**
      * 从父级删除该节点
      * @internal
@@ -414,9 +398,7 @@ class ViewElement extends BaseNode_1.default {
     }
     getBindAttributeExistingNames(excludedList = []) {
         const excludedSet = new Set(excludedList);
-        return (this.bindAttrs || [])
-            .filter((item) => !excludedSet.has(item))
-            .map((item) => item.name);
+        return (this.bindAttrs || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindAttributeUniqueName(name = 'bindAttribute1') {
         return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
@@ -536,9 +518,7 @@ class ViewElement extends BaseNode_1.default {
     }
     getBindDirectiveExistingNames(excludedList = []) {
         const excludedSet = new Set(excludedList);
-        return (this.bindDirectives || [])
-            .filter((item) => !excludedSet.has(item))
-            .map((item) => item.name);
+        return (this.bindDirectives || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindDirectiveUniqueName(name = 'bindDirective1') {
         return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
@@ -897,9 +877,7 @@ class ViewElement extends BaseNode_1.default {
     get parentAuth() {
         const _nameSpace = this.view.getNamespace();
         const mainViewName = _nameSpace.split('.')[2];
-        return this.view.parentNode.concept === 'App'
-            ? this.view.auth
-            : this.frontend.views.find((item) => item.name === mainViewName)?.auth;
+        return this.view.parentNode.concept === 'App' ? this.view.auth : this.frontend.views.find((item) => item.name === mainViewName)?.auth;
     }
     // IDE内展示需要屏蔽掉“系统统一路径前缀”
     get uiPath() {
@@ -977,113 +955,94 @@ class ViewElement extends BaseNode_1.default {
         }
         return code;
     }
-    toEmbeddedTSVariableDefinition(state, variableList, nameLevel) {
+    toEmbeddedTSVariableDefinition(state, variableList) {
         let code = '';
-        let currentLevel = nameLevel ? `${nameLevel}?.` : '';
-        currentLevel += `${this.name}?.()`;
-        if (View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP?.[this.tag]) {
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += `${this.name}: {\n`;
-            if (Array.isArray(this.bindAttrs)) {
-                this.bindAttrs
-                    .filter((attr) => View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP[this.tag]?.[attr.name])
-                    .forEach((attr) => {
-                    code += attr.toEmbeddedTSVariableDefinition((0, translator_1.shiftState)(state, code, { inline: true }), variableList, this.name, currentLevel);
-                });
-                if (['u-select', 'van-pickerson'].includes(this.tag)) {
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `pageNumber: nasl.core.Long\n`;
-                }
-                else if (['u-list-view', 'u-grid-view', 'u-table-view', 'van-list-view', 'van-grid-view'].includes(this.tag) &&
-                    this.bindAttrs?.findIndex((attr) => attr.name === 'sorting') === -1) {
-                    code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                    code += `sorting: {
-                      field: nasl.core.String
-                      order: nasl.core.String
-                  }\n`;
-                }
-            }
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += `};\n`;
-        }
-        if (Array.isArray(this.children)) {
-            this.children.forEach((element) => {
-                code += element.toEmbeddedTSVariableDefinition((0, translator_1.shiftState)(state, code), variableList, currentLevel);
+        code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
+        code += `${this.name}: {\n`;
+        if (Array.isArray(this.bindAttrs)) {
+            this.bindAttrs.filter((attr) => View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP[this.tag]?.[attr.name]).forEach((attr) => {
+                code += attr.toEmbeddedTSVariableDefinition((0, translator_1.shiftState)(state, code, { inline: true }), variableList, this.name);
             });
+            if (['u-select', 'van-pickerson'].includes(this.tag)) {
+                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
+                code += `pageNumber: nasl.core.Long\n`;
+            }
+            else if (['u-list-view', 'u-grid-view', 'u-table-view', 'van-list-view', 'van-grid-view'].includes(this.tag) && this.bindAttrs?.findIndex((attr) => attr.name === 'sorting') === -1) {
+                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
+                code += `sorting: {
+                    field: nasl.core.String
+                    order: nasl.core.String
+                }\n`;
+            }
         }
+        code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
+        code += `}`;
         return code;
     }
-    toEmbeddedTSVariableFunctionDefinition(state, parentLevel) {
+    toNaturalTS(state = (0, translator_1.createCompilerState)(), parentLevel) {
         let code = '';
-        code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-        let levelIndex = parentLevel || 0;
-        code += `${this.name}: () => {\n`;
-        if (this.tag === 'template' && this.haveScope() && this.parentNode instanceof ViewElement_1) {
-            const currentType = this.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
-            const _this = this.parentNode;
-            let genericity = '';
-            if (_this.tag === 'u-table-view-column-dynamic') {
-                genericity += `<${_this.parentNode.__tsVariableDataSourceTypeName}, ${_this.__tsVariableDataSourceTypeName}>`;
-            }
-            else {
-                let targetNode = _this;
-                while (!targetNode.__tsVariableDataSourceTypeName && targetNode?.parentNode instanceof ViewElement_1) {
-                    targetNode = targetNode.parentNode;
-                }
-                genericity += `<${targetNode.__tsVariableDataSourceTypeName ?? 'any'}>`;
-            }
-            code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-            code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}${genericity}\n`;
-            levelIndex++;
+        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';
+            });
         }
-        const attr = this.bindAttrs?.find((item) => item.name === 'data-source');
-        if (attr && attr.expression) {
-            const datasourceName = `datasourceName${this.name}`;
-            this.__tsVariableDataSourceTypeName = datasourceName;
-            if (attr.expression instanceof MemberExpression__1.default ||
-                attr.expression instanceof Identifier__1.default ||
-                attr.expression instanceof concepts_1.CallLogic) {
-                const extraParams = {
-                    tabSize: 4,
-                    inline: true,
-                    noNeedParams: true,
-                };
-                let value = attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<typeof ${value}>;\n`;
-                // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<typeof ${value}>>;\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 {
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `const __funcName = () => { return `;
-                code += attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code));
-                code += '};\n';
-                code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-                code += `type ${datasourceName} = nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>;\n`;
-                // code += `let current${levelIndex === 0 ? '' : levelIndex}: nasl.ui.${currentType}<nasl.ui.GetItemTypeFromDataSource<ReturnType<typeof __funcName>>>;\n`;
+                this.children.forEach((element) => {
+                    code += element.toNaturalTS((0, translator_1.shiftState)(state, code, {
+                        tabSize: state.tabSize,
+                    }), levelIndex);
+                });
             }
         }
-        code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-        code += `return {\n`;
-        if (Array.isArray(this.bindAttrs)) {
-            this.bindAttrs
-                .filter((attr) => View__1.PAGE_COMPONENT_INCLUDE_TAG_MAP[this.tag]?.[attr.name])
-                .forEach((attr) => {
-                code += attr.toEmbeddedTSVariableFunctionDefinition((0, translator_1.shiftState)(state, code, { inline: true }));
-            });
+        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.toEmbeddedTSVariableFunctionDefinition((0, translator_1.shiftState)({ ...state, tabSize: state.tabSize + 2 }, code), levelIndex);
+                code += element.toNaturalTSDefinition((0, translator_1.shiftState)(state, code));
             });
         }
-        code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
-        code += `}\n`;
-        code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-        code += `},\n`;
         return code;
     }
-    getTypeArgmentsStr(state, currentNode) {
+    getTypeArgmentsStr(state) {
         // 登录组件不翻译
         if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
             return '<any>';
@@ -1104,10 +1063,6 @@ class ViewElement extends BaseNode_1.default {
             }
             return code;
         }
-        if (this.tag === 'u-table-view-column-group') {
-            code += `<${this.parentNode.__tsDataSourceTypeName}>`;
-            return code;
-        }
         const bindAttrs = this.bindAttrs;
         if (bindAttrs && bindAttrs.length) {
             const attr = bindAttrs.find((item) => item.name === 'data-source');
@@ -1131,13 +1086,11 @@ class ViewElement extends BaseNode_1.default {
                 if (attr && attr.expression) {
                     const datasourceName = `datasourceName${element.name}`;
                     element.__tsDataSourceTypeName = datasourceName;
-                    if (attr.expression instanceof MemberExpression__1.default ||
-                        attr.expression instanceof Identifier__1.default ||
-                        attr.expression instanceof concepts_1.CallLogic) {
+                    if (attr.expression instanceof MemberExpression__1.default || attr.expression instanceof Identifier__1.default || attr.expression instanceof concepts_1.CallLogic) {
                         const extraParams = {
                             tabSize: 4,
                             inline: true,
-                            noNeedParams: true,
+                            noNeedParams: true
                         };
                         let value = attr.expression.toEmbeddedTS((0, translator_1.shiftState)(state, code, attr.expression.concept === 'CallLogic' ? extraParams : {}));
                         code += `type ${datasourceName} = `;
@@ -1158,7 +1111,7 @@ 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;
             // 匹配所有特殊字符都转为_
@@ -1169,7 +1122,8 @@ class ViewElement extends BaseNode_1.default {
             return tsName;
         };
         // 过滤模板的登录中的一些翻译，这里只过滤h5表格中的两个列
-        if ((parentNode.concept === 'ViewElement' && parentNode.tag && this.toHump(parentNode.tag) === 'lcapLogin') ||
+        if (parentNode.concept === 'ViewElement' &&
+            parentNode.tag && this.toHump(parentNode.tag) === 'lcapLogin' ||
             staticClass === 'login-cell') {
             return '';
         }
@@ -1198,7 +1152,7 @@ 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 += ']';
@@ -1214,7 +1168,7 @@ 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 += (0, translator_1.indent)((state?.tabSize || 0) + 2);
@@ -1232,7 +1186,7 @@ class ViewElement extends BaseNode_1.default {
         // 角色
         if (Array.isArray(bindRoles) && bindRoles.length) {
             code += (0, translator_1.indent)((state?.tabSize || 0) + 2);
-            code += 'roles: [\n';
+            code += 'roles = [\n';
             bindRoles.forEach((role) => {
                 code += (0, translator_1.indent)((state?.tabSize || 0) + 3);
                 code += `${app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
@@ -1255,9 +1209,9 @@ 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'));
+                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';
             }
             // 如果子集中有插槽的就
@@ -1268,7 +1222,7 @@ 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 {
@@ -1310,7 +1264,7 @@ 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';
@@ -1406,20 +1360,9 @@ class ViewElement extends BaseNode_1.default {
         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) {
+        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',
@@ -1438,18 +1381,7 @@ 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);
         });
@@ -1522,8 +1454,8 @@ 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];
@@ -1557,8 +1489,8 @@ 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) {
@@ -1661,8 +1593,7 @@ class ViewElement extends BaseNode_1.default {
             finalCode: false,
             nodePathAttr: true,
             attrFormat: (attr, element, defaultResult) => {
-                if (attr.concept === 'BindAttribute' &&
-                    !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
+                if (attr.concept === 'BindAttribute' && !['href', 'destination', 'externalDestination', 'download'].includes(attr.name)) {
                     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') {
@@ -1686,8 +1617,7 @@ class ViewElement extends BaseNode_1.default {
                             return `${attr.name}="${designerValue}"`;
                         }
                     }
-                    if (attr.type === 'dynamic' &&
-                        !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
+                    if (attr.type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
                         return defaultResult.replace(/:?([\w-]+)(?:.*?)="([\s\S]*)"/, (m, name, value) => {
                             try {
                                 const tempValue = json5.parse(value);
@@ -1731,7 +1661,11 @@ 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;
                         }
@@ -1741,21 +1675,7 @@ 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' : '');
@@ -1764,7 +1684,7 @@ 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"');
                     }
                 }
@@ -1796,22 +1716,6 @@ class ViewElement extends BaseNode_1.default {
         }
         return refName;
     }
-    get keyName() {
-        // 是否配置了v-if
-        const isDefineIf = this.bindDirectives.some((directive) => (directive.name === 'if' && directive.expression));
-        if (isDefineIf) {
-            let key = this.name;
-            const list = this.getCurrentList();
-            // v-for中需要加上nodeKey
-            if (Array.isArray(list) && list.length) {
-                list.forEach((item) => {
-                    key += `_\${(${item} || {}).__nodeKey || (${item} || {}).index}`;
-                });
-            }
-            return key;
-        }
-        return null;
-    }
     /**
      * 转换成 Vue 的模板格式
      */
@@ -1845,15 +1749,13 @@ class ViewElement extends BaseNode_1.default {
         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 = Object.assign({}, newOptions);
+            childOptions.indentLevel++;
+            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
+        })
+            .join('');
         if (!content.length) {
             shouldIndent = false;
         }
@@ -1869,19 +1771,12 @@ 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.keyName && parts.push(`:key="\`${this.keyName}\`"`);
         this.staticClass && parts.push(`class="${this.staticClass}"`);
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
         const vIfs = [];
-        []
-            .concat(this.bindAttrs, this.bindDirectives, this.bindEvents)
-            .forEach((attr) => {
+        [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr) => {
             const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
             // v-auth v-if 都翻译成 v-if
             if (attr instanceof BindDirective__1.default && ['if', 'auth'].includes(attr.name) && result !== false) {
@@ -1908,8 +1803,7 @@ class ViewElement extends BaseNode_1.default {
             });
         }
         // 部分组件增加 key 唯一标识，防止 vue 判断重复节点，导致渲染异常
-        if (this.name &&
-            ['u-table-view', 'u-list-view', 'u-grid-view', 'u-list-components', 'u-form', 'u-select'].includes(this.tag)) {
+        if (this.name && ['u-table-view', 'u-list-view', 'u-grid-view', 'u-list-components', 'u-form', 'u-select'].includes(this.tag)) {
             this.name && parts.push(`key="${this.name}"`);
         }
         let partsLength = 0;
@@ -1922,10 +1816,7 @@ class ViewElement extends BaseNode_1.default {
             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 : ''} />`;
         }
@@ -1972,7 +1863,7 @@ class ViewElement extends BaseNode_1.default {
             }
             parent = parent.parentNode;
         }
-        current = index === 0 ? 'current' : 'current' + index;
+        current = (index === 0 ? 'current' : 'current' + index);
         return current;
     }
     /**
@@ -1989,8 +1880,8 @@ class ViewElement extends BaseNode_1.default {
         const staticHeight = nodeRect.height;
         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 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';
@@ -2024,9 +1915,9 @@ 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') {
@@ -2050,9 +1941,9 @@ 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') {
@@ -2106,21 +1997,24 @@ class ViewElement extends BaseNode_1.default {
         return styleObj;
     }
     stringifyStyleAttr(styleObj) {
-        return (Object.keys(styleObj)
+        return Object.keys(styleObj)
             // 空字符串是允许的，因为有时候想要覆盖之前的样式。undefined 则不允许
-            .filter((key) => styleObj[key] !== 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],
         });
     }
 };
+__decorate([
+    (0, decorators_1.property)()
+], ViewElement.prototype, "concept", void 0);
 __decorate([
     (0, decorators_1.property)()
 ], ViewElement.prototype, "type", void 0);
@@ -2163,6 +2057,9 @@ __decorate([
 __decorate([
     (0, decorators_1.property)('ViewElement')
 ], ViewElement.prototype, "children", void 0);
+__decorate([
+    (0, translator_1.withSourceMap)()
+], ViewElement.prototype, "toNaturalTS", null);
 __decorate([
     (0, translator_1.withSourceMap)()
 ], ViewElement.prototype, "toEmbeddedTS", null);
@@ -2170,11 +2067,10 @@ __decorate([
     (0, decorators_1.excludedInJSON)()
 ], ViewElement.prototype, "computedStyle", void 0);
 ViewElement = ViewElement_1 = __decorate([
-    decorators_1.className,
     (0, decorators_1.concept)('页面元素')
-    // @ts-ignore
 ], ViewElement);
 exports.ViewElement = ViewElement;
+classMap_1.default.ViewElement = ViewElement;
 exports.default = ViewElement;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑