Problemas de rendimiento al añadir más de 20 clases a un solo componente

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Edge v119.0.2151.72

Enlace de demo reproducible

https://grapesjs.com/demo.html

Describe el bicho

Hola, gracias por crear un proyecto increíble. Me gustaría informar de un problema encontrado durante el uso de GrapesJS.

¿Cómo reproducir el bicho?

1. Seleccionar un componente
2. Añadir clases con nombres arbitrarios hasta que el componente tenga más de 20 clases.
3. Seleccionar otro componente y volver a seleccionar el componente.

¿Cuál es el comportamiento esperado? No debería haber ningún problema de rendimiento.

¿Cuál es el comportamiento actual? El navegador se congela durante un tiempo notable. Cuantas más clases se añadan, más tiempo se congela. Mi navegador se congela durante 10 segundos cuando el componente tiene 23 clases.

Esto es un problema común al trabajar con TailwindCSS, ya que hay muchas clases. Por ejemplo, si copio una plantilla HTML de una biblioteca de TailwindCSS, el navegador puede congelarse cuando lo importe al código personalizado.

Causa Así que investigué y encontré el problema. Aquí está:

! imagen

La función 'combine' genera todas las combinaciones de las clases, lo que da lugar a 2^n combinaciones (n es el número de clases). Así que si hay 20 clases, habría 1048576 combinaciones.

Si lo he entendido bien, genera todas las combinaciones para filtrar las reglas CSS del componente en esta función: https://github.com/GrapesJS/grapesjs/blob/8025b95a645907574389e950f32950190ceb602c/src/css_composer/index.ts#L373

! imagen

Creo que este algoritmo no es óptimo porque recorre todos los selectores y reglas. Una mejor solución es simplemente repasar todas las reglas y, para cada regla, comprobar si los selectores de la regla son un subconjunto de los selectores del componente.

Ejemplo simplificado: Selectores de componentes: '['.a', '.b', '.c', '.d', '.e', '.f']' Seleccionadores de las reglas: '''js [ ['.a', '.b', '.c'], ['.x', '.y', '.z'], ]

Para cada regla, solo necesitas comprobar si '['.a', '.b', '.c']' es un subconjunto de '['.a', '.b', '.c', '..d', '..e', '.f']', sin generar todas las combinaciones de 6 clases.

### Código de conducta

- [X] Acepto seguir el Código de Conducta de este proyecto