@lightningjs/blits 2.8.0 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.8.1
+
+_22 jul 2026_
+
+- Fixed cleanup of reactive effects with multiple dependencies
+- Fixed stale reactive effects when removing items from (nested) loops
+
 ## 2.8.0
 
 _16 jul 2026_

package/package.json

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

package/src/component/base/methods.js

@@ -20,7 +20,7 @@ import { default as Focus, keyUpCallbacks, getComponentWithInputEvent } from '..
 import eventListeners from '../../lib/eventListeners.js'
 import { trigger } from '../../lib/reactivity/effect.js'
 import { Log } from '../../lib/log.js'
-import { removeGlobalEffects } from '../../lib/reactivity/effect.js'
+import { removeEffects } from '../../lib/reactivity/effect.js'
 import { renderer } from '../../launch.js'
 import { keyMap } from '../../application.js'
 import { platform } from '../../platform.js'
@@ -130,7 +130,7 @@ export default {
 
       deleteChildren(this[symbols.children])
       this[symbols.children].length = 0
-      removeGlobalEffects(this[symbols.effects])
+      removeEffects(this[symbols.effects])
 
       this[symbols.state] = {}
 
@@ -171,12 +171,12 @@ export default {
     enumerable: true,
     configurable: false,
   },
-  [symbols.removeGlobalEffects]: {
+  [symbols.removeEffects]: {
     /**
      * @this {import('../../component').BlitsComponent}
      */
     value: function (effects = []) {
-      removeGlobalEffects(effects)
+      removeEffects(effects)
     },
     writable: false,
     enumerable: false,

package/src/lib/codegenerator/generator.js

@@ -559,6 +559,7 @@ const generateForLoopCode = function (templateObject, parent) {
           keys.add('' +  ${interpolate(key, '') || 'l'})
         }
       }
+
   `)
 
   // keep track of the index in the render code so we can inject
@@ -570,9 +571,9 @@ const generateForLoopCode = function (templateObject, parent) {
       created.length = 0
       const length = rawCollection.length
 
-      component !== null && component[Symbol.for('removeGlobalEffects')](effects[${forStartCounter}])
+      component !== null && component[Symbol.for('removeEffects')](effects[${forStartCounter}])
 
-     const effectsToRemove = new Set(effects[${forStartCounter}].slice(0))
+      const effectsToRemove = new Set(effects[${forStartCounter}])
       if (effectsToRemove.size > 0) {
         const componentEffects = component?.[Symbol.for('effects')] || []
         let writeIndex = 0

package/src/lib/reactivity/effect.js

@@ -29,23 +29,21 @@ export const resumeTracking = () => {
 }
 
 const objectMap = new WeakMap()
-const globalEffectsMap = new Map()
+const effectDependenciesMap = new WeakMap()
 
-export const removeGlobalEffects = (effectsToRemove) => {
-  if (globalEffectsMap.size === 0 || effectsToRemove.length === 0) return
-  const effectsToRemoveSet = new Set(effectsToRemove)
-  for (const [effect, target] of globalEffectsMap) {
-    if (!effectsToRemoveSet.has(effect)) continue
-    const effectsSet = objectMap.get(target)
-    if (effectsSet === undefined) continue
-    for (const set of effectsSet.values()) {
-      set.delete(effect)
-      globalEffectsMap.delete(effect)
+export const removeEffects = (effectsToRemove) => {
+  for (let i = 0; i < effectsToRemove.length; i++) {
+    const effect = effectsToRemove[i]
+    const dependencies = effectDependenciesMap.get(effect)
+    if (dependencies === undefined) continue
+    for (let j = 0; j < dependencies.length; j++) {
+      dependencies[j].delete(effect)
     }
+    effectDependenciesMap.delete(effect)
   }
 }
 
-export const track = (target, key, global = false) => {
+export const track = (target, key) => {
   if (currentEffect !== null) {
     if (paused) {
       return
@@ -65,9 +63,15 @@ export const track = (target, key, global = false) => {
       effects = new Set()
       effectsMap.set(key, effects)
     }
-    effects.add(currentEffect)
-
-    if (global === true) globalEffectsMap.set(currentEffect, target)
+    if (effects.has(currentEffect) === false) {
+      let dependencies = effectDependenciesMap.get(currentEffect)
+      if (dependencies === undefined) {
+        dependencies = []
+        effectDependenciesMap.set(currentEffect, dependencies)
+      }
+      dependencies.push(effects)
+      effects.add(currentEffect)
+    }
   }
 }
 

package/src/lib/reactivity/reactive.js

@@ -28,7 +28,7 @@ export const getRaw = (value) => {
   return raw ? getRaw(raw) : value
 }
 
-const reactiveProxy = (original, _parent = null, _key, global) => {
+const reactiveProxy = (original, _parent = null, _key) => {
   // only create a proxy for plain objects. Other classes, Blits components, renderer textures etc
   // are returned unmodified and will not become reactive
   if (
@@ -59,10 +59,10 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
       if (Array.isArray(target) === true) {
         if (typeof target[key] === 'object' && target[key] !== null) {
           if (Array.isArray(target[key]) === true) {
-            track(target, key, global)
+            track(target, key)
           }
           // create a new reactive proxy
-          return reactiveProxy(getRaw(target[key]), target, key, global)
+          return reactiveProxy(getRaw(target[key]), target, key)
         }
         // augment array path methods (that change the length of the array)
         if (arrayPatchMethods.indexOf(key) !== -1) {
@@ -87,15 +87,15 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
       // handling objects (but not null values, which have object type in JS)
       if (typeof target[key] === 'object' && target[key] !== null) {
         if (Array.isArray(target[key]) === true) {
-          track(target, key, global)
+          track(target, key)
         }
         // create a new reactive proxy
-        return reactiveProxy(getRaw(target[key]), target, key, global)
+        return reactiveProxy(getRaw(target[key]), target, key)
       }
 
       // handling all other types
       // track the key on the target
-      track(target, key, global)
+      track(target, key)
       // return the reflected value
       return Reflect.get(target, key, receiver)
     },
@@ -147,7 +147,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
   return proxy
 }
 
-const reactiveDefineProperty = (target, global) => {
+const reactiveDefineProperty = (target) => {
   Object.keys(target).forEach((key) => {
     let internalValue = target[key]
 
@@ -168,7 +168,7 @@ const reactiveDefineProperty = (target, global) => {
       enumerable: true,
       configurable: true,
       get() {
-        track(target, key, global)
+        track(target, key)
         return internalValue
       },
       set(newValue) {
@@ -187,14 +187,12 @@ const reactiveDefineProperty = (target, global) => {
 
 const hasProxySupport = typeof Proxy !== 'undefined'
 
-export const reactive = (target, mode = 'Proxy', global = false) => {
+export const reactive = (target, mode = 'Proxy') => {
   // force defineProperty reactivity mode when no proxy support
   if (hasProxySupport === false) {
     mode = 'defineProperty'
   }
-  return mode === 'defineProperty'
-    ? reactiveDefineProperty(target, global)
-    : reactiveProxy(target, undefined, undefined, global)
+  return mode === 'defineProperty' ? reactiveDefineProperty(target) : reactiveProxy(target)
 }
 
 export const memo = (raw) => {

package/src/lib/symbols.js

@@ -68,7 +68,7 @@
  * @property {symbol} componentType
  * @property {symbol} isComponent
  * @property {symbol} effects
- * @property {symbol} removeGlobalEffects
+ * @property {symbol} removeEffects
  * @property {symbol} tagContent
  */
 
@@ -140,8 +140,8 @@ export default {
   isComponent: Symbol.for('isComponent'),
   // Symbol 'effects' utilized within generated code
   effects: Symbol.for('effects'),
-  // Symbol 'removeGlobalEffects' utilized within generated code
-  removeGlobalEffects: Symbol.for('removeGlobalEffects'),
-  // Symbol 'removeGlobalEffects' utilized within generated code
+  // Symbol 'removeEffects' utilized within generated code
+  removeEffects: Symbol.for('removeEffects'),
+  // Symbol 'tagContent' utilized within generated code
   tagContent: Symbol.for('tagContent'),
 }