@elementor/frontend-handlers 4.0.0-547 → 4.0.0-549

package/dist/index.js

@@ -79,8 +79,7 @@ var unregisterBySelector = ({ selector, id }) => {
 };
 
 // src/lifecycle-events.ts
-var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
-var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
+var unmountCallbacks = /* @__PURE__ */ new WeakMap();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
 var ELEMENT_DESTROYED_EVENT_NAME = "elementor/element/destroyed";
 var dispatchDestroyedEvent = (params) => {
@@ -96,10 +95,11 @@ var onElementRender = ({
   elementType,
   elementId
 }) => {
+  cleanupOnUnmount(element);
   const controller = new AbortController();
   const manualUnmount = [];
   const dispatchRenderedEvent = () => {
-    onElementSelectorRender({ element, elementId, controller });
+    onElementSelectorRender({ element, controller });
     element.dispatchEvent(
       new CustomEvent(ELEMENT_RENDERED_EVENT_NAME, {
         bubbles: true,
@@ -121,6 +121,7 @@ var onElementRender = ({
   if (!elementTypeHandlers.has(elementType)) {
     return;
   }
+  setUnmountEntry({ element, controller, manualUnmount });
   Array.from(elementTypeHandlers.get(elementType)?.values() ?? []).forEach((handler) => {
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
@@ -146,24 +147,18 @@ var onElementRender = ({
       manualUnmount.push(unmount);
     }
   });
-  if (!unmountElementTypeCallbacks.has(elementType)) {
-    unmountElementTypeCallbacks.set(elementType, /* @__PURE__ */ new Map());
-  }
-  unmountElementTypeCallbacks.get(elementType)?.set(elementId, () => {
-    controller.abort();
-    manualUnmount.forEach((callback) => callback());
-  });
 };
 var onElementSelectorRender = ({
   element,
-  elementId,
   controller
 }) => {
+  let requiresCleanup = false;
+  const manualUnmount = [];
   Array.from(elementSelectorHandlers.entries() ?? []).forEach(([selector, handlers]) => {
     if (!element.matches(selector)) {
       return;
     }
-    const manualUnmount = [];
+    requiresCleanup = true;
     Array.from(handlers.values() ?? []).forEach((handler) => {
       const settings = element.getAttribute("data-e-settings");
       const unmount = handler({
@@ -175,43 +170,40 @@ var onElementSelectorRender = ({
         manualUnmount.push(unmount);
       }
     });
-    if (!manualUnmount.length) {
-      return;
-    }
-    if (!unmountElementSelectorCallbacks.get(elementId)) {
-      unmountElementSelectorCallbacks.set(elementId, /* @__PURE__ */ new Map());
-    }
-    unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
-      controller.abort();
-      manualUnmount.forEach((callback) => callback());
-    });
   });
+  if (requiresCleanup) {
+    setUnmountEntry({ element, controller, manualUnmount });
+  }
 };
 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();
-  }
-  if (unmountSelector?.size) {
-    Array.from(unmountSelector.values()).forEach((selectorUnmount) => {
-      selectorUnmount();
-    });
+  if (!element) {
+    return;
   }
-  unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
-  unmountElementSelectorCallbacks.delete(elementId);
-  if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
-    unmountElementTypeCallbacks.delete(elementType);
+  cleanupOnUnmount(element);
+  dispatchDestroyedEvent({ element, elementType, elementId });
+};
+var setUnmountEntry = ({
+  element,
+  controller,
+  manualUnmount
+}) => {
+  const existingEntry = unmountCallbacks.get(element);
+  if (existingEntry) {
+    existingEntry.manualUnmount.push(...manualUnmount);
+  } else {
+    unmountCallbacks.set(element, { controller, manualUnmount });
   }
-  if (unmountElementSelectorCallbacks.size === 0) {
-    unmountElementSelectorCallbacks.delete(elementId);
+};
+var cleanupOnUnmount = (element) => {
+  const entry = unmountCallbacks.get(element);
+  if (entry) {
+    entry.controller.abort();
+    entry.manualUnmount.forEach((callback) => callback());
+    unmountCallbacks.delete(element);
   }
 };
 
@@ -220,7 +212,6 @@ function init() {
   window.addEventListener("elementor/element/render", (_event) => {
     const event = _event;
     const { id, type, element } = event.detail;
-    onElementDestroy({ elementType: type, elementId: id });
     onElementRender({ element, elementType: type, elementId: id });
   });
   window.addEventListener("elementor/element/destroy", (_event) => {

package/dist/index.mjs

@@ -49,8 +49,7 @@ var unregisterBySelector = ({ selector, id }) => {
 };
 
 // src/lifecycle-events.ts
-var unmountElementTypeCallbacks = /* @__PURE__ */ new Map();
-var unmountElementSelectorCallbacks = /* @__PURE__ */ new Map();
+var unmountCallbacks = /* @__PURE__ */ new WeakMap();
 var ELEMENT_RENDERED_EVENT_NAME = "elementor/element/rendered";
 var ELEMENT_DESTROYED_EVENT_NAME = "elementor/element/destroyed";
 var dispatchDestroyedEvent = (params) => {
@@ -66,10 +65,11 @@ var onElementRender = ({
   elementType,
   elementId
 }) => {
+  cleanupOnUnmount(element);
   const controller = new AbortController();
   const manualUnmount = [];
   const dispatchRenderedEvent = () => {
-    onElementSelectorRender({ element, elementId, controller });
+    onElementSelectorRender({ element, controller });
     element.dispatchEvent(
       new CustomEvent(ELEMENT_RENDERED_EVENT_NAME, {
         bubbles: true,
@@ -91,6 +91,7 @@ var onElementRender = ({
   if (!elementTypeHandlers.has(elementType)) {
     return;
   }
+  setUnmountEntry({ element, controller, manualUnmount });
   Array.from(elementTypeHandlers.get(elementType)?.values() ?? []).forEach((handler) => {
     const settings = element.getAttribute("data-e-settings");
     const listenToChildren = (elementTypes) => ({
@@ -116,24 +117,18 @@ var onElementRender = ({
       manualUnmount.push(unmount);
     }
   });
-  if (!unmountElementTypeCallbacks.has(elementType)) {
-    unmountElementTypeCallbacks.set(elementType, /* @__PURE__ */ new Map());
-  }
-  unmountElementTypeCallbacks.get(elementType)?.set(elementId, () => {
-    controller.abort();
-    manualUnmount.forEach((callback) => callback());
-  });
 };
 var onElementSelectorRender = ({
   element,
-  elementId,
   controller
 }) => {
+  let requiresCleanup = false;
+  const manualUnmount = [];
   Array.from(elementSelectorHandlers.entries() ?? []).forEach(([selector, handlers]) => {
     if (!element.matches(selector)) {
       return;
     }
-    const manualUnmount = [];
+    requiresCleanup = true;
     Array.from(handlers.values() ?? []).forEach((handler) => {
       const settings = element.getAttribute("data-e-settings");
       const unmount = handler({
@@ -145,43 +140,40 @@ var onElementSelectorRender = ({
         manualUnmount.push(unmount);
       }
     });
-    if (!manualUnmount.length) {
-      return;
-    }
-    if (!unmountElementSelectorCallbacks.get(elementId)) {
-      unmountElementSelectorCallbacks.set(elementId, /* @__PURE__ */ new Map());
-    }
-    unmountElementSelectorCallbacks.get(elementId)?.set(selector, () => {
-      controller.abort();
-      manualUnmount.forEach((callback) => callback());
-    });
   });
+  if (requiresCleanup) {
+    setUnmountEntry({ element, controller, manualUnmount });
+  }
 };
 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();
-  }
-  if (unmountSelector?.size) {
-    Array.from(unmountSelector.values()).forEach((selectorUnmount) => {
-      selectorUnmount();
-    });
+  if (!element) {
+    return;
   }
-  unmountElementTypeCallbacks.get(elementType)?.delete(elementId);
-  unmountElementSelectorCallbacks.delete(elementId);
-  if (unmountElementTypeCallbacks.get(elementType)?.size === 0) {
-    unmountElementTypeCallbacks.delete(elementType);
+  cleanupOnUnmount(element);
+  dispatchDestroyedEvent({ element, elementType, elementId });
+};
+var setUnmountEntry = ({
+  element,
+  controller,
+  manualUnmount
+}) => {
+  const existingEntry = unmountCallbacks.get(element);
+  if (existingEntry) {
+    existingEntry.manualUnmount.push(...manualUnmount);
+  } else {
+    unmountCallbacks.set(element, { controller, manualUnmount });
   }
-  if (unmountElementSelectorCallbacks.size === 0) {
-    unmountElementSelectorCallbacks.delete(elementId);
+};
+var cleanupOnUnmount = (element) => {
+  const entry = unmountCallbacks.get(element);
+  if (entry) {
+    entry.controller.abort();
+    entry.manualUnmount.forEach((callback) => callback());
+    unmountCallbacks.delete(element);
   }
 };
 
@@ -190,7 +182,6 @@ function init() {
   window.addEventListener("elementor/element/render", (_event) => {
     const event = _event;
     const { id, type, element } = event.detail;
-    onElementDestroy({ elementType: type, elementId: id });
     onElementRender({ element, elementType: type, elementId: id });
   });
   window.addEventListener("elementor/element/destroy", (_event) => {

package/package.json

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

package/src/__tests__/index.test.ts

@@ -232,7 +232,7 @@ describe( 'Frontend Handlers', () => {
 
 			window.dispatchEvent(
 				new CustomEvent( 'elementor/element/destroy', {
-					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE },
+					detail: { id: ELEMENT_ID, type: WIDGET_ELEMENT_TYPE, element },
 				} )
 			);
 
@@ -686,6 +686,52 @@ describe( 'Frontend Handlers', () => {
 			expect( callbackCounts.get( PARENT_1_ID ) ).toBe( 1 );
 			expect( callbackCounts.get( PARENT_2_ID ) ).toBe( 1 );
 		} );
+
+		it( 'should not abort handlers of first element when rendering second element with same ID', () => {
+			// Arrange
+			const SHARED_ID = 'shared-internal-id';
+			let element1Signal: AbortSignal | undefined;
+			let element2Signal: AbortSignal | undefined;
+
+			const element1 = document.createElement( 'div' );
+			element1.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
+			element1.setAttribute( 'data-id', SHARED_ID );
+			document.body.appendChild( element1 );
+
+			const element2 = document.createElement( 'div' );
+			element2.setAttribute( 'data-e-type', WIDGET_ELEMENT_TYPE );
+			element2.setAttribute( 'data-id', SHARED_ID );
+			document.body.appendChild( element2 );
+
+			register( {
+				elementType: WIDGET_ELEMENT_TYPE,
+				id: HANDLER_IDS.handler_1,
+				callback: ( { element, signal } ) => {
+					if ( element === element1 ) {
+						element1Signal = signal;
+					} else if ( element === element2 ) {
+						element2Signal = signal;
+					}
+					return undefined;
+				},
+			} );
+
+			// Act - Render elements
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/render', {
+					detail: { id: SHARED_ID, type: WIDGET_ELEMENT_TYPE, element: element1 },
+				} )
+			);
+			window.dispatchEvent(
+				new CustomEvent( 'elementor/element/render', {
+					detail: { id: SHARED_ID, type: WIDGET_ELEMENT_TYPE, element: element2 },
+				} )
+			);
+
+			// Assert - Both signals should be active (not aborted)
+			expect( element1Signal?.aborted ).toBe( false );
+			expect( element2Signal?.aborted ).toBe( false );
+		} );
 	} );
 
 	describe( 'DOMContentLoaded Initialization', () => {

package/src/init.ts

@@ -5,9 +5,6 @@ export function init() {
 		const event = _event as CustomEvent< { id: string; type: string; element: Element } >;
 		const { id, type, element } = event.detail;
 
-		// Ensure the "destroy" event was not triggered before the render event.
-		onElementDestroy( { elementType: type, elementId: id } );
-
 		onElementRender( { element, elementType: type, elementId: id } );
 	} );
 

package/src/lifecycle-events.ts

@@ -1,7 +1,11 @@
 import { elementSelectorHandlers, elementTypeHandlers } from './handlers-registry';
 
-const unmountElementTypeCallbacks: Map< string, Map< string, () => void > > = new Map();
-const unmountElementSelectorCallbacks: Map< string, Map< string, () => void > > = new Map();
+type UnmountEntry = {
+	controller: AbortController;
+	manualUnmount: ( () => void )[];
+};
+
+const unmountCallbacks = new WeakMap< Element, UnmountEntry >();
 
 const ELEMENT_RENDERED_EVENT_NAME = 'elementor/element/rendered';
 const ELEMENT_DESTROYED_EVENT_NAME = 'elementor/element/destroyed';
@@ -30,11 +34,13 @@ export const onElementRender = ( {
 	elementType: string;
 	elementId: string;
 } ) => {
+	cleanupOnUnmount( element );
+
 	const controller = new AbortController();
 	const manualUnmount: ( () => void )[] = [];
 
 	const dispatchRenderedEvent = () => {
-		onElementSelectorRender( { element, elementId, controller } );
+		onElementSelectorRender( { element, controller } );
 
 		element.dispatchEvent(
 			new CustomEvent( ELEMENT_RENDERED_EVENT_NAME, {
@@ -61,6 +67,8 @@ export const onElementRender = ( {
 		return;
 	}
 
+	setUnmountEntry( { element, controller, manualUnmount } );
+
 	Array.from( elementTypeHandlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {
 		const settings = element.getAttribute( 'data-e-settings' );
 
@@ -92,33 +100,24 @@ export const onElementRender = ( {
 			manualUnmount.push( unmount );
 		}
 	} );
-
-	if ( ! unmountElementTypeCallbacks.has( elementType ) ) {
-		unmountElementTypeCallbacks.set( elementType, new Map() );
-	}
-
-	unmountElementTypeCallbacks.get( elementType )?.set( elementId, () => {
-		controller.abort();
-
-		manualUnmount.forEach( ( callback ) => callback() );
-	} );
 };
 
 export const onElementSelectorRender = ( {
 	element,
-	elementId,
 	controller,
 }: {
 	element: Element;
-	elementId: string;
 	controller: AbortController;
 } ) => {
+	let requiresCleanup = false;
+	const manualUnmount: ( () => void )[] = [];
+
 	Array.from( elementSelectorHandlers.entries() ?? [] ).forEach( ( [ selector, handlers ] ) => {
 		if ( ! element.matches( selector ) ) {
 			return;
 		}
 
-		const manualUnmount: ( () => void )[] = [];
+		requiresCleanup = true;
 
 		Array.from( handlers.values() ?? [] ).forEach( ( handler ) => {
 			const settings = element.getAttribute( 'data-e-settings' );
@@ -133,21 +132,11 @@ export const onElementSelectorRender = ( {
 				manualUnmount.push( unmount );
 			}
 		} );
-
-		if ( ! manualUnmount.length ) {
-			return;
-		}
-
-		if ( ! unmountElementSelectorCallbacks.get( elementId ) ) {
-			unmountElementSelectorCallbacks.set( elementId, new Map() );
-		}
-
-		unmountElementSelectorCallbacks.get( elementId )?.set( selector, () => {
-			controller.abort();
-
-			manualUnmount.forEach( ( callback ) => callback() );
-		} );
 	} );
+
+	if ( requiresCleanup ) {
+		setUnmountEntry( { element, controller, manualUnmount } );
+	}
 };
 
 export const onElementDestroy = ( {
@@ -159,31 +148,39 @@ export const onElementDestroy = ( {
 	elementId: string;
 	element?: Element;
 } ) => {
-	const unmount = unmountElementTypeCallbacks.get( elementType )?.get( elementId );
-	const unmountSelector = unmountElementSelectorCallbacks.get( elementId );
-
-	if ( element ) {
-		dispatchDestroyedEvent( { element, elementType, elementId } );
+	if ( ! element ) {
+		return;
 	}
 
-	if ( unmount ) {
-		unmount();
-	}
+	cleanupOnUnmount( element );
 
-	if ( unmountSelector?.size ) {
-		Array.from( unmountSelector.values() ).forEach( ( selectorUnmount ) => {
-			selectorUnmount();
-		} );
-	}
+	dispatchDestroyedEvent( { element, elementType, elementId } );
+};
 
-	unmountElementTypeCallbacks.get( elementType )?.delete( elementId );
-	unmountElementSelectorCallbacks.delete( elementId );
+const setUnmountEntry = ( {
+	element,
+	controller,
+	manualUnmount,
+}: {
+	element: Element;
+	controller: AbortController;
+	manualUnmount: ( () => void )[];
+} ) => {
+	const existingEntry = unmountCallbacks.get( element );
 
-	if ( unmountElementTypeCallbacks.get( elementType )?.size === 0 ) {
-		unmountElementTypeCallbacks.delete( elementType );
+	if ( existingEntry ) {
+		existingEntry.manualUnmount.push( ...manualUnmount );
+	} else {
+		unmountCallbacks.set( element, { controller, manualUnmount } );
 	}
+};
+
+const cleanupOnUnmount = ( element: Element ) => {
+	const entry = unmountCallbacks.get( element );
 
-	if ( unmountElementSelectorCallbacks.size === 0 ) {
-		unmountElementSelectorCallbacks.delete( elementId );
+	if ( entry ) {
+		entry.controller.abort();
+		entry.manualUnmount.forEach( ( callback ) => callback() );
+		unmountCallbacks.delete( element );
 	}
 };