@lightningjs/blits 0.9.3 → 0.9.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+# v0.9.5
+
+_29 mar 2024_
+
+- Fixed cancelling  of scheduled / running transitions when starting a new transition on the same prop (broke in v0.7.1).
+- Added viewport relates lifecycle hooks
+
+# 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_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.9.3",
+  "version": "0.9.5",
   "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.d.ts

@@ -113,11 +113,13 @@ declare namespace Component {
     ready?: (this: ComponentInstance) => void
     /**
     * Triggers when the Component receives focus.
+    *
     * This event can fire multiple times during the component's lifecycle
     */
     focus?: (this: ComponentInstance) => void
     /**
     * Triggers when the Component loses focus.
+    *
     * This event can fire multiple times during the component's lifecycle
     */
     unfocus?: (this: ComponentInstance) => void
@@ -130,7 +132,31 @@ declare namespace Component {
     *
     * Note: This hook will fire continuously, multiple times per second!
     */
-    frameTick?: (this: ComponentInstance) => void
+    frameTick?: (this: ComponentInstance) => void,
+    /**
+    * Fires when the component enters the viewport _margin_ and is attached to the render tree
+    *
+    * This event can fire multiple times during the component's lifecycle
+    */
+    attach?: (this: ComponentInstance) => void,
+    /**
+    * Fires when the component leaves the viewport _margin_ and is detached from the render tree
+    *
+    * This event can fire multiple times during the component's lifecycle
+    */
+    detach?: (this: ComponentInstance) => void,
+    /**
+    * Fires when the component enters the visible viewport
+    *
+    * This event can fire multiple times during the component's lifecycle
+    */
+    enter?: (this: ComponentInstance) => void,
+    /**
+    * Fires when the component leaves the visible viewport
+    *
+    * This event can fire multiple times during the component's lifecycle
+    */
+    exit?: (this: ComponentInstance) => void,
   }
 
   export interface ComponentInstance {

package/src/component.js

@@ -102,7 +102,7 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     this.parent = parentComponent
-    this[symbols.wrapper] = parentEl
+    this[symbols.holder] = parentEl
 
     Object.defineProperties(this, {
       componentId: {
@@ -163,6 +163,37 @@ const Component = (name = required('name'), config = required('config')) => {
       configurable: false,
     })
 
+    Object.defineProperty(this, symbols.wrapper, {
+      value: this[symbols.children][0],
+      writable: false,
+      enumerable: false,
+      configurable: false,
+    })
+
+    if (config.hooks && config.hooks.attach) {
+      this[symbols.wrapper].node.on('inBounds', () => {
+        this.lifecycle.state = 'attach'
+      })
+    }
+
+    if (config.hooks && config.hooks.detach) {
+      this[symbols.wrapper].node.on('outOfBounds', (node, { previous }) => {
+        if (previous > 0) this.lifecycle.state = 'detach'
+      })
+    }
+
+    if (config.hooks && config.hooks.enter) {
+      this[symbols.wrapper].node.on('inViewport', () => {
+        this.lifecycle.state = 'enter'
+      })
+    }
+
+    if (config.hooks && config.hooks.enter) {
+      this[symbols.wrapper].node.on('outOfViewport', () => {
+        this.lifecycle.state = 'exit'
+      })
+    }
+
     Object.defineProperty(this, symbols.slots, {
       value: this[symbols.children].filter((child) => child[symbols.isSlot]),
       writable: false,

package/src/engines/L3/element.js

@@ -311,11 +311,10 @@ const Element = {
   },
   animate(prop, value, transition) {
     if (this.node[prop] === value) return Promise.resolve()
-    // check if a transition is already schedule or running on the same prop
+    // check if a transition is already scheduled or running on the same prop
     if (this.scheduledTransitions[prop]) {
-      // clearTimeout(this.scheduledTransitions[prop].timeout)
       if (this.scheduledTransitions[prop].f.state === 'running') {
-        this.scheduledTransitions[prop].f.pause()
+        this.scheduledTransitions[prop].f.stop()
         // fastforward to final value
         this.node[prop] = this.scheduledTransitions[prop].v
       }
@@ -348,33 +347,33 @@ const Element = {
       const startValue = this.node[prop]
       this.scheduledTransitions[prop] = {
         v: props[prop],
-        f: () => {
-          try {
-            f.start()
-              .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)
+        cancel: false,
+        f,
+      }
+
+      try {
+        f.start()
+          .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])
               })
-          } catch (e) {
-            Log.error(e)
-          }
-        },
+              .then(resolve)
+          })
+      } catch (e) {
+        Log.error(e)
       }
-      this.scheduledTransitions[prop].f()
     })
   },
   destroy() {

package/src/engines/L3/launch.js

@@ -59,6 +59,9 @@ You can remove the option from your \`src/index.js\`-file. And you can safely re
       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

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/lib/codegenerator/generator.js

@@ -219,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/lifecycle.js

@@ -19,7 +19,17 @@ import { Log } from './log.js'
 import { emit, privateEmit } from './hooks.js'
 import symbols from './symbols.js'
 
-const states = ['init', 'ready', 'focus', 'unfocus', 'destroy']
+const states = [
+  'init', // fired upon component instantiation
+  'ready', // fired when component instantiated, reactivity setup done and template spawned
+  'focus', // fired when receiving focus (can occur multiple times)
+  'unfocus', // fired when losing focus (can occur multiple times)
+  'destroy', // fired when component is destroyed and removed
+  'attach', // fired when entering the viewport margin and attached to the render tree
+  'detach', // fired when leaving the viewport margin and detached from the render tree
+  'enter', // fired when entering the visible viewport
+  'exit', // fired when leaving the visible viewport
+]
 
 export default {
   previous: null,

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/lib/symbols.js

@@ -3,6 +3,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  holder: Symbol('holder'),
   id: Symbol('id'),
   identifier: Symbol('identifier'),
   index: Symbol('index'),

package/src/router/router.js

@@ -149,7 +149,7 @@ export const navigate = async function () {
           view = view({ props }, holder, this)
         }
       } else {
-        holder = view[symbols.wrapper]
+        holder = view[symbols.holder]
       }
 
       this[symbols.children].push(view)
@@ -223,11 +223,11 @@ const removeView = async (route, view, transition) => {
     if (Array.isArray(transition)) {
       for (let i = 0; i < transition.length; i++) {
         i === transition.length - 1
-          ? await setOrAnimate(view[symbols.wrapper], transition[i])
-          : setOrAnimate(view[symbols.wrapper], transition[i])
+          ? await setOrAnimate(view[symbols.holder], transition[i])
+          : setOrAnimate(view[symbols.holder], transition[i])
       }
     } else {
-      await setOrAnimate(view[symbols.wrapper], transition)
+      await setOrAnimate(view[symbols.holder], transition)
     }
   }