@lightningjs/blits 2.0.1 → 2.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## v2.1.1
+
+_9 apr 2026_
+
+- Fixed import file extension issue
+
+## 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_
@@ -7,7 +25,7 @@ _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 obselete key config
+- Removed obsolete key config
 - Fixed reactivity guard in computed props to handle deep nested references more safely
 
 ## v2.0.0

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.1",
+  "version": "2.1.1",
   "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/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'
@@ -377,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]
       }
     }
   },
@@ -396,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]
       }
     }
   },
@@ -663,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
@@ -671,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/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.js'
+
+/**
+ * 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/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.