@lightningjs/blits 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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_

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.3.0",
+  "version": "2.4.0",
   "description": "Blits: The Lightning 3 App Development Framework",
   "bin": "bin/index.js",
   "exports": {

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)
 

package/src/lib/reactivityguard/computedprops.js

@@ -100,176 +100,258 @@ const skipNonCode = (text, pos) => {
   return p
 }
 
-export default (code) => {
-  // Find component declarations
-  const componentRegex =
-    /Blits\.(Component|Application)\s*\(\s*(?:'[^']*'|"[^"]*")?\s*(?:,\s*)?({[\s\S]*?})\s*\)/g
+// Skip a non-method computed member (`key: value`) and return the position after it.
+const skipComputedMember = (text, pos) => {
+  const keyMatch = /^(\w+)\s*:\s*/.exec(text.substring(pos))
+  if (!keyMatch) return -1
+
+  let p = pos + keyMatch[0].length
+  p = skipNonCode(text, p)
+  if (p >= text.length - 1) return p
+
+  if (text.startsWith('function', p)) {
+    const open = text.indexOf('{', p)
+    if (open === -1) return -1
+    const close = findMatchingBrace(text, open)
+    return close === -1 ? -1 : close
+  }
+
+  let depth = 0
+  let inString = false
+  let stringChar = ''
+
+  for (; p < text.length - 1; p++) {
+    const char = text[p]
+
+    if (!inString && (char === '"' || char === "'" || char === '`')) {
+      inString = true
+      stringChar = char
+    } else if (inString && char === stringChar && text[p - 1] !== '\\') {
+      inString = false
+    } else if (!inString && char === '/' && text[p + 1] === '/') {
+      const nextNewline = text.indexOf('\n', p + 2)
+      p = nextNewline === -1 ? text.length - 2 : nextNewline
+    } else if (!inString && char === '/' && text[p + 1] === '*') {
+      const end = text.indexOf('*/', p + 2)
+      p = end === -1 ? text.length - 2 : end + 1
+    } else if (!inString) {
+      if (char === '{' || char === '(' || char === '[') depth++
+      else if (char === '}' || char === ')' || char === ']') depth--
+      else if (char === ',' && depth === 0) return p
+    }
+  }
+
+  return p
+}
+
+// Find the opening `{` of the component config object after Blits.Component( / Application(
+const findConfigBraceStart = (text, openParenPos) => {
+  let p = openParenPos + 1
+  p = skipNonCode(text, p)
+  if (p >= text.length) return -1
+
+  if (text[p] === '{') return p
+
+  if (text[p] === "'" || text[p] === '"' || text[p] === '`') {
+    const quote = text[p]
+    p++
+    while (p < text.length) {
+      if (text[p] === quote && text[p - 1] !== '\\') {
+        p++
+        break
+      }
+      p++
+    }
+    p = skipNonCode(text, p)
+    if (p < text.length && text[p] === '{') return p
+  }
+
+  return -1
+}
+
+const processComputedBlock = (configObject) => {
   const modifications = []
   const commentText = ' /* auto-generated reactivity guard */ '
 
-  let match
-  while ((match = componentRegex.exec(code)) !== null) {
-    const configObject = match[2]
-
-    // Find computed section with proper brace balancing
-    const computedKeywordMatch = /computed\s*:\s*{/.exec(configObject)
-
-    if (computedKeywordMatch) {
-      // Find start position of the computed block
-      const computedStart = computedKeywordMatch.index + computedKeywordMatch[0].length - 1 // Position of the opening brace
-
-      // Find the matching closing brace for computed object in config
-      const computedEnd = findComputedObjectEnd(configObject, computedStart)
-
-      if (computedEnd !== -1) {
-        const computedObj = configObject.substring(computedStart, computedEnd)
-        const computedBlockStart = computedKeywordMatch.index
-        const computedBlockEnd = computedEnd
-
-        // Process each computed property
-        const computedProps = []
-        let currentPos = 1 // Start after the opening brace
-
-        // Process computed properties content
-        // intentionally not using regexes to extract functions and their content
-        // using cursor-based parsing gives better accuracy
-        while (currentPos < computedObj.length - 1) {
-          // -1 to exclude the closing brace
-          // Skip whitespace/comments so we don't match commented-out computed functions
-          currentPos = skipNonCode(computedObj, currentPos)
-          if (currentPos >= computedObj.length - 1) break
-
-          // Find the next function name (computed properties are `name() { ... }`)
-          const functionNameMatch = /^(\w+)\s*\(\)\s*/.exec(computedObj.substring(currentPos))
-          if (!functionNameMatch) break
-
-          const funcName = functionNameMatch[1]
-          const funcNamePos = currentPos
-
-          // Find opening brace for this function
-          const afterSignaturePos = funcNamePos + functionNameMatch[0].length
-          const openingBracePos = computedObj.indexOf('{', afterSignaturePos)
-          if (openingBracePos === -1) break
-
-          // Find closing brace for individual computed function
-          const closingBracePos = findComputedFunctionEnd(computedObj, openingBracePos)
-
-          if (closingBracePos === -1) {
-            break
-          }
-
-          // Extract the entire function and its body
-          // This is better and more accurate than using regex to avoid nested braces
-          const functionStartPos = funcNamePos
-          const functionEndPos = closingBracePos
-          const fullFunction = computedObj.substring(functionStartPos, functionEndPos)
-          const functionBody = computedObj
-            .substring(openingBracePos + 1, closingBracePos - 1)
-            .trim()
-
-          computedProps.push({
-            name: funcName,
-            fullText: fullFunction,
-            body: functionBody,
-            startPos: functionStartPos,
-            endPos: functionEndPos,
-          })
-
-          // Move past this function
-          currentPos = closingBracePos
+  const computedKeywordMatch = /computed\s*:\s*{/.exec(configObject)
+
+  if (computedKeywordMatch) {
+    // Find start position of the computed block
+    const computedStart = computedKeywordMatch.index + computedKeywordMatch[0].length - 1 // Position of the opening brace
+
+    // Find the matching closing brace for computed object in config
+    const computedEnd = findComputedObjectEnd(configObject, computedStart)
+
+    if (computedEnd !== -1) {
+      const computedObj = configObject.substring(computedStart, computedEnd)
+      const computedBlockStart = computedKeywordMatch.index
+      const computedBlockEnd = computedEnd
+
+      // Process each computed property
+      const computedProps = []
+      let currentPos = 1 // Start after the opening brace
+
+      // Process computed properties content
+      // intentionally not using regexes to extract functions and their content
+      // using cursor-based parsing gives better accuracy
+      while (currentPos < computedObj.length - 1) {
+        // -1 to exclude the closing brace
+        // Skip whitespace/comments so we don't match commented-out computed functions
+        currentPos = skipNonCode(computedObj, currentPos)
+        if (currentPos >= computedObj.length - 1) break
+
+        // Find the next function name (computed properties are `name() { ... }`)
+        const functionNameMatch = /^(\w+)\s*\(\)\s*/.exec(computedObj.substring(currentPos))
+        if (!functionNameMatch) {
+          const nextPos = skipComputedMember(computedObj, currentPos)
+          if (nextPos === -1) break
+          currentPos = nextPos
+          continue
         }
 
-        // Store the original computed object for later replacement
-        const originalComputedObj = configObject.substring(computedBlockStart, computedBlockEnd)
-        const computedObjOffsetInOriginal = computedStart - computedBlockStart
-        const computedObjEndInOriginal = computedObjOffsetInOriginal + computedObj.length
-
-        let modifiedComputedObj = originalComputedObj
-        let hasChanges = false
-
-        const replacements = []
-
-        for (const prop of computedProps) {
-          const thisRefs = extractThisReferences(prop.body)
-
-          if (thisRefs.size > 0) {
-            // Skip if already modified
-            if (
-              prop.body.includes(commentText.trim()) ||
-              Array.from(thisRefs).some((ref) => {
-                if (prop.body.startsWith(ref)) return true
-                // stripped && guard: body starts with the first segment, e.g. 'this.media &&'
-                const firstSegEnd = ref.indexOf('.', 5)
-                return firstSegEnd !== -1 && prop.body.startsWith(ref.substring(0, firstSegEnd))
-              })
-            ) {
-              continue
-            }
-
-            // reactivity code
-            const refCode = Array.from(thisRefs)
-              .map((ref) => `${toSafeRef(ref)};`)
-              .join(' ')
-
-            // replacement with the same whitespace
-            const openBraceIndex = prop.fullText.indexOf('{')
-
-            if (openBraceIndex !== -1) {
-              // Extract indentation from the original function body
-              const indentMatch = prop.body.match(/^(\s+)/)
-              const indent = indentMatch ? indentMatch[1] + '  ' : '    ' // Default to 4 spaces if no indent found
-
-              const modifiedPropText =
-                prop.fullText.substring(0, openBraceIndex + 1) +
-                '\n' +
-                indent +
-                commentText +
-                '\n' +
-                indent +
-                refCode +
-                '\n' +
-                indent +
-                prop.body +
-                '\n' +
-                prop.fullText.substring(0, openBraceIndex).match(/^(\s*)/)[0] +
-                '}'
-
-              replacements.push({
-                start: prop.startPos,
-                end: prop.endPos,
-                text: modifiedPropText,
-              })
-            }
-          }
+        const funcName = functionNameMatch[1]
+        const funcNamePos = currentPos
+
+        // Find opening brace for this function
+        const afterSignaturePos = funcNamePos + functionNameMatch[0].length
+        const openingBracePos = computedObj.indexOf('{', afterSignaturePos)
+        if (openingBracePos === -1) break
+
+        // Find closing brace for individual computed function
+        const closingBracePos = findComputedFunctionEnd(computedObj, openingBracePos)
+
+        if (closingBracePos === -1) {
+          break
         }
 
-        if (replacements.length > 0) {
-          let modifiedComputedInner = computedObj
+        // Extract the entire function and its body
+        // This is better and more accurate than using regex to avoid nested braces
+        const functionStartPos = funcNamePos
+        const functionEndPos = closingBracePos
+        const fullFunction = computedObj.substring(functionStartPos, functionEndPos)
+        const functionBody = computedObj.substring(openingBracePos + 1, closingBracePos - 1).trim()
+
+        computedProps.push({
+          name: funcName,
+          fullText: fullFunction,
+          body: functionBody,
+          startPos: functionStartPos,
+          endPos: functionEndPos,
+        })
+
+        // Move past this function
+        currentPos = closingBracePos
+      }
 
-          replacements.sort((a, b) => b.start - a.start)
-          for (const r of replacements) {
-            modifiedComputedInner =
-              modifiedComputedInner.slice(0, r.start) + r.text + modifiedComputedInner.slice(r.end)
+      // Store the original computed object for later replacement
+      const originalComputedObj = configObject.substring(computedBlockStart, computedBlockEnd)
+      const computedObjOffsetInOriginal = computedStart - computedBlockStart
+      const computedObjEndInOriginal = computedObjOffsetInOriginal + computedObj.length
+
+      let modifiedComputedObj = originalComputedObj
+      let hasChanges = false
+
+      const replacements = []
+
+      for (const prop of computedProps) {
+        const thisRefs = extractThisReferences(prop.body)
+
+        if (thisRefs.size > 0) {
+          // Skip if already modified
+          if (
+            prop.body.includes(commentText.trim()) ||
+            Array.from(thisRefs).some((ref) => {
+              if (prop.body.startsWith(ref)) return true
+              // stripped && guard: body starts with the first segment, e.g. 'this.media &&'
+              const firstSegEnd = ref.indexOf('.', 5)
+              return firstSegEnd !== -1 && prop.body.startsWith(ref.substring(0, firstSegEnd))
+            })
+          ) {
+            continue
           }
 
-          modifiedComputedObj =
-            originalComputedObj.slice(0, computedObjOffsetInOriginal) +
-            modifiedComputedInner +
-            originalComputedObj.slice(computedObjEndInOriginal)
-          hasChanges = true
+          // reactivity code
+          const refCode = Array.from(thisRefs)
+            .map((ref) => `${toSafeRef(ref)};`)
+            .join(' ')
+
+          // replacement with the same whitespace
+          const openBraceIndex = prop.fullText.indexOf('{')
+
+          if (openBraceIndex !== -1) {
+            // Extract indentation from the original function body
+            const indentMatch = prop.body.match(/^(\s+)/)
+            const indent = indentMatch ? indentMatch[1] + '  ' : '    ' // Default to 4 spaces if no indent found
+
+            const modifiedPropText =
+              prop.fullText.substring(0, openBraceIndex + 1) +
+              '\n' +
+              indent +
+              commentText +
+              '\n' +
+              indent +
+              refCode +
+              '\n' +
+              indent +
+              prop.body +
+              '\n' +
+              prop.fullText.substring(0, openBraceIndex).match(/^(\s*)/)[0] +
+              '}'
+
+            replacements.push({
+              start: prop.startPos,
+              end: prop.endPos,
+              text: modifiedPropText,
+            })
+          }
         }
+      }
+
+      if (replacements.length > 0) {
+        let modifiedComputedInner = computedObj
 
-        if (hasChanges) {
-          // Store the modification of the entire computed object
-          modifications.push({
-            original: originalComputedObj,
-            replacement: modifiedComputedObj,
-          })
+        replacements.sort((a, b) => b.start - a.start)
+        for (const r of replacements) {
+          modifiedComputedInner =
+            modifiedComputedInner.slice(0, r.start) + r.text + modifiedComputedInner.slice(r.end)
         }
+
+        modifiedComputedObj =
+          originalComputedObj.slice(0, computedObjOffsetInOriginal) +
+          modifiedComputedInner +
+          originalComputedObj.slice(computedObjEndInOriginal)
+        hasChanges = true
+      }
+
+      if (hasChanges) {
+        modifications.push({
+          original: originalComputedObj,
+          replacement: modifiedComputedObj,
+        })
       }
     }
   }
 
+  return modifications
+}
+
+export default (code) => {
+  const componentOpenRegex = /Blits\.(Component|Application)\s*\(/g
+  const modifications = []
+
+  let match
+  while ((match = componentOpenRegex.exec(code)) !== null) {
+    const openParenPos = match.index + match[0].length - 1
+    const configStart = findConfigBraceStart(code, openParenPos)
+    if (configStart === -1) continue
+
+    const configEnd = findMatchingBrace(code, configStart)
+    if (configEnd === -1) continue
+
+    const configObject = code.substring(configStart, configEnd + 1)
+    modifications.push(...processComputedBlock(configObject))
+  }
+
   // Apply all modifications at once, from last to first to preserve positions
   if (modifications.length > 0) {
     let modifiedCode = code

package/src/router/router.js

@@ -15,7 +15,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { getHash, isObject, isString, matchHash } from './utils.js'
+import { getHash, isObject, isString, matchHash, sameRouteObject, setHash } from './utils.js'
 import { reactive } from '../lib/reactivity/reactive.js'
 
 import symbols from '../lib/symbols.js'
@@ -52,7 +52,8 @@ import Settings from '../settings.js'
  */
 
 /** @type {Route} */
-export let currentRoute
+export let currentRoute = {}
+
 export const state = reactive(
   {
     path: '',
@@ -76,6 +77,8 @@ export const state = reactive(
  */
 
 const history = []
+const routerViews = new Set()
+let singleRouterView = null
 
 let overrideOptions = {}
 let navigationData = {}
@@ -105,12 +108,14 @@ export const navigate = async function () {
   if (!this[symbols.parent][symbols.routes] || this[symbols.parent][symbols.routes].length === 0)
     return
 
+  if (this.history === undefined) this.history = []
+
   state.navigating = true
 
   Announcer.stop()
   Announcer.clear()
 
-  const hash = getHash(location.hash)
+  const hash = getHash(location.hash, this.name)
   // try to find the route
   let route = matchHash(hash, this[symbols.parent][symbols.routes], overrideOptions, navigationData)
 
@@ -126,36 +131,46 @@ export const navigate = async function () {
     return
   }
 
+  // sameRouteObject is too simple check for now!
+  if (this.currentRoute !== undefined && sameRouteObject(route, this.currentRoute)) {
+    state.navigating = false
+    return
+  }
+
   let reuse = false
-  let previousRoute = currentRoute
-  currentRoute = route
-  const currentPath = currentRoute.path
+  this.previousRoute = this.currentRoute
+  this.currentRoute = route
+  const currentPath = this.currentRoute.path
 
   // execute before each hook
-  const beforeEachResult = await executeBeforeHook(
+  const beforeEachResult = await executeBeforeHook.call(
+    this,
     this[symbols.parent][symbols.routerHooks],
     'beforeEach',
     this[symbols.parent],
     route,
-    previousRoute,
+    this.previousRoute,
     currentPath
   )
   if (beforeEachResult === false) {
     preventHashChangeNavigation = false
+    state.navigating = false
     return
   }
 
   // execute before route hook
-  const beforeResult = await executeBeforeHook(
+  const beforeResult = await executeBeforeHook.call(
+    this,
     route.hooks,
     'before',
     this[symbols.parent],
     route,
-    previousRoute,
+    this.previousRoute,
     currentPath
   )
   if (beforeResult === false) {
     preventHashChangeNavigation = false
+    state.navigating = false
     return
   }
 
@@ -165,18 +180,18 @@ export const navigate = async function () {
   // FIX: use truthy check instead of `!== undefined` because matchHash()
   // can return `false`, which survives `!== undefined` but has no `.options`.
   if (
-    previousRoute &&
-    previousRoute.options &&
-    previousRoute.options.inHistory === true &&
+    this.previousRoute &&
+    this.previousRoute.options &&
+    this.previousRoute.options.inHistory === true &&
     navigatingBack === false
   ) {
-    history.push(previousRoute)
+    this.history.push(this.previousRoute)
   }
 
   // a transition can be a function returning a dynamic transition object
   // based on current and previous route
   if (typeof route.transition === 'function') {
-    route.transition = route.transition(previousRoute, route)
+    route.transition = route.transition(this.previousRoute, route)
   }
 
   /** @type {import('../engines/L3/element.js').BlitsElement} */
@@ -201,10 +216,10 @@ export const navigate = async function () {
   // see if the component of the previous route can be reused for the
   // current route
   if (
-    previousRoute &&
+    this.previousRoute &&
     route.options.reuseComponent === true &&
     route.options.keepAlive !== true &&
-    route.component === previousRoute.component
+    route.component === this.previousRoute.component
   ) {
     reuse = true
     view = this[symbols.children][this[symbols.children].length - 1]
@@ -288,28 +303,30 @@ export const navigate = async function () {
   // apply out out transition on previous view if available, unless
   // we're reusing the prvious page component
   // FIX: truthy guard — previousRoute can be `false` (see history-push comment above).
-  if (previousRoute && reuse === false) {
+  if (this.previousRoute && reuse === false) {
     // only animate when there is a previous route
     shouldAnimate = true
     let oldView = this[symbols.children].splice(1, 1).pop()
     if (oldView) {
-      executeTransition(previousRoute.transition.out, oldView[symbols.holder], true)
+      executeTransition(this.previousRoute.transition.out, oldView[symbols.holder], true)
 
       // Resolve effective keepAlive: runtime override from $router.to() takes precedence
       // over the static route config option
+      const hasOverrideOptions = overrideOptions && typeof overrideOptions === 'object'
       const keepAlive =
-        overrideOptions.keepAlive !== undefined
+        hasOverrideOptions && overrideOptions.keepAlive !== undefined
           ? overrideOptions.keepAlive
-          : previousRoute.options && previousRoute.options.keepAlive
+          : this.previousRoute.options && this.previousRoute.options.keepAlive
 
       // cache the page when it's as 'keepAlive' instead of destroying
       if (
         navigatingBack === false &&
         keepAlive === true &&
-        previousRoute.options &&
-        previousRoute.options.inHistory === true
+        this.previousRoute &&
+        this.previousRoute.options &&
+        this.previousRoute.options.inHistory === true
       ) {
-        const historyItem = history[history.length - 1]
+        const historyItem = this.history[this.history.length - 1]
         if (historyItem !== undefined) {
           historyItem.view = oldView
           historyItem.focus = previousFocus
@@ -321,7 +338,7 @@ export const navigate = async function () {
        * 2. Navigating back, and the previous route is configured with "keep alive" set to true.
        * 3. Navigating back, and the previous route is not configured with "keep alive" set to true.
        */
-      if (previousRoute.options && (keepAlive !== true || navigatingBack === true)) {
+      if (this.previousRoute.options && (keepAlive !== true || navigatingBack === true)) {
         oldView.destroy()
         oldView = null
       }
@@ -339,11 +356,11 @@ export const navigate = async function () {
     'afterEach',
     this[symbols.parent],
     route,
-    previousRoute
+    this.previousRoute
   )
 
   // execute after route Hook
-  await executeAfterHook(route.hooks, 'after', this[symbols.parent], route, previousRoute)
+  await executeAfterHook(route.hooks, 'after', this[symbols.parent], route, this.previousRoute)
 
   // Clear module-level variables after removeView has consumed them.
   // Placed here so it executes for all navigation flows, not only when
@@ -397,9 +414,10 @@ const executeBeforeHook = async function (
       }
     } catch (error) {
       Log.error(`Error or Rejected Promise in "${hookName}" Hook`, error)
-      if (history.length > 0) {
+      if (this.history.length > 0) {
         preventHashChangeNavigation = true
         currentRoute = previousRoute
+        /// hmmmm
         window.history.back()
         navigatingBack = false
         state.navigating = false
@@ -413,12 +431,14 @@ const executeBeforeHook = async function (
       return false
     }
     // If the resolved result is false, cancel navigation
-    if (result === false && history.length > 0) {
-      preventHashChangeNavigation = true
-      currentRoute = previousRoute
-      window.history.back()
-      navigatingBack = false
-      state.navigating = false
+    if (result === false) {
+      if (this.history.length > 0) {
+        preventHashChangeNavigation = true
+        currentRoute = previousRoute
+        window.history.back()
+        navigatingBack = false
+        state.navigating = false
+      }
       return false
     }
   }
@@ -475,20 +495,51 @@ export const to = (path, data = {}, options = {}) => {
   navigationData = data
   overrideOptions = options
 
-  location.hash = path.replace(/^#/, '')
+  setHash(path)
+}
+
+export const toRouterView = (routerView, path, data = {}, options = {}) => {
+  navigationData = data
+  overrideOptions = options
+
+  setHash(path, routerView.name)
+}
+
+export const registerRouterView = (routerView) => {
+  routerViews.add(routerView)
+  singleRouterView = routerViews.size === 1 ? routerView : null
+}
+
+export const unregisterRouterView = (routerView) => {
+  routerViews.delete(routerView)
+  singleRouterView = routerViews.size === 1 ? routerViews.values().next().value : null
+}
+
+export const getRegisteredRouterView = (name) => {
+  for (const routerView of routerViews) {
+    if (routerView.name === name) return routerView
+  }
+  return null
+}
+
+export const getRegisteredRouterViewsCount = () => routerViews.size
+
+export const getSingleRegisteredRouterView = () => {
+  return singleRouterView
 }
 
 export const back = function () {
-  const route = history.pop()
-  if (route && currentRoute !== route) {
+  if (this.history === undefined) return
+  const route = this.history.pop()
+  if (route && this.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)
+    toRouterView(this, route.hash, route.data, route.options)
     return true
   }
 
-  const backtrack = (currentRoute && currentRoute.options.backtrack) || false
+  const backtrack = (this.currentRoute && this.currentRoute.options.backtrack) || false
 
   // If we deeplink to a page without backtrack
   // we we let the RouterView handle back
@@ -497,7 +548,7 @@ export const back = function () {
   }
 
   const hashEnd = /(\/:?[\w%\s-]+)$/
-  let path = currentRoute.path
+  let path = this.currentRoute.path
 
   let level = path.split('/').length
 
@@ -520,7 +571,7 @@ export const back = function () {
     )
 
     if (route && backtrack) {
-      to(route.path, route.data, route.options)
+      toRouterView(this, route.path, route.data, route.options)
       return true
     }
   }

package/src/router/utils.js

@@ -4,16 +4,85 @@ import { default as fadeInFadeOutTransition } from './transitions/fadeInOut.js'
  * Get the current hash
  * @returns {Hash}
  */
-export const getHash = (hash) => {
+export const getHash = (hash, routerViewName = '') => {
   if (!hash) hash = '/'
-  const hashParts = hash.replace(/^#/, '').split('?')
+
+  // split router views
+  const [main, ...named] = hash.split('|')
+
+  if (routerViewName !== '') {
+    const match = named.find((name) => name.startsWith(routerViewName + '='))
+    if (match !== undefined) {
+      hash = match.slice(routerViewName.length + 1)
+    } else {
+      hash = '/'
+    }
+  } else {
+    hash = main
+  }
+
+  const [path = '', query = ''] = hash.replace(/^#/, '').split('?')
   return {
-    path: hashParts[0],
-    queryParams: new URLSearchParams(hashParts[1]),
+    path: path,
+    queryParams: new URLSearchParams(query),
     hash: hash,
   }
 }
 
+export const setHash = (path, routerViewName = '') => {
+  const cleanPath = (path || '').replace(/^#/, '')
+  const raw = (location.hash || '').replace(/^#/, '')
+
+  const parts = raw ? raw.split('|').filter(Boolean) : []
+
+  let newMain = '/'
+  const newNamed = {}
+
+  // Parse existing hash. The first segment is always the main route; only
+  // subsequent pipe-separated segments can be named router views.
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i]
+    if (i === 0) {
+      newMain = part
+      continue
+    }
+
+    const eqIndex = part.indexOf('=')
+
+    // named route: sidebar=/search
+    if (eqIndex > 0) {
+      const name = part.slice(0, eqIndex)
+      const value = part.slice(eqIndex + 1)
+      if (value) newNamed[name] = value
+      continue
+    }
+
+    // unnamed/main route
+    if (part) {
+      newMain = part
+    }
+  }
+
+  // Update target router view
+  if (routerViewName === '') {
+    newMain = cleanPath || '/'
+  } else {
+    if (cleanPath) {
+      newNamed[routerViewName] = cleanPath
+    } else {
+      delete newNamed[routerViewName]
+    }
+  }
+
+  // Rebuild hash: main always first
+  let newHash = newMain || '/'
+
+  for (const [name, value] of Object.entries(newNamed)) {
+    newHash += `|${name}=${value}`
+  }
+
+  location.hash = newHash
+}
 export const normalizePath = (path) => {
   return (
     path
@@ -60,17 +129,25 @@ const defaultOptions = {
 }
 
 export const makeRouteObject = (route, overrides, overrideOptions, navigationData) => {
-  // FIX: exclude keepAlive from the destination route options. Unlike other
-  // overrides, keepAlive applies to the route being LEFT, not the destination.
-  // It is consumed by removeView() instead.
-  const { keepAlive: _keepAlive, ...destOverrides } = overrideOptions // eslint-disable-line no-unused-vars
+  const options = { ...defaultOptions, ...route.options }
+
+  // keepAlive applies to the route being left, so do not merge it into the destination.
+  if (isObject(overrideOptions)) {
+    const keys = Object.keys(overrideOptions)
+    for (let i = 0; i < keys.length; i++) {
+      const key = keys[i]
+      if (key !== 'keepAlive') {
+        options[key] = overrideOptions[key]
+      }
+    }
+  }
 
   const cleanRoute = {
     hash: overrides.hash,
     path: route.path,
     component: route.component,
     transition: 'transition' in route ? route.transition : fadeInFadeOutTransition,
-    options: { ...defaultOptions, ...route.options, ...destOverrides },
+    options,
     announce: route.announce || false,
     hooks: route.hooks || {},
     data: { ...route.data, ...navigationData, ...overrides.queryParams },
@@ -156,3 +233,13 @@ export const matchHash = (
   // @ts-ignore - Remove me when we have a better way to handle this
   return matchingRoute
 }
+
+export const sameRouteObject = (route1, route2) => {
+  if (route1 === null) return false
+  if (route2 === null) return false
+
+  // this is too simple a check for now
+  if (route1.hash !== route2.hash) return false
+
+  return true
+}