@lightningjs/blits 1.29.3 → 1.29.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+_12 jun 2025_
+
+## v1.29.5
+
+- Simplified timeout and interval cleanup
+- Added explicit reset of component state upon destruction
+- Fixed `exit` lifecycle hook
+
+_06 jun 2025_
+
+## v1.29.4
+
+- Removed excessive shader creation for effects
+- Added explicit cleanup of effects in for loop
+- Improved element destruction
+
 _03 jun 2025_
 
 ## v1.29.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.29.3",
+  "version": "1.29.5",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.1",
-    "@lightningjs/renderer": "^2.13.2"
+    "@lightningjs/renderer": "^2.13.4"
   },
   "repository": {
     "type": "git",

package/src/component/base/methods.js

@@ -66,13 +66,22 @@ export default {
     value: function () {
       this.eol = true
       this.lifecycle.state = 'destroy'
+
+      for (let key in this[symbols.state]) {
+        if (Array.isArray(this[symbols.state][key])) {
+          this[symbols.state][key] = []
+        }
+      }
+
       this.$clearTimeouts()
       this.$clearIntervals()
       eventListeners.removeListeners(this)
       deleteChildren(this[symbols.children])
       this[symbols.children].length = 0
       removeGlobalEffects(this[symbols.effects])
+
       this[symbols.state] = {}
+
       this[symbols.props] = {}
       this[symbols.computed] = null
       this.lifecycle = {}

package/src/component/base/timeouts_intervals.js

@@ -22,9 +22,10 @@ export default {
     value: function (fn, ms, ...params) {
       // early exit when component is marked as end of life
       if (this.eol === true) return
+
       const timeoutId = setTimeout(
         () => {
-          this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+          this.$clearTimeout(timeoutId)
           fn.apply(null, params)
         },
         ms,
@@ -39,8 +40,9 @@ export default {
   },
   $clearTimeout: {
     value: function (timeoutId) {
-      if (this[symbols.timeouts].indexOf(timeoutId) > -1) {
-        this[symbols.timeouts] = this[symbols.timeouts].filter((id) => id !== timeoutId)
+      const index = this[symbols.timeouts].indexOf(timeoutId)
+      if (index > -1) {
+        this[symbols.timeouts].splice(index, 1)
         clearTimeout(timeoutId)
       }
     },
@@ -73,9 +75,10 @@ export default {
   },
   $clearInterval: {
     value: function (intervalId) {
-      if (this[symbols.intervals].indexOf(intervalId) > -1) {
-        this[symbols.intervals] = this[symbols.intervals].filter((id) => id !== intervalId)
-        clearInterval(intervalId)
+      const index = this[symbols.intervals].indexOf(intervalId)
+      if (index > -1) {
+        this[symbols.intervals].splice(index, 1)
+        clearTimeout(intervalId)
       }
     },
     writable: false,

package/src/component.js

@@ -195,6 +195,8 @@ const Component = (name = required('name'), config = required('config')) => {
     // generate a human readable ID for the component instance (i.e. Blits::ComponentName1)
     this.componentId = createHumanReadableId(name)
 
+    this[symbols.effects] = []
+
     // instantiate a lifecycle object for this instance
     this.lifecycle = Object.assign(Object.create(Lifecycle), {
       component: this,
@@ -296,7 +298,7 @@ const Component = (name = required('name'), config = required('config')) => {
 
       // outOfViewport event emitting a lifecycle exit event
       if (config.hooks.exit) {
-        this[symbols.wrapper].node.on('outOfViewport', () => {
+        this[symbols.wrapper].node.on('outOfBounds', () => {
           this.lifecycle.state = 'exit'
         })
       }
@@ -305,7 +307,6 @@ const Component = (name = required('name'), config = required('config')) => {
     // setup (and execute) all the generated side effects based on the
     // reactive bindings define in the template
     const effects = config.code.effects
-    this[symbols.effects] = []
     for (let i = 0; i < effects.length; i++) {
       const eff = () => {
         effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)

package/src/component.test.js

@@ -322,8 +322,8 @@ test('Component - Instance should initialize hook events', (assert) => {
   )
   assert.equal(
     nodeCalls[3].args[0],
-    'outOfViewport',
-    '`outOfViewport` event should be registered in the wrapper'
+    'outOfBounds',
+    '`outOfBounds` event should be registered in the wrapper'
   )
   assert.end()
 })

package/src/engines/L3/element.js

@@ -381,34 +381,12 @@ const propsTransformer = {
         v[i].props.color = colors.normalize(v[i].props.color)
       }
     }
-    const effectNames = {}
     if (this.element.node === undefined) {
-      this.element.effectNames = []
       this.props['shader'] = renderer.createShader('DynamicShader', {
         effects: v.map((effect) => {
-          let name = effect.type
-          if (effectNames[name] !== undefined) {
-            name += ++effectNames[name]
-          } else {
-            effectNames[name] = 1
-          }
-          name += this.element.counter
-          this.element.effectNames.push(name)
-          // temporary add counter to work around shader caching issues
-          return renderer.createEffect(effect.type, effect.props, name)
+          return renderer.createEffect(effect.type, effect.props)
         }),
       })
-    } else {
-      for (let i = 0; i < v.length; i++) {
-        const name = this.element.effectNames[i]
-        // temporary add counter to work around shader caching issues
-        const target = this.element.node.shader.props[name]
-        const props = Object.keys(v[i].props)
-        if (target == undefined) continue
-        for (let j = 0; j < props.length; j++) {
-          target[props[j]] = v[i].props[props[j]]
-        }
-      }
     }
   },
   set clipping(v) {
@@ -674,7 +652,7 @@ const Element = {
         return
       }
       // fire transition end callback when animation ends (if specified)
-      if (transition.end && typeof transition.end === 'function') {
+      if (this.node !== undefined && transition.end && typeof transition.end === 'function') {
         transition.end.call(this.component, this, prop, this.node[prop])
       }
       // remove the prop from scheduled transitions
@@ -687,9 +665,7 @@ const Element = {
   destroy() {
     if (this.node === null) return
 
-    Log.debug('Deleting  Node', this.nodeId)
-    this.node.destroy()
-
+    Log.debug('Deleting Node', this.nodeId)
     // Clearing transition end callback functions
     const transitionProps = Object.keys(this.scheduledTransitions)
     for (let i = 0; i < transitionProps.length; i++) {
@@ -700,7 +676,32 @@ const Element = {
       }
     }
 
-    // remove node reference
+    // not setting to null and deleting,
+    // because transition stopped might still be fired (maybe a renderer fix resolves that)
+    this.scheduledTransitions = {}
+
+    this.component = null
+    delete this.component
+
+    this.config = null
+    delete this.config
+
+    this.counter = null
+    delete this.counter
+
+    this.props.raw = {}
+    this.props.element = null
+    this.props.props = null
+    this.props = {}
+    delete this.props
+
+    this.triggerLayout = null
+    delete this.triggerLayout
+
+    this.forComponent = null
+    delete this.forComponent
+
+    this.node.destroy()
     this.node = null
   },
   get nodeId() {
@@ -738,7 +739,6 @@ export default (config, component) => {
     scheduledTransitions: {},
     config,
     component,
-    effectNames: [],
     counter: counter++,
   })
 }

package/src/lib/codegenerator/generator.js

@@ -511,6 +511,7 @@ const generateForLoopCode = function (templateObject, parent) {
         }
         effect(eff${index}, ${key})
         effects.push(eff${index})
+        component[Symbol.for('effects')].push(eff${index})
       `)
     } else {
       // props shouldn't be wrapped in an effect, but simply passed on
@@ -562,17 +563,21 @@ const generateForLoopCode = function (templateObject, parent) {
 
   ctx.renderCode.push(`
     let forEffects${forStartCounter}
-    effect(() => {
+    const eff${forStartCounter} = () => {
       component[Symbol.for('removeGlobalEffects')](forEffects${forStartCounter})
       forEffects${forStartCounter} = null
       forEffects${forStartCounter} = forloop${forStartCounter}(${cast(
     result[2],
     ':for'
   )}, elms, created${forStartCounter})
-    }, ['${effectKey}', ${effectKeys.join(',')}] )
+    }
+
+    component[Symbol.for('effects')].push(eff${forStartCounter})
+
+    effect(eff${forStartCounter}, ['${effectKey}', ${effectKeys.join(',')}] )
   `)
 
-  outerScopeEffects.forEach((effect) => {
+  outerScopeEffects.forEach((effect, outerScopeEffectsIndex) => {
     const matches = [...effect.matchAll(scopeRegex)]
 
     let l = matches.length
@@ -589,7 +594,7 @@ const generateForLoopCode = function (templateObject, parent) {
     }
 
     ctx.renderCode.push(`
-      effect(() => {
+      const eff${forStartCounter}_${outerScopeEffectsIndex} = () => {
         void ${refs.join(', ')}
         for(let __index = 0; __index < ${interpolate(result[2])}.length; __index++) {
           if(__index < from${forStartCounter} || __index >= to${forStartCounter}) continue
@@ -602,7 +607,9 @@ const generateForLoopCode = function (templateObject, parent) {
     ctx.renderCode.push(`
           ${effect}
         }
-      })
+      }
+      component[Symbol.for('effects')].push(eff${forStartCounter}_${outerScopeEffectsIndex})
+      effect(eff${forStartCounter}_${outerScopeEffectsIndex})
     `)
   })