@lightningjs/blits 1.38.2 → 1.39.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 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_
+
+- Fixed clearing of `idle` and `frameTick` hooks upon component destroy
+- Fixed updating of router state to before init hook
+
 ## v1.38.2
 
 _1 Sept 2025_

package/package.json

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

package/src/component/base/methods.js

@@ -21,6 +21,7 @@ import eventListeners from '../../lib/eventListeners.js'
 import { trigger } from '../../lib/reactivity/effect.js'
 import { Log } from '../../lib/log.js'
 import { removeGlobalEffects } from '../../lib/reactivity/effect.js'
+import { renderer } from '../../launch.js'
 
 export default {
   focus: {
@@ -83,6 +84,17 @@ export default {
       this.$clearTimeouts()
       this.$clearIntervals()
       eventListeners.removeListeners(this)
+
+      const rendererEventListenersLength = this[symbols.rendererEventListeners].length
+      if (rendererEventListenersLength > 0) {
+        for (let i = 0; i < rendererEventListenersLength; i++) {
+          const eventListener = this[symbols.rendererEventListeners][i]
+          renderer.off(eventListener.event, eventListener.cb)
+        }
+      }
+
+      this[symbols.rendererEventListeners] = null
+
       deleteChildren(this[symbols.children])
       this[symbols.children].length = 0
       removeGlobalEffects(this[symbols.effects])

package/src/component.js

@@ -263,19 +263,22 @@ const Component = (name = required('name'), config = required('config')) => {
     // create a reference to an array of children that are slots
     this[symbols.slots] = this[symbols.children].filter((child) => child[symbols.isSlot])
 
+    this[symbols.rendererEventListeners] = []
     // register hooks if component has hooks specified
     if (config.hooks) {
       // frame tick event
       if (config.hooks.frameTick) {
-        renderer.on('frameTick', (r, data) =>
-          emit('frameTick', this[symbols.identifier], this, [data])
-        )
+        const cb = (r, data) => emit('frameTick', this[symbols.identifier], this, [data])
+        this[symbols.rendererEventListeners].push({ event: 'frameTick', cb })
+        renderer.on('frameTick', cb)
       }
 
       if (config.hooks.idle) {
-        renderer.on('idle', () => {
+        const cb = () => {
           emit('idle', this[symbols.identifier], this)
-        })
+        }
+        this[symbols.rendererEventListeners].push({ event: 'idle', cb })
+        renderer.on('idle', cb)
       }
 
       // inBounds event emiting a lifecycle attach event

package/src/lib/symbols.js

@@ -7,6 +7,7 @@
  * @property {symbol} cursorTagStart
  * @property {symbol} computedKeys
  * @property {symbol} destroy
+ * @property {symbol} rendererEventListeners
  * @property {symbol} getChildren
  * @property {symbol} holder
  * @property {symbol} id
@@ -59,6 +60,7 @@ export default {
   cursorTagStart: Symbol('cursorTagStart'),
   computedKeys: Symbol('computedKeys'),
   destroy: Symbol('destroy'),
+  rendererEventListeners: Symbol('rendererEventListeners'),
   getChildren: Symbol('getChildren'),
   holder: Symbol('holder'),
   id: Symbol('id'),

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,27 +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]
@@ -249,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') {
@@ -282,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],
@@ -291,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]
@@ -314,6 +337,14 @@ export const navigate = async function () {
         Announcer.speak(route.announce.message, route.announce.politeness)
       }
 
+      // Update router state after announcements and final route resolution,
+      // right before initializing or restoring the view
+      state.path = route.path
+      state.params = route.params || {}
+      state.hash = route.hash
+      state.data = null
+      state.data = route.data || {}
+
       if (!view) {
         // create a holder element for the new view
         holder = stage.element({ parent: this[symbols.children][0] })
@@ -323,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)
@@ -330,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
@@ -358,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)
       }
@@ -369,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()
       }
 
@@ -386,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()
@@ -396,11 +431,6 @@ export const navigate = async function () {
         }
       }
 
-      state.path = route.path
-      state.params = route.params
-      state.hash = hash
-      state.data = route.data
-
       // apply in transition
       if (route.transition.in) {
         if (Array.isArray(route.transition.in)) {
@@ -414,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`)
       }
     }
   }
@@ -449,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.
@@ -467,6 +503,7 @@ const removeView = async (route, view, transition, navigatingBack) => {
   }
 
   previousFocus = null
+  route = null
 }
 
 const setOrAnimate = (node, transition, shouldAnimate = true) => {
@@ -502,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
   }
@@ -531,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
     }
   }