@lightningjs/blits 1.38.2 → 1.38.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.38.3
+
+_4 Sept 2025_
+
+- Fixed clearing of `idle` and `frameTick` hooks upon component destroy
+- Fixed updating of router state to before init hook
+
 ## v1.38.2
 
 _1 Sept 2025_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.38.2",
+  "version": "1.38.3",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/component/base/methods.js

@@ -21,6 +21,7 @@ import eventListeners from '../../lib/eventListeners.js'
 import { trigger } from '../../lib/reactivity/effect.js'
 import { Log } from '../../lib/log.js'
 import { removeGlobalEffects } from '../../lib/reactivity/effect.js'
+import { renderer } from '../../launch.js'
 
 export default {
   focus: {
@@ -83,6 +84,17 @@ export default {
       this.$clearTimeouts()
       this.$clearIntervals()
       eventListeners.removeListeners(this)
+
+      const rendererEventListenersLength = this[symbols.rendererEventListeners].length
+      if (rendererEventListenersLength > 0) {
+        for (let i = 0; i < rendererEventListenersLength; i++) {
+          const eventListener = this[symbols.rendererEventListeners][i]
+          renderer.off(eventListener.event, eventListener.cb)
+        }
+      }
+
+      this[symbols.rendererEventListeners] = null
+
       deleteChildren(this[symbols.children])
       this[symbols.children].length = 0
       removeGlobalEffects(this[symbols.effects])

package/src/component.js

@@ -263,19 +263,22 @@ const Component = (name = required('name'), config = required('config')) => {
     // create a reference to an array of children that are slots
     this[symbols.slots] = this[symbols.children].filter((child) => child[symbols.isSlot])
 
+    this[symbols.rendererEventListeners] = []
     // register hooks if component has hooks specified
     if (config.hooks) {
       // frame tick event
       if (config.hooks.frameTick) {
-        renderer.on('frameTick', (r, data) =>
-          emit('frameTick', this[symbols.identifier], this, [data])
-        )
+        const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
+        this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
+        renderer.on('frameTick', cb)
       }
 
       if (config.hooks.idle) {
-        renderer.on('idle', () => {
+        const cb = () => {
           emit('idle', this[symbols.identifier], this)
-        })
+        }
+        this[symbols.rendererEventListeners].push({ event: 'idle', cb })
+        renderer.on('idle', cb)
       }
 
       // inBounds event emiting a lifecycle attach event

package/src/lib/symbols.js

@@ -7,6 +7,7 @@
  * @property {symbol} cursorTagStart
  * @property {symbol} computedKeys
  * @property {symbol} destroy
+ * @property {symbol} rendererEventListeners
  * @property {symbol} getChildren
  * @property {symbol} holder
  * @property {symbol} id
@@ -59,6 +60,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  rendererEventListeners: Symbol('rendererEventListeners'),
   getChildren: Symbol('getChildren'),
   holder: Symbol('holder'),
   id: Symbol('id'),

package/src/router/router.js

@@ -233,6 +233,7 @@ export const navigate = async function () {
         ...navigationData,
         ...queryParamsData,
       }
+
       // Adding the location hash to the route if it exists.
       if (hash !== null) {
         route.hash = hash
@@ -314,6 +315,13 @@ export const navigate = async function () {
         Announcer.speak(route.announce.message, route.announce.politeness)
       }
 
+      // Update router state after announcements and final route resolution,
+      // right before initializing or restoring the view
+      state.path = route.path
+      state.params = route.params || {}
+      state.hash = route.hash
+      state.data = route.data || {}
+
       if (!view) {
         // create a holder element for the new view
         holder = stage.element({ parent: this[symbols.children][0] })
@@ -396,11 +404,6 @@ export const navigate = async function () {
         }
       }
 
-      state.path = route.path
-      state.params = route.params
-      state.hash = hash
-      state.data = route.data
-
       // apply in transition
       if (route.transition.in) {
         if (Array.isArray(route.transition.in)) {