fix(validator): validator can not detect variable from dependencies in expression

packages/editor/__tests__/validator/component.spec.ts

@@ -2,12 +2,13 @@ import {
   ComponentInvalidSchema,
   ComponentPropertyExpressionSchema,
   ComponentWrongPropertyExpressionSchema,
+  UseDependencyInExpressionSchema,
 } from './mock';
 import { SchemaValidator } from '../../src/validator';
 import { registry } from '../services';
 import { AppModel } from '../../src/AppModel/AppModel';
 
-const schemaValidator = new SchemaValidator(registry);
+const schemaValidator = new SchemaValidator(registry, ['foo']);
 
 describe('Validate component', () => {
   describe('validate component properties', () => {
@@ -47,5 +48,11 @@ describe('Validate component', () => {
         `Window object 'Math' does not have property 'random2'.`
       );
     });
+    it('allow using dependency in expression', () => {
+      const result2 = schemaValidator.validate(
+        new AppModel(UseDependencyInExpressionSchema, registry)
+      );
+      expect(result2.length).toBe(0);
+    });
   });
 });

packages/editor/__tests__/validator/mock.ts

@@ -126,6 +126,20 @@ export const ComponentWrongPropertyExpressionSchema: ComponentSchema[] = [
   },
 ];
 
+export const UseDependencyInExpressionSchema: ComponentSchema[] = [
+  {
+    id: 'text1',
+    type: 'core/v1/text',
+    properties: {
+      value: {
+        raw: '{{foo}}',
+        format: 'plain',
+      },
+    },
+    traits: [],
+  },
+];
+
 export const TraitInvalidSchema: ComponentSchema[] = [
   {
     id: 'text1',

packages/editor/src/services/EditorStore.ts

@@ -63,7 +63,8 @@ export class EditorStore {
     private appModelManager: AppModelManager
   ) {
     this.globalDependencies = this.stateManager.dependencies;
-    this.schemaValidator = new SchemaValidator(this.registry);
+    const dependencyNames = Object.keys(this.globalDependencies);
+    this.schemaValidator = new SchemaValidator(this.registry, dependencyNames);
     makeAutoObservable(this, {
       eleMap: false,
       components: observable.shallow,

packages/editor/src/validator/SchemaValidator.ts

@@ -28,7 +28,7 @@ export class SchemaValidator implements ISchemaValidator {
   private ajv!: Ajv;
   private validatorMap!: ValidatorMap;
 
-  constructor(private registry: RegistryInterface) {
+  constructor(private registry: RegistryInterface, private dependencyNames?: string[]) {
     this.initAjv();
     this.addRules(rules);
   }
@@ -63,6 +63,7 @@ export class SchemaValidator implements ISchemaValidator {
       appModel,
       componentIdSpecMap: this.componentIdSpecMap,
       ajv: this.ajv,
+      dependencyNames: this.dependencyNames || [],
     };
     this.allComponentsRules.forEach(rule => {
       const r = rule.validate(baseContext);

packages/editor/src/validator/interfaces.ts

@@ -20,6 +20,7 @@ interface BaseValidateContext {
   registry: RegistryInterface;
   appModel: IAppModel;
   ajv: Ajv;
+  dependencyNames: string[];
   componentIdSpecMap: Record<string, RuntimeComponent<string, string, string, string>>;
 }
 

packages/editor/src/validator/rules/PropertiesRules.ts

@@ -62,6 +62,7 @@ class ExpressionValidatorRule implements PropertiesValidatorRule {
     component,
     trait,
     appModel,
+    dependencyNames,
   }: PropertiesValidateContext): ValidateErrorResult[] {
     const results: ValidateErrorResult[] = [];
 
@@ -100,8 +101,11 @@ class ExpressionValidatorRule implements PropertiesValidatorRule {
         } else if (appModel.moduleIds.includes(id as ModuleId)) {
           // case 3: id is a module
           // TODO: check module stateMap
+        } else if (dependencyNames.includes(id)) {
+          // case 4: id is from dependency
+          // do nothing
         } else {
-          // case 4: id doesn't exist
+          // case 5: id doesn't exist
           results.push({
             message: `Cannot find '${id}' in store or window.`,
             componentId: component.id,