@elementor/editor-canvas 3.35.0-418 → 3.35.0-420

package/dist/index.d.mts

@@ -19,6 +19,8 @@ type DomRenderer = {
     render: TwingEnvironment['render'];
 };
 
+type RenderContext<T = unknown> = Record<string, T>;
+type NamespacedRenderContext<T = RenderContext> = Record<string, T | undefined>;
 type LegacyWindow = Window & {
     elementor: {
         createBackboneElementsCollection: (children: unknown) => BackboneCollection<ElementModel>;
@@ -61,6 +63,7 @@ declare class ElementView {
     children: {
         length: number;
         findByIndex: (index: number) => ElementView;
+        each: (callback: (view: ElementView) => void) => void;
     };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
@@ -87,11 +90,16 @@ declare class ElementView {
     _isRendering: boolean;
     resetChildViewContainer(): void;
     isRendered: boolean;
+    _currentRenderPromise?: Promise<void>;
     options?: {
         model: BackboneModel<ElementModel>;
     };
     ui(): Record<string, unknown>;
     events(): Record<string, unknown>;
+    _parent?: ElementView;
+    getRenderContext(): NamespacedRenderContext | undefined;
+    getResolverRenderContext(): RenderContext | undefined;
+    getNamespaceKey(): string;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;
@@ -157,21 +165,12 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-declare class RenderContext<TContext extends Record<string, unknown>> {
-    private key;
-    private context;
-    constructor(key: string, initialContext: TContext);
-    get(): TContext;
-    set(context: TContext): void;
-    update(updates: TContext): void;
-    delete(): void;
-    clear(): void;
-}
-
-type UnbrandedTransformer<TValue> = (value: TValue, options: {
+type TransformerOptions<TContext extends RenderContext = RenderContext> = {
     key: string;
     signal?: AbortSignal;
-}) => unknown;
+    renderContext?: TContext;
+};
+type UnbrandedTransformer<TValue> = (value: TValue, options: TransformerOptions) => unknown;
 type Transformer<TValue> = UnbrandedTransformer<TValue> & {
     __transformer: true;
 };
@@ -199,10 +198,11 @@ type ResolveArgs = {
     props: Props;
     schema?: PropsSchema;
     signal?: AbortSignal;
+    renderContext?: RenderContext;
 };
 type ResolvedProps = Record<string, unknown>;
 type PropsResolver = ReturnType<typeof createPropsResolver>;
-declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal }: ResolveArgs) => Promise<ResolvedProps>;
+declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal, renderContext }: ResolveArgs) => Promise<ResolvedProps>;
 
 declare const settingsTransformersRegistry: {
     register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
@@ -264,4 +264,4 @@ declare const UnknownStyleStateError: {
     isError(error: unknown): error is Error;
 };
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, isAtomicWidget, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, isAtomicWidget, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -19,6 +19,8 @@ type DomRenderer = {
     render: TwingEnvironment['render'];
 };
 
+type RenderContext<T = unknown> = Record<string, T>;
+type NamespacedRenderContext<T = RenderContext> = Record<string, T | undefined>;
 type LegacyWindow = Window & {
     elementor: {
         createBackboneElementsCollection: (children: unknown) => BackboneCollection<ElementModel>;
@@ -61,6 +63,7 @@ declare class ElementView {
     children: {
         length: number;
         findByIndex: (index: number) => ElementView;
+        each: (callback: (view: ElementView) => void) => void;
     };
     constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
@@ -87,11 +90,16 @@ declare class ElementView {
     _isRendering: boolean;
     resetChildViewContainer(): void;
     isRendered: boolean;
+    _currentRenderPromise?: Promise<void>;
     options?: {
         model: BackboneModel<ElementModel>;
     };
     ui(): Record<string, unknown>;
     events(): Record<string, unknown>;
+    _parent?: ElementView;
+    getRenderContext(): NamespacedRenderContext | undefined;
+    getResolverRenderContext(): RenderContext | undefined;
+    getNamespaceKey(): string;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;
@@ -157,21 +165,12 @@ type ElementLegacyType = {
 };
 declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-declare class RenderContext<TContext extends Record<string, unknown>> {
-    private key;
-    private context;
-    constructor(key: string, initialContext: TContext);
-    get(): TContext;
-    set(context: TContext): void;
-    update(updates: TContext): void;
-    delete(): void;
-    clear(): void;
-}
-
-type UnbrandedTransformer<TValue> = (value: TValue, options: {
+type TransformerOptions<TContext extends RenderContext = RenderContext> = {
     key: string;
     signal?: AbortSignal;
-}) => unknown;
+    renderContext?: TContext;
+};
+type UnbrandedTransformer<TValue> = (value: TValue, options: TransformerOptions) => unknown;
 type Transformer<TValue> = UnbrandedTransformer<TValue> & {
     __transformer: true;
 };
@@ -199,10 +198,11 @@ type ResolveArgs = {
     props: Props;
     schema?: PropsSchema;
     signal?: AbortSignal;
+    renderContext?: RenderContext;
 };
 type ResolvedProps = Record<string, unknown>;
 type PropsResolver = ReturnType<typeof createPropsResolver>;
-declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal }: ResolveArgs) => Promise<ResolvedProps>;
+declare function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs): ({ props, schema, signal, renderContext }: ResolveArgs) => Promise<ResolvedProps>;
 
 declare const settingsTransformersRegistry: {
     register(type: _elementor_editor_props.PropTypeKey, transformer: AnyTransformer): /*elided*/ any;
@@ -264,4 +264,4 @@ declare const UnknownStyleStateError: {
     isError(error: unknown): error is Error;
 };
 
-export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type PropsResolver, RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, isAtomicWidget, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type AnyTransformer, BREAKPOINTS_SCHEMA_URI, type BackboneModel, type BackboneModelConstructor, type CreateTemplatedElementTypeOptions, DOCUMENT_STRUCTURE_URI, type ElementModel, ElementType, ElementView, type LegacyWindow, type NamespacedRenderContext, type PropsResolver, type RenderContext, type ReplacementSettings, STYLE_SCHEMA_URI, type TransformerOptions, UnknownStyleStateError, UnknownStyleTypeError, WIDGET_SCHEMA_URI, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, getCanvasIframeDocument, init, isAtomicWidget, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -32,7 +32,6 @@ var index_exports = {};
 __export(index_exports, {
   BREAKPOINTS_SCHEMA_URI: () => BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI: () => DOCUMENT_STRUCTURE_URI,
-  RenderContext: () => RenderContext,
   STYLE_SCHEMA_URI: () => STYLE_SCHEMA_URI,
   UnknownStyleStateError: () => UnknownStyleStateError,
   UnknownStyleTypeError: () => UnknownStyleTypeError,
@@ -673,12 +672,12 @@ var getMultiPropsValue = (multiProps) => {
 // src/renderers/create-props-resolver.ts
 var TRANSFORM_DEPTH_LIMIT = 3;
 function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema: schema2, signal }) {
+  async function resolve({ props, schema: schema2, signal, renderContext }) {
     schema2 = schema2 ?? initialSchema;
     const promises = Promise.all(
       Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
-        const transformed = await transform({ value, key, type, signal });
+        const transformed = await transform({ value, key, type, signal, renderContext });
         onPropResolve?.({ key, value: transformed });
         if (isMultiProps(transformed)) {
           return getMultiPropsValue(transformed);
@@ -688,7 +687,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     );
     return Object.assign({}, ...(await promises).filter(Boolean));
   }
-  async function transform({ value, key, type, signal, depth = 0 }) {
+  async function transform({ value, key, type, signal, depth = 0, renderContext }) {
     if (value === null || value === void 0) {
       return null;
     }
@@ -721,13 +720,21 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       resolvedValue = await resolve({
         props: resolvedValue,
         schema: transformablePropType.shape,
-        signal
+        signal,
+        renderContext
       });
     }
     if (transformablePropType.kind === "array") {
       resolvedValue = await Promise.all(
         resolvedValue.map(
-          (item) => transform({ value: item, key, type: transformablePropType.item_prop_type, depth, signal })
+          (item) => transform({
+            value: item,
+            key,
+            type: transformablePropType.item_prop_type,
+            depth,
+            signal,
+            renderContext
+          })
         )
       );
     }
@@ -736,8 +743,8 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       return null;
     }
     try {
-      const transformed = await transformer(resolvedValue, { key, signal });
-      return transform({ value: transformed, key, type, signal, depth: depth + 1 });
+      const transformed = await transformer(resolvedValue, { key, signal, renderContext });
+      return transform({ value: transformed, key, type, signal, depth: depth + 1, renderContext });
     } catch {
       return null;
     }
@@ -1581,22 +1588,45 @@ function createTemplatedElementView({
   });
   return class extends BaseView {
     #abortController = null;
+    #childrenRenderPromises = [];
     getTemplateType() {
       return "twig";
     }
+    getNamespaceKey() {
+      return type;
+    }
     renderOnChange() {
       this.render();
     }
+    getRenderContext() {
+      return this._parent?.getRenderContext?.();
+    }
+    getResolverRenderContext() {
+      return this._parent?.getResolverRenderContext?.();
+    }
     // Override `render` function to support async `_renderTemplate`
     // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
     render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => {
-        this._renderChildren();
-        this._afterRender();
+      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
+      this._currentRenderPromise = process.execute();
+      return this._currentRenderPromise;
+    }
+    async _renderChildren() {
+      super._renderChildren();
+      this.#childrenRenderPromises = [];
+      this.children?.each((childView) => {
+        if (childView._currentRenderPromise) {
+          this.#childrenRenderPromises.push(childView._currentRenderPromise);
+        }
       });
-      return process.execute();
+      await this._waitForChildrenToComplete();
+    }
+    async _waitForChildrenToComplete() {
+      if (this.#childrenRenderPromises.length > 0) {
+        await Promise.all(this.#childrenRenderPromises);
+      }
     }
     // Overriding Marionette original `_renderTemplate` method to inject our renderer.
     async _renderTemplate() {
@@ -1605,7 +1635,8 @@ function createTemplatedElementView({
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
-          signal
+          signal,
+          renderContext: this.getResolverRenderContext()
         });
       }).then((settings) => {
         return this.afterSettingsResolve(settings);
@@ -3617,35 +3648,6 @@ function init() {
   );
 }
 
-// src/renderers/render-context.ts
-var RenderContext = class {
-  key;
-  context = /* @__PURE__ */ new Map();
-  constructor(key, initialContext) {
-    this.key = key;
-    this.context.set(this.key, initialContext);
-  }
-  get() {
-    return this.context.get(this.key);
-  }
-  set(context) {
-    this.context.set(this.key, context);
-  }
-  update(updates) {
-    const currentContext = this.context.get(this.key);
-    if (!currentContext) {
-      return this.set(updates);
-    }
-    this.context.set(this.key, { ...currentContext, ...updates });
-  }
-  delete() {
-    this.context.delete(this.key);
-  }
-  clear() {
-    this.context.clear();
-  }
-};
-
 // src/sync/drag-element-from-panel.ts
 var DRAG_GROUPS = ["elementor-element"];
 var endDragElementFromPanel = () => {
@@ -3694,7 +3696,6 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 0 && (module.exports = {
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
-  RenderContext,
   STYLE_SCHEMA_URI,
   UnknownStyleStateError,
   UnknownStyleTypeError,

package/dist/index.mjs

@@ -629,12 +629,12 @@ var getMultiPropsValue = (multiProps) => {
 // src/renderers/create-props-resolver.ts
 var TRANSFORM_DEPTH_LIMIT = 3;
 function createPropsResolver({ transformers, schema: initialSchema, onPropResolve }) {
-  async function resolve({ props, schema: schema2, signal }) {
+  async function resolve({ props, schema: schema2, signal, renderContext }) {
     schema2 = schema2 ?? initialSchema;
     const promises = Promise.all(
       Object.entries(schema2).map(async ([key, type]) => {
         const value = props[key] ?? type.default;
-        const transformed = await transform({ value, key, type, signal });
+        const transformed = await transform({ value, key, type, signal, renderContext });
         onPropResolve?.({ key, value: transformed });
         if (isMultiProps(transformed)) {
           return getMultiPropsValue(transformed);
@@ -644,7 +644,7 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
     );
     return Object.assign({}, ...(await promises).filter(Boolean));
   }
-  async function transform({ value, key, type, signal, depth = 0 }) {
+  async function transform({ value, key, type, signal, depth = 0, renderContext }) {
     if (value === null || value === void 0) {
       return null;
     }
@@ -677,13 +677,21 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       resolvedValue = await resolve({
         props: resolvedValue,
         schema: transformablePropType.shape,
-        signal
+        signal,
+        renderContext
       });
     }
     if (transformablePropType.kind === "array") {
       resolvedValue = await Promise.all(
         resolvedValue.map(
-          (item) => transform({ value: item, key, type: transformablePropType.item_prop_type, depth, signal })
+          (item) => transform({
+            value: item,
+            key,
+            type: transformablePropType.item_prop_type,
+            depth,
+            signal,
+            renderContext
+          })
         )
       );
     }
@@ -692,8 +700,8 @@ function createPropsResolver({ transformers, schema: initialSchema, onPropResolv
       return null;
     }
     try {
-      const transformed = await transformer(resolvedValue, { key, signal });
-      return transform({ value: transformed, key, type, signal, depth: depth + 1 });
+      const transformed = await transformer(resolvedValue, { key, signal, renderContext });
+      return transform({ value: transformed, key, type, signal, depth: depth + 1, renderContext });
     } catch {
       return null;
     }
@@ -1539,22 +1547,45 @@ function createTemplatedElementView({
   });
   return class extends BaseView {
     #abortController = null;
+    #childrenRenderPromises = [];
     getTemplateType() {
       return "twig";
     }
+    getNamespaceKey() {
+      return type;
+    }
     renderOnChange() {
       this.render();
     }
+    getRenderContext() {
+      return this._parent?.getRenderContext?.();
+    }
+    getResolverRenderContext() {
+      return this._parent?.getResolverRenderContext?.();
+    }
     // Override `render` function to support async `_renderTemplate`
     // Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
     render() {
       this.#abortController?.abort();
       this.#abortController = new AbortController();
-      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => {
-        this._renderChildren();
-        this._afterRender();
+      const process = signalizedProcess(this.#abortController.signal).then(() => this._beforeRender()).then(() => this._renderTemplate()).then(() => this._renderChildren()).then(() => this._afterRender());
+      this._currentRenderPromise = process.execute();
+      return this._currentRenderPromise;
+    }
+    async _renderChildren() {
+      super._renderChildren();
+      this.#childrenRenderPromises = [];
+      this.children?.each((childView) => {
+        if (childView._currentRenderPromise) {
+          this.#childrenRenderPromises.push(childView._currentRenderPromise);
+        }
       });
-      return process.execute();
+      await this._waitForChildrenToComplete();
+    }
+    async _waitForChildrenToComplete() {
+      if (this.#childrenRenderPromises.length > 0) {
+        await Promise.all(this.#childrenRenderPromises);
+      }
     }
     // Overriding Marionette original `_renderTemplate` method to inject our renderer.
     async _renderTemplate() {
@@ -1563,7 +1594,8 @@ function createTemplatedElementView({
         const settings = this.model.get("settings").toJSON();
         return resolveProps({
           props: settings,
-          signal
+          signal,
+          renderContext: this.getResolverRenderContext()
         });
       }).then((settings) => {
         return this.afterSettingsResolve(settings);
@@ -3607,35 +3639,6 @@ function init() {
   );
 }
 
-// src/renderers/render-context.ts
-var RenderContext = class {
-  key;
-  context = /* @__PURE__ */ new Map();
-  constructor(key, initialContext) {
-    this.key = key;
-    this.context.set(this.key, initialContext);
-  }
-  get() {
-    return this.context.get(this.key);
-  }
-  set(context) {
-    this.context.set(this.key, context);
-  }
-  update(updates) {
-    const currentContext = this.context.get(this.key);
-    if (!currentContext) {
-      return this.set(updates);
-    }
-    this.context.set(this.key, { ...currentContext, ...updates });
-  }
-  delete() {
-    this.context.delete(this.key);
-  }
-  clear() {
-    this.context.clear();
-  }
-};
-
 // src/sync/drag-element-from-panel.ts
 var DRAG_GROUPS = ["elementor-element"];
 var endDragElementFromPanel = () => {
@@ -3683,7 +3686,6 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 export {
   BREAKPOINTS_SCHEMA_URI,
   DOCUMENT_STRUCTURE_URI,
-  RenderContext,
   STYLE_SCHEMA_URI,
   UnknownStyleStateError,
   UnknownStyleTypeError,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.35.0-418",
+  "version": "3.35.0-420",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,24 +37,24 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-418",
-    "@elementor/editor-controls": "3.35.0-418",
-    "@elementor/editor-documents": "3.35.0-418",
-    "@elementor/editor-elements": "3.35.0-418",
-    "@elementor/editor-interactions": "3.35.0-418",
-    "@elementor/editor-mcp": "3.35.0-418",
-    "@elementor/editor-notifications": "3.35.0-418",
-    "@elementor/editor-props": "3.35.0-418",
-    "@elementor/editor-responsive": "3.35.0-418",
-    "@elementor/editor-styles": "3.35.0-418",
-    "@elementor/editor-styles-repository": "3.35.0-418",
-    "@elementor/editor-ui": "3.35.0-418",
-    "@elementor/editor-v1-adapters": "3.35.0-418",
-    "@elementor/schema": "3.35.0-418",
-    "@elementor/twing": "3.35.0-418",
+    "@elementor/editor": "3.35.0-420",
+    "@elementor/editor-controls": "3.35.0-420",
+    "@elementor/editor-documents": "3.35.0-420",
+    "@elementor/editor-elements": "3.35.0-420",
+    "@elementor/editor-interactions": "3.35.0-420",
+    "@elementor/editor-mcp": "3.35.0-420",
+    "@elementor/editor-notifications": "3.35.0-420",
+    "@elementor/editor-props": "3.35.0-420",
+    "@elementor/editor-responsive": "3.35.0-420",
+    "@elementor/editor-styles": "3.35.0-420",
+    "@elementor/editor-styles-repository": "3.35.0-420",
+    "@elementor/editor-ui": "3.35.0-420",
+    "@elementor/editor-v1-adapters": "3.35.0-420",
+    "@elementor/schema": "3.35.0-420",
+    "@elementor/twing": "3.35.0-420",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-418",
-    "@elementor/wp-media": "3.35.0-418",
+    "@elementor/utils": "3.35.0-420",
+    "@elementor/wp-media": "3.35.0-420",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/index.ts

@@ -10,7 +10,6 @@ export {
 } from './legacy/create-templated-element-type';
 export { registerElementType } from './legacy/init-legacy-views';
 export * from './legacy/types';
-export { RenderContext } from './renderers/render-context';
 export { createPropsResolver, type PropsResolver } from './renderers/create-props-resolver';
 export { settingsTransformersRegistry } from './settings-transformers-registry';
 export { styleTransformersRegistry } from './style-transformers-registry';
@@ -21,5 +20,5 @@ export { WIDGET_SCHEMA_URI } from './mcp/resources/widgets-schema-resource';
 export * from './legacy/types';
 export { createTransformer } from './transformers/create-transformer';
 export { createTransformersRegistry } from './transformers/create-transformers-registry';
-export { type AnyTransformer } from './transformers/types';
+export { type AnyTransformer, type TransformerOptions } from './transformers/types';
 export { UnknownStyleTypeError, UnknownStyleStateError } from './renderers/errors';

package/src/legacy/create-templated-element-type.ts

@@ -5,7 +5,13 @@ import { createPropsResolver } from '../renderers/create-props-resolver';
 import { settingsTransformersRegistry } from '../settings-transformers-registry';
 import { signalizedProcess } from '../utils/signalized-process';
 import { createElementViewClassDeclaration } from './create-element-type';
-import { type ElementType, type ElementView, type LegacyWindow } from './types';
+import {
+	type ElementType,
+	type ElementView,
+	type LegacyWindow,
+	type NamespacedRenderContext,
+	type RenderContext,
+} from './types';
 
 export type CreateTemplatedElementTypeOptions = {
 	type: string;
@@ -70,15 +76,28 @@ export function createTemplatedElementView( {
 
 	return class extends BaseView {
 		#abortController: AbortController | null = null;
+		#childrenRenderPromises: Promise< void >[] = [];
 
 		getTemplateType() {
 			return 'twig';
 		}
 
+		getNamespaceKey() {
+			return type;
+		}
+
 		renderOnChange() {
 			this.render();
 		}
 
+		getRenderContext(): NamespacedRenderContext | undefined {
+			return this._parent?.getRenderContext?.();
+		}
+
+		getResolverRenderContext(): RenderContext | undefined {
+			return this._parent?.getResolverRenderContext?.();
+		}
+
 		// Override `render` function to support async `_renderTemplate`
 		// Note that `_renderChildren` asynchronity is still NOT supported, so only the parent element rendering can be async
 		render() {
@@ -88,12 +107,32 @@ export function createTemplatedElementView( {
 			const process = signalizedProcess( this.#abortController.signal )
 				.then( () => this._beforeRender() )
 				.then( () => this._renderTemplate() )
-				.then( () => {
-					this._renderChildren();
-					this._afterRender();
-				} );
+				.then( () => this._renderChildren() )
+				.then( () => this._afterRender() );
+
+			this._currentRenderPromise = process.execute();
+
+			return this._currentRenderPromise;
+		}
+
+		async _renderChildren() {
+			super._renderChildren();
+
+			this.#childrenRenderPromises = [];
+
+			this.children?.each( ( childView: ElementView ) => {
+				if ( childView._currentRenderPromise ) {
+					this.#childrenRenderPromises.push( childView._currentRenderPromise );
+				}
+			} );
+
+			await this._waitForChildrenToComplete();
+		}
 
-			return process.execute();
+		async _waitForChildrenToComplete() {
+			if ( this.#childrenRenderPromises.length > 0 ) {
+				await Promise.all( this.#childrenRenderPromises );
+			}
 		}
 
 		// Overriding Marionette original `_renderTemplate` method to inject our renderer.
@@ -107,6 +146,7 @@ export function createTemplatedElementView( {
 					return resolveProps( {
 						props: settings,
 						signal,
+						renderContext: this.getResolverRenderContext(),
 					} );
 				} )
 				.then( ( settings ) => {

package/src/legacy/types.ts

@@ -1,6 +1,10 @@
 import { type V1Element } from '@elementor/editor-elements';
 import { type Props, type PropValue } from '@elementor/editor-props';
 
+export type RenderContext< T = unknown > = Record< string, T >;
+
+export type NamespacedRenderContext< T = RenderContext > = Record< string, T | undefined >;
+
 export type LegacyWindow = Window & {
 	elementor: {
 		createBackboneElementsCollection: ( children: unknown ) => BackboneCollection< ElementModel >;
@@ -50,6 +54,7 @@ export declare class ElementView {
 	children: {
 		length: number;
 		findByIndex: ( index: number ) => ElementView;
+		each: ( callback: ( view: ElementView ) => void ) => void;
 	};
 
 	constructor( ...args: unknown[] );
@@ -99,6 +104,8 @@ export declare class ElementView {
 
 	isRendered: boolean;
 
+	_currentRenderPromise?: Promise< void >;
+
 	options?: {
 		model: BackboneModel< ElementModel >;
 	};
@@ -106,6 +113,14 @@ export declare class ElementView {
 	ui(): Record< string, unknown >;
 
 	events(): Record< string, unknown >;
+
+	_parent?: ElementView;
+
+	getRenderContext(): NamespacedRenderContext | undefined;
+
+	getResolverRenderContext(): RenderContext | undefined;
+
+	getNamespaceKey(): string;
 }
 
 type JQueryElement = {

package/src/renderers/__tests__/create-props-resolver.test.ts

@@ -290,4 +290,153 @@ describe( 'createPropsResolver', () => {
 		expect( onResolve ).toHaveBeenNthCalledWith( 1, { key: 'int', value: 2 } );
 		expect( onResolve ).toHaveBeenNthCalledWith( 2, { key: 'int2', value: 4 } );
 	} );
+
+	it( 'should pass renderContext to transformers', async () => {
+		// Arrange.
+		const CONTEXT_KEY = 'test-key';
+		const CONTEXT_VALUE = 'from-context';
+
+		const transformers = createTransformersRegistry().register(
+			'context-aware',
+			createTransformer< { key: string } >( ( value, options ) => {
+				return options.renderContext?.[ value.key ] ?? 'fallback';
+			} )
+		);
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				text: createMockPropType( { kind: 'plain', key: 'context-aware' } ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				text: { $$type: 'context-aware', value: { key: CONTEXT_KEY } },
+			},
+			renderContext: { [ CONTEXT_KEY ]: CONTEXT_VALUE },
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { text: CONTEXT_VALUE } );
+	} );
+
+	it( 'should use fallback when renderContext is not provided', async () => {
+		// Arrange.
+		const transformers = createTransformersRegistry().register(
+			'context-aware',
+			createTransformer< { key: string } >( ( value, options ) => {
+				return options.renderContext?.[ value.key ] ?? 'fallback';
+			} )
+		);
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				text: createMockPropType( { kind: 'plain', key: 'context-aware' } ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				text: { $$type: 'context-aware', value: { key: 'any-key' } },
+			},
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { text: 'fallback' } );
+	} );
+
+	it( 'should propagate renderContext through nested object props', async () => {
+		// Arrange.
+		const CONTEXT_KEY = 'nested-key';
+		const CONTEXT_VALUE = 'nested-context';
+
+		const transformers = createTransformersRegistry()
+			.register(
+				'object',
+				createTransformer< unknown >( ( value ) => value )
+			)
+			.register(
+				'context-aware',
+				createTransformer< { key: string } >( ( value, options ) => {
+					return options.renderContext?.[ value.key ] ?? 'fallback';
+				} )
+			);
+
+		const nestedSchema = {
+			inner: createMockPropType( { kind: 'plain', key: 'context-aware' } ),
+		};
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				outer: createMockPropType( { kind: 'object', key: 'object', shape: nestedSchema } ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				outer: {
+					$$type: 'object',
+					value: {
+						inner: { $$type: 'context-aware', value: { key: CONTEXT_KEY } },
+					},
+				},
+			},
+			renderContext: { [ CONTEXT_KEY ]: CONTEXT_VALUE },
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { outer: { inner: CONTEXT_VALUE } } );
+	} );
+
+	it( 'should propagate renderContext through array props', async () => {
+		// Arrange.
+		const CONTEXT_KEY = 'array-key';
+		const CONTEXT_VALUE = 'array-context';
+
+		const transformers = createTransformersRegistry()
+			.register(
+				'array',
+				createTransformer< unknown >( ( value ) => value )
+			)
+			.register(
+				'context-aware',
+				createTransformer< { key: string } >( ( value, options ) => {
+					return options.renderContext?.[ value.key ] ?? 'fallback';
+				} )
+			);
+
+		const resolve = createPropsResolver( {
+			transformers,
+			schema: {
+				items: createMockPropType( {
+					kind: 'array',
+					key: 'array',
+					item_prop_type: createMockPropType( { kind: 'plain', key: 'context-aware' } ),
+				} ),
+			},
+		} );
+
+		// Act.
+		const result = await resolve( {
+			props: {
+				items: {
+					$$type: 'array',
+					value: [
+						{ $$type: 'context-aware', value: { key: CONTEXT_KEY } },
+						{ $$type: 'context-aware', value: { key: CONTEXT_KEY } },
+					],
+				},
+			},
+			renderContext: { [ CONTEXT_KEY ]: CONTEXT_VALUE },
+		} );
+
+		// Assert.
+		expect( result ).toEqual( { items: [ CONTEXT_VALUE, CONTEXT_VALUE ] } );
+	} );
 } );

package/src/renderers/create-props-resolver.ts

@@ -9,6 +9,7 @@ import {
 	type TransformablePropType,
 } from '@elementor/editor-props';
 
+import { type RenderContext } from '../legacy/types';
 import { type TransformersRegistry } from '../transformers/create-transformers-registry';
 import { getMultiPropsValue, isMultiProps } from './multi-props';
 
@@ -22,6 +23,7 @@ type ResolveArgs = {
 	props: Props;
 	schema?: PropsSchema;
 	signal?: AbortSignal;
+	renderContext?: RenderContext;
 };
 
 type TransformArgs = {
@@ -30,6 +32,7 @@ type TransformArgs = {
 	type: PropType;
 	signal?: AbortSignal;
 	depth?: number;
+	renderContext?: RenderContext;
 };
 
 type ResolvedProps = Record< string, unknown >;
@@ -39,14 +42,14 @@ export type PropsResolver = ReturnType< typeof createPropsResolver >;
 const TRANSFORM_DEPTH_LIMIT = 3;
 
 export function createPropsResolver( { transformers, schema: initialSchema, onPropResolve }: CreatePropResolverArgs ) {
-	async function resolve( { props, schema, signal }: ResolveArgs ): Promise< ResolvedProps > {
+	async function resolve( { props, schema, signal, renderContext }: ResolveArgs ): Promise< ResolvedProps > {
 		schema = schema ?? initialSchema;
 
 		const promises = Promise.all(
 			Object.entries( schema ).map( async ( [ key, type ] ) => {
 				const value = props[ key ] ?? type.default;
 
-				const transformed = ( await transform( { value, key, type, signal } ) ) as PropValue;
+				const transformed = ( await transform( { value, key, type, signal, renderContext } ) ) as PropValue;
 
 				onPropResolve?.( { key, value: transformed } );
 
@@ -61,7 +64,7 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 		return Object.assign( {}, ...( await promises ).filter( Boolean ) );
 	}
 
-	async function transform( { value, key, type, signal, depth = 0 }: TransformArgs ) {
+	async function transform( { value, key, type, signal, depth = 0, renderContext }: TransformArgs ) {
 		if ( value === null || value === undefined ) {
 			return null;
 		}
@@ -108,13 +111,21 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 				props: resolvedValue,
 				schema: transformablePropType.shape,
 				signal,
+				renderContext,
 			} );
 		}
 
 		if ( transformablePropType.kind === 'array' ) {
 			resolvedValue = await Promise.all(
 				resolvedValue.map( ( item: PropValue ) =>
-					transform( { value: item, key, type: transformablePropType.item_prop_type, depth, signal } )
+					transform( {
+						value: item,
+						key,
+						type: transformablePropType.item_prop_type,
+						depth,
+						signal,
+						renderContext,
+					} )
 				)
 			);
 		}
@@ -126,9 +137,9 @@ export function createPropsResolver( { transformers, schema: initialSchema, onPr
 		}
 
 		try {
-			const transformed = await transformer( resolvedValue, { key, signal } );
+			const transformed = await transformer( resolvedValue, { key, signal, renderContext } );
 
-			return transform( { value: transformed, key, type, signal, depth: depth + 1 } );
+			return transform( { value: transformed, key, type, signal, depth: depth + 1, renderContext } );
 		} catch {
 			return null;
 		}

package/src/transformers/types.ts

@@ -1,10 +1,12 @@
-export type UnbrandedTransformer< TValue > = (
-	value: TValue,
-	options: {
-		key: string;
-		signal?: AbortSignal;
-	}
-) => unknown;
+import { type RenderContext } from '../legacy/types';
+
+export type TransformerOptions< TContext extends RenderContext = RenderContext > = {
+	key: string;
+	signal?: AbortSignal;
+	renderContext?: TContext;
+};
+
+export type UnbrandedTransformer< TValue > = ( value: TValue, options: TransformerOptions ) => unknown;
 
 export type Transformer< TValue > = UnbrandedTransformer< TValue > & {
 	__transformer: true;

package/src/renderers/render-context.ts

@@ -1,35 +0,0 @@
-export class RenderContext< TContext extends Record< string, unknown > > {
-	private key: string;
-	private context = new Map< string, TContext >();
-
-	public constructor( key: string, initialContext: TContext ) {
-		this.key = key;
-		this.context.set( this.key, initialContext );
-	}
-
-	public get(): TContext {
-		return this.context.get( this.key ) as TContext;
-	}
-
-	public set( context: TContext ) {
-		this.context.set( this.key, context );
-	}
-
-	public update( updates: TContext ) {
-		const currentContext = this.context.get( this.key );
-
-		if ( ! currentContext ) {
-			return this.set( updates );
-		}
-
-		this.context.set( this.key, { ...currentContext, ...updates } );
-	}
-
-	public delete() {
-		this.context.delete( this.key );
-	}
-
-	public clear() {
-		this.context.clear();
-	}
-}