@lightningjs/blits 2.10.0 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.11.0
+
+_28 sep 2026_
+
+- Improved `$select()` method by adding caching
+- Upgraded several dependencies
+- Bumped renderer to 3.5.1
+
 ## 2.10.0
 
 _21 sep 2026_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -78,25 +78,25 @@
     "@babel/plugin-syntax-import-assertions": "^7.28.6",
     "@eslint/eslintrc": "^3.3.4",
     "@eslint/js": "^9.39.3",
-    "c8": "^10.1.3",
+    "c8": "^12.0.0",
     "eslint": "^9.39.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
     "fast-glob": "^3.3.3",
-    "global-jsdom": "^26.0.0",
-    "globals": "^16.3.0",
+    "global-jsdom": "^30.0.0",
+    "globals": "^17.12.0",
     "husky": "^9.1.7",
-    "jsdom": "^26.0.0",
+    "jsdom": "^30.1.0",
     "lint-staged": "^15.5.2",
     "prettier": "^3.6.2",
-    "sinon": "^21.0.1",
+    "sinon": "^22.1.0",
     "tap-diff": "^0.1.1",
     "tap-filter": "^1.0.3",
     "tape": "^5.9.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "3.5.0",
-    "magic-string": "^0.30.21"
+    "@lightningjs/renderer": "3.5.1",
+    "magic-string": "^1.4.1"
   },
   "repository": {
     "type": "git",

package/src/component/base/methods.js

@@ -30,6 +30,8 @@ import { renderer } from '../../launch.js'
 import { keyMap } from '../../application.js'
 import { platform } from '../../platform.js'
 
+const selectCache = new WeakMap()
+
 export default {
   $focus: {
     /**
@@ -103,6 +105,7 @@ export default {
      */
     value: function () {
       this.eol = true
+      selectCache.delete(this)
       removeKeyUpCallbacks(this)
       this[symbols.lifecycle].state = 'destroy'
 
@@ -197,26 +200,60 @@ export default {
       // early exit when component is marked as end of life
       if (this.eol === true) return
 
-      let selected = null
-      this[symbols.children].forEach((child) => {
+      let cache = selectCache.get(this)
+      if (cache !== undefined && cache.has(ref) === true) {
+        const selected = cache.get(ref)
+        if (selected !== undefined && selected.eol !== true) return selected
+        cache.delete(ref)
+      }
+
+      for (const child of this[symbols.children]) {
+        if (child === undefined || child === null) continue
         if (Array.isArray(child)) {
-          child.forEach((c) => {
-            if (c['ref'] === ref) selected = c
-          })
+          const selected = child.find((c) => c['ref'] === ref)
+          if (selected !== undefined) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, selected)
+            return selected
+          }
         } else if (Object.getPrototypeOf(child) === Object.prototype) {
-          Object.keys(child).forEach((k) => {
-            if (child[k]['ref'] === ref) selected = child[k]
-          })
+          const selected = Object.values(child).find((c) => c['ref'] === ref)
+          if (selected !== undefined) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, selected)
+            return selected
+          }
         } else {
-          if (child['ref'] === ref) selected = child
+          if (child['ref'] === ref) {
+            if (cache === undefined) {
+              cache = new Map()
+              selectCache.set(this, cache)
+            }
+            cache.set(ref, child)
+            return child
+          }
         }
-      })
-      return selected
+      }
+      return null
     },
     writable: false,
     enumerable: true,
     configurable: false,
   },
+  [symbols.invalidateSelectCache]: {
+    value: function () {
+      selectCache.delete(this)
+    },
+    writable: false,
+    enumerable: false,
+    configurable: false,
+  },
   $trigger: {
     /**
      * @this {import('../../component').BlitsComponent}

package/src/lib/codegenerator/generator.js

@@ -223,6 +223,9 @@ const generateElementCode = function (
 
     if (key === 'key') return
 
+    // a ref on a component belongs to the component itself, not to its holder element
+    if (options.holder === true && (key === 'ref' || key === ':ref')) return
+
     // Skip inspector-data in production builds for performance optimization
     if (key === 'inspector-data' && !isDev) return
 
@@ -524,6 +527,8 @@ const generateForLoopCode = function (templateObject, parent) {
     }
   }
 
+  const invalidateSelectCache = 'ref' in templateObject
+
   ctx.renderCode.push(`
     created[${forStartCounter}] = []
     effects[${forStartCounter}] = []
@@ -532,6 +537,7 @@ const generateForLoopCode = function (templateObject, parent) {
     let to${forStartCounter}
 
     forloops[${forStartCounter}] = (collection = [], elms, created) => {
+      ${invalidateSelectCache ? "rootComponent && rootComponent[Symbol.for('invalidateSelectCache')]()" : ''}
       const rawCollection = getRaw(collection)
       const keys = new Set()
       let l = rawCollection.length

package/src/lib/symbols.js

@@ -144,4 +144,6 @@ export default {
   removeEffects: Symbol.for('removeEffects'),
   // Symbol 'tagContent' utilized within generated code
   tagContent: Symbol.for('tagContent'),
+  // Symbol used by generated loops to invalidate cached ref lookups
+  invalidateSelectCache: Symbol.for('invalidateSelectCache'),
 }