@elementor/editor-styles-repository 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.1.0 build
+> @elementor/editor-styles-repository@0.2.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     1.62 KB
-ESM dist/index.mjs.map 3.55 KB
-ESM ⚡️ Build success in 30ms
-CJS dist/index.js     2.74 KB
-CJS dist/index.js.map 3.59 KB
-CJS ⚡️ Build success in 31ms
+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
 DTS Build start
-DTS ⚡️ Build success in 11031ms
-DTS dist/index.d.mts 519.00 B
-DTS dist/index.d.ts  519.00 B
+DTS ⚡️ Build success in 4285ms
+DTS dist/index.d.mts 970.00 B
+DTS dist/index.d.ts  970.00 B

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @elementor/editor-styles-repository
 
+## 0.2.0
+
+### Minor Changes
+
+- 6f2b17f: Introduce empty (local) style def for class selector.
+
+### Patch Changes
+
+- Updated dependencies [6f2b17f]
+  - @elementor/editor-elements@0.3.3
+  - @elementor/editor-styles@0.3.2
+
+## 0.1.1
+
+### Patch Changes
+
+- 91453b3: Update and lock dependencies versions
+- Updated dependencies [91453b3]
+  - @elementor/editor-v1-adapters@0.8.5
+  - @elementor/editor-elements@0.3.2
+  - @elementor/editor-styles@0.3.1
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,15 +1,21 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
 import { StyleDefinitionsMap } from '@elementor/editor-styles';
 
+type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: () => StyleDefinitionsMap;
+    get: (meta?: StyleProviderMeta) => StyleDefinitionsMap;
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    registerProvider: (key: string, provider: StylesProvider) => void;
-    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    register: (key: string, provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-export { type StylesProvider, stylesRepository };
+declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+
+declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+
+export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.d.ts

@@ -1,15 +1,21 @@
 import * as _elementor_editor_styles from '@elementor/editor-styles';
 import { StyleDefinitionsMap } from '@elementor/editor-styles';
 
+type StyleProviderMeta = Record<string, unknown>;
 type StylesProvider = {
-    get: () => StyleDefinitionsMap;
+    get: (meta?: StyleProviderMeta) => StyleDefinitionsMap;
     subscribe: (callback: () => void) => () => void;
 };
 
 declare const stylesRepository: {
-    registerProvider: (key: string, provider: StylesProvider) => void;
-    all: () => _elementor_editor_styles.StyleDefinitionsMap;
+    all: (meta?: StyleProviderMeta) => _elementor_editor_styles.StyleDefinition[];
+    allByProvider: (meta?: StyleProviderMeta) => (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+    register: (key: string, provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
 };
 
-export { type StylesProvider, stylesRepository };
+declare function useAllStylesByProvider(meta?: StyleProviderMeta): (readonly [string, _elementor_editor_styles.StyleDefinition[]])[];
+
+declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
+
+export { ELEMENTS_STYLES_PROVIDER_KEY, type StylesProvider, stylesRepository, useAllStylesByProvider };

package/dist/index.js

@@ -18,23 +18,27 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  stylesRepository: () => stylesRepository
+var index_exports = {};
+__export(index_exports, {
+  ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository: () => stylesRepository,
+  useAllStylesByProvider: () => useAllStylesByProvider
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
   const providers = /* @__PURE__ */ new Map();
-  const registerProvider = (key, provider) => {
+  const register = (key, provider) => {
     providers.set(key, provider);
   };
-  const all = () => {
-    return Array.from(providers.values()).reduce((acc, provider) => {
-      const styles = provider.get();
-      return { ...acc, ...styles };
-    }, {});
+  const allByProvider = (meta = {}) => {
+    return Array.from(providers.entries()).map(
+      ([key, provider]) => [key, Object.values(provider.get(meta))]
+    );
+  };
+  const all = (meta = {}) => {
+    return Array.from(providers.values()).flatMap((provider) => Object.values(provider.get(meta)));
   };
   const subscribe = (cb) => {
     const unsubscribes = Array.from(providers.values()).map((provider) => {
@@ -45,8 +49,9 @@ var createStylesRepository = () => {
     };
   };
   return {
-    registerProvider,
     all,
+    allByProvider,
+    register,
     subscribe
   };
 };
@@ -54,12 +59,24 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
+// src/hooks/use-all-styles-by-provider.ts
+var import_react = require("react");
+function useAllStylesByProvider(meta = {}) {
+  const [, rerender] = (0, import_react.useReducer)((prev) => !prev, false);
+  (0, import_react.useEffect)(() => stylesRepository.subscribe(rerender), []);
+  return stylesRepository.allByProvider(meta);
+}
+
 // src/elements-styles-provider.ts
 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 = {
-  get: () => {
-    const elements = (0, import_editor_elements.getElements)();
+  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) : [];
@@ -79,13 +96,15 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.registerProvider("elements", elementsStylesProvider);
+  stylesRepository.register("elements", elementsStylesProvider);
 }
 
 // src/index.ts
 init();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  stylesRepository
+  ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository,
+  useAllStylesByProvider
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts"],"sourcesContent":["export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n","import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\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\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\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 elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\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.registerProvider( 'elements', elementsStylesProvider );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;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,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,6BAA4B;AAC5B,gCAA+D;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,eAAW,oCAAY;AAE7B,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;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;AJCA,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 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"]}

package/dist/index.mjs

@@ -1,14 +1,16 @@
 // src/utils/create-styles-repository.ts
 var createStylesRepository = () => {
   const providers = /* @__PURE__ */ new Map();
-  const registerProvider = (key, provider) => {
+  const register = (key, provider) => {
     providers.set(key, provider);
   };
-  const all = () => {
-    return Array.from(providers.values()).reduce((acc, provider) => {
-      const styles = provider.get();
-      return { ...acc, ...styles };
-    }, {});
+  const allByProvider = (meta = {}) => {
+    return Array.from(providers.entries()).map(
+      ([key, provider]) => [key, Object.values(provider.get(meta))]
+    );
+  };
+  const all = (meta = {}) => {
+    return Array.from(providers.values()).flatMap((provider) => Object.values(provider.get(meta)));
   };
   const subscribe = (cb) => {
     const unsubscribes = Array.from(providers.values()).map((provider) => {
@@ -19,8 +21,9 @@ var createStylesRepository = () => {
     };
   };
   return {
-    registerProvider,
     all,
+    allByProvider,
+    register,
     subscribe
   };
 };
@@ -28,12 +31,24 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
+// src/hooks/use-all-styles-by-provider.ts
+import { useEffect, useReducer } from "react";
+function useAllStylesByProvider(meta = {}) {
+  const [, rerender] = useReducer((prev) => !prev, false);
+  useEffect(() => stylesRepository.subscribe(rerender), []);
+  return stylesRepository.allByProvider(meta);
+}
+
 // src/elements-styles-provider.ts
 import { getElements } from "@elementor/editor-elements";
 import { __privateListenTo as listenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
-  get: () => {
-    const elements = getElements();
+  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) : [];
@@ -53,12 +68,14 @@ var elementsStylesProvider = {
 
 // src/init.ts
 function init() {
-  stylesRepository.registerProvider("elements", elementsStylesProvider);
+  stylesRepository.register("elements", elementsStylesProvider);
 }
 
 // src/index.ts
 init();
 export {
-  stylesRepository
+  ELEMENTS_STYLES_PROVIDER_KEY,
+  stylesRepository,
+  useAllStylesByProvider
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/elements-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinitionsMap } from '@elementor/editor-styles';\n\nexport type StylesProvider = {\n\tget: () => StyleDefinitionsMap;\n\tsubscribe: ( callback: () => void ) => () => void;\n};\n\nexport const createStylesRepository = () => {\n\tconst providers = new Map< string, StylesProvider >();\n\n\tconst registerProvider = ( key: string, provider: StylesProvider ) => {\n\t\tproviders.set( key, provider );\n\t};\n\n\tconst all = () => {\n\t\treturn Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {\n\t\t\tconst styles = provider.get();\n\n\t\t\treturn { ...acc, ...styles };\n\t\t}, {} );\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\tregisterProvider,\n\t\tall,\n\t\tsubscribe,\n\t};\n};\n","import { createStylesRepository } from './utils/create-styles-repository';\n\nexport const stylesRepository = createStylesRepository();\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 elementsStylesProvider: StylesProvider = {\n\tget: () => {\n\t\tconst elements = getElements();\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.registerProvider( 'elements', elementsStylesProvider );\n}\n","export { type StylesProvider } from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":";AAOO,IAAM,yBAAyB,MAAM;AAC3C,QAAM,YAAY,oBAAI,IAA8B;AAEpD,QAAM,mBAAmB,CAAE,KAAa,aAA8B;AACrE,cAAU,IAAK,KAAK,QAAS;AAAA,EAC9B;AAEA,QAAM,MAAM,MAAM;AACjB,WAAO,MAAM,KAAM,UAAU,OAAO,CAAE,EAAE,OAA+B,CAAE,KAAK,aAAc;AAC3F,YAAM,SAAS,SAAS,IAAI;AAE5B,aAAO,EAAE,GAAG,KAAK,GAAG,OAAO;AAAA,IAC5B,GAAG,CAAC,CAAE;AAAA,EACP;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,EACD;AACD;;;ACnCO,IAAM,mBAAmB,uBAAuB;;;ACFvD,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB,UAAU,uBAAuB;AAIxD,IAAM,yBAAyC;AAAA,EACrD,KAAK,MAAM;AACV,UAAM,WAAW,YAAY;AAE7B,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;;;ACvBO,SAAS,OAAO;AACtB,mBAAiB,iBAAkB,YAAY,sBAAuB;AACvE;;;ACCA,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 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":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,8 +33,11 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "^0.3.1",
-    "@elementor/editor-styles": "^0.3.0",
-    "@elementor/editor-v1-adapters": "^0.8.4"
+    "@elementor/editor-elements": "0.3.3",
+    "@elementor/editor-styles": "0.3.2",
+    "@elementor/editor-v1-adapters": "0.8.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
   }
 }

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

@@ -6,8 +6,7 @@ import { elementsStylesProvider } from '../elements-styles-provider';
 jest.mock( '@elementor/editor-elements' );
 
 describe( 'elementsStylesProvider', () => {
-	it( 'should return all the styles attached to all the document elements', () => {
-		// Arrange.
+	beforeEach( () => {
 		jest.mocked( getElements ).mockReturnValue( [
 			createMockElement( {
 				model: {
@@ -27,7 +26,9 @@ describe( 'elementsStylesProvider', () => {
 				},
 			} ),
 		] );
+	} );
 
+	it( 'should return all the styles attached to all the document elements', () => {
 		// Act.
 		const styles = elementsStylesProvider.get();
 
@@ -38,4 +39,15 @@ describe( 'elementsStylesProvider', () => {
 			's-3': expect.objectContaining( { id: 's-3' } ),
 		} );
 	} );
+
+	it( 'should return all styles filtered by element', () => {
+		// Act.
+		const styles = elementsStylesProvider.get( { elementId: '1' } );
+
+		// Assert.
+		expect( styles ).toEqual( {
+			's-1': expect.objectContaining( { id: 's-1' } ),
+			's-2': expect.objectContaining( { id: 's-2' } ),
+		} );
+	} );
 } );

package/src/elements-styles-provider.ts

@@ -3,9 +3,15 @@ import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/edito
 
 import { type StylesProvider } from './utils/create-styles-repository';
 
+export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
+
 export const elementsStylesProvider: StylesProvider = {
-	get: () => {
-		const elements = getElements();
+	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' );

package/src/hooks/use-all-styles-by-provider.ts

@@ -0,0 +1,12 @@
+import { useEffect, useReducer } from 'react';
+
+import { stylesRepository } from '../styles-repository';
+import { type StyleProviderMeta } from '../utils/create-styles-repository';
+
+export function useAllStylesByProvider( meta: StyleProviderMeta = {} ) {
+	const [ , rerender ] = useReducer( ( prev ) => ! prev, false );
+
+	useEffect( () => stylesRepository.subscribe( rerender ), [] );
+
+	return stylesRepository.allByProvider( meta );
+}

package/src/index.ts

@@ -1,6 +1,9 @@
 export { type StylesProvider } from './utils/create-styles-repository';
 
 export { stylesRepository } from './styles-repository';
+export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
+
+export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';
 
 import { init } from './init';
 

package/src/init.ts

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

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

@@ -5,20 +5,36 @@ import { createStylesRepository, type StylesProvider } from '../create-styles-re
 
 const styleDef1 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#dddddd' } } } );
 const styleDef2 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#eeeeee' } } } );
+const styleDef3 = createMockStyleDefinition( { props: { color: { $$type: 'color', value: '#111111' } } } );
 
 describe( 'createStylesRepository', () => {
-	it( 'should register and get all styles from all providers', () => {
+	it( 'should get all the style defs from all the providers', () => {
 		// Arrange
 		const repo = createStylesRepository();
 
-		repo.registerProvider( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
-		repo.registerProvider( 'mock2', createMockProvider( { [ styleDef2.id ]: styleDef2 } ).provider );
+		repo.register( 'mock1', createMockProvider( { [ styleDef1.id ]: styleDef1 } ).provider );
+		repo.register( 'mock2', createMockProvider( { [ styleDef2.id ]: styleDef2 } ).provider );
 
 		// Assert
-		expect( repo.all() ).toEqual( {
-			[ styleDef1.id ]: styleDef1,
-			[ styleDef2.id ]: styleDef2,
-		} );
+		expect( repo.all() ).toEqual( [ styleDef1, styleDef2 ] );
+	} );
+
+	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
+		);
+
+		// Assert
+		expect( repo.allByProvider() ).toEqual( [
+			[ 'mock1', [ styleDef1 ] ],
+			[ 'mock2', [ styleDef2, styleDef3 ] ],
+		] );
 	} );
 
 	it( 'should subscribe and unsubscribe to all style providers', () => {
@@ -33,8 +49,8 @@ describe( 'createStylesRepository', () => {
 			[ styleDef2.id ]: styleDef2,
 		} );
 
-		repo.registerProvider( 'mock1', mockStylesProvider1 );
-		repo.registerProvider( 'mock2', mockStylesProvider2 );
+		repo.register( 'mock1', mockStylesProvider1 );
+		repo.register( 'mock2', mockStylesProvider2 );
 
 		const cb = jest.fn();
 		const unsubscribe = repo.subscribe( cb );

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

@@ -1,23 +1,27 @@
 import { type StyleDefinitionsMap } from '@elementor/editor-styles';
 
+export type StyleProviderMeta = Record< string, unknown >;
+
 export type StylesProvider = {
-	get: () => StyleDefinitionsMap;
+	get: ( meta?: StyleProviderMeta ) => StyleDefinitionsMap;
 	subscribe: ( callback: () => void ) => () => void;
 };
 
 export const createStylesRepository = () => {
 	const providers = new Map< string, StylesProvider >();
 
-	const registerProvider = ( key: string, provider: StylesProvider ) => {
+	const register = ( key: string, provider: StylesProvider ) => {
 		providers.set( key, provider );
 	};
 
-	const all = () => {
-		return Array.from( providers.values() ).reduce< StyleDefinitionsMap >( ( acc, provider ) => {
-			const styles = provider.get();
+	const allByProvider = ( meta: StyleProviderMeta = {} ) => {
+		return Array.from( providers.entries() ).map(
+			( [ key, provider ] ) => [ key, Object.values( provider.get( meta ) ) ] as const
+		);
+	};
 
-			return { ...acc, ...styles };
-		}, {} );
+	const all = ( meta: StyleProviderMeta = {} ) => {
+		return Array.from( providers.values() ).flatMap( ( provider ) => Object.values( provider.get( meta ) ) );
 	};
 
 	const subscribe = ( cb: () => void ) => {
@@ -31,8 +35,9 @@ export const createStylesRepository = () => {
 	};
 
 	return {
-		registerProvider,
 		all,
+		allByProvider,
+		register,
 		subscribe,
 	};
 };