@lightningjs/blits 0.9.0 → 0.9.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# v0.9.2
+
+_21 mar 2024_
+
+- Fixed issue with updates not triggering during array operation
+
+# v0.9.1
+
+_21 mar 2024_
+
+- Improved support for reactive advanced array operations (i.e. `splice()`, `concat()`, `sort()`)
+- Upgraded Lightning renderer to v0.7.6
+- Reverted removal of destroy of child nodes (added in v0.8.1)
+- Introduced `viewportMargin` setting
+- Added `undefined`-check for props sent to renderer
+
 # v0.9.0
 
 _18 mar 2024_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -45,7 +45,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.7.5",
+    "@lightningjs/renderer": "^0.7.6",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/element.js

@@ -194,7 +194,7 @@ const Props = {
     this._set.add('alpha')
   },
   set text(v) {
-    this._props.text = v !== undefined ? v.toString() : ''
+    this._props.text = v.toString()
   },
   set effects(v) {
     this._props.shader = renderer.createShader('DynamicShader', {
@@ -229,7 +229,7 @@ const Props = {
     this._props.overflowSuffix = v === false ? ' ' : v === true ? undefined : v
   },
   set letterSpacing(v) {
-    this._props.letterSpacing = v
+    this._props.letterSpacing = v || 1
   },
   set lineHeight(v) {
     this._props.lineHeight = v
@@ -259,12 +259,14 @@ const Element = {
     for (const [prop, value] of Object.entries(props)) {
       const descriptor = Object.getOwnPropertyDescriptor(Props, prop)
       if (descriptor && descriptor.set) {
-        this.props[prop] = unpackTransition(value)
+        if (value !== undefined) {
+          this.props[prop] = unpackTransition(value)
+        }
       }
     }
 
-    // correct for default white nodes
-    if (!this.props._set.has('color')) {
+    // correct for default white nodes (but not for text nodes)
+    if (!props.__textnode && !this.props._set.has('color')) {
       this.props._props.color =
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
@@ -286,6 +288,7 @@ const Element = {
     }
   },
   set(prop, value) {
+    if (value === undefined) return
     const propsSet = new Set(this.props._set)
 
     this.props._props = {}

package/src/launch.d.ts

@@ -190,7 +190,23 @@ export interface Settings {
    *
    * Defaults to `false`
    */
-  inspector?: boolean
+  inspector?: boolean,
+  /**
+   * Add an extra margin to the viewport for earlier pre-loading of elements and components
+   *
+   * By default the Lightning renderer, only renders elements that are inside the defined viewport.
+   * Everything outside of these bounds is removed from the render tree.
+   *
+   * With the viewportMargin you have the option to _virtually_ increase the viewport area,
+   * to expedite the pre-loading of elements and / or delay the unloading of elements depending
+   * on their position in the (virtual) viewport
+   *
+   * The margin can be specified in 4 directions by defining an array [top, right, bottom, left],
+   * or as a single number which is then applied to all 4 directions equally.
+   *
+   * Defaults to `0`
+   */
+  viewportMargin?: number | [number, number, number, number]
 }
 
 /**

package/src/launch.js

@@ -63,6 +63,7 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
           : window.navigator.hardwareConcurrency || 2,
       clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
       enableInspector: settings.inspector || false,
+      boundsMargin: settings.viewportMargin || 0,
     },
     target,
     driver

package/src/lib/codegenerator/generator.js

@@ -216,8 +216,10 @@ const generateForLoopCode = function (templateObject, parent) {
   if (parent) {
     ctx.renderCode.push(`parent = ${parent}`)
   }
+
+  const forCounter = counter
   ctx.renderCode.push(`
-    const collection = ${cast(result[2], ':for')}
+    const collection = ${cast(result[2], ':for')} || []
     const keys = []
     for(let __index = 0; __index < collection.length; __index++) {
       parent = ${parent}
@@ -269,12 +271,11 @@ const generateForLoopCode = function (templateObject, parent) {
   ctx.renderCode.push('}')
 
   ctx.renderCode.push(`
-    if(elms[${counter}]) {
-      Object.keys(elms[${counter}]).forEach(key => {
+   if(elms[${forCounter}]) {
+      Object.keys(elms[${forCounter}]).forEach(key => {
         if(keys.indexOf(key) === -1) {
-          elms[${counter}][key].delete && elms[${counter}][key].delete()
-          elms[${counter}][key].destroy && elms[${counter}][key].destroy()
-          delete elms[${counter}][key]
+          elms[${forCounter}][key].destroy && elms[${forCounter}][key].destroy()
+          delete elms[1][key]
         }
       })
     }

package/src/lib/codegenerator/generator.test.js

@@ -2145,7 +2145,6 @@ test('Generate code for a template with a simple for-loop on an Element', (asser
       if(elms[1]) {
         Object.keys(elms[1]).forEach(key => {
           if(keys.indexOf(key) === -1) {
-            elms[1][key].delete && elms[1][key].delete()
             elms[1][key].destroy && elms[1][key].destroy()
             delete elms[1][key]
           }
@@ -2237,7 +2236,6 @@ test('Generate code for a template with a simple for-loop on an Element with a c
       if(elms[1]) {
         Object.keys(elms[1]).forEach(key => {
           if(keys.indexOf(key) === -1) {
-            elms[1][key].delete && elms[1][key].delete()
             elms[1][key].destroy && elms[1][key].destroy()
             delete elms[1][key]
           }
@@ -2314,25 +2312,24 @@ test('Generate code for a template with a simple for-loop on an Element with a k
           index: __index,
           item: collection[__index],
         })
-        keys.push(item.id)
+        keys.push(scope.item.id)
 
         parent = elms[0]
         elms[1] = elms[1] || {}
-        if(!elms[1][item.id]) {
-          elms[1][item.id] = this.element({parent: parent || 'root'}, component)
+        if(!elms[1][scope.item.id]) {
+          elms[1][scope.item.id] = this.element({parent: parent || 'root'}, component)
         }
 
         const elementConfig1 = {}
-        elementConfig1['key'] = "item.id"
+        elementConfig1['key'] = scope.item.id
 
-        if(!elms[1][item.id].nodeId) {
-          elms[1][item.id].populate(elementConfig1)
+        if(!elms[1][scope.item.id].nodeId) {
+          elms[1][scope.item.id].populate(elementConfig1)
         }
       }
       if(elms[1]) {
         Object.keys(elms[1]).forEach(key => {
           if(keys.indexOf(key) === -1) {
-            elms[1][key].delete && elms[1][key].delete()
             elms[1][key].destroy && elms[1][key].destroy()
             delete elms[1][key]
           }
@@ -2424,7 +2421,7 @@ test('Generate code for a template with a simple for-loop on a Component with a
 
         if(typeof cmp1 !== 'undefined') {
           for(let key in cmp1.config.props) {
-            delete  elementConfig1[cmp1.config.props[key]]
+            delete elementConfig1[cmp1.config.props[key]]
           }
         }
 
@@ -2449,12 +2446,11 @@ test('Generate code for a template with a simple for-loop on a Component with a
           }
         }
       }
-      if(elms[2]) {
-        Object.keys(elms[2]).forEach(key => {
+      if(elms[1]) {
+        Object.keys(elms[1]).forEach(key => {
           if(keys.indexOf(key) === -1) {
-            elms[2][key].delete && elms[2][key].delete()
-            elms[2][key].destroy && elms[2][key].destroy()
-            delete elms[2][key]
+            elms[1][key].destroy && elms[1][key].destroy()
+            delete elms[1][key]
           }
         })
       }
@@ -2550,7 +2546,6 @@ test('Generate code for a template with a simple for-loop on an Element with an
       if(elms[1]) {
         Object.keys(elms[1]).forEach(key => {
           if(keys.indexOf(key) === -1) {
-            elms[1][key].delete && elms[1][key].delete()
             elms[1][key].destroy && elms[1][key].destroy()
             delete elms[1][key]
           }

package/src/lib/reactivity/effect.js

@@ -16,10 +16,33 @@
  */
 
 let currentEffect = null
+
+let paused = false
+
+export const pauseTracking = () => {
+  paused = true
+}
+
+export const resumeTracking = () => {
+  paused = false
+  for (let i = 0; i < trackQueue.length; i++) {
+    const item = trackQueue[i]
+    currentEffect = item.currentEffect
+    track(item.target, item.key)
+  }
+  trackQueue.length = 0
+}
+
 const objectMap = new WeakMap()
 
+const trackQueue = []
+
 export const track = (target, key) => {
   if (currentEffect) {
+    if (paused) {
+      trackQueue.push({ target, key, currentEffect })
+      return
+    }
     let effectsMap = objectMap.get(target)
     if (!effectsMap) {
       effectsMap = new Map()

package/src/lib/reactivity/reactive.js

@@ -15,76 +15,89 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { track, trigger } from './effect.js'
-
-const arrayMethods = [
-  'constructor',
-  'includes',
-  'indexOf',
-  'lastIndexOf',
-  'push',
-  'pop',
-  'shift',
-  'splice',
-  'unshift',
-  'sort',
-  'reverse',
-]
-
-const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
+import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
+import symbols from '../symbols.js'
+
+const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice']
 
 const proxyMap = new WeakMap()
 
-const reactiveProxy = (target) => {
-  const isProxy = proxyMap.get(target)
-  if (isProxy) {
-    return isProxy
+const getProxy = (obj) => {
+  return proxyMap.get(obj)
+}
+
+const getRaw = (value) => {
+  const raw = value && value[symbols.raw]
+  return raw ? getRaw(raw) : value
+}
+
+const reactiveProxy = (original, _parent = null, _key) => {
+  // if original object is already a proxy, don't create a new one but return the existing one instead
+  const existingProxy = getProxy(original)
+  if (existingProxy) {
+    return existingProxy
   }
 
   const handler = {
     get(target, key, receiver) {
-      if (Array.isArray(target) && arrayMethods.includes(key)) {
-        return Reflect.get(target, key, receiver)
+      // return the original object instead of the proxied
+      if (key === symbols.raw) {
+        return original
       }
 
-      if (target[key] !== null && typeof target[key] === 'object') {
-        return reactiveProxy(target[key])
+      // handling arrays
+      if (Array.isArray(target)) {
+        // augment array path methods (that change the length of the array)
+        if (arrayPatchMethods.indexOf(key) > -1) {
+          return function (...args) {
+            pauseTracking()
+            const result = target[key].apply(this, args)
+            // trigger a change on the parent object and the key
+            // i.e. when pushing a new item to `obj.data`, _parent will equal `obj`
+            // and _key will equal `data`
+            resumeTracking()
+            trigger(_parent, _key)
+            return result
+          }
+        } else {
+          return Reflect.get(target, key, receiver)
+        }
       }
 
+      // 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)
+        }
+        // create a new reactive proxy
+        return reactiveProxy(target[key], target, key)
+      }
+
+      // handling all other types
+      // track the key on the target
       track(target, key)
+      // return the reflected value
       return Reflect.get(target, key, receiver)
     },
     set(target, key, value, receiver) {
-      const oldValue = target[key]
+      // get the raw values (without proxy wrapper) so we can compare them
+      const oldRawValue = getRaw(target[key])
+      const rawValue = getRaw(value)
 
-      let result
-      if (typeof value === 'object' && Array.isArray(value) && proxyMap.get(target[key])) {
-        if (oldValue !== value) {
-          result = oldValue.splice(0, target[key].length, ...value)
-        } else {
-          result = true
-        }
-      } else {
+      let result = true
+      if (oldRawValue !== rawValue) {
         result = Reflect.set(target, key, value, receiver)
       }
 
-      if (typeof value === 'object') {
-        reactiveProxy(target[key])
-      }
-
-      if (key === 'length') {
-        trigger(target, key)
-      } else {
-        if (result && oldValue !== value) {
-          trigger(target, key)
-        }
+      if (result && oldRawValue !== value) {
+        trigger(target, key, true)
       }
       return result
     },
   }
 
-  const proxy = new Proxy(target, handler)
-  proxyMap.set(target, proxy)
+  const proxy = new Proxy(original, handler)
+  proxyMap.set(original, proxy)
   return proxy
 }
 

package/src/lib/setup/base.js

@@ -270,15 +270,15 @@ export default (component, name, identifier) => {
 }
 
 const deleteChildren = function (children) {
-  // for (let i = 0; i < children.length; i++) {
-  //   if (!children[i]) return
-  //   if (Array.isArray(children[i])) {
-  //     deleteChildren(children[i])
-  //   } else if (children[i].destroy) {
-  //     children[i].destroy()
-  //   }
-  //   children[i] = null
-  // }
+  for (let i = 0; i < children.length; i++) {
+    if (!children[i]) return
+    if (Array.isArray(children[i])) {
+      deleteChildren(children[i])
+    } else if (children[i].destroy) {
+      children[i].destroy()
+    }
+    children[i] = null
+  }
 
   children.length = 0
 }

package/src/lib/symbols.js

@@ -13,6 +13,7 @@ export default {
   methodKeys: Symbol('methodKeys'),
   originalState: Symbol('originalState'),
   propKeys: Symbol('propKeys'),
+  raw: Symbol('raw'),
   ready: Symbol('ready'),
   renderer: Symbol('renderer'),
   routes: Symbol('routes'),

package/src/router/router.js

@@ -236,12 +236,12 @@ const removeView = async (route, view, transition) => {
     cacheMap.set(route, { view: view, focus: previousFocus })
   } else {
     // remove and cleanup
-    // for (let i = 0; i < view[symbols.children].length; i++) {
-    //   if (view[symbols.children][i] && view[symbols.children][i].destroy) {
-    //     view[symbols.children][i].destroy()
-    //     view[symbols.children][i] = null
-    //   }
-    // }
+    for (let i = 0; i < view[symbols.children].length; i++) {
+      // if (view[symbols.children][i] && view[symbols.children][i].destroy) {
+      //   view[symbols.children][i].destroy()
+      view[symbols.children][i] = null
+      // }
+    }
     view.destroy()
     view = null
   }