@lightningjs/blits 0.6.12 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# v0.7.0
+
+- Added support for dynamic components through the `is`-attribute (`<Component is="Poster" />` or `<Component is="$dynamicComponent" />`)
+- Added functionality to pass extra data / props when navigating to a new route ( _breaking change_ in signature of `router.to()` method - previously: `router.to(path, options)`, now: `router.to(path, data, options)`)
+- Added configuration option to set the canvas color (aka clear color)
+
+# v0.6.13
+
+_16 feb 2024_
+
+- Upgraded to 0.7.2 of the renderer
+- Introduced new `maxheight` attribute (besided the existing `maxlines` attribute) for the `<Text />` component
+- Fixed issue with order of lifecycle event emits
+- Fixed logic to not unfoces a parent when it passes focus to a child
+- Removed temporary fix for renderer issue [#123](https://github.com/lightning-js/renderer/issues/123)
+
 # v0.6.12
 
 _9 feb 2024_

package/package.json

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

package/src/component.js

@@ -97,15 +97,13 @@ const Component = (name = required('name'), config = required('config')) => {
       },
       set state(v) {
         if (states.indexOf(v) > -1 && v !== this.current) {
-          Log.debug(
-            `Setting lifecycle state from ${this.previous} to ${v} for ${scope.componentId}`
-          )
+          Log.debug(`Setting lifecycle state from ${this.current} to ${v} for ${scope.componentId}`)
           this.previous = this.current
+          this.current = v
           // emit 'private' hook
           privateEmit(v, name, scope)
           // emit 'public' hook
           emit(v, name, scope)
-          this.current = v
         }
       },
     }

package/src/components/FPScounter.js

@@ -19,8 +19,6 @@ import Component from '../component.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-console.log(fps_sprite)
-
 export default () =>
   Component('FPScounter', {
     /* eslint-disable no-unused-vars */
@@ -98,9 +96,11 @@ export default () =>
         props4['frame'] = 'fps'
 
         if (!elms[4]) {
+          const componentType = props4['is'] || 'Sprite'
+
           elms[4] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -164,9 +164,11 @@ export default () =>
         props7['frame'] = component.fps[0]
 
         if (!elms[7]) {
+          const componentType = props7['is'] || 'Sprite'
+
           elms[7] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -216,9 +218,11 @@ export default () =>
         props9['frame'] = component.fps[1]
 
         if (!elms[9]) {
+          const componentType = props9['is'] || 'Sprite'
+
           elms[9] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -268,9 +272,11 @@ export default () =>
         props11['frame'] = component.fps[2]
 
         if (!elms[11]) {
+          const componentType = props11['is'] || 'Sprite'
+
           elms[11] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -334,9 +340,11 @@ export default () =>
         props14['frame'] = 'avg'
 
         if (!elms[14]) {
+          const componentType = props14['is'] || 'Sprite'
+
           elms[14] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -400,9 +408,11 @@ export default () =>
         props17['frame'] = component.avgFps[0]
 
         if (!elms[17]) {
+          const componentType = props17['is'] || 'Sprite'
+
           elms[17] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -452,9 +462,11 @@ export default () =>
         props19['frame'] = component.avgFps[1]
 
         if (!elms[19]) {
+          const componentType = props19['is'] || 'Sprite'
+
           elms[19] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -504,9 +516,11 @@ export default () =>
         props21['frame'] = component.avgFps[2]
 
         if (!elms[21]) {
+          const componentType = props21['is'] || 'Sprite'
+
           elms[21] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -571,9 +585,11 @@ export default () =>
         props24['frame'] = 'min'
 
         if (!elms[24]) {
+          const componentType = props24['is'] || 'Sprite'
+
           elms[24] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -637,9 +653,11 @@ export default () =>
         props27['frame'] = component.minFps[0]
 
         if (!elms[27]) {
+          const componentType = props27['is'] || 'Sprite'
+
           elms[27] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -689,9 +707,11 @@ export default () =>
         props29['frame'] = component.minFps[1]
 
         if (!elms[29]) {
+          const componentType = props29['is'] || 'Sprite'
+
           elms[29] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -741,9 +761,11 @@ export default () =>
         props31['frame'] = component.minFps[2]
 
         if (!elms[31]) {
+          const componentType = props31['is'] || 'Sprite'
+
           elms[31] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -806,9 +828,11 @@ export default () =>
         props34['frame'] = 'max'
 
         if (!elms[34]) {
+          const componentType = props34['is'] || 'Sprite'
+
           elms[34] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -872,9 +896,11 @@ export default () =>
         props37['frame'] = component.maxFps[0]
 
         if (!elms[37]) {
+          const componentType = props37['is'] || 'Sprite'
+
           elms[37] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -924,9 +950,11 @@ export default () =>
         props39['frame'] = component.maxFps[1]
 
         if (!elms[39]) {
+          const componentType = props39['is'] || 'Sprite'
+
           elms[39] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })
@@ -976,9 +1004,11 @@ export default () =>
         props41['frame'] = component.maxFps[2]
 
         if (!elms[41]) {
+          const componentType = props41['is'] || 'Sprite'
+
           elms[41] = (
-            (context.components && context.components['Sprite']) ||
-            component[Symbol.for('components')]['Sprite'] ||
+            (context.components && context.components[componentType]) ||
+            component[Symbol.for('components')][componentType] ||
             (() => {
               console.error('component Sprite not found')
             })

package/src/components/FPScounter.orig.js

@@ -19,8 +19,6 @@ import Component from '../component.js'
 import { renderer } from '../launch.js'
 import fps_sprite from '../../public/assets/fps_sprite.base64.js'
 
-console.log(fps_sprite)
-
 export default () =>
   Component('FPScounter', {
     template: `

package/src/components/Text.js

@@ -67,6 +67,9 @@ export default () =>
         function anonymous(component, elms, context) {
           elms[0].set('maxLines', component.maxlines)
         },
+        function anonymous(component, elms, context) {
+          elms[0].set('h', component.maxheight)
+        },
         function anonymous(component, elms, context) {
           elms[0].set('textAlign', component.align)
         },
@@ -95,6 +98,7 @@ export default () =>
       'align',
       'wordwrap',
       'maxlines',
+      'maxheight',
       'lineheight',
       'contain',
       '@loaded',
@@ -105,7 +109,7 @@ export default () =>
       _contain() {
         return (
           this.contain ||
-          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
         )
       },
       _lineheight() {

package/src/components/Text.orig.js

@@ -35,6 +35,7 @@ export default () =>
         contain="$_contain"
         :wordWrap="$wordwrap"
         :maxLines="$maxlines"
+        :h="$maxheight"
         :textAlign="$align"
         :overflowSuffix="$textoverflow"
         @loaded="$@loaded"
@@ -59,6 +60,7 @@ export default () =>
       'align',
       'wordwrap',
       'maxlines',
+      'maxheight',
       'lineheight',
       'contain',
       '@loaded',
@@ -69,7 +71,7 @@ export default () =>
       _contain() {
         return (
           this.contain ||
-          (this.wordwrap && this.maxlines ? 'both' : this.wordwrap ? 'width' : 'none')
+          (this.maxheight && this.wordwrap ? 'both' : this.wordwrap ? 'width' : 'none')
         )
       },
       _lineheight() {

package/src/element.js

@@ -51,8 +51,6 @@ const unpackTransition = (obj) => {
   return obj
 }
 
-let firstNode = false
-
 const Props = {
   set parent(v) {
     this._props.parent = v === 'root' ? renderer.root : v.node
@@ -201,7 +199,7 @@ const Props = {
     this._props.contain = v
   },
   set maxLines(v) {
-    this.height = v * this.element.node.lineHeight
+    this._props.maxLines = v
   },
   set overflowSuffix(v) {
     this._props.overflowSuffix = v === false ? ' ' : v === true ? undefined : v
@@ -247,13 +245,6 @@ const Element = {
         this.props._set.has('src') || this.props._set.has('texture') ? 0xffffffff : 0
     }
 
-    // temporary workaround for renderer issue https://github.com/lightning-js/renderer/issues/123
-    if (!firstNode) {
-      this.props._props.src =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII='
-      firstNode = true
-    }
-
     this.node = props.__textnode
       ? renderer.createTextNode(this.props._props)
       : renderer.createNode(this.props._props)

package/src/focus.js

@@ -35,7 +35,7 @@ export default {
   },
   set(component, event) {
     clearTimeout(setFocusTimeout)
-    focusedComponent && focusedComponent.unfocus()
+    focusedComponent && focusedComponent !== component.parent && focusedComponent.unfocus()
     focusChain.reverse().forEach((cmp) => cmp.unfocus())
     if (component !== focusedComponent) {
       setFocusTimeout = setTimeout(

package/src/launch.d.ts

@@ -162,6 +162,16 @@ export interface Settings {
   * `navigator.hardwareConcurrency` (or 2 if `navigator.hardwareConcurrency` is not supported)
   */
   webWorkersLimit?: number
+  /**
+   * Background color of the canvas (also known as the clearColor)
+   *
+   * Can be a color name (red, blue, silver), a hexadecimal color (`#000000`, `#ccc`),
+   * or a color number in rgba order (`0xff0033ff`)
+   *
+   * Defauls to transparent (`0x00000000`)
+   *
+   */
+  canvasColor?: string,
 }
 
 /**

package/src/launch.js

@@ -20,7 +20,7 @@ import { MainCoreDriver, RendererMain } from '@lightningjs/renderer'
 import Settings from './settings.js'
 import { initLog, Log } from './lib/log.js'
 import { screenResolutions } from './lib/utils.js'
-// import coreExtensionModule from './fontLoader.js?importChunkUrl'
+import colors from './lib/colors/colors.js'
 
 export let renderer
 
@@ -51,6 +51,7 @@ export default (App, target, settings) => {
         'webWorkersLimit' in settings
           ? settings.webWorkersLimit
           : window.navigator.hardwareConcurrency || 2,
+      clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
     },
     target,
     driver

package/src/lib/codegenerator/generator.js

@@ -169,11 +169,11 @@ const generateComponentCode = function (
 
   renderCode.push(`
     if(!${elm}) {
-      ${elm} = (context.components && context.components['${
+      const componentType = props${counter}['is'] || '${
     templateObject[Symbol.for('componentType')]
-  }'] || component[Symbol.for('components')]['${
-    templateObject[Symbol.for('componentType')]
-  }'] || (() => { console.error('component ${
+  }'
+
+  ${elm} = (context.components && context.components[componentType] || component[Symbol.for('components')][componentType] || (() => { console.error('component ${
     templateObject[Symbol.for('componentType')]
   } not found')})).call(null, {props: props${counter}}, ${parent}, component)
       if (${elm}[Symbol.for('slots')][0]) {

package/src/router/router.js

@@ -28,7 +28,9 @@ export let navigating = false
 
 const cacheMap = new WeakMap()
 const history = []
+
 let overrideOptions = {}
+let navigationData = {}
 let navigatingBack = false
 let previousFocus
 
@@ -133,7 +135,8 @@ export const navigate = async function () {
         holder.set('w', '100%')
         holder.set('h', '100%')
         // merge props with potential route params to be injected into the component instance
-        const props = { ...this[symbols.props], ...route.params }
+        const props = { ...this[symbols.props], ...route.params, ...navigationData }
+
         view = await route.component({ props }, holder, this)
         if (view[Symbol.toStringTag] === 'Module') {
           if (view.default && typeof view.default === 'function') {
@@ -250,7 +253,8 @@ const setOrAnimate = (node, transition, shouldAnimate = true) => {
     : node.set(transition.prop, transition.value)
 }
 
-export const to = (location, options = {}) => {
+export const to = (location, data = {}, options = {}) => {
+  navigationData = data
   overrideOptions = options
   window.location.hash = `#${location}`
 }