animationFrame updates

packages/element/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,6 +256,9 @@ const renderElement = async (element, parent, options, attachOptions) => {
   // assign NODE
   assignNode(element, parent, key, attachOptions)
 
+  // apply events
+  applyAnimationFrame(element, options)
+
   // run `on.renderRouter`
   await triggerEventOn('renderRouter', element, options)
 

packages/element/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)
     }

packages/event/animationFrame.js

@@ -0,0 +1,43 @@
+'use strict'
+
+export const registerFrameListener = (el) => {
+  const { __ref: ref } = el
+  const { frameListeners } = ref.root.data
+
+  // Check if frameListeners exists and the element is not already in the Set
+  if (frameListeners && !frameListeners.has(el)) {
+    frameListeners.add(el) // Add the element to the Set
+  }
+}
+
+export const applyAnimationFrame = (element, options) => {
+  const { props, on, __ref: ref } = element
+  const { frameListeners } = ref.root.data
+  if (frameListeners && (on?.frame || props?.onFrame)) {
+    registerFrameListener(element)
+  }
+}
+
+export const initAnimationFrame = (ctx) => {
+  const frameListeners = new Set()
+
+  function requestFrame () {
+    // Iterate over frameListeners
+    for (const element of frameListeners) {
+      if (!element.parent.node.contains(element.node)) {
+        frameListeners.delete(element) // Remove if node has no parent
+      } else {
+        try {
+          (element.on.frame || element.props.onFrame)(element, element.state, element.context)
+        } catch (e) {
+          console.warn(e)
+        }
+      }
+    }
+    window.requestAnimationFrame(requestFrame)
+  }
+
+  requestFrame()
+
+  return frameListeners
+}

packages/event/index.js

@@ -2,3 +2,4 @@
 
 export * from './on.js'
 export * from './can.js'
+export * from './animationFrame.js'

packages/event/on.js

@@ -24,20 +24,11 @@ export const applyEventUpdate = (param, updatedObj, element, state, context, opt
   return param.call(element, updatedObj, element, state || element.state, context || element.context, options)
 }
 
-export const triggerEventOnUpdate = (param, updatedObj, element, options) => {
+export const triggerEventOnUpdate = async (param, updatedObj, element, options) => {
   const appliedFunction = getOnOrPropsEvent(param, element)
   if (appliedFunction) {
     const { state, context } = element
-    return applyEventUpdate(appliedFunction, updatedObj, element, state, context, options)
-  }
-}
-
-export const applyAnimationFrame = (element, options) => {
-  const { props, on, __ref: ref } = element
-  const { frameListeners } = ref.root.data
-  if (frameListeners && (on?.frame || props?.onFrame)) {
-    const { registerFrameListener } = element.context.utils
-    if (registerFrameListener) registerFrameListener(element)
+    return await applyEventUpdate(appliedFunction, updatedObj, element, state, context, options)
   }
 }
 
@@ -64,9 +55,9 @@ export const applyEventsOnNode = (element, options) => {
 
     const appliedFunction = getOnOrPropsEvent(param, element)
     if (isFunction(appliedFunction)) {
-      node.addEventListener(param, event => {
+      node.addEventListener(param, async event => {
         const { state, context } = element
-        appliedFunction.call(element, event, element, state, context, options)
+        await appliedFunction.call(element, event, element, state, context, options)
       })
     }
   }