From 721f7b02c554f4db2d6df5c3df9d63e5653ad8b5 Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Fri, 3 Jan 2025 11:12:59 +0200 Subject: [PATCH] Refactor dynamic component watcher --- .../src/dom_components/model/Component.ts | 28 ++++++------- .../model/ComponentDynamicValueWatcher.ts | 32 ++++++++++----- .../model/DynamicValueWatcher.ts | 39 ++++++++----------- 3 files changed, 51 insertions(+), 48 deletions(-) diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index a5825dea1..151f9326e 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -274,16 +274,16 @@ export default class Component extends StyleableModel { [keyCollectionsStateMap]: props[keyCollectionsStateMap], })); } + const componentDVListener = new ComponentDynamicValueWatcher(undefined, { + em: opt.em, + collectionsStateMap: props[keyCollectionsStateMap], + }); super(props, { ...opt, // @ts-ignore - [keyCollectionsStateMap]: props[keyCollectionsStateMap], - }); - this.componentDVListener = new ComponentDynamicValueWatcher(this, { - em: opt.em, - collectionsStateMap: props[keyCollectionsStateMap], + componentDVListener, }); - this.componentDVListener.addProps(props); + this.componentDVListener = componentDVListener; bindAll(this, '__upSymbProps', '__upSymbCls', '__upSymbComps'); const em = opt.em; @@ -372,14 +372,12 @@ export default class Component extends StyleableModel { } // @ts-ignore - const em = this.em || options.em; - // @ts-ignore - const collectionsStateMap = this.get(keyCollectionsStateMap) || options[keyCollectionsStateMap]; - const evaluatedAttributes = DynamicValueWatcher.getStaticValues(attributes, { em, collectionsStateMap }); + const componentDVListener = this.componentDVListener || options.componentDVListener; + const evaluatedAttributes = componentDVListener.getStaticValues(attributes); const shouldSkipWatcherUpdates = options.skipWatcherUpdates || options.fromDataSource; if (!shouldSkipWatcherUpdates) { - this.componentDVListener?.addProps(attributes); + componentDVListener?.addProps(attributes); } return super.set(evaluatedAttributes, options); @@ -704,13 +702,11 @@ export default class Component extends StyleableModel { */ setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { skipWatcherUpdates: false, fromDataSource: false }) { // @ts-ignore - const em = this.em || opts.em; - // @ts-ignore - const collectionsStateMap = this.get(keyCollectionsStateMap) || opts[keyCollectionsStateMap]; - const evaluatedAttributes = DynamicValueWatcher.getStaticValues(attrs, { em, collectionsStateMap }); + const componentDVListener = this.componentDVListener || opts.componentDVListener; + const evaluatedAttributes = componentDVListener.getStaticValues(attrs); const shouldSkipWatcherUpdates = opts.skipWatcherUpdates || opts.fromDataSource; if (!shouldSkipWatcherUpdates) { - this.componentDVListener.setAttributes(attrs); + componentDVListener.setAttributes(attrs); } this.set('attributes', { ...evaluatedAttributes }, opts); diff --git a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts index c49cc51cd..98ecf1938 100644 --- a/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts +++ b/packages/core/src/dom_components/model/ComponentDynamicValueWatcher.ts @@ -9,28 +9,42 @@ export class ComponentDynamicValueWatcher { private attributeWatcher: DynamicValueWatcher; constructor( - private component: Component, - options: { + component: Component | undefined, + private options: { em: EditorModel; collectionsStateMap: CollectionsStateMap; }, ) { - this.propertyWatcher = new DynamicValueWatcher(this.createPropertyUpdater(), options); - this.attributeWatcher = new DynamicValueWatcher(this.createAttributeUpdater(), options); + this.propertyWatcher = new DynamicValueWatcher(component, this.createPropertyUpdater(), options); + this.attributeWatcher = new DynamicValueWatcher(component, this.createAttributeUpdater(), options); } - private createPropertyUpdater() { - return (key: string, value: any) => { - this.component.set(key, value, { fromDataSource: true, avoidStore: true }); + return (component: Component | undefined, key: string, value: any) => { + if (!component) return; + component.set(key, value, { fromDataSource: true, avoidStore: true }); }; } private createAttributeUpdater() { - return (key: string, value: any) => { - this.component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true }); + return (component: Component | undefined, key: string, value: any) => { + if (!component) return; + component.addAttributes({ [key]: value }, { fromDataSource: true, avoidStore: true }); }; } + bindComponent(component: Component) { + this.propertyWatcher.bindComponent(component); + this.attributeWatcher.bindComponent(component); + } + + getStaticValues(values: ObjectAny | undefined): ObjectAny { + return this.attributeWatcher.getStaticValues(values); + } + + areStaticValues(values: ObjectAny | undefined) { + return this.attributeWatcher.areStaticValues(values); + } + addProps(props: ObjectAny) { this.propertyWatcher.addDynamicValues(props); } diff --git a/packages/core/src/dom_components/model/DynamicValueWatcher.ts b/packages/core/src/dom_components/model/DynamicValueWatcher.ts index 8a3df8a78..67189227d 100644 --- a/packages/core/src/dom_components/model/DynamicValueWatcher.ts +++ b/packages/core/src/dom_components/model/DynamicValueWatcher.ts @@ -4,29 +4,20 @@ import DynamicVariableListenerManager from '../../data_sources/model/DataVariabl import { evaluateDynamicValueDefinition, isDynamicValueDefinition } from '../../data_sources/model/utils'; import { DynamicValue } from '../../data_sources/types'; import EditorModel from '../../editor/model/Editor'; +import Component from './Component'; export class DynamicValueWatcher { private dynamicVariableListeners: { [key: string]: DynamicVariableListenerManager } = {}; - private em: EditorModel; - private collectionsStateMap: CollectionsStateMap | undefined; constructor( - private updateFn: (key: string, value: any) => void, - options: { + private component: Component | undefined, + private updateFn: (component: Component | undefined, key: string, value: any) => void, + private options: { em: EditorModel; collectionsStateMap?: CollectionsStateMap; }, - ) { - this.em = options.em; - this.collectionsStateMap = options.collectionsStateMap; - } + ) {} - static getStaticValues( - values: ObjectAny | undefined, - options: { - em: EditorModel; - collectionsStateMap?: CollectionsStateMap; - }, - ): ObjectAny { + getStaticValues(values: ObjectAny | undefined): ObjectAny { if (!values) return {}; const evaluatedValues: ObjectAny = { ...values }; const propsKeys = Object.keys(values); @@ -35,26 +26,31 @@ export class DynamicValueWatcher { const valueDefinition = values[key]; if (!isDynamicValueDefinition(valueDefinition)) continue; - const { value } = evaluateDynamicValueDefinition(valueDefinition, options); + const { value } = evaluateDynamicValueDefinition(valueDefinition, this.options); evaluatedValues[key] = value; } return evaluatedValues; } - static areStaticValues(values: ObjectAny | undefined) { + areStaticValues(values: ObjectAny | undefined) { if (!values) return true; return Object.keys(values).every((key) => { return !isDynamicValueDefinition(values[key]); }); } + bindComponent(component: Component) { + this.component = component; + } + setDynamicValues(values: ObjectAny | undefined) { this.removeListeners(); return this.addDynamicValues(values); } addDynamicValues(values: ObjectAny | undefined) { + const em = this.options.em; if (!values) return {}; this.removeListeners(Object.keys(values)); const dynamicProps = this.getDynamicValues(values); @@ -62,10 +58,10 @@ export class DynamicValueWatcher { for (let index = 0; index < propsKeys.length; index++) { const key = propsKeys[index]; this.dynamicVariableListeners[key] = new DynamicVariableListenerManager({ - em: this.em, + em: em, dataVariable: dynamicProps[key], updateValueFromDataVariable: (value: any) => { - this.updateFn.bind(this)(key, value); + this.updateFn.bind(this)(this.component, key, value); }, }); } @@ -83,10 +79,7 @@ export class DynamicValueWatcher { if (!isDynamicValueDefinition(values[key])) { continue; } - const { variable } = evaluateDynamicValueDefinition(values[key], { - em: this.em, - collectionsStateMap: this.collectionsStateMap, - }); + const { variable } = evaluateDynamicValueDefinition(values[key], this.options); dynamicValues[key] = variable; }