Fix unset a dynamic value for a component

packages/core/src/common/index.ts

@@ -2,13 +2,14 @@ import Backbone from 'backbone';
 import { HTMLParserOptions } from '../parser/config/config';
 export { default as $ } from '../utils/cash-dom';
 
-interface NOOP {}
+interface NOOP { }
 
 export const collectionEvents = 'add remove reset change';
 
 export type Debounced = Function & { cancel(): void };
 
 export type SetOptions = Backbone.ModelSetOptions & {
+  unset?: boolean;
   avoidStore?: boolean;
   avoidTransformers?: boolean;
   partial?: boolean;
@@ -61,7 +62,7 @@ export interface Dimensions {
   width: number;
 }
 
-export interface BoxRect extends Coordinates, Dimensions {}
+export interface BoxRect extends Coordinates, Dimensions { }
 
 export type ElementRect = {
   top: number;
@@ -76,13 +77,13 @@ export type CombinedModelConstructorOptions<
 > = Backbone.ModelConstructorOptions<M> & E;
 
 export interface ViewOptions<TModel extends Model | undefined = Model, TElement extends Element = HTMLElement>
-  extends Backbone.ViewOptions<TModel, TElement> {}
+  extends Backbone.ViewOptions<TModel, TElement> { }
 
-export class Model<T extends ObjectHash = any, S = SetOptions, E = any> extends Backbone.Model<T, S, E> {}
+export class Model<T extends ObjectHash = any, S = SetOptions, E = any> extends Backbone.Model<T, S, E> { }
 
-export class Collection<T extends Model = Model> extends Backbone.Collection<T> {}
+export class Collection<T extends Model = Model> extends Backbone.Collection<T> { }
 
-export class View<T extends Model | undefined = Model, E extends Element = HTMLElement> extends Backbone.View<T, E> {}
+export class View<T extends Model | undefined = Model, E extends Element = HTMLElement> extends Backbone.View<T, E> { }
 
 export type PickMatching<T, V> = { [K in keyof T as T[K] extends V ? K : never]: T[K] };
 

packages/core/src/dom_components/model/Component.ts

@@ -56,7 +56,7 @@ import { DynamicValueWatcher } from './DynamicValueWatcher';
 
 export interface IComponent extends ExtractMethods<Component> { }
 export interface DynamicWatchersOptions {
-  updateDynamicWatchers?: boolean;
+  skipWatcherUpdates?: boolean;
 }
 export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions { }
 export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions { }
@@ -347,7 +347,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   set<A extends string>(
     attributeName: Partial<ComponentProperties> | A,
     value?: SetOptions | ComponentProperties[A],
-    options: ComponentSetOptions = { updateDynamicWatchers: true },
+    options: ComponentSetOptions = { skipWatcherUpdates: false },
   ): this {
     const props =
       typeof attributeName === 'object'
@@ -359,7 +359,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const evaluatedProps = areStaticAttributes
       ? props
       : ComponentDynamicValueListener.evaluateComponentDef(props, this.em);
-    if (options.updateDynamicWatchers) {
+    if (!options.skipWatcherUpdates) {
       this.componentDVListener?.watchProps(props);
     }
 
@@ -683,10 +683,9 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @example
    * component.setAttributes({ id: 'test', 'data-key': 'value' });
    */
-  setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { updateDynamicWatchers: true }) {
+  setAttributes(attrs: ObjectAny, opts: SetAttrOptions = { skipWatcherUpdates: false }) {
-    const areStaticAttributes = DynamicValueWatcher.areStaticValues(attrs);
+    const evaluatedAttributes = DynamicValueWatcher.getStaticValues(attrs, this.em);
-    const evaluatedAttributes = areStaticAttributes ? attrs : DynamicValueWatcher.getStaticValues(attrs, this.em);
+    if (!opts.skipWatcherUpdates) {
-    if (opts.updateDynamicWatchers) {
       this.componentDVListener.setAttributes(attrs);
     }
     this.set('attributes', { ...evaluatedAttributes }, opts);
@@ -703,15 +702,10 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * component.addAttributes({ 'data-key': 'value' });
    */
   addAttributes(attrs: ObjectAny, opts: SetAttrOptions = {}) {
-    const areStaticAttributes = DynamicValueWatcher.areStaticValues(attrs);
-    this.componentDVListener.removeAttributes(Object.keys(attrs));
-    const evaluatedAttributes = areStaticAttributes ? attrs : DynamicValueWatcher.getStaticValues(attrs, this.em);
-    this.componentDVListener.watchAttributes(attrs);
-
     return this.setAttributes(
       {
         ...this.getAttributes({ noClass: true }),
-        ...evaluatedAttributes,
+        ...attrs,
       },
       opts,
     );

packages/core/src/dom_components/model/ComponentDynamicValueListener.ts

@@ -13,11 +13,11 @@ export class ComponentDynamicValueListener {
     em: EditorModel,
   ) {
     this.propertyWatchClass = new DynamicValueWatcher((key: string, value: any) => {
-      this.component.set(key, value, { updateDynamicWatchers: false });
+      this.component.set(key, value, { skipWatcherUpdates: false });
     }, em);
 
     this.attributeWatchClass = new DynamicValueWatcher((key: string, value: any) => {
-      this.component.setAttributes({ [key]: value }, { updateDynamicWatchers: false });
+      this.component.setAttributes({ [key]: value }, { skipWatcherUpdates: false });
     }, em);
 
     this.traitsWatchClass = new DynamicValueWatcher((key: string, value: any) => {