@lightningjs/blits 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## v2.1.0
+
+_9 apr 2026_
+
+- Fixed left over `KeyboardEvent.code` references
+- Fixed issue with allowing $-prefix to be used as text content
+- Fixed issue with internal keyboard event not working on older browsers
+- Added tests to router hooks
+- Fixed issue with transitions not being skipped when duration is set to `0`
+- Added `this.$nextTick` utility helper
+- Fixed issue with transitioning colours in `border`-attribute
+
+## v2.0.1
+
+_23 mar 2026_
+
+- Fixed issue with height dimension of router view
+- Fixed issue with array or rounded corners not being reactive
+- Fixed issue with font not being mapped correctly when using `png` in the font config
+- Removed obsolete key config
+- Fixed reactivity guard in computed props to handle deep nested references more safely
+
 ## v2.0.0
 
 _20 mar 2026_

package/index.d.ts

@@ -474,6 +474,13 @@ declare module '@lightningjs/blits' {
     */
     $clearDebounces: () => void
 
+    /**
+    * Defer a callback to the next tick (setTimeout 0), automatically cleaned upon component destroy
+    * @param callback - Function to execute on the next tick
+    * @param args - Arguments to pass to the callback
+    */
+    $nextTick: (callback: (...args: any[]) => void, ...args: any[]) => ReturnType<typeof setTimeout>
+
     /**
     * Set an interval that is automatically cleaned upon component destroy
     */

package/package.json

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

package/src/application.js

@@ -118,9 +118,9 @@ const Application = (config) => {
     }
 
     keyUpHandler = (e) => {
-      const cb = keyUpCallbacks.get(e.code)
+      const cb = keyUpCallbacks.get(e.keyCode)
       if (cb !== undefined && typeof cb === 'function') {
-        keyUpCallbacks.delete(e.code)
+        keyUpCallbacks.delete(e.keyCode)
         cb()
       }
       clearTimeout(holdTimeout)

package/src/component/base/methods.js

@@ -51,7 +51,7 @@ export default {
       if (event === null || event === undefined || event instanceof KeyboardEvent === false)
         return false
 
-      const key = keyMap[event.key] || keyMap[event.keyCode] || event.key || event.keyCode
+      const key = keyMap[event.keyCode] || event.keyCode
 
       const componentWithInputEvent = getComponentWithInputEvent(this, key)
       if (componentWithInputEvent === null) return false
@@ -65,8 +65,8 @@ export default {
         cb = inputEvents.any.call(componentWithInputEvent, event)
       }
 
-      if (cb !== undefined && event.code) {
-        keyUpCallbacks.set(event.code, cb)
+      if (cb !== undefined && event.keyCode) {
+        keyUpCallbacks.set(event.keyCode, cb)
       }
 
       return true

package/src/component/base/timeouts_intervals.js

@@ -152,4 +152,14 @@ export default {
     enumerable: true,
     configurable: false,
   },
+  $nextTick: {
+    value: function (fn, ...params) {
+      // early exit when component is marked as end of life
+      if (this.eol === true) return
+      return this.$setTimeout(fn, 0, ...params)
+    },
+    writable: false,
+    enumerable: true,
+    configurable: false,
+  },
 }

package/src/components/RouterView.js

@@ -94,7 +94,7 @@ export default () =>
           )
 
           elementConfigs[0]['w'] = parent.node.w * (100 / 100)
-          elementConfigs[0]['height'] = parent.node.h * (100 / 100)
+          elementConfigs[0]['h'] = parent.node.h * (100 / 100)
           elms[0].populate(elementConfigs[0])
 
           if (inSlot === true) {

package/src/constants.js

@@ -18,14 +18,6 @@
 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',

package/src/engines/L3/element.js

@@ -16,7 +16,13 @@
  */
 
 import { renderer } from './launch.js'
-import { parseToObject, isObjectString, isArrayString, isTransition } from '../../lib/utils.js'
+import {
+  parseToObject,
+  isObjectString,
+  isArrayString,
+  isTransition,
+  isZeroDurationTransition,
+} from '../../lib/utils.js'
 import colors from '../../lib/colors/colors.js'
 
 import { Log } from '../../lib/log.js'
@@ -362,7 +368,10 @@ const propsTransformer = {
   set rounded(v) {
     this.props['rounded'] = v
     if (this.element.node !== undefined && this.elementShader === true) {
-      if (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v)))) {
+      if (
+        Array.isArray(v) === false &&
+        (typeof v === 'object' || (isObjectString(v) === true && (v = parseToObject(v))))
+      ) {
         this.element.node.props['shader'].props = v
       } else {
         if (isArrayString(v) === true) {
@@ -374,14 +383,17 @@ const propsTransformer = {
   },
   set border(v) {
     this.props['border'] = v
+
     if (
       this.element.node !== undefined &&
       this.elementShader === true &&
       (typeof v === 'object' || isObjectString(v) === true)
     ) {
       v = shaders.parseProps(v)
+      const shader = this.element.node.props['shader']
+      let prefix = shader.shaderKey.startsWith('rounded') ? 'border-' : ''
       for (const key in v) {
-        this.element.node.props['shader'].props[`border-${key}`] = v[key]
+        this.element.node.props['shader'].props[prefix + key] = v[key]
       }
     }
   },
@@ -393,8 +405,10 @@ const propsTransformer = {
       (typeof v === 'object' || isObjectString(v) === true)
     ) {
       v = shaders.parseProps(v)
+      const shader = this.element.node.props['shader']
+      let prefix = shader.shaderKey.startsWith('rounded') ? 'shadow-' : ''
       for (const key in v) {
-        this.element.node.props['shader'].props[`shadow-${key}`] = v[key]
+        this.element.node.props['shader'].props[prefix + key] = v[key]
       }
     }
   },
@@ -660,7 +674,7 @@ const Element = {
     const propsKeys = Object.keys(this.props.props)
 
     if (propsKeys.length === 1) {
-      if (isTransition(value) === true) {
+      if (isTransition(value) === true && isZeroDurationTransition(value) === false) {
         return this.animate(propsKeys[0], this.props.props[propsKeys[0]], value.transition)
       }
       // set the prop to the value on the node
@@ -668,7 +682,7 @@ const Element = {
     } else {
       for (let i = 0; i < propsKeys.length; i++) {
         // todo: fix code duplication
-        if (isTransition(value) === true) {
+        if (isTransition(value) === true && isZeroDurationTransition(value) === false) {
           this.animate(propsKeys[i], this.props.props[propsKeys[i]], value.transition)
         } else {
           // set the prop to the value on the node

package/src/engines/L3/fontLoader.js

@@ -36,7 +36,7 @@ export default () => {
     if (type === 'sdf') {
       stage.loadFont('sdf', {
         fontFamily: font.family,
-        atlasUrl: font.json || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.png`)),
+        atlasUrl: font.png || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.png`)),
         atlasDataUrl:
           font.json || (font.file && font.file.replace(/\.[^.]+$/, `.${font.type}.json`)),
       })

package/src/focus/focus.js

@@ -21,6 +21,7 @@ import Settings from '../settings.js'
 import { DEFAULT_HOLD_TIMEOUT_MS } from '../constants.js'
 import { Log } from '../lib/log.js'
 import { getAncestors } from './helpers.js'
+import InternalKeyboardEvent from '../lib/events/internalkeyboardevent.js'
 
 let focusedComponent = null
 let focusChain = []
@@ -95,7 +96,7 @@ export default {
     }
 
     if (cb !== undefined) {
-      keyUpCallbacks.set(event.code, cb)
+      keyUpCallbacks.set(event.keyCode, cb)
     }
   },
 }
@@ -133,9 +134,7 @@ const setFocus = (component, event) => {
   component[symbols.lifecycle].state = 'focus'
 
   if (event instanceof KeyboardEvent) {
-    const internalEvent = new KeyboardEvent('keydown', event)
-    // @ts-ignore - this is an internal event
-    internalEvent[symbols.internalEvent] = true
+    const internalEvent = new InternalKeyboardEvent('keydown', event)
     document.dispatchEvent(internalEvent)
   }
 }

package/src/lib/codegenerator/generator.js

@@ -116,7 +116,27 @@ export default function (templateObject = { children: [] }, devMode = false) {
 }
 
 // This is used to get only variable from expression
-const extractVariables = function (value) {
+const extractVariables = function (value, isContentKey = false) {
+  if (isContentKey) {
+    // Strip string literals (single and double quoted) so that $variables
+    // embedded in plain text (e.g. "'this.$notifications.add()'") are not
+    // mistakenly extracted as component variable references.
+    const stripped = value.replace(/'[^']*'|"[^"]*"/g, '')
+
+    // A $variable is a real component reference only if:
+    // 1. The value starts with a bare $variable (e.g. "$notification.add(ms,)")
+    // 2. The stripped text contains string concatenation (e.g. "'Count: ' + $notifications.count")
+    // Plain text with embedded $variables (e.g. "Custom plugin with $reactive state")
+    // should not trigger verification.
+    const isBareDollarVar = /^\s*\$\$?\w+/.test(stripped)
+    const hasConcatExpression = /\+/.test(stripped)
+
+    if (!isBareDollarVar && !hasConcatExpression) {
+      return false
+    }
+    value = stripped
+  }
+
   const regEx = /\$\$?\w+(\.\w+)?/g
   const matches = value.match(regEx)
   if (matches !== null) {
@@ -127,8 +147,8 @@ const extractVariables = function (value) {
   }
 }
 
-const verifyVariables = function (value, renderCode, type = 'dynamic') {
-  const variablesToBeVerified = extractVariables(value)
+const verifyVariables = function (value, renderCode, isContentKey = false, type = 'dynamic') {
+  const variablesToBeVerified = extractVariables(value, isContentKey)
   if (variablesToBeVerified !== false) {
     for (let i = 0; i < variablesToBeVerified.length; i++) {
       let variable = variablesToBeVerified[i]
@@ -222,7 +242,7 @@ const generateElementCode = function (
       }
       // value.includes('.') === false &&
       if (isDev === true && options.component !== 'scope.' && value.includes('$')) {
-        verifyVariables(value, renderCode, 'reactive')
+        verifyVariables(value, renderCode, key === ':content', 'reactive')
       }
       renderCode.push(
         `elementConfigs[${counter}]['${key.substring(1)}'] = ${interpolate(
@@ -232,7 +252,7 @@ const generateElementCode = function (
       )
     } else {
       if (isDev === true && options.component !== 'scope.' && value.includes('$')) {
-        verifyVariables(value, renderCode)
+        verifyVariables(value, renderCode, key === 'content')
       }
       renderCode.push(
         `elementConfigs[${counter}]['${key}'] = ${cast(value, key, options.component)}`

package/src/lib/events/internalkeyboardevent.js

@@ -0,0 +1,29 @@
+import symbols from '../symbols'
+
+/**
+ * Internal keyboard event class that extends the native KeyboardEvent.
+ * This allows us to set props on the event from the eventInitDict,
+ * which is not correctly implemented on some browsers.
+ *
+ * @extends {KeyboardEvent}
+ */
+export default class InternalKeyboardEvent extends KeyboardEvent {
+  [symbols.internalEvent] = true
+  _keyCode = 0
+
+  get keyCode() {
+    return this._keyCode
+  }
+
+  /**
+   * @param {string} type - A string with the name of the event
+   * @param {KeyboardEventInit} [eventInitDict] - An object that configures the event
+   */
+  constructor(type, eventInitDict) {
+    super(type, eventInitDict)
+
+    if ('keyCode' in eventInitDict) {
+      this._keyCode = eventInitDict.keyCode
+    }
+  }
+}

package/src/lib/reactivityguard/computedprops.js

@@ -196,14 +196,19 @@ export default (code) => {
             // Skip if already modified
             if (
               prop.body.includes(commentText.trim()) ||
-              Array.from(thisRefs).some((ref) => prop.body.startsWith(ref))
+              Array.from(thisRefs).some((ref) => {
+                if (prop.body.startsWith(ref)) return true
+                // stripped && guard: body starts with the first segment, e.g. 'this.media &&'
+                const firstSegEnd = ref.indexOf('.', 5)
+                return firstSegEnd !== -1 && prop.body.startsWith(ref.substring(0, firstSegEnd))
+              })
             ) {
               continue
             }
 
             // reactivity code
             const refCode = Array.from(thisRefs)
-              .map((ref) => `${ref};`)
+              .map((ref) => `${toSafeRef(ref)};`)
               .join(' ')
 
             // replacement with the same whitespace
@@ -290,6 +295,18 @@ export default (code) => {
   return null
 }
 
+const toSafeRef = (ref) => {
+  // Converts 'this.a.b.c' to 'this.a && this.a.b && this.a.b.c'
+  const normalized = ref.replace(/\?\./g, '.')
+  const segments = normalized.split('.')
+  if (segments.length <= 2) return normalized
+  const parts = []
+  for (let i = 2; i <= segments.length; i++) {
+    parts.push(segments.slice(0, i).join('.'))
+  }
+  return parts.join(' && ')
+}
+
 const extractThisReferences = (funcBody) => {
   const thisRefs = new Set()
 

package/src/lib/utils.js

@@ -52,6 +52,15 @@ export const isTransition = (value) => {
   return value !== null && typeof value === 'object' && 'transition' in value === true
 }
 
+/**
+ * Checks if a transition object has a duration of zero.
+ * @param {any} value - The value to check.
+ * @returns {boolean} True if the transition duration is zero, false otherwise.
+ */
+export const isZeroDurationTransition = (value) => {
+  return value.transition.duration === 0
+}
+
 /**
  * Checks if a string is an object string (starts and ends with curly braces).
  * @param {string} str - The string to check.