@elementor/frontend-handlers 3.35.0-425 → 3.35.0-427

package/dist/index.js

@@ -69,12 +69,12 @@ var unregisterBySelector = ({ selector, id }) => {
     return;
   }
   if (id) {
-    elementTypeHandlers.get(selector)?.delete(id);
-    if (elementTypeHandlers.get(selector)?.size === 0) {
-      elementTypeHandlers.delete(selector);
+    elementSelectorHandlers.get(selector)?.delete(id);
+    if (elementSelectorHandlers.get(selector)?.size === 0) {
+      elementSelectorHandlers.delete(selector);
     }
   } else {
-    elementTypeHandlers.delete(selector);
+    elementSelectorHandlers.delete(selector);
   }
 };
 
@@ -90,6 +90,7 @@ var onElementRender = ({
   const controller = new AbortController();
   const manualUnmount = [];
   const dispatchRenderedEvent = () => {
+    onElementSelectorRender({ element, elementId, controller });
     element.dispatchEvent(
       new CustomEvent(ELEMENT_RENDERED_EVENT_NAME, {
         bubbles: true,
@@ -167,8 +168,11 @@ var onElementSelectorRender = ({
         manualUnmount.push(unmount);
       }
     });
-    if (!unmountElementSelectorCallbacks.has(elementId)) {
-      unmountElementTypeCallbacks.set(elementId, /* @__PURE__ */ new Map());
+    if (!manualUnmount.length) {
+      return;
+    }
+    if (!unmountElementSelectorCallbacks.get(elementId)) {
+      unmountElementSelectorCallbacks.set(elementId, /* @__PURE__ */ new Map());
     }
     unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
       controller.abort();
@@ -178,14 +182,23 @@ var onElementSelectorRender = ({
 };
 var onElementDestroy = ({ elementType, elementId }) => {
   const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
-  if (!unmount) {
-    return;
+  const unmountSelector = unmountElementSelectorCallbacks.get(elementId);
+  if (unmount) {
+    unmount();
+  }
+  if (unmountSelector?.size) {
+    Array.from(unmountSelector.values()).forEach((selectorUnmount) => {
+      selectorUnmount();
+    });
   }
-  unmount();
   unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
+  unmountElementSelectorCallbacks.delete(elementId);
   if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
     unmountElementTypeCallbacks.delete(elementType);
   }
+  if (unmountElementSelectorCallbacks.size === 0) {
+    unmountElementSelectorCallbacks.delete(elementId);
+  }
 };
 
 // src/init.ts
@@ -202,7 +215,6 @@ function init() {
     onElementDestroy({ elementType: type, elementId: id });
   });
   document.addEventListener("DOMContentLoaded", () => {
-    const controller = new AbortController();
     document.querySelectorAll("[data-e-type]").forEach((element) => {
       const el = element;
       const { eType, id } = el.dataset;
@@ -219,17 +231,6 @@ function init() {
         })
       );
     });
-    Array.from(elementSelectorHandlers.keys()).forEach((selector) => {
-      Array.from(document.querySelectorAll(selector)).forEach((element) => {
-        const el = element;
-        const elementId = el?.closest("[data-id]")?.getAttribute("data-id") ?? "";
-        onElementSelectorRender({
-          element,
-          controller,
-          elementId
-        });
-      });
-    });
   });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -39,12 +39,12 @@ var unregisterBySelector = ({ selector, id }) => {
     return;
   }
   if (id) {
-    elementTypeHandlers.get(selector)?.delete(id);
-    if (elementTypeHandlers.get(selector)?.size === 0) {
-      elementTypeHandlers.delete(selector);
+    elementSelectorHandlers.get(selector)?.delete(id);
+    if (elementSelectorHandlers.get(selector)?.size === 0) {
+      elementSelectorHandlers.delete(selector);
     }
   } else {
-    elementTypeHandlers.delete(selector);
+    elementSelectorHandlers.delete(selector);
   }
 };
 
@@ -60,6 +60,7 @@ var onElementRender = ({
   const controller = new AbortController();
   const manualUnmount = [];
   const dispatchRenderedEvent = () => {
+    onElementSelectorRender({ element, elementId, controller });
     element.dispatchEvent(
       new CustomEvent(ELEMENT_RENDERED_EVENT_NAME, {
         bubbles: true,
@@ -137,8 +138,11 @@ var onElementSelectorRender = ({
         manualUnmount.push(unmount);
       }
     });
-    if (!unmountElementSelectorCallbacks.has(elementId)) {
-      unmountElementTypeCallbacks.set(elementId, /* @__PURE__ */ new Map());
+    if (!manualUnmount.length) {
+      return;
+    }
+    if (!unmountElementSelectorCallbacks.get(elementId)) {
+      unmountElementSelectorCallbacks.set(elementId, /* @__PURE__ */ new Map());
     }
     unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
       controller.abort();
@@ -148,14 +152,23 @@ var onElementSelectorRender = ({
 };
 var onElementDestroy = ({ elementType, elementId }) => {
   const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
-  if (!unmount) {
-    return;
+  const unmountSelector = unmountElementSelectorCallbacks.get(elementId);
+  if (unmount) {
+    unmount();
+  }
+  if (unmountSelector?.size) {
+    Array.from(unmountSelector.values()).forEach((selectorUnmount) => {
+      selectorUnmount();
+    });
   }
-  unmount();
   unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
+  unmountElementSelectorCallbacks.delete(elementId);
   if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
     unmountElementTypeCallbacks.delete(elementType);
   }
+  if (unmountElementSelectorCallbacks.size === 0) {
+    unmountElementSelectorCallbacks.delete(elementId);
+  }
 };
 
 // src/init.ts
@@ -172,7 +185,6 @@ function init() {
     onElementDestroy({ elementType: type, elementId: id });
   });
   document.addEventListener("DOMContentLoaded", () => {
-    const controller = new AbortController();
     document.querySelectorAll("[data-e-type]").forEach((element) => {
       const el = element;
       const { eType, id } = el.dataset;
@@ -189,17 +201,6 @@ function init() {
         })
       );
     });
-    Array.from(elementSelectorHandlers.keys()).forEach((selector) => {
-      Array.from(document.querySelectorAll(selector)).forEach((element) => {
-        const el = element;
-        const elementId = el?.closest("[data-id]")?.getAttribute("data-id") ?? "";
-        onElementSelectorRender({
-          element,
-          controller,
-          elementId
-        });
-      });
-    });
   });
 }
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/frontend-handlers",
   "description": "Elementor Frontend Handlers",
-  "version": "3.35.0-425",
+  "version": "3.35.0-427",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",

package/src/__tests__/index.test.ts

@@ -1,20 +1,35 @@
-import { elementTypeHandlers } from '../handlers-registry';
-import { init, register, unregister } from '../index';
+import { init, register, registerBySelector, unregister, unregisterBySelector } from '../index';
 
 describe( 'Frontend Handlers', () => {
 	const PARENT_ELEMENT_TYPE = 'e-parent-element';
 	const CHILD_ELEMENT_TYPE = 'e-child-element';
 	const WIDGET_ELEMENT_TYPE = 'e-widget';
+	const ELEMENT_CLASS = 'selector-target';
+	const SELECTOR_TARGET = `.${ ELEMENT_CLASS }`;
+	const HANDLER_IDS = {
+		handler_1: 'handler-1',
+		handler_2: 'handler-2',
+		parent_handler: 'parent-handler',
+	};
 
 	beforeAll( () => {
 		init();
 	} );
 
 	beforeEach( () => {
-		elementTypeHandlers.clear();
 		document.body.innerHTML = '';
 	} );
 
+	afterEach( () => {
+		[ WIDGET_ELEMENT_TYPE, PARENT_ELEMENT_TYPE, CHILD_ELEMENT_TYPE ].forEach( ( elementType ) => {
+			unregister( { elementType } );
+		} );
+
+		Object.values( HANDLER_IDS ).forEach( ( handler ) => {
+			unregisterBySelector( { selector: SELECTOR_TARGET, id: handler } );
+		} );
+	} );
+
 	describe( 'Handler Registration', () => {
 		it( 'should register and execute handler callback', () => {
 			// Arrange
@@ -57,13 +72,13 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'handler-1',
+				id: HANDLER_IDS.handler_1,
 				callback: handler1,
 			} );
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'handler-2',
+				id: HANDLER_IDS.handler_2,
 				callback: handler2,
 			} );
 
@@ -91,11 +106,11 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: handlerCallback,
 			} );
 
-			unregister( { elementType: WIDGET_ELEMENT_TYPE, id: 'widget-handler' } );
+			unregister( { elementType: WIDGET_ELEMENT_TYPE, id: HANDLER_IDS.handler_1 } );
 
 			const element = document.createElement( 'div' );
 			element.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
@@ -123,7 +138,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: handlerCallback,
 			} );
 
@@ -157,7 +172,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: ( { settings } ) => {
 					settingsHistory.push( { ...settings } );
 					return undefined;
@@ -193,6 +208,37 @@ describe( 'Frontend Handlers', () => {
 	} );
 
 	describe( 'Cleanup and Unmount', () => {
+		it( 'should call selector unmount callback when element is destroyed', () => {
+			const ELEMENT_ID = 'selector-1';
+			const unmountSelector = jest.fn();
+
+			registerBySelector( {
+				selector: SELECTOR_TARGET,
+				id: HANDLER_IDS.handler_1,
+				callback: () => unmountSelector,
+			} );
+
+			const element = document.createElement( 'div' );
+			element.classList.add( ELEMENT_CLASS );
+			element.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
+			element.setAttribute( 'data-id', ELEMENT_ID );
+			document.body.appendChild( element );
+
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/render', {
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE, element },
+				} )
+			);
+
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/destroy', {
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE },
+				} )
+			);
+
+			expect( unmountSelector ).toHaveBeenCalledTimes( 1 );
+		} );
+
 		it( 'should call unmount callback when element is destroyed', () => {
 			// Arrange
 			const ELEMENT_ID = 'element-1';
@@ -200,7 +246,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: () => unmountCallback,
 			} );
 
@@ -233,7 +279,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: () => {
 					lifecycleEvents.push( 'init' );
 					return () => {
@@ -279,7 +325,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: ( { signal } ) => {
 					receivedSignal = signal;
 					return undefined;
@@ -310,7 +356,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: ( { signal } ) => {
 					signal.addEventListener( 'abort', () => {
 						signalAborted = true;
@@ -351,7 +397,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: PARENT_ELEMENT_TYPE,
-				id: 'parent-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: ( { listenToChildren } ) => {
 					listenToChildren( [ CHILD_ELEMENT_TYPE ] ).render( childRenderCallback );
 					return undefined;
@@ -394,7 +440,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: PARENT_ELEMENT_TYPE,
-				id: 'parent-handler',
+				id: HANDLER_IDS.parent_handler,
 				callback: ( { listenToChildren } ) => {
 					listenToChildren( [ CHILD_ELEMENT_TYPE ] ).render( childRenderCallback );
 					return undefined;
@@ -436,7 +482,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: PARENT_ELEMENT_TYPE,
-				id: 'parent-handler',
+				id: HANDLER_IDS.parent_handler,
 				callback: ( { listenToChildren } ) => {
 					listenToChildren( [ CHILD_ELEMENT_TYPE ] ).render( childRenderCallback );
 					return undefined;
@@ -490,7 +536,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: PARENT_ELEMENT_TYPE,
-				id: 'parent-handler',
+				id: HANDLER_IDS.parent_handler,
 				callback: ( { element, listenToChildren } ) => {
 					const parentId = element.getAttribute( 'data-id' ) || 'unknown';
 					callbackCounts.set( parentId, 0 );
@@ -543,16 +589,70 @@ describe( 'Frontend Handlers', () => {
 	} );
 
 	describe( 'DOMContentLoaded Initialization', () => {
-		it( 'should initialize all existing elements on page load', () => {
+		it( 'should skip selector initialization on page load when in editor', () => {
 			// Arrange
-			elementTypeHandlers.clear();
-			document.body.innerHTML = '';
+			const ELEMENT_ID = 'element-1';
+			const selectorHandler = jest.fn();
+
+			registerBySelector( {
+				selector: SELECTOR_TARGET,
+				id: HANDLER_IDS.handler_1,
+				callback: selectorHandler,
+			} );
 
+			const element = document.createElement( 'div' );
+			element.classList.add( ELEMENT_CLASS );
+			element.setAttribute( 'data-id', ELEMENT_ID );
+			element.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
+			document.body.appendChild( element );
+
+			const editorWindow = window as Window & { elementor?: unknown };
+
+			editorWindow.elementor = {};
+
+			document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
+
+			expect( selectorHandler ).toHaveBeenCalledTimes( 1 );
+		} );
+
+		it( 'should initialize selector handlers on page load', () => {
+			// Arrange
+			const ELEMENT_ID = 'element-1';
+			const selectorHandler = jest.fn();
+
+			registerBySelector( {
+				selector: SELECTOR_TARGET,
+				id: HANDLER_IDS.handler_1,
+				callback: selectorHandler,
+			} );
+
+			const element = document.createElement( 'div' );
+			element.classList.add( ELEMENT_CLASS );
+			element.setAttribute( 'data-id', ELEMENT_ID );
+			element.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
+			document.body.appendChild( element );
+
+			document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
+
+			expect( selectorHandler ).toHaveBeenCalledTimes( 1 );
+			expect( selectorHandler ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					element,
+					settings: {},
+					signal: expect.any( AbortSignal ),
+				} )
+			);
+		} );
+
+		it( 'should initialize all existing elements on page load', () => {
+			// Arrange
+			const PARENT_ID = 'parent-1';
+			const WIDGET_ID = 'widget-1';
 			const initializedElements: string[] = [];
 
 			register( {
 				elementType: PARENT_ELEMENT_TYPE,
-				id: 'parent-handler',
+				id: HANDLER_IDS.parent_handler,
 				callback: ( { element } ) => {
 					const id = element.getAttribute( 'data-id' ) || 'unknown';
 					initializedElements.push( id );
@@ -562,7 +662,7 @@ describe( 'Frontend Handlers', () => {
 
 			register( {
 				elementType: WIDGET_ELEMENT_TYPE,
-				id: 'widget-handler',
+				id: HANDLER_IDS.handler_1,
 				callback: ( { element } ) => {
 					const id = element.getAttribute( 'data-id' ) || 'unknown';
 					initializedElements.push( id );
@@ -572,12 +672,12 @@ describe( 'Frontend Handlers', () => {
 
 			const parent = document.createElement( 'div' );
 			parent.setAttribute( 'data-e-type', PARENT_ELEMENT_TYPE );
-			parent.setAttribute( 'data-id', 'parent-1' );
+			parent.setAttribute( 'data-id', PARENT_ID );
 			document.body.appendChild( parent );
 
 			const widget = document.createElement( 'div' );
 			widget.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
-			widget.setAttribute( 'data-id', 'widget-1' );
+			widget.setAttribute( 'data-id', WIDGET_ID );
 			document.body.appendChild( widget );
 
 			init();
@@ -586,8 +686,8 @@ describe( 'Frontend Handlers', () => {
 			document.dispatchEvent( new Event( 'DOMContentLoaded' ) );
 
 			// Assert
-			expect( initializedElements ).toContain( 'parent-1' );
-			expect( initializedElements ).toContain( 'widget-1' );
+			expect( initializedElements ).toContain( PARENT_ID );
+			expect( initializedElements ).toContain( WIDGET_ID );
 		} );
 	} );
 } );

package/src/handlers-registry.ts

@@ -77,12 +77,12 @@ export const unregisterBySelector = ( { selector, id }: { selector: string; id?:
 	}
 
 	if ( id ) {
-		elementTypeHandlers.get( selector )?.delete( id );
+		elementSelectorHandlers.get( selector )?.delete( id );
 
-		if ( elementTypeHandlers.get( selector )?.size === 0 ) {
-			elementTypeHandlers.delete( selector );
+		if ( elementSelectorHandlers.get( selector )?.size === 0 ) {
+			elementSelectorHandlers.delete( selector );
 		}
 	} else {
-		elementTypeHandlers.delete( selector );
+		elementSelectorHandlers.delete( selector );
 	}
 };

package/src/init.ts

@@ -1,5 +1,4 @@
-import { elementSelectorHandlers } from './handlers-registry';
-import { onElementDestroy, onElementRender, onElementSelectorRender } from './lifecycle-events';
+import { onElementDestroy, onElementRender } from './lifecycle-events';
 
 export function init() {
 	window.addEventListener( 'elementor/element/render', ( _event ) => {
@@ -19,12 +18,10 @@ export function init() {
 		onElementDestroy( { elementType: type, elementId: id } );
 	} );
 
+	// 'elementor/element/render' doesn't fire on the frontend
 	document.addEventListener( 'DOMContentLoaded', () => {
-		const controller = new AbortController();
-
 		document.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {
 			const el = element as HTMLElement;
-
 			const { eType, id } = el.dataset;
 
 			if ( ! eType || ! id ) {
@@ -41,18 +38,5 @@ export function init() {
 				} )
 			);
 		} );
-
-		Array.from( elementSelectorHandlers.keys() ).forEach( ( selector ) => {
-			Array.from( document.querySelectorAll( selector ) ).forEach( ( element ) => {
-				const el = element as HTMLElement;
-				const elementId = el?.closest( '[data-id]' )?.getAttribute( 'data-id' ) ?? '';
-
-				onElementSelectorRender( {
-					element,
-					controller,
-					elementId,
-				} );
-			} );
-		} );
 	} );
 }

package/src/lifecycle-events.ts

@@ -18,6 +18,8 @@ export const onElementRender = ( {
 	const manualUnmount: ( () => void )[] = [];
 
 	const dispatchRenderedEvent = () => {
+		onElementSelectorRender( { element, elementId, controller } );
+
 		element.dispatchEvent(
 			new CustomEvent( ELEMENT_RENDERED_EVENT_NAME, {
 				bubbles: true,
@@ -30,7 +32,7 @@ export const onElementRender = ( {
 		);
 	};
 
-	// When the rendered event is dispatched, the element is not yet connected to the DOM (marrionet view case)
+	// When the rendered event is dispatched, the element is not yet connected to the DOM (marionette view case)
 	if ( ! element.isConnected ) {
 		requestAnimationFrame( () => {
 			dispatchRenderedEvent();
@@ -117,8 +119,12 @@ export const onElementSelectorRender = ( {
 			}
 		} );
 
-		if ( ! unmountElementSelectorCallbacks.has( elementId ) ) {
-			unmountElementTypeCallbacks.set( elementId, new Map() );
+		if ( ! manualUnmount.length ) {
+			return;
+		}
+
+		if ( ! unmountElementSelectorCallbacks.get( elementId ) ) {
+			unmountElementSelectorCallbacks.set( elementId, new Map() );
 		}
 
 		unmountElementSelectorCallbacks.get( elementId )?.set( selector, () => {
@@ -131,16 +137,26 @@ export const onElementSelectorRender = ( {
 
 export const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {
 	const unmount = unmountElementTypeCallbacks.get( elementType )?.get( elementId );
+	const unmountSelector = unmountElementSelectorCallbacks.get( elementId );
 
-	if ( ! unmount ) {
-		return;
+	if ( unmount ) {
+		unmount();
 	}
 
-	unmount();
+	if ( unmountSelector?.size ) {
+		Array.from( unmountSelector.values() ).forEach( ( selectorUnmount ) => {
+			selectorUnmount();
+		} );
+	}
 
 	unmountElementTypeCallbacks.get( elementType )?.delete( elementId );
+	unmountElementSelectorCallbacks.delete( elementId );
 
 	if ( unmountElementTypeCallbacks.get( elementType )?.size === 0 ) {
 		unmountElementTypeCallbacks.delete( elementType );
 	}
+
+	if ( unmountElementSelectorCallbacks.size === 0 ) {
+		unmountElementSelectorCallbacks.delete( elementId );
+	}
 };