@lightningjs/blits 0.6.13 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.6.13",
+  "version": "0.7.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

package/src/components/FPScounter.js

@@ -96,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')
             })
@@ -162,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')
             })
@@ -214,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')
             })
@@ -266,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')
             })
@@ -332,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')
             })
@@ -398,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')
             })
@@ -450,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')
             })
@@ -502,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')
             })
@@ -569,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')
             })
@@ -635,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')
             })
@@ -687,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')
             })
@@ -739,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')
             })
@@ -804,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')
             })
@@ -870,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')
             })
@@ -922,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')
             })
@@ -974,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/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}`
 }