@lcap/nasl 3.7.2-alpha.1 → 3.7.2-beta.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lcap/nasl",
   "description": "NetEase Application Specific Language",
-  "version": "3.7.2-alpha.1",
+  "version": "3.7.2-beta.1",
   "author": "Forrest <rainforest92@126.com>",
   "scripts": {
     "clear": "rimraf ./out",
@@ -43,6 +43,7 @@
     "decimal.js": "10.4.3",
     "faker": "5.4.0",
     "fs-extra": "10.1.0",
+    "idb": "8.0.0",
     "json5": "2.2.3",
     "lodash": "4.17.21",
     "postcss": "8.4.14",

package/src/common/BaseNode.ts

@@ -30,7 +30,6 @@ const patchCompose = (node: BaseNode, type = 'add') => {
   }
 }
 
-
 type NodePathOption = {
   useName?: boolean,
 }

package/src/concepts/ViewElement__.ts

@@ -3283,17 +3283,17 @@ export class ViewElement extends BaseNode {
     if (!styleObj['--constraint-modified'] && !ops.isUpdateConstraintRule) {
       if (Math.abs(staticLeft - staticRight) < threshold) {
         constraintX = 'center';
-      } else if (staticLeft < staticRight) {
-        constraintX = 'left';
-      } else if (staticLeft > staticRight) {
+      } else if (staticLeft > parentWidth/2) {
         constraintX = 'right';
+      } else if (staticRight > parentWidth/2) {
+        constraintX = 'left';
       }
       if (Math.abs(staticTop - staticBottom) < threshold) {
         constraintY = 'center';
-      } else if (staticTop < staticBottom) {
-        constraintY = 'top';
-      } else if (staticTop > staticBottom) {
+      } else if (staticTop > parentHeight/2) {
         constraintY = 'bottom';
+      } else if (staticBottom > parentHeight/2) {
+        constraintY = 'top';
       }
     }
 

package/src/generator/genBundleFiles.ts

@@ -800,7 +800,8 @@ export function genBundleFiles(app: App, frontend: Frontend, config: Config) {
       const asset = assetsMap.get(url);
       if (asset) {
         const basePath = frontend?.basePath;
-        const assetDir = basePath ? `${basePath}/assets/${asset.name}` : `/assets/${asset.name}`;
+        const assetName = encodeURIComponent(asset.name);
+        const assetDir = basePath ? `${basePath}/assets/${assetName}` : `/assets/${assetName}`;
         let path = assetDir;
         const sysPrefixPath = frontend?.app?.sysPrefixPath;
         if (sysPrefixPath) {

package/src/generator/release-body/body.ts

@@ -79,7 +79,8 @@ async function getNaslAnnotatedJSON(app: App, opt: InternalReleaseData) {
         node[key] = url.replace(regex, (url) => {
           const asset = assetsMap.get(url);
           if (asset) {
-            const path = `/assets/${asset.name}`;
+            const assetName = encodeURIComponent(asset.name);
+            const path = `/assets/${assetName}`;
             globalConfig.assets.push({
               path,
               isDir: false,

package/src/natural/genNaturalTS.ts

@@ -22,12 +22,11 @@ import { createCompilerState } from '../translator';
 export function genNaturalTS(app: App, currentNode?: BaseNode, focusedNodePath?: string) {
   if (currentNode?.concept === 'Logic') {
     const logic = currentNode as Logic;
-    const code = logic?.toNaturalTS(
-      createCompilerState(undefined, {
-        focusedNodePath,
-        autoPrefixName: true,
-      })
-    );
+    const code = logic?.toNaturalTS(createCompilerState(undefined, {
+      focusedNodePath,
+      needNamespace: true,
+      autoPrefixName: true,
+    }));
     return code;
   }
   return getCurrentNodeContextForUI(currentNode).code;

package/src/natural/transformTS2UI.ts

@@ -1,6 +1,6 @@
 /* eslint-disable global-require */
 /* eslint-disable @typescript-eslint/no-use-before-define */
-import { kebabCase } from 'lodash';
+import { kebabCase, cloneDeep } from 'lodash';
 import * as babel from '@babel/core';
 import * as babelTypes from '@babel/types';
 import generate from '@babel/generator';
@@ -1112,11 +1112,12 @@ function transformNode2ViewConstruct(node: babelTypes.Node): naslTypes.ViewEleme
           } else if (properties?.[2].value.value === 'BindAttribute') {
             newNode = transformNode2Attribute({ key: element.left, value: element.right });
           }
+          const newNodeBackup = cloneDeep(newNode);
           (newNode as any).aiParams = {
             action: properties?.[0].value.value,
             selectedNodeName: properties?.[1].value.value,
             concept: properties?.[2].value.value,
-            object: newNode
+            object: newNodeBackup
           };
           newViewElement.push(newNode);
         });
@@ -1152,7 +1153,8 @@ function transformNode2View(node: babelTypes.FunctionDeclaration, root?: babelTy
     if (item.type === 'ReturnStatement' && item?.argument?.type === 'CallExpression') {
       const action = (item.argument as any)?.callee?.name;
       const selectedNodeName = (item.argument as any).arguments?.[0]?.property?.name;
-      (viewItem as any).aiParams = { selectedNodeName, action, concept: 'ViewElement', object: viewItem };
+      const newNodeBackup = cloneDeep(viewItem);
+      (viewItem as any).aiParams = { selectedNodeName, action, concept: 'ViewElement', object: newNodeBackup};
     }
     if (item.type === 'ReturnStatement' && item?.argument?.type === 'ArrayExpression') {
       viewItem?.forEach((element: any) => {

package/src/server/getLogics.ts

@@ -500,7 +500,7 @@ export function getLogicsSync(node: CallLogic | BindEvent | Identifier | Logic,
         ],
         expanded: false,
       });
-      if (!app.processes.length && !app.processV2s.length) systemTree.children.shift();
+      if (!(app.processes?.length) && !(app.processV2s?.length)) systemTree.children.shift();
 
       systemTree.expanded = false;
       systemTree.children.forEach((child) => (child.expanded = false));

package/src/server/translator.ts

@@ -914,6 +914,13 @@ export function naslNodeTranslateMessage(minRange: MinRange, tsErrorDetail: Diag
  * @param tsErrorDetail
  */
 function getConnectorErrorDetail(node: BaseNode, tsErrorDetail: Diagnostic) {
+  // 如果message 为纯英文，直接返回
+  if (/^[A-Za-z\s]+[.,!?;:]$/.test(tsErrorDetail.message)) {
+    return {
+      node,
+      ...tsErrorDetail,
+    };
+  }
   const connector = node.getAncestor('Connector') as Connector;
   let targetNode = node;
   let msgPrefix = '';

package/src/service/storage/init.ts

@@ -4,16 +4,16 @@ import { addBreakpointNodesFromApp } from '../../breakpoint';
 import { getConceptConstructor } from '../../decorators';
 import { config } from '../../config';
 import storageService from './service';
+import { LsCache, BreakpointStatus, FullResponse, isDebugMode, BatchInstructResult } from '../../utils';
 import { v4 as uuidv4 } from 'uuid';
 import stepRecorder from '../../manager/stepRecorder';
 import * as jsoner from './jsoner';
 /// #if !process.env.NODE_ENV || process.env.BUILD_TARGET === 'node'
 import * as fs from 'fs-extra';
 import type { NaslServer } from 'src/server/naslServer';
+import { NaslCacheData, NaslData } from 'src/utils/language-cache';
 /// #endif
 
-
-
 export const batchQuery = storageService.batchQuery;
 export const batchAction = storageService.batchAction;
 export const batchInstruct = storageService.batchInstruct;
@@ -58,12 +58,12 @@ export function doOperationRecord(operation: Operation) {
       transaction.oncomplete = () => {
         db.close();
       };
-    } catch(err) {
+    } catch (err) {
       console.log(err);
     }
   };
 
-  request.onerror = function(event) {
+  request.onerror = function (event) {
     console.log('Failed to open database');
   };
 }
@@ -228,7 +228,7 @@ export async function operationRecordPlayback(app: any, operationRecordAction: '
         const pathArr = path?.split('.') || [];
         const lastPathItem = pathArr?.pop();
         if (lastPathItem) {
-            pathArr.push(lastPathItem.replace(/(name=)[^\]]+/, `$1${object?.name}`));
+          pathArr.push(lastPathItem.replace(/(name=)[^\]]+/, `$1${object?.name}`));
         }
         newPath = pathArr.join('.');
       }
@@ -254,7 +254,7 @@ export async function operationRecordPlayback(app: any, operationRecordAction: '
         case 'update':
           for (const key in oldObject) {
             if (node) {
-                (node as any)[key] = oldObject[key] ?? null;
+              (node as any)[key] = oldObject[key] ?? null;
             }
           }
           break;
@@ -427,7 +427,7 @@ async function doAction(app: any, actionItem: any) {
   let hasBackEnd = false;
   const actionList: any[] = [];
   const allRiskList: any[] = [];
-  const { list, actionMsg, action, extra} = actionItem || {};
+  const { list, actionMsg, action, extra } = actionItem || {};
   handleAIPoint(app, actionItem);
   const itemloop = (_i: LogicItem, app: any, diffArr: string[]) => {
     const _l = getStatement(_i, app, diffArr);
@@ -543,9 +543,9 @@ async function doAction(app: any, actionItem: any) {
             const isDelete = event?.originEvent?.action === 'delete';
             const isAuthView = (emitTarget as View).auth && event?.originEvent?.object?.name;
             const isUpdateAuth = event?.originEvent?.action === 'update' && "auth" in (event?.originEvent?.object || {});
-            const isUpdateAuthDes =  event?.originEvent?.action === 'update' &&  "authDescription" in (event?.originEvent?.object || {});
+            const isUpdateAuthDes = event?.originEvent?.action === 'update' && "authDescription" in (event?.originEvent?.object || {});
             const isUpdateBindRoles = event?.originEvent?.action === 'update' && event?.originEvent?.object && event?.originEvent?.object?.bindRoles;
-            if (isDelete || isUpdateAuth || isUpdateBindRoles || isAuthView||isUpdateAuthDes) {
+            if (isDelete || isUpdateAuth || isUpdateBindRoles || isAuthView || isUpdateAuthDes) {
               hasBackEnd = true;
               // const app = emitTarget.app;
               // const diffArr: string[] = [];
@@ -566,7 +566,7 @@ async function doAction(app: any, actionItem: any) {
             hasFrontEnd = true;
           }
           if (emitTarget.concept === 'ViewElement') {
-            if(event?.originEvent?.action === 'update' || event?.originEvent?.action === 'delete'){
+            if (event?.originEvent?.action === 'update' || event?.originEvent?.action === 'delete') {
               if ('authDescription' in (event?.originEvent?.object ?? {})) {
                 hasBackEnd = true;
               }
@@ -597,7 +597,7 @@ async function doAction(app: any, actionItem: any) {
           }
           if (emitTarget.concept === 'BindAttribute' && emitTarget.name === 'url') {
             const needUpdateBackEnd =
-            (emitTarget as BindAttribute)?.value?.endsWith('/import') || (emitTarget as BindAttribute)?.value?.includes('/upload/')
+              (emitTarget as BindAttribute)?.value?.endsWith('/import') || (emitTarget as BindAttribute)?.value?.includes('/upload/')
             if (!(emitTarget as BindAttribute).view.parentAuth && needUpdateBackEnd) {
               hasBackEnd = true
             }
@@ -888,7 +888,7 @@ function ensureSafe(instructList: any[]) {
     instruct?.actions?.forEach((actionItem: any) => {
       const { path, action, object } = actionItem || {};
       if (path === 'app') {
-        switch(action) {
+        switch (action) {
           case 'create':
             riskList.push('重复创建App');
             break;
@@ -918,7 +918,8 @@ async function _saveNasl(options: TaskOption) {
   } else if (hasBackEnd) {
     ChangedNASLType = 'backend';
   }
-  let res: any;
+
+  let res: BatchInstructResult;
   let err: any;
 
   if (config.storage.protocol === 'http') {
@@ -996,6 +997,13 @@ async function _saveNasl(options: TaskOption) {
     });
   }
   app.emit?.('saved', err);
+
+  // 更新缓存
+  await LsCache.updateNaslCache(app.id, {
+    ...res,
+    getData: () => cloneDeep(app.toJSON()),
+  });
+
   return err;
 }
 
@@ -1138,61 +1146,104 @@ export function handleApp(app: ProxyApp) {
   });
 }
 
-type BreakpointItem =
-  | any
-  | {
-      path: string
-      breakpointStatus: null | 'ENABLED' | 'DISABLED'
-    }
+async function getBatchAdditionalData(appId: string) {
+  const { data: { result: [globalChangedTime] }, headers }: FullResponse<number> = await storageService.batchQuery({
+    body: [
+      {
+        path: 'app.globalChangedTime',
+      },
+    ],
+    headers: {
+      appId,
+      checkTabOpenTime: 'true',
+    },
+    config: {
+      shortResponse: false
+    },
+  });
+
+  return {
+    globalChangedTime,
+    tabTimestamp: headers['tabtimestamp'],
+  };
+}
+
+async function getNaslFromServer(appId: string, globalChangedTime: number | null) {
+  const [naslData] = await storageService.batchQuery({
+    body: [
+      {
+        path: 'app',
+      },
+    ],
+    headers: {
+      appId,
+    },
+  });
+
+  // 后端没有此值时，表示为存量应用，不可缓存
+  if (!globalChangedTime) {
+    return naslData;
+  }
+
+  await LsCache.updateNaslCache(appId, {
+    getData: () => naslData,
+    // 初次缓存时此值无用，故赋值为 0
+    preGlobalChangedTime: 0,
+    globalChangedTime: globalChangedTime,
+  });
+
+  return naslData as NaslData;
+}
+
+async function getNaslFromCache(appId: string) {
+  return LsCache.getNaslCacheWithoutCheck(appId).then((data) => data.data);
+}
 
 /**
  * 加载 app
  * @param appId 如果是从文件读，就不需要传
  * @returns app 对象
  */
-export async function loadApp(appId?: string) {
+export async function loadApp(appId: string) {
   try {
     // 删除失效数据
     deleteExpiredRecords();
-  } catch(err) { }
+  } catch (err) { }
   let app: App;
   if (config.storage.protocol === 'http') {
     console.time('batchQuery');
+    const additionalData = await getBatchAdditionalData(appId);
+    const useCache = await LsCache.canUseNaslCache(appId, additionalData.globalChangedTime);
     const promises = [
-      storageService.batchQuery({
-        body: [
-          {
-            path: 'app'
-            // excludes: ['views'],
-          }
-        ],
-        headers: {
-          appId,
-          checkTabOpenTime: 'true'
-          // 其他封装在 storageService 里了
-        },
-        config: {
-          shortResponse: false
-        }
-      }),
+      useCache
+        ? getNaslFromCache(appId)
+        : getNaslFromServer(appId, additionalData.globalChangedTime),
       storageService.breakpoint({
         body: { appId }
-      })
-    ]
+      }),
+      useCache ? Promise.resolve() : LsCache.clearCache(appId),
+    ] as [Promise<LsCache.NaslCacheData>, Promise<BreakpointStatus[]>, Promise<void>];
+
+    if (isDebugMode) {
+      if (useCache) {
+        console.log('命中 Nasl 前端缓存');
+      }
+      else {
+        console.log('未命中 Nasl 前端缓存');
+      }
+    }
 
     const [batchQueryRes, breakpointRes] = await Promise.all(promises)
 
     // 请求
     console.timeEnd('batchQuery');
-
-    tabTimestamp = batchQueryRes?.headers?.tabtimestamp;
-    const data = batchQueryRes?.data?.result;
+    tabTimestamp = additionalData.tabTimestamp;
 
     console.time('new App');
-    app = new App(Object.assign(data?.[0] || {}, { id: appId }));
+    app = new App(Object.assign(batchQueryRes, { id: appId }));
 
-    breakpointRes?.forEach?.((item: BreakpointItem = {}) => {
-      const { path, breakpointStatus } = item
+    breakpointRes?.forEach?.((item) => {
+      const { path, breakpointStatus } = item ?? {};
 
       if (breakpointStatus) {
         const node = app.findNodeByPath(path)

package/src/utils/env.ts

@@ -2,10 +2,9 @@
 export const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
 /** Node 环境 */
 export const isNode = process.env.BUILD_TARGET === 'node' || !globalThis.window;
+/** 本地模式 */
+export const isLocalMode = isBrowser && location.hostname.includes('localhost');
 /** 调试模式 */
-export const isDebugMode = isBrowser && /[?&]debug=true/.test(window.location.search);
+export const isDebugMode = isBrowser && (/[?&]debug=true/.test(location.search) || isLocalMode);
 /** 是否是浏览器测试环境 */
-export const isTestBrowser = isBrowser && (
-  /codewave-(test|dev)\.163yun\.com$/.test(location.hostname) ||
-  location.hostname.includes('localhost')
-);
+export const isTestBrowser = isBrowser && (/codewave-(test|dev)\.163yun\.com$/.test(location.hostname) || isLocalMode);

package/src/utils/index.ts

@@ -16,6 +16,8 @@ export * from './env';
 export * from './file';
 export * from './time-slicing';
 
+export * as LsCache from './language-cache';
+
 // 查找最近的模块
 export function findClosestModule(node: BaseNode) {
   let moduleNode = node;

package/src/utils/language-cache/constant.ts

@@ -0,0 +1,14 @@
+/** 数据库名称 */
+export const DbName = 'language-cache';
+
+/**
+ * 缓存时长
+ *
+ * @description 3 天时间
+ */
+export const NaslCacheLimit = 3 * 24 * 60 * 60 * 1000;
+
+/** 数据库储存表 */
+export enum StoreName {
+  Nasl = 'Nasl',
+}

package/src/utils/language-cache/index.ts

@@ -0,0 +1,2 @@
+export * from './nasl';
+export * from './types';

package/src/utils/language-cache/nasl.ts

@@ -0,0 +1,77 @@
+import { isNode } from '../env';
+import { StoreName, DbName, NaslCacheLimit } from './constant';
+import { LanguageDatabase, NaslCacheData, NaslCacheUpdateData } from './types';
+
+/** 缓存数据库 */
+const database = isNode
+  ? undefined
+  : import('idb').then((idb) => idb.openDB<LanguageDatabase>(DbName, 1, {
+      upgrade(db) {
+        db.createObjectStore(StoreName.Nasl);
+      },
+      blocked(currentVersion, blockedVersion, event) {
+        // TODO: 超出容量限制
+      },
+    }));
+
+export async function canUseNaslCache(appId: string, globalChangedTime: number) {
+  const data = await getNaslCacheWithoutCheck(appId);
+  const now = Date.now();
+
+  if (!data || data.forceUpdate || ((now - data.createdTime) > NaslCacheLimit)) {
+    return false;
+  }
+
+  // 缓存等于服务端，则表示可以使用缓存
+  return data.updatedTime === globalChangedTime;
+}
+
+/**
+ * 取出缓存
+ *
+ * @description 只是取出缓存，并不校验缓存的有效性
+ */
+export async function getNaslCacheWithoutCheck(appId: string) {
+  if (isNode) {
+    return;
+  }
+
+  const db = await database;
+  const data = await db.get(StoreName.Nasl, appId);
+  return data;
+}
+
+export async function clearCache(appId: string) {
+  if (isNode) {
+    return;
+  }
+
+  const db = await database;
+  await db.delete(StoreName.Nasl, appId);
+}
+
+export async function updateNaslCache(appId: string, data: NaslCacheUpdateData) {
+  if (isNode) {
+    return;
+  }
+
+  const db = await database;
+  const cache = await db.get(StoreName.Nasl, appId);
+
+  // 数据库中数据为新的，不更新缓存
+  if (cache && (data.globalChangedTime <= cache.updatedTime)) {
+    return;
+  }
+
+  const oldGlobalChangedTime = cache?.updatedTime ?? 0;
+  const newData: NaslCacheData = {
+    id: appId,
+    data: data.getData(),
+    updatedTime: data.globalChangedTime,
+    forceUpdate: cache ? data.preGlobalChangedTime !== oldGlobalChangedTime : false,
+    createdTime: cache?.createdTime ?? Date.now(),
+  };
+
+  // await db.delete(StoreName.Nasl, appId);
+  await db.put(StoreName.Nasl, newData, appId);
+}

package/src/utils/language-cache/types.ts

@@ -0,0 +1,44 @@
+import { DBSchema } from 'idb';
+import { StoreName } from './constant';
+
+export type NaslData = object;
+
+export interface NaslCacheData {
+  /** 应用编号 appId */
+  id: string;
+  /** 开始缓存的时间 */
+  createdTime: number;
+  /**
+   * 变更时间
+   *
+   * @description 后端为空时，默认为当前时间
+   */
+  updatedTime: number;
+  /**
+   * 强制弃用缓存标志位
+   *
+   * 在某些特殊情况下，比如 A、B 两个人，A 先改了页面 PageA，然后 B 改了页面 PageB，再然后 A 又修改了页面 PageA。
+   * 此时 A 的电脑上标志位是最新的，所以他刷新页面是会走缓存，而不会走后端。
+   * 此时两个后端的 Nasl 已经不同，但是因为两个人改的是不同的页面，所以继续走缓存也没关系。
+   * 当 A 进入 B 页面的时候，后端会判定产生互锁，让 A 强制刷新页面，此时 A 的标志位是最新的，所以 A 即便刷新页面也会走缓存，
+   * 所以这里就需要另外的标志位来让 A 强制不走缓存。
+   */
+  forceUpdate: boolean;
+  /** 应用 Nasl 数据 */
+  data: NaslData;
+}
+
+export interface NaslCacheUpdateData {
+  preGlobalChangedTime: number;
+  globalChangedTime: number;
+  getData: () => NaslData;
+}
+
+export interface LanguageDatabase extends DBSchema {
+  /** Nasl 缓存数据库 */
+  [StoreName.Nasl]: {
+    /** AppId 为键名 */
+    key: string;
+    value: NaslCacheData;
+  };
+}

package/src/utils/time-slicing/controller.ts

@@ -16,7 +16,6 @@ import {
   NextState,
   TheoreticalLimitCalculationCoefficient as Coefficient,
 } from './constant';
-import { delayInWorker } from '../delay';
 
 /** 时间分片控制器 */
 export class TimeSlicingController {

package/src/utils/types.ts

@@ -15,3 +15,23 @@ export interface FileNode extends BaseNode {
 }
 
 export type EmbeddedTSFileGenerator = Generator<void, EmbeddedTSFileResult, string>;
+
+export interface FullResponse<D> {
+  headers: Record<string, string>;
+  data: {
+    code: number;
+    msg: string;
+    success: boolean;
+    result: D[];
+  };
+}
+
+export interface BreakpointStatus {
+  path: string;
+  breakpointStatus: null | 'ENABLED' | 'DISABLED'
+}
+
+export interface BatchInstructResult {
+  globalChangedTime: number;
+  preGlobalChangedTime: number;
+}