@lightningjs/blits 1.8.0 → 1.8.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## v1.8.2
+
+_30 oct 2024_
+
+- Fixed edgecase issue with array based props not triggering reactivity
+
+
+## v1.8.1
+
+_29 oct 2024_
+
+- Fixed issue with array based props not triggering reactivity
+- Upgraded renderer to 2.5.1
+
+
 ## v1.8.0
 
 _22 oct 2024_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "test": "c8 npm run test:run",
-    "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules)/**/}*.test.js' | tap-diff",
+    "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
     "prepublishOnly": "node scripts/prepublishOnly.js",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.0",
-    "@lightningjs/renderer": "^2.4.0"
+    "@lightningjs/renderer": "^2.5.1"
   },
   "repository": {
     "type": "git",

package/src/components/Circle.js

@@ -25,6 +25,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/FPScounter.js

@@ -27,6 +27,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)
@@ -141,7 +142,12 @@ export default () =>
         props7['h'] = 20
         props7['w'] = 20
         props7['map'] = component.sprite
-        props7['frame'] = component.fps[0]
+
+        propData = component.fps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props7['frame'] = propData
 
         componentType = props7['is'] || 'Sprite'
 
@@ -198,7 +204,12 @@ export default () =>
         props9['h'] = 20
         props9['w'] = 20
         props9['map'] = component.sprite
-        props9['frame'] = component.fps[1]
+
+        propData = component.fps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props9['frame'] = propData
 
         componentType = props9['is'] || 'Sprite'
 
@@ -255,7 +266,12 @@ export default () =>
         props11['h'] = 20
         props11['w'] = 20
         props11['map'] = component.sprite
-        props11['frame'] = component.fps[2]
+
+        propData = component.fps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props11['frame'] = propData
 
         componentType = props11['is'] || 'Sprite'
 
@@ -386,7 +402,12 @@ export default () =>
         props17['h'] = 20
         props17['w'] = 20
         props17['map'] = component.sprite
-        props17['frame'] = component.avgFps[0]
+
+        propData = component.avgFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props17['frame'] = propData
 
         componentType = props17['is'] || 'Sprite'
 
@@ -443,7 +464,12 @@ export default () =>
         props19['h'] = 20
         props19['w'] = 20
         props19['map'] = component.sprite
-        props19['frame'] = component.avgFps[1]
+
+        propData = component.avgFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props19['frame'] = propData
 
         componentType = props19['is'] || 'Sprite'
 
@@ -500,7 +526,12 @@ export default () =>
         props21['h'] = 20
         props21['w'] = 20
         props21['map'] = component.sprite
-        props21['frame'] = component.avgFps[2]
+
+        propData = component.avgFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props21['frame'] = propData
 
         componentType = props21['is'] || 'Sprite'
 
@@ -632,7 +663,12 @@ export default () =>
         props27['h'] = 20
         props27['w'] = 20
         props27['map'] = component.sprite
-        props27['frame'] = component.minFps[0]
+
+        propData = component.minFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props27['frame'] = propData
 
         componentType = props27['is'] || 'Sprite'
 
@@ -689,7 +725,12 @@ export default () =>
         props29['h'] = 20
         props29['w'] = 20
         props29['map'] = component.sprite
-        props29['frame'] = component.minFps[1]
+
+        propData = component.minFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props29['frame'] = propData
 
         componentType = props29['is'] || 'Sprite'
 
@@ -746,7 +787,12 @@ export default () =>
         props31['h'] = 20
         props31['w'] = 20
         props31['map'] = component.sprite
-        props31['frame'] = component.minFps[2]
+
+        propData = component.minFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props31['frame'] = propData
 
         componentType = props31['is'] || 'Sprite'
 
@@ -876,7 +922,12 @@ export default () =>
         props37['h'] = 20
         props37['w'] = 20
         props37['map'] = component.sprite
-        props37['frame'] = component.maxFps[0]
+
+        propData = component.maxFps[0]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props37['frame'] = propData
 
         componentType = props37['is'] || 'Sprite'
 
@@ -933,7 +984,12 @@ export default () =>
         props39['h'] = 20
         props39['w'] = 20
         props39['map'] = component.sprite
-        props39['frame'] = component.maxFps[1]
+
+        propData = component.maxFps[1]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props39['frame'] = propData
 
         componentType = props39['is'] || 'Sprite'
 
@@ -990,7 +1046,12 @@ export default () =>
         props41['h'] = 20
         props41['w'] = 20
         props41['map'] = component.sprite
-        props41['frame'] = component.maxFps[2]
+
+        propData = component.maxFps[2]
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props41['frame'] = propData
 
         componentType = props41['is'] || 'Sprite'
 

package/src/components/Layout.js

@@ -8,6 +8,7 @@ export default () => {
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/RouterView.js

@@ -28,6 +28,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/components/Sprite.js

@@ -27,6 +27,7 @@ export default () =>
         const elms = []
         let componentType
         const rootComponent = component
+        let propData
         const elementConfig0 = {}
 
         elms[0] = this.element({ parent: parent || 'root' }, component)

package/src/helpers/deepEqualArray.js

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const deepEqualArray = (array1, array2) => {
+  if (array1 === array2) return true
+  if (array1.length !== array2.length) return false
+
+  let l = array1.length
+
+  while (l--) {
+    const value1 = array1[l]
+    const value2 = array2[l]
+
+    // values are arrays, deepEqual nested arrays
+    if (Array.isArray(value1) && Array.isArray(value2)) {
+      if (deepEqualArray(value1, value2) === false) return false
+    }
+    // values are objects, deepEqual nested objects
+    else if (
+      typeof value1 === 'object' &&
+      value1 !== null &&
+      typeof value2 === 'object' &&
+      value2 !== null
+    ) {
+      if (deepEqualArray(Object.entries(value1), Object.entries(value2)) === false) return false
+    }
+    // other type, do strict equal check
+    else if (value1 !== value2) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export default deepEqualArray

package/src/helpers/deepEqualArray.test.js

@@ -0,0 +1,127 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import test from 'tape'
+import deepEqual from './deepEqualArray.js'
+
+test('Type', (assert) => {
+  const expected = 'function'
+  const actual = typeof deepEqual
+
+  assert.equal(actual, expected, 'deepEqual should be a function')
+  assert.end()
+})
+
+test('The same arrays', (assert) => {
+  const val1 = ['hello', 'world']
+
+  assert.true(
+    deepEqual(val1, val1),
+    'deepEqual should return true if the values are the same reference'
+  )
+  assert.end()
+})
+
+test('Equal simple arrays', (assert) => {
+  const val1 = ['hello', 'world']
+  const val2 = ['hello', 'world']
+
+  assert.true(deepEqual(val1, val2), 'deepEqual should return true if simple arrays are equal')
+  assert.end()
+})
+
+test('Not equal simple arrays', (assert) => {
+  const val1 = ['hello', 'world']
+  const val2 = ['world', 'hello']
+
+  assert.false(
+    deepEqual(val1, val2),
+    'deepEqual should return false if simple arrays are not equal'
+  )
+  assert.end()
+})
+
+test('Not Equal simple arrays (different length)', (assert) => {
+  const val1 = ['hello', 'world']
+  const val2 = ['hello', 'world', '!']
+
+  assert.false(deepEqual(val1, val2), 'deepEqual should return false if simple arrays are equal')
+  assert.end()
+})
+
+test('Equal nested arrays', (assert) => {
+  const val1 = ['hello', ['world', '!']]
+  const val2 = ['hello', ['world', '!']]
+
+  assert.true(deepEqual(val1, val2), 'deepEqual should return true if nested arrays are equal')
+  assert.end()
+})
+
+test('Not equal nested arrays', (assert) => {
+  const val1 = ['hello', ['world', '!']]
+  const val2 = ['hello', ['world', '!', '?']]
+
+  assert.false(
+    deepEqual(val1, val2),
+    'deepEqual should return false if nested arrays are not equal'
+  )
+  assert.end()
+})
+
+test('Equal arrays with objects', (assert) => {
+  const val1 = [{ foo: 'bar', bar: 'foo' }, { hello: 'world' }]
+  const val2 = [{ foo: 'bar', bar: 'foo' }, { hello: 'world' }]
+
+  assert.true(
+    deepEqual(val1, val2),
+    'deepEqual should return true if arrays with objects are equal'
+  )
+  assert.end()
+})
+
+test('Not equal arrays with objects (keys', (assert) => {
+  const val1 = [{ foo: 'bar', bar: 'foo' }, { test: 'bla' }]
+  const val2 = [{ foo2: 'bar', bar2: 'foo' }, { test: 'bla' }]
+
+  assert.false(
+    deepEqual(val1, val2),
+    'deepEqual should return false if arrays with objects are not equal'
+  )
+  assert.end()
+})
+
+test('Equal arrays with mixed values', (assert) => {
+  const val1 = ['foo', { foo: 'bar', bar: 'foo' }, ['hello', 'world', ['this', 'is', { level: 2 }]]]
+  const val2 = ['foo', { foo: 'bar', bar: 'foo' }, ['hello', 'world', ['this', 'is', { level: 2 }]]]
+
+  assert.true(
+    deepEqual(val1, val2),
+    'deepEqual should return true if arrays with mixed values are equal'
+  )
+  assert.end()
+})
+
+test('Not Equal arrays with mixed values', (assert) => {
+  const val1 = ['foo', { foo: 'bar', bar: 'foo' }, ['hello', 'world', ['this', 'is', { level: 2 }]]]
+  const val2 = ['foo', { foo: 'bar', bar: 'foo' }, ['hello', 'world', ['this', 'is', { level: 3 }]]]
+
+  assert.false(
+    deepEqual(val1, val2),
+    'deepEqual should return true if arrays with mixed values are not equal'
+  )
+  assert.end()
+})

package/src/lib/codegenerator/generator.js

@@ -19,7 +19,12 @@ let counter
 
 export default function (templateObject = { children: [] }) {
   const ctx = {
-    renderCode: ['const elms = []', 'let componentType', 'const rootComponent = component'],
+    renderCode: [
+      'const elms = []',
+      'let componentType',
+      'const rootComponent = component',
+      'let propData',
+    ],
     effectsCode: [],
     context: { props: [], components: this.components },
   }
@@ -212,12 +217,12 @@ const generateComponentCode = function (
         templateObject[key],
         options.component
       )}`)
-      renderCode.push(
-        `props${counter}['${key.substring(1)}'] = ${interpolate(
-          templateObject[key],
-          options.component
-        )}`
-      )
+      renderCode.push(`
+        propData = ${interpolate(templateObject[key], options.component)}
+        if (Array.isArray(propData) === true) {
+          propData = getRaw(propData).slice(0)
+        }
+        props${counter}['${key.substring(1)}'] = propData`)
     } else {
       renderCode.push(
         `props${counter}['${key}'] = ${cast(templateObject[key], key, options.component)}`

package/src/lib/reactivity/reactive.js

@@ -18,6 +18,7 @@
 import { ImageTexture } from '@lightningjs/renderer'
 import { track, trigger, pauseTracking, resumeTracking } from './effect.js'
 import symbols from '../symbols.js'
+import deepEqualArray from '../../helpers/deepEqualArray.js'
 
 const arrayPatchMethods = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort']
 
@@ -38,7 +39,7 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
 
   // if original object is already a proxy, don't create a new one but return the existing one instead
   const existingProxy = proxyMap.get(original)
-  if (existingProxy) {
+  if (existingProxy !== undefined) {
     return existingProxy
   }
 
@@ -50,9 +51,9 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
       }
 
       // handling arrays
-      if (Array.isArray(target)) {
+      if (Array.isArray(target) === true) {
         if (typeof target[key] === 'object' && target[key] !== null) {
-          if (Array.isArray(target[key])) {
+          if (Array.isArray(target[key]) === true) {
             track(target, key, global)
           }
           // create a new reactive proxy
@@ -80,7 +81,7 @@ 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])) {
+        if (Array.isArray(target[key]) === true) {
           track(target, key, global)
         }
         // create a new reactive proxy
@@ -99,13 +100,19 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
       const rawValue = getRaw(value)
 
       let result = true
-      if (oldRawValue !== rawValue) {
+      const isEqual =
+        Array.isArray(rawValue) === true
+          ? deepEqualArray(oldRawValue, rawValue)
+          : oldRawValue === rawValue
+
+      if (isEqual === false) {
+        if (Array.isArray(value) === true) value = getRaw(value).slice(0)
         result = Reflect.set(target, key, value, receiver)
       }
 
-      if (result && oldRawValue !== rawValue) {
+      if (result === true && isEqual === false) {
         // if we're assigning an array key directly trigger reactivity on the parent key as well
-        if (Array.isArray(target) && key in target) {
+        if (Array.isArray(target) === true && key in target === true) {
           trigger(_parent, _key, true)
         }
         trigger(target, key, true)
@@ -126,7 +133,7 @@ const reactiveDefineProperty = (target, global) => {
     if (target[key] !== null && typeof target[key] === 'object') {
       if (Object.getPrototypeOf(target[key]) === Object.prototype) {
         return reactiveDefineProperty(target[key])
-      } else if (Array.isArray(target[key])) {
+      } else if (Array.isArray(target[key]) === true) {
         for (let i = 0; i < arrayPatchMethods.length - 1; i++) {
           target[key][arrayPatchMethods[i]] = function (v) {
             Array.prototype[arrayPatchMethods[i]].call(this, v)