@lightningjs/blits 0.5.8 → 0.5.9

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 # v0.5.8
 
+_21 dec 2023_
+
+- Changed transition-end callback to receive real prop value from node
+- Implemented symbol for `wrapper` on Component (freeing up the name wrapper to be used in Component state)
+- Added functionality to prevent a route ending up in the history stack (route option: `inHistory: false`)
+- Improved router backtracking logic
+- Added functionality to override route options during navigation
+- Upgraded to latest version of the renderer (0.6.1) which contains a fix for animations not finishing correctly
+
+# v0.5.8
+
 _15 dec 2023_
 
 - Internal refactor of the `Element`

package/boilerplate/package.json

@@ -31,6 +31,6 @@
     "vite": "^4.0.4"
   },
   "dependencies": {
-    "@lightningjs/blits": "^0.5.8"
+    "@lightningjs/blits": "^0.5.9"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.cjs",
   "exports": {
@@ -42,7 +42,7 @@
     "tape": "^5.5.0"
   },
   "dependencies": {
-    "@lightningjs/renderer": "^0.6.0",
+    "@lightningjs/renderer": "^0.6.1",
     "@lightningjs/vite-plugin-import-chunk-url": "^0.3.0"
   }
 }

package/src/component.js

@@ -121,7 +121,7 @@ const Component = (name = required('name'), config = required('config')) => {
     }
 
     this.parent = parentComponent
-    this.wrapper = parentEl
+    this[symbols.wrapper] = parentEl
 
     Object.defineProperties(this, {
       type: {

package/src/element.js

@@ -317,7 +317,7 @@ const Element = {
                 // fire transition end callback if specified
                 transition.end &&
                   typeof transition.end === 'function' &&
-                  transition.end.call(this.component, this, prop, props[prop])
+                  transition.end.call(this.component, this, prop, this.node[prop])
               })
               .then(resolve)
           } catch (e) {

package/src/lib/setup/routes.js

@@ -21,6 +21,17 @@ export default (component, routes) => {
   component.prototype[symbols.routes] = []
   Object.keys(routes).forEach((key) => {
     // todo: validate routes[key] for expected format etc.
-    component.prototype[symbols.routes][key] = routes[key]
+    component.prototype[symbols.routes][key] = {
+      ...routes[key],
+      ...{
+        // merge default route options with route specific options
+        options: {
+          ...{
+            inHistory: true,
+          },
+          ...routes[key].options,
+        },
+      },
+    }
   })
 }

package/src/lib/symbols.js

@@ -23,6 +23,7 @@ export default {
   type: Symbol('type'),
   watchers: Symbol('watchers'),
   watchKeys: Symbol('watchKeys'),
+  wrapper: Symbol('wrapper'),
 
   /* Utilizing the global Symbol registry for the following purposes */
 

package/src/router/router.js

@@ -27,6 +27,8 @@ export let navigating = false
 
 const cacheMap = new WeakMap()
 const history = []
+let overrideOptions = {}
+let navigatingBack = false
 
 export const getHash = () => {
   return (document.location.hash || '/').replace(/^#/, '')
@@ -38,7 +40,10 @@ export const matchHash = (path, routes = []) => {
       return r.path === path
     })
     .pop()
-  if (route) currentRoute = route
+  if (route) {
+    route.options = { ...route.options, ...overrideOptions }
+    currentRoute = route
+  }
   return route
 }
 
@@ -50,7 +55,11 @@ export const navigate = async function () {
     const route = matchHash(hash, this.parent[symbols.routes])
 
     if (route) {
-      if (history[history.length - 1] !== hash) history.push(hash)
+      // add the previous route (tecnhically still the current route at this point)
+      // into the history stack, unless navigating back or inHistory flag of route is false
+      if (navigatingBack === false && previousRoute && previousRoute.options.inHistory === true) {
+        history.push(previousRoute)
+      }
       // apply default transition if none specified
       if (!('transition' in route)) {
         route.transition = fadeInFadeOutTransition
@@ -82,7 +91,7 @@ export const navigate = async function () {
           view = view(this[symbols.props], holder, this)
         }
       } else {
-        holder = view.wrapper
+        holder = view[symbols.wrapper]
       }
 
       this[symbols.children].push(view)
@@ -130,6 +139,9 @@ export const navigate = async function () {
       Log.error(`Route ${hash} not found`)
     }
   }
+
+  // reset navigating indicators
+  navigatingBack = false
   navigating = false
 }
 
@@ -139,11 +151,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.wrapper, transition[i])
-          : setOrAnimate(view.wrapper, transition[i])
+          ? await setOrAnimate(view[symbols.wrapper], transition[i])
+          : setOrAnimate(view[symbols.wrapper], transition[i])
       }
     } else {
-      await setOrAnimate(view.wrapper, transition)
+      await setOrAnimate(view[symbols.wrapper], transition)
     }
   }
 
@@ -169,14 +181,17 @@ const setOrAnimate = (node, transition, shouldAnimate = true) => {
     : node.set(transition.prop, transition.value)
 }
 
-export const to = (location) => {
+export const to = (location, options = {}) => {
+  overrideOptions = options
   window.location.hash = `#${location}`
 }
 
 export const back = () => {
-  if (history.length > 1) {
-    to(history[history.length - 2])
-    history.splice(-2, 2)
+  const route = history.pop()
+  if (route) {
+    // set indicator that we are navigating back (to prevent adding page to history stack)
+    navigatingBack = true
+    to(route.path)
     return true
   } else {
     return false