@lightningjs/blits 0.9.2 → 0.9.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+# v0.9.4
+
+_28 mar 2024_
+
+- Upgraded Lightning renderer to v0.8.0
+- Fixed issue with reactivity in a forloop when initial array is empty
+- Introduced new `gpuMemoryLimit` launch setting
+
+
+# v0.9.3
+
+_25 mar 2024_
+
+- Added support for mount / pivot on Text elements and Sprites.
+
 # v0.9.2
 
 _21 mar 2024_

package/docs/components/utilities.md

@@ -2,3 +2,9 @@
 
 ## Utilities
 
+- focus()
+- $router()
+- select()
+- parent
+- Log
+- setTimeout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "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.6",
+    "@lightningjs/renderer": "^0.8.0",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/component.js

@@ -18,8 +18,7 @@
 import parser from './lib/templateparser/parser.js'
 import codegenerator from './lib/codegenerator/generator.js'
 
-import element from './element.js'
-import { renderer } from './launch.js'
+import { stage, renderer } from './launch.js'
 
 import { createHumanReadableId, createInternalId } from './lib/componentId.js'
 import { registerHooks, emit } from './lib/hooks.js'
@@ -42,10 +41,6 @@ import symbols from './lib/symbols.js'
 
 let counter = 0
 
-const stage = {
-  element,
-}
-
 const required = (name) => {
   throw new Error(`Parameter ${name} is required`)
 }

package/src/components/Sprite.js

@@ -31,8 +31,8 @@ export default () =>
         }
         const elementConfig0 = {}
 
-        elementConfig0['w'] = component.w
-        elementConfig0['h'] = component.h
+        elementConfig0['w'] = parent.node.width * (100 / 100)
+        elementConfig0['h'] = parent.node.height * (100 / 100)
 
         if (!elms[0].nodeId) {
           elms[0].populate(elementConfig0)
@@ -50,7 +50,7 @@ export default () =>
       ],
       context: {},
     },
-    props: ['image', 'map', 'frame', 'w', 'h', 'color'],
+    props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
         spriteTexture: false,

package/src/components/Sprite.orig.js

@@ -22,9 +22,9 @@ import symbols from '../lib/symbols.js'
 export default () =>
   Component('Sprite', {
     template: `
-      <Element w="$w" h="$h" :texture="$texture" :color="$color" />
+      <Element w="100%" h="100%" :texture="$texture" :color="$color" />
     `,
-    props: ['image', 'map', 'frame', 'w', 'h', 'color'],
+    props: ['image', 'map', 'frame', 'color'],
     state() {
       return {
         spriteTexture: false,

package/src/engine.js

@@ -0,0 +1 @@
+export { L3 as default } from './engines'

package/src/{element.js → engines/L3/element.js}

@@ -16,10 +16,10 @@
  */
 
 import { renderer } from './launch.js'
-import colors from './lib/colors/colors.js'
+import colors from '../../lib/colors/colors.js'
 
-import { Log } from './lib/log.js'
-import symbols from './lib/symbols.js'
+import { Log } from '../../lib/log.js'
+import symbols from '../../lib/symbols.js'
 
 const deprecationMsg = `
 ----------------------------------------------------------------------------------------------------
@@ -275,6 +275,13 @@ const Element = {
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)
 
+    if (props.__textnode) {
+      this.node.on('loaded', (el, { dimensions }) => {
+        this.node.parent.width = dimensions.width
+        this.node.parent.height = dimensions.height
+      })
+    }
+
     if (props['@loaded']) {
       this.node.on('loaded', (el, { type, dimensions }) => {
         props['@loaded']({ w: dimensions.width, h: dimensions.height, type }, this)

package/src/{fontLoader.js → engines/L3/fontLoader.js}

@@ -1,6 +1,6 @@
 import { WebTrFontFace, SdfTrFontFace } from '@lightningjs/renderer/core'
 
-import Settings from './settings'
+import Settings from '../../settings'
 import { renderer } from './launch'
 
 export default () => {

package/src/engines/L3/index.js

@@ -0,0 +1,7 @@
+import Element from './element'
+import Launch from './launch'
+
+export default {
+  Element,
+  Launch,
+}

package/src/engines/L3/launch.js

@@ -0,0 +1,83 @@
+/*
+ * Copyright 2023 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 { MainCoreDriver, RendererMain } from '@lightningjs/renderer'
+// import RendererWorker from '@lightningjs/renderer/workers/renderer?worker'
+import { Log } from '../../lib/log.js'
+import { screenResolutions } from '../../lib/utils.js'
+import colors from '../../lib/colors/colors.js'
+import fontLoader from './fontLoader.js'
+
+export let renderer
+
+export default (App, target, settings) => {
+  const driver = new MainCoreDriver()
+  // settings.multithreaded === true
+  //   ? new ThreadXRenderDriver({
+  //       RendererWorker,
+  //     })
+  //   : new MainRenderDriver()
+
+  if ('fontLoader' in settings) {
+    Log.warn(
+      `
+
+Starting version 0.9.0 of Blits, the Launch setting \`fontLoader\` is not supported / required anymore.
+You can remove the option from your \`src/index.js\`-file. And you can safely remove the file \`src/fontLoader.js\` from your project.
+      `
+    )
+  }
+
+  renderer = new RendererMain(
+    {
+      appWidth: settings.w || 1920,
+      appHeight: settings.h || 1080,
+      fpsUpdateInterval: settings.fpsInterval || 1000,
+      deviceLogicalPixelRatio:
+        settings.pixelRatio ||
+        screenResolutions[settings.screenResolution] ||
+        screenResolutions[window.innerHeight] ||
+        1,
+      numImageWorkers:
+        'webWorkersLimit' in settings
+          ? settings.webWorkersLimit
+          : window.navigator.hardwareConcurrency || 2,
+      clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
+      enableInspector: settings.inspector || false,
+      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,
+    },
+    target,
+    driver
+  )
+
+  const initApp = () => {
+    let app = App()
+    app.quit = () => {
+      Log.info('Closing App')
+      app.destroy()
+      app = null
+      renderer = null
+    }
+  }
+
+  renderer.init().then(fontLoader).then(initApp)
+
+  return renderer
+}

package/src/engines/index.js

@@ -0,0 +1 @@
+export { default as L3 } from './L3'

package/src/launch.d.ts

@@ -206,7 +206,17 @@ export interface Settings {
    *
    * Defaults to `0`
    */
-  viewportMargin?: number | [number, number, number, number]
+  viewportMargin?: number | [number, number, number, number],
+  /**
+   * Threshold in `Megabytes` after which all the textures that are currently not visible
+   * within the configured viewport margin will be be freed and cleaned up
+   *
+   * When passed `0` the threshold is disabled and textures will not be actively freed
+   * and cleaned up
+   *
+   * Defaults to `200` (mb)
+   */
+  gpuMemoryLimit?: number
 }
 
 /**

package/src/launch.js

@@ -15,69 +15,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { MainCoreDriver, RendererMain } from '@lightningjs/renderer'
-// import RendererWorker from '@lightningjs/renderer/workers/renderer?worker'
 import Settings from './settings.js'
-import { initLog, Log } from './lib/log.js'
-import { screenResolutions } from './lib/utils.js'
-import colors from './lib/colors/colors.js'
-import fontLoader from './fontLoader.js'
+import { initLog } from './lib/log.js'
+import engine from './engine.js'
 
 export let renderer
+export const stage = {}
 
 export default (App, target, settings) => {
   Settings.set(settings)
 
   initLog()
 
-  const driver = new MainCoreDriver()
-  // settings.multithreaded === true
-  //   ? new ThreadXRenderDriver({
-  //       RendererWorker,
-  //     })
-  //   : new MainCoreDriver()
+  stage.element = engine.Element
 
-  if ('fontLoader' in settings) {
-    Log.warn(
-      `
-
-Starting version 0.9.0 of Blits, the Launch setting \`fontLoader\` is not supported / required anymore.
-You can remove the option from your \`src/index.js\`-file. And you can safely remove the file \`src/fontLoader.js\` from your project.
-      `
-    )
-  }
-
-  renderer = new RendererMain(
-    {
-      appWidth: settings.w || 1920,
-      appHeight: settings.h || 1080,
-      fpsUpdateInterval: settings.fpsInterval || 1000,
-      deviceLogicalPixelRatio:
-        settings.pixelRatio ||
-        screenResolutions[settings.screenResolution] ||
-        screenResolutions[window.innerHeight] ||
-        1,
-      numImageWorkers:
-        'webWorkersLimit' in settings
-          ? settings.webWorkersLimit
-          : window.navigator.hardwareConcurrency || 2,
-      clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
-      enableInspector: settings.inspector || false,
-      boundsMargin: settings.viewportMargin || 0,
-    },
-    target,
-    driver
-  )
-
-  const initApp = () => {
-    let app = App()
-    app.quit = () => {
-      Log.info('Closing App')
-      app.destroy()
-      app = null
-      renderer = null
-    }
-  }
-
-  renderer.init().then(fontLoader).then(initApp)
+  renderer = engine.Launch(App, target, settings)
 }

package/src/lib/codegenerator/generator.js

@@ -76,6 +76,7 @@ const generateElementCode = function (
     }
 
     if (isReactiveKey(key)) {
+      if (options.holder && key === ':color') return
       this.effectsCode.push(
         `${elm}.set('${key.substring(1)}', ${interpolate(templateObject[key], options.component)})`
       )
@@ -90,7 +91,7 @@ const generateElementCode = function (
     renderCode.push(`
     if(typeof cmp${counter} !== 'undefined') {
       for(let key in cmp${counter}.config.props) {
-        delete  elementConfig${counter}[cmp${counter}.config.props[key]]
+        delete elementConfig${counter}[cmp${counter}.config.props[key]]
       }
     }
     `)
@@ -218,6 +219,17 @@ const generateForLoopCode = function (templateObject, parent) {
   }
 
   const forCounter = counter
+
+  // reference all reactive attributes (except those referencing the iterator item),
+  // to ensure that reactivity is registered, even when the initial array is empty
+  Object.keys(templateObject).forEach((k) => {
+    if (isReactiveKey(k) && templateObject[k].indexOf('$' + item) === -1) {
+      ctx.renderCode.push(`
+        void ${interpolate(templateObject[k], 'component.')}
+      `)
+    }
+  })
+
   ctx.renderCode.push(`
     const collection = ${cast(result[2], ':for')} || []
     const keys = []

package/src/lib/setup/base.js

@@ -35,7 +35,7 @@ const shaderAlias = {
   rounded: 'radius',
 }
 
-export default (component, name, identifier) => {
+export default (component, name) => {
   Object.defineProperties(component.prototype, {
     name: {
       value: name,

package/src/lib/setup/computed.js

@@ -25,7 +25,7 @@ export default (component, computeds) => {
   for (let computed in computeds) {
     // test for reserved keys?
     if (component[symbols.stateKeys] && component[symbols.stateKeys].indexOf(computed) > -1) {
-      Log.error(`${computed} already exists as a prop`)
+      Log.error(`${computed} already exists as a state variable`)
     } else if (component[symbols.propKeys] && component[symbols.propKeys].indexOf(computed) > -1) {
       Log.error(`${computed} already exists as a prop`)
     } else if (

package/src/router/router.js

@@ -19,7 +19,7 @@ import { default as fadeInFadeOutTransition } from './transitions/fadeInOut.js'
 
 import symbols from '../lib/symbols.js'
 import { Log } from '../lib/log.js'
-import Element from '../element.js'
+import { stage } from '../launch.js'
 import Focus from '../focus.js'
 import Announcer from '../announcer/announcer.js'
 
@@ -130,7 +130,7 @@ export const navigate = async function () {
 
       if (!view) {
         // create a holder element for the new view
-        holder = Element({ parent: this[symbols.children][0] })
+        holder = stage.element({ parent: this[symbols.children][0] })
         holder.populate({})
         holder.set('w', '100%')
         holder.set('h', '100%')