@lightningjs/blits 1.29.3 → 1.29.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 _03 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
 
 - Added first batch internal JS doc types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.29.3",
+  "version": "1.29.4",
   "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.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,
@@ -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/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})
     `)
   })