@lightningjs/blits 1.37.0 → 1.38.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## v1.38.0
+
+_26 Aug 2025_
+
+- Added `reuseComponent` to route options to enable navigating to the same page and reusing the same page component instance
+
 ## v1.37.0
 
 _22 Aug 2025_

package/index.d.ts

@@ -185,15 +185,31 @@ declare module '@lightningjs/blits' {
     [key: string]: any
   }
 
-  // todo: specify valid route options
-  export interface RouteOptions {
+  /**
+   * Router Options that can be used at the same time.
+   */
+  interface ConcurrentRouteOpts {
     /**
      * Whether the page navigation should be added to the history stack
      * used when navigating back using `this.$router.back()`
      *
      * @default true
      */
-    inHistory?: Boolean
+    inHistory?: boolean,
+    passFocus?: boolean,
+  }
+
+  /**
+   * Route Options that can't be true at the same time
+   */
+  type MutualExclusiveRouteOpts = {
+    /**
+     * Whether the router should reuse the current page component instance (when matching with the Component
+     * specified for the route that we're routing to).
+     *
+     * @default true
+     */
+    reuseComponent?: true,
     /**
      * Whether the page should be kept alive when navigating away. Can be useful
      * for a homepage where the state should be fully retained when navigating back
@@ -201,17 +217,25 @@ declare module '@lightningjs/blits' {
      *
      * @default false
      */
-    keepAlive?: Boolean
+    keepAlive?: false
+  } | {
     /**
-     * Whether the focus should be delegated to the page that's being navigated to.
-     * Can be useful when navigating to a new page from a widget / menu overlaying the
-     * RouterView, where the widget should maintain the focus (instead of the new page, which
-     * is the default behaviour)
+     * Whether the router should reuse the current page component instance (when matching with the Component
+     * specified for the route that we're routing to).
      *
      * @default true
      */
-    passFocus?: Boolean
+    reuseComponent?: false,
+    /**
+     * Whether the page should be kept alive when navigating away. Can be useful
+     * for a homepage where the state should be fully retained when navigating back
+     * from a details page
+     *
+     * @default false
+     */
+    keepAlive?: true
   }
+  export type RouteOptions = ConcurrentRouteOpts & MutualExclusiveRouteOpts;
 
   export interface Router {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.37.0",
+  "version": "1.38.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -21,7 +21,8 @@
     "prepublishOnly": "node scripts/prepublishOnly.js",
     "postpublish": "node scripts/postpublish.js",
     "prepare": "husky",
-    "pack-preview": "npm pack --dry-run"
+    "pack-preview": "npm pack --dry-run",
+    "release": "npm publish --access public"
   },
   "types": "./index.d.ts",
   "lint-staged": {

package/src/router/router.js

@@ -176,7 +176,7 @@ export const matchHash = (path, routes = []) => {
   }
 
   if (matchingRoute) {
-    matchingRoute.options = { ...matchingRoute.options, ...overrideOptions }
+    matchingRoute.options = { ...defaultOptions, ...matchingRoute.options, ...overrideOptions }
     if (!matchingRoute.data) {
       matchingRoute.data = {}
     }
@@ -186,6 +186,17 @@ export const matchHash = (path, routes = []) => {
   return matchingRoute
 }
 
+/**
+ * Default Route options
+ *
+ */
+const defaultOptions = {
+  inHistory: true,
+  keepAlive: false,
+  passFocus: true,
+  reuseComponent: false,
+}
+
 /**
  * Navigate to a route
  *
@@ -202,12 +213,14 @@ export const navigate = async function () {
   Announcer.stop()
   Announcer.clear()
   state.navigating = true
+  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])
 
     currentRoute = route
+
     if (route) {
       const queryParamsData = {}
       const queryParamsEntries = [...queryParams.entries()]
@@ -271,6 +284,26 @@ export const navigate = async function () {
 
       let { view, focus } = cacheMap.get(route.hash) || {}
 
+      // merge props with potential route params, navigation data and route data to be injected into the component instance
+      const props = {
+        ...this[symbols.props],
+        ...route.params,
+        ...route.data,
+      }
+
+      if (
+        previousRoute &&
+        route.component === previousRoute.component &&
+        route.options.reuseComponent === true &&
+        route.options.keepAlive !== true
+      ) {
+        reuse = true
+        view = this[symbols.children][this[symbols.children].length - 1]
+        for (const prop in props) {
+          view[symbols.props][prop] = props[prop]
+        }
+      }
+
       // Announce route change if a message has been specified for this route
       if (route.announce) {
         if (typeof route.announce === 'string') {
@@ -288,13 +321,6 @@ export const navigate = async function () {
         holder.set('w', '100%')
         holder.set('h', '100%')
 
-        // merge props with potential route params, navigation data and route data to be injected into the component instance
-        const props = {
-          ...this[symbols.props],
-          ...route.params,
-          ...route.data,
-        }
-
         view = await route.component({ props }, holder, this)
 
         if (view[Symbol.toStringTag] === 'Module') {
@@ -359,7 +385,7 @@ export const navigate = async function () {
       let shouldAnimate = false
 
       // apply out out transition on previous view
-      if (previousRoute) {
+      if (previousRoute && reuse === false) {
         // only animate when there is a previous route
         shouldAnimate = true
         const oldView = this[symbols.children].splice(1, 1).pop()