Skip to content

Commit

Permalink
Fix dynamic attributes stops watching after a single update
Browse files Browse the repository at this point in the history
  • Loading branch information
mohamedsalem401 committed Dec 20, 2024
1 parent a399bf7 commit 1e4a576
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 11 deletions.
25 changes: 16 additions & 9 deletions packages/core/src/dom_components/model/Component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,11 @@ import { ComponentDynamicValueListener } from './ComponentDynamicValueListener';
import { DynamicValueWatcher } from './DynamicValueWatcher';

export interface IComponent extends ExtractMethods<Component> { }

export interface SetAttrOptions extends SetOptions, UpdateStyleOptions { }
export interface DynamicWatchersOptions {
updateDynamicWatchers?: boolean;
}
export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions { }
export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions { }

const escapeRegExp = (str: string) => {
return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
Expand Down Expand Up @@ -334,17 +337,17 @@ export default class Component extends StyleableModel<ComponentProperties> {
}
}

set<A extends string>(attributeName: A, value?: ComponentProperties[A], options?: SetOptions): this;
set(attributeName: Partial<ComponentProperties>, options?: SetOptions): this;
set<A extends string>(attributeName: A, value?: ComponentProperties[A], options?: ComponentSetOptions): this;
set(attributeName: Partial<ComponentProperties>, options?: ComponentSetOptions): this;
set<A extends string>(
attributeName: Partial<ComponentProperties> | A,
value?: SetOptions | ComponentProperties[A],
options?: SetOptions,
options?: ComponentSetOptions,
): this;
set<A extends string>(
attributeName: Partial<ComponentProperties> | A,
value?: SetOptions | ComponentProperties[A],
options?: SetOptions,
options: ComponentSetOptions = { updateDynamicWatchers: true },
): this {
const props =
typeof attributeName === 'object'
Expand All @@ -356,7 +359,9 @@ export default class Component extends StyleableModel<ComponentProperties> {
const evaluatedProps = areStaticAttributes
? props
: ComponentDynamicValueListener.evaluateComponentDef(props, this.em);
this.componentDVListener?.watchProps(props);
if (options.updateDynamicWatchers) {
this.componentDVListener?.watchProps(props);
}

return super.set(evaluatedProps, options);
}
Expand Down Expand Up @@ -678,10 +683,12 @@ export default class Component extends StyleableModel<ComponentProperties> {
* @example
* component.setAttributes({ id: 'test', 'data-key': 'value' });
*/
setAttributes(attrs: ObjectAny, opts: SetAttrOptions = {}) {
setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { updateDynamicWatchers: true }) {
const areStaticAttributes = DynamicValueWatcher.areStaticValues(attrs);
const evaluatedAttributes = areStaticAttributes ? attrs : DynamicValueWatcher.getStaticValues(attrs, this.em);
this.componentDVListener.setAttributes(attrs);
if (opts.updateDynamicWatchers) {
this.componentDVListener.setAttributes(attrs);
}
this.set('attributes', { ...evaluatedAttributes }, opts);

return this;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@ export class ComponentDynamicValueListener {
em: EditorModel,
) {
this.propertyWatchClass = new DynamicValueWatcher((key: string, value: any) => {
this.component.set(key, value);
this.component.set(key, value, { updateDynamicWatchers: false });
}, em);

this.attributeWatchClass = new DynamicValueWatcher((key: string, value: any) => {
this.component.setAttributes({ [key]: value });
this.component.setAttributes({ [key]: value }, { updateDynamicWatchers: false });
}, em);

this.traitsWatchClass = new DynamicValueWatcher((key: string, value: any) => {
Expand Down

0 comments on commit 1e4a576

Please sign in to comment.