@lightningjs/blits 1.32.1 → 1.34.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+_10 Jul 2025_
+
+## v1.34.0
+
+- Added storage plugin
+- Improved test coverage
+- Fixed announcer plugin to work on RDK devices where early GC was happening
+- Added check to throttle only the same input key in a row
+- Updated docs on transitions
+- Added warning when using `hasFocus` in component state
+
+_08 Jul 2025_
+
+## v1.33.0
+
+- Added dereferencing of previousFocus pointer to ensure memory cleanup
+- Improved cleanup of components (via explicit dereference of closure scope)
+- Optimized time function in logger
+- Optimized initial registration of routes
+- Added `maxFPS` launch setting
+
 _04 Jul 2025_
 
 ## v1.32.1

package/NOTICE

@@ -10,3 +10,7 @@ within this component.
 This repository uses components from the Lightning-SDK. Any components from the Lightning-SDK are:
 Copyright (c) 2020 Metrological
 Licensed under the Apache License, Version 2.0
+
+This repository uses components from WebPlatformForEmbedded
+Copyright (c) 2019 Metrological
+Licensed under the Apache License, Version 2.0

package/index.d.ts

@@ -970,8 +970,10 @@ declare module '@lightningjs/blits' {
     /**
      * Input throttle time in milliseconds to prevent rapid successive inputs
      *
-     * Within the throttle window, only one input will be processed immediately  Subsequent
-     * inputs are ignored until the scheduled input is processed.
+     * Within the throttle window, only one input will be processed immediately.
+     * Subsequent inputs _of the same key_ are ignored until the scheduled input is processed.
+     *
+     * Pressing a different key will be processed immediately.
      *
      * Set to `0` to disable input throttling.
      *
@@ -1015,6 +1017,15 @@ declare module '@lightningjs/blits' {
      * @default false
      */
     announcer?: boolean
+    /**
+     * Maximum FPS at which the App will be rendered
+     *
+     * Lowering the maximum FPS value can improve the overall experience on lower end devices.
+     * Targetting a lower FPS may gives the CPU more time to construct each frame leading to a smoother rendering.
+     *
+     * Defaults to `0` which means no maximum
+     */
+    maxFPS?: number
   }
 
   interface State {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.32.1",
+  "version": "1.34.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -13,7 +13,8 @@
     "./blitsFileConverter": "./src/lib/blitsfileconverter/blitsfileconverter.js"
   },
   "scripts": {
-    "test": "c8 npm run test:run",
+    "test": "c8 node scripts/runTests.js",
+    "test:ci": "c8 npm run test:run",
     "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
@@ -38,6 +39,7 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "fast-glob": "^3.3.3",
     "global-jsdom": "24.0.0",
     "husky": "^9.1.7",
     "jsdom": "24.0.0",

package/src/announcer/announcer.js

@@ -146,6 +146,7 @@ const stop = () => {
 }
 
 const clear = () => {
+  isProcessing = false
   queue.length = 0
 }
 

package/src/announcer/speechSynthesis.js

@@ -21,9 +21,17 @@ const syn = window.speechSynthesis
 
 const isAndroid = /android/i.test((window.navigator || {}).userAgent || '')
 
+const utterances = new Map() // Strong references with unique keys
+
 let initialized = false
 let infinityTimer = null
-const clear = () => infinityTimer && clearTimeout(infinityTimer)
+
+const clear = () => {
+  if (infinityTimer) {
+    clearTimeout(infinityTimer)
+    infinityTimer = null
+  }
+}
 
 const resumeInfinity = (target) => {
   if (!target || infinityTimer) {
@@ -31,7 +39,9 @@ const resumeInfinity = (target) => {
   }
 
   syn.pause()
-  syn.resume()
+  setTimeout(() => {
+    syn.resume()
+  }, 0)
 
   infinityTimer = setTimeout(() => {
     resumeInfinity(target)
@@ -47,18 +57,20 @@ const defaultUtteranceProps = {
 }
 
 const initialize = () => {
-  defaultUtteranceProps.voice = syn.getVoices()[0]
+  const voices = syn.getVoices()
+  defaultUtteranceProps.voice = voices[0] || null
   initialized = true
 }
 
 const speak = (options) => {
   const utterance = new SpeechSynthesisUtterance(options.message)
-
+  const id = Date.now() + Math.random() // Unique ID for tracking
   utterance.lang = options.lang || defaultUtteranceProps.lang
   utterance.pitch = options.pitch || defaultUtteranceProps.pitch
   utterance.rate = options.rate || defaultUtteranceProps.rate
   utterance.voice = options.voice || defaultUtteranceProps.voice
   utterance.volume = options.volume || defaultUtteranceProps.volume
+  utterances.set(id, utterance) // Strong reference
 
   if (isAndroid === false) {
     utterance.onstart = () => {
@@ -72,9 +84,14 @@ const speak = (options) => {
 
   return new Promise((resolve, reject) => {
     utterance.onend = () => {
+      clear()
+      utterances.delete(id) // Cleanup
       resolve()
     }
+
     utterance.onerror = (e) => {
+      clear()
+      utterances.delete(id) // Cleanup
       reject(e)
     }
 

package/src/application.js

@@ -48,6 +48,7 @@ const Application = (config) => {
   let keyUpHandler
   let holdTimeout
   let lastInputTime = 0
+  let lastInputKey = null
 
   config.hooks[symbols.destroy] = function () {
     document.removeEventListener('keydown', keyDownHandler)
@@ -66,8 +67,11 @@ const Application = (config) => {
       const currentTime = performance.now()
 
       const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
+      const sameKey = lastInputKey === key
+      lastInputKey = key
       // execute immediately when no throttle is specified or event is internal (bubbled up by focus manager)
-      if (throttleMs === 0 || e[symbols.internalEvent] === true) {
+      // or key is different from the last used key
+      if (throttleMs === 0 || e[symbols.internalEvent] === true || sameKey === false) {
         return await processInput.call(this, e, key)
       }
 

package/src/component/base/methods.js

@@ -40,6 +40,7 @@ export default {
      * @this {import('../../component').BlitsComponent}
      */
     value: function (e) {
+      if (this.eol === true) return
       this[symbols.state].hasFocus = true
       Focus.set(this, e)
     },
@@ -103,11 +104,15 @@ export default {
       delete this.componentId
       delete this[symbols.id]
       delete this.ref
+      delete this[symbols.state].hasFocus
 
       this[symbols.holder].destroy()
       this[symbols.holder] = null
       delete this[symbols.holder]
 
+      this[symbols.cleanup]()
+      delete this[symbols.cleanup]
+
       Log.debug(`Destroyed component ${this.componentId}`)
     },
     writable: false,

package/src/component/setup/routes.js

@@ -24,19 +24,16 @@ export default (component, data) => {
     routes = data.routes
   }
   component[symbols.routes] = []
-  Object.keys(routes).forEach((key) => {
-    // todo: validate routes[key] for expected format etc.
-    component[symbols.routes][key] = {
-      ...routes[key],
+
+  const l = routes.length
+  for (let i = 0; i < l; i++) {
+    component[symbols.routes][i] = routes[i]
+    // merge default route options with route specific options
+    component[symbols.routes][i].options = {
       ...{
-        // merge default route options with route specific options
-        options: {
-          ...{
-            inHistory: true,
-          },
-          ...routes[key].options,
-        },
+        inHistory: true,
       },
+      ...routes[i].options,
     }
-  })
+  }
 }

package/src/component/setup/state.js

@@ -28,8 +28,14 @@ export default (component, state = () => {}) => {
   })
 
   const stateKeys = Object.keys(state.apply(component) || {})
-  // add built-in hasFocus key
-  stateKeys.push(['hasFocus'])
+  if (stateKeys.indexOf('hasFocus') > -1) {
+    Log.warn(
+      'State `hasFocus` already exists as a built-in Component variable (to indicate whether the component currently has focus). Avoid using your own `hasFocus` key in the Component state'
+    )
+  } else {
+    // add built-in hasFocus key
+    stateKeys.push(['hasFocus'])
+  }
   const stateKeysLength = stateKeys.length
 
   for (let i = 0; i < stateKeysLength; i++) {

package/src/component.js

@@ -243,16 +243,18 @@ const Component = (name = required('name'), config = required('config')) => {
 
     // execute the render code that constructs the initial state of the component
     // and store the children result (a flat map of elements and components)
-    this[symbols.children] =
-      config.code.render.apply(stage, [
-        parentEl,
-        this,
-        config,
-        globalComponents,
-        effect,
-        getRaw,
-        Log,
-      ]) || []
+    const { elms, cleanup } = config.code.render.apply(stage, [
+      parentEl,
+      this,
+      config,
+      globalComponents,
+      effect,
+      getRaw,
+      Log,
+    ]) || { elms: [], cleanup: () => {} }
+
+    this[symbols.children] = elms
+    this[symbols.cleanup] = cleanup
 
     // create a reference to the wrapper element of the component (i.e. the root Element of the component)
     this[symbols.wrapper] = this[symbols.children][0]

package/src/components/Circle.js

@@ -23,30 +23,52 @@ export default () =>
     code: {
       render: function anonymous(parent, component, context, components, effect, getRaw, Log) {
         const elms = []
+        const elementConfigs = []
+        const forloops = []
+        const props = []
+        const created = []
+        const skips = []
         let componentType
-        const rootComponent = component
+        let rootComponent = component
         let propData
         let slotComponent
         let inSlot = false
         let slotChildCounter = 0
-        const elementConfig0 = {}
+        let cmps = []
+        elementConfigs[0] = {}
 
         elms[0] = this.element(
           { parent: parent || 'root' },
           inSlot === true ? slotComponent : component
         )
 
-        elementConfig0['color'] = component.color
-        elementConfig0['w'] = component.size
-        elementConfig0['h'] = component.size
-        elementConfig0['effects'] = [component.shader('radius', { radius: component.radius })]
-        elms[0].populate(elementConfig0)
+        elementConfigs[0]['color'] = component.color
+        elementConfigs[0]['w'] = component.size
+        elementConfigs[0]['h'] = component.size
+        elementConfigs[0]['effects'] = [component.shader('radius', { radius: component.radius })]
+        elms[0].populate(elementConfigs[0])
 
         if (inSlot === true) {
           slotChildCounter -= 1
         }
 
-        return elms
+        return {
+          elms,
+          cleanup: () => {
+            rootComponent = null
+            propData = null
+            slotComponent = null
+            component = null
+            parent = null
+            cmps.length = 0
+            elms.length = 0
+            components.length = 0
+            elementConfigs.length = 0
+            forloops.length = 0
+            props.length = 0
+            skips.length = 0
+          },
+        }
       },
       effects: [
         function anonymous(component, elms, context, components, rootComponent, effect) {