@lcap/nasl-concepts 4.0.0-beta.9 → 4.0.0-creator.1

package/out/concepts/ViewElement__.js

@@ -1618,7 +1618,7 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             code += event.toNaturalTS((0, nasl_translator_1.shiftState)(state, code, {
                 tabSize: state.tabSize + 1,
             }));
-            code += ',\n';
+            code += '\n';
         });
         if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
             const defaultArr = [];
@@ -1668,6 +1668,99 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
         code += `${(0, nasl_translator_1.indent)(state.tabSize)}})`;
         return code;
     }
+    toNaturalTSX(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
+        let code = '';
+        const tagName = (0, utils_2.kebab2Camel)(this.tag);
+        code += `<${tagName} ref="${this.name}"`;
+        this.bindDirectives.forEach((directive) => {
+            const subCode = directive.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+            if (subCode.trim())
+                code += '\n' + subCode;
+        });
+        this.bindAttrs.forEach((attr) => {
+            const subCode = attr.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+            if (subCode.trim())
+                code += '\n' + subCode;
+        });
+        this.bindStyles.forEach((style) => {
+            const subCode = style.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+            if (subCode.trim())
+                code += '\n' + subCode;
+        });
+        this.bindEvents.forEach((event) => {
+            code += '\n' + event.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                tabSize: state.tabSize + 1,
+                inline: false,
+            }));
+        });
+        if (this.staticStyle) {
+            code += `\n${(0, nasl_translator_1.indent)(state.tabSize + 1)}style="${this.staticStyle}"`;
+        }
+        const defaultArr = [];
+        if (this.children.find((item) => item.tag === 'template' && item.slotTarget)) {
+            // 先把插槽翻译了
+            this.children.forEach((element) => {
+                if (element.tag === 'template' && !(element.slotTarget === 'default' && !element.slotScope)) {
+                    if (element.children.length) {
+                        code += '\n' + `${(0, nasl_translator_1.indent)(state.tabSize + 1)}slot${utils.firstUpperCase((0, utils_2.kebab2Camel)(element.slotTarget || ''))}={(${element.slotScope || ''}) => `;
+                        if (element.children.length === 1) {
+                            code += typeof element.children[0]?.toNaturalTSX === 'function' ? element.children[0].toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                                tabSize: state.tabSize + 1,
+                                inline: true,
+                            })) : '';
+                        }
+                        else { // 为多个元素
+                            code += `<>\n`;
+                            element.children.forEach((element) => {
+                                code += typeof element?.toNaturalTSX === 'function' ? element.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                                    tabSize: state.tabSize + 2,
+                                    inline: false,
+                                })) : '';
+                                code += '\n';
+                            });
+                            code += `${(0, nasl_translator_1.indent)(state.tabSize + 1)}</>`;
+                        }
+                        code += `}`;
+                    }
+                }
+                else if (element.tag === 'template' && element.slotTarget === 'default') {
+                    defaultArr.push(...element.children);
+                }
+                else {
+                    defaultArr.push(element);
+                }
+            });
+        }
+        else {
+            defaultArr.push(...this.children);
+        }
+        // 翻译其余的子集
+        const umodalSpecialCase = ['u-modal', 'UModal'].includes(this.tag) && this.children.find((item) => item.tag === 'template' && item.slotTarget == 'body');
+        if (defaultArr.length && !umodalSpecialCase) {
+            code += '>\n';
+            defaultArr.forEach((element) => {
+                code += typeof element?.toNaturalTSX === 'function' ? element?.toNaturalTSX((0, nasl_translator_1.shiftState)(state, code, {
+                    tabSize: state.tabSize + 1,
+                    inline: false,
+                })) : '';
+                code += '\n';
+            });
+            code += (0, nasl_translator_1.indent)(state.tabSize) + `</${tagName}>`;
+        }
+        else {
+            code += ' />';
+        }
+        return code;
+    }
     toTextualNASL(state = (0, nasl_translator_1.createCompilerState)(), parentLevel) {
         let code = '';
         code += (0, nasl_translator_1.createDecoratorCode)(state, this, ['name']);
@@ -2407,7 +2500,16 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
                 .map((element) => {
                 const childOptions = Object.assign({}, newOptions);
                 childOptions.indentLevel++;
-                return (shouldIndent ? '\n' + insideTabString : '') + element?.toVue(childOptions);
+                let elementCode = '';
+                // 如果当前子节点需要拆成组件，则返回组件标签，不进行 toVue 模板代码翻译
+                if (options?.autoSplitComponent && this.view.viewSplitComponentInfos) {
+                    const item = this.view.viewSplitComponentInfos.find((item) => item.nodePath === element.nodePath);
+                    if (item) {
+                        elementCode = `<${item.templateCompName} />`;
+                    }
+                }
+                elementCode = elementCode || element?.toVue(childOptions);
+                return (shouldIndent ? '\n' + insideTabString : '') + elementCode;
             })
                 .join('');
         if (newOptions.aslIdAttr) {
@@ -2808,8 +2910,17 @@ let ViewElement = class ViewElement extends Annotatable__1.default {
             content +
             (shouldIndent ? '\n' + tabString : '') +
             `</${tag}>`;
-        if (!content.trim() && selfClosingTag.includes(tag)) {
-            htmlContent = `<${tag}${partsString.length ? partsString : ''} />`;
+        const frameworkKind = this.frontend?.frameworkKind;
+        // 处理没有内容的标签
+        if (!content.trim()) {
+            // 支持自闭合标签
+            if (selfClosingTag.includes(tag)) {
+                return `<${tag}${partsString.length ? partsString : ''} />`;
+            }
+            // Vue3 template标签
+            if (frameworkKind === 'vue3' && tag === 'template') {
+                return '';
+            }
         }
         return htmlContent;
     }
@@ -3191,6 +3302,9 @@ __decorate([
 __decorate([
     (0, nasl_translator_1.withSourceMap)()
 ], ViewElement.prototype, "toNaturalTS", null);
+__decorate([
+    (0, nasl_translator_1.withSourceMap)()
+], ViewElement.prototype, "toNaturalTSX", null);
 __decorate([
     (0, nasl_translator_1.withSourceMap)()
 ], ViewElement.prototype, "toTextualNASL", null);