@domql/element 2.5.188 → 2.5.191

package/create.js

@@ -22,7 +22,7 @@ import {
   addChildrenIfNotInOriginal
 } from '@domql/utils'
 
-import { triggerEventOn } from '@domql/event'
+import { applyAnimationFrame, triggerEventOn } from '@domql/event'
 import { assignNode } from '@domql/render'
 import { createState } from '@domql/state'
 
@@ -256,11 +256,15 @@ const renderElement = async (element, parent, options, attachOptions) => {
   // assign NODE
   assignNode(element, parent, key, attachOptions)
 
-  // run `on.renderRouter`
-  await triggerEventOn('renderRouter', element, options)
+  // apply events
+  applyAnimationFrame(element, options)
 
   // run `on.render`
   await triggerEventOn('render', element, options)
+  // triggerEventOn('render', element, options).then(() => {})
+
+  // run `on.renderRouter`
+  await triggerEventOn('renderRouter', element, options)
 
   // run `on.done`
   await triggerEventOn('done', element, options)

package/dist/cjs/create.js

@@ -211,8 +211,9 @@ const renderElement = async (element, parent, options, attachOptions) => {
     return element;
   }
   (0, import_render.assignNode)(element, parent, key, attachOptions);
-  await (0, import_event.triggerEventOn)("renderRouter", element, options);
+  (0, import_event.applyAnimationFrame)(element, options);
   await (0, import_event.triggerEventOn)("render", element, options);
+  await (0, import_event.triggerEventOn)("renderRouter", element, options);
   await (0, import_event.triggerEventOn)("done", element, options);
   await (0, import_event.triggerEventOn)("create", element, options);
 };

package/dist/cjs/node.js

@@ -65,7 +65,6 @@ const createNode = async (element, options) => {
   (0, import_iterate.throughInitialExec)(element);
   if (element.tag !== "string" && element.tag !== "fragment") {
     (0, import_propEvents.propagateEventsFromProps)(element);
-    (0, import_event.applyAnimationFrame)(element, options);
     if (isNewNode && (0, import_utils.isObject)(element.on)) {
       (0, import_event.applyEventsOnNode)(element, options);
     }
@@ -84,7 +83,12 @@ const createNode = async (element, options) => {
           await (0, import_create.default)((0, import_utils.exec)(value, element), element, param, options);
         };
         if (element.props && element.props.lazyLoad || options.lazyLoad) {
-          window.requestAnimationFrame(async () => await createAsync());
+          window.requestAnimationFrame(async () => {
+            await createAsync();
+            if (!options.preventUpdateListener) {
+              (0, import_event.triggerEventOn)("lazyLoad", element, options);
+            }
+          });
         } else
           await createAsync();
       }

package/dist/cjs/set.js

@@ -85,7 +85,12 @@ const set = function(params, options = {}, el) {
       props.ignoreChildProps = true;
     }
     if (lazyLoad) {
-      window.requestAnimationFrame(() => resetElement(params, element, options));
+      window.requestAnimationFrame(() => {
+        resetElement(params, element, options);
+        if (!options.preventUpdateListener) {
+          (0, import_event.triggerEventOn)("lazyLoad", element, options);
+        }
+      });
     } else
       resetElement(params, element, options);
   }

package/dist/cjs/update.js

@@ -143,7 +143,12 @@ const update = function(params = {}, opts) {
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
-      lazyLoad ? import_utils.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
+      lazyLoad ? import_utils.window.requestAnimationFrame(() => {
+        childUpdateCall();
+        if (!options.preventUpdateListener) {
+          (0, import_event.triggerEventOn)("lazyLoad", element, options);
+        }
+      }) : childUpdateCall();
     }
   }
   if (!preventUpdateListener)

package/dist/esm/create.js

@@ -18,7 +18,7 @@ import {
   detectInfiniteLoop,
   addChildrenIfNotInOriginal
 } from "@domql/utils";
-import { triggerEventOn } from "@domql/event";
+import { applyAnimationFrame, triggerEventOn } from "@domql/event";
 import { assignNode } from "@domql/render";
 import { createState } from "@domql/state";
 import { isMethod } from "./methods/index.js";
@@ -197,8 +197,9 @@ const renderElement = async (element, parent, options, attachOptions) => {
     return element;
   }
   assignNode(element, parent, key, attachOptions);
-  await triggerEventOn("renderRouter", element, options);
+  applyAnimationFrame(element, options);
   await triggerEventOn("render", element, options);
+  await triggerEventOn("renderRouter", element, options);
   await triggerEventOn("done", element, options);
   await triggerEventOn("create", element, options);
 };

package/dist/esm/node.js

@@ -1,5 +1,5 @@
 import { exec, isFunction, isObject, isUndefined, isVariant } from "@domql/utils";
-import { applyEventsOnNode, triggerEventOn, applyAnimationFrame } from "@domql/event";
+import { applyEventsOnNode, triggerEventOn } from "@domql/event";
 import { cacheNode } from "@domql/render";
 import { isMethod } from "./methods/index.js";
 import create from "./create.js";
@@ -35,7 +35,6 @@ const createNode = async (element, options) => {
   throughInitialExec(element);
   if (element.tag !== "string" && element.tag !== "fragment") {
     propagateEventsFromProps(element);
-    applyAnimationFrame(element, options);
     if (isNewNode && isObject(element.on)) {
       applyEventsOnNode(element, options);
     }
@@ -54,7 +53,12 @@ const createNode = async (element, options) => {
           await create(exec(value, element), element, param, options);
         };
         if (element.props && element.props.lazyLoad || options.lazyLoad) {
-          window.requestAnimationFrame(async () => await createAsync());
+          window.requestAnimationFrame(async () => {
+            await createAsync();
+            if (!options.preventUpdateListener) {
+              triggerEventOn("lazyLoad", element, options);
+            }
+          });
         } else
           await createAsync();
       }

package/dist/esm/set.js

@@ -59,7 +59,12 @@ const set = function(params, options = {}, el) {
       props.ignoreChildProps = true;
     }
     if (lazyLoad) {
-      window.requestAnimationFrame(() => resetElement(params, element, options));
+      window.requestAnimationFrame(() => {
+        resetElement(params, element, options);
+        if (!options.preventUpdateListener) {
+          triggerEventOn("lazyLoad", element, options);
+        }
+      });
     } else
       resetElement(params, element, options);
   }

package/dist/esm/update.js

@@ -133,7 +133,12 @@ const update = function(params = {}, opts) {
         currentSnapshot: snapshotOnCallee,
         calleeElement
       });
-      lazyLoad ? window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
+      lazyLoad ? window.requestAnimationFrame(() => {
+        childUpdateCall();
+        if (!options.preventUpdateListener) {
+          triggerEventOn("lazyLoad", element, options);
+        }
+      }) : childUpdateCall();
     }
   }
   if (!preventUpdateListener)

package/node.js

@@ -1,7 +1,7 @@
 'use strict'
 
 import { exec, isFunction, isObject, isUndefined, isVariant } from '@domql/utils'
-import { applyEventsOnNode, triggerEventOn, applyAnimationFrame } from '@domql/event'
+import { applyEventsOnNode, triggerEventOn } from '@domql/event'
 import { cacheNode } from '@domql/render'
 import { isMethod } from './methods/index.js'
 
@@ -37,7 +37,6 @@ export const createNode = async (element, options) => {
     // trigger `on.attachNode`
     triggerEventOn('attachNode', element, options)
   }
-
   // node.dataset // .key = element.key
 
   if (ENV === 'test' || ENV === 'development' || options.alowRefReference) {
@@ -57,9 +56,6 @@ export const createNode = async (element, options) => {
   if (element.tag !== 'string' && element.tag !== 'fragment') {
     propagateEventsFromProps(element)
 
-    // apply events
-    applyAnimationFrame(element, options)
-
     if (isNewNode && isObject(element.on)) {
       applyEventsOnNode(element, options)
     }
@@ -86,7 +82,13 @@ export const createNode = async (element, options) => {
         }
 
         if ((element.props && element.props.lazyLoad) || options.lazyLoad) {
-          window.requestAnimationFrame(async () => await createAsync())
+          window.requestAnimationFrame(async () => {
+            await createAsync()
+            // handle lazy load
+            if (!options.preventUpdateListener) {
+              triggerEventOn('lazyLoad', element, options)
+            }
+          })
         } else await createAsync()
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domql/element",
-  "version": "2.5.188",
+  "version": "2.5.191",
   "license": "MIT",
   "type": "module",
   "module": "index.js",
@@ -27,12 +27,12 @@
     "prepublish": "rimraf -I dist && npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/event": "^2.5.187",
-    "@domql/render": "^2.5.187",
-    "@domql/state": "^2.5.187",
+    "@domql/event": "^2.5.190",
+    "@domql/render": "^2.5.190",
+    "@domql/state": "^2.5.190",
     "@domql/utils": "^2.5.187"
   },
-  "gitHead": "b240e178ba2f5c7a6d0f8fd28bbe7936e086642c",
+  "gitHead": "5d4f4461533c18d4ed4524c1631d8dee17452e93",
   "devDependencies": {
     "@babel/core": "^7.12.0"
   }

package/set.js

@@ -63,7 +63,13 @@ export const set = function (params, options = {}, el) {
     }
 
     if (lazyLoad) {
-      window.requestAnimationFrame(() => resetElement(params, element, options))
+      window.requestAnimationFrame(() => {
+        resetElement(params, element, options)
+        // handle lazy load
+        if (!options.preventUpdateListener) {
+          triggerEventOn('lazyLoad', element, options)
+        }
+      })
     } else resetElement(params, element, options)
   }
 

package/update.js

@@ -152,7 +152,13 @@ export const update = function (params = {}, opts) {
         calleeElement
       })
 
-      lazyLoad ? window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall()
+      lazyLoad ? window.requestAnimationFrame(() => { // eslint-disable-line
+        childUpdateCall()
+        // handle lazy load
+        if (!options.preventUpdateListener) {
+          triggerEventOn('lazyLoad', element, options)
+        }
+      }) : childUpdateCall()
     }
   }