perf(validator): inject appModel in to validator to improve performance

packages/editor/src/init.tsx

@@ -82,7 +82,13 @@ export function initSunmaoUIEditor(props: SunmaoUIEditorProps = {}) {
     appStorage.app.spec.components
   );
   const widgetManager = new WidgetManager();
-  const editorStore = new EditorStore(eventBus, registry, stateManager, appStorage);
+  const editorStore = new EditorStore(
+    eventBus,
+    registry,
+    stateManager,
+    appStorage,
+    appModelManager
+  );
   editorStore.eleMap = ui.eleMap;
 
   const services = {

packages/editor/src/services/EditorStore.ts

@@ -4,7 +4,7 @@ import { RegistryInterface, StateManagerInterface } from '@sunmao-ui/runtime';
 
 import { EventBusType } from './eventBus';
 import { AppStorage } from './AppStorage';
-import { SchemaValidator } from '../validator';
+import { SchemaValidator, ValidateErrorResult } from '../validator';
 import {
   DataSourceType,
   DATASOURCE_NAME_MAP,
@@ -16,6 +16,7 @@ import { ExplorerMenuTabs, ToolMenuTabs } from '../constants/enum';
 import { CORE_VERSION, CoreComponentName } from '@sunmao-ui/shared';
 import { isEqual } from 'lodash';
 import { resolveApplicationComponents } from '../utils/resolveApplicationComponents';
+import { AppModelManager } from '../operations/AppModelManager';
 
 type EditingTarget = {
   kind: 'app' | 'module';
@@ -34,6 +35,7 @@ export class EditorStore {
   _dragOverComponentId = '';
   explorerMenuTab = ExplorerMenuTabs.UI_TREE;
   toolMenuTab = ToolMenuTabs.INSERT;
+  validateResult: ValidateErrorResult[] = [];
   // current editor editing target(app or module)
   currentEditingTarget: EditingTarget = {
     kind: 'app',
@@ -57,7 +59,8 @@ export class EditorStore {
     private eventBus: EventBusType,
     private registry: RegistryInterface,
     private stateManager: StateManagerInterface,
-    public appStorage: AppStorage
+    public appStorage: AppStorage,
+    private appModelManager: AppModelManager
   ) {
     this.globalDependencies = this.stateManager.dependencies;
     this.schemaValidator = new SchemaValidator(this.registry);
@@ -110,6 +113,15 @@ export class EditorStore {
       }
     );
 
+    reaction(
+      () => this.components,
+      () => {
+        this.setValidateResult(
+          this.schemaValidator.validate(this.components, this.appModelManager.appModel)
+        );
+      }
+    );
+
     this.updateCurrentEditingTarget('app', this.app.version, this.app.metadata.name);
   }
 
@@ -143,10 +155,6 @@ export class EditorStore {
     return this._dragOverComponentId;
   }
 
-  get validateResult() {
-    return this.schemaValidator.validate(this.components);
-  }
-
   get isSaved() {
     // return this.currentComponentsVersion === this.lastSavedComponentsVersion;
     return true;
@@ -271,6 +279,10 @@ export class EditorStore {
     this.activeDataSourceId = dataSourceId;
   };
 
+  setValidateResult = (validateResult: ValidateErrorResult[]) => {
+    this.validateResult = validateResult;
+  };
+
   createDataSource = (
     type: DataSourceType,
     defaultProperties: Record<string, any> = {}

packages/editor/src/validator/SchemaValidator.ts

@@ -52,8 +52,8 @@ export class SchemaValidator implements ISchemaValidator {
     });
   }
 
-  validate(components: ComponentSchema[]) {
-    const appModel = new AppModel(components, this.registry);
+  validate(components: ComponentSchema[], appModel: AppModel) {
+    console.time('validate sync');
     this.genComponentIdSpecMap(components);
     this.result = [];
     const baseContext = {
@@ -118,6 +118,7 @@ export class SchemaValidator implements ISchemaValidator {
         });
       });
     });
+    console.timeEnd('validate sync');
     return this.result;
   }
 

packages/editor/src/validator/interfaces.ts

@@ -1,7 +1,13 @@
 import { ComponentSchema, RuntimeComponent } from '@sunmao-ui/core';
 import { RegistryInterface } from '@sunmao-ui/runtime';
 import Ajv, { ValidateFunction } from 'ajv';
-import { IAppModel, IComponentModel, IFieldModel, ITraitModel } from '../AppModel/IAppModel';
+import { AppModel } from '../AppModel/AppModel';
+import {
+  IAppModel,
+  IComponentModel,
+  IFieldModel,
+  ITraitModel,
+} from '../AppModel/IAppModel';
 
 export interface ValidatorMap {
   components: Record<string, ValidateFunction>;
@@ -14,10 +20,7 @@ interface BaseValidateContext {
   registry: RegistryInterface;
   appModel: IAppModel;
   ajv: Ajv;
-  componentIdSpecMap: Record<
-    string,
-    RuntimeComponent<string, string, string, string>
-  >;
+  componentIdSpecMap: Record<string, RuntimeComponent<string, string, string, string>>;
 }
 
 export interface ComponentValidateContext extends BaseValidateContext {
@@ -74,7 +77,7 @@ export type ValidatorRule =
 
 export interface ISchemaValidator {
   addRules: (rule: ValidatorRule[]) => void;
-  validate: (components: ComponentSchema[]) => ValidateErrorResult[];
+  validate: (components: ComponentSchema[], appModel: AppModel) => ValidateErrorResult[];
   fix?: () => void;
 }