@lightningjs/blits 1.38.3 → 1.39.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## v1.39.1
+
+_26 Sept 2025_
+
+- Bumped Lightning renderer to 2.17.0
+
+
+## v1.39.0
+
+_16 Sept 2025_
+
+- Refactored router to be more performant and prevent runtime route changes to affect other route instances
+
 ## v1.38.3
 
 _4 Sept 2025_

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.38.3",
+  "version": "1.39.1",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -55,7 +55,7 @@
   },
   "dependencies": {
     "@lightningjs/msdf-generator": "^1.1.1",
-    "@lightningjs/renderer": "^2.15.0"
+    "@lightningjs/renderer": "^2.17.0"
   },
   "repository": {
     "type": "git",

package/src/router/router.js

@@ -71,25 +71,25 @@ export const state = reactive(
  * @property {BlitsComponent} focus - The focus of the route
  */
 
-/** @type {Map<String, CacheMapEntry>} */
-const cacheMap = new Map()
 const history = []
 
 let overrideOptions = {}
 let navigationData = {}
 let navigatingBack = false
+let navigatingBackTo = undefined
 let previousFocus
 
 /**
  * Get the current hash
  * @returns {Hash}
  */
-export const getHash = () => {
-  const hashParts = (document.location.hash || '/').replace(/^#/, '').split('?')
+export const getHash = (hash) => {
+  if (!hash) hash = '/'
+  const hashParts = hash.replace(/^#/, '').split('?')
   return {
     path: hashParts[0],
     queryParams: new URLSearchParams(hashParts[1]),
-    hash: document.location.hash,
+    hash: hash,
   }
 }
 
@@ -116,33 +116,50 @@ const isObject = (v) => typeof v === 'object' && v !== null
  */
 const isString = (v) => typeof v === 'string'
 
+const queryParamsToObject = (queryParams) => {
+  if (!queryParams) return {}
+  const object = {}
+  const queryParamsEntries = [...queryParams.entries()]
+  for (let i = 0; i < queryParamsEntries.length; i++) {
+    object[queryParamsEntries[i][0]] = queryParamsEntries[i][1]
+  }
+
+  return object
+}
+
 /**
  * Match a path to a route
  *
- * @param {string} path
+ * @param {object} hashObject
  * @param {Route[]} routes
  * @returns {Route}
  */
-export const matchHash = (path, routes = []) => {
+export const matchHash = ({ hash, path, queryParams }, routes = []) => {
   // remove trailing slashes
   const originalPath = path.replace(/^\/+|\/+$/g, '')
-  path = normalizePath(path)
+  const originalNormalizedPath = normalizePath(path)
+
+  const override = {
+    hash: hash,
+    queryParams: queryParamsToObject(queryParams),
+    path: path,
+  }
 
   /** @type {boolean|Route} */
   let matchingRoute = false
   let i = 0
   while (!matchingRoute && i < routes.length) {
     const route = routes[i]
-    route.path = normalizePath(route.path)
-    if (route.path === path) {
-      route.params = {}
-      matchingRoute = route
-    } else if (route.path.indexOf(':') > -1) {
+
+    const normalizedPath = normalizePath(route.path)
+    if (normalizePath(normalizedPath) === originalNormalizedPath) {
+      matchingRoute = makeRouteObject(route, override)
+    } else if (normalizedPath.indexOf(':') > -1) {
       // match dynamic route parts
-      const dynamicRouteParts = [...route.path.matchAll(/:([^\s/]+)/gi)]
+      const dynamicRouteParts = [...normalizedPath.matchAll(/:([^\s/]+)/gi)]
 
       // construct a regex for the route with dynamic parts
-      let dynamicRoutePartsRegex = route.path
+      let dynamicRoutePartsRegex = normalizedPath
       dynamicRouteParts.reverse().forEach((part) => {
         dynamicRoutePartsRegex =
           dynamicRoutePartsRegex.substring(0, part.index) +
@@ -157,31 +174,26 @@ export const matchHash = (path, routes = []) => {
 
       if (match) {
         // map the route params to a params object
-        route.params = dynamicRouteParts.reverse().reduce((acc, part, index) => {
+        override.params = dynamicRouteParts.reverse().reduce((acc, part, index) => {
           acc[part[1]] = match[index + 1]
           return acc
         }, {})
-        matchingRoute = route
+
+        matchingRoute = makeRouteObject(route, override)
       }
-    } else if (route.path.endsWith('*')) {
-      const regex = new RegExp(route.path.replace(/\/?\*/, '/?([^\\s]*)'), 'i')
-      const match = path.match(regex)
+    } else if (normalizedPath.endsWith('*')) {
+      const regex = new RegExp(normalizedPath.replace(/\/?\*/, '/?([^\\s]*)'), 'i')
+      const match = originalNormalizedPath.match(regex)
 
       if (match) {
-        if (match[1]) route.params = { path: match[1] }
-        matchingRoute = route
+        override.params = {}
+        if (match[1]) override.params.path = match[1]
+        matchingRoute = makeRouteObject(route, override)
       }
     }
     i++
   }
 
-  if (matchingRoute) {
-    matchingRoute.options = { ...defaultOptions, ...matchingRoute.options, ...overrideOptions }
-    if (!matchingRoute.data) {
-      matchingRoute.data = {}
-    }
-  }
-
   // @ts-ignore - Remove me when we have a better way to handle this
   return matchingRoute
 }
@@ -197,6 +209,22 @@ const defaultOptions = {
   reuseComponent: false,
 }
 
+const makeRouteObject = (route, overrides) => {
+  const cleanRoute = {
+    hash: overrides.hash,
+    path: route.path,
+    component: route.component,
+    transition: 'transition' in route ? route.transition : fadeInFadeOutTransition,
+    options: { ...defaultOptions, ...route.options, ...overrideOptions },
+    announce: route.announce || false,
+    hooks: route.hooks || {},
+    data: { ...route.data, ...navigationData, ...overrides.queryParams },
+    params: overrides.params || {},
+  }
+
+  return cleanRoute
+}
+
 /**
  * Navigate to a route
  *
@@ -216,28 +244,11 @@ export const navigate = async function () {
   let reuse = false
   if (this.parent[symbols.routes]) {
     let previousRoute = currentRoute //? Object.assign({}, currentRoute) : undefined
-    const { hash, path, queryParams } = getHash()
-    let route = matchHash(path, this.parent[symbols.routes])
+    let route = matchHash(getHash(document.location.hash), this.parent[symbols.routes])
 
     currentRoute = route
 
     if (route) {
-      const queryParamsData = {}
-      const queryParamsEntries = [...queryParams.entries()]
-      for (let i = 0; i < queryParamsEntries.length; i++) {
-        queryParamsData[queryParamsEntries[i][0]] = queryParamsEntries[i][1]
-      }
-
-      route.data = {
-        ...route.data,
-        ...navigationData,
-        ...queryParamsData,
-      }
-
-      // Adding the location hash to the route if it exists.
-      if (hash !== null) {
-        route.hash = hash
-      }
       let beforeEachResult
       if (this.parent[symbols.routerHooks]) {
         const hooks = this.parent[symbols.routerHooks]
@@ -250,30 +261,33 @@ export const navigate = async function () {
         }
       }
       // If the resolved result is an object, assign it to the target route object
-      route = isObject(beforeEachResult) ? beforeEachResult : route
+      if (isObject(beforeEachResult) === true) {
+        route = beforeEachResult
+      }
 
       let beforeHookOutput
-      if (route.hooks) {
-        if (route.hooks.before) {
-          beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
-          if (isString(beforeHookOutput)) {
-            currentRoute = previousRoute
-            to(beforeHookOutput)
-            return
-          }
+      if (route.hooks.before) {
+        beforeHookOutput = await route.hooks.before.call(this.parent, route, previousRoute)
+        if (isString(beforeHookOutput)) {
+          currentRoute = previousRoute
+          to(beforeHookOutput)
+          return
         }
       }
-      route = isObject(beforeHookOutput) ? beforeHookOutput : route
+      // If the resolved result is an object, assign it to the target route object
+      if (isObject(beforeHookOutput) === true) {
+        route = beforeHookOutput
+      }
       // add the previous route (technically 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) {
+      // into the history stack when inHistory is true and we're not navigating back
+      if (
+        previousRoute !== undefined &&
+        previousRoute.options.inHistory === true &&
+        navigatingBack === false
+      ) {
         history.push(previousRoute)
       }
-      // apply default transition if none specified
-      if (!('transition' in route)) {
-        /** @ts-ignore */
-        route.transition = fadeInFadeOutTransition
-      }
+
       // a transition can be a function returning a dynamic transition object
       // based on current and previous route
       if (typeof route.transition === 'function') {
@@ -283,8 +297,14 @@ export const navigate = async function () {
       /** @type {import('../engines/L3/element.js').BlitsElement} */
       let holder
 
-      let { view, focus } = cacheMap.get(route.hash) || {}
-
+      let view
+      let focus
+      // when navigating back let's see if we're navigating back to a route that was kept alive
+      if (navigatingBack === true && navigatingBackTo !== undefined) {
+        view = navigatingBackTo.view
+        focus = navigatingBackTo.focus
+        navigatingBackTo = null
+      }
       // merge props with potential route params, navigation data and route data to be injected into the component instance
       const props = {
         ...this[symbols.props],
@@ -292,11 +312,13 @@ export const navigate = async function () {
         ...route.data,
       }
 
+      // see if the component of the previous route can be reused for the
+      // current route
       if (
         previousRoute &&
-        route.component === previousRoute.component &&
         route.options.reuseComponent === true &&
-        route.options.keepAlive !== true
+        route.options.keepAlive !== true &&
+        route.component === previousRoute.component
       ) {
         reuse = true
         view = this[symbols.children][this[symbols.children].length - 1]
@@ -320,6 +342,7 @@ export const navigate = async function () {
       state.path = route.path
       state.params = route.params || {}
       state.hash = route.hash
+      state.data = null
       state.data = route.data || {}
 
       if (!view) {
@@ -331,6 +354,7 @@ export const navigate = async function () {
 
         view = await route.component({ props }, holder, this)
 
+        // is the component a dynamic module?
         if (view[Symbol.toStringTag] === 'Module') {
           if (view.default && typeof view.default === 'function') {
             view = view.default({ props }, holder, this)
@@ -338,6 +362,7 @@ export const navigate = async function () {
             Log.error("Dynamic import doesn't have a default export or default is not a function")
           }
         }
+
         if (typeof view === 'function') {
           // had to inline this because the tscompiler does not like LHS reassignments
           // that also change the type of the variable in a variable union
@@ -366,6 +391,7 @@ export const navigate = async function () {
         }
       }
 
+      // store the new view as new child, only if we're not reusing the previous page component
       if (reuse === false) {
         this[symbols.children].push(view)
       }
@@ -377,7 +403,7 @@ export const navigate = async function () {
       this.activeView = children[children.length - 1]
 
       // set focus to the view that we're routing to (unless explicitly disabling passing focus)
-      if (route.options === undefined || route.options.passFocus !== false) {
+      if (route.options.passFocus !== false) {
         focus ? focus.$focus() : /** @type {BlitsComponent} */ (view).$focus()
       }
 
@@ -394,8 +420,9 @@ export const navigate = async function () {
 
       let shouldAnimate = false
 
-      // apply out out transition on previous view
-      if (previousRoute && reuse === false) {
+      // apply out out transition on previous view if available, unless
+      // we're reusing the prvious page component
+      if (previousRoute !== undefined && reuse === false) {
         // only animate when there is a previous route
         shouldAnimate = true
         const oldView = this[symbols.children].splice(1, 1).pop()
@@ -417,10 +444,10 @@ export const navigate = async function () {
         }
       }
     } else {
-      Log.error(`Route ${hash} not found`)
+      Log.error(`Route ${route.hash} not found`)
       const routerHooks = this.parent[symbols.routerHooks]
       if (routerHooks && typeof routerHooks.error === 'function') {
-        routerHooks.error.call(this.parent, `Route ${hash} not found`)
+        routerHooks.error.call(this.parent, `Route ${route.hash} not found`)
       }
     }
   }
@@ -452,13 +479,19 @@ const removeView = async (route, view, transition, navigatingBack) => {
   }
 
   // cache the page when it's as 'keepAlive' instead of destroying
-  if (navigatingBack === false && route.options && route.options.keepAlive === true) {
-    cacheMap.set(route.hash, { view: view, focus: previousFocus })
-  } else if (navigatingBack === true) {
-    // remove the previous route from the cache when navigating back
-    // cacheMap.delete will not throw an error if the route is not in the cache
-    cacheMap.delete(route.hash)
+  if (
+    navigatingBack === false &&
+    route.options &&
+    route.options.keepAlive === true &&
+    route.options.inHistory === true
+  ) {
+    const historyItem = history[history.length - 1]
+    if (historyItem !== undefined) {
+      historyItem.view = view
+      historyItem.focus = previousFocus
+    }
   }
+
   /* Destroy the view in the following cases:
    * 1. Navigating forward, and the previous route is not configured with "keep alive" set to true.
    * 2. Navigating back, and the previous route is configured with "keep alive" set to true.
@@ -470,6 +503,7 @@ const removeView = async (route, view, transition, navigatingBack) => {
   }
 
   previousFocus = null
+  route = null
 }
 
 const setOrAnimate = (node, transition, shouldAnimate = true) => {
@@ -505,7 +539,7 @@ export const back = function () {
   if (route && currentRoute !== route) {
     // set indicator that we are navigating back (to prevent adding page to history stack)
     navigatingBack = true
-
+    navigatingBackTo = route
     to(route.hash, route.data, route.options)
     return true
   }
@@ -534,10 +568,10 @@ export const back = function () {
     }
     // Construct new path to backtrack to
     path = path.replace(hashEnd, '')
-    const route = matchHash(path, this.parent[symbols.routes])
+    const route = matchHash(getHash(path), this.parent[symbols.routes])
 
     if (route && backtrack) {
-      to(route.path)
+      to(route.path, route.data, route.options)
       return true
     }
   }