@lightningjs/blits 0.7.0 → 0.7.2

package/.eslintrc.cjs

@@ -46,6 +46,7 @@ module.exports = {
         tabWidth: 2,
         semi: false,
         printWidth: 100,
+        endOfLine: 'auto',
       },
     ],
   },

package/CHANGELOG.md

@@ -1,7 +1,30 @@
 # Changelog
 
+# v0.7.2
+
+_23 feb 2024_
+
+- Added small fix to support for (re)assigning an array used in a for-loop
+- Added option to enable the Lightning inspector in launch setting (`inspector: true/false`)
+
+# 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "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/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

@@ -172,6 +172,15 @@ export interface Settings {
    *
    */
   canvasColor?: string,
+  /**
+   * Enable inspector
+   *
+   * Enables the inspector tool for debugging and inspecting the application, the node tree
+   * will be replicated in the DOM and can be inspected using the browser's developer tools
+   *
+   * Defaults to `false`
+   */
+  inspector?: boolean
 }
 
 /**

package/src/launch.js

@@ -52,6 +52,7 @@ export default (App, target, settings) => {
           ? settings.webWorkersLimit
           : window.navigator.hardwareConcurrency || 2,
       clearColor: (settings.canvasColor && colors.normalize(settings.canvasColor)) || 0x00000000,
+      enableInspector: settings.inspector || false,
     },
     target,
     driver