@elementor/frontend-handlers 4.1.0-778 → 4.1.0-779

package/dist/index.js

@@ -212,6 +212,10 @@ var cleanupOnUnmount = (element) => {
 };
 
 // src/init.ts
+var ATOMIC_SELECTOR = "[data-e-type]";
+var domMutationObserverStarted = false;
+var pendingMutationNodes = /* @__PURE__ */ new Set();
+var pendingMutationsRafId = 0;
 function init() {
   window.addEventListener("elementor/element/render", (_event) => {
     const event = _event;
@@ -223,15 +227,79 @@ function init() {
     const { id, type, element } = event.detail;
     onElementDestroy({ elementType: type, elementId: id, element });
   });
-  document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll("[data-e-type]").forEach((element) => {
-      const el = element;
-      const { eType, id } = el.dataset;
-      if (!eType || !id) {
-        return;
+  const bootDomHandlers = () => {
+    scanDocumentForAtomicElements();
+    startObservingDomForNewAtomicElements();
+  };
+  document.addEventListener("DOMContentLoaded", bootDomHandlers);
+  if ("loading" !== document.readyState) {
+    bootDomHandlers();
+  }
+}
+function triggerAtomicRender(atom) {
+  const eType = atom.dataset.eType;
+  const id = atom.dataset.id;
+  if (!eType || !id) {
+    return;
+  }
+  onElementRender({ element: atom, elementType: eType, elementId: id });
+}
+function collectAtomicElementsInSubtree(root) {
+  const found = [];
+  if (root.matches(ATOMIC_SELECTOR)) {
+    found.push(root);
+  }
+  root.querySelectorAll(ATOMIC_SELECTOR).forEach((el) => {
+    found.push(el);
+  });
+  return found;
+}
+function scanDocumentForAtomicElements() {
+  document.querySelectorAll(ATOMIC_SELECTOR).forEach((el) => {
+    const atom = el;
+    const { eType, id } = atom.dataset;
+    if (!eType || !id) {
+      return;
+    }
+    triggerAtomicRender(atom);
+  });
+}
+function startObservingDomForNewAtomicElements() {
+  if (domMutationObserverStarted || "undefined" === typeof MutationObserver) {
+    return;
+  }
+  domMutationObserverStarted = true;
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      mutation.addedNodes.forEach((node) => {
+        pendingMutationNodes.add(node);
+      });
+    }
+    queueProcessPendingMutationNodes();
+  });
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+}
+function queueProcessPendingMutationNodes() {
+  if (pendingMutationsRafId || !pendingMutationNodes.size) {
+    return;
+  }
+  pendingMutationsRafId = requestAnimationFrame(() => {
+    pendingMutationsRafId = 0;
+    const roots = Array.from(pendingMutationNodes);
+    pendingMutationNodes.clear();
+    const atoms = /* @__PURE__ */ new Set();
+    for (const node of roots) {
+      if (Node.ELEMENT_NODE !== node.nodeType) {
+        continue;
       }
-      onElementRender({ element: el, elementType: eType, elementId: id });
-    });
+      collectAtomicElementsInSubtree(node).forEach((atom) => {
+        atoms.add(atom);
+      });
+    }
+    atoms.forEach((atom) => triggerAtomicRender(atom));
   });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -182,6 +182,10 @@ var cleanupOnUnmount = (element) => {
 };
 
 // src/init.ts
+var ATOMIC_SELECTOR = "[data-e-type]";
+var domMutationObserverStarted = false;
+var pendingMutationNodes = /* @__PURE__ */ new Set();
+var pendingMutationsRafId = 0;
 function init() {
   window.addEventListener("elementor/element/render", (_event) => {
     const event = _event;
@@ -193,15 +197,79 @@ function init() {
     const { id, type, element } = event.detail;
     onElementDestroy({ elementType: type, elementId: id, element });
   });
-  document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll("[data-e-type]").forEach((element) => {
-      const el = element;
-      const { eType, id } = el.dataset;
-      if (!eType || !id) {
-        return;
+  const bootDomHandlers = () => {
+    scanDocumentForAtomicElements();
+    startObservingDomForNewAtomicElements();
+  };
+  document.addEventListener("DOMContentLoaded", bootDomHandlers);
+  if ("loading" !== document.readyState) {
+    bootDomHandlers();
+  }
+}
+function triggerAtomicRender(atom) {
+  const eType = atom.dataset.eType;
+  const id = atom.dataset.id;
+  if (!eType || !id) {
+    return;
+  }
+  onElementRender({ element: atom, elementType: eType, elementId: id });
+}
+function collectAtomicElementsInSubtree(root) {
+  const found = [];
+  if (root.matches(ATOMIC_SELECTOR)) {
+    found.push(root);
+  }
+  root.querySelectorAll(ATOMIC_SELECTOR).forEach((el) => {
+    found.push(el);
+  });
+  return found;
+}
+function scanDocumentForAtomicElements() {
+  document.querySelectorAll(ATOMIC_SELECTOR).forEach((el) => {
+    const atom = el;
+    const { eType, id } = atom.dataset;
+    if (!eType || !id) {
+      return;
+    }
+    triggerAtomicRender(atom);
+  });
+}
+function startObservingDomForNewAtomicElements() {
+  if (domMutationObserverStarted || "undefined" === typeof MutationObserver) {
+    return;
+  }
+  domMutationObserverStarted = true;
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      mutation.addedNodes.forEach((node) => {
+        pendingMutationNodes.add(node);
+      });
+    }
+    queueProcessPendingMutationNodes();
+  });
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true
+  });
+}
+function queueProcessPendingMutationNodes() {
+  if (pendingMutationsRafId || !pendingMutationNodes.size) {
+    return;
+  }
+  pendingMutationsRafId = requestAnimationFrame(() => {
+    pendingMutationsRafId = 0;
+    const roots = Array.from(pendingMutationNodes);
+    pendingMutationNodes.clear();
+    const atoms = /* @__PURE__ */ new Set();
+    for (const node of roots) {
+      if (Node.ELEMENT_NODE !== node.nodeType) {
+        continue;
       }
-      onElementRender({ element: el, elementType: eType, elementId: id });
-    });
+      collectAtomicElementsInSubtree(node).forEach((atom) => {
+        atoms.add(atom);
+      });
+    }
+    atoms.forEach((atom) => triggerAtomicRender(atom));
   });
 }
 export {

package/package.json

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

package/src/init.ts

@@ -1,5 +1,11 @@
 import { onElementDestroy, onElementRender } from './lifecycle-events';
 
+const ATOMIC_SELECTOR = '[data-e-type]';
+
+let domMutationObserverStarted = false;
+const pendingMutationNodes = new Set< Node >();
+let pendingMutationsRafId = 0;
+
 export function init() {
 	window.addEventListener( 'elementor/element/render', ( _event ) => {
 		const event = _event as CustomEvent< { id: string; type: string; element: Element } >;
@@ -15,17 +21,102 @@ export function init() {
 		onElementDestroy( { elementType: type, elementId: id, element } );
 	} );
 
-	// 'elementor/element/render' doesn't fire on the frontend
-	document.addEventListener( 'DOMContentLoaded', () => {
-		document.querySelectorAll( '[data-e-type]' ).forEach( ( element ) => {
-			const el = element as HTMLElement;
-			const { eType, id } = el.dataset;
+	const bootDomHandlers = () => {
+		scanDocumentForAtomicElements();
+		startObservingDomForNewAtomicElements();
+	};
+
+	document.addEventListener( 'DOMContentLoaded', bootDomHandlers );
+
+	if ( 'loading' !== document.readyState ) {
+		bootDomHandlers();
+	}
+}
+
+function triggerAtomicRender( atom: HTMLElement ) {
+	const eType = atom.dataset.eType;
+	const id = atom.dataset.id;
+
+	if ( ! eType || ! id ) {
+		return;
+	}
+
+	onElementRender( { element: atom, elementType: eType, elementId: id } );
+}
+
+function collectAtomicElementsInSubtree( root: Element ): HTMLElement[] {
+	const found: HTMLElement[] = [];
+
+	if ( root.matches( ATOMIC_SELECTOR ) ) {
+		found.push( root as HTMLElement );
+	}
+
+	root.querySelectorAll( ATOMIC_SELECTOR ).forEach( ( el ) => {
+		found.push( el as HTMLElement );
+	} );
+
+	return found;
+}
+
+function scanDocumentForAtomicElements() {
+	document.querySelectorAll( ATOMIC_SELECTOR ).forEach( ( el ) => {
+		const atom = el as HTMLElement;
+		const { eType, id } = atom.dataset;
+
+		if ( ! eType || ! id ) {
+			return;
+		}
 
-			if ( ! eType || ! id ) {
-				return;
+		triggerAtomicRender( atom );
+	} );
+}
+
+function startObservingDomForNewAtomicElements() {
+	if ( domMutationObserverStarted || 'undefined' === typeof MutationObserver ) {
+		return;
+	}
+
+	domMutationObserverStarted = true;
+
+	const observer = new MutationObserver( ( mutations ) => {
+		for ( const mutation of mutations ) {
+			mutation.addedNodes.forEach( ( node ) => {
+				pendingMutationNodes.add( node );
+			} );
+		}
+
+		queueProcessPendingMutationNodes();
+	} );
+
+	observer.observe( document.documentElement, {
+		childList: true,
+		subtree: true,
+	} );
+}
+
+function queueProcessPendingMutationNodes() {
+	if ( pendingMutationsRafId || ! pendingMutationNodes.size ) {
+		return;
+	}
+
+	pendingMutationsRafId = requestAnimationFrame( () => {
+		pendingMutationsRafId = 0;
+
+		const roots = Array.from( pendingMutationNodes );
+		pendingMutationNodes.clear();
+
+		const atoms = new Set< HTMLElement >();
+
+		for ( const node of roots ) {
+			if ( Node.ELEMENT_NODE !== node.nodeType ) {
+				continue;
 			}
 
-			onElementRender( { element: el, elementType: eType, elementId: id } );
-		} );
+			collectAtomicElementsInSubtree( node as Element ).forEach( ( atom ) => {
+				atoms.add( atom );
+			} );
+		}
+
+		atoms.forEach( ( atom ) => triggerAtomicRender( atom ) );
 	} );
 }