@lightningjs/blits 2.2.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## v2.4.0
+
+_1 june 2026_
+
+- Improved correct registration of reactivity in computed props
+- Added named router views to enable multiple nested router views
+
+## v2.3.0
+
+_20 may 2026_
+
+- Refactored router functionality
+- Replaced `window` reference with `self` reference in announcer
+
 ## v2.2.0
 
 _11 may 2026_

package/index.d.ts

@@ -329,7 +329,14 @@ declare module '@lightningjs/blits' {
      *
      * @param {string}
     */
-    to(location: string, data?: RouteData, options?: RouteOptions): void;
+    to(location: string, data?: RouteData, options?: RouteOptions): boolean;
+
+    /**
+     * Get a router scoped to a named RouterView
+     *
+     * @param {string}
+    */
+    get(name: string): Router;
 
     /**
      * Navigate to the previous location
@@ -707,6 +714,10 @@ declare module '@lightningjs/blits' {
      * Watchers for changes to state variables, props or computed properties
      */
     watch?: W & ComponentContext<P, S, M, C>
+    /**
+     * Router Configuration
+     */
+    router?: RouterConfig<P, S, M, C>
   }
 
   export interface RouterHooks {
@@ -759,7 +770,7 @@ declare module '@lightningjs/blits' {
 
   export type ApplicationConfig<P extends Props, S, M, C, W> = Omit<
     ComponentConfig<P, S, M, C, W>,
-    'hooks' | 'methods' | 'input' | 'computed' | 'watch' | 'state'
+    'hooks' | 'methods' | 'input' | 'computed' | 'watch' | 'state' | 'router' | 'routes'
   > & {
     hooks?: Hooks & ApplicationContext<P, S, M, C>
     methods?: M & ApplicationContext<P, S, M, C>

package/package.json

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

package/src/announcer/announcer.js

@@ -27,7 +27,7 @@ let debounce = null
 
 // Global default utterance options
 let globalDefaultOptions = {
-  enableUtteranceKeepAlive: !/android/i.test((window.navigator || {}).userAgent || ''),
+  enableUtteranceKeepAlive: !/android/i.test((self.navigator || {}).userAgent || ''),
 }
 
 const noopAnnouncement = {

package/src/announcer/speechSynthesis.js

@@ -17,7 +17,7 @@
 
 import { Log } from '../lib/log.js'
 
-const syn = window.speechSynthesis
+const syn = self.speechSynthesis
 
 const utterances = new Map() // id -> { utterance, timer, ignoreResume }
 

package/src/component/base/router.js

@@ -16,31 +16,145 @@
  */
 
 import symbols from '../../lib/symbols.js'
-import { to, currentRoute, back, state } from '../../router/router.js'
+import {
+  back,
+  currentRoute,
+  getRegisteredRouterView,
+  getSingleRegisteredRouterView,
+  state,
+  toRouterView,
+} from '../../router/router.js'
+
+const routerCache = new WeakMap()
+
+const isRouterView = (component, routerViewName = '') => {
+  if (component === undefined || component === null) return false
+  return (
+    Array.isArray(component.history) && (routerViewName === '' || component.name === routerViewName)
+  )
+}
+
+const getRouterViewInChildren = (component, routerViewName = '') => {
+  if (component === undefined || component === null) return null
+
+  const children = component[symbols.children]
+  if (Array.isArray(children) === false) return null
+
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i]
+    if (isRouterView(child, routerViewName)) return child
+
+    const nestedRouterView = getRouterViewInChildren(child, routerViewName)
+    if (nestedRouterView !== null) return nestedRouterView
+  }
+
+  return null
+}
+
+const getRouterView = (component, routerViewName = '') => {
+  let current = component
+  while (current !== undefined && current !== null) {
+    if (isRouterView(current, routerViewName)) {
+      return current
+    }
+    current = current[symbols.parent]
+  }
+  return getRouterViewInChildren(component, routerViewName)
+}
+
+const resolveRouterView = (component, routerViewName) => {
+  if (routerViewName !== undefined) {
+    const registeredRouterView = getRegisteredRouterView(routerViewName)
+    if (registeredRouterView !== null) return registeredRouterView
+
+    return getRouterView(component, routerViewName)
+  }
+
+  const singleRouterView = getSingleRegisteredRouterView()
+  if (singleRouterView !== null) return singleRouterView
+
+  return getRouterView(component)
+}
+
+const getRoutes = (component, routerViewName) => {
+  const routerView = resolveRouterView(component, routerViewName)
+  if (
+    routerView !== null &&
+    routerView[symbols.parent] !== undefined &&
+    routerView[symbols.parent][symbols.routes] !== undefined
+  ) {
+    return routerView[symbols.parent][symbols.routes]
+  }
+
+  if (component[symbols.routes] !== undefined) return component[symbols.routes]
+
+  if (
+    component[symbols.parent] !== undefined &&
+    component[symbols.parent][symbols.routes] !== undefined
+  ) {
+    return component[symbols.parent][symbols.routes]
+  }
+
+  return undefined
+}
+
+const getRouterFromCache = (component, routerViewName) => {
+  let routers = routerCache.get(component)
+  if (routers === undefined) {
+    routers = new Map()
+    routerCache.set(component, routers)
+  }
+
+  const cacheKey = routerViewName === undefined ? '' : routerViewName
+  const router = routers.get(cacheKey)
+  if (router !== undefined) return router
+
+  const newRouter = createRouter(component, routerViewName)
+  routers.set(cacheKey, newRouter)
+  return newRouter
+}
+
+const createRouter = (component, routerViewName) => {
+  return {
+    to(path, data = {}, options = {}) {
+      const routerView = resolveRouterView(component, routerViewName)
+      if (routerView === null) return false
+
+      toRouterView(routerView, path, data, options)
+      return true
+    },
+    back() {
+      const routerView = resolveRouterView(component, routerViewName)
+      return routerView === null ? false : back.call(routerView)
+    },
+    get(name) {
+      return getRouterFromCache(component, name)
+    },
+    get backNavigation() {
+      return state.backNavigation !== false
+    },
+    set backNavigation(enabled) {
+      state.backNavigation = enabled !== false
+    },
+    get currentRoute() {
+      const routerView = resolveRouterView(component, routerViewName)
+      return routerView === null ? currentRoute : routerView.currentRoute
+    },
+    get routes() {
+      return getRoutes(component, routerViewName)
+    },
+    get navigating() {
+      return state.navigating
+    },
+    state,
+  }
+}
 
 export default {
   $router: {
-    value: {
-      to,
-      back,
-      get backNavigation() {
-        return state.backNavigation !== false
-      },
-      set backNavigation(enabled) {
-        state.backNavigation = enabled !== false
-      },
-      get currentRoute() {
-        return currentRoute
-      },
-      get routes() {
-        return this[symbols.routes]
-      },
-      get navigating() {
-        return state.navigating
-      },
-      state,
-    },
-    writable: false,
+    get() {
+      return getRouterFromCache(this)
+    },
     enumerable: true,
     configurable: false,
   },

package/src/components/RouterView.js

@@ -16,12 +16,14 @@
  */
 
 import Component from '../component.js'
-import Router, { state as routerState } from '../router/router.js'
+import Router, {
+  registerRouterView,
+  state as routerState,
+  unregisterRouterView,
+} from '../router/router.js'
 import symbols from '../lib/symbols.js'
 import Focus from '../focus/focus.js'
 
-let hashchangeHandler = null
-
 /** @typedef {{ $input?: (event: any) => boolean, $focus?: (event: any) => void }} RouterViewParent */
 
 export default () =>
@@ -123,24 +125,42 @@ export default () =>
         effects: [],
         context: {},
       },
+      props: {
+        name: '',
+        active: true,
+      },
       state() {
         return {
           activeView: null,
+          history: [],
         }
       },
+      watch: {
+        active(v, old) {
+          if (v === true && old === false) {
+            Router.navigate.apply(this)
+          }
+        },
+      },
       hooks: {
         async ready() {
+          registerRouterView(this)
+
           const parent = this[symbols.parent]
           if (parent && parent[symbols.routerHooks] && parent[symbols.routerHooks].init) {
             await parent[symbols.routerHooks].init.apply(parent)
           }
+          this.hashchangeHandler = () => Router.navigate.apply(this)
+
+          if (this.active === true) {
+            Router.navigate.apply(this)
+          }
 
-          hashchangeHandler = () => Router.navigate.apply(this)
-          Router.navigate.apply(this)
-          window.addEventListener('hashchange', hashchangeHandler)
+          window.addEventListener('hashchange', this.hashchangeHandler)
         },
         destroy() {
-          window.removeEventListener('hashchange', hashchangeHandler, false)
+          unregisterRouterView(this)
+          window.removeEventListener('hashchange', this.hashchangeHandler, false)
         },
         focus() {
           if (this.activeView && Focus.get() === this) {

package/src/focus/focus.js

@@ -81,6 +81,7 @@ export default {
   },
   input(key, event) {
     if (state.navigating === true) return
+    if (focusedComponent === null) return
 
     const componentWithInputEvent = getComponentWithInputEvent(focusedComponent, key)