@lightningjs/blits 1.33.0 → 1.35.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+_22 Jul 2025_
+
+## v1.35.0
+
+- Added `byReference` param to `this.$emit()` to allow passing data without passing it by reference
+- Refactored focus handling
+  - more performant
+  - more robust for reassigning focus programatically (i.e. without direct key handling)
+  - fixed some cases where `$hasFocus` flag wasn't reset upon unfocus
+  - add logging of active focus chain upon focus changes
+- Improved overall test coverage to almost 80% (Blits Element, Focus, Theme plugin, Storage plugin)
+
+_10 Jul 2025_
+
+## v1.34.0
+
+- Added storage plugin
+- Improved test coverage
+- Fixed announcer plugin to work on RDK devices where early GC was happening
+- Added check to throttle only the same input key in a row
+- Updated docs on transitions
+- Added warning when using `hasFocus` in component state
+
 _08 Jul 2025_
 
 ## v1.33.0

package/NOTICE

@@ -10,3 +10,7 @@ within this component.
 This repository uses components from the Lightning-SDK. Any components from the Lightning-SDK are:
 Copyright (c) 2020 Metrological
 Licensed under the Apache License, Version 2.0
+
+This repository uses components from WebPlatformForEmbedded
+Copyright (c) 2019 Metrological
+Licensed under the Apache License, Version 2.0

package/index.d.ts

@@ -262,8 +262,12 @@ declare module '@lightningjs/blits' {
      * Emit events that other components can listen to
      * @param name - name of the event to be emitted
      * @param data - optional data to be passed along
+     * @param byReference - whether or not to pass the data by reference.
+     * The default behaviour is passing the data object by reference (`true`).
+     * When explicitely passing `false` the object will be recursively cloned
+     * and cleaned from any potential reactivity before emitting
      */
-    $emit(name: string, data?: any): void;
+    $emit(name: string, data?: any, byReference?: boolean): void;
 
     /**
     * Set a timeout that is automatically cleaned upon component destroy
@@ -970,8 +974,10 @@ declare module '@lightningjs/blits' {
     /**
      * Input throttle time in milliseconds to prevent rapid successive inputs
      *
-     * Within the throttle window, only one input will be processed immediately  Subsequent
-     * inputs are ignored until the scheduled input is processed.
+     * Within the throttle window, only one input will be processed immediately.
+     * Subsequent inputs _of the same key_ are ignored until the scheduled input is processed.
+     *
+     * Pressing a different key will be processed immediately.
      *
      * Set to `0` to disable input throttling.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits",
-  "version": "1.33.0",
+  "version": "1.35.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {
@@ -13,7 +13,8 @@
     "./blitsFileConverter": "./src/lib/blitsfileconverter/blitsfileconverter.js"
   },
   "scripts": {
-    "test": "c8 npm run test:run",
+    "test": "c8 node scripts/runTests.js",
+    "test:ci": "c8 npm run test:run",
     "test:run": "node -r global-jsdom/register ./node_modules/.bin/tape '{,!(node_modules|packages)/**/}*.test.js' | tap-diff",
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
@@ -38,11 +39,13 @@
     "eslint": "^8.8.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
+    "fast-glob": "^3.3.3",
     "global-jsdom": "24.0.0",
     "husky": "^9.1.7",
     "jsdom": "24.0.0",
     "lint-staged": "^15.5.0",
     "prettier": "^2.5.1",
+    "sinon": "^21.0.0",
     "tap-diff": "^0.1.1",
     "tape": "^5.5.0"
   },

package/src/announcer/announcer.js

@@ -146,6 +146,7 @@ const stop = () => {
 }
 
 const clear = () => {
+  isProcessing = false
   queue.length = 0
 }
 

package/src/announcer/speechSynthesis.js

@@ -21,9 +21,17 @@ const syn = window.speechSynthesis
 
 const isAndroid = /android/i.test((window.navigator || {}).userAgent || '')
 
+const utterances = new Map() // Strong references with unique keys
+
 let initialized = false
 let infinityTimer = null
-const clear = () => infinityTimer && clearTimeout(infinityTimer)
+
+const clear = () => {
+  if (infinityTimer) {
+    clearTimeout(infinityTimer)
+    infinityTimer = null
+  }
+}
 
 const resumeInfinity = (target) => {
   if (!target || infinityTimer) {
@@ -31,7 +39,9 @@ const resumeInfinity = (target) => {
   }
 
   syn.pause()
-  syn.resume()
+  setTimeout(() => {
+    syn.resume()
+  }, 0)
 
   infinityTimer = setTimeout(() => {
     resumeInfinity(target)
@@ -47,18 +57,20 @@ const defaultUtteranceProps = {
 }
 
 const initialize = () => {
-  defaultUtteranceProps.voice = syn.getVoices()[0]
+  const voices = syn.getVoices()
+  defaultUtteranceProps.voice = voices[0] || null
   initialized = true
 }
 
 const speak = (options) => {
   const utterance = new SpeechSynthesisUtterance(options.message)
-
+  const id = Date.now() + Math.random() // Unique ID for tracking
   utterance.lang = options.lang || defaultUtteranceProps.lang
   utterance.pitch = options.pitch || defaultUtteranceProps.pitch
   utterance.rate = options.rate || defaultUtteranceProps.rate
   utterance.voice = options.voice || defaultUtteranceProps.voice
   utterance.volume = options.volume || defaultUtteranceProps.volume
+  utterances.set(id, utterance) // Strong reference
 
   if (isAndroid === false) {
     utterance.onstart = () => {
@@ -72,9 +84,14 @@ const speak = (options) => {
 
   return new Promise((resolve, reject) => {
     utterance.onend = () => {
+      clear()
+      utterances.delete(id) // Cleanup
       resolve()
     }
+
     utterance.onerror = (e) => {
+      clear()
+      utterances.delete(id) // Cleanup
       reject(e)
     }
 

package/src/application.js

@@ -48,6 +48,7 @@ const Application = (config) => {
   let keyUpHandler
   let holdTimeout
   let lastInputTime = 0
+  let lastInputKey = null
 
   config.hooks[symbols.destroy] = function () {
     document.removeEventListener('keydown', keyDownHandler)
@@ -66,8 +67,11 @@ const Application = (config) => {
       const currentTime = performance.now()
 
       const key = keyMap[e.key] || keyMap[e.keyCode] || e.key || e.keyCode
+      const sameKey = lastInputKey === key
+      lastInputKey = key
       // execute immediately when no throttle is specified or event is internal (bubbled up by focus manager)
-      if (throttleMs === 0 || e[symbols.internalEvent] === true) {
+      // or key is different from the last used key
+      if (throttleMs === 0 || e[symbols.internalEvent] === true || sameKey === false) {
         return await processInput.call(this, e, key)
       }
 

package/src/component/base/events.js

@@ -23,12 +23,16 @@ export default {
    *
    * @param {string} event - The name of the event to emit.
    * @param {any} params - The parameters to pass to the event listeners.
+   * @param byReference - whether or not to pass the data by reference.
+   * The default behaviour is passing the data object by reference (`true`).
+   * When explicitely passing `false` the object will be recursively cloned
+   * and cleaned from any potential reactivity before emitting
    * @returns {boolean} True if all listeners executed, false otherwise.
    */
   $emit: {
-    value: function (event, params) {
+    value: function (event, params, byReference = true) {
       // returning if all listeners executed
-      return eventListeners.executeListeners(event, params)
+      return eventListeners.executeListeners(event, params, byReference)
     },
     writable: false,
     enumerable: true,

package/src/component/base/methods.js

@@ -40,8 +40,6 @@ export default {
      * @this {import('../../component').BlitsComponent}
      */
     value: function (e) {
-      if (this.eol === true) return
-      this[symbols.state].hasFocus = true
       Focus.set(this, e)
     },
     writable: false,

package/src/component/setup/state.js

@@ -28,8 +28,14 @@ export default (component, state = () => {}) => {
   })
 
   const stateKeys = Object.keys(state.apply(component) || {})
-  // add built-in hasFocus key
-  stateKeys.push(['hasFocus'])
+  if (stateKeys.indexOf('hasFocus') > -1) {
+    Log.warn(
+      'State `hasFocus` already exists as a built-in Component variable (to indicate whether the component currently has focus). Avoid using your own `hasFocus` key in the Component state'
+    )
+  } else {
+    // add built-in hasFocus key
+    stateKeys.push(['hasFocus'])
+  }
   const stateKeysLength = stateKeys.length
 
   for (let i = 0; i < stateKeysLength; i++) {

package/src/focus.js

@@ -19,6 +19,7 @@ import symbols from './lib/symbols.js'
 import { state } from './router/router.js'
 import Settings from './settings.js'
 import { DEFAULT_HOLD_TIMEOUT_MS } from './constants.js'
+import { Log } from './lib/log.js'
 
 let focusedComponent = null
 let focusChain = []
@@ -38,56 +39,118 @@ export default {
     return focusedComponent
   },
   set(component, event) {
-    if (component === focusedComponent) return
     clearTimeout(setFocusTimeout)
-    focusedComponent && focusedComponent !== component.parent && focusedComponent.unfocus()
-    focusChain.reverse().forEach((cmp) => cmp.unfocus())
-    if (component !== focusedComponent) {
-      setFocusTimeout = setTimeout(
-        () => {
-          focusedComponent = component
-          focusedComponent.lifecycle.state = 'focus'
-          if (event instanceof KeyboardEvent) {
-            const internalEvent = new KeyboardEvent('keydown', event)
-            // @ts-ignore - this is an internal event
-            internalEvent[symbols.internalEvent] = true
-            document.dispatchEvent(internalEvent)
-          } else {
-            focusChain = []
-          }
-        },
-        this.hold ? Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS) : 0
-      )
+
+    // early return if already focused
+    if (component === focusedComponent) return
+
+    if (focusChain.length === 0) {
+      focusChain = getAncestors([component])
+    }
+
+    // unfocus currently focused components
+    if (focusedComponent !== null) {
+      if (focusChain[focusChain.length - 1] === component.parent) {
+        focusChain.push(component)
+      } else {
+        const newFocusChain = getAncestors([component])
+        let i = focusChain.length
+        while (i--) {
+          // don't unfocus when part of the new focus chain
+          if (newFocusChain.indexOf(focusChain[i]) > -1) break
+          focusChain[i].lifecycle.state = 'unfocus'
+        }
+        focusChain = newFocusChain
+      }
+    }
+
+    // ensure that all components in the focus path have focus state
+    let i = 0
+    while (i < focusChain.length - 1) {
+      focusChain[i].lifecycle.state = 'focus'
+      i++
+    }
+
+    // and finally set focus to the leaf component
+    if (this.hold === true) {
+      setFocusTimeout = setTimeout(() => {
+        setFocus(component, event)
+      }, Settings.get('holdTimeout', DEFAULT_HOLD_TIMEOUT_MS))
+    } else {
+      setFocus(component, event)
     }
   },
   input(key, event) {
     if (state.navigating === true) return
-    focusChain = walkChain([focusedComponent], key)
-    const componentWithInputEvent = focusChain.shift()
-
-    if (componentWithInputEvent) {
-      let cb
-      if (componentWithInputEvent[symbols.inputEvents][key]) {
-        cb = componentWithInputEvent[symbols.inputEvents][key].call(componentWithInputEvent, event)
-      } else if (componentWithInputEvent[symbols.inputEvents].any) {
-        cb = componentWithInputEvent[symbols.inputEvents].any.call(componentWithInputEvent, event)
-      }
-      if (cb !== undefined) {
-        keyUpCallbacks.set(event.code, cb)
-      }
+
+    const componentWithInputEvent = getComponentWithInputEvent(focusedComponent, key)
+
+    if (componentWithInputEvent === null) return
+
+    const inputEvents = componentWithInputEvent[symbols.inputEvents]
+
+    let cb
+    if (inputEvents[key]) {
+      cb = inputEvents[key].call(componentWithInputEvent, event)
+    } else if (inputEvents.any) {
+      cb = inputEvents.any.call(componentWithInputEvent, event)
+    }
+
+    if (cb !== undefined) {
+      keyUpCallbacks.set(event.code, cb)
     }
   },
 }
 
-const walkChain = (components, key) => {
+/**
+ * Recursive function that retrieves the ancestors of a component
+ * @param {Array} components
+ * @returns array components
+ */
+const getAncestors = (components) => {
+  if (components[0].parent !== undefined) {
+    components.unshift(components[0].parent)
+    return getAncestors(components)
+  }
+  return components
+}
+
+/**
+ * Get the component in the ancestors chain that has a handler for a certain key code
+ * @param {Object} component
+ * @param {String} key
+ * @returns component
+ */
+const getComponentWithInputEvent = (component, key) => {
   if (
-    components[0][symbols.inputEvents] &&
-    (typeof components[0][symbols.inputEvents][key] === 'function' ||
-      typeof components[0][symbols.inputEvents].any === 'function')
+    component[symbols.inputEvents] &&
+    (typeof component[symbols.inputEvents][key] === 'function' ||
+      typeof component[symbols.inputEvents].any === 'function')
   ) {
-    return components
-  } else if (components[0].parent) {
-    components.unshift(components[0].parent)
-    return walkChain(components, key)
-  } else return []
+    return component
+  } else if (component.parent !== undefined) {
+    return getComponentWithInputEvent(component.parent, key)
+  } else return null
+}
+
+/**
+ * Set the focus to the Component
+ * @param {Object} component  - The component fo focus
+ * @param {KeyboardEvent} event - Keyboard event
+ */
+const setFocus = (component, event) => {
+  Log.info(
+    '\nFocus chain:\n',
+    focusChain.map((c, index) => '\t'.repeat(index) + '↳ ' + c.componentId).join('\n')
+  )
+
+  focusedComponent = component
+  component.lifecycle.state = 'focus'
+
+  if (event instanceof KeyboardEvent) {
+    const internalEvent = new KeyboardEvent('keydown', event)
+    // @ts-ignore - this is an internal event
+    internalEvent[symbols.internalEvent] = true
+    document.dispatchEvent(internalEvent)
+  }
 }

package/src/lib/eventListeners.js

@@ -15,9 +15,30 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import symbols from './symbols.js'
+import { getRaw } from './reactivity/reactive.js'
+
 const eventsMap = new Map()
 const callbackCache = new Map()
 
+function isProxy(obj) {
+  return obj && typeof obj === 'object' && obj[symbols.isProxy] === true
+}
+
+function deepUnproxyClone(obj) {
+  if (obj === null || typeof obj !== 'object') return obj
+
+  const raw = isProxy(obj) ? getRaw(obj) : obj
+  const result = Array.isArray(raw) ? [] : {}
+
+  for (const key of Object.keys(raw)) {
+    const value = raw[key]
+    result[key] = value && typeof value === 'object' ? deepUnproxyClone(value) : value
+  }
+
+  return result
+}
+
 export default {
   /**
    * Registers a listener callback for a specific event on a component.
@@ -70,9 +91,16 @@ export default {
    *
    * @param {string} event - The name of the event to emit.
    * @param {any} params - The parameters to pass to the event listeners.
+   * @param byReference - whether or not to pass the data by reference.
+   * The default behaviour is passing the data object by reference (`true`).
+   * When explicitely passing `false` the object will be recursively cloned
+   * and cleaned from any potential reactivity before emitting
    * @returns {boolean} True if all listeners executed without stopping propagation, false if any listener returned false.
    */
-  executeListeners(event, params) {
+  executeListeners(event, params, byReference) {
+    if (byReference === false) {
+      params = deepUnproxyClone(params)
+    }
     const componentsMap = eventsMap.get(event)
     if (componentsMap === undefined || componentsMap.size === 0) {
       return true // No listeners, so execution can be considered successful

package/src/lib/lifecycle.js

@@ -70,12 +70,14 @@ export default {
    * @param {string} v - The new lifecycle state.
    */
   set state(v) {
-    if (states.indexOf(v) > -1 && (v !== this.current || v === 'focus')) {
+    if (states.indexOf(v) > -1 && v !== this.current) {
       Log.debug(
         `Setting lifecycle state from ${this.current} to ${v} for ${this.component.componentId}`
       )
       this.previous = this.current
       this.current = v
+      if (this.current === 'focus') this.component[symbols.state].hasFocus = true
+      if (this.current === 'unfocus') this.component[symbols.state].hasFocus = false
       // emit 'private' hook
       privateEmit(v, this.component[symbols.identifier], this.component)
       // emit 'public' hook

package/src/lib/reactivity/reactive.js

@@ -46,6 +46,10 @@ const reactiveProxy = (original, _parent = null, _key, global) => {
 
   const handler = {
     get(target, key, receiver) {
+      // return the original object instead of the proxied
+      if (key === symbols.isProxy) {
+        return true
+      }
       // return the original object instead of the proxied
       if (key === symbols.raw) {
         return original

package/src/lib/symbols.js

@@ -16,6 +16,7 @@
  * @property {symbol} inputEvents
  * @property {symbol} internalEvent
  * @property {symbol} intervals
+ * @property {symbol} isProxy
  * @property {symbol} launched
  * @property {symbol} level
  * @property {symbol} methodKeys
@@ -67,6 +68,7 @@ export default {
   inputEvents: Symbol('inputEvents'),
   internalEvent: Symbol('internalEvent'),
   intervals: Symbol('intervals'),
+  isProxy: Symbol('isProxy'),
   launched: Symbol('launched'),
   level: Symbol('level'),
   methodKeys: Symbol('methodKeys'),

package/src/plugins/index.js

@@ -18,3 +18,4 @@
 export { default as language } from './language.js'
 export { default as theme } from './theme.js'
 export { default as appState } from './appstate.js'
+export { default as storage } from './storage/storage.js'

package/src/plugins/storage/localCookie.js

@@ -0,0 +1,133 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2019 Metrological
+ *
+ * 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.
+ */
+
+// LocalStorage and Cookie storage library
+class localCookie {
+  constructor(options) {
+    options = options || {}
+    this.forceCookies = options.forceCookies || false
+
+    if (this._checkIfLocalStorageWorks() === true && options.forceCookies !== true)
+      return {
+        getItem: this._getItemLocalStorage,
+        setItem: this._setItemLocalStorage,
+        removeItem: this._removeItemLocalStorage,
+        clear: this._clearLocalStorage,
+        keys: this._getLocalStorageKeys,
+      }
+    else
+      return {
+        getItem: this._getItemCookie,
+        setItem: this._setItemCookie,
+        removeItem: this._removeItemCookie,
+        clear: this._clearCookies,
+        keys: this._getCookieKeys,
+      }
+  }
+
+  // Checks if local storage is available and works
+  _checkIfLocalStorageWorks() {
+    if (typeof localStorage !== 'undefined') {
+      try {
+        localStorage.setItem('feature_test', 'yes')
+        if (localStorage.getItem('feature_test') === 'yes') {
+          localStorage.removeItem('feature_test')
+          // localStorage is enabled
+          return true
+        } else {
+          // localStorage is disabled
+          return false
+        }
+      } catch (e) {
+        // localStorage is disabled
+        return false
+      }
+    } else {
+      // localStorage is not available
+      return false
+    }
+  }
+
+  /*
+   * Local Storage APIs
+   */
+  _getItemLocalStorage(key) {
+    return window.localStorage.getItem(key)
+  }
+
+  _setItemLocalStorage(key, value) {
+    return window.localStorage.setItem(key, value)
+  }
+
+  _removeItemLocalStorage(key) {
+    return window.localStorage.removeItem(key)
+  }
+
+  _clearLocalStorage() {
+    return window.localStorage.clear()
+  }
+
+  _getLocalStorageKeys() {
+    return Object.keys(window.localStorage)
+  }
+
+  /*
+   * Cookie APIs
+   */
+  _getItemCookie(key) {
+    /* eslint-disable */
+		function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
+		var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(key) + '=([^;]*)'));
+
+		//if value in key of the entire cookie is empty, its deleted
+		if (match && match[1] === '')
+			match[1] = null
+
+		return match ? match[1] : null;
+	}
+
+	_setItemCookie(key, value) {
+		var now = new Date()
+		var expires = new Date(now.getTime() +1000*60*60*24*365*5) // 5 years!
+		document.cookie = `${key}=${value}; expires=${expires.toUTCString()};`
+		return //return undefined just like localStorage
+	}
+
+	_removeItemCookie(key) {
+		// to delete an k/v set the key to empty
+		document.cookie = `${key}=;Max-Age=-99999999;`
+		return //return undefined just like localStorage
+	}
+
+	_clearCookies() {
+		// empty all key/values in cookies
+		// What about cookies we got from the server? ¯\_(ツ)_/¯
+		// They should have the HttpOnly flag, so we shouldn't be able to delete them
+		document.cookie.split(";").forEach( (c) => {
+			document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=;Max-Age=-99999999");
+		});
+
+		return //return undefined
+	}
+	_getCookieKeys() {
+		return document.cookie.split(";").map((item)=>item.trim().split("=")[0])
+	}
+}
+
+export default localCookie

package/src/plugins/storage/storage.js

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2024 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
+ */
+
+import localCookie from './localCookie.js'
+
+let lc = new localCookie()
+
+export default {
+  name: 'storage',
+  plugin() {
+    return {
+      get(key) {
+        try {
+          return JSON.parse(lc.getItem(key))
+        } catch (e) {
+          return null
+        }
+      },
+      set(key, value) {
+        try {
+          lc.setItem(key, JSON.stringify(value))
+          return true
+        } catch (e) {
+          return false
+        }
+      },
+      remove(key) {
+        lc.removeItem(key)
+      },
+      clear() {
+        lc.clear()
+      },
+    }
+  },
+}

package/src/router/router.js

@@ -132,7 +132,7 @@ export const matchHash = (path, routes = []) => {
   let matchingRoute = false
   let i = 0
   while (!matchingRoute && i < routes.length) {
-    const route = { ...routes[i] }
+    const route = routes[i]
     route.path = normalizePath(route.path)
     if (route.path === path) {
       route.params = {}
@@ -206,20 +206,20 @@ export const navigate = async function () {
     let previousRoute = currentRoute //? Object.assign({}, currentRoute) : undefined
     const { hash, path, queryParams } = getHash()
     let route = matchHash(path, this.parent[symbols.routes])
-    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,
-    }
 
     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 = {
+        ...navigationData,
+        ...route.data,
+        ...queryParamsData,
+      }
       // Adding the location hash to the route if it exists.
       if (hash !== null) {
         route.hash = hash