@lightningjs/blits 0.9.4 → 0.9.5

package/CHANGELOG.md

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

package/docs/components/utilities.md

@@ -2,9 +2,3 @@
 
 ## Utilities
 
-- focus()
-- $router()
-- select()
-- parent
-- Log
-- setTimeout

package/package.json

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

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/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/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)
     }
   }