@lcap/nasl 3.4.0-beta.6 → 3.5.0-alpha.1

package/src/concepts/ViewElement__.ts

@@ -9,7 +9,7 @@ import {
   withGenerator,
   TranslatorGenerator,
 } from '../translator';
-import { stdlibNamespace, CallLogic } from '../concepts';
+import { getStdlibNamespace, CallLogic } from '../concepts';
 
 import * as babelParser from '@babel/parser';
 import * as json5 from 'json5';
@@ -18,8 +18,8 @@ import * as compiler from 'vue-template-compiler';
 import { LogicItem } from './LogicItem__';
 import { Logic } from './Logic__';
 import { config } from '../config';
-import MemberExpression from './MemberExpression__';
-import Identifier from './Identifier__';
+import type MemberExpression from './MemberExpression__';
+import type Identifier from './Identifier__';
 import { PAGE_COMPONENT_INCLUDE_TAG_MAP } from './View__';
 
 import { kebab2Camel } from '../utils';
@@ -151,17 +151,20 @@ function transAstNodeToNaslNode(astNode: any, namespace?: string): any {
       label: '原子项',
       code: astNode.value,
     };
-  } else if (astNode.type === 'TemplateLiteral') { // 模板字符串翻译成字符串插值
+  } else if (astNode.type === 'TemplateLiteral') {
+    // 模板字符串翻译成字符串插值
     const { expressions, quasis } = astNode;
     node = {
       concept: 'StringInterpolation',
       kind: 'Expression',
       name: '',
-      expressions: [...(quasis || []), ...(expressions || [])].sort((node1, node2) => {
-        return node1.start - node2.start;
-      }).map((node) => {
-        return transAstNodeToNaslNode(node);
-      }),
+      expressions: [...(quasis || []), ...(expressions || [])]
+        .sort((node1, node2) => {
+          return node1.start - node2.start;
+        })
+        .map((node) => {
+          return transAstNodeToNaslNode(node);
+        }),
     };
   } else if (astNode.type === 'TemplateElement') {
     node = {
@@ -265,32 +268,32 @@ function transAstNodeToNaslTypeNode(astNode: any, namespace?: string): any {
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
 //================================================================================
 import { EventPayload, Params } from '../common/EventEmitter';
-import { concept, excludedInJSON, property, className } from '../decorators';
+import { concept, excludedInJSON, property, getConceptConstructor, getBaseNode } from '../decorators';
 
 import * as utils from '../utils';
+import * as types from './utils/types';
+import * as asserts from './utils/asserts';
 import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
-import BindAttribute from './BindAttribute__';
-import BindEvent from './BindEvent__';
-import BindDirective from './BindDirective__';
-import BindStyle from './BindStyle__';
-import View from './View__';
-import Module from './Module__';
-import App from './App__';
-import Frontend from './Frontend__';
+import type BindAttribute from './BindAttribute__';
+import type BindEvent from './BindEvent__';
+import type BindDirective from './BindDirective__';
+import type BindStyle from './BindStyle__';
+import type View from './View__';
+import type Module from './Module__';
+import type App from './App__';
+import type Frontend from './Frontend__';
 
 /**
  * 页面元素
  */
-@className
 @concept('页面元素')
-// @ts-ignore
 export class ViewElement extends BaseNode {
   /** 类名 */
-  static readonly ConceptName = 'ViewElement';
+  static readonly ConceptName: string = 'ViewElement';
 
   /** 继承链 */
-  static readonly inheritanceChain = ['BaseNode'];
+  static readonly inheritanceChain: string[] = ['BaseNode'];
 
   /**
    * 产品概念
@@ -303,56 +306,48 @@ export class ViewElement extends BaseNode {
    * 类型
    */
   @property()
-  // @ts-ignore
   type!: 0;
 
   /**
    * 元素标签
    */
   @property()
-  // @ts-ignore
   tag!: string;
 
   /**
    * 页面元素名称
    */
   @property()
-  // @ts-ignore
   name!: string;
 
   /**
    * 静态 class 名
    */
   @property()
-  // @ts-ignore
   staticClass!: string;
 
   /**
    * 静态 style
    */
   @property()
-  // @ts-ignore
   staticStyle!: string;
 
   /**
    * 权限资源描述
    */
   @property()
-  // @ts-ignore
   authDescription!: string;
 
   /**
    * 插槽目标
    */
   @property()
-  // @ts-ignore
   slotTarget!: string;
 
   /**
    * 插槽 scope 表达式
    */
   @property()
-  // @ts-ignore
   slotScope!: string;
 
   /**
@@ -500,7 +495,7 @@ export class ViewElement extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.bindAttrs as BindAttribute[]) || [])
       .filter((item) => !excludedSet.has(item))
-      .map((item) => item.name);
+      .map((item) => item?.name);
   }
   getBindAttributeUniqueName(name = 'bindAttribute1') {
     return utils.unique(name, this.getBindAttributeExistingNames(), undefined, false);
@@ -530,6 +525,7 @@ export class ViewElement extends BaseNode {
   _insertBindAttributeAt(options: string | Partial<BindAttribute> | BindAttribute, index: number) {
     const bindAttributeOptions: any = {};
     const relationOptions = { parentNode: this, parentKey: 'bindAttrs' };
+    const BindAttribute = getConceptConstructor('BindAttribute');
     let bindAttribute: BindAttribute;
     if (!options) {
       bindAttribute = BindAttribute.from(
@@ -549,7 +545,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindAttrs',
       );
-    } else if (options instanceof BindAttribute) {
+    } else if (asserts.isBindAttribute(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindAttribute = options;
       Object.assign(bindAttribute, relationOptions);
@@ -653,7 +649,7 @@ export class ViewElement extends BaseNode {
 
   getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    return ((this.bindEvents as BindEvent[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
   }
   getBindEventUniqueName(name = 'bindEvent1') {
     return utils.unique(name, this.getBindEventExistingNames(), undefined, false);
@@ -683,6 +679,7 @@ export class ViewElement extends BaseNode {
   _insertBindEventAt(options: string | Partial<BindEvent> | BindEvent, index: number) {
     const bindEventOptions: any = {};
     const relationOptions = { parentNode: this, parentKey: 'bindEvents' };
+    const BindEvent = getConceptConstructor('BindEvent');
     let bindEvent: BindEvent;
     if (!options) {
       bindEvent = BindEvent.from(
@@ -702,7 +699,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindEvents',
       );
-    } else if (options instanceof BindEvent) {
+    } else if (asserts.isBindEvent(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindEvent = options;
       Object.assign(bindEvent, relationOptions);
@@ -808,7 +805,7 @@ export class ViewElement extends BaseNode {
     const excludedSet = new Set(excludedList);
     return ((this.bindDirectives as BindDirective[]) || [])
       .filter((item) => !excludedSet.has(item))
-      .map((item) => item.name);
+      .map((item) => item?.name);
   }
   getBindDirectiveUniqueName(name = 'bindDirective1') {
     return utils.unique(name, this.getBindDirectiveExistingNames(), undefined, false);
@@ -838,6 +835,7 @@ export class ViewElement extends BaseNode {
   _insertBindDirectiveAt(options: string | Partial<BindDirective> | BindDirective, index: number) {
     const bindDirectiveOptions: any = {};
     const relationOptions = { parentNode: this, parentKey: 'bindDirectives' };
+    const BindDirective = getConceptConstructor('BindDirective');
     let bindDirective: BindDirective;
     if (!options) {
       bindDirective = BindDirective.from(
@@ -857,7 +855,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindDirectives',
       );
-    } else if (options instanceof BindDirective) {
+    } else if (asserts.isBindDirective(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindDirective = options;
       Object.assign(bindDirective, relationOptions);
@@ -961,7 +959,7 @@ export class ViewElement extends BaseNode {
 
   getBindStyleExistingNames(excludedList: Array<BindStyle> = []) {
     const excludedSet = new Set(excludedList);
-    return ((this.bindStyles as BindStyle[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
+    return ((this.bindStyles as BindStyle[]) || []).filter((item) => !excludedSet.has(item)).map((item) => item?.name);
   }
   getBindStyleUniqueName(name = 'bindStyle1') {
     return utils.unique(name, this.getBindStyleExistingNames(), undefined, false);
@@ -991,6 +989,7 @@ export class ViewElement extends BaseNode {
   _insertBindStyleAt(options: string | Partial<BindStyle> | BindStyle, index: number) {
     const bindStyleOptions: any = {};
     const relationOptions = { parentNode: this, parentKey: 'bindStyles' };
+    const BindStyle = getConceptConstructor('BindStyle');
     let bindStyle: BindStyle;
     if (!options) {
       bindStyle = BindStyle.from(
@@ -1010,7 +1009,7 @@ export class ViewElement extends BaseNode {
         this,
         'bindStyles',
       );
-    } else if (options instanceof BindStyle) {
+    } else if (asserts.isBindStyle(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       bindStyle = options;
       Object.assign(bindStyle, relationOptions);
@@ -1136,6 +1135,7 @@ export class ViewElement extends BaseNode {
   _insertViewElementAt(options: string | Partial<ViewElement> | ViewElement, index: number) {
     const viewElementOptions: any = {};
     const relationOptions = { parentNode: this, parentKey: 'children' };
+    const ViewElement = getConceptConstructor('ViewElement');
     let viewElement: ViewElement;
     if (!options) {
       viewElement = ViewElement.from(
@@ -1155,7 +1155,7 @@ export class ViewElement extends BaseNode {
         this,
         'children',
       );
-    } else if (options instanceof ViewElement) {
+    } else if (asserts.isViewElement(options)) {
       options.ensureDelete(); // 同一实例不支持多处存在
       viewElement = options;
       Object.assign(viewElement, relationOptions);
@@ -1302,9 +1302,12 @@ export class ViewElement extends BaseNode {
         const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
         ~index && (this as any)[parentKey].splice(index, 1);
         params.index = index;
-      } else if ((t as any)[parentKey] === n) {
-        params.index = 0;
-        (this as any)[parentKey] = undefined;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
       }
     }
     return params;
@@ -1355,9 +1358,12 @@ export class ViewElement extends BaseNode {
         const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
         ~index && (this as any)[parentKey].splice(index, 1);
         params.index = index;
-      } else if ((t as any)[parentKey] === n) {
-        params.index = 0;
-        (this as any)[parentKey] = undefined;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
       }
     }
     return params;
@@ -1408,9 +1414,12 @@ export class ViewElement extends BaseNode {
         const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
         ~index && (this as any)[parentKey].splice(index, 1);
         params.index = index;
-      } else if ((t as any)[parentKey] === n) {
-        params.index = 0;
-        (this as any)[parentKey] = undefined;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
       }
     }
     return params;
@@ -1461,9 +1470,12 @@ export class ViewElement extends BaseNode {
         const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
         ~index && (this as any)[parentKey].splice(index, 1);
         params.index = index;
-      } else if ((t as any)[parentKey] === n) {
-        params.index = 0;
-        (this as any)[parentKey] = undefined;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
       }
     }
     return params;
@@ -1514,9 +1526,12 @@ export class ViewElement extends BaseNode {
         const index = (t as any)[parentKey].findIndex((el) => (el.__v_raw || el) === n);
         ~index && (this as any)[parentKey].splice(index, 1);
         params.index = index;
-      } else if ((t as any)[parentKey] === n) {
-        params.index = 0;
-        (this as any)[parentKey] = undefined;
+      } else {
+        const q = (t as any)[parentKey];
+        if ((q.__v_raw || q) === n) {
+          params.index = 0;
+          (this as any)[parentKey] = undefined;
+        }
       }
     }
     return params;
@@ -1610,8 +1625,9 @@ export class ViewElement extends BaseNode {
       code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any, any>;\n`;
     } else if (Object.keys(PAGE_COMPONENT_INCLUDE_TAG_MAP).includes(self.tag)) {
       if (self.bindAttrs?.findIndex((attr) => attr.name === 'data-source') > -1) {
-        code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<__elements_completionProperty['${self.name
-          }']['dataSource']>;\n`;
+        code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<__elements_completionProperty['${
+          self.name
+        }']['dataSource']>;\n`;
       } else {
         code += `${self.name}: nasl.ui.${self.toHump(self.tag)}<any>;\n`;
       }
@@ -1660,11 +1676,18 @@ export class ViewElement extends BaseNode {
           ['u-list-view', 'u-grid-view', 'u-table-view', 'van-list-view', 'van-grid-view'].includes(self.tag) &&
           self.bindAttrs?.findIndex((attr) => attr.name === 'sorting') === -1
         ) {
+          if (['u-list-view', 'van-grid-view', 'van-list-view'].includes(self.tag)) {
+            code += indent((state?.tabSize || 0) + 3);
+            code += `filterText: nasl.core.String\n`;
+          }
           code += indent((state?.tabSize || 0) + 3);
           code += `sorting: {
                       field: nasl.core.String
                       order: nasl.core.String
                   }\n`;
+        } else if (['u-cascader', 'van-cascader'].includes(self.tag)) {
+          code += indent((state?.tabSize || 0) + 3);
+          code += `filterText: nasl.core.String\n`;
         }
       }
       code += indent((state?.tabSize || 0) + 2);
@@ -1685,16 +1708,17 @@ export class ViewElement extends BaseNode {
     code += indent((state?.tabSize || 0) + 2);
     let levelIndex = parentLevel || 0;
     code += `${self.name}: () => {\n`;
-    if (self.tag === 'template' && self.haveScope() && self.parentNode instanceof ViewElement) {
+    if (self.tag === 'template' && self.haveScope() && asserts.isViewElement(self.parentNode)) {
       const currentType = self.parentNode.tag === 'u-table-view-column-dynamic' ? 'CurrentDynamic' : 'Current';
       const _this = self.parentNode;
       let genericity = '';
       if (_this.tag === 'u-table-view-column-dynamic') {
-        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${(_this as any).__tsVariableDataSourceTypeName
-          }>`;
+        genericity += `<${(_this.parentNode as any).__tsVariableDataSourceTypeName}, ${
+          (_this as any).__tsVariableDataSourceTypeName
+        }>`;
       } else {
         let targetNode: any = _this;
-        while (!targetNode.__tsVariableDataSourceTypeName && targetNode?.parentNode instanceof ViewElement) {
+        while (!targetNode.__tsVariableDataSourceTypeName && asserts.isViewElement(targetNode?.parentNode)) {
           targetNode = targetNode.parentNode;
         }
         genericity += `<${(targetNode as any).__tsVariableDataSourceTypeName ?? 'any'}>`;
@@ -1708,9 +1732,9 @@ export class ViewElement extends BaseNode {
       const datasourceName = `datasourceName${self.name}`;
       (self as any).__tsVariableDataSourceTypeName = datasourceName;
       if (
-        attr.expression instanceof MemberExpression ||
-        attr.expression instanceof Identifier ||
-        attr.expression instanceof CallLogic
+        asserts.isMemberExpression(attr.expression) ||
+        asserts.isIdentifier(attr.expression) ||
+        asserts.isCallLogic(attr.expression)
       ) {
         const extraParams = {
           tabSize: 4,
@@ -1805,9 +1829,9 @@ export class ViewElement extends BaseNode {
           const datasourceName = `datasourceName${element.name}`;
           (element as any).__tsDataSourceTypeName = datasourceName;
           if (
-            attr.expression instanceof MemberExpression ||
-            attr.expression instanceof Identifier ||
-            attr.expression instanceof CallLogic
+            asserts.isMemberExpression(attr.expression) ||
+            asserts.isIdentifier(attr.expression) ||
+            asserts.isCallLogic(attr.expression)
           ) {
             const extraParams = {
               tabSize: 4,
@@ -2176,7 +2200,7 @@ export class ViewElement extends BaseNode {
     let args: any[] = [];
     try {
       const ast = babelParser.parseExpression(value) as any;
-      const validationNamespace = stdlibNamespace.findChild('validation');
+      const validationNamespace = getStdlibNamespace().findChild('validation');
       if (ast.type === 'CallExpression') {
         calleeName = (ast.callee?.property?.name ?? ast.callee?.property?.value ?? ast.callee?.name).replace(
           /\(.*/,
@@ -2191,7 +2215,7 @@ export class ViewElement extends BaseNode {
           expression: transAstNodeToNaslNode(Object.assign({}, argument)),
         }));
       }
-    } catch (error) { }
+    } catch (error) {}
 
     return {
       concept: 'ValidationRule',
@@ -2262,6 +2286,10 @@ export class ViewElement extends BaseNode {
       if ((astNode as any)[key]) console.warn(`[warn] ViewElement NASL unsupports '${key}' field in node `, astNode);
     });
 
+    const BindAttribute = getConceptConstructor('BindAttribute');
+    const BindDirective = getConceptConstructor('BindDirective');
+    const BindEvent = getConceptConstructor('BindEvent');
+
     let element: ViewElement;
     if (astNode.type === 1) {
       if (astNode.tag === 'router-view') {
@@ -2512,11 +2540,14 @@ export class ViewElement extends BaseNode {
               return `${attr.name}="${designerValue}"`;
             }
           }
-          if (attr.name === 'text' && (attr as BindAttribute)?.expression instanceof MemberExpression &&
+          if (
+            attr.name === 'text' &&
+            asserts.isMemberExpression((attr as BindAttribute)?.expression) &&
             ((attr?.expression as MemberExpression)?.object as Identifier)?.namespace?.startsWith('elements.') &&
-            ((attr?.expression as MemberExpression)?.object as Identifier)?.namespace?.endsWith('.property')) {
+            ((attr?.expression as MemberExpression)?.object as Identifier)?.namespace?.endsWith('.property')
+          ) {
             return `${attr.name}="{{ ${attr.expression.toUI()} }}"`;
-          };
+          }
           if (
             (attr as BindAttribute).type === 'dynamic' &&
             !(element.tag === 'u-cascade-select' && attr.name === 'categories')
@@ -2605,12 +2636,6 @@ export class ViewElement extends BaseNode {
           }
         }
 
-        // key变化，让tableView重新渲染
-        if (['u-table-view'].includes(el.tag)) {
-          const time = new Date().getTime();
-          parts.push(`key="${el.name}_${time}"`);
-        }
-
         return parts;
       },
     });
@@ -2703,12 +2728,12 @@ export class ViewElement extends BaseNode {
     const content: string = !this.children
       ? ''
       : this.children
-        .map((element) => {
-          const childOptions = Object.assign({}, newOptions);
-          childOptions.indentLevel++;
-          return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
-        })
-        .join('');
+          .map((element) => {
+            const childOptions = Object.assign({}, newOptions);
+            childOptions.indentLevel++;
+            return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
+          })
+          .join('');
     if (!content.length) {
       shouldIndent = false;
     }
@@ -2727,9 +2752,9 @@ export class ViewElement extends BaseNode {
     this.slotTarget &&
       parts.push(
         `#${this.slotTarget}` +
-        (this.slotScope
-          ? `="${currentList.length > 1 ? this.slotScope + (currentList.length - 1) : this.slotScope}"`
-          : ''),
+          (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}\`"`);
@@ -2743,7 +2768,7 @@ export class ViewElement extends BaseNode {
         const result = newOptions.attrFormat(attr, this, attr?.toVue(newOptions));
 
         // v-auth v-if 都翻译成 v-if
-        if (attr instanceof BindDirective && ['if', 'auth'].includes(attr.name) && result !== false) {
+        if (asserts.isBindDirective(attr) && ['if', 'auth'].includes(attr.name) && result !== false) {
           const expr = result.replace(/v-(if|auth)="(.*)"/, (match, p1, p2) => p2);
           if (expr) vIfs.push(attr.name === 'if' ? expr : `$auth.has(${expr})`);
 
@@ -2773,8 +2798,7 @@ export class ViewElement extends BaseNode {
       this.name &&
       ['u-table-view', 'u-list-view', 'u-grid-view', 'u-list-components', 'u-form', 'u-select'].includes(this.tag)
     ) {
-      const hasKey = parts.find((part)=>part && part.startsWith('key='));
-      !hasKey && this.name && parts.push(`key="${this.name}"`);
+      this.name && parts.push(`key="${this.name}"`);
     }
 
     let partsLength = 0;
@@ -2994,6 +3018,7 @@ export class ViewElement extends BaseNode {
   }
   // 批量更新绑定属性
   batchUpdateBindAttrs(attrOptions: Record<string, any>[]) {
+    const BindAttribute = getConceptConstructor('BindAttribute');
     const oldBindAttrs = this.bindAttrs.filter((it) => !attrOptions.some((item) => item.name === it.name));
     const newBindAttrs = attrOptions.map((it) => BindAttribute.from(it, this, 'bindAttrs'));
     this.update({