@lcap/nasl 2.20.0-beta.2 → 2.20.0

package/src/concepts/BindDirective__.ts

@@ -1,5 +1,6 @@
 import { TranslatorState, shiftState, withSourceMap } from '../translator';
 import { ElementToVueOptions } from './ViewElement__';
+import MemberExpression from './MemberExpression__';
 //================================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
@@ -147,10 +148,6 @@ export class BindDirective extends BaseNode {
         });
     }
 
-    
-
-    
-
     /**
     * 插入逻辑项
     * @internal
@@ -183,8 +180,6 @@ export class BindDirective extends BaseNode {
         return logicItem;
     }
 
-    
-
     /**
      * 插入逻辑项
      * @param logicItemOptions 逻辑项参数
@@ -207,8 +202,6 @@ export class BindDirective extends BaseNode {
         return node;
     }
 
-    
-
     /**
      * 添加逻辑项
      * @internal
@@ -228,8 +221,6 @@ export class BindDirective extends BaseNode {
         return this._insertItemInPlaygroundAt(options as any, index);
     }
 
-    
-
     /**
      * 添加逻辑项
      * @param logicItemOptions 逻辑项参数
@@ -253,9 +244,6 @@ export class BindDirective extends BaseNode {
         return node;
     }
 
-
-    
-
     /**
     * 删除逻辑项
     * @param name 逻辑项名称
@@ -281,8 +269,6 @@ export class BindDirective extends BaseNode {
         return expression.delete();
     }
 
-    
-
     /**
      * 删除逻辑项
      * @param logicItem 已有的逻辑项实例
@@ -290,7 +276,7 @@ export class BindDirective extends BaseNode {
     removeItemInPlayground(logicItem: LogicItem): void;
 
     removeItemInPlayground(options: LogicItem) {
-        let logicItem: LogicItem = options;
+        const logicItem: LogicItem = options;
         return logicItem.delete();
     }
 
@@ -335,25 +321,192 @@ export class BindDirective extends BaseNode {
         });
     }
 
+    // 属性上绑定的表达式
+    get bindExpressions() {
+        return [this.expression];
+    }
+
+    // 是否需要用标识符替换
+    get needReplaceWithIdentifier() {
+        let bindExpression = false;
+        if (this.expression) {
+            let rootMemberExpression: any;
+            let tempNode = this.expression;
+            while (tempNode?.concept === 'MemberExpression') {
+                rootMemberExpression = tempNode;
+                tempNode = (tempNode as MemberExpression)?.object;
+            }
+            // 变量和变量的成员表达式不进行替换
+            if (
+                !(
+                    this.expression?.concept === 'Identifier'
+                    || (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier')
+                )
+                && (this.type === 'dynamic' || (this.name === 'rules' && (this as any).rules))
+            ) {
+                bindExpression = true;
+            }
+        }
+        return bindExpression;
+    }
+
+    // 获取表达式在页面中的名字
+    get expressionNameInView() {
+        const nameList: string[] = [];
+        let node: BaseNode = this;
+        while (node) {
+            nameList.unshift(node.name);
+            if (node.concept === 'ViewElement') {
+                node = null;
+            } else {
+                nameList.unshift(node.parentKey);
+                node = node.parentNode;
+            }
+        }
+        return nameList.join('_').replace(/-/g, '_');
+    }
+
+    // 获取表达式生成器名称
+    get expressionBuilderName() {
+        let expressionInViewName = this.expressionNameInView;
+        expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
+        return `gen${expressionInViewName}`;
+    }
+
+    // 获取参数列表
+    getArgsList() {
+        const viewElement = this?.getAncestor('ViewElement');
+        const argsList = [];
+        let parent = viewElement?.parentNode;
+        let index = 0;
+        while (parent && parent.concept !== 'View') {
+            if ((parent as ViewElement).slotScope) {
+                argsList.unshift(index === 0 ? 'current' : 'current' + index);
+                index++;
+            }
+            parent = parent.parentNode;
+        }
+        return argsList;
+    }
+
+    // 表达式中需要被监听的变量
+    get watchedVariableMap() {
+        const map: any = {};
+        // 页面中表达式用到的变量需要监听，从而重新执行match表达式
+        utils.traverse((current: any) => {
+            const { node } = current || {};
+            const { concept } = node || {};
+            if (['Identifier'].includes(concept)) {
+                let expressionNode = node;
+                let memberExpressionNode = node?.parentNode;
+                while (memberExpressionNode?.concept === 'MemberExpression') {
+                    expressionNode = memberExpressionNode;
+                    const { concept: objConcept } = memberExpressionNode.object || {};
+                    if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
+                        memberExpressionNode = null;
+                        expressionNode = null;
+                    } else {
+                        memberExpressionNode = memberExpressionNode.object;
+                    }
+                }
+                if (expressionNode) {
+                    map[expressionNode.toJS()] = true;
+                }
+            }
+        }, {
+            node: this,
+        }, {
+            mode: 'anyObject',
+            excludedKeySet: new Set([
+                'parentNode',
+                'sourceMap',
+                'storageJSON',
+                'tsErrorDetail',
+                'NaslAnnotatedJSON',
+                'calledFrom',
+                '_events',
+                '_collectingList',
+                '_historyList',
+            ]),
+        });
+        return map;
+    }
+
+    getInViewMethod(state?: TranslatorState) {
+        const argsList = this.getArgsList() || [];
+        const hasArgs = !!argsList.length;
+        let argStr = '';
+
+        // 容错代码
+        let ftCode = '';
+        if (hasArgs) {
+            argsList.forEach((arg) => {
+                ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+                    this.${this.expressionNameInView}${argStr} = {};
+                }\n`;
+                argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
+            });
+        }
+        ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+            this.${this.expressionNameInView}${argStr} = {};
+        }`;
+
+        // 新的参数
+        const paramList = Object.keys(this.watchedVariableMap);
+        let newParams = `const newParams = [];`;
+        if (Array.isArray(paramList) && paramList.length) {
+            paramList.forEach((param) => {
+                newParams += `newParams.push(${param});\n`;
+            });
+        }
+
+        // 表达式主体
+        let expressionStr = '';
+        if (this.type === 'dynamic') {
+            expressionStr = this.expression?.toJS() || '';
+        }
+
+        // 变量重新设置，为了触发重新调用
+        let setVarStr = `this.${this.expressionNameInView}${argStr} = {
+            ...(this.${this.expressionNameInView}${argStr} || {}),
+            value: value,
+        };`;
+        if (Array.isArray(argsList) && argsList.length) {
+            setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
+        }
+        const code = `${this.expressionBuilderName} (${argsList.join(', ')}) {
+        // 容错代码
+        ${ftCode}
+        (async () => {
+            // 旧的参数
+            const oldParams = this.${this.expressionNameInView}${argStr}.params;
+            // 新的参数
+            ${newParams}
+            const isLooseEqual = this.$isLooseEqualFn(oldParams, newParams);
+            if (!isLooseEqual) {
+                this.${this.expressionNameInView}${argStr}.params = newParams;
+                const value = ${expressionStr};
+                ${setVarStr}
+            }
+        })();
+        return this.${this.expressionNameInView}${argStr}.value;
+    }`;
+
+        return code;
+    }
+
     /**
      * 转换成 Vue 的模板格式
      */
     toVue(options?: ElementToVueOptions) {
-        let modifiersString = '';
-        let modifiers = {};
-        try {
-            modifiers = JSON.parse(this.modifiers || '{}');
-        } catch (err) {
-            modifiers = {};
-        }
-        Object.keys(modifiers).forEach((key) => {
-            const value = (modifiers as any)[key];
-            if (value)
-                modifiersString += '.' + key;
-        });
+        let str = '';
         // eslint-disable-next-line no-nested-ternary
         let value = (this.type ?? 'string') !== 'string' ? this.value : this.value ? `'${this.value}'` : '';
-        if (this.expression) {
+        // 需要用标识符替换
+        if (options.finalCode !== false && this.needReplaceWithIdentifier) {
+            const argsList = this.getArgsList();
+            value = `${this.expressionBuilderName}(${argsList.join(', ')})`;
+        } else if (this.expression) {
             value = this.expression.toVue(options);
             if (this.expression.concept === 'StringLiteral') {
                 value = `${value}`;
@@ -376,13 +529,33 @@ export class BindDirective extends BaseNode {
             if (isElement) {
                 pathArr = [...pathArr, ...paths.slice(-1)];
             }
-            const _path = pathArr.reduce((str, item) => {
+            // 数组的第一个是端名称
+            pathArr.shift();
+            let _path = pathArr.reduce((str, item) => {
                 const c = item.match(regex1);
                 return str + '/' + c[1];
             }, '');
+            if (this.frontend && this.frontend.basePath) {
+                _path = `${this.frontend.basePath}${_path}`;
+            }
             value = `'${_path}'`;
         }
-        return value !== '' && value !== undefined && value !== null ? `v-${this.name}${modifiersString}${this.arg ? ':' + this.arg : ''}="${value}"` : '';
+        let modifiersString = '';
+        let modifiers = {};
+        try {
+            modifiers = JSON.parse(this.modifiers || '{}');
+        } catch (err) {
+            modifiers = {};
+        }
+        Object.keys(modifiers).forEach((key) => {
+            const value = (modifiers as any)[key];
+            if (value)
+                modifiersString += '.' + key;
+        });
+        if (value !== '' && value !== undefined && value !== null) {
+            str += `v-${this.name}${modifiersString}${this.arg ? ':' + this.arg : ''}="${value}"`;
+        }
+        return str;
     }
 
     @withSourceMap()

package/src/concepts/BindStyle__.ts

@@ -1,5 +1,6 @@
 import { TranslatorState, shiftState, withSourceMap } from '../translator';
 import { ElementToVueOptions } from './ViewElement__';
+import MemberExpression from './MemberExpression__';
 //================================================================================
 // 从这里开始到结尾注释之间的代码由 NASL Workbench 自动生成，请不手动修改！
 // ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓   ↓
@@ -117,10 +118,6 @@ export class BindStyle extends BaseNode {
         });
     }
 
-    
-
-    
-
     /**
     * 插入逻辑项
     * @internal
@@ -153,8 +150,6 @@ export class BindStyle extends BaseNode {
         return logicItem;
     }
 
-    
-
     /**
      * 插入逻辑项
      * @param logicItemOptions 逻辑项参数
@@ -177,8 +172,6 @@ export class BindStyle extends BaseNode {
         return node;
     }
 
-    
-
     /**
      * 添加逻辑项
      * @internal
@@ -198,8 +191,6 @@ export class BindStyle extends BaseNode {
         return this._insertItemInPlaygroundAt(options as any, index);
     }
 
-    
-
     /**
      * 添加逻辑项
      * @param logicItemOptions 逻辑项参数
@@ -223,9 +214,6 @@ export class BindStyle extends BaseNode {
         return node;
     }
 
-
-    
-
     /**
     * 删除逻辑项
     * @param name 逻辑项名称
@@ -251,8 +239,6 @@ export class BindStyle extends BaseNode {
         return expression.delete();
     }
 
-    
-
     /**
      * 删除逻辑项
      * @param logicItem 已有的逻辑项实例
@@ -260,7 +246,7 @@ export class BindStyle extends BaseNode {
     removeItemInPlayground(logicItem: LogicItem): void;
 
     removeItemInPlayground(options: LogicItem) {
-        let logicItem: LogicItem = options;
+        const logicItem: LogicItem = options;
         return logicItem.delete();
     }
 
@@ -292,19 +278,196 @@ export class BindStyle extends BaseNode {
     // 自动生成的代码已结束。下面可以手动编写。
     //================================================================================
 
+    // 属性上绑定的表达式
+    get bindExpressions() {
+        return [this.expression];
+    }
 
-        /**
-     * 转换成 Vue 的模板格式
-     */
-    toVue(options?: ElementToVueOptions) {
-        let value = this.expression?.toVue(options);
+    // 是否需要用标识符替换
+    get needReplaceWithIdentifier() {
+        let bindExpression = false;
+        if (this.expression) {
+            let rootMemberExpression: any;
+            let tempNode = this.expression;
+            while (tempNode?.concept === 'MemberExpression') {
+                rootMemberExpression = tempNode;
+                tempNode = (tempNode as MemberExpression)?.object;
+            }
+            // 变量和变量的成员表达式不进行替换
+            if (
+                !(
+                    this.expression?.concept === 'Identifier'
+                    || (rootMemberExpression && rootMemberExpression.object?.concept === 'Identifier')
+                )
+            ) {
+                bindExpression = true;
+            }
+        }
+        return bindExpression;
+    }
 
-        if(this.name?.endsWith('background-image') && value)
-            value = `\`url(\${${value}})\``;
+    // 获取表达式在页面中的名字
+    get expressionNameInView() {
+        const nameList: string[] = [];
+        let node: BaseNode = this;
+        while (node) {
+            nameList.unshift(node.name);
+            if (node.concept === 'ViewElement') {
+                node = null;
+            } else {
+                nameList.unshift(node.parentKey);
+                node = node.parentNode;
+            }
+        }
+        return nameList.join('_').replace(/-/g, '_');
+    }
+
+    // 获取表达式生成器名称
+    get expressionBuilderName() {
+        let expressionInViewName = this.expressionNameInView;
+        expressionInViewName = expressionInViewName.charAt(0).toUpperCase() + expressionInViewName.slice(1);
+        return `gen${expressionInViewName}`;
+    }
 
+    // 获取参数列表
+    getArgsList() {
+        const viewElement = this?.getAncestor('ViewElement');
+        const argsList = [];
+        let parent = viewElement?.parentNode;
+        let index = 0;
+        while (parent && parent.concept !== 'View') {
+            if ((parent as ViewElement).slotScope) {
+                argsList.unshift(index === 0 ? 'current' : 'current' + index);
+                index++;
+            }
+            parent = parent.parentNode;
+        }
+        return argsList;
+    }
+
+    // 表达式中需要被监听的变量
+    get watchedVariableMap() {
+        const map: any = {};
+        // 页面中表达式用到的变量需要监听，从而重新执行match表达式
+        utils.traverse((current: any) => {
+            const { node } = current || {};
+            const { concept } = node || {};
+            if (['Identifier'].includes(concept)) {
+                let expressionNode = node;
+                let memberExpressionNode = node?.parentNode;
+                while (memberExpressionNode?.concept === 'MemberExpression') {
+                    expressionNode = memberExpressionNode;
+                    const { concept: objConcept } = memberExpressionNode.object || {};
+                    if (!['MemberExpression', 'Identifier'].includes(objConcept)) {
+                        memberExpressionNode = null;
+                        expressionNode = null;
+                    } else {
+                        memberExpressionNode = memberExpressionNode.object;
+                    }
+                }
+                if (expressionNode) {
+                    map[expressionNode.toJS()] = true;
+                }
+            }
+        }, {
+            node: this,
+        }, {
+            mode: 'anyObject',
+            excludedKeySet: new Set([
+                'parentNode',
+                'sourceMap',
+                'storageJSON',
+                'tsErrorDetail',
+                'NaslAnnotatedJSON',
+                'calledFrom',
+                '_events',
+                '_collectingList',
+                '_historyList',
+            ]),
+        });
+        return map;
+    }
+
+    getInViewMethod(state?: TranslatorState) {
+        const argsList = this.getArgsList() || [];
+        const hasArgs = !!argsList.length;
+        let argStr = '';
+
+        // 容错代码
+        let ftCode = '';
+        if (hasArgs) {
+            argsList.forEach((arg) => {
+                ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+                    this.${this.expressionNameInView}${argStr} = {};
+                }\n`;
+                argStr += `[${arg}.hasOwnProperty('__nodeKey') ? ${arg}.__nodeKey : ${arg}.index]`;
+            });
+        }
+        ftCode += `if (!this.${this.expressionNameInView}${argStr}) {
+            this.${this.expressionNameInView}${argStr} = {};
+        }`;
+
+        // 新的参数
+        const paramList = Object.keys(this.watchedVariableMap);
+        let newParams = `const newParams = [];`;
+        if (Array.isArray(paramList) && paramList.length) {
+            paramList.forEach((param) => {
+                newParams += `newParams.push(${param});\n`;
+            });
+        }
+
+        // 表达式主体
+        let expressionStr = this.expression?.toJS() || '';
+        if (this.name?.endsWith('background-image') && expressionStr)
+            expressionStr = `\`url(\${${expressionStr}})\``;
+
+        // 变量重新设置，为了触发重新调用
+        let setVarStr = `this.${this.expressionNameInView}${argStr} = {
+            ...(this.${this.expressionNameInView}${argStr} || {}),
+            value: value,
+        };`;
+        if (Array.isArray(argsList) && argsList.length) {
+            setVarStr += `this.${this.expressionNameInView} = {...this.${this.expressionNameInView}};\n`;
+        }
+
+        const code = `${this.expressionBuilderName} (${argsList.join(', ')}) {
+        // 容错代码
+        ${ftCode}
+        (async () => {
+            // 旧的参数
+            const oldParams = this.${this.expressionNameInView}${argStr}.params;
+            // 新的参数
+            ${newParams}
+            const isLooseEqual = this.$isLooseEqualFn(oldParams, newParams);
+            if (!isLooseEqual) {
+                this.${this.expressionNameInView}${argStr}.params = newParams;
+                const value = ${expressionStr};
+                ${setVarStr}
+            }
+        })();
+        return this.${this.expressionNameInView}${argStr}.value;
+    }`;
+
+        return code;
+    }
+
+    /**
+ * 转换成 Vue 的模板格式
+ */
+    toVue(options?: ElementToVueOptions) {
+        let value: string;
+        // 需要用标识符替换
+        if (options?.finalCode !== false && this.needReplaceWithIdentifier) {
+            const argsList = this.getArgsList();
+            value = `${this.expressionBuilderName} (${argsList.join(', ')})`;
+        } else {
+            value = this.expression?.toVue(options);
+            if (this.name?.endsWith('background-image') && value)
+                value = `\`url(\${${value}})\``;
+        }
         return value && `'${this.name}': ${value}`;
     }
-    
+
     @withSourceMap()
     toEmbeddedTS(state?: TranslatorState): string {
         let code = '()=>{';