@lightningjs/blits 1.36.0 → 1.38.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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_
+
+- Added Route options check before checking passFocus flag
+- Added support for additional metadata in Route config (for associating arbitrary data to a route)
+- Upgraded dev dependencies to latest versions
+
 ## v1.36.0
 
 _11 Aug 2025_

package/eslint.config.cjs

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const {
+    defineConfig,
+    globalIgnores,
+} = require("eslint/config");
+
+const globals = require("globals");
+const prettier = require("eslint-plugin-prettier");
+const babelParser = require("@babel/eslint-parser");
+const js = require("@eslint/js");
+
+const {
+    FlatCompat,
+} = require("@eslint/eslintrc");
+
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+module.exports = defineConfig([{
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ...globals.node,
+            globalThis: false,
+        },
+
+        parser: babelParser,
+        ecmaVersion: 2018,
+        sourceType: "module",
+
+        parserOptions: {
+            requireConfigFile: false,
+
+            babelOptions: {
+                plugins: ["@babel/plugin-syntax-import-assertions"],
+            },
+        },
+    },
+
+    plugins: {
+        prettier,
+    },
+
+    extends: compat.extends("eslint:recommended", "plugin:prettier/recommended", "prettier"),
+
+    rules: {
+        "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+        quotes: [2, "single", "avoid-escape"],
+        semi: [2, "never"],
+        "no-extra-boolean-cast": "off",
+
+        "no-unused-vars": [1, {
+            argsIgnorePattern: "res|next|^err",
+        }],
+
+        "prettier/prettier": ["error", {
+            trailingComma: "es5",
+            singleQuote: true,
+            tabWidth: 2,
+            semi: false,
+            printWidth: 100,
+            endOfLine: "auto",
+        }],
+    },
+}, globalIgnores(["**/node_modules"])]);

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 {
     /**
@@ -679,6 +703,17 @@ declare module '@lightningjs/blits' {
     data?: {
       [key: string]: any
     }
+
+    /**
+     * Metadata attached to the route, can be used to add any arbitrary
+     * data to a route such as `auth: true/false`, a route ID or route description
+     * Note that this data is not reactive and not passed as props to components.
+     * The metadata is available in the router `before` or `beforeEach` hooks
+     *
+     */
+    meta?: {
+      [key: string]: any
+    }
   }
 
   type ComponentFactory = () => void

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.36.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": {
@@ -35,16 +36,19 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.26.5",
     "@babel/plugin-syntax-import-assertions": "^7.26.0",
-    "c8": "^8.0.1",
-    "eslint": "^8.8.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.33.0",
+    "c8": "^9.1.0",
+    "eslint": "^9.33.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
     "fast-glob": "^3.3.3",
     "global-jsdom": "24.0.0",
+    "globals": "^16.3.0",
     "husky": "^9.1.7",
     "jsdom": "24.0.0",
     "lint-staged": "^15.5.0",
-    "prettier": "^2.5.1",
+    "prettier": "^3.6.2",
     "sinon": "^21.0.0",
     "tap-diff": "^0.1.1",
     "tape": "^5.5.0"

package/src/application.js

@@ -96,9 +96,12 @@ const Application = (config) => {
 
       Focus.input(key, e)
       clearTimeout(holdTimeout)
-      holdTimeout = setTimeout(() => {
-        Focus.hold = true
-      }, Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS))
+      holdTimeout = setTimeout(
+        () => {
+          Focus.hold = true
+        },
+        Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS)
+      )
     }
 
     keyUpHandler = (e) => {

package/src/component/setup/props.js

@@ -41,8 +41,8 @@ export default (component, props = []) => {
           this[symbols.props] !== undefined && prop.key in this[symbols.props]
             ? this[symbols.props][prop.key]
             : 'default' in prop
-            ? prop.default
-            : undefined
+              ? prop.default
+              : undefined
         )
 
         if (prop.required === true && value === undefined) {

package/src/engines/L3/element.js

@@ -107,8 +107,8 @@ const layoutFn = function (config) {
             ? node.height + gap
             : 0
           : node.height !== 0
-          ? node.height + gap
-          : 0
+            ? node.height + gap
+            : 0
     }
     otherDimension = Math.max(
       otherDimension,

package/src/lib/codegenerator/generator.js

@@ -191,9 +191,9 @@ const generateElementCode = function (
       } else {
         this.effectsCode.push(`
             ${elm}.set('${key.substring(1)}', ${interpolate(
-          templateObject[key],
-          options.component
-        )})
+              templateObject[key],
+              options.component
+            )})
           `)
       }
       // value.includes('.') === false &&
@@ -310,9 +310,9 @@ const generateComponentCode = function (
     if (isReactiveKey(key)) {
       this.effectsCode.push(`
         ${elm}[Symbol.for('props')]['${key.substring(1)}'] = ${interpolate(
-        templateObject[key],
-        options.component
-      )}`)
+          templateObject[key],
+          options.component
+        )}`)
       renderCode.push(`
         propData = ${interpolate(templateObject[key], options.component)}
         if (Array.isArray(propData) === true) {

package/src/plugins/language.js

@@ -41,8 +41,8 @@ export default {
         Object.keys(translations).length === 0
           ? 'No translations loaded. Please load a file with translations or specify a translations object manually'
           : language in translations === false
-          ? `Language ${language} not available in the loaded translations`
-          : false
+            ? `Language ${language} not available in the loaded translations`
+            : false
       if (warningMsg) {
         Log.warn(warningMsg)
         // set the current language in the reactive state
@@ -127,12 +127,15 @@ export default {
           return Object.keys(
             // maps array input to an object {0: 'item1', 1: 'item2'}
             Array.isArray(replacements) ? Object.assign({}, replacements) : replacements
-          ).reduce((text, replacementKey) => {
-            return text.replace(
-              new RegExp('{\\s?' + replacementKey + '\\s?}', 'g'),
-              replacements[replacementKey]
-            )
-          }, (dictionary && dictionary[key]) || key)
+          ).reduce(
+            (text, replacementKey) => {
+              return text.replace(
+                new RegExp('{\\s?' + replacementKey + '\\s?}', 'g'),
+                replacements[replacementKey]
+              )
+            },
+            (dictionary && dictionary[key]) || key
+          )
         }
       },
       get language() {

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') {
@@ -341,7 +367,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.passFocus !== false) {
+      if (route.options === undefined || route.options.passFocus !== false) {
         focus ? focus.$focus() : /** @type {BlitsComponent} */ (view).$focus()
       }
 
@@ -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()