@elementor/editor-styles-repository 0.2.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.2.0 build
+> @elementor/editor-styles-repository@0.3.0 build
 > tsup --config=../../tsup.build.ts
 
 CLI Building entry: src/index.ts
@@ -10,13 +10,13 @@
 CLI Cleaning output folder
 ESM Build start
 CJS Build start
-ESM dist/index.mjs     2.27 KB
-ESM dist/index.mjs.map 5.11 KB
-ESM ⚡️ Build success in 44ms
-CJS dist/index.js     3.55 KB
-CJS dist/index.js.map 5.15 KB
-CJS ⚡️ Build success in 44ms
+ESM dist/index.mjs     2.22 KB
+ESM dist/index.mjs.map 5.02 KB
+ESM ⚡️ Build success in 55ms
+CJS dist/index.js     3.50 KB
+CJS dist/index.js.map 5.07 KB
+CJS ⚡️ Build success in 56ms
 DTS Build start
-DTS ⚡️ Build success in 4285ms
-DTS dist/index.d.mts 970.00 B
-DTS dist/index.d.ts  970.00 B
+DTS ⚡️ Build success in 4336ms
+DTS dist/index.d.mts 990.00 B
+DTS dist/index.d.ts  990.00 B

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @elementor/editor-styles-repository
 
+## 0.3.0
+
+### Minor Changes
+
+- ed4260a: Introduce global classes styles provider and store
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,16 +1,18 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinitionsMap } from '@elementor/editor-styles';
+import { StyleDefinition } from '@elementor/editor-styles';
 
 type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: (meta?: StyleProviderMeta) => StyleDefinitionsMap;
+    key: string;
+    priority: number;
+    get: (meta?: StyleProviderMeta) => StyleDefinition[];
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
     all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
     allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
-    register: (key: string, provider: StylesProvider) => void;
+    register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 

package/dist/index.d.ts

@@ -1,16 +1,18 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinitionsMap } from '@elementor/editor-styles';
+import { StyleDefinition } from '@elementor/editor-styles';
 
 type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: (meta?: StyleProviderMeta) => StyleDefinitionsMap;
+    key: string;
+    priority: number;
+    get: (meta?: StyleProviderMeta) => StyleDefinition[];
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
     all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
     allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
-    register: (key: string, provider: StylesProvider) => void;
+    register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 

package/dist/index.js

@@ -28,20 +28,21 @@ module.exports = __toCommonJS(index_exports);
 
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
-  const providers = /* @__PURE__ */ new Map();
-  const register = (key, provider) => {
-    providers.set(key, provider);
+  const providers = [];
+  const getProvidersByPriority = () => {
+    return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
+  };
+  const register = (provider) => {
+    providers.push(provider);
   };
   const allByProvider = (meta = {}) => {
-    return Array.from(providers.entries()).map(
-      ([key, provider]) => [key, Object.values(provider.get(meta))]
-    );
+    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
   };
   const all = (meta = {}) => {
-    return Array.from(providers.values()).flatMap((provider) => Object.values(provider.get(meta)));
+    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
   };
   const subscribe = (cb) => {
-    const unsubscribes = Array.from(providers.values()).map((provider) => {
+    const unsubscribes = providers.map((provider) => {
       return provider.subscribe(cb);
     });
     return () => {
@@ -72,16 +73,14 @@ var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
+  key: ELEMENTS_STYLES_PROVIDER_KEY,
+  priority: 50,
   get: (meta = {}) => {
     let elements = (0, import_editor_elements.getElements)();
     if ("elementId" in meta && meta.elementId) {
       elements = elements.filter((element) => element.id === meta.elementId);
     }
-    const entries = elements.flatMap((element) => {
-      const styles = element.model.get("styles");
-      return styles ? Object.entries(styles) : [];
-    });
-    return Object.fromEntries(entries);
+    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return (0, import_editor_v1_adapters.__privateListenTo)(
@@ -96,7 +95,7 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.register("elements", elementsStylesProvider);
+  stylesRepository.register(elementsStylesProvider);
 }
 
 // src/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst register = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn Array.from( providers.entries() ).map(\n\t\t\t( [ key, provider ] ) => [ key, Object.values( provider.get( meta ) ) ] as const\n\t\t);\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn Array.from( providers.values() ).flatMap( ( provider ) => Object.values( provider.get( meta ) ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( 'elements', elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,WAAW,CAAE,KAAa,aAA8B;AAC7D,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,MAAM,KAAM,UAAU,QAAQ,CAAE,EAAE;AAAA,MACxC,CAAE,CAAE,KAAK,QAAS,MAAO,CAAE,KAAK,OAAO,OAAQ,SAAS,IAAK,IAAK,CAAE,CAAE;AAAA,IACvE;AAAA,EACD;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,QAAS,CAAE,aAAc,OAAO,OAAQ,SAAS,IAAK,IAAK,CAAE,CAAE;AAAA,EACxG;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACxCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,eAAW,oCAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;AC7BO,SAAS,OAAO;AACtB,mBAAiB,SAAU,YAAY,sBAAuB;AAC/D;;;ALIA,KAAK;","names":["listenTo"]}
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,WAAO,UAAU,MAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAS,EAAE,WAAW,EAAE,WAAW,KAAK,CAAI;AAAA,EACpF;AAEA,QAAM,WAAW,CAAE,aAA8B;AAChD,cAAU,KAAM,QAAS;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,UAAU,IAAK,CAAE,aAAc;AACnD,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,mBAAsC;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,QAAI,yBAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,8BAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,eAAW,oCAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,eAAO,0BAAAA;AAAA,MACN;AAAA,YACC,2CAAiB,iCAAkC;AAAA,YACnD,2CAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ALIA,KAAK;","names":["listenTo"]}

package/dist/index.mjs

@@ -1,19 +1,20 @@
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
-  const providers = /* @__PURE__ */ new Map();
-  const register = (key, provider) => {
-    providers.set(key, provider);
+  const providers = [];
+  const getProvidersByPriority = () => {
+    return providers.slice(0).sort((a, b) => a.priority > b.priority ? -1 : 1);
+  };
+  const register = (provider) => {
+    providers.push(provider);
   };
   const allByProvider = (meta = {}) => {
-    return Array.from(providers.entries()).map(
-      ([key, provider]) => [key, Object.values(provider.get(meta))]
-    );
+    return getProvidersByPriority().map((provider) => [provider.key, provider.get(meta)]);
   };
   const all = (meta = {}) => {
-    return Array.from(providers.values()).flatMap((provider) => Object.values(provider.get(meta)));
+    return getProvidersByPriority().flatMap((provider) => provider.get(meta));
   };
   const subscribe = (cb) => {
-    const unsubscribes = Array.from(providers.values()).map((provider) => {
+    const unsubscribes = providers.map((provider) => {
       return provider.subscribe(cb);
     });
     return () => {
@@ -44,16 +45,14 @@ import { getElements } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
+  key: ELEMENTS_STYLES_PROVIDER_KEY,
+  priority: 50,
   get: (meta = {}) => {
     let elements = getElements();
     if ("elementId" in meta && meta.elementId) {
       elements = elements.filter((element) => element.id === meta.elementId);
     }
-    const entries = elements.flatMap((element) => {
-      const styles = element.model.get("styles");
-      return styles ? Object.entries(styles) : [];
-    });
-    return Object.fromEntries(entries);
+    return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
   },
   subscribe: (cb) => {
     return listenTo(
@@ -68,7 +67,7 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.register("elements", elementsStylesProvider);
+  stylesRepository.register(elementsStylesProvider);
 }
 
 // src/index.ts

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst register = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn Array.from( providers.entries() ).map(\n\t\t\t( [ key, provider ] ) => [ key, Object.values( provider.get( meta ) ) ] as const\n\t\t);\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn Array.from( providers.values() ).flatMap( ( provider ) => Object.values( provider.get( meta ) ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = Array.from( providers.values() ).map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\tconst entries = elements.flatMap( ( element ) => {\n\t\t\tconst styles = element.model.get( 'styles' );\n\n\t\t\treturn styles ? Object.entries( styles ) : [];\n\t\t} );\n\n\t\treturn Object.fromEntries( entries );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( 'elements', elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AASO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,WAAW,CAAE,KAAa,aAA8B;AAC7D,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,MAAM,KAAM,UAAU,QAAQ,CAAE,EAAE;AAAA,MACxC,CAAE,CAAE,KAAK,QAAS,MAAO,CAAE,KAAK,OAAO,OAAQ,SAAS,IAAK,IAAK,CAAE,CAAE;AAAA,IACvE;AAAA,EACD;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,QAAS,CAAE,aAAc,OAAO,OAAQ,SAAS,IAAK,IAAK,CAAE,CAAE;AAAA,EACxG;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,IAAK,CAAE,aAAc;AAC1E,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;ACxCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,IAAI,WAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,YAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,WAAW,YAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,UAAM,UAAU,SAAS,QAAS,CAAE,YAAa;AAChD,YAAM,SAAS,QAAQ,MAAM,IAAK,QAAS;AAE3C,aAAO,SAAS,OAAO,QAAS,MAAO,IAAI,CAAC;AAAA,IAC7C,CAAE;AAEF,WAAO,OAAO,YAAa,OAAQ;AAAA,EACpC;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;AC7BO,SAAS,OAAO;AACtB,mBAAiB,SAAU,YAAY,sBAAuB;AAC/D;;;ACIA,KAAK;","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-all-styles-by-provider.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type StyleProviderMeta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tget: ( meta?: StyleProviderMeta ) => StyleDefinition[];\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProvidersByPriority = () => {\n\t\treturn providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );\n\t};\n\n\tconst register = ( provider: StylesProvider ) => {\n\t\tproviders.push( provider );\n\t};\n\n\tconst allByProvider = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: StyleProviderMeta = {} ) => {\n\t\treturn getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );\n\t};\n\n\tconst subscribe = ( cb: () => void ) => {\n\t\tconst unsubscribes = providers.map( ( provider ) => {\n\t\t\treturn provider.subscribe( cb );\n\t\t} );\n\n\t\treturn () => {\n\t\t\tunsubscribes.forEach( ( unsubscribe ) => unsubscribe() );\n\t\t};\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\n","import { useEffect, useReducer } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StyleProviderMeta } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tget: ( meta = {} ) => {\n\t\tlet elements = getElements();\n\n\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t}\n\n\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[\n\t\t\t\tcommandEndEvent( 'editor/documents/attach-preview' ),\n\t\t\t\tcommandEndEvent( 'document/atomic-widgets/styles' ),\n\t\t\t],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAWO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAA8B,CAAC;AAErC,QAAM,yBAAyB,MAAM;AACpC,WAAO,UAAU,MAAO,CAAE,EAAE,KAAM,CAAE,GAAG,MAAS,EAAE,WAAW,EAAE,WAAW,KAAK,CAAI;AAAA,EACpF;AAEA,QAAM,WAAW,CAAE,aAA8B;AAChD,cAAU,KAAM,QAAS;AAAA,EAC1B;AAEA,QAAM,gBAAgB,CAAE,OAA0B,CAAC,MAAO;AACzD,WAAO,uBAAuB,EAAE,IAAK,CAAE,aAAc,CAAE,SAAS,KAAK,SAAS,IAAK,IAAK,CAAE,CAAW;AAAA,EACtG;AAEA,QAAM,MAAM,CAAE,OAA0B,CAAC,MAAO;AAC/C,WAAO,uBAAuB,EAAE,QAAS,CAAE,aAAc,SAAS,IAAK,IAAK,CAAE;AAAA,EAC/E;AAEA,QAAM,YAAY,CAAE,OAAoB;AACvC,UAAM,eAAe,UAAU,IAAK,CAAE,aAAc;AACnD,aAAO,SAAS,UAAW,EAAG;AAAA,IAC/B,CAAE;AAEF,WAAO,MAAM;AACZ,mBAAa,QAAS,CAAE,gBAAiB,YAAY,CAAE;AAAA,IACxD;AAAA,EACD;AAEA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;;;AC5CO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,WAAW,kBAAkB;AAK/B,SAAS,uBAAwB,OAA0B,CAAC,GAAI;AACtE,QAAM,CAAE,EAAE,QAAS,IAAI,WAAY,CAAE,SAAU,CAAE,MAAM,KAAM;AAE7D,YAAW,MAAM,iBAAiB,UAAW,QAAS,GAAG,CAAC,CAAE;AAE5D,SAAO,iBAAiB,cAAe,IAAK;AAC7C;;;ACXA,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,+BAA+B;AAErC,IAAM,yBAAyC;AAAA,EACrD,KAAK;AAAA,EACL,UAAU;AAAA,EACV,KAAK,CAAE,OAAO,CAAC,MAAO;AACrB,QAAI,WAAW,YAAY;AAE3B,QAAK,eAAe,QAAQ,KAAK,WAAY;AAC5C,iBAAW,SAAS,OAAQ,CAAE,YAAa,QAAQ,OAAO,KAAK,SAAU;AAAA,IAC1E;AAEA,WAAO,SAAS,QAAS,CAAE,YAAa,OAAO,OAAQ,QAAQ,MAAM,IAAK,QAAS,KAAK,CAAC,CAAE,CAAE;AAAA,EAC9F;AAAA,EACA,WAAW,CAAE,OAAQ;AACpB,WAAO;AAAA,MACN;AAAA,QACC,gBAAiB,iCAAkC;AAAA,QACnD,gBAAiB,gCAAiC;AAAA,MACnD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACD;;;ACzBO,SAAS,OAAO;AACtB,mBAAiB,SAAU,sBAAuB;AACnD;;;ACIA,KAAK;","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/__tests__/elements-styles-provider.test.ts

@@ -33,11 +33,11 @@ describe( 'elementsStylesProvider', () => {
 		const styles = elementsStylesProvider.get();
 
 		// Assert.
-		expect( styles ).toEqual( {
-			's-1': expect.objectContaining( { id: 's-1' } ),
-			's-2': expect.objectContaining( { id: 's-2' } ),
-			's-3': expect.objectContaining( { id: 's-3' } ),
-		} );
+		expect( styles ).toEqual( [
+			expect.objectContaining( { id: 's-1' } ),
+			expect.objectContaining( { id: 's-2' } ),
+			expect.objectContaining( { id: 's-3' } ),
+		] );
 	} );
 
 	it( 'should return all styles filtered by element', () => {
@@ -45,9 +45,9 @@ describe( 'elementsStylesProvider', () => {
 		const styles = elementsStylesProvider.get( { elementId: '1' } );
 
 		// Assert.
-		expect( styles ).toEqual( {
-			's-1': expect.objectContaining( { id: 's-1' } ),
-			's-2': expect.objectContaining( { id: 's-2' } ),
-		} );
+		expect( styles ).toEqual( [
+			expect.objectContaining( { id: 's-1' } ),
+			expect.objectContaining( { id: 's-2' } ),
+		] );
 	} );
 } );

package/src/elements-styles-provider.ts

@@ -6,6 +6,8 @@ import { type StylesProvider } from './utils/create-styles-repository';
 export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
 
 export const elementsStylesProvider: StylesProvider = {
+	key: ELEMENTS_STYLES_PROVIDER_KEY,
+	priority: 50,
 	get: ( meta = {} ) => {
 		let elements = getElements();
 
@@ -13,13 +15,7 @@ export const elementsStylesProvider: StylesProvider = {
 			elements = elements.filter( ( element ) => element.id === meta.elementId );
 		}
 
-		const entries = elements.flatMap( ( element ) => {
-			const styles = element.model.get( 'styles' );
-
-			return styles ? Object.entries( styles ) : [];
-		} );
-
-		return Object.fromEntries( entries );
+		return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
 	},
 	subscribe: ( cb ) => {
 		return listenTo(

package/src/init.ts

@@ -2,5 +2,5 @@ import { elementsStylesProvider } from './elements-styles-provider';
 import { stylesRepository } from './styles-repository';
 
 export function init() {
-	stylesRepository.register( 'elements', elementsStylesProvider );
+	stylesRepository.register( elementsStylesProvider );
 }

package/src/utils/__tests__/create-styles-repository.test.ts

@@ -1,5 +1,5 @@
 import { createMockStyleDefinition } from 'test-utils';
-import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
 import { createStylesRepository, type StylesProvider } from '../create-styles-repository';
 
@@ -8,32 +8,28 @@ const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color'
 const styleDef3 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#111111' } } } );
 
 describe( 'createStylesRepository', () => {
-	it( 'should get all the style defs from all the providers', () => {
+	it( 'should get all the style defs from all providers ordered by priority', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.register( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
-		repo.register( 'mock2', createMockProvider( { [ styleDef2.id ]: styleDef2 } ).provider );
+		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
+		repo.register( createMockProvider( 'mock2', 20, [ styleDef2 ] ).provider );
 
 		// Assert
-		expect( repo.all() ).toEqual( [ styleDef1, styleDef2 ] );
+		expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
 	} );
 
 	it( 'should get all the style defs grouped by providers', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.register( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
-
-		repo.register(
-			'mock2',
-			createMockProvider( { [ styleDef2.id ]: styleDef2, [ styleDef3.id ]: styleDef3 } ).provider
-		);
+		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
+		repo.register( createMockProvider( 'mock2', 20, [ styleDef2, styleDef3 ] ).provider );
 
 		// Assert
 		expect( repo.allByProvider() ).toEqual( [
-			[ 'mock1', [ styleDef1 ] ],
 			[ 'mock2', [ styleDef2, styleDef3 ] ],
+			[ 'mock1', [ styleDef1 ] ],
 		] );
 	} );
 
@@ -41,16 +37,12 @@ describe( 'createStylesRepository', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( {
-			[ styleDef1.id ]: styleDef1,
-		} );
+		const { provider: mockStylesProvider1, notify: notify1 } = createMockProvider( 'mock1', 10, [ styleDef1 ] );
 
-		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( {
-			[ styleDef2.id ]: styleDef2,
-		} );
+		const { provider: mockStylesProvider2, notify: notify2 } = createMockProvider( 'mock2', 10, [ styleDef2 ] );
 
-		repo.register( 'mock1', mockStylesProvider1 );
-		repo.register( 'mock2', mockStylesProvider2 );
+		repo.register( mockStylesProvider1 );
+		repo.register( mockStylesProvider2 );
 
 		const cb = jest.fn();
 		const unsubscribe = repo.subscribe( cb );
@@ -78,7 +70,7 @@ describe( 'createStylesRepository', () => {
 	} );
 } );
 
-const createMockProvider = ( styleDefinitions: StyleDefinitionsMap ) => {
+const createMockProvider = ( key: string, priority: number, styleDefinitions: StyleDefinition[] ) => {
 	const subscribers = new Set< () => void >();
 
 	const notify = () => {
@@ -86,6 +78,8 @@ const createMockProvider = ( styleDefinitions: StyleDefinitionsMap ) => {
 	};
 
 	const provider: StylesProvider = {
+		key,
+		priority,
 		get: () => styleDefinitions,
 		subscribe: ( cb ) => {
 			subscribers.add( cb );

package/src/utils/create-styles-repository.ts

@@ -1,31 +1,35 @@
-import { type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition } from '@elementor/editor-styles';
 
 export type StyleProviderMeta = Record< string, unknown >;
 
 export type StylesProvider = {
-	get: ( meta?: StyleProviderMeta ) => StyleDefinitionsMap;
+	key: string;
+	priority: number;
+	get: ( meta?: StyleProviderMeta ) => StyleDefinition[];
 	subscribe: ( callback: () => void ) => () => void;
 };
 
 export const createStylesRepository = () => {
-	const providers = new Map< string, StylesProvider >();
+	const providers: StylesProvider[] = [];
 
-	const register = ( key: string, provider: StylesProvider ) => {
-		providers.set( key, provider );
+	const getProvidersByPriority = () => {
+		return providers.slice( 0 ).sort( ( a, b ) => ( a.priority > b.priority ? -1 : 1 ) );
+	};
+
+	const register = ( provider: StylesProvider ) => {
+		providers.push( provider );
 	};
 
 	const allByProvider = ( meta: StyleProviderMeta = {} ) => {
-		return Array.from( providers.entries() ).map(
-			( [ key, provider ] ) => [ key, Object.values( provider.get( meta ) ) ] as const
-		);
+		return getProvidersByPriority().map( ( provider ) => [ provider.key, provider.get( meta ) ] as const );
 	};
 
 	const all = ( meta: StyleProviderMeta = {} ) => {
-		return Array.from( providers.values() ).flatMap( ( provider ) => Object.values( provider.get( meta ) ) );
+		return getProvidersByPriority().flatMap( ( provider ) => provider.get( meta ) );
 	};
 
 	const subscribe = ( cb: () => void ) => {
-		const unsubscribes = Array.from( providers.values() ).map( ( provider ) => {
+		const unsubscribes = providers.map( ( provider ) => {
 			return provider.subscribe( cb );
 		} );