@lightningjs/blits 1.43.1 → 1.44.0

package/CHANGELOG.md

@@ -1,8 +1,23 @@
 # Changelog
 
+## v1.44.0
+
+_20 Nov 2025_
+
+- Added `$input` method to facilitate key handling _without_ also passing focus
+- Added support for passing `type` of image in the `src`-attribute (`regular`, `svg`, `compressed` for cases the file type can't be derived from the file name)
+- Bumped Lightning renderer to v2.20.0 with improved support for compressed textures
+
+
+## v1.43.2
+
+_13 Nov 2025_
+
+- Fixed issue with endless loop in router when first page in history would fail an async before / beforeEach hook (introduced in v1.43.0)
+
 ## v1.43.1
 
-_12 Nov 2025_
+_13 Nov 2025_
 
 - Added arguments of fpsUpdate and frameTick hooks to type definitions
 

package/index.d.ts

@@ -431,6 +431,12 @@ declare module '@lightningjs/blits' {
     * Set focus to the Component, optionally pass a KeyboardEvent for instant event bubbling
     */
     $focus: (event?: KeyboardEvent) => void
+    /**
+     * Handle a keyboard event on this component without changing focus
+     * @param event - The keyboard event to handle
+     * @returns Returns true if this component or a parent component handled the event, false otherwise
+     */
+    $input: (event: KeyboardEvent) => boolean
     /**
      * @deprecated
      * Deprecated:  use `this.$focus()` instead

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.43.1",
+  "version": "1.44.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.2.0",
-    "@lightningjs/renderer": "^2.19.1"
+    "@lightningjs/renderer": "^2.20.0"
   },
   "repository": {
     "type": "git",

package/src/application.js

@@ -20,28 +20,16 @@ import { default as Focus, keyUpCallbacks } from './focus.js'
 import Settings from './settings.js'
 
 import symbols from './lib/symbols.js'
-import { DEFAULT_HOLD_TIMEOUT_MS } from './constants.js'
+import { DEFAULT_HOLD_TIMEOUT_MS, DEFAULT_KEYMAP } from './constants.js'
 
-const Application = (config) => {
-  const defaultKeyMap = {
-    ArrowLeft: 'left',
-    ArrowRight: 'right',
-    ArrowUp: 'up',
-    ArrowDown: 'down',
-    Enter: 'enter',
-    ' ': 'space',
-    Backspace: 'back',
-    Escape: 'escape',
-    37: 'left',
-    39: 'right',
-    38: 'up',
-    40: 'down',
-    13: 'enter',
-    32: 'space',
-    8: 'back',
-    27: 'escape',
-  }
+/**
+ * Merged keyMap (default + custom settings).
+ * Initialized once during application init.
+ * @type {Object<string, string>}
+ */
+export let keyMap = {}
 
+const Application = (config) => {
   config.hooks = config.hooks || {}
 
   let keyDownHandler
@@ -63,7 +51,8 @@ const Application = (config) => {
     if (announcerOptions && typeof announcerOptions === 'object') {
       this.$announcer.configure(announcerOptions)
     }
-    const keyMap = { ...defaultKeyMap, ...Settings.get('keymap', {}) }
+    // Initialize merged keyMap once during application init
+    keyMap = { ...DEFAULT_KEYMAP, ...Settings.get('keymap', {}) }
 
     /** @type {number} Input throttle time in milliseconds (0 = disabled) */
     const throttleMs = Settings.get('inputThrottle', 0)

package/src/component/base/methods.js

@@ -17,11 +17,13 @@
 
 import symbols from '../../lib/symbols.js'
 import Focus from '../../focus.js'
+import { keyUpCallbacks, getComponentWithInputEvent } from '../../focus.js'
 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'
+import { keyMap } from '../../application.js'
 
 export default {
   focus: {
@@ -51,6 +53,41 @@ export default {
     enumerable: true,
     configurable: false,
   },
+  $input: {
+    /**
+     * Handle a keyboard event on this component without changing focus
+     * @this {import('../../component').BlitsComponent}
+     * @param {KeyboardEvent} event - The keyboard event to handle
+     * @returns {boolean} - Returns true if this component or a parent component handled the event, false otherwise
+     */
+    value: function (event) {
+      if (event === null || event === undefined || event instanceof KeyboardEvent === false)
+        return false
+
+      const key = keyMap[event.key] || keyMap[event.keyCode] || event.key || event.keyCode
+
+      const componentWithInputEvent = getComponentWithInputEvent(this, key)
+      if (componentWithInputEvent === null) return false
+
+      const inputEvents = componentWithInputEvent[symbols.inputEvents] || {}
+
+      let cb
+      if (inputEvents[key]) {
+        cb = inputEvents[key].call(componentWithInputEvent, event)
+      } else if (inputEvents.any) {
+        cb = inputEvents.any.call(componentWithInputEvent, event)
+      }
+
+      if (cb !== undefined && event.code) {
+        keyUpCallbacks.set(event.code, cb)
+      }
+
+      return true
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
   unfocus: {
     /**
      * @this {import('../../component').BlitsComponent}

package/src/constants.js

@@ -1,5 +1,24 @@
 export const DEFAULT_HOLD_TIMEOUT_MS = 50
 
+export const DEFAULT_KEYMAP = {
+  ArrowLeft: 'left',
+  ArrowRight: 'right',
+  ArrowUp: 'up',
+  ArrowDown: 'down',
+  Enter: 'enter',
+  ' ': 'space',
+  Backspace: 'back',
+  Escape: 'escape',
+  37: 'left',
+  39: 'right',
+  38: 'up',
+  40: 'down',
+  13: 'enter',
+  32: 'space',
+  8: 'back',
+  27: 'escape',
+}
+
 export const SCREEN_RESOLUTIONS = {
   hd: 0.66666667,
   '720p': 0.66666667,

package/src/engines/L3/element.js

@@ -168,7 +168,7 @@ const isObjectString = (str) => {
  * @returns {object} The parsed object.
  */
 const parseToObject = (str) => {
-  return JSON.parse(str.replace(/'/g, '"').replace(/([\w-_]+)\s*:/g, '"$1":'))
+  return JSON.parse(str.replace(/'/g, '"').replace(/([{,]\s*)([\w-_]+)(\s*:)/g, '$1"$2"$3'))
 }
 
 /**
@@ -276,7 +276,13 @@ const propsTransformer = {
     }
   },
   set src(v) {
-    this.props['src'] = v
+    if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      this.props['src'] = v.src
+      this.props['imageType'] = v.type
+    } else {
+      this.props['src'] = v
+    }
+
     if (this.raw['color'] === undefined) {
       this.props['color'] = this.props['src'] ? 0xffffffff : 0x00000000
     }

package/src/focus.js

@@ -118,7 +118,7 @@ const getAncestors = (components) => {
  * @param {String} key
  * @returns component
  */
-const getComponentWithInputEvent = (component, key) => {
+export const getComponentWithInputEvent = (component, key) => {
   if (
     component[symbols.inputEvents] &&
     (typeof component[symbols.inputEvents][key] === 'function' ||

package/src/router/router.js

@@ -267,13 +267,15 @@ export const navigate = async function () {
           } catch (error) {
             Log.error('Error or Rejected Promise in "BeforeEach" Hook', error)
 
-            preventHashChangeNavigation = true
-            currentRoute = previousRoute
-            window.history.back()
+            if (history.length > 0) {
+              preventHashChangeNavigation = true
+              currentRoute = previousRoute
+              window.history.back()
 
-            navigatingBack = false
-            state.navigating = false
-            return
+              navigatingBack = false
+              state.navigating = false
+              return
+            }
           }
           // If the resolved result is an object, redirect if the path in the object was changed
           if (isObject(beforeEachResult) === true && beforeEachResult.path !== currentPath) {
@@ -282,7 +284,7 @@ export const navigate = async function () {
             return
           }
           // If the resolved result is false, cancel navigation
-          if (beforeEachResult === false) {
+          if (beforeEachResult === false && history.length > 0) {
             preventHashChangeNavigation = true
             currentRoute = previousRoute
             window.history.back()
@@ -306,13 +308,15 @@ export const navigate = async function () {
         } catch (error) {
           Log.error('Error or Rejected Promise in "Before" Hook', error)
 
-          preventHashChangeNavigation = true
-          currentRoute = previousRoute
-          window.history.back()
+          if (history.length > 0) {
+            preventHashChangeNavigation = true
+            currentRoute = previousRoute
+            window.history.back()
 
-          navigatingBack = false
-          state.navigating = false
-          return
+            navigatingBack = false
+            state.navigating = false
+            return
+          }
         }
         // If the resolved result is an object, redirect if the path in the object was changed
         if (isObject(beforeHookOutput) === true && beforeHookOutput.path !== currentPath) {
@@ -321,7 +325,7 @@ export const navigate = async function () {
           return
         }
         // If the resolved result is false, cancel navigation
-        if (beforeHookOutput === false) {
+        if (beforeHookOutput === false && history.length > 0) {
           preventHashChangeNavigation = true
           currentRoute = previousRoute
           window.history.back()