@lcap/nasl 3.3.0-alpha.3 → 3.3.0-beta.0

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 utils_1 = require("../utils");
+const View__1 = require("./View__");
 /**
  * 自闭合标签
  */
@@ -100,14 +100,18 @@ 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') {
@@ -208,14 +212,18 @@ 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,
@@ -246,52 +254,63 @@ 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 = class ViewElement extends BaseNode_1.default {
+let ViewElement = ViewElement_1 = 
+// @ts-ignore
+class ViewElement extends BaseNode_1.default {
+    /** 类名 */
+    static ConceptName = 'ViewElement';
     /**
      * 产品概念
      */
-    concept = 'ViewElement';
+    // @ts-ignore
+    concept;
     /**
      * 类型
      */
-    type = undefined;
+    // @ts-ignore
+    type;
     /**
      * 元素标签
      */
-    tag = undefined;
+    // @ts-ignore
+    tag;
     /**
      * 页面元素名称
      */
-    name = undefined;
+    // @ts-ignore
+    name;
     /**
      * 静态 class 名
      */
-    staticClass = undefined;
+    // @ts-ignore
+    staticClass;
     /**
      * 静态 style
      */
-    staticStyle = undefined;
+    // @ts-ignore
+    staticStyle;
     /**
      * 权限资源描述
      */
-    authDescription = undefined;
+    // @ts-ignore
+    authDescription;
     /**
      * 插槽目标
      */
-    slotTarget = undefined;
+    // @ts-ignore
+    slotTarget;
     /**
      * 插槽 scope 表达式
      */
-    slotScope = undefined;
+    // @ts-ignore
+    slotScope;
     /**
      * 元素绑定属性列表
      */
@@ -348,9 +367,6 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         super(source);
         super.subConstructor(source);
     }
-    getClassName() {
-        return 'ViewElement';
-    }
     /**
      * 从父级删除该节点
      * @internal
@@ -398,7 +414,9 @@ let ViewElement = ViewElement_1 = 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);
@@ -518,7 +536,9 @@ let ViewElement = ViewElement_1 = 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);
@@ -877,7 +897,9 @@ let ViewElement = ViewElement_1 = 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() {
@@ -955,94 +977,113 @@ let ViewElement = ViewElement_1 = class ViewElement extends BaseNode_1.default {
         }
         return code;
     }
-    toEmbeddedTSVariableDefinition(state, variableList) {
+    toEmbeddedTSVariableDefinition(state, variableList, nameLevel) {
         let code = '';
-        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`;
+        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 += `}`;
         return code;
     }
-    toNaturalTS(state = (0, translator_1.createCompilerState)(), parentLevel) {
+    toEmbeddedTSVariableFunctionDefinition(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);
-                    });
+        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 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`;
             }
             else {
-                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 += `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`;
             }
         }
-        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`;
-            // }
+        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 }));
+            });
         }
         if (Array.isArray(this.children)) {
             this.children.forEach((element) => {
-                code += element.toNaturalTSDefinition((0, translator_1.shiftState)(state, code));
+                code += element.toEmbeddedTSVariableFunctionDefinition((0, translator_1.shiftState)({ ...state, tabSize: state.tabSize + 2 }, code), levelIndex);
             });
         }
+        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) {
+    getTypeArgmentsStr(state, currentNode) {
         // 登录组件不翻译
         if (this.toHump(this.tag) === 'lcapLogin' || this.staticClass === 'login-form')
             return '<any>';
@@ -1063,6 +1104,10 @@ let ViewElement = ViewElement_1 = 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');
@@ -1086,11 +1131,13 @@ let ViewElement = ViewElement_1 = 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} = `;
@@ -1111,7 +1158,7 @@ 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;
             // 匹配所有特殊字符都转为_
@@ -1122,8 +1169,7 @@ let ViewElement = ViewElement_1 = 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 '';
         }
@@ -1152,7 +1198,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 += ']';
@@ -1168,7 +1214,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 += (0, translator_1.indent)((state?.tabSize || 0) + 2);
@@ -1186,7 +1232,7 @@ let ViewElement = ViewElement_1 = 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)},`;
@@ -1209,9 +1255,9 @@ 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');
+                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';
             }
             // 如果子集中有插槽的就
@@ -1222,7 +1268,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 {
@@ -1264,7 +1310,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';
@@ -1360,9 +1406,20 @@ let ViewElement = ViewElement_1 = 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',
@@ -1381,7 +1438,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);
         });
@@ -1454,8 +1522,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];
@@ -1489,8 +1557,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) {
@@ -1593,7 +1661,8 @@ let ViewElement = ViewElement_1 = 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') {
@@ -1617,7 +1686,8 @@ let ViewElement = ViewElement_1 = 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);
@@ -1661,11 +1731,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;
                         }
@@ -1675,7 +1741,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' : '');
@@ -1684,7 +1764,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"');
                     }
                 }
@@ -1716,6 +1796,22 @@ let ViewElement = ViewElement_1 = 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 的模板格式
      */
@@ -1749,13 +1845,15 @@ let ViewElement = ViewElement_1 = 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;
         }
@@ -1771,12 +1869,19 @@ 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.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) {
@@ -1803,7 +1908,8 @@ let ViewElement = ViewElement_1 = 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;
@@ -1816,7 +1922,10 @@ let ViewElement = ViewElement_1 = 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 : ''} />`;
         }
@@ -1863,7 +1972,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;
     }
     /**
@@ -1880,8 +1989,8 @@ let ViewElement = ViewElement_1 = 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';
@@ -1915,9 +2024,9 @@ 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') {
@@ -1941,9 +2050,9 @@ 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') {
@@ -1997,24 +2106,21 @@ 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)
+            .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);
@@ -2057,9 +2163,6 @@ __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);
@@ -2067,10 +2170,11 @@ __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;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑