@lightningjs/blits 1.7.1 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.7.1",
+  "version": "1.8.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -13,12 +13,13 @@
   },
   "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",
     "postpublish": "node scripts/postpublish.js"
   },
+  "types": "./index.d.ts",
   "lint-staged": {
     "*.js": [
       "eslint --fix"
@@ -47,8 +48,8 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/msdf-generator": "^1.0.2",
-    "@lightningjs/renderer": "^2.3.2"
+    "@lightningjs/msdf-generator": "^1.1.0",
+    "@lightningjs/renderer": "^2.5.1"
   },
   "repository": {
     "type": "git",

package/src/components/FPScounter.js

@@ -141,6 +141,7 @@ export default () =>
         props7['h'] = 20
         props7['w'] = 20
         props7['map'] = component.sprite
+
         props7['frame'] = component.fps[0]
 
         componentType = props7['is'] || 'Sprite'
@@ -198,6 +199,7 @@ export default () =>
         props9['h'] = 20
         props9['w'] = 20
         props9['map'] = component.sprite
+
         props9['frame'] = component.fps[1]
 
         componentType = props9['is'] || 'Sprite'
@@ -255,6 +257,7 @@ export default () =>
         props11['h'] = 20
         props11['w'] = 20
         props11['map'] = component.sprite
+
         props11['frame'] = component.fps[2]
 
         componentType = props11['is'] || 'Sprite'
@@ -386,6 +389,7 @@ export default () =>
         props17['h'] = 20
         props17['w'] = 20
         props17['map'] = component.sprite
+
         props17['frame'] = component.avgFps[0]
 
         componentType = props17['is'] || 'Sprite'
@@ -443,6 +447,7 @@ export default () =>
         props19['h'] = 20
         props19['w'] = 20
         props19['map'] = component.sprite
+
         props19['frame'] = component.avgFps[1]
 
         componentType = props19['is'] || 'Sprite'
@@ -500,6 +505,7 @@ export default () =>
         props21['h'] = 20
         props21['w'] = 20
         props21['map'] = component.sprite
+
         props21['frame'] = component.avgFps[2]
 
         componentType = props21['is'] || 'Sprite'
@@ -632,6 +638,7 @@ export default () =>
         props27['h'] = 20
         props27['w'] = 20
         props27['map'] = component.sprite
+
         props27['frame'] = component.minFps[0]
 
         componentType = props27['is'] || 'Sprite'
@@ -689,6 +696,7 @@ export default () =>
         props29['h'] = 20
         props29['w'] = 20
         props29['map'] = component.sprite
+
         props29['frame'] = component.minFps[1]
 
         componentType = props29['is'] || 'Sprite'
@@ -746,6 +754,7 @@ export default () =>
         props31['h'] = 20
         props31['w'] = 20
         props31['map'] = component.sprite
+
         props31['frame'] = component.minFps[2]
 
         componentType = props31['is'] || 'Sprite'
@@ -876,6 +885,7 @@ export default () =>
         props37['h'] = 20
         props37['w'] = 20
         props37['map'] = component.sprite
+
         props37['frame'] = component.maxFps[0]
 
         componentType = props37['is'] || 'Sprite'
@@ -933,6 +943,7 @@ export default () =>
         props39['h'] = 20
         props39['w'] = 20
         props39['map'] = component.sprite
+
         props39['frame'] = component.maxFps[1]
 
         componentType = props39['is'] || 'Sprite'
@@ -990,6 +1001,7 @@ export default () =>
         props41['h'] = 20
         props41['w'] = 20
         props41['map'] = component.sprite
+
         props41['frame'] = component.maxFps[2]
 
         componentType = props41['is'] || 'Sprite'

package/src/engines/L3/element.js

@@ -386,13 +386,21 @@ const Element = {
       f,
     }
 
-    if (transition.start && typeof transition.start === 'function') {
+    if (transition.start !== undefined && typeof transition.start === 'function') {
       // fire transition start callback when animation really starts (depending on specified delay)
       f.once('animating', () => {
         transition.start.call(this.component, this, prop, startValue)
       })
     }
 
+    if (transition.progress !== undefined && typeof transition.progress === 'function') {
+      let prevProgress = 0
+      f.on('tick', (_node, { progress }) => {
+        transition.progress.call(this.component, this, prop, progress, prevProgress)
+        prevProgress = progress
+      })
+    }
+
     f.once('stopped', () => {
       // remove the prop from scheduled transitions
       this.scheduledTransitions[prop] = undefined

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

@@ -212,12 +212,11 @@ const generateComponentCode = function (
         templateObject[key],
         options.component
       )}`)
-      renderCode.push(
-        `props${counter}['${key.substring(1)}'] = ${interpolate(
-          templateObject[key],
-          options.component
-        )}`
-      )
+      renderCode.push(`
+        props${counter}['${key.substring(1)}']=  ${interpolate(
+        templateObject[key],
+        options.component
+      )}`)
     } 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)

package/vite/msdfGenerator.js

@@ -1,5 +1,6 @@
 import path from 'path'
 import * as fs from 'fs'
+import { createHash } from 'crypto'
 import { genFont, setGeneratePaths } from '@lightningjs/msdf-generator'
 import { adjustFont } from '@lightningjs/msdf-generator/adjustFont'
 
@@ -21,6 +22,8 @@ class TaskQueue {
 
 const fontGenerationQueue = new TaskQueue()
 let config
+let checksumPaths = []
+let checksumData = []
 
 export default function () {
   let msdfOutputDir = ''
@@ -53,10 +56,12 @@ export default function () {
             // Attempt to find the font file with supported extensions
             const supportedExtensions = ['ttf', 'otf', 'woff']
             let fontFile = null
+            let fontType = null
             for (const fontExt of supportedExtensions) {
               const potentialPath = path.join(fontDir, `${fontName}.${fontExt}`)
               if (fs.existsSync(potentialPath)) {
                 fontFile = potentialPath
+                fontType = '.' + fontExt
                 break
               }
             }
@@ -70,10 +75,13 @@ export default function () {
               const mimeType = ext === 'png' ? 'image/png' : 'application/json'
 
               await fontGenerationQueue.enqueue(async () => {
-                if (!fs.existsSync(generatedFontFile)) {
-                  // Check if generation is needed
+                if (isGenerationRequired(fontDir, targetDir, fontName, fontType)) {
+                  const configFilePath = path.join(fontDir, `${fontName}.config.json`)
+
                   console.log(`\nGenerating ${targetDir}/${fontName}.msdf.${ext}`)
-                  await generateSDF(fontFile, path.join(targetDir))
+                  await generateSDF(fontFile, path.join(targetDir), configFilePath)
+
+                  saveChecksum()
                 }
               })
 
@@ -109,14 +117,17 @@ export default function () {
 
       for (const fontFile of fontFiles) {
         const relativePath = path.relative(publicDir, path.dirname(fontFile))
+        const fontExt = path.extname(fontFile)
         const baseName = path.basename(fontFile).replace(/\.(ttf|otf|woff)$/i, '')
-        const msdfJsonPath = path.join(msdfOutputDir, relativePath, `${baseName}.msdf.json`)
-        const msdfPngPath = path.join(msdfOutputDir, relativePath, `${baseName}.msdf.png`)
+        const targetDir = path.join(msdfOutputDir, relativePath)
 
-        // Check if MSDF files are generated, if not, generate them
-        if (!fs.existsSync(msdfJsonPath) || !fs.existsSync(msdfPngPath)) {
+        // Check MSDF generation is required
+        if (isGenerationRequired(path.dirname(fontFile), targetDir, baseName, fontExt)) {
+          const configFilePath = path.join(path.dirname(fontFile), `${baseName}.config.json`)
           console.log(`Generating missing MSDF files for ${fontFile}`)
-          await generateSDF(fontFile, path.join(msdfOutputDir, relativePath))
+          await generateSDF(fontFile, path.join(msdfOutputDir, relativePath), configFilePath)
+
+          saveChecksum()
         }
       }
 
@@ -127,11 +138,11 @@ export default function () {
   }
 }
 
-const generateSDF = async (inputFilePath, outputDirPath) => {
+const generateSDF = async (inputFilePath, outputDirPath, configFilePath) => {
   // Ensure the destination directory exists
   fs.mkdirSync(outputDirPath, { recursive: true })
 
-  setGeneratePaths(path.dirname(inputFilePath), outputDirPath)
+  setGeneratePaths(path.dirname(inputFilePath), outputDirPath, configFilePath)
 
   let font = await genFont(path.basename(inputFilePath), 'msdf')
 
@@ -168,6 +179,74 @@ const copyDir = (src, dest) => {
     const srcPath = path.join(src, entry.name)
     const destPath = path.join(dest, entry.name)
 
+    // Should not copy .checksum files to dist directory
+    if (srcPath.indexOf('.checksum') !== -1) continue
+
     entry.isDirectory() ? copyDir(srcPath, destPath) : fs.copyFileSync(srcPath, destPath) // Copy files
   }
 }
+
+// Check font config.json or font file modified since last generation
+const isGenerationRequired = (fontDir, targetDir, fontName, fontExt) => {
+  const fontFilePath = path.resolve(fontDir, fontName + fontExt)
+  const fontChecksumPath = path.resolve(targetDir, fontName + fontExt + '.checksum')
+
+  const configJsonPath = path.resolve(fontDir, fontName + '.config.json')
+  const configChecksumPath = path.resolve(targetDir, fontName + '.config.checksum')
+
+  // If font file checksum not exists, should generate msdf
+  if (!fs.existsSync(fontChecksumPath)) {
+    checksumPaths.push(fontChecksumPath)
+    checksumData.push(generateHash(fontFilePath))
+
+    if (fs.existsSync(configJsonPath)) {
+      checksumPaths.push(configChecksumPath)
+      checksumData.push(generateHash(configJsonPath))
+    }
+    return true
+  }
+
+  // If config.json exists, can be newly added or modified since last generation of msdf
+  if (fs.existsSync(configJsonPath)) {
+    // If config.json checksum not exists, should generate msdf
+    if (!fs.existsSync(configChecksumPath)) {
+      checksumPaths.push(configChecksumPath)
+      checksumData.push(generateHash(configJsonPath))
+      return true
+    }
+    const isConfigModified = isInputFileModified(configJsonPath, configChecksumPath)
+
+    // If config.json is modified, should generate msdf
+    if (isConfigModified) return true
+  }
+
+  // Check font file modified, if modified, should generate msdf
+  return isInputFileModified(fontFilePath, fontChecksumPath)
+}
+
+const isInputFileModified = (inputFilePath, targetFilePath) => {
+  const inputChecksum = generateHash(inputFilePath)
+  const targetChecksum = fs.readFileSync(targetFilePath).toString()
+  if (inputChecksum !== targetChecksum) {
+    checksumPaths.push(targetFilePath)
+    checksumData.push(inputChecksum)
+    return true
+  }
+  return false
+}
+
+const generateHash = (filePath) => {
+  const buffer = fs.readFileSync(filePath)
+  return createHash('md5').update(buffer).digest('hex')
+}
+
+const saveChecksum = () => {
+  if (checksumPaths.length > 0 && checksumData.length > 0) {
+    for (let i = 0; i < checksumPaths.length; i++) {
+      // Save checksum
+      fs.writeFileSync(checksumPaths[i], checksumData[i])
+    }
+    checksumData.length = 0
+    checksumPaths.length = 0
+  }
+}