Fix performance issues with components having a lot of classes. Closes …

…#5525
GrapesJS · Dec 10, 2023 · 24f1d6a · 24f1d6a
1 parent ddc3602
commit 24f1d6a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/src/css_composer/index.ts b/src/css_composer/index.ts
@@ -370,7 +370,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * // All rules in the project
    * console.log(css.getRules())
    */
-  getRules(selector: string) {
+  getRules(selector?: string) {
     const rules = this.getAll();
     if (!selector) return [...rules.models];
     const optRuleSel = { sort: true };

diff --git a/src/selector_manager/model/Selectors.ts b/src/selector_manager/model/Selectors.ts
@@ -11,6 +11,11 @@ const combine = (tail: string[], curr: string): string[] => {
   );
 };
 
+export interface FullNameOptions {
+  combination?: boolean;
+  array?: boolean;
+}
+
 export default class Selectors extends Collection<Selector> {
   modelId(attr: any) {
     return `${attr.name}_${attr.type || Selector.TYPE_CLASS}`;
@@ -32,7 +37,7 @@ export default class Selectors extends Collection<Selector> {
     return result.join('').trim();
   }
 
-  getFullName(opts: any = {}) {
+  getFullName<T extends FullNameOptions>(opts: T = {} as T) {
     const { combination, array } = opts;
     let result: string[] = [];
     const sels = this.map(s => s.getFullName(opts)).sort();
@@ -45,7 +50,9 @@ export default class Selectors extends Collection<Selector> {
       result = sels;
     }
 
-    return array ? result : combination ? result.join(',') : result.join('');
+    return (array ? result : combination ? result.join(',') : result.join('')) as T['array'] extends true
+      ? string[]
+      : string;
   }
 }
 

diff --git a/src/style_manager/index.ts b/src/style_manager/index.ts
@@ -594,19 +594,26 @@ export default class StyleManager extends ItemManagerModule<
       const cssGen = em.CodeManager.getGenerator('css');
       // @ts-ignore
       const cmp = target.toHTML ? target : target.getComponent();
-      const optsSel = { combination: true, array: true };
-      let cmpRules = [];
-      let otherRules = [];
-      let rules = [];
+      const optsSel = { array: true } as const;
+      let cmpRules: CssRule[] = [];
+      let otherRules: CssRule[] = [];
+      let rules: CssRule[] = [];
+
+      const rulesBySelectors = (values: string[]) => {
+        return cssC.getRules().filter(rule => {
+          const rSels = rule.getSelectors().map(s => s.getFullName());
+          return rSels.every(rSel => values.indexOf(rSel) >= 0);
+        });
+      };
 
       // Componente related rule
       if (cmp) {
         cmpRules = cssC.getRules(`#${cmp.getId()}`);
-        otherRules = sel ? cssC.getRules(sel.getSelectors().getFullName(optsSel) as string) : [];
+        otherRules = sel ? rulesBySelectors(sel.getSelectors().getFullName(optsSel)) : [];
         rules = otherRules.concat(cmpRules);
       } else {
         cmpRules = sel ? cssC.getRules(`#${sel.getId()}`) : [];
-        otherRules = cssC.getRules(target.getSelectors().getFullName(optsSel) as string);
+        otherRules = rulesBySelectors(target.getSelectors().getFullName(optsSel));
         rules = cmpRules.concat(otherRules);
       }