@lightningjs/blits 1.6.1 → 1.7.0

package/CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## v1.6.0
+## v1.7.0
+
+_14 oct 2024_
+
+- Added cleanup upon component destroy of effects generated by global reactivity
+
+## v1.6.0 / v1.6.1
 
 _9 oct 2024_
 

package/package.json

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

package/src/component/base/methods.js

@@ -20,6 +20,7 @@ import Focus from '../../focus.js'
 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'
 
 export default {
   focus: {
@@ -56,6 +57,7 @@ export default {
       this.$clearIntervals()
       eventListeners.removeListeners(this)
       deleteChildren(this[symbols.children])
+      removeGlobalEffects(this[symbols.effects])
       Log.debug(`Destroyed component ${this.componentId}`)
     },
     writable: false,

package/src/component/setup/index.js

@@ -32,6 +32,8 @@ let counter = 0
 export default function (component, config) {
   component[symbols.identifier] = ++counter
 
+  component[symbols.effects] = []
+
   // setup hooks
   registerHooks(config.hooks, component[symbols.identifier])
 

package/src/component.js

@@ -161,9 +161,12 @@ const Component = (name = required('name'), config = required('config')) => {
     // reactive bindings define in the template
     const effects = config.code.effects
     for (let i = 0; i < effects.length; i++) {
-      effect(() => {
+      const eff = () => {
         effects[i](this, this[symbols.children], config, globalComponents, rootComponent, effect)
-      })
+      }
+      // store reference to the effect
+      this[symbols.effects].push(eff)
+      effect(eff)
     }
 
     // setup watchers if the components has watchers specified

package/src/lib/codegenerator/generator.js

@@ -392,13 +392,15 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   // inner scope variables are part of the main forloop
-  innerScopeEffects.forEach((effect) => {
+  innerScopeEffects.forEach((effect, index) => {
     const key = effect.indexOf(`scope.${index}`) > -1 ? `'${interpolate(result[2], '')}'` : null
     if (effect.indexOf("Symbol.for('props')") === -1) {
       ctx.renderCode.push(`
-        effect(() => {
+        let eff${index} = () => {
           ${effect}
-        }, ${key})
+        }
+        effect(eff${index}, ${key})
+        component[Symbol.for('effects')].push(eff${index})
       `)
     } else {
       // props shouldn't be wrapped in an effect, but simply passed on

package/src/lib/reactivity/effect.js

@@ -29,8 +29,22 @@ export const resumeTracking = () => {
 }
 
 const objectMap = new WeakMap()
+const globalEffectsMap = new Map()
 
-export const track = (target, key) => {
+export const removeGlobalEffects = (effectsToRemove) => {
+  if (globalEffectsMap.size === 0) return
+  for (const [effect, target] of globalEffectsMap) {
+    if (effectsToRemove.indexOf(effect) === -1) continue
+    const effectsSet = objectMap.get(target)
+    if (effectsSet === undefined) continue
+    for (const set of effectsSet.values()) {
+      set.delete(effect)
+      globalEffectsMap.delete(effect)
+    }
+  }
+}
+
+export const track = (target, key, global = false) => {
   if (currentEffect) {
     if (paused) {
       return
@@ -49,6 +63,8 @@ export const track = (target, key) => {
       effectsMap.set(key, effects)
     }
     effects.add(currentEffect)
+
+    if (global === true) globalEffectsMap.set(currentEffect, target)
   }
 }
 

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) => {
+const reactiveProxy = (original, _parent = null, _key, global) => {
   // don't create a proxy when a Blits component or an Image Texture
   // is assigned to a state variable
   if (typeof original === 'object') {
@@ -53,7 +53,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       if (Array.isArray(target)) {
         if (typeof target[key] === 'object' && target[key] !== null) {
           if (Array.isArray(target[key])) {
-            track(target, key)
+            track(target, key, global)
           }
           // create a new reactive proxy
           return reactiveProxy(getRaw(target[key]), target, key)
@@ -81,7 +81,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
       // 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])) {
-          track(target, key)
+          track(target, key, global)
         }
         // create a new reactive proxy
         return reactiveProxy(getRaw(target[key]), target, key)
@@ -89,7 +89,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
 
       // handling all other types
       // track the key on the target
-      track(target, key)
+      track(target, key, global)
       // return the reflected value
       return Reflect.get(target, key, receiver)
     },
@@ -119,7 +119,7 @@ const reactiveProxy = (original, _parent = null, _key) => {
   return proxy
 }
 
-const reactiveDefineProperty = (target) => {
+const reactiveDefineProperty = (target, global) => {
   Object.keys(target).forEach((key) => {
     let internalValue = target[key]
 
@@ -140,7 +140,7 @@ const reactiveDefineProperty = (target) => {
       enumerable: true,
       configurable: true,
       get() {
-        track(target, key)
+        track(target, key, global)
         return internalValue
       },
       set(newValue) {
@@ -157,8 +157,10 @@ const reactiveDefineProperty = (target) => {
   return target
 }
 
-export const reactive = (target, mode = 'Proxy') => {
-  return mode === 'defineProperty' ? reactiveDefineProperty(target) : reactiveProxy(target)
+export const reactive = (target, mode = 'Proxy', global = false) => {
+  return mode === 'defineProperty'
+    ? reactiveDefineProperty(target, global)
+    : reactiveProxy(target, undefined, undefined, global)
 }
 
 export const memo = (raw) => {

package/src/lib/symbols.js

@@ -46,4 +46,6 @@ export default {
   componentType: Symbol.for('componentType'),
   // Symbol 'isComponent' utilized within generated code
   isComponent: Symbol.for('isComponent'),
+  // Symbol 'effects' utilized within generated code
+  effects: Symbol.for('effects'),
 }

package/src/plugins/appstate.js

@@ -21,6 +21,6 @@ import Settings from '../settings.js'
 export default {
   name: 'appState',
   plugin(state = {}) {
-    return reactive(state, Settings.get('reactivityMode'))
+    return reactive(state, Settings.get('reactivityMode'), true)
   },
 }

package/src/plugins/language.js

@@ -32,7 +32,8 @@ export default {
         language: '',
         loaded: 0,
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     const setLanguage = (language) => {

package/src/plugins/theme.js

@@ -52,7 +52,8 @@ export default {
       {
         current: 'default',
       },
-      Settings.get('reactivityMode')
+      Settings.get('reactivityMode'),
+      true
     )
 
     let themes = {}