@elementor/frontend-handlers 0.1.1 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @elementor/frontend-handlers@0.1.1 build
+> @elementor/frontend-handlers@0.2.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     3.69 KB
-CJS dist/index.js.map 5.69 KB
-CJS ⚡️ Build success in 256ms
-ESM dist/index.mjs     2.64 KB
-ESM dist/index.mjs.map 5.52 KB
-ESM ⚡️ Build success in 266ms
+CJS dist/index.js     3.75 KB
+CJS dist/index.js.map 5.88 KB
+CJS ⚡️ Build success in 165ms
+ESM dist/index.mjs     2.70 KB
+ESM dist/index.mjs.map 5.71 KB
+ESM ⚡️ Build success in 188ms
 DTS Build start
-DTS ⚡️ Build success in 25566ms
+DTS ⚡️ Build success in 25544ms
 DTS dist/index.d.mts 415.00 B
 DTS dist/index.d.ts  415.00 B

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @elementor/frontend-handlers
 
+## 0.2.0
+
+### Minor Changes
+
+- 62154d2: make sure the destroy event run before the render
+
 ## 0.1.1
 
 ### Patch Changes

package/dist/index.js

@@ -93,6 +93,7 @@ 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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/handlers-registry.ts","../src/lifecycle-events.ts","../src/init.ts"],"sourcesContent":["export { register, unregister } from './handlers-registry';\n\nexport { init } from './init';\n","type Handler = ( params: { element: Element; signal: AbortSignal } ) => ( () => void ) | undefined;\n\nexport const handlers: Map< string, Map< string, Handler > > = new Map();\n\nexport const register = ( { elementType, id, callback }: { elementType: string; id: string; callback: Handler } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\thandlers.set( elementType, new Map() );\n\t}\n\n\tif ( ! handlers.get( elementType )?.has( id ) ) {\n\t\thandlers.get( elementType )?.set( id, callback );\n\t}\n};\n\nexport const unregister = ( { elementType, id }: { elementType: string; id?: string } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tif ( id ) {\n\t\thandlers.get( elementType )?.delete( id );\n\n\t\tif ( handlers.get( elementType )?.size === 0 ) {\n\t\t\thandlers.delete( elementType );\n\t\t}\n\t} else {\n\t\thandlers.delete( elementType );\n\t}\n};\n","import { handlers } from './handlers-registry';\n\nconst unmountCallbacks: Map< string, Map< string, () => void > > = new Map();\n\nexport const onElementRender = ( {\n\telement,\n\telementType,\n\telementId,\n}: {\n\telement: Element;\n\telementType: string;\n\telementId: string;\n} ) => {\n\tconst controller = new AbortController();\n\tconst manualUnmount: ( () => void )[] = [];\n\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tArray.from( handlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {\n\t\tconst unmount = handler( { element, signal: controller.signal } );\n\n\t\tif ( typeof unmount === 'function' ) {\n\t\t\tmanualUnmount.push( unmount );\n\t\t}\n\t} );\n\n\tif ( ! unmountCallbacks.has( elementType ) ) {\n\t\tunmountCallbacks.set( elementType, new Map() );\n\t}\n\n\tunmountCallbacks.get( elementType )?.set( elementId, () => {\n\t\tcontroller.abort();\n\n\t\tmanualUnmount.forEach( ( callback ) => callback() );\n\t} );\n};\n\nexport const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {\n\tconst unmount = unmountCallbacks.get( elementType )?.get( elementId );\n\n\tif ( ! unmount ) {\n\t\treturn;\n\t}\n\n\tunmount();\n\n\tunmountCallbacks.get( elementType )?.delete( elementId );\n\n\tif ( unmountCallbacks.get( elementType )?.size === 0 ) {\n\t\tunmountCallbacks.delete( elementType );\n\t}\n};\n","import { onElementDestroy, onElementRender } from './lifecycle-events';\n\nexport function init() {\n\twindow.addEventListener( 'elementor/element/render', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string; element: Element } >;\n\t\tconst { id, type, element } = event.detail;\n\n\t\tonElementRender( { element, elementType: type, elementId: id } );\n\t} );\n\n\twindow.addEventListener( 'elementor/element/destroy', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string } >;\n\t\tconst { id, type } = event.detail;\n\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\t} );\n\n\tdocument.addEventListener( 'DOMContentLoaded', () => {\n\t\tdocument.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {\n\t\t\tconst el = element as HTMLElement;\n\n\t\t\tconst { eType, id } = el.dataset;\n\n\t\t\tif ( ! eType || ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\twindow.dispatchEvent(\n\t\t\t\tnew CustomEvent( 'elementor/element/render', {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: eType,\n\t\t\t\t\t\telement,\n\t\t\t\t\t},\n\t\t\t\t} )\n\t\t\t);\n\t\t} );\n\t} );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/handlers-registry.ts","../src/lifecycle-events.ts","../src/init.ts"],"sourcesContent":["export { register, unregister } from './handlers-registry';\n\nexport { init } from './init';\n","type Handler = ( params: { element: Element; signal: AbortSignal } ) => ( () => void ) | undefined;\n\nexport const handlers: Map< string, Map< string, Handler > > = new Map();\n\nexport const register = ( { elementType, id, callback }: { elementType: string; id: string; callback: Handler } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\thandlers.set( elementType, new Map() );\n\t}\n\n\tif ( ! handlers.get( elementType )?.has( id ) ) {\n\t\thandlers.get( elementType )?.set( id, callback );\n\t}\n};\n\nexport const unregister = ( { elementType, id }: { elementType: string; id?: string } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tif ( id ) {\n\t\thandlers.get( elementType )?.delete( id );\n\n\t\tif ( handlers.get( elementType )?.size === 0 ) {\n\t\t\thandlers.delete( elementType );\n\t\t}\n\t} else {\n\t\thandlers.delete( elementType );\n\t}\n};\n","import { handlers } from './handlers-registry';\n\nconst unmountCallbacks: Map< string, Map< string, () => void > > = new Map();\n\nexport const onElementRender = ( {\n\telement,\n\telementType,\n\telementId,\n}: {\n\telement: Element;\n\telementType: string;\n\telementId: string;\n} ) => {\n\tconst controller = new AbortController();\n\tconst manualUnmount: ( () => void )[] = [];\n\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tArray.from( handlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {\n\t\tconst unmount = handler( { element, signal: controller.signal } );\n\n\t\tif ( typeof unmount === 'function' ) {\n\t\t\tmanualUnmount.push( unmount );\n\t\t}\n\t} );\n\n\tif ( ! unmountCallbacks.has( elementType ) ) {\n\t\tunmountCallbacks.set( elementType, new Map() );\n\t}\n\n\tunmountCallbacks.get( elementType )?.set( elementId, () => {\n\t\tcontroller.abort();\n\n\t\tmanualUnmount.forEach( ( callback ) => callback() );\n\t} );\n};\n\nexport const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {\n\tconst unmount = unmountCallbacks.get( elementType )?.get( elementId );\n\n\tif ( ! unmount ) {\n\t\treturn;\n\t}\n\n\tunmount();\n\n\tunmountCallbacks.get( elementType )?.delete( elementId );\n\n\tif ( unmountCallbacks.get( elementType )?.size === 0 ) {\n\t\tunmountCallbacks.delete( elementType );\n\t}\n};\n","import { onElementDestroy, onElementRender } from './lifecycle-events';\n\nexport function init() {\n\twindow.addEventListener( 'elementor/element/render', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string; element: Element } >;\n\t\tconst { id, type, element } = event.detail;\n\n\t\t// Ensure the \"destroy\" event was not triggered before the render event.\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\n\t\tonElementRender( { element, elementType: type, elementId: id } );\n\t} );\n\n\twindow.addEventListener( 'elementor/element/destroy', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string } >;\n\t\tconst { id, type } = event.detail;\n\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\t} );\n\n\tdocument.addEventListener( 'DOMContentLoaded', () => {\n\t\tdocument.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {\n\t\t\tconst el = element as HTMLElement;\n\n\t\t\tconst { eType, id } = el.dataset;\n\n\t\t\tif ( ! eType || ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\twindow.dispatchEvent(\n\t\t\t\tnew CustomEvent( 'elementor/element/render', {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: eType,\n\t\t\t\t\t\telement,\n\t\t\t\t\t},\n\t\t\t\t} )\n\t\t\t);\n\t\t} );\n\t} );\n}\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -65,6 +65,7 @@ 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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/handlers-registry.ts","../src/lifecycle-events.ts","../src/init.ts"],"sourcesContent":["type Handler = ( params: { element: Element; signal: AbortSignal } ) => ( () => void ) | undefined;\n\nexport const handlers: Map< string, Map< string, Handler > > = new Map();\n\nexport const register = ( { elementType, id, callback }: { elementType: string; id: string; callback: Handler } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\thandlers.set( elementType, new Map() );\n\t}\n\n\tif ( ! handlers.get( elementType )?.has( id ) ) {\n\t\thandlers.get( elementType )?.set( id, callback );\n\t}\n};\n\nexport const unregister = ( { elementType, id }: { elementType: string; id?: string } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tif ( id ) {\n\t\thandlers.get( elementType )?.delete( id );\n\n\t\tif ( handlers.get( elementType )?.size === 0 ) {\n\t\t\thandlers.delete( elementType );\n\t\t}\n\t} else {\n\t\thandlers.delete( elementType );\n\t}\n};\n","import { handlers } from './handlers-registry';\n\nconst unmountCallbacks: Map< string, Map< string, () => void > > = new Map();\n\nexport const onElementRender = ( {\n\telement,\n\telementType,\n\telementId,\n}: {\n\telement: Element;\n\telementType: string;\n\telementId: string;\n} ) => {\n\tconst controller = new AbortController();\n\tconst manualUnmount: ( () => void )[] = [];\n\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tArray.from( handlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {\n\t\tconst unmount = handler( { element, signal: controller.signal } );\n\n\t\tif ( typeof unmount === 'function' ) {\n\t\t\tmanualUnmount.push( unmount );\n\t\t}\n\t} );\n\n\tif ( ! unmountCallbacks.has( elementType ) ) {\n\t\tunmountCallbacks.set( elementType, new Map() );\n\t}\n\n\tunmountCallbacks.get( elementType )?.set( elementId, () => {\n\t\tcontroller.abort();\n\n\t\tmanualUnmount.forEach( ( callback ) => callback() );\n\t} );\n};\n\nexport const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {\n\tconst unmount = unmountCallbacks.get( elementType )?.get( elementId );\n\n\tif ( ! unmount ) {\n\t\treturn;\n\t}\n\n\tunmount();\n\n\tunmountCallbacks.get( elementType )?.delete( elementId );\n\n\tif ( unmountCallbacks.get( elementType )?.size === 0 ) {\n\t\tunmountCallbacks.delete( elementType );\n\t}\n};\n","import { onElementDestroy, onElementRender } from './lifecycle-events';\n\nexport function init() {\n\twindow.addEventListener( 'elementor/element/render', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string; element: Element } >;\n\t\tconst { id, type, element } = event.detail;\n\n\t\tonElementRender( { element, elementType: type, elementId: id } );\n\t} );\n\n\twindow.addEventListener( 'elementor/element/destroy', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string } >;\n\t\tconst { id, type } = event.detail;\n\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\t} );\n\n\tdocument.addEventListener( 'DOMContentLoaded', () => {\n\t\tdocument.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {\n\t\t\tconst el = element as HTMLElement;\n\n\t\t\tconst { eType, id } = el.dataset;\n\n\t\t\tif ( ! eType || ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\twindow.dispatchEvent(\n\t\t\t\tnew CustomEvent( 'elementor/element/render', {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: eType,\n\t\t\t\t\t\telement,\n\t\t\t\t\t},\n\t\t\t\t} )\n\t\t\t);\n\t\t} );\n\t} );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/handlers-registry.ts","../src/lifecycle-events.ts","../src/init.ts"],"sourcesContent":["type Handler = ( params: { element: Element; signal: AbortSignal } ) => ( () => void ) | undefined;\n\nexport const handlers: Map< string, Map< string, Handler > > = new Map();\n\nexport const register = ( { elementType, id, callback }: { elementType: string; id: string; callback: Handler } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\thandlers.set( elementType, new Map() );\n\t}\n\n\tif ( ! handlers.get( elementType )?.has( id ) ) {\n\t\thandlers.get( elementType )?.set( id, callback );\n\t}\n};\n\nexport const unregister = ( { elementType, id }: { elementType: string; id?: string } ) => {\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tif ( id ) {\n\t\thandlers.get( elementType )?.delete( id );\n\n\t\tif ( handlers.get( elementType )?.size === 0 ) {\n\t\t\thandlers.delete( elementType );\n\t\t}\n\t} else {\n\t\thandlers.delete( elementType );\n\t}\n};\n","import { handlers } from './handlers-registry';\n\nconst unmountCallbacks: Map< string, Map< string, () => void > > = new Map();\n\nexport const onElementRender = ( {\n\telement,\n\telementType,\n\telementId,\n}: {\n\telement: Element;\n\telementType: string;\n\telementId: string;\n} ) => {\n\tconst controller = new AbortController();\n\tconst manualUnmount: ( () => void )[] = [];\n\n\tif ( ! handlers.has( elementType ) ) {\n\t\treturn;\n\t}\n\n\tArray.from( handlers.get( elementType )?.values() ?? [] ).forEach( ( handler ) => {\n\t\tconst unmount = handler( { element, signal: controller.signal } );\n\n\t\tif ( typeof unmount === 'function' ) {\n\t\t\tmanualUnmount.push( unmount );\n\t\t}\n\t} );\n\n\tif ( ! unmountCallbacks.has( elementType ) ) {\n\t\tunmountCallbacks.set( elementType, new Map() );\n\t}\n\n\tunmountCallbacks.get( elementType )?.set( elementId, () => {\n\t\tcontroller.abort();\n\n\t\tmanualUnmount.forEach( ( callback ) => callback() );\n\t} );\n};\n\nexport const onElementDestroy = ( { elementType, elementId }: { elementType: string; elementId: string } ) => {\n\tconst unmount = unmountCallbacks.get( elementType )?.get( elementId );\n\n\tif ( ! unmount ) {\n\t\treturn;\n\t}\n\n\tunmount();\n\n\tunmountCallbacks.get( elementType )?.delete( elementId );\n\n\tif ( unmountCallbacks.get( elementType )?.size === 0 ) {\n\t\tunmountCallbacks.delete( elementType );\n\t}\n};\n","import { onElementDestroy, onElementRender } from './lifecycle-events';\n\nexport function init() {\n\twindow.addEventListener( 'elementor/element/render', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string; element: Element } >;\n\t\tconst { id, type, element } = event.detail;\n\n\t\t// Ensure the \"destroy\" event was not triggered before the render event.\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\n\t\tonElementRender( { element, elementType: type, elementId: id } );\n\t} );\n\n\twindow.addEventListener( 'elementor/element/destroy', ( _event ) => {\n\t\tconst event = _event as CustomEvent< { id: string; type: string } >;\n\t\tconst { id, type } = event.detail;\n\n\t\tonElementDestroy( { elementType: type, elementId: id } );\n\t} );\n\n\tdocument.addEventListener( 'DOMContentLoaded', () => {\n\t\tdocument.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {\n\t\t\tconst el = element as HTMLElement;\n\n\t\t\tconst { eType, id } = el.dataset;\n\n\t\t\tif ( ! eType || ! id ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\twindow.dispatchEvent(\n\t\t\t\tnew CustomEvent( 'elementor/element/render', {\n\t\t\t\t\tdetail: {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\ttype: eType,\n\t\t\t\t\t\telement,\n\t\t\t\t\t},\n\t\t\t\t} )\n\t\t\t);\n\t\t} );\n\t} );\n}\n"],"mappings":"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","names":[]}

package/package.json

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

package/src/init.ts

@@ -5,6 +5,9 @@ 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 } );
 	} );