@lightningjs/blits 1.20.1 → 1.21.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## v1.21.1
+
+_28 feb 2025_
+
+- Changed gpuMemory launch settings to be optional in type definitions
+
+## v1.21.0
+
+_27 feb 2025_
+
+- Added functionality for keeping query params when navigating back in the router
+- Exposed more info in reactive router state
+- Added `range`-attribute to for-loop
+- Fixed issue when setting `alpha` to truthy or false values
+- Upgraded to renderer v2.13.0
+
 ## v1.20.1
 
 _14 feb 2025_

package/index.d.ts

@@ -799,8 +799,59 @@ declare module '@lightningjs/blits' {
      * and cleaned up
      *
      * Defaults to `200` (mb)
+     * @deprecated
+     * Deprecated:  use `gpuMemory` launch setting instead
      */
     gpuMemoryLimit?: number,
+    /**
+     * Configures the gpu memory settings used by the renderer
+     */
+    gpuMemory?: {
+      /**
+       * Maximum GPU memory threshold (in `mb`) after which
+       * the renderer will immediately start cleaning up textures to free
+       * up graphical memory
+       *
+       * When setting to `0`, texture memory management is disabled
+       *
+       * @default `200`
+       */
+      max?: number,
+      /**
+       * Target threshold of GPU memory usage, defined as a fraction of
+       * the max threshold. The renderer will attempt to keep memory
+       * usage below this target by cleaning up non-renderable textures
+       *
+       * @default `0.8`
+       */
+      target?: 0.8,
+      /**
+       * Interval at which regular texture cleanups occur (in `ms`)
+       *
+       * @default `5000`
+       */
+      cleanupInterval?: 5000,
+      /**
+       * Baseline GPU memory usage of the App (in `mb`), without rendering any
+       * textures. This value will be used as a basis when calculating
+       * the total memory usage towards the max and target memory
+       * usage
+       *
+       * @default `25`
+       */
+      baseline?: 25,
+      /**
+       * Whether or not the max threshold should be considered
+       * as a strict number that can not be exceeded in any way
+       *
+       * When set to `true`, new textures won't be created when the
+       * max threshold has been reached, until agressive texture cleanup
+       * has brought the memory back down
+       *
+       * @default false
+       */
+      strict?: false,
+    },
     /**
      * Defines which mode the renderer should operate in: `webgl` or `canvas`
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.20.1",
+  "version": "1.21.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.1",
-    "@lightningjs/renderer": "^2.12.1"
+    "@lightningjs/renderer": "^2.13.0"
   },
   "repository": {
     "type": "git",

package/src/engines/L3/element.js

@@ -312,7 +312,7 @@ const propsTransformer = {
     }
   },
   set alpha(v) {
-    if (this.raw['show'] === undefined || this.raw['show'] === true) {
+    if (this.raw['show'] === undefined || this.raw['show'] == true) {
       this.props['alpha'] = v
     }
   },

package/src/engines/L3/launch.js

@@ -42,6 +42,27 @@ const textRenderEngines = (settings) => {
   if (renderMode === 'canvas') return [CanvasTextRenderer]
 }
 
+const textureMemorySettings = (settings) => {
+  const gpuMemory = {
+    ...{
+      max: 200,
+      target: 0.8,
+      cleanupInterval: 5000,
+      baseline: 25,
+      strict: false,
+    },
+    ...('gpuMemory' in settings === true ? settings.gpuMemory : {}),
+  }
+
+  return {
+    criticalThreshold: gpuMemory.max * 1024 * 1024, // convert from mb to bytes
+    targetThresholdLevel: gpuMemory.target,
+    cleanupInterval: gpuMemory.cleanupInterval,
+    baselineMemoryAllocation: gpuMemory.baseline * 1024 * 1024, // convert from mb to bytes
+    doNotExceedCriticalThreshold: gpuMemory.strict,
+  }
+}
+
 export default (App, target, settings = {}) => {
   renderer = new RendererMain(
     {
@@ -62,13 +83,11 @@ export default (App, target, settings = {}) => {
       clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
       inspector: settings.inspector === true ? Inspector : undefined,
       boundsMargin: settings.viewportMargin || 0,
-      // gpu memory limit, converted from mb to bytes - defaults to 200mb
-      txMemByteThreshold:
-        'gpuMemoryLimit' in settings ? settings.gpuMemoryLimit * 1024 * 1024 : 200 * 1024 * 1024,
       renderEngine: renderEngine(settings),
       fontEngines: textRenderEngines(settings),
       canvas: settings.canvas,
       textureProcessingTimeLimit: settings.textureProcessingTimeLimit,
+      textureMemory: textureMemorySettings(settings),
     },
     target
   )

package/src/lib/codegenerator/generator.js

@@ -291,6 +291,9 @@ const generateComponentCode = function (
 const generateForLoopCode = function (templateObject, parent) {
   const forLoop = templateObject[':for']
   delete templateObject[':for']
+  const range = templateObject['range'] || templateObject[':range'] || '{}'
+  delete templateObject['range']
+  delete templateObject[':range']
 
   const key = templateObject['key']
   const forKey = interpolate(key, 'scope.')
@@ -340,10 +343,19 @@ const generateForLoopCode = function (templateObject, parent) {
 
   ctx.renderCode.push(`
     const created${forStartCounter} = []
+
+    let from${forStartCounter}
+    let to${forStartCounter}
+
     const forloop${forStartCounter} = (collection = [], elms, created) => {
       const rawCollection = getRaw(collection)
       const keys = new Set()
       let l = rawCollection.length
+
+      const range = ${interpolate(range)} || {}
+      from${forStartCounter} = range['from'] || 0
+      to${forStartCounter} = 'to' in range ? range['to'] : rawCollection.length
+
       while(l--) {
         const ${item} = rawCollection[l]
   `)
@@ -354,7 +366,9 @@ const generateForLoopCode = function (templateObject, parent) {
     `)
   }
   ctx.renderCode.push(`
-        keys.add('' +  ${interpolate(key, '') || 'l'})
+        if(l < to${forStartCounter} && l >= from${forStartCounter}) {
+          keys.add('' +  ${interpolate(key, '') || 'l'})
+        }
       }
   `)
 
@@ -368,6 +382,7 @@ const generateForLoopCode = function (templateObject, parent) {
       const length = rawCollection.length
       const effects = []
       for(let __index = 0; __index < length; __index++) {
+        if(__index < from${forStartCounter} || __index >= to${forStartCounter}) continue
         const scope = Object.create(component)
         parent = ${parent}
         scope['${item}'] = rawCollection[__index]
@@ -488,6 +503,10 @@ const generateForLoopCode = function (templateObject, parent) {
     effectKey = effectKey.match(/[^.]+$/)[0]
   }
 
+  // get the reference to range from and to
+  const effectKeysRegex = /\$([^,} ]+)/g
+  const effectKeys = [...range.matchAll(effectKeysRegex)].map((match) => `'${match[1]}'`)
+
   ctx.renderCode.push(`
     let forEffects${forStartCounter}
     effect(() => {
@@ -497,7 +516,7 @@ const generateForLoopCode = function (templateObject, parent) {
     result[2],
     ':for'
   )}, elms, created${forStartCounter})
-    }, '${effectKey}' )
+    }, ['${effectKey}', ${effectKeys.join(',')}] )
   `)
 
   outerScopeEffects.forEach((effect) => {
@@ -520,6 +539,7 @@ const generateForLoopCode = function (templateObject, parent) {
       effect(() => {
         void ${refs.join(', ')}
         for(let __index = 0; __index < ${interpolate(result[2])}.length; __index++) {
+          if(__index < from${forStartCounter} || __index >= to${forStartCounter}) continue
           const scope = {}
           scope['${index}'] = __index
           scope['${item}'] = ${interpolate(result[2])}[__index]

package/src/lib/reactivity/effect.js

@@ -49,9 +49,11 @@ export const track = (target, key, global = false) => {
     if (paused) {
       return
     }
-    if (currentKey !== null && key !== currentKey) {
-      return
-    }
+    // note: nesting the conditions like this seems to perform better ¯\_(ツ)_/¯
+    if (Array.isArray(currentKey) === true) {
+      if (currentKey.includes(key) === false) return
+    } else if (currentKey !== null && key !== currentKey) return
+
     let effectsMap = objectMap.get(target)
     if (!effectsMap) {
       effectsMap = new Map()

package/src/lib/reactivity/reactive.js

@@ -101,10 +101,14 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
       const rawValue = getRaw(value)
 
       let result = true
-      const isEqual =
-        Array.isArray(rawValue) === true
-          ? deepEqualArray(oldRawValue, rawValue)
-          : oldRawValue === rawValue
+      let isEqual = false
+
+      // We need to check that the oldRawValue is also an array before we do the deep equal check
+      if (Array.isArray(rawValue) === true && Array.isArray(oldRawValue) === true) {
+        isEqual = deepEqualArray(oldRawValue, rawValue)
+      } else if (oldRawValue === rawValue) {
+        isEqual = true
+      }
 
       if (isEqual === false) {
         if (typeof value === 'object') {

package/src/router/router.js

@@ -25,7 +25,13 @@ import Focus from '../focus.js'
 import Announcer from '../announcer/announcer.js'
 
 export let currentRoute
-export const state = reactive({ path: null, navigating: false })
+export const state = reactive({
+  path: '',
+  navigating: false,
+  data: null,
+  params: null,
+  hash: '',
+})
 
 const cacheMap = new WeakMap()
 const history = []
@@ -38,8 +44,9 @@ let previousFocus
 export const getHash = () => {
   const hashParts = (document.location.hash || '/').replace(/^#/, '').split('?')
   return {
-    hash: hashParts[0],
+    path: hashParts[0],
     queryParams: new URLSearchParams(hashParts[1]),
+    hash: document.location.hash,
   }
 }
 
@@ -108,7 +115,6 @@ export const matchHash = (path, routes = []) => {
     if (!matchingRoute.data) {
       matchingRoute.data = {}
     }
-    currentRoute = matchingRoute
   }
 
   return matchingRoute
@@ -117,9 +123,16 @@ export const matchHash = (path, routes = []) => {
 export const navigate = async function () {
   state.navigating = true
   if (this.parent[symbols.routes]) {
-    const previousRoute = currentRoute
-    const { hash, queryParams } = getHash()
-    let route = matchHash(hash, this.parent[symbols.routes])
+    let previousRoute = currentRoute ? Object.assign({}, currentRoute) : undefined
+    const { hash, path, queryParams } = getHash()
+    let route = matchHash(path, this.parent[symbols.routes])
+
+    // Adding the location hash to the route if it exists.
+    if (hash !== null) {
+      route.hash = hash
+    }
+
+    currentRoute = route
     let beforeHookOutput
     if (route) {
       if (route.hooks) {
@@ -149,6 +162,7 @@ export const navigate = async function () {
       }
 
       let holder
+      let routeData
       let { view, focus } = cacheMap.get(route) || {}
 
       if (!view) {
@@ -164,13 +178,17 @@ export const navigate = async function () {
           queryParamsData[queryParamsEntries[i][0]] = queryParamsEntries[i][1]
         }
 
+        routeData = {
+          ...navigationData,
+          ...route.data,
+          ...queryParamsData,
+        }
+
         // merge props with potential route params, navigation data and route data to be injected into the component instance
         const props = {
           ...this[symbols.props],
           ...route.params,
-          ...navigationData,
-          ...route.data,
-          ...queryParamsData,
+          ...routeData,
         }
 
         view = await route.component({ props }, holder, this)
@@ -236,9 +254,14 @@ export const navigate = async function () {
         if (oldView) {
           removeView(previousRoute, oldView, route.transition.out)
         }
+
+        previousRoute = undefined
       }
 
       state.path = route.path
+      state.params = route.params
+      state.hash = hash
+      state.data = routeData
 
       // apply in transition
       if (route.transition.in) {
@@ -320,7 +343,8 @@ const setOrAnimate = (node, transition, shouldAnimate = true) => {
 export const to = (location, data = {}, options = {}) => {
   navigationData = data
   overrideOptions = options
-  window.location.hash = `#${location}`
+
+  window.location.hash = location
 }
 
 export const back = function () {
@@ -328,13 +352,8 @@ export const back = function () {
   if (route && currentRoute !== route) {
     // set indicator that we are navigating back (to prevent adding page to history stack)
     navigatingBack = true
-    let targetRoutePath = route.path
-    if (targetRoutePath.indexOf(':') > -1) {
-      Object.keys(route.params).forEach((item) => {
-        targetRoutePath = targetRoutePath.replace(`:${item}`, route.params[item])
-      })
-    }
-    to(targetRoutePath)
+
+    to(route.hash, route.data, route.options)
     return true
   }
 
@@ -348,6 +367,7 @@ export const back = function () {
 
   const hashEnd = /(\/:?[\w%\s-]+)$/
   let path = currentRoute.path
+
   let level = path.split('/').length
 
   // On root return