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

package/src/concepts/ViewElement__.ts

@@ -44,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;
 }
 
@@ -72,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') {
@@ -106,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__';
@@ -226,8 +227,6 @@ export class ViewElement extends BaseNode {
         super.subConstructor(source);
     }
 
-
-
     /**
      * 从父级删除该节点
      * @internal
@@ -264,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());
@@ -405,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());
@@ -547,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());
@@ -689,11 +686,6 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
-
-
-
-
     /**
     * 插入页面元素
     * @internal
@@ -827,9 +819,6 @@ export class ViewElement extends BaseNode {
         return node;
     }
 
-
-    
-
     /**
     * 删除元素绑定属性
     * @param name 元素绑定属性名称
@@ -878,8 +867,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除元素绑定事件
     * @param name 元素绑定事件名称
@@ -928,8 +915,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除元素指令
     * @param name 元素指令名称
@@ -978,8 +963,6 @@ export class ViewElement extends BaseNode {
         return params;
     }
 
-
-
     /**
     * 删除页面元素
     * @param name 页面元素名称
@@ -1093,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的单独处理
@@ -1110,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`;
         }
@@ -1121,8 +1122,17 @@ export class ViewElement extends BaseNode {
         return code;
     }
     @withSourceMap()
-    toEmbeddedTS(state?: TranslatorState): string {
-        /**
+    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)) {
@@ -1134,14 +1144,12 @@ 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';
         }
-         */
-        let code = `__elements.${this.name} = new nasl.ui.${this.toHump(this.tag)}({\n`;
         // 绑定属性
         if (Array.isArray(this.bindAttrs)) {
             this.bindAttrs.forEach((attr) => {
@@ -1163,16 +1171,35 @@ export class ViewElement extends BaseNode {
                 }));
                 code += '\n';
             });
-            code += indent(state.tabSize + 1);
         }
 
         // 子元素
         if (Array.isArray(this.children)) {
-            code += `slotDefault: ()=> [\n`;
+            code += indent(state.tabSize + 1);
+
+            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);
@@ -1184,8 +1211,8 @@ export class ViewElement extends BaseNode {
         return code;
     }
 
-    _duplicate() {
-        const code = this.toVue();
+    _duplicate(options?: ElementToVueOptions) {
+        const code = this.toVue(options);
         const element = ViewElement.fromHTML(code, {
             view: this.view,
         });
@@ -1227,24 +1254,26 @@ export class ViewElement extends BaseNode {
     private static _parseValidationRule(value: string) {
         let calleeName = value;
         let args: any[] = [];
-        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)),
-            }));
-        }
+        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.validate.functions',
+            calleeNamespace: 'nasl.validation',
             arguments: args,
             calleeName,
         };
@@ -1368,7 +1397,7 @@ export class ViewElement extends BaseNode {
                             });
                         }
                         const viewNamespace = view?.getNamespace();
-                        const viewName = `View_${view?.name}`;
+                        const viewName = `${view?.name}`;
                         element.bindEvents.push(BindEvent.from({
                             name,
                             calleeNamespace: `${viewNamespace}.${viewName}.logics`,
@@ -1377,32 +1406,33 @@ export class ViewElement extends BaseNode {
                         }, 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({
@@ -1493,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'];
@@ -1512,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);
@@ -1547,8 +1578,7 @@ export class ViewElement extends BaseNode {
 
                 return parts;
             },
-        }, options);
-        return this.toVue(options);
+        });
     }
 
     /**
@@ -1593,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());
+            const result = options.attrFormat(attr, this, attr.toVue(options));
             result && parts.push(result);
         });
 
@@ -1621,7 +1650,7 @@ export class ViewElement extends BaseNode {
     //================================================================================
 }
 
-classMap['ViewElement'] = ViewElement;
+classMap.ViewElement = ViewElement;
 export default ViewElement;
 //================================================================================
 // ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑   ↑