@elementor/frontend-handlers 3.35.0-429 → 3.35.0-431

package/dist/index.js

@@ -82,6 +82,15 @@ var unregisterBySelector = ({ selector, id }) => {
 var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
 var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
+var ELEMENT_DESTROYED_EVENT_NAME = "elementor/element/destroyed";
+var dispatchDestroyedEvent = (params) => {
+  params.element.dispatchEvent(
+    new CustomEvent(ELEMENT_DESTROYED_EVENT_NAME, {
+      bubbles: true,
+      detail: params
+    })
+  );
+};
 var onElementRender = ({
   element,
   elementType,
@@ -116,17 +125,15 @@ var onElementRender = ({
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
       render: (callback) => {
-        element.addEventListener(
-          ELEMENT_RENDERED_EVENT_NAME,
-          (event) => {
-            const { elementType: childType } = event.detail;
-            if (!elementTypes.includes(childType)) {
-              return;
-            }
-            callback();
-          },
-          { signal: controller.signal }
-        );
+        const listener = (event) => {
+          const { elementType: childType } = event.detail;
+          if (!elementTypes.includes(childType)) {
+            return;
+          }
+          callback();
+        };
+        element.addEventListener(ELEMENT_RENDERED_EVENT_NAME, listener, { signal: controller.signal });
+        element.addEventListener(ELEMENT_DESTROYED_EVENT_NAME, listener, { signal: controller.signal });
       }
     });
     const unmount = handler({
@@ -180,9 +187,16 @@ var onElementSelectorRender = ({
     });
   });
 };
-var onElementDestroy = ({ elementType, elementId }) => {
+var onElementDestroy = ({
+  elementType,
+  elementId,
+  element
+}) => {
   const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
   const unmountSelector = unmountElementSelectorCallbacks.get(elementId);
+  if (element) {
+    dispatchDestroyedEvent({ element, elementType, elementId });
+  }
   if (unmount) {
     unmount();
   }
@@ -211,8 +225,8 @@ function init() {
   });
   window.addEventListener("elementor/element/destroy", (_event) => {
     const event = _event;
-    const { id, type } = event.detail;
-    onElementDestroy({ elementType: type, elementId: id });
+    const { id, type, element } = event.detail;
+    onElementDestroy({ elementType: type, elementId: id, element });
   });
   document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("[data-e-type]").forEach((element) => {

package/dist/index.mjs

@@ -52,6 +52,15 @@ var unregisterBySelector = ({ selector, id }) => {
 var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
 var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
+var ELEMENT_DESTROYED_EVENT_NAME = "elementor/element/destroyed";
+var dispatchDestroyedEvent = (params) => {
+  params.element.dispatchEvent(
+    new CustomEvent(ELEMENT_DESTROYED_EVENT_NAME, {
+      bubbles: true,
+      detail: params
+    })
+  );
+};
 var onElementRender = ({
   element,
   elementType,
@@ -86,17 +95,15 @@ var onElementRender = ({
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
       render: (callback) => {
-        element.addEventListener(
-          ELEMENT_RENDERED_EVENT_NAME,
-          (event) => {
-            const { elementType: childType } = event.detail;
-            if (!elementTypes.includes(childType)) {
-              return;
-            }
-            callback();
-          },
-          { signal: controller.signal }
-        );
+        const listener = (event) => {
+          const { elementType: childType } = event.detail;
+          if (!elementTypes.includes(childType)) {
+            return;
+          }
+          callback();
+        };
+        element.addEventListener(ELEMENT_RENDERED_EVENT_NAME, listener, { signal: controller.signal });
+        element.addEventListener(ELEMENT_DESTROYED_EVENT_NAME, listener, { signal: controller.signal });
       }
     });
     const unmount = handler({
@@ -150,9 +157,16 @@ var onElementSelectorRender = ({
     });
   });
 };
-var onElementDestroy = ({ elementType, elementId }) => {
+var onElementDestroy = ({
+  elementType,
+  elementId,
+  element
+}) => {
   const unmount = unmountElementTypeCallbacks.get(elementType)?.get(elementId);
   const unmountSelector = unmountElementSelectorCallbacks.get(elementId);
+  if (element) {
+    dispatchDestroyedEvent({ element, elementType, elementId });
+  }
   if (unmount) {
     unmount();
   }
@@ -181,8 +195,8 @@ function init() {
   });
   window.addEventListener("elementor/element/destroy", (_event) => {
     const event = _event;
-    const { id, type } = event.detail;
-    onElementDestroy({ elementType: type, elementId: id });
+    const { id, type, element } = event.detail;
+    onElementDestroy({ elementType: type, elementId: id, element });
   });
   document.addEventListener("DOMContentLoaded", () => {
     document.querySelectorAll("[data-e-type]").forEach((element) => {

package/package.json

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

package/src/__tests__/index.test.ts

@@ -264,7 +264,7 @@ describe( 'Frontend Handlers', () => {
 			// Act
 			window.dispatchEvent(
 				new CustomEvent( 'elementor/element/destroy', {
-					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE },
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE, element },
 				} )
 			);
 
@@ -272,6 +272,50 @@ describe( 'Frontend Handlers', () => {
 			expect( unmountCallback ).toHaveBeenCalledTimes( 1 );
 		} );
 
+		it( 'should dispatch destroyed event when element is destroyed', () => {
+			// Arrange
+			const ELEMENT_ID = 'element-1';
+			const destroyedEventCallback = jest.fn();
+
+			register( {
+				elementType: WIDGET_ELEMENT_TYPE,
+				id: 'widget-handler',
+				callback: () => undefined,
+			} );
+
+			const element = document.createElement( 'div' );
+			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 },
+				} )
+			);
+
+			element.addEventListener( 'elementor/element/destroyed', destroyedEventCallback );
+
+			// Act
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/destroy', {
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE, element },
+				} )
+			);
+
+			// Assert
+			expect( destroyedEventCallback ).toHaveBeenCalledTimes( 1 );
+			expect( destroyedEventCallback ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					detail: expect.objectContaining( {
+						element,
+						elementType: WIDGET_ELEMENT_TYPE,
+						elementId: ELEMENT_ID,
+					} ),
+				} )
+			);
+		} );
+
 		it( 'should cleanup on re-render before new initialization', () => {
 			// Arrange
 			const ELEMENT_ID = 'element-1';
@@ -379,7 +423,7 @@ describe( 'Frontend Handlers', () => {
 			// Act
 			window.dispatchEvent(
 				new CustomEvent( 'elementor/element/destroy', {
-					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE },
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE, element },
 				} )
 			);
 
@@ -432,6 +476,62 @@ describe( 'Frontend Handlers', () => {
 			expect( childRenderCallback ).toHaveBeenCalledTimes( 1 );
 		} );
 
+		it( 'should trigger destroy callback when child of specified type is destroyed', () => {
+			// Arrange
+			const PARENT_ID = 'parent-1';
+			const CHILD_ID = 'child-1';
+			const childDestroyCallback = jest.fn();
+
+			register( {
+				elementType: PARENT_ELEMENT_TYPE,
+				id: 'parent-handler',
+				callback: ( { listenToChildren } ) => {
+					listenToChildren( [ CHILD_ELEMENT_TYPE ] ).render( childDestroyCallback );
+					return undefined;
+				},
+			} );
+
+			register( {
+				elementType: CHILD_ELEMENT_TYPE,
+				id: 'child-handler',
+				callback: () => undefined,
+			} );
+
+			const parent = document.createElement( 'div' );
+			parent.setAttribute( 'data-e-type', PARENT_ELEMENT_TYPE );
+			parent.setAttribute( 'data-id', PARENT_ID );
+			document.body.appendChild( parent );
+
+			const child = document.createElement( 'div' );
+			child.setAttribute( 'data-e-type', CHILD_ELEMENT_TYPE );
+			child.setAttribute( 'data-id', CHILD_ID );
+			parent.appendChild( child );
+
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/render', {
+					detail: { id: PARENT_ID, type: PARENT_ELEMENT_TYPE, element: parent },
+				} )
+			);
+
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/render', {
+					detail: { id: CHILD_ID, type: CHILD_ELEMENT_TYPE, element: child },
+				} )
+			);
+
+			childDestroyCallback.mockClear();
+
+			// Act
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/destroy', {
+					detail: { id: CHILD_ID, type: CHILD_ELEMENT_TYPE, element: child },
+				} )
+			);
+
+			// Assert
+			expect( childDestroyCallback ).toHaveBeenCalledTimes( 1 );
+		} );
+
 		it( 'should not trigger callback for non-descendant elements', () => {
 			// Arrange
 			const PARENT_ID = 'parent-1';
@@ -509,7 +609,7 @@ describe( 'Frontend Handlers', () => {
 			// Destroy Parent (should remove listener)
 			window.dispatchEvent(
 				new CustomEvent( 'elementor/element/destroy', {
-					detail: { id: PARENT_ID, type: PARENT_ELEMENT_TYPE },
+					detail: { id: PARENT_ID, type: PARENT_ELEMENT_TYPE, element: parent },
 				} )
 			);
 

package/src/init.ts

@@ -12,10 +12,10 @@ export function init() {
 	} );
 
 	window.addEventListener( 'elementor/element/destroy', ( _event ) => {
-		const event = _event as CustomEvent< { id: string; type: string } >;
-		const { id, type } = event.detail;
+		const event = _event as CustomEvent< { id: string; type: string; element: Element } >;
+		const { id, type, element } = event.detail;
 
-		onElementDestroy( { elementType: type, elementId: id } );
+		onElementDestroy( { elementType: type, elementId: id, element } );
 	} );
 
 	// 'elementor/element/render' doesn't fire on the frontend

package/src/lifecycle-events.ts

@@ -4,6 +4,22 @@ const unmountElementTypeCallbacks: Map< string, Map< string, () => void > > = ne
 const unmountElementSelectorCallbacks: Map< string, Map< string, () => void > > = new Map();
 
 const ELEMENT_RENDERED_EVENT_NAME = 'elementor/element/rendered';
+const ELEMENT_DESTROYED_EVENT_NAME = 'elementor/element/destroyed';
+
+type LifecycleEventParams = {
+	element: Element;
+	elementType: string;
+	elementId: string;
+};
+
+const dispatchDestroyedEvent = ( params: LifecycleEventParams ) => {
+	params.element.dispatchEvent(
+		new CustomEvent( ELEMENT_DESTROYED_EVENT_NAME, {
+			bubbles: true,
+			detail: params,
+		} )
+	);
+};
 
 export const onElementRender = ( {
 	element,
@@ -50,19 +66,18 @@ export const onElementRender = ( {
 
 		const listenToChildren = ( elementTypes: string[] ) => ( {
 			render: ( callback: () => void ) => {
-				element.addEventListener(
-					ELEMENT_RENDERED_EVENT_NAME,
-					( event ) => {
-						const { elementType: childType } = ( event as CustomEvent ).detail;
-
-						if ( ! elementTypes.includes( childType ) ) {
-							return;
-						}
-
-						callback();
-					},
-					{ signal: controller.signal }
-				);
+				const listener = ( event: Event ) => {
+					const { elementType: childType } = ( event as CustomEvent ).detail;
+
+					if ( ! elementTypes.includes( childType ) ) {
+						return;
+					}
+
+					callback();
+				};
+
+				element.addEventListener( ELEMENT_RENDERED_EVENT_NAME, listener, { signal: controller.signal } );
+				element.addEventListener( ELEMENT_DESTROYED_EVENT_NAME, listener, { signal: controller.signal } );
 			},
 		} );
 
@@ -135,10 +150,22 @@ export const onElementSelectorRender = ( {
 	} );
 };
 
-export const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {
+export const onElementDestroy = ( {
+	elementType,
+	elementId,
+	element,
+}: {
+	elementType: string;
+	elementId: string;
+	element?: Element;
+} ) => {
 	const unmount = unmountElementTypeCallbacks.get( elementType )?.get( elementId );
 	const unmountSelector = unmountElementSelectorCallbacks.get( elementId );
 
+	if ( element ) {
+		dispatchDestroyedEvent( { element, elementType, elementId } );
+	}
+
 	if ( unmount ) {
 		unmount();
 	}