GrapesJS · mohamedsalem401 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025
diff --git a/packages/core/src/css_composer/model/CssRule.ts b/packages/core/src/css_composer/model/CssRule.ts
@@ -1,4 +1,4 @@
-import { isEmpty, forEach, isString, isArray } from 'underscore';
+import { isEmpty, forEach, isString, isArray, isObject } from 'underscore';
 import { Model, ObjectAny } from '../../common';
 import StyleableModel, { StyleProps } from '../../domain_abstract/model/StyleableModel';
 import Selectors from '../../selector_manager/model/Selectors';
@@ -139,6 +139,8 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
     const opts = { ...this.opt };
     const attr = { ...this.attributes };
     attr.selectors = this.get('selectors')!.map((s) => s.clone() as Selector);
+    if (isObject(attr.style)) attr.style = this.dataResolverWatchers.getStylesDefsOrValues(attr.style);
+
     // @ts-ignore
     return new this.constructor(attr, opts);
   }
@@ -307,9 +309,9 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
     return result;
   }
 
-  toJSON(...args: any) {
-    const obj = Model.prototype.toJSON.apply(this, args);
-
+  toJSON(opts?: ObjectAny) {
+    const obj = super.toJSON(opts);
+    if (isObject(obj.style)) obj.style = this.dataResolverWatchers.getStylesDefsOrValues(obj.style);
     if (this.em?.getConfig().avoidDefaults) {
       const defaults = this.defaults();
 
@@ -326,7 +328,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
       if (isEmpty(obj.style)) delete obj.style;
     }
 
-    return { ...obj, style: this.dataResolverWatchers.getStylesDefsOrValues(obj.style) };
+    return obj;
   }
 
   /**

diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts
@@ -301,8 +301,7 @@ export default class ComponentDataCollection extends Component {
   }
 
   onCollectionsStateMapUpdate(collectionsStateMap: DataCollectionStateMap) {
-    this.collectionsStateMap = collectionsStateMap;
-    this.dataResolverWatchers.onCollectionsStateMapUpdate();
+    super.onCollectionsStateMapUpdate(collectionsStateMap);
 
     const items = this.getDataSourceItems();
     const { startIndex } = this.resolveCollectionConfig(items);

diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts
@@ -12,7 +12,11 @@ import {
   keys,
 } from 'underscore';
 import { shallowDiff, capitalize, isEmptyObj, isObject, toLowerCase } from '../../utils/mixins';
-import StyleableModel, { StyleProps, UpdateStyleOptions } from '../../domain_abstract/model/StyleableModel';
+import StyleableModel, {
+  GetStyleOpts,
+  StyleProps,
+  UpdateStyleOptions,
+} from '../../domain_abstract/model/StyleableModel';
 import { Model, ModelDestroyOptions } from 'backbone';
 import Components from './Components';
 import Selector from '../../selector_manager/model/Selector';
@@ -52,14 +56,13 @@ import {
   updateSymbolProps,
   getSymbolsToUpdate,
 } from './SymbolUtils';
-import { ModelDataResolverWatchers } from './ModelDataResolverWatchers';
-import { DynamicWatchersOptions } from './ModelResolverWatcher';
+import { DataWatchersOptions } from './ModelResolverWatcher';
 import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types';
 import { checkAndGetSyncableCollectionItemId } from '../../data_sources/utils';
 
 export interface IComponent extends ExtractMethods<Component> {}
-export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DynamicWatchersOptions {}
-export interface ComponentSetOptions extends SetOptions, DynamicWatchersOptions {}
+export interface SetAttrOptions extends SetOptions, UpdateStyleOptions, DataWatchersOptions {}
+export interface ComponentSetOptions extends SetOptions, DataWatchersOptions {}
 
 const escapeRegExp = (str: string) => {
   return str.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
@@ -74,6 +77,10 @@ export const keySymbolOvrd = '__symbol_ovrd';
 export const keyUpdate = ComponentsEvents.update;
 export const keyUpdateInside = ComponentsEvents.updateInside;
 
+type GetComponentStyleOpts = GetStyleOpts & {
+  inline?: boolean;
+};
+
 /**
  * The Component object represents a single node of our template structure, so when you update its properties the changes are
  * immediately reflected on the canvas and in the code to export (indeed, when you ask to export the code we just go through all
@@ -343,34 +350,9 @@ export default class Component extends StyleableModel<ComponentProperties> {
     }
   }
 
-  set<A extends string>(
-    keyOrAttributes: A | Partial<ComponentProperties>,
-    valueOrOptions?: ComponentProperties[A] | ComponentSetOptions,
-    optionsOrUndefined?: ComponentSetOptions,
-  ): this {
-    let attributes: Partial<ComponentProperties>;
-    let options: ComponentSetOptions & {
-      dataResolverWatchers?: ModelDataResolverWatchers;
-    } = { skipWatcherUpdates: false, fromDataSource: false };
-    if (typeof keyOrAttributes === 'object') {
-      attributes = keyOrAttributes;
-      options = valueOrOptions || (options as ComponentSetOptions);
-    } else if (typeof keyOrAttributes === 'string') {
-      attributes = { [keyOrAttributes as string]: valueOrOptions };
-      options = optionsOrUndefined || options;
-    } else {
-      attributes = {};
-      options = optionsOrUndefined || options;
-    }
-
-    this.dataResolverWatchers = this.dataResolverWatchers || options.dataResolverWatchers;
-    const evaluatedProps = this.dataResolverWatchers.addProps(attributes, options);
-    return super.set(evaluatedProps, options);
-  }
-
   onCollectionsStateMapUpdate(collectionsStateMap: DataCollectionStateMap) {
-    this.collectionsStateMap = collectionsStateMap;
-    this.dataResolverWatchers.onCollectionsStateMapUpdate();
+    super.onCollectionsStateMapUpdate(collectionsStateMap);
+    this._getStyleRule()?.onCollectionsStateMapUpdate(collectionsStateMap);
 
     const cmps = this.components();
     cmps.forEach((cmp) => cmp.onCollectionsStateMapUpdate(collectionsStateMap));
@@ -572,7 +554,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * @example
    * component.setSymbolOverride(['children', 'classes']);
    */
-  setSymbolOverride(value: boolean | string | string[], options: DynamicWatchersOptions = {}) {
+  setSymbolOverride(value: boolean | string | string[], options: DataWatchersOptions = {}) {
     this.set(
       {
         [keySymbolOvrd]: (isString(value) ? [value] : value) ?? 0,
@@ -795,7 +777,6 @@ export default class Component extends StyleableModel<ComponentProperties> {
    */
   removeAttributes(attrs: string | string[] = [], opts: SetOptions = {}) {
     const attrArr = Array.isArray(attrs) ? attrs : [attrs];
-    this.dataResolverWatchers.removeAttributes(attrArr);
 
     const compAttr = this.getAttributes();
     attrArr.map((i) => delete compAttr[i]);
@@ -806,29 +787,34 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * Get the style of the component
    * @return {Object}
    */
-  getStyle(options: any = {}, optsAdd: any = {}) {
+  getStyle(opts?: GetComponentStyleOpts): StyleProps;
+  getStyle(prop: '' | undefined, opts?: GetComponentStyleOpts): StyleProps;
+  getStyle(
+    prop?: keyof StyleProps | '' | ObjectAny,
+    opts?: GetComponentStyleOpts,
+  ): StyleProps | StyleProps[keyof StyleProps] | undefined {
     const { em } = this;
-    const isOptionsString = isString(options);
-    const prop = isOptionsString ? options : '';
-    const opts = isOptionsString || options === '' ? optsAdd : options;
-    const skipResolve = !!opts?.skipResolve;
+    const isPropString = isString(prop);
+    const resolvedProp = isPropString ? prop : '';
+    const resolvedOpts = isPropString ? opts : prop;
+    const skipResolve = !!resolvedOpts?.skipResolve;
 
-    if (avoidInline(em) && !opts.inline) {
+    if (avoidInline(em) && !resolvedOpts?.inline) {
       const state = em.get('state');
       const cc = em.Css;
-      const rule = cc.getIdRule(this.getId(), { state, ...opts });
+      const rule = cc.getIdRule(this.getId(), { state, ...resolvedOpts });
       this.rule = rule;
 
       if (rule) {
-        return rule.getStyle(prop, { skipResolve });
+        return rule.getStyle(resolvedProp, { skipResolve });
       }
 
       // Return empty style if no rule have been found. We cannot return inline style with the next return
       // because else on load inline style is set a #id or .class style
       return {};
     }
 
-    return super.getStyle.call(this, prop, { skipResolve });
+    return super.getStyle.call(this, resolvedProp, { skipResolve });
   }
 
   /**
@@ -1397,9 +1383,8 @@ export default class Component extends StyleableModel<ComponentProperties> {
     const opts = { ...this.opt };
     const id = this.getId();
     const cssc = em?.Css;
-    attr.attributes = {
-      ...(attr.attributes ? this.dataResolverWatchers.getAttributesDefsOrValues(attr.attributes) : undefined),
-    };
+    if (!!attr.attributes) attr.attributes = this.dataResolverWatchers.getAttributesDefsOrValues(attr.attributes);
+    if (isObject(attr.style)) attr.style = this.dataResolverWatchers.getStylesDefsOrValues(attr.style);
     // @ts-ignore
     attr.components = [];
     // @ts-ignore