@lightningjs/blits 1.43.2 → 1.44.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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_

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.2",
+  "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' ||