From fa7a4d17ba6da931d4d4a0a6252de165c900bdae Mon Sep 17 00:00:00 2001
From: Michiel van der Geest <hello@michielvandergeest.com>
Date: Wed, 14 Feb 2024 15:53:43 +0100
Subject: [PATCH] Added hook to tap into the frameTick event.

---
 src/component.d.ts | 18 ++++++++++++------
 src/component.js   |  4 ++++
 src/lib/hooks.js   |  4 ++--
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/component.d.ts b/src/component.d.ts
index 345d5603..f99fb057 100644
--- a/src/component.d.ts
+++ b/src/component.d.ts
@@ -124,7 +124,13 @@ declare namespace Component {
     /**
     * Fires when the Component is being destroyed and removed.
     */
-    destroy?: (this: ComponentInstance) => void
+    destroy?: (this: ComponentInstance) => void,
+    /**
+    * Fires upon each frame start  (allowing you to tap directly into the renderloop)
+    *
+    * Note: This hook will fire continuously, multiple times per second!
+    */
+    frameTick?: (this: ComponentInstance) => void
   }
 
   export interface ComponentInstance {
@@ -142,9 +148,9 @@ declare namespace Component {
     * Set a timeout that is automatically cleaned upon component destroy
     */
     $setTimeout: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setTimeout>
-    
+
     /**
-    * Clear a timeout 
+    * Clear a timeout
     */
     $clearTimeout: (id: ReturnType<typeof setTimeout>) => void
 
@@ -152,12 +158,12 @@ declare namespace Component {
     * Set an interval that is automatically cleaned upon component destroy
     */
     $setInterval: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setInterval>
-    
+
     /**
-    * Clear a interval 
+    * Clear a interval
     */
     $clearInterval: (id: ReturnType<typeof setInterval>) => void
-    
+
     /**
     * Log to the console with prettier output and configurable debug levels in Settings
     */
diff --git a/src/component.js b/src/component.js
index 075d4acd..3bc92125 100644
--- a/src/component.js
+++ b/src/component.js
@@ -19,6 +19,7 @@ import parser from './lib/templateparser/parser.js'
 import codegenerator from './lib/codegenerator/generator.js'
 
 import element from './element.js'
+import { renderer } from './launch.js'
 
 import { createHumanReadableId, createInternalId } from './lib/componentId.js'
 import { registerHooks, emit, privateEmit } from './lib/hooks.js'
@@ -117,6 +118,9 @@ const Component = (name = required('name'), config = required('config')) => {
     if (!component.setup) {
       setupComponent(this.lifecycle, parentComponent)
     }
+    if (config.hooks && config.hooks.frameTick) {
+      renderer.on('frameTick', (r, data) => emit('frameTick', name, this, [data]))
+    }
 
     this.parent = parentComponent
     this[symbols.wrapper] = parentEl
diff --git a/src/lib/hooks.js b/src/lib/hooks.js
index a8f528b3..622bf292 100644
--- a/src/lib/hooks.js
+++ b/src/lib/hooks.js
@@ -19,8 +19,8 @@ import symbols from './symbols.js'
 
 const cbs = {}
 
-export const emit = (hook, name, scope) => {
-  cbs[name] && cbs[name][hook] && cbs[name][hook].apply(scope)
+export const emit = (hook, name, scope, data = []) => {
+  cbs[name] && cbs[name][hook] && cbs[name][hook].apply(scope, data)
 }
 
 export const privateEmit = (hook, name, scope) => {