@lightningjs/blits 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 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_
+
+- Added error message when root element in template contains a `:for`-attribute
+- Added workaround fix for shader caching issue
+- Upgraded to renderer v2.12.1
+
 ## v1.20.0
 
 _12 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.0",
+  "version": "1.21.0",
   "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.0"
+    "@lightningjs/renderer": "^2.13.0"
   },
   "repository": {
     "type": "git",

package/src/engines/L3/element.js

@@ -22,6 +22,9 @@ import { Log } from '../../lib/log.js'
 import symbols from '../../lib/symbols.js'
 import Settings from '../../settings.js'
 
+// temporary counter to work around shader caching issues
+let counter = 0
+
 const createPaddingObject = (padding, direction) => {
   if (padding === undefined) {
     return { start: 0, end: 0, oppositeStart: 0, oppositeEnd: 0 }
@@ -309,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
     }
   },
@@ -330,14 +333,21 @@ const propsTransformer = {
     if (this.element.node === undefined) {
       this.props['shader'] = renderer.createShader('DynamicShader', {
         effects: v.map((effect) => {
-          return renderer.createEffect(effect.type, effect.props, effect.type)
+          // temporary add counter to work around shader caching issues
+          return renderer.createEffect(
+            effect.type,
+            effect.props,
+            effect.type + this.element.counter
+          )
         }),
       })
     } else {
       for (let i = 0; i < v.length; i++) {
-        const target = this.element.node.shader.props[v[i].type]
+        // temporary add counter to work around shader caching issues
+        const target = this.element.node.shader.props[v[i].type + this.element.counter]
         const props = Object.keys(v[i].props)
 
+        if (target == undefined) continue
         for (let j = 0; j < props.length; j++) {
           target[props[j]] = v[i].props[props[j]]
         }
@@ -642,5 +652,6 @@ export default (config, component) => {
     scheduledTransitions: {},
     config,
     component,
+    counter: counter++,
   })
 }

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/lib/templateparser/parser.js

@@ -239,6 +239,7 @@ export default (template = '', componentName, parentComponent, filePath = null)
     #2: There must be exactly one top-level element (an element at level 0). This element may either be a self-closing
         element or an opening tag followed by a closing tag. If more than one top-level element is encountered, an error
         should be thrown.
+        But the top-level element can not have :for attribute.
   */
   const format = (parsedData) => {
     let stack = []
@@ -254,6 +255,10 @@ export default (template = '', componentName, parentComponent, filePath = null)
         if (rootElementDefined) {
           throw TemplateStructureError('MultipleTopLevelTags', element)
         }
+        // Check for :for attribute on root level element
+        if (element[':for'] !== undefined) {
+          throw TemplateStructureError('ForAttributeOnRootElement', element)
+        }
         rootElementDefined = true
       }
 

package/src/lib/templateparser/parser.test.js

@@ -1388,3 +1388,24 @@ test('Parse template with color and effects attributes and parsing should conver
   )
   assert.end()
 })
+
+test('Parse template with :for attribute on root element and parsing should fail', (assert) => {
+  const template = `
+  <Element :for="item in $items">
+    <Text content="$item.name" />
+  </Element>
+  `
+
+  try {
+    parser(template)
+    assert.fail('Parser should throw TemplateStructureError:ForAttributeOnRootElement')
+  } catch (error) {
+    assert.equal(error.name, 'TemplateStructureError', 'Parser should throw TemplateStructureError')
+    assert.ok(
+      error.message.startsWith('ForAttributeOnRootElement'),
+      'Parser should throw TemplateStructureError:ForAttributeOnRootElement'
+    )
+  }
+
+  assert.end()
+})

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