@lightningjs/blits 0.6.13 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+# v0.7.1
+
+_22 feb 2024_
+
+- Fixed clean up of children nodes when routing to a new view
+- Fixed test cases for code generator (100% coverage)
+- Added support for colorizing sprites
+- Removed before setup and setup lifecycle events and optimized lifecycle instance in components
+- Added support for (re)assigning an array used in a for-loop
+- Refactored delay of transitions (using the now available built-in delay in the renderer)
+- Added preliminary support for frameTick hook
+- Upgraded to latest version of the renderer (0.7.4)
+
+# v0.7.0
+
+_20 feb 2024_
+
+
+- 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.1",
   "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.2",
+    "@lightningjs/renderer": "^0.7.4",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0",
     "execa": "^8.0.1",
     "kolorist": "^1.8.0",

package/src/component.d.ts

@@ -124,7 +124,13 @@ declare namespace Component {
     /**
     * Fires when the Component is being destroyed and removed.
     */
-    destroy?: (this: ComponentInstance) => void
+    destroy?: (this: ComponentInstance) => void,
+    /**
+    * Fires upon each frame start  (allowing you to tap directly into the renderloop)
+    *
+    * Note: This hook will fire continuously, multiple times per second!
+    */
+    frameTick?: (this: ComponentInstance) => void
   }
 
   export interface ComponentInstance {
@@ -142,9 +148,9 @@ declare namespace Component {
     * Set a timeout that is automatically cleaned upon component destroy
     */
     $setTimeout: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setTimeout>
-    
+
     /**
-    * Clear a timeout 
+    * Clear a timeout
     */
     $clearTimeout: (id: ReturnType<typeof setTimeout>) => void
 
@@ -152,12 +158,12 @@ declare namespace Component {
     * Set an interval that is automatically cleaned upon component destroy
     */
     $setInterval: (callback: (args: any) => void, ms?: number | undefined) => ReturnType<typeof setInterval>
-    
+
     /**
-    * Clear a interval 
+    * Clear a interval
     */
     $clearInterval: (id: ReturnType<typeof setInterval>) => void
-    
+
     /**
     * Log to the console with prettier output and configurable debug levels in Settings
     */

package/src/component.js

@@ -19,9 +19,10 @@ 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 { createHumanReadableId, createInternalId } from './lib/componentId.js'
-import { registerHooks, emit, privateEmit } from './lib/hooks.js'
+import { registerHooks, emit } from './lib/hooks.js'
 
 import { reactive } from './lib/reactivity/reactive.js'
 import setupBase from './lib/setup/base.js'
@@ -34,6 +35,7 @@ import setupRoutes from './lib/setup/routes.js'
 import setupWatch from './lib/setup/watch.js'
 import { effect } from './lib/reactivity/effect.js'
 import { Log } from './lib/log.js'
+import lifecycle from './lib/lifecycle.js'
 
 import Settings from './settings.js'
 import symbols from './lib/symbols.js'
@@ -47,18 +49,17 @@ const required = (name) => {
 }
 
 const Component = (name = required('name'), config = required('config')) => {
-  const setupComponent = (lifecycle, parentComponent) => {
+  const setupComponent = (parentComponent) => {
     // code generation
     if (!config.code) {
       Log.debug(`Generating code for ${name} component`)
       config.code = codegenerator.call(config, parser(config.template, name, parentComponent))
     }
 
-    setupBase(component)
+    setupBase(component, name)
 
     // setup hooks
     registerHooks(config.hooks, name)
-    lifecycle.state = 'beforeSetup'
 
     // setup props
     // if (config.props) // because of the default props like id - might change this
@@ -83,37 +84,20 @@ const Component = (name = required('name'), config = required('config')) => {
     if (config.input) setupInput(component, config.input)
 
     component.setup = true
-    lifecycle.state = 'setup'
   }
 
-  const createLifecycle = (scope) => {
-    const states = ['init', 'beforeSetup', 'setup', 'ready', 'focus', 'unfocus', 'destroy']
-
-    return {
+  const component = function (opts, parentEl, parentComponent) {
+    this.lifecycle = Object.assign(Object.create(lifecycle), {
+      component: this,
       previous: null,
       current: null,
-      get state() {
-        return this.current
-      },
-      set state(v) {
-        if (states.indexOf(v) > -1 && v !== this.current) {
-          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)
-        }
-      },
-    }
-  }
-
-  const component = function (opts, parentEl, parentComponent) {
-    this.lifecycle = createLifecycle(this)
+    })
 
     if (!component.setup) {
-      setupComponent(this.lifecycle, parentComponent)
+      setupComponent(parentComponent)
+    }
+    if (config.hooks && config.hooks.frameTick) {
+      renderer.on('frameTick', (r, data) => emit('frameTick', name, this, [data]))
     }
 
     this.parent = parentComponent

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/components/Sprite.js

@@ -44,10 +44,13 @@ export default () =>
         function anonymous(component, elms, context) {
           elms[0].set('texture', component.texture)
         },
+        function anonymous(component, elms, context) {
+          elms[0].set('color', component.color)
+        },
       ],
       context: {},
     },
-    props: ['image', 'map', 'frame', 'w', 'h'],
+    props: ['image', 'map', 'frame', 'w', 'h', '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" />
+      <Element w="$w" h="$h" :texture="$texture" :color="$color" />
     `,
-    props: ['image', 'map', 'frame', 'w', 'h'],
+    props: ['image', 'map', 'frame', 'w', 'h', 'color'],
     state() {
       return {
         spriteTexture: false,

package/src/element.js

@@ -304,39 +304,44 @@ const Element = {
             ? transition.function
             : 'ease'
           : 'ease',
+      delay: typeof transition === 'object' ? ('delay' in transition ? transition.delay : 0) : 0,
     })
 
     // schedule transition
     return new Promise((resolve) => {
+      const startValue = this.node[prop]
       this.scheduledTransitions[prop] = {
         v: props[prop],
-        f,
-        timeout: setTimeout(() => {
-          // fire transition start callback if specified
-          transition.start &&
-            typeof transition.start === 'function' &&
-            transition.start.call(this.component, this, prop, props[prop])
-
-          // start the animation
+        f: () => {
           try {
             f.start()
-              .waitUntilStopped()
-              .then(() => delete this.scheduledTransitions[prop])
-              .then(() => {
-                // fire transition end callback if specified
-                transition.end &&
-                  typeof transition.end === 'function' &&
-                  transition.end.call(this.component, this, prop, this.node[prop])
+              .waitUntilStarted()
+              .then((animation) => {
+                // fire transition start callback if specified
+                transition.start &&
+                  typeof transition.start === 'function' &&
+                  transition.start.call(this.component, this, prop, startValue)
+                // continue the chain
+                animation
+                  .waitUntilStopped()
+                  .then(() => delete this.scheduledTransitions[prop])
+                  .then(() => {
+                    // fire transition end callback if specified
+                    transition.end &&
+                      typeof transition.end === 'function' &&
+                      transition.end.call(this.component, this, prop, this.node[prop])
+                  })
+                  .then(resolve)
               })
-              .then(resolve)
           } catch (e) {
             Log.error(e)
           }
-        }, transition.delay || 0),
+        },
       }
+      this.scheduledTransitions[prop].f()
     })
   },
-  delete() {
+  destroy() {
     Log.debug('Deleting  Node', this.nodeId)
     Object.values(this.scheduledTransitions).forEach((scheduledTransition) => {
       clearTimeout(scheduledTransition.timeout)

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]) {