@lcap/nasl 1.0.0-alpha → 1.0.0-alpha.3

package/src/concepts/ViewElement__.ts

@@ -12,6 +12,31 @@ import { config } from '..';
 export interface ParseContext {
     [key: string]: any;
 }
+
+function genArgumentMemberExpression(arr: string[]) {
+    let expressionNode: any;
+    const propertyName = arr.pop();
+    if (arr.length >= 1) {
+        expressionNode = {
+            concept: 'MemberExpression',
+            name: '',
+            kind: 'Expression',
+            object: genArgumentMemberExpression(arr),
+            property: {
+                concept: 'Identifier',
+                kind: 'Expression',
+                name: propertyName,
+            },
+        };
+    } else {
+        return {
+            concept: 'Identifier',
+            kind: 'Expression',
+            name: propertyName,
+        };
+    }
+    return expressionNode;
+}
 export interface ElementToVueOptions {
     indentStyle?: 'space' | 'tab';
     tabSize?: number;
@@ -19,7 +44,7 @@ export interface ElementToVueOptions {
     aslIdAttr?: string | boolean;
     nodePathAttr?: string | boolean;
     getExtraParts?: (element?: ViewElement) => Array<string>;
-    attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string;
+    attrFormat?: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => string | false;
     finalCode?: boolean;
 }
 
@@ -32,7 +57,7 @@ function transAstNodeToNaslNode(astNode: any): any {
             name: '',
             label: '调用逻辑',
             kind: 'Expression',
-            calleeNamespace: 'nasl.util.functions',
+            calleeNamespace: 'nasl.util',
             calleeName,
             arguments: astNode.arguments.map((argument: any) => ({
                 concept: 'Argument',
@@ -47,7 +72,7 @@ function transAstNodeToNaslNode(astNode: any): any {
             concept: 'MemberExpression',
             name: '',
             kind: 'Expression',
-            objectqwer: transAstNodeToNaslNode(astNode.object),
+            object: transAstNodeToNaslNode(astNode.object),
             property: transAstNodeToNaslNode(astNode.property),
         };
     } else if (astNode.type === 'Identifier') {
@@ -81,6 +106,7 @@ import { EventPayload, Params } from '../common/EventEmitter';
 import { concept, excludedInJSON, property } from '../decorators';
 
 import * as utils from '../utils';
+import { v4 as uuidv4 } from 'uuid';
 import BaseNode from '../common/BaseNode';
 import classMap from '../common/classMap';
 import BindAttribute from './BindAttribute__';
@@ -201,8 +227,6 @@ export class ViewElement extends BaseNode {
         super.subConstructor(source);
     }
 
-
-
     /**
      * 从父级删除该节点
      * @internal
@@ -239,9 +263,9 @@ export class ViewElement extends BaseNode {
         });
     }
 
-        getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
+    getBindAttributeExistingNames(excludedList: Array<BindAttribute> = []) {
         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());
@@ -276,22 +300,22 @@ export class ViewElement extends BaseNode {
             bindAttribute = BindAttribute.from({
                 ...bindAttributeOptions,
                 name: this.getBindAttributeUniqueName(),
-            }, this);
+            }, this, 'bindAttrs');
         } else if (typeof options === 'string') {
             bindAttribute = BindAttribute.from({
                 ...bindAttributeOptions,
                 name: options,
-            }, this);
+            }, this, 'bindAttrs');
         } else if (options instanceof BindAttribute) {
             options.delete(); // 同一实例不支持多处存在
             bindAttribute = options;
+            Object.assign(bindAttribute, relationOptions);
         } else {
             bindAttribute = BindAttribute.from({
                 ...bindAttributeOptions,
                 ...options,
-            }, this);
+            }, this, 'bindAttrs');
         }
-        Object.assign(bindAttribute, relationOptions);
         this.bindAttrs.splice(index, 0, bindAttribute);
         return bindAttribute;
     }
@@ -380,10 +404,9 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
     getBindEventExistingNames(excludedList: Array<BindEvent> = []) {
         const excludedSet = new Set(excludedList);
-        return this.bindEvents.filter((item) => !excludedSet.has(item)).map((item) => item.name);
+        return (this.bindEvents || []).filter((item) => !excludedSet.has(item)).map((item) => item.name);
     }
     getBindEventUniqueName(name = 'bindEvent1') {
         return utils.unique(name, this.getBindEventExistingNames());
@@ -418,22 +441,22 @@ export class ViewElement extends BaseNode {
             bindEvent = BindEvent.from({
                 ...bindEventOptions,
                 name: this.getBindEventUniqueName(),
-            }, this);
+            }, this, 'bindEvents');
         } else if (typeof options === 'string') {
             bindEvent = BindEvent.from({
                 ...bindEventOptions,
                 name: options,
-            }, this);
+            }, this, 'bindEvents');
         } else if (options instanceof BindEvent) {
             options.delete(); // 同一实例不支持多处存在
             bindEvent = options;
+            Object.assign(bindEvent, relationOptions);
         } else {
             bindEvent = BindEvent.from({
                 ...bindEventOptions,
                 ...options,
-            }, this);
+            }, this, 'bindEvents');
         }
-        Object.assign(bindEvent, relationOptions);
         this.bindEvents.splice(index, 0, bindEvent);
         return bindEvent;
     }
@@ -522,10 +545,9 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
     getBindDirectiveExistingNames(excludedList: Array<BindDirective> = []) {
         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());
@@ -560,22 +582,22 @@ export class ViewElement extends BaseNode {
             bindDirective = BindDirective.from({
                 ...bindDirectiveOptions,
                 name: this.getBindDirectiveUniqueName(),
-            }, this);
+            }, this, 'bindDirectives');
         } else if (typeof options === 'string') {
             bindDirective = BindDirective.from({
                 ...bindDirectiveOptions,
                 name: options,
-            }, this);
+            }, this, 'bindDirectives');
         } else if (options instanceof BindDirective) {
             options.delete(); // 同一实例不支持多处存在
             bindDirective = options;
+            Object.assign(bindDirective, relationOptions);
         } else {
             bindDirective = BindDirective.from({
                 ...bindDirectiveOptions,
                 ...options,
-            }, this);
+            }, this, 'bindDirectives');
         }
-        Object.assign(bindDirective, relationOptions);
         this.bindDirectives.splice(index, 0, bindDirective);
         return bindDirective;
     }
@@ -664,17 +686,6 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
-
-
-    getViewElementExistingNames(excludedList: Array<ViewElement> = []) {
-        const excludedSet = new Set(excludedList);
-        return this.children.filter((item) => !excludedSet.has(item)).map((item) => item.name);
-    }
-    getViewElementUniqueName(name = 'viewElement1') {
-        return utils.unique(name, this.getViewElementExistingNames());
-    }
-
     /**
     * 插入页面元素
     * @internal
@@ -704,22 +715,22 @@ export class ViewElement extends BaseNode {
             viewElement = ViewElement.from({
                 ...viewElementOptions,
                 name: this.getViewElementUniqueName(),
-            }, this);
+            }, this, 'children');
         } else if (typeof options === 'string') {
             viewElement = ViewElement.from({
                 ...viewElementOptions,
                 name: options,
-            }, this);
+            }, this, 'children');
         } else if (options instanceof ViewElement) {
             options.delete(); // 同一实例不支持多处存在
             viewElement = options;
+            Object.assign(viewElement, relationOptions);
         } else {
             viewElement = ViewElement.from({
                 ...viewElementOptions,
                 ...options,
-            }, this);
+            }, this, 'children');
         }
-        Object.assign(viewElement, relationOptions);
         this.children.splice(index, 0, viewElement);
         return viewElement;
     }
@@ -808,9 +819,6 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
-    
-
     /**
     * 删除元素绑定属性
     * @param name 元素绑定属性名称
@@ -859,8 +867,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除元素绑定事件
     * @param name 元素绑定事件名称
@@ -909,8 +915,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除元素指令
     * @param name 元素指令名称
@@ -959,8 +963,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除页面元素
     * @param name 页面元素名称
@@ -1013,13 +1015,17 @@ export class ViewElement extends BaseNode {
     // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
+    getViewElementUniqueName(name = 'viewElement1') {
+        return this.view?.getViewElementUniqueName(name);
+    }
+
     public static readonly TAG_NAME_PREFIX_REG?: RegExp = /^([lieu]|van)[-_]/;
 
     static from(source: any, parentNode?: any, parentKey?: string): ViewElement {
         const node = super.from(source, parentNode, parentKey) as ViewElement;
         if (!node.name) {
             const tagName = node.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            node.name = node.view.getViewElementUniqueName(`${tagName}1`);
+            node.name = node.getViewElementUniqueName(`${tagName}1`);
         }
         return node;
     }
@@ -1070,7 +1076,11 @@ export class ViewElement extends BaseNode {
     toHump(name: string): string {
         return name.replace(/\-(\w)/g, (all, letter) => letter.toUpperCase());
     }
-    @withSourceMap()
+
+    get haveScope() {
+        const dataSourceList = ['uGallery', 'uTableView', 'uListView', 'uGridView', 'uCalendarView', 'uListComponents', 'uSelect'];
+        return dataSourceList.includes(this.toHump(this.tag));
+    }
     toEmbeddedTSDefinition(state?: TranslatorState): string {
         let code = '';
         // formItem的单独处理
@@ -1087,6 +1097,20 @@ export class ViewElement extends BaseNode {
                 }
             }
             code += '> null,\n';
+        }
+        if (this.haveScope) {
+            let genericType = 'any';
+            const bindAttrs = this.bindAttrs;
+            if (bindAttrs && bindAttrs.length) {
+                const attr = bindAttrs.find((item) => item.name === 'data-source');
+                if (attr && attr.expression) {
+                    let expressionTs = attr.expression.toEmbeddedTS(shiftState(state, code));
+                    expressionTs = expressionTs.replaceAll(' ', '');
+                    // 如果是逻辑就推导出逻辑类型
+                    genericType = `nasl.ui.GetItemTypeFromDataSource<typeof ${expressionTs}>`;
+                }
+            }
+            code += indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<${genericType}>> null,\n`;
         } else {
             code = indent(state.tabSize) + `${this.name}: <nasl.ui.${this.toHump(this.tag)}<any>> null,\n`;
         }
@@ -1098,10 +1122,17 @@ export class ViewElement extends BaseNode {
         return code;
     }
     @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        let code = `export namespace ${this.name || ''} {\n`;
-        code += indent(state.tabSize + 1);
-
+    toEmbeddedTS(state?: TranslatorState, parentLevel?: number): string {
+        function chineseTsName(name: string) {
+            let tsName = name;
+            if (/^\d/.test(tsName)) {
+                tsName = '$' + tsName;
+            }
+            // 匹配所有特殊字符都转为_
+            tsName = tsName.replace(/\W/g, '_');
+            return tsName;
+        }
+        let code = `__elements.${this.name} = new nasl.ui.${this.toHump(this.tag)}({\n`;
         // 是否开启权限
         let hasAuth = false;
         if (Array.isArray(this.bindDirectives)) {
@@ -1113,25 +1144,22 @@ export class ViewElement extends BaseNode {
             code += 'roles = [\n';
             this.bindRoles.forEach((role) => {
                 code += indent(state.tabSize + 3);
-                code += `${role},`;
+                code += `${this.app.getNamespace()}.roles.${chineseTsName(role)}.${chineseTsName(role)},`;
                 code += '\n';
             });
             code += indent(state.tabSize + 2);
-            code += '];\n';
+            code += '],\n';
         }
-
-        // 页面跳转
+        // 绑定属性
         if (Array.isArray(this.bindAttrs)) {
-            code += indent(state.tabSize + 2);
             this.bindAttrs.forEach((attr) => {
+                // 跳转页面
                 if (attr.destination) {
-                    code += '\n';
                     code += attr.destination.toEmbeddedTS(shiftState(state, code, {
-                        tabSize: state.tabSize + 2,
+                        tabSize: state.tabSize,
                     }));
                 }
             });
-            code += indent(state.tabSize + 2);
             code += '\n';
         }
 
@@ -1148,24 +1176,43 @@ export class ViewElement extends BaseNode {
         // 子元素
         if (Array.isArray(this.children)) {
             code += indent(state.tabSize + 1);
-            code += `export namespace children {\n`;
+
+            let levelIndex = parentLevel || 0;
+            if (this.haveScope) {
+                code += `slotDefault: (scope${levelIndex || ''})=> [\n`;
+                levelIndex++;
+            } else {
+                code += `slotDefault: ()=> [\n`;
+            }
+            if (Array.isArray(this.bindAttrs)) {
+                code += indent(state.tabSize + 2) + `() => [\n`;
+                this.bindAttrs.forEach((attr) => {
+                    if (attr.expression) {
+                        code
+                            += attr.expression.toEmbeddedTS(shiftState(state, code, {
+                                tabSize: state.tabSize + 3,
+                            })) + ',\n';
+                    }
+                });
+                code += indent(state.tabSize + 2) + '],\n';
+            }
             this.children.forEach((element) => {
                 code += element.toEmbeddedTS(shiftState(state, code, {
                     tabSize: state.tabSize + 2,
-                }));
+                }), levelIndex);
                 code += '\n';
             });
             code += indent(state.tabSize + 1);
-            code += '}\n';
+            code += ']\n';
         }
 
-        code += indent(state.tabSize) + '}\n';
+        code += indent(state.tabSize) + '}),\n';
 
         return code;
     }
 
-    _duplicate() {
-        const code = this.toVue();
+    _duplicate(options?: ElementToVueOptions) {
+        const code = this.toVue(options);
         const element = ViewElement.fromHTML(code, {
             view: this.view,
         });
@@ -1184,7 +1231,7 @@ export class ViewElement extends BaseNode {
     public deepRenameElements(): void {
         return this.traverseChildren((ele: ViewElement) => {
             const tagName = ele.tag.replace(ViewElement.TAG_NAME_PREFIX_REG, '').replace(/-/g, '_');
-            ele.name = this.view.getViewElementUniqueName(`${tagName}1`);
+            ele.name = this.getViewElementUniqueName(`${tagName}1`);
         });
     }
 
@@ -1204,6 +1251,34 @@ export class ViewElement extends BaseNode {
         }
     }
 
+    private static _parseValidationRule(value: string) {
+        let calleeName = value;
+        let args: any[] = [];
+        try {
+            const ast = babelParser.parseExpression(value) as any;
+            if (ast.type === 'CallExpression') {
+                calleeName = ast.callee.property.name || ast.callee.property.value;
+                args = ast.arguments.map((argument: any) => ({
+                    concept: 'Argument',
+                    name: '',
+                    kind: 'Statement',
+                    keyword: '',
+                    expression: transAstNodeToNaslNode(Object.assign({}, argument)),
+                }));
+            }
+        } catch (error) {}
+        return {
+            concept: 'ValidationRule',
+            name: '',
+            label: '验证规则',
+            folded: true,
+            kind: 'Expression',
+            calleeNamespace: 'nasl.validation',
+            arguments: args,
+            calleeName,
+        };
+    }
+
     /**
      * 从 Vue 的 ASTNode 转换成 ASL 元素
      * @param astNode Vue 的 ASTNode
@@ -1273,11 +1348,15 @@ export class ViewElement extends BaseNode {
                     } else {
                         try {
                             const tmp = json5.parse(oldAttr.value);
-                            attr = BindAttribute.from({
+                            const source: any = {
                                 type: typeof tmp === 'string' ? 'string' : 'static',
                                 name: oldAttr.name,
                                 value: typeof tmp === 'string' ? tmp : oldAttr.value,
-                            }, element);
+                            };
+                            if (oldAttr.name === 'rules') {
+                                source.rules = tmp?.split('|').map((ruleStr: string) => this._parseValidationRule(ruleStr.trim()));
+                            }
+                            attr = BindAttribute.from(source, element);
                         } catch (e) {
                             const expression = <any> this._parseExpression(oldAttr.value);
                             attr = BindAttribute.from({
@@ -1300,42 +1379,60 @@ export class ViewElement extends BaseNode {
                     .filter((name) => !name.startsWith('update:'))
                     .forEach((name) => {
                         const oldEvent = astNode.events[name] as compiler.ASTElementHandler;
-                        const value = oldEvent.value.split('(')[0];
+                        const str = oldEvent.value;
+                        const value = str.split('(')[0];
+                        const matchArr = str.match(/\(([^)]*)\)/);
+                        let argsStr = '';
+                        if (matchArr.length >= 2) {
+                            argsStr = matchArr[1];
+                        }
+                        let args: any[] = [];
+                        if (argsStr) {
+                            args = argsStr.split(',').map((argStr) => {
+                                const keyword = argStr.trim().split('.');
+                                return {
+                                    concept: 'Argument',
+                                    expression: genArgumentMemberExpression(keyword),
+                                };
+                            });
+                        }
                         const viewNamespace = view?.getNamespace();
-                        const viewName = `View_${view?.name}`;
+                        const viewName = `${view?.name}`;
                         element.bindEvents.push(BindEvent.from({
                             name,
                             calleeNamespace: `${viewNamespace}.${viewName}.logics`,
                             calleeName: value,
+                            arguments: args,
                         }, element));
                     });
 
-            astNode.directives && astNode.directives.forEach((directive) => {
-                if (directive.name === 'model') {
-                    const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
-                    if (!valueAttr) {
+            astNode.directives
+                && astNode.directives.forEach((directive) => {
+                    if (directive.name === 'model') {
+                        const valueAttr = astNode.attrs && astNode.attrs.find((attr) => attr.name === 'value');
+                        if (!valueAttr) {
+                            const expression = <any> this._parseExpression(directive.value);
+                            element.bindAttrs.push(BindAttribute.from({
+                                type: 'dynamic',
+                                name: 'value',
+                                value: expression ? '' : directive.value,
+                                expression,
+                                sync: true,
+                            }, element));
+                        }
+                    } else {
                         const expression = <any> this._parseExpression(directive.value);
-                        element.bindAttrs.push(BindAttribute.from({
-                            type: 'dynamic',
-                            name: 'value',
+                        element.bindDirectives.push(BindDirective.from({
+                            type: expression ? 'string' : 'dynamic',
+                            name: directive.name,
+                            rawName: directive.rawName,
                             value: expression ? '' : directive.value,
                             expression,
-                            sync: true,
+                            arg: directive.arg,
+                            modifiers: directive.modifiers,
                         }, element));
                     }
-                } else {
-                    const expression = <any> this._parseExpression(directive.value);
-                    element.bindDirectives.push(BindDirective.from({
-                        type: expression ? 'string' : 'dynamic',
-                        name: directive.name,
-                        rawName: directive.rawName,
-                        value: expression ? '' : directive.value,
-                        expression,
-                        arg: directive.arg,
-                        modifiers: directive.modifiers,
-                    }, element));
-                }
-            });
+                });
 
             if (astNode.if) {
                 element.bindDirectives.push(BindDirective.from({
@@ -1426,12 +1523,13 @@ export class ViewElement extends BaseNode {
      * 转换成设计器中使用的 Vue 文件
      * @param options
      */
-    toDesignerVue(options?: ElementToVueOptions) {
-        options = Object.assign({
+    toDesignerVue() {
+        return this.toVue({
+            finalCode: false,
             nodePathAttr: true,
-            attrFormat: (attr: BindAttribute, el: ViewElement, defaultResult?: string) => {
+            attrFormat: (attr: BindAttribute | BindEvent | BindDirective, element?: ViewElement, defaultResult?: string) => {
                 if (attr.concept === 'BindAttribute') {
-                    const api = config.allNodesAPI[el.tag];
+                    const api = config.allNodesAPI[element.tag];
                     const apiOfAttr = api && api.attrs && api.attrs.find((_attr) => _attr.name === attr.name);
                     if (apiOfAttr && apiOfAttr['designer-value'] !== undefined) {
                         let designerValue = apiOfAttr['designer-value'];
@@ -1445,7 +1543,7 @@ export class ViewElement extends BaseNode {
                             return `${attr.name}="${designerValue}"`;
                         }
                     }
-                    if ((attr as BindAttribute).type === 'dynamic' && !(el.tag === 'u-cascade-select' && attr.name === 'categories'))
+                    if ((attr as BindAttribute).type === 'dynamic' && !(element.tag === 'u-cascade-select' && attr.name === 'categories'))
                         return defaultResult.replace(/:?(\w+)(?:.*?)="(.*)"/, (m, name, value) => {
                             try {
                                 const tempValue = json5.parse(value);
@@ -1480,8 +1578,7 @@ export class ViewElement extends BaseNode {
 
                 return parts;
             },
-        }, options);
-        return this.toVue(options);
+        });
     }
 
     /**
@@ -1526,9 +1623,8 @@ export class ViewElement extends BaseNode {
         this.staticClass && parts.push(`class="${this.staticClass}"`);
         this.staticStyle && parts.push(`style="${this.staticStyle}"`);
 
-        const { finalCode } = options;
         [].concat(this.bindAttrs, this.bindDirectives, this.bindEvents).forEach((attr: BindAttribute | BindDirective | BindEvent) => {
-            const result = options.attrFormat(attr, this, attr.toVue(this, finalCode));
+            const result = options.attrFormat(attr, this, attr.toVue(options));
             result && parts.push(result);
         });
 
@@ -1554,7 +1650,7 @@ export class ViewElement extends BaseNode {
     //================================================================================
 }
 
-classMap['ViewElement'] = ViewElement;
+classMap.ViewElement = ViewElement;
 export default ViewElement;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑