@elementor/editor-styles-repository 0.5.0 → 0.6.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/editor-styles-repository@0.5.0 build
+> @elementor/editor-styles-repository@0.6.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
-CJS dist/index.js     4.69 KB
-CJS dist/index.js.map 8.12 KB
-CJS ⚡️ Build success in 55ms
-ESM dist/index.mjs     3.31 KB
-ESM dist/index.mjs.map 8.04 KB
-ESM ⚡️ Build success in 55ms
+CJS dist/index.js     5.33 KB
+CJS dist/index.js.map 9.60 KB
+CJS ⚡️ Build success in 54ms
+ESM dist/index.mjs     3.96 KB
+ESM dist/index.mjs.map 9.52 KB
+ESM ⚡️ Build success in 57ms
 DTS Build start
-DTS ⚡️ Build success in 4346ms
-DTS dist/index.d.mts 1.84 KB
-DTS dist/index.d.ts  1.84 KB
+DTS ⚡️ Build success in 5068ms
+DTS dist/index.d.mts 1.94 KB
+DTS dist/index.d.ts  1.94 KB

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @elementor/editor-styles-repository
 
+## 0.6.0
+
+### Minor Changes
+
+- 19b0381: Change styles repository API
+
+### Patch Changes
+
+- d61b1bc: Added a new event to update the elements styles repository + organized all events in a central location
+- b34f498: Fix global class styles not updating
+- Updated dependencies [d61b1bc]
+- Updated dependencies [a8b60c9]
+- Updated dependencies [b34f498]
+  - @elementor/editor-elements@0.5.1
+  - @elementor/editor-v1-adapters@0.9.1
+  - @elementor/editor-styles@0.5.4
+
 ## 0.5.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -1,17 +1,25 @@
+import { Props } from '@elementor/editor-props';
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinition } from '@elementor/editor-styles';
+import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
 
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-type GetActionPayload = Record<string, unknown>;
 type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
 type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
+type UpdatePropsActionPayload = {
+    id: StyleDefinitionID;
+    meta: StyleDefinitionVariant['meta'];
+    props: Props;
+};
+type Meta = Record<string, unknown>;
 type StylesProvider = {
     key: string;
     priority: number;
     actions: {
-        get: (meta?: GetActionPayload) => StyleDefinition[];
+        get: (meta?: Meta) => StyleDefinition[];
+        getById?: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
         create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
         update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
+        updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
     };
     subscribe: (callback: () => void) => () => void;
     labels?: {
@@ -21,15 +29,14 @@ type StylesProvider = {
 };
 
 declare const stylesRepository: {
-    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: Meta) => _elementor_editor_styles.StyleDefinition[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => StylesProvider[];
     getProviderByKey: (key: string) => StylesProvider | undefined;
 };
 
-declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
@@ -37,4 +44,4 @@ declare function useCreateActionsByProvider(): CreateTuple[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 
-export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
+export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type Meta, type StylesProvider, type UpdateActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };

package/dist/index.d.ts

@@ -1,17 +1,25 @@
+import { Props } from '@elementor/editor-props';
 import * as _elementor_editor_styles from '@elementor/editor-styles';
-import { StyleDefinition } from '@elementor/editor-styles';
+import { StyleDefinition, StyleDefinitionID, StyleDefinitionVariant } from '@elementor/editor-styles';
 
 type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<T>;
-type GetActionPayload = Record<string, unknown>;
 type CreateActionPayload = MakeOptional<StyleDefinition, 'id' | 'type' | 'variants'>;
 type UpdateActionPayload = MakeOptional<StyleDefinition, 'label' | 'variants' | 'type'>;
+type UpdatePropsActionPayload = {
+    id: StyleDefinitionID;
+    meta: StyleDefinitionVariant['meta'];
+    props: Props;
+};
+type Meta = Record<string, unknown>;
 type StylesProvider = {
     key: string;
     priority: number;
     actions: {
-        get: (meta?: GetActionPayload) => StyleDefinition[];
+        get: (meta?: Meta) => StyleDefinition[];
+        getById?: (id: StyleDefinitionID, meta?: Meta) => StyleDefinition | null;
         create?: (data: CreateActionPayload) => Promise<StyleDefinition>;
         update?: (data: UpdateActionPayload) => Promise<StyleDefinition>;
+        updateProps?: (args: UpdatePropsActionPayload, meta?: Meta) => void;
     };
     subscribe: (callback: () => void) => () => void;
     labels?: {
@@ -21,15 +29,14 @@ type StylesProvider = {
 };
 
 declare const stylesRepository: {
-    all: (meta?: GetActionPayload) => _elementor_editor_styles.StyleDefinition[];
-    allByProvider: (meta?: GetActionPayload) => (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+    all: (meta?: Meta) => _elementor_editor_styles.StyleDefinition[];
     register: (provider: StylesProvider) => void;
     subscribe: (cb: () => void) => () => void;
     getProviders: () => StylesProvider[];
     getProviderByKey: (key: string) => StylesProvider | undefined;
 };
 
-declare function useAllStylesByProvider(meta?: GetActionPayload): (readonly [StylesProvider, _elementor_editor_styles.StyleDefinition[]])[];
+declare function useProviders(): StylesProvider[];
 
 type CreateAction = Required<StylesProvider['actions']>['create'];
 type CreateTuple = [StylesProvider, CreateAction];
@@ -37,4 +44,4 @@ declare function useCreateActionsByProvider(): CreateTuple[];
 
 declare const ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 
-export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type GetActionPayload, type StylesProvider, type UpdateActionPayload, stylesRepository, useAllStylesByProvider, useCreateActionsByProvider };
+export { type CreateActionPayload, ELEMENTS_STYLES_PROVIDER_KEY, type Meta, type StylesProvider, type UpdateActionPayload, stylesRepository, useCreateActionsByProvider, useProviders };

package/dist/index.js

@@ -22,8 +22,8 @@ var index_exports = {};
 __export(index_exports, {
   ELEMENTS_STYLES_PROVIDER_KEY: () => ELEMENTS_STYLES_PROVIDER_KEY,
   stylesRepository: () => stylesRepository,
-  useAllStylesByProvider: () => useAllStylesByProvider,
-  useCreateActionsByProvider: () => useCreateActionsByProvider
+  useCreateActionsByProvider: () => useCreateActionsByProvider,
+  useProviders: () => useProviders
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -36,9 +36,6 @@ var createStylesRepository = () => {
   const register = (provider) => {
     providers.push(provider);
   };
-  const allByProvider = (meta = {}) => {
-    return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
-  };
   const all = (meta = {}) => {
     return getProviders().flatMap((provider) => provider.actions.get(meta));
   };
@@ -55,7 +52,6 @@ var createStylesRepository = () => {
   };
   return {
     all,
-    allByProvider,
     register,
     subscribe,
     getProviders,
@@ -66,12 +62,12 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
-// src/hooks/use-all-styles-by-provider.ts
+// src/hooks/use-providers.ts
 var import_react = require("react");
-function useAllStylesByProvider(meta = {}) {
+function useProviders() {
   const [, rerender] = (0, import_react.useReducer)((prev) => !prev, false);
   (0, import_react.useEffect)(() => stylesRepository.subscribe(rerender), []);
-  return stylesRepository.allByProvider(meta);
+  return stylesRepository.getProviders();
 }
 
 // src/hooks/use-create-actions-by-provider.ts
@@ -90,6 +86,15 @@ function useCreateActionsByProvider() {
 // src/elements-styles-provider.ts
 var import_editor_elements = require("@elementor/editor-elements");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/errors.ts
+var import_utils = require("@elementor/utils");
+var InvalidElementsStyleProviderMetaError = (0, import_utils.createError)({
+  code: "invalid_elements_style_provider_meta",
+  message: "Invalid elements style provider meta."
+});
+
+// src/elements-styles-provider.ts
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
@@ -97,26 +102,42 @@ var elementsStylesProvider = {
   actions: {
     get: (meta = {}) => {
       let elements = (0, import_editor_elements.getElements)();
-      if ("elementId" in meta && meta.elementId) {
+      if (isValidElementsMeta(meta)) {
         elements = elements.filter((element) => element.id === meta.elementId);
       }
       return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
+    },
+    getById: (id, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      const styles = (0, import_editor_elements.getElementStyles)(meta.elementId) ?? {};
+      return styles[id] ?? null;
+    },
+    updateProps: (args, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      (0, import_editor_elements.updateElementStyle)({
+        elementId: meta.elementId,
+        styleId: args.id,
+        meta: args.meta,
+        props: args.props
+      });
     }
   },
-  subscribe: (cb) => {
-    return (0, import_editor_v1_adapters.__privateListenTo)(
-      [(0, import_editor_v1_adapters.commandEndEvent)("editor/documents/attach-preview"), (0, import_editor_v1_adapters.windowEvent)(import_editor_elements.ELEMENT_STYLE_CHANGE_EVENT)],
-      cb
-    );
-  }
+  subscribe: (cb) => (0, import_editor_v1_adapters.__privateListenTo)(import_editor_elements.styleRerenderEvents, cb)
 };
+function isValidElementsMeta(meta) {
+  return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
+}
 
 // src/element-base-styles-provider.ts
 var import_editor_elements2 = require("@elementor/editor-elements");
 var ELEMENTS_BASE_STYLES_PROVIDER_KEY = "element-base-styles";
 var elementBaseStylesProvider = {
   key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-  priority: 60,
+  priority: 10,
   actions: {
     get: () => {
       const widgetsCache = (0, import_editor_elements2.getWidgetsCache)();
@@ -141,7 +162,7 @@ init();
 0 && (module.exports = {
   ELEMENTS_STYLES_PROVIDER_KEY,
   stylesRepository,
-  useAllStylesByProvider,
-  useCreateActionsByProvider
+  useCreateActionsByProvider,
+  useProviders
 });
 //# 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/hooks/use-all-styles-by-provider.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype GetActionPayload,\n\ttype UpdateActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-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 MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type GetActionPayload = Record< string, unknown >;\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: GetActionPayload ) => StyleDefinition[];\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\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: GetActionPayload = {} ) => {\n\t\treturn getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.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\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\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 GetActionPayload } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: GetActionPayload = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent, windowEvent } 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\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 60,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}
+{"version":3,"sources":["../src/index.ts","../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts"],"sourcesContent":["export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype UpdateActionPayload,\n\ttype Meta,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n","import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\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 all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.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\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\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';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n"],"mappings":"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","names":["import_react","listenTo","import_editor_elements"]}

package/dist/index.mjs

@@ -7,9 +7,6 @@ var createStylesRepository = () => {
   const register = (provider) => {
     providers.push(provider);
   };
-  const allByProvider = (meta = {}) => {
-    return getProviders().map((provider) => [provider, provider.actions.get(meta)]);
-  };
   const all = (meta = {}) => {
     return getProviders().flatMap((provider) => provider.actions.get(meta));
   };
@@ -26,7 +23,6 @@ var createStylesRepository = () => {
   };
   return {
     all,
-    allByProvider,
     register,
     subscribe,
     getProviders,
@@ -37,12 +33,12 @@ var createStylesRepository = () => {
 // src/styles-repository.ts
 var stylesRepository = createStylesRepository();
 
-// src/hooks/use-all-styles-by-provider.ts
+// src/hooks/use-providers.ts
 import { useEffect, useReducer } from "react";
-function useAllStylesByProvider(meta = {}) {
+function useProviders() {
   const [, rerender] = useReducer((prev) => !prev, false);
   useEffect(() => stylesRepository.subscribe(rerender), []);
-  return stylesRepository.allByProvider(meta);
+  return stylesRepository.getProviders();
 }
 
 // src/hooks/use-create-actions-by-provider.ts
@@ -59,8 +55,17 @@ function useCreateActionsByProvider() {
 }
 
 // src/elements-styles-provider.ts
-import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from "@elementor/editor-elements";
-import { __privateListenTo as listenTo, commandEndEvent, windowEvent } from "@elementor/editor-v1-adapters";
+import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from "@elementor/editor-elements";
+import { __privateListenTo as listenTo } from "@elementor/editor-v1-adapters";
+
+// src/errors.ts
+import { createError } from "@elementor/utils";
+var InvalidElementsStyleProviderMetaError = createError({
+  code: "invalid_elements_style_provider_meta",
+  message: "Invalid elements style provider meta."
+});
+
+// src/elements-styles-provider.ts
 var ELEMENTS_STYLES_PROVIDER_KEY = "elements";
 var elementsStylesProvider = {
   key: ELEMENTS_STYLES_PROVIDER_KEY,
@@ -68,26 +73,42 @@ var elementsStylesProvider = {
   actions: {
     get: (meta = {}) => {
       let elements = getElements();
-      if ("elementId" in meta && meta.elementId) {
+      if (isValidElementsMeta(meta)) {
         elements = elements.filter((element) => element.id === meta.elementId);
       }
       return elements.flatMap((element) => Object.values(element.model.get("styles") ?? {}));
+    },
+    getById: (id, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      const styles = getElementStyles(meta.elementId) ?? {};
+      return styles[id] ?? null;
+    },
+    updateProps: (args, meta = {}) => {
+      if (!isValidElementsMeta(meta)) {
+        throw new InvalidElementsStyleProviderMetaError({ context: { meta } });
+      }
+      updateElementStyle({
+        elementId: meta.elementId,
+        styleId: args.id,
+        meta: args.meta,
+        props: args.props
+      });
     }
   },
-  subscribe: (cb) => {
-    return listenTo(
-      [commandEndEvent("editor/documents/attach-preview"), windowEvent(ELEMENT_STYLE_CHANGE_EVENT)],
-      cb
-    );
-  }
+  subscribe: (cb) => listenTo(styleRerenderEvents, cb)
 };
+function isValidElementsMeta(meta) {
+  return "elementId" in meta && typeof meta.elementId === "string" && !!meta.elementId;
+}
 
 // src/element-base-styles-provider.ts
 import { getWidgetsCache } from "@elementor/editor-elements";
 var ELEMENTS_BASE_STYLES_PROVIDER_KEY = "element-base-styles";
 var elementBaseStylesProvider = {
   key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-  priority: 60,
+  priority: 10,
   actions: {
     get: () => {
       const widgetsCache = getWidgetsCache();
@@ -111,7 +132,7 @@ init();
 export {
   ELEMENTS_STYLES_PROVIDER_KEY,
   stylesRepository,
-  useAllStylesByProvider,
-  useCreateActionsByProvider
+  useCreateActionsByProvider,
+  useProviders
 };
 //# 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/hooks/use-all-styles-by-provider.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type StyleDefinition } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type GetActionPayload = Record< string, unknown >;\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: GetActionPayload ) => StyleDefinition[];\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\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: GetActionPayload = {} ) => {\n\t\treturn getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );\n\t};\n\n\tconst all = ( meta: GetActionPayload = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.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\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tallByProvider,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\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 GetActionPayload } from '../utils/create-styles-repository';\n\nexport function useAllStylesByProvider( meta: GetActionPayload = {} ) {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.allByProvider( meta );\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo, commandEndEvent, windowEvent } 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\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( 'elementId' in meta && meta.elementId ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => {\n\t\treturn listenTo(\n\t\t\t[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],\n\t\t\tcb\n\t\t);\n\t},\n};\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 60,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype GetActionPayload,\n\ttype UpdateActionPayload,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/utils/create-styles-repository.ts","../src/styles-repository.ts","../src/hooks/use-providers.ts","../src/hooks/use-create-actions-by-provider.ts","../src/elements-styles-provider.ts","../src/errors.ts","../src/element-base-styles-provider.ts","../src/init.ts","../src/index.ts"],"sourcesContent":["import { type Props } from '@elementor/editor-props';\nimport { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';\n\nexport type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;\n\nexport type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;\nexport type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;\n\nexport type UpdatePropsActionPayload = {\n\tid: StyleDefinitionID;\n\tmeta: StyleDefinitionVariant[ 'meta' ];\n\tprops: Props;\n};\n\nexport type Meta = Record< string, unknown >;\n\nexport type StylesProvider = {\n\tkey: string;\n\tpriority: number;\n\tactions: {\n\t\tget: ( meta?: Meta ) => StyleDefinition[];\n\t\tgetById?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;\n\t\tcreate?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdate?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;\n\t\tupdateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;\n\t};\n\tsubscribe: ( callback: () => void ) => () => void;\n\tlabels?: {\n\t\tsingular: string;\n\t\tplural: string;\n\t};\n};\n\nexport const createStylesRepository = () => {\n\tconst providers: StylesProvider[] = [];\n\n\tconst getProviders = () => {\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 all = ( meta: Meta = {} ) => {\n\t\treturn getProviders().flatMap( ( provider ) => provider.actions.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\tconst getProviderByKey = ( key: string ) => {\n\t\treturn providers.find( ( provider ) => provider.key === key );\n\t};\n\n\treturn {\n\t\tall,\n\t\tregister,\n\t\tsubscribe,\n\t\tgetProviders,\n\t\tgetProviderByKey,\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';\n\nexport function useProviders() {\n\tconst [ , rerender ] = useReducer( ( prev ) => ! prev, false );\n\n\tuseEffect( () => stylesRepository.subscribe( rerender ), [] );\n\n\treturn stylesRepository.getProviders();\n}\n","import { useMemo } from 'react';\n\nimport { stylesRepository } from '../styles-repository';\nimport { type StylesProvider } from '../utils/create-styles-repository';\n\ntype CreateAction = Required< StylesProvider[ 'actions' ] >[ 'create' ];\ntype CreateTuple = [ StylesProvider, CreateAction ];\n\nexport function useCreateActionsByProvider() {\n\treturn useMemo( () => {\n\t\treturn stylesRepository\n\t\t\t.getProviders()\n\t\t\t.map< CreateTuple | null >( ( provider ) => {\n\t\t\t\tif ( ! provider.actions.create ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn [ provider, provider.actions.create ];\n\t\t\t} )\n\t\t\t.filter( ( item ) => !! item );\n\t}, [] );\n}\n","import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';\nimport { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';\n\nimport { InvalidElementsStyleProviderMetaError } from './errors';\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nexport const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';\n\nexport const elementsStylesProvider = {\n\tkey: ELEMENTS_STYLES_PROVIDER_KEY,\n\tpriority: 50,\n\tactions: {\n\t\tget: ( meta = {} ) => {\n\t\t\tlet elements = getElements();\n\n\t\t\tif ( isValidElementsMeta( meta ) ) {\n\t\t\t\telements = elements.filter( ( element ) => element.id === meta.elementId );\n\t\t\t}\n\n\t\t\treturn elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );\n\t\t},\n\n\t\tgetById: ( id, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tconst styles = getElementStyles( meta.elementId ) ?? {};\n\n\t\t\treturn styles[ id ] ?? null;\n\t\t},\n\n\t\tupdateProps: ( args, meta = {} ) => {\n\t\t\tif ( ! isValidElementsMeta( meta ) ) {\n\t\t\t\tthrow new InvalidElementsStyleProviderMetaError( { context: { meta } } );\n\t\t\t}\n\n\t\t\tupdateElementStyle( {\n\t\t\t\telementId: meta.elementId,\n\t\t\t\tstyleId: args.id,\n\t\t\t\tmeta: args.meta,\n\t\t\t\tprops: args.props,\n\t\t\t} );\n\t\t},\n\t},\n\tsubscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),\n} satisfies StylesProvider;\n\ntype ElementsMeta = {\n\telementId: string;\n};\n\nfunction isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {\n\treturn 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;\n}\n","import { createError } from '@elementor/utils';\n\nexport const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {\n\tcode: 'invalid_elements_style_provider_meta',\n\tmessage: 'Invalid elements style provider meta.',\n} );\n","import { getWidgetsCache } from '@elementor/editor-elements';\n\nimport { type StylesProvider } from './utils/create-styles-repository';\n\nconst ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';\n\nexport const elementBaseStylesProvider: StylesProvider = {\n\tkey: ELEMENTS_BASE_STYLES_PROVIDER_KEY,\n\tpriority: 10,\n\tactions: {\n\t\tget: () => {\n\t\t\tconst widgetsCache = getWidgetsCache();\n\n\t\t\treturn Object.values( widgetsCache ?? {} ).flatMap( ( widget ) => widget.base_styles ?? [] );\n\t\t},\n\t},\n\tsubscribe: () => {\n\t\treturn () => {};\n\t},\n};\n","import { elementBaseStylesProvider } from './element-base-styles-provider';\nimport { elementsStylesProvider } from './elements-styles-provider';\nimport { stylesRepository } from './styles-repository';\n\nexport function init() {\n\tstylesRepository.register( elementsStylesProvider );\n\tstylesRepository.register( elementBaseStylesProvider );\n}\n","export {\n\ttype StylesProvider,\n\ttype CreateActionPayload,\n\ttype UpdateActionPayload,\n\ttype Meta,\n} from './utils/create-styles-repository';\n\nexport { stylesRepository } from './styles-repository';\nexport { useProviders } from './hooks/use-providers';\nexport { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';\n\nexport { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';\n\nimport { init } from './init';\n\ninit();\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-styles-repository",
   "description": "Elementor Editor Styles Repository",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -33,9 +33,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-elements": "0.5.0",
-    "@elementor/editor-styles": "0.5.3",
-    "@elementor/editor-v1-adapters": "0.9.0"
+    "@elementor/editor-elements": "0.5.1",
+    "@elementor/editor-styles": "0.5.4",
+    "@elementor/editor-v1-adapters": "0.9.1",
+    "@elementor/utils": "0.3.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"

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

@@ -1,7 +1,9 @@
 import { createMockElement, createMockStyleDefinition } from 'test-utils';
-import { getElements } from '@elementor/editor-elements';
+import { getElements, getElementStyles } from '@elementor/editor-elements';
+import type { StyleDefinition } from '@elementor/editor-styles';
 
 import { elementsStylesProvider } from '../elements-styles-provider';
+import { InvalidElementsStyleProviderMetaError } from '../errors';
 
 jest.mock( '@elementor/editor-elements' );
 
@@ -50,4 +52,63 @@ describe( 'elementsStylesProvider', () => {
 			expect.objectContaining( { id: 's-2' } ),
 		] );
 	} );
+
+	it( 'should retrieve an element style by id', () => {
+		const styles: Record< string, StyleDefinition > = {
+			'style-1': {
+				id: 'style-1',
+				label: 'Style 1',
+				variants: [],
+				type: 'class',
+			},
+			'style-2': {
+				id: 'style-2',
+				label: 'Style 2',
+				variants: [],
+				type: 'class',
+			},
+		};
+
+		jest.mocked( getElementStyles ).mockImplementation( ( elementId ) => {
+			return elementId === 'test-element-id' ? styles : null;
+		} );
+
+		// Act.
+		const elementStyle = elementsStylesProvider.actions.getById( 'style-2', { elementId: 'test-element-id' } );
+
+		// Assert.
+		expect( elementStyle ).toStrictEqual( styles[ 'style-2' ] );
+	} );
+
+	it( 'should throw when trying to get a style by id without passing an element id', () => {
+		// Act & Assert.
+		expect( () => elementsStylesProvider.actions.getById( 'style', { notElementId: 'test-value' } ) ).toThrow(
+			new InvalidElementsStyleProviderMetaError()
+		);
+	} );
+
+	it.each( [
+		{ elementsMeta: { notElementId: 'test-value' } },
+		{ elementsMeta: { elementId: 123 } },
+		{ elementsMeta: { elementId: null } },
+		{ elementsMeta: { elementId: '' } },
+		{ elementsMeta: { elementId: {} } },
+	] )( 'should throw when updating props with invalid elements meta', ( { elementsMeta } ) => {
+		// Act & Assert.
+		expect( () =>
+			elementsStylesProvider.actions.updateProps(
+				{
+					id: 'test-id',
+					meta: {
+						breakpoint: null,
+						state: null,
+					},
+					props: {
+						prop: 'value',
+					},
+				},
+				elementsMeta
+			)
+		).toThrow( new InvalidElementsStyleProviderMetaError() );
+	} );
 } );

package/src/element-base-styles-provider.ts

@@ -6,7 +6,7 @@ const ELEMENTS_BASE_STYLES_PROVIDER_KEY = 'element-base-styles';
 
 export const elementBaseStylesProvider: StylesProvider = {
 	key: ELEMENTS_BASE_STYLES_PROVIDER_KEY,
-	priority: 60,
+	priority: 10,
 	actions: {
 		get: () => {
 			const widgetsCache = getWidgetsCache();

package/src/elements-styles-provider.ts

@@ -1,28 +1,55 @@
-import { ELEMENT_STYLE_CHANGE_EVENT, getElements } from '@elementor/editor-elements';
-import { __privateListenTo as listenTo, commandEndEvent, windowEvent } from '@elementor/editor-v1-adapters';
+import { getElements, getElementStyles, styleRerenderEvents, updateElementStyle } from '@elementor/editor-elements';
+import { __privateListenTo as listenTo } from '@elementor/editor-v1-adapters';
 
+import { InvalidElementsStyleProviderMetaError } from './errors';
 import { type StylesProvider } from './utils/create-styles-repository';
 
 export const ELEMENTS_STYLES_PROVIDER_KEY = 'elements';
 
-export const elementsStylesProvider: StylesProvider = {
+export const elementsStylesProvider = {
 	key: ELEMENTS_STYLES_PROVIDER_KEY,
 	priority: 50,
 	actions: {
 		get: ( meta = {} ) => {
 			let elements = getElements();
 
-			if ( 'elementId' in meta && meta.elementId ) {
+			if ( isValidElementsMeta( meta ) ) {
 				elements = elements.filter( ( element ) => element.id === meta.elementId );
 			}
 
 			return elements.flatMap( ( element ) => Object.values( element.model.get( 'styles' ) ?? {} ) );
 		},
+
+		getById: ( id, meta = {} ) => {
+			if ( ! isValidElementsMeta( meta ) ) {
+				throw new InvalidElementsStyleProviderMetaError( { context: { meta } } );
+			}
+
+			const styles = getElementStyles( meta.elementId ) ?? {};
+
+			return styles[ id ] ?? null;
+		},
+
+		updateProps: ( args, meta = {} ) => {
+			if ( ! isValidElementsMeta( meta ) ) {
+				throw new InvalidElementsStyleProviderMetaError( { context: { meta } } );
+			}
+
+			updateElementStyle( {
+				elementId: meta.elementId,
+				styleId: args.id,
+				meta: args.meta,
+				props: args.props,
+			} );
+		},
 	},
-	subscribe: ( cb ) => {
-		return listenTo(
-			[ commandEndEvent( 'editor/documents/attach-preview' ), windowEvent( ELEMENT_STYLE_CHANGE_EVENT ) ],
-			cb
-		);
-	},
+	subscribe: ( cb ) => listenTo( styleRerenderEvents, cb ),
+} satisfies StylesProvider;
+
+type ElementsMeta = {
+	elementId: string;
 };
+
+function isValidElementsMeta( meta: Record< string, unknown > ): meta is ElementsMeta {
+	return 'elementId' in meta && typeof meta.elementId === 'string' && !! meta.elementId;
+}

package/src/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const InvalidElementsStyleProviderMetaError = createError< { meta: Record< string, unknown > } >( {
+	code: 'invalid_elements_style_provider_meta',
+	message: 'Invalid elements style provider meta.',
+} );

package/src/hooks/{use-all-styles-by-provider.ts → use-providers.ts}

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

package/src/index.ts

@@ -1,12 +1,12 @@
 export {
 	type StylesProvider,
 	type CreateActionPayload,
-	type GetActionPayload,
 	type UpdateActionPayload,
+	type Meta,
 } from './utils/create-styles-repository';
 
 export { stylesRepository } from './styles-repository';
-export { useAllStylesByProvider } from './hooks/use-all-styles-by-provider';
+export { useProviders } from './hooks/use-providers';
 export { useCreateActionsByProvider } from './hooks/use-create-actions-by-provider';
 
 export { ELEMENTS_STYLES_PROVIDER_KEY } from './elements-styles-provider';

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

@@ -5,7 +5,6 @@ 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 get all the style defs from all providers ordered by priority', () => {
@@ -19,20 +18,6 @@ describe( 'createStylesRepository', () => {
 		expect( repo.all() ).toEqual( [ styleDef2, styleDef1 ] );
 	} );
 
-	it( 'should get all the style defs grouped by providers', () => {
-		// Arrange
-		const repo = createStylesRepository();
-
-		repo.register( createMockProvider( 'mock1', 10, [ styleDef1 ] ).provider );
-		repo.register( createMockProvider( 'mock2', 20, [ styleDef2, styleDef3 ] ).provider );
-
-		// Assert
-		expect( repo.allByProvider() ).toEqual( [
-			[ expect.objectContaining( { key: 'mock2' } ), [ styleDef2, styleDef3 ] ],
-			[ expect.objectContaining( { key: 'mock1' } ), [ styleDef1 ] ],
-		] );
-	} );
-
 	it( 'should subscribe and unsubscribe to all style providers', () => {
 		// Arrange
 		const repo = createStylesRepository();

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

@@ -1,18 +1,28 @@
-import { type StyleDefinition } from '@elementor/editor-styles';
+import { type Props } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionVariant } from '@elementor/editor-styles';
 
 export type MakeOptional< T, K extends keyof T > = Omit< T, K > & Partial< T >;
 
-export type GetActionPayload = Record< string, unknown >;
 export type CreateActionPayload = MakeOptional< StyleDefinition, 'id' | 'type' | 'variants' >;
 export type UpdateActionPayload = MakeOptional< StyleDefinition, 'label' | 'variants' | 'type' >;
 
+export type UpdatePropsActionPayload = {
+	id: StyleDefinitionID;
+	meta: StyleDefinitionVariant[ 'meta' ];
+	props: Props;
+};
+
+export type Meta = Record< string, unknown >;
+
 export type StylesProvider = {
 	key: string;
 	priority: number;
 	actions: {
-		get: ( meta?: GetActionPayload ) => StyleDefinition[];
+		get: ( meta?: Meta ) => StyleDefinition[];
+		getById?: ( id: StyleDefinitionID, meta?: Meta ) => StyleDefinition | null;
 		create?: ( data: CreateActionPayload ) => Promise< StyleDefinition >;
 		update?: ( data: UpdateActionPayload ) => Promise< StyleDefinition >;
+		updateProps?: ( args: UpdatePropsActionPayload, meta?: Meta ) => void;
 	};
 	subscribe: ( callback: () => void ) => () => void;
 	labels?: {
@@ -32,11 +42,7 @@ export const createStylesRepository = () => {
 		providers.push( provider );
 	};
 
-	const allByProvider = ( meta: GetActionPayload = {} ) => {
-		return getProviders().map( ( provider ) => [ provider, provider.actions.get( meta ) ] as const );
-	};
-
-	const all = ( meta: GetActionPayload = {} ) => {
+	const all = ( meta: Meta = {} ) => {
 		return getProviders().flatMap( ( provider ) => provider.actions.get( meta ) );
 	};
 
@@ -56,7 +62,6 @@ export const createStylesRepository = () => {
 
 	return {
 		all,
-		allByProvider,
 		register,
 		subscribe,
 		getProviders,