@lightningjs/blits 1.48.0 → 1.49.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
 
+## v1.49.0
+
+_20 feb 2026_
+
+- Added `data-blits-renderstate` inspector attribute
+- Fixed `data-blits-hasfocus` inspector attribute to always be available
+- Added boolean attribute to `idle` lifecycle hook to indicate `idle` or `active` state
+- Fixed type definitions for
+- Fixed double processiong of reactivity guard
+
 ## v1.48.0
 
 _10 feb 2026_

package/index.d.ts

@@ -201,11 +201,14 @@ declare module '@lightningjs/blits' {
     */
     exit?: () => void;
     /**
-    * Fires when the renderer is done rendering and enters an idle state
+    * Fires when the renderer is done rendering and enters an idle state (idle = true)
+    * and when the renderer starts rendering again and leaves the idle state (idle = false)
+    *
+    * @param idle - boolean to indicate whether the renderer is in idle state or not
     *
     * Note: This event can fire multiple times
     */
-    idle?: () => void;
+    idle?: (idle: boolean) => void;
     /**
     * Fires at a predefined interval and reports the current FPS value
     *
@@ -666,9 +669,9 @@ declare module '@lightningjs/blits' {
 
   export interface RouterHooks {
     init?: () => Promise<void> | void;
-    beforeEach?: (to: Route, from: Route) => string | Route | Promise<string | Route> | void;
-    afterEach?: (to: Route, from: Route) => string | Route | Promise<string | Route> | void;
-    error?: (err: string) => string | Route | Promise<string | Route> | void;
+    beforeEach?: (to: Route, from: Route) => string | Route | void | boolean | Promise<string | Route | void | boolean>;
+    afterEach?: (to: Route, from: Route) => string | Route | void | boolean | Promise<string | Route | void | boolean>;
+    error?: (err: string) => string | Route | void | boolean | Promise<string | Route | void | boolean>;
   }
 
   export interface RouterConfig<P extends Props, S, M, C> {
@@ -694,13 +697,13 @@ declare module '@lightningjs/blits' {
 
     /**
      * Enable or disable RouterView history navigation on Back input
-     * 
+     *
      * @default true
-     * 
+     *
      * @remarks
      * This is an app-wide setting that affects all RouterView instances in your application.
      * The router state is global and shared across all router instances.
-     * 
+     *
      * @example
      * ```js
      * router: {
@@ -809,8 +812,8 @@ declare module '@lightningjs/blits' {
   }[keyof T]
 
   export interface RouteHooks {
-    before?: (to: Route, from: Route) => string | Route | Promise<string | Route>;
-    after?: (to: Route, from: Route) => string | Route | Promise<string | Route>;
+    before?: (to: Route, from: Route) => string | Route | void | boolean | Promise<string | Route | void | boolean>;
+    after?: (to: Route, from: Route) => string | Route | void | boolean | Promise<string | Route | void | boolean>;
   }
 
   export type Route = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.2.0",
-    "@lightningjs/renderer": "^2.21.0",
+    "@lightningjs/renderer": "^2.23.0",
     "magic-string": "^0.30.21"
   },
   "repository": {

package/scripts/prepublishOnly.js

@@ -19,7 +19,7 @@ import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 import compiler from '../src/lib/precompiler/precompiler.js'
-import { exec } from 'child_process'
+import childProcess from 'child_process'
 
 const currentDir = process.cwd()
 const componentDirs = ['src/components']
@@ -71,7 +71,7 @@ function processFile(filePath) {
 function formatFileWithESLint(filePath) {
   const command = `eslint "${filePath}" --fix`
 
-  exec(command, (error, stdout, stderr) => {
+  childProcess.exec(command, (error, stdout, stderr) => {
     if (error) {
       console.error(`Execution Error: ${error.message}`)
       console.error(`Exit Code: ${error.code}`)

package/src/component.js

@@ -267,33 +267,60 @@ const Component = (name = required('name'), config = required('config')) => {
     this[symbols.slots] = this[symbols.children].filter((child) => child[symbols.isSlot])
 
     this[symbols.rendererEventListeners] = []
+
+    if (this[symbols.holder] !== undefined && Settings.get('inspector', false)) {
+      this[symbols.holder].setInspectorMetadata({ 'blits-hasFocus': false })
+    }
+
+    // setup inspector data for render state
+    if (name === 'App' && Settings.get('inspector', false)) {
+      this.$setTimeout(() => {
+        const wrapperEl = this[symbols.wrapper]
+        const idleCb = () => {
+          wrapperEl.setInspectorMetadata({ 'blits-renderState': 'idle' })
+        }
+        const activeCb = () => {
+          wrapperEl.setInspectorMetadata({ 'blits-renderState': 'active' })
+        }
+        renderer.on('idle', idleCb)
+        renderer.on('active', activeCb)
+        this[symbols.rendererEventListeners].push({ event: 'idle', cb: idleCb })
+        this[symbols.rendererEventListeners].push({ event: 'active', cb: activeCb })
+      })
+    }
+
     // register hooks if component has hooks specified
     if (config.hooks) {
       // push to next tick to ensure
-      setTimeout(() => {
+      this.$setTimeout(() => {
         // frame tick event
         if (config.hooks.frameTick) {
-          const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
-          this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
+          const cb = (_r, data) => emit('frameTick', this[symbols.identifier], this, [data])
           renderer.on('frameTick', cb)
+          this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
         }
 
         // idle event
         if (config.hooks.idle) {
-          const cb = () => {
-            emit('idle', this[symbols.identifier], this)
+          const idleCb = () => {
+            emit('idle', this[symbols.identifier], this, [true])
           }
-          this[symbols.rendererEventListeners].push({ event: 'idle', cb })
-          renderer.on('idle', cb)
+          const activeCb = () => {
+            emit('idle', this[symbols.identifier], this, [false])
+          }
+          renderer.on('idle', idleCb)
+          renderer.on('active', activeCb)
+          this[symbols.rendererEventListeners].push({ event: 'idle', cb: idleCb })
+          this[symbols.rendererEventListeners].push({ event: 'active', cb: activeCb })
         }
 
         // fpsUpdate event
         if (config.hooks.fpsUpdate) {
-          const cb = (r, data) => {
+          const cb = (_r, data) => {
             emit('fpsUpdate', this[symbols.identifier], this, [data.fps])
           }
-          this[symbols.rendererEventListeners].push({ event: 'fpsUpdate', cb })
           renderer.on('fpsUpdate', cb)
+          this[symbols.rendererEventListeners].push({ event: 'fpsUpdate', cb })
         }
       })
 

package/src/lib/reactivityguard/computedprops.js

@@ -195,7 +195,7 @@ export default (code) => {
           if (thisRefs.size > 0) {
             // Skip if already modified
             if (
-              prop.body.includes(commentText) ||
+              prop.body.includes(commentText.trim()) ||
               Array.from(thisRefs).some((ref) => prop.body.startsWith(ref))
             ) {
               continue