@lcap/nasl 3.8.2-beta.9 → 3.8.3-beta.2

package/src/natural/genNaturalTS.ts

@@ -13,6 +13,8 @@ import {
   getConnectors,
   getDependencies,
   getFrontendVariables,
+  getServerVariables,
+  getVariablesCode,
   getFrontendViews,
   getCurrentNodeContext,
   getCurrentNodeContextForUI,
@@ -26,6 +28,7 @@ import {
   getConnectorsCode,
   getDependenciesCode,
   getFrontendViewsCode,
+  getCurrentComponentDeclaration,
   wrapTSBlock,
 } from './getContext';
 import { createCompilerState } from '../translator';
@@ -57,20 +60,35 @@ export function genNaturalTSContextJSONForLogic(
     moduleInterfaces: any;
     connectors: any;
     dependencies: any;
-  }
+    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string; };
+    extensionMaterials: 'pc' | 'h5' | {
+      name: string;
+      title: string;
+      description: string;
+      tsDescription: string;
+    }[];
+  },
+  restParams?: any
 ) {
   const frontend = currentNode?.getAncestor('Frontend') as Frontend;
   const logicType = currentNode?.parentNode?.concept === 'App' ? 'global_logic' : 'view_logic';
-  const state = createCompilerState('', { descriptionComment: true });
+  const state = createCompilerState('', { descriptionComment: true, typeMap: restParams?.typeMap });
 
   const { naslCore } = getNaslCore(logicType);
   const { naslUtil } = getNaslUtil();
   const { naslUI } = getNaslUIOld();
+  let components = [];
+  if (logicType === 'view_logic' && material?.basicMaterials && material?.extensionMaterials) {
+    components = getNaslUI(app, frontend.type, {
+      basicMaterials: material?.basicMaterials,
+      extensionMaterials: material?.extensionMaterials,
+    }).naslUI;
+  }
   const { naslOql } = getNaslOQL();
   const { enums } = getEnums(app, state);
   const { entities } = getEntities(app, state);
   const { structures } = getStructures(app, state);
-  const { appLogics } = getLogics(app, currentNode);
+  const { appLogics } = getLogics(app, currentNode, state);
   const { interfaceDependencies } = getModuleInterfaces(
     material?.moduleInterfaces || app?.interfaceDependencies,
     state
@@ -89,17 +107,21 @@ export function genNaturalTSContextJSONForLogic(
     logicType,
     frontend?.type
   );
-  const { frontendVar, frontendVariables } = getFrontendVariables(
+  const { frontendVariables } = getFrontendVariables(
     currentNode?.getAncestor('Frontend') as Frontend,
     state
   );
-  const { views } = getFrontendViews(frontend, state, currentNode, false);
-  const { currentLogic } = getCurrentNodeContext(currentNode, focusedNodePath, experimental);
 
+  const { backendVariables } = getServerVariables(app, state);
+
+  const { views } = getFrontendViews(frontend, state, currentNode, false);
+  const { currentLogic } = getCurrentNodeContext(currentNode, focusedNodePath, experimental, restParams?.typeMap);
+  const { componentDeclaration } = getCurrentComponentDeclaration(currentNode, components);
   return {
     naslCore,
     naslUtil,
     naslUI,
+    components,
     naslOql,
     enums,
     entities,
@@ -108,11 +130,12 @@ export function genNaturalTSContextJSONForLogic(
     interfaceDependencies,
     connections,
     dependencies,
-    frontendVar, // @deprecated
     frontendVariables,
+    backendVariables,
     views,
     currentLogic,
     logicType,
+    componentDeclaration
   };
 }
 
@@ -142,16 +165,18 @@ export const genNaturalTSContextFromJSONForLogic = (
     connections,
     dependencies,
     frontendVariables,
+    backendVariables,
     views,
     currentLogic,
     logicType,
+    componentDeclaration
   } = tsContextJSON;
 
   let code = '';
-  code += '### [1] 标准库\n';
+  code += '### [1]标准库与类型定义\n';
   code += wrapTSBlock(naslCore);
 
-  code += '\n### [2] nasl.util\n';
+  code += '\n### [2]平台内置函数库\n';
   code += wrapTSBlock(naslUtil);
 
   if (naslUI && logicType === 'view_logic') {
@@ -161,10 +186,14 @@ export const genNaturalTSContextFromJSONForLogic = (
     } else {
       code += getNaslUICode(naslUI, codeType, requiredIndexes);
     }
+    if (componentDeclaration) {
+      code += '\n#### [3-1] 组件声明\n';
+      code += wrapTSBlock(`declare namespace nasl.ui {\n${componentDeclaration}}`);
+    }
   }
 
   if (naslOql && logicType === 'global_logic') {
-    code += '\n### [4] nasl.oql\n';
+    code += '\n### [4]数据查询定义\n';
     code += wrapTSBlock(naslOql);
   }
 
@@ -205,15 +234,20 @@ export const genNaturalTSContextFromJSONForLogic = (
 
   if (logicType === 'view_logic') {
     code += '\n### [10] 页面上下文\n';
-    if (frontendVariables) {
+    if (frontendVariables?.data?.length) {
       code += '\n#### [10-0] 前端全局变量\n';
-      code += frontendVariables;
+      code += getVariablesCode(frontendVariables);
     }
 
     if (views?.data?.length) {
       code += '\n#### [10-1] 前端页面列表\n';
       code += getFrontendViewsCode(views);
     }
+  } else {
+    code += '\n### [10] 全局变量\n';
+    if (backendVariables?.data?.length) {
+      code += getVariablesCode(backendVariables);
+    }
   }
 
   code += '\n### 当前逻辑上下文\n';
@@ -232,9 +266,17 @@ export function genNaturalTSContextForLogic(
     moduleInterfaces: any;
     connectors: any;
     dependencies: any;
+    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string; };
+    extensionMaterials: 'pc' | 'h5' | {
+      name: string;
+      title: string;
+      description: string;
+      tsDescription: string;
+    }[];
   },
   restParams?: {
-    codeType?: 'detail' | 'short';
+    codeType: 'detail' | 'short';
+    typeMap?: any;
   }
 ) {
   const tsContextJSON = genNaturalTSContextJSONForLogic(
@@ -242,11 +284,12 @@ export function genNaturalTSContextForLogic(
     currentNode,
     focusedNodePath,
     experimental,
-    material
+    material,
+    restParams
   );
   const code = genNaturalTSContextFromJSONForLogic(
     tsContextJSON,
-    restParams.codeType,
+    restParams?.codeType || 'short',
     requiredIndexes
   );
   return code;
@@ -262,8 +305,8 @@ export function genNaturalTSContextJSONForUI(
   app: App,
   currentNode: BaseNode,
   material?: {
-    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string };
-    extensionMaterials: {
+    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string; };
+    extensionMaterials: 'pc' | 'h5' | {
       name: string;
       title: string;
       description: string;
@@ -272,21 +315,23 @@ export function genNaturalTSContextJSONForUI(
     moduleInterfaces: any;
     connectors: any;
     dependencies: any;
-  }
+  },
+  restParams?: any
 ) {
   const frontend = currentNode.getAncestor('Frontend') as Frontend;
-  const state = createCompilerState();
+  const state = createCompilerState('', { descriptionComment: true, needNamespace: true, typeMap: restParams?.typeMap });
 
   const { naslCore } = getNaslCore('view_logic');
   const { naslUtil } = getNaslUtil();
-  const { naslUI } = getNaslUI(app, frontend.type, {
+  const { naslUI } = getNaslUIOld();
+  const components = getNaslUI(app, frontend.type, {
     basicMaterials: material?.basicMaterials,
     extensionMaterials: material?.extensionMaterials,
-  });
+  }).naslUI;
   const { enums } = getEnums(app, state);
   const { entities } = getEntities(app, state);
   const { structures } = getStructures(app, state);
-  const { appLogics } = getLogics(app, currentNode);
+  const { appLogics } = getLogics(app, currentNode, state);
   const { interfaceDependencies } = getModuleInterfaces(
     material?.moduleInterfaces || app?.interfaceDependencies,
     state
@@ -299,12 +344,15 @@ export function genNaturalTSContextJSONForUI(
   );
   const { frontendVariables } = getFrontendVariables(frontend, state);
   const { views } = getFrontendViews(frontend, state, currentNode, false);
-  const { currentLogic } = getCurrentNodeContextForUI(currentNode);
+  const { currentLogic } = getCurrentNodeContextForUI(currentNode, restParams?.typeMap);
+  const { componentDeclaration } = getCurrentComponentDeclaration(currentNode, components);
 
   return {
     naslCore,
     naslUtil,
     naslUI,
+    components,
+    componentDeclaration,
     enums,
     entities,
     structures,
@@ -333,7 +381,8 @@ export const genNaturalTSContextFromJSONForUI = (
   const {
     naslCore,
     naslUtil,
-    naslUI,
+    components,
+    componentDeclaration,
     enums,
     entities,
     structures,
@@ -346,18 +395,18 @@ export const genNaturalTSContextFromJSONForUI = (
   } = tsContextJSON;
 
   let code = '';
-  code += '### [1] 标准库\n';
+  code += '### [1] 标准库与类型定义\n';
   code += wrapTSBlock(naslCore);
 
-  code += '\n### [2] nasl.util\n';
+  code += '\n### [2] 平台内置函数库\n';
   code += wrapTSBlock(naslUtil);
 
-  if (naslUI) {
+  if (components) {
     code += '\n### [3] nasl.ui\n';
-    if (typeof naslUI === 'string') {
-      code += wrapTSBlock(naslUI);
-    } else {
-      code += getNaslUICode(naslUI, codeType, requiredIndexes);
+    code += getNaslUICode(components, codeType, requiredIndexes);
+    if (componentDeclaration) {
+      code += '\n#### [3-1] 组件声明\n';
+      code += wrapTSBlock(`declare namespace nasl.ui {\n${componentDeclaration}\n}`);
     }
   }
 
@@ -393,11 +442,10 @@ export const genNaturalTSContextFromJSONForUI = (
   }
 
   code += '\n### [10] 页面上下文\n';
-  if (frontendVariables) {
+  if (frontendVariables?.data?.length) {
     code += '\n#### [10-0] 前端全局变量\n';
-    code += frontendVariables;
+    code += getVariablesCode(frontendVariables);
   }
-
   if (views?.data?.length) {
     code += '\n#### [10-1] 前端页面列表\n';
     code += getFrontendViewsCode(views);
@@ -416,8 +464,8 @@ export function genNaturalTSContextForUI(
   focusedNodePath?: string,
   requiredIndexes?: string[],
   material?: {
-    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string };
-    extensionMaterials: {
+    basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string; };
+    extensionMaterials: 'pc' | 'h5' | {
       name: string;
       title: string;
       description: string;
@@ -428,13 +476,14 @@ export function genNaturalTSContextForUI(
     dependencies: any;
   },
   restParams?: {
-    codeType?: 'detail' | 'short';
+    codeType: 'detail' | 'short';
+    typeMap?: any;
   }
 ) {
-  const tsContextJSON = genNaturalTSContextJSONForUI(app, currentNode, material);
+  const tsContextJSON = genNaturalTSContextJSONForUI(app, currentNode, material, restParams);
   const code = genNaturalTSContextFromJSONForUI(
     tsContextJSON,
-    restParams.codeType,
+    restParams?.codeType || 'short',
     requiredIndexes
   );
   return code;

package/src/natural/getContext/getUILib.ts

@@ -50,7 +50,10 @@ export function handleMaterial({ json, tsDeclaration }: { json: Array<{ name: st
   snippets.forEach((code) => {
     const cap = code.match(/class ([a-zA-Z]+).+?extends ViewComponent/);
     if (cap) {
-      snippetMap[cap[1]] = `declare namespace nasl.ui${code}`;
+      const newCode = code
+        .replace(/nasl\.core\./g, "")
+        .replace(/Integer/g, "Long");
+      snippetMap[cap[1]] = `declare namespace nasl.ui${newCode}`;
     }
   });
   json.forEach((item) => {
@@ -79,12 +82,12 @@ export function getPreDeclaration() {
   /// #if process.env.BUILD_TARGET === 'node'
   if (globalThis.process) { // For TS build
     const fs = require('fs');
-    code = fs.readFileSync(require.resolve(`../../../sandbox-natural/stdlib/nasl.ui.pre.d.ts`), 'utf8');
+    code = fs.readFileSync(require.resolve(`../../../sandbox-natural/stdlib/nasl.ui.d.ts`), 'utf8');
   }
   /// #endif
   /// #if process.env.BUILD_TARGET !== 'node'
   if (globalThis.window) { // For TS build
-    code = require('!!raw-loader!../../../sandbox-natural/stdlib/nasl.ui.pre.d.ts').default;
+    code = require('!!raw-loader!../../../sandbox-natural/stdlib/nasl.ui.d.ts').default;
   }
   /// #endif
   return code;

package/src/natural/getContext/index.ts

@@ -1,3 +1,4 @@
+import * as utils from '../../utils';
 import { App, View, Logic, BaseNode, Frontend, Namespace, Module, TypeAnnotation, Structure, Connection, Connector } from '../../concepts';
 import { shiftState, createCompilerState, TranslatorState, indent } from '../../translator';
 import { getPreDeclaration, getUILib, handleMaterial, getExtensionsMaterial } from './getUILib';
@@ -86,7 +87,7 @@ export function getLogicWithStructuresCode(logic: Logic, type: string, desc: { d
 
   newRelationStructures?.forEach((reference: { typeNamespace: string; typeName: string; }) => {
     const { typeName } = reference || {};
-    const state = createCompilerState();
+    const state = createCompilerState('', { descriptionComment: true });
     const tabSize = namespace ? shiftState(state, code, { tabSize: 1 }) : undefined;
     structures?.filter((structure: any) => structure?.name === typeName)
       ?.forEach((structure: any) => {
@@ -96,15 +97,15 @@ export function getLogicWithStructuresCode(logic: Logic, type: string, desc: { d
   if (namespace && newRelationStructures?.length) {
     code += `}\n`;
   }
-  const { description, codeStr } = desc || {};
-  if (description) code += `// ${description}\n`;
+  const { codeStr } = desc || {};
+  // if (description) code += `// ${description}\n`;
   if (codeStr) code += `${codeStr}\n`;
   code = wrapTSBlock(code);
   return code;
 }
 
 export function getNaslCore(logicType: string) {
-  let naslCore = `${getNASLStdlibMap('nasl.core.ts')}\n`;
+  let naslCore = `${getNASLStdlibMap('nasl.core.d.ts')}\n`;
   if (logicType === 'global_logic')
     naslCore += `// 分页组件函数，用于分页
 declare function PAGINATE<T>(list: List<T>, page: Integer, size: Integer): { list: List<T>, total: Integer; };
@@ -114,7 +115,7 @@ declare function PAGINATE<T>(list: List<T>, page: Integer, size: Integer): { lis
 }
 
 export function getNaslUtil() {
-  const naslUtil = `${getNASLStdlibMap('nasl.util.ts')}\n`;
+  const naslUtil = `${getNASLStdlibMap('nasl.util.d.ts')}\n`;
   const code = wrapTSBlock(naslUtil);
   return { code, naslUtil };
 }
@@ -125,7 +126,7 @@ export const getNaslUI = (
   material:
     {
       basicMaterials: 'pc' | 'h5' | { json: any; tsDeclaration: string; };
-      extensionMaterials: {
+      extensionMaterials: 'pc' | 'h5' | {
         name: string;
         title: string;
         description: string;
@@ -170,19 +171,20 @@ export const getNaslUICode = (naslUI: any, codeType: 'detail' | 'short', require
 */
 ${item.tsDeclaration}`).join('\n')}`);
   } else {
+    code += wrapTSBlock(preDeclaration);
     code += uiLib.map((item: any, index: number) => `[3-${index}] ${item.name} | ${item.title} | ${item.description}`).join('\n');
   }
   return code;
 };
 
 export const getNaslUIOld = () => {
-  const naslUI = `${getNASLStdlibMap('nasl.ui.ts')}\n`;
+  const naslUI = `${getNASLStdlibMap('nasl.ui.d.ts')}\n`;
   const code = wrapTSBlock(naslUI);
   return { code, naslUI };
 };
 
 export function getNaslOQL() {
-  const naslOql = `${getNASLStdlibMap('nasl.oql.ts')}\n`;
+  const naslOql = `${getNASLStdlibMap('nasl.oql.d.ts')}\n`;
   const code = wrapTSBlock(naslOql);
   return { code, naslOql };
 }
@@ -215,7 +217,7 @@ export function getEntities(app: App, state: TranslatorState) {
     const data = [] as Snippet[];
     const namespace = `app.dataSources.${dataSource?.name}.entities`;
     dataSource.entities
-      .filter((entity) => !entity.name.startsWith('LCAP') || entity.name === 'LCAPUser')
+      // .filter((entity) => !entity.name.startsWith('LCAP') || entity.name === 'LCAPUser')
       .forEach((entity) => {
         const entityName = `app.dataSources.${dataSource?.name}.entities.${entity?.name}`;
         const tempCode = `${entity?.toNaturalTS({ ...state, needNamespace: true }, entityName)}`;
@@ -231,7 +233,7 @@ export const getEntitiesCode = (entities: any) => {
   entities?.forEach((entity: any) => {
     code += `declare namespace ${entity?.namespace} {\n`;
     entity?.data?.forEach((item: any) => {
-      code += item?.description ? `/* ${item.description} */ \n` : '';
+      // code += item?.description ? `/* ${item.description} */ \n` : '';
       code += `${item.code}\n`;
     });
     code += `}\n`;
@@ -244,7 +246,7 @@ export function getStructures(app: App, state: TranslatorState) {
   const data = [] as Snippet[];
   const namespace = `app.structures`;
   app.structures
-    .filter((entity) => !entity.name.startsWith('LCAP'))
+    // .filter((entity) => !entity.name.startsWith('LCAP'))
     .forEach((structure) => {
       const tempCode = `${structure?.toNaturalTS({ ...state, needNamespace: true })}`;
       data.push({ description: structure?.description || structure?.name, code: tempCode });
@@ -256,7 +258,7 @@ export const getStructuresCode = (structures: any) => {
   let code = '';
   code += `declare namespace ${structures?.namespace} {\n`;
   structures?.data?.forEach((item: any) => {
-    code += item?.description ? `/* ${item.description} */ \n` : '';
+    // code += item?.description ? `/* ${item.description} */ \n` : '';
     code += `${item.code}\n`;
   });
   code += `}\n`;
@@ -265,14 +267,14 @@ export const getStructuresCode = (structures: any) => {
 };
 
 
-export function getLogics(app: App, currentNode: BaseNode) {
+export function getLogics(app: App, currentNode: BaseNode, state: TranslatorState) {
   const data = [] as Snippet[];
   const namespace = `app.logics`;
   app?.logics
     ?.filter((logic) => logic !== currentNode && !logic.name.startsWith('LCAP'))
     ?.forEach((logic) => {
       const rename = logic?.calleewholeKey;
-      const tempCode = `${logic?.toNaturalTS({ needNamespace: true, rename, declaration: true })}`;
+      const tempCode = `${logic?.toNaturalTS({ ...state, needNamespace: true, rename, declaration: true })}`;
       const description = logic?.description || '';
 
       data.push({ description, code: tempCode });
@@ -287,7 +289,8 @@ export const getLogicsCode = (appLogics: any, codeType: 'detail' | 'short', requ
     const logicIndex = `6-${index}`;
     if (requiredIndexes?.length && !requiredIndexes?.includes(logicIndex)) return;
     const tempCode = codeType === 'short' ? item.code.replace(`${appLogics.namespace}.`, '') : item.code;
-    code += `[${logicIndex}] ${item.description ? `${item.description}: ` : ''}\`${tempCode}\`\n`;
+    code += `[${logicIndex}] \`${tempCode}\`\n`;
+    // code += `[${logicIndex}] ${item.description ? `${item.description}: ` : ''}\`${tempCode}\`\n`;
   });
   return code;
 };
@@ -338,8 +341,8 @@ export const getModuleInterfacesCode = (interfaceDependencies: any, codeType: 'd
       if (requiredIndexes?.length && !requiredIndexes?.includes(interfaceIndex)) return;
       if (codeType === 'short') {
         const tempCode = item.code.replace(`${interfaceDependency?.logics.namespace}.`, '');
-        // code += `[${interfaceIndex}] \`${tempCode}\`\n`;
-        code += `[${interfaceIndex}] ${item.description ? `${item.description}: ` : ''}\`${tempCode}\`\n`;
+        code += `[${interfaceIndex}] \`${tempCode}\`\n`;
+        // code += `[${interfaceIndex}] ${item.description ? `${item.description}: ` : ''}\`${tempCode}\`\n`;
       } else {
         code += item.codeWithDetail;
       }
@@ -542,13 +545,37 @@ export const getDependenciesCode = (dependencies: any, codeType: 'detail' | 'sho
 
 export function getFrontendVariables(frontend: Frontend, state: TranslatorState) {
   let code = '';
+  const data = [] as Snippet[];
+  const namespace = frontend?.variables?.[0]?.getNamespace() || '';
   frontend?.variables?.forEach((variable) => {
-    const tempCode = `let ${variable?.toNaturalTS(shiftState(state, code, { inline: true }))};\n`;
+    const tempCode = `let ${variable?.toNaturalTS(shiftState(state, code, { inline: true, needNamespace: true, }))};\n`;
+    data.push({ description: variable?.description || '', code: tempCode });
+    code += tempCode;
+  });
+  return { namespace, frontendVariables: { namespace, data } };
+}
+
+export function getServerVariables(app: App, state: TranslatorState) {
+  let code = '';
+  const data = [] as Snippet[];
+  const namespace = 'app.backend.variables';
+  app.backend?.variables?.forEach((variable) => {
+    const tempCode = `let ${variable?.toNaturalTS(shiftState(state, code, { inline: true, needNamespace: true, }))};\n`;
+    data.push({ description: variable?.description || '', code: tempCode });
     code += tempCode;
   });
-  return { code: wrapTSBlock(code), frontendVar: code, frontendVariables: code };
+  return { namespace, backendVariables: { namespace, data } };
 }
 
+export const getVariablesCode = (variables: any) => {
+  let code = '';
+  variables?.data?.forEach((item: any) => {
+    code += item.description ? `/* ${item.description} */ \n` : '';
+    code += item.code;
+  });
+  return wrapTSBlock(code);
+};
+
 export function getChildrenViews(view: View, currentNode: BaseNode, convertChildren: boolean, prefix: string) {
   const data = [] as Snippet[];
   if (view?.children?.length > 0) {
@@ -606,7 +633,7 @@ export const getFrontendViewsCode = (views: any) => {
   return wrapTSBlock(code);
 };
 
-export function getCurrentNodeContext(currentNode: BaseNode, focusedNodePath?: string, experimental?: boolean) {
+export function getCurrentNodeContext(currentNode: BaseNode, focusedNodePath?: string, experimental?: boolean, typeMap?: any) {
   let code = '';
   let view: View;
   if (currentNode?.concept === 'View') {
@@ -631,14 +658,16 @@ export function getCurrentNodeContext(currentNode: BaseNode, focusedNodePath?: s
       createCompilerState('', {
         focusedNodePath,
         needNamespace: true,
+        typeMap,
       }),
       function (state) {
         let code = '';
         code += `\n${indent(state.tabSize)}`;
-
+        
         if (experimental) {
           code += this.elements[0].toNaturalTS(shiftState(state, code, { tabSize: state.tabSize + 1 }));
         } else {
+          code += `${indent(state.tabSize + 1)}`;
           code += `const $refs = {\n`;
           // 生成所有的name和类型定义
           this.elements.forEach((element) => {
@@ -653,17 +682,36 @@ export function getCurrentNodeContext(currentNode: BaseNode, focusedNodePath?: s
         // 逻辑
         if (currentNode?.concept === 'Logic') {
           code += '\n';
+          this.bindEvents.forEach((bindEvent) => {
+            bindEvent.logics.forEach((logic) => {
+              if (logic === currentNode) return;
+              const logicCode = logic.toNaturalTS(
+                shiftState(state, code, {
+                  tabSize: state.tabSize + 1,
+                  // declaration: true,
+                  autoPrefixName: true,
+                })
+              );
+              code += logicCode.replace('function ', 'private function ');
+              code += '\n';
+            });
+            if (bindEvent.logics.length) code += '\n';
+          });
+
           this.logics.forEach((logic) => {
             if (logic === currentNode) return;
-            code += logic.toNaturalTS(
+            const logicCode = logic.toNaturalTS(
               shiftState(state, code, {
                 tabSize: state.tabSize + 1,
                 declaration: true,
                 autoPrefixName: true,
               })
             );
+            code += logicCode.replace('declare function', 'function');
             code += '\n';
           });
+          if (this.logics.length) code += '\n';
+
           // 包含了事件逻辑的处理
           code += `${indent(state.tabSize + 1)}/* 当前逻辑 */\n`;
           code += (currentNode as Logic).toNaturalTS(
@@ -700,13 +748,14 @@ export function getCurrentNodeContext(currentNode: BaseNode, focusedNodePath?: s
         needNamespace: true,
         declaration: logic !== currentNode,
         autoPrefixName: true,
+        typeMap
       })
     );
   }
   return { code: wrapTSBlock(code), currentLogic: code };
 }
 
-export function getCurrentNodeContextForUI(currentNode: BaseNode) {
+export function getCurrentNodeContextForUI(currentNode: BaseNode, typeMap?: any) {
   let code = '';
   let view: View;
   if (currentNode?.concept === 'View') {
@@ -725,9 +774,62 @@ export function getCurrentNodeContextForUI(currentNode: BaseNode) {
     code += view?.toNaturalTS(
       createCompilerState('', {
         needNamespace: true,
+        typeMap,
       })
     );
   }
 
   return { code: wrapTSBlock(code), currentLogic: code };
 }
+
+
+const calcComponent = (activeDesignerNode: any) => {
+  const view = activeDesignerNode?.concept === 'View' ? activeDesignerNode?.elements?.[0] : (activeDesignerNode.getAncestor('View') as any)?.elements?.[0];
+  const componentSet = new Set();
+  if (view) {
+    utils.traverse(({ node }: { node: any; }) => {
+      if (node.concept === 'ViewElement') {
+        const name = utils.kebab2Camel(node.tag);
+        componentSet.add(name);
+      }
+    }, { node: view });
+  }
+  return componentSet;
+};
+
+
+const extractUFormClass = (tsDeclaration: string) => {
+  const regex = /class\s+(\w+)(?:<[^>]+>)?\s+extends\s+(\w+)\s*\{(.*?)\}/s;
+  const match = tsDeclaration.match(regex);
+  let code = '';
+  if (match) {
+    const [, className, baseClassName, classBody] = match;
+    const methodRegex = /\s*(\w+)\(([^)]*)\):\s*(\w+)/g;
+    code = `export class ${className} extends ${baseClassName} {`;
+    const newClassBody = classBody.replace(/nasl\.core\./g, "")
+      .replace(/Integer/g, "Long");
+    const body = newClassBody.replace(methodRegex, (method) => {
+      code += `${method};`;
+      return '';
+    });
+    code += `\n}\n`;
+    if (body === classBody) {
+      return '';
+    }
+  }
+  return code;
+};
+
+export function getCurrentComponentDeclaration(activeDesignerNode: any, components: any) {
+  let code = '';
+  const componentSet = calcComponent(activeDesignerNode);
+  if (!componentSet.size) return { componentDeclaration: '' };
+  // 遍历map，找到对应的组件
+  const result = components.filter((component: any) => componentSet.has(component.name));
+  result.forEach((component: any) => {
+    const newTsDeclaration = component.tsDeclaration;
+    const uFormClass = extractUFormClass(newTsDeclaration);
+    code += uFormClass;
+  });
+  return { componentDeclaration: code };
+}