Merge pull request #58 from lightning-js/feature/frametick-hook

Feature/frametick hook

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,22 +148,22 @@ 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
 
     /**
     * 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
     */

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'
@@ -115,6 +116,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

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) => {