@lightningjs/blits 1.32.1 → 1.33.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+_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/index.d.ts

@@ -1015,6 +1015,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.33.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

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.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) {