@symbo.ls/router 3.5.1 → 3.14.1

package/LICENSE

@@ -0,0 +1,34 @@
+Creative Commons Attribution-NonCommercial 4.0 International License
+
+Copyright (c) 2023 symbo.ls
+
+This work is licensed under the Creative Commons Attribution-NonCommercial
+4.0 International License. To view a copy of this license, visit
+https://creativecommons.org/licenses/by-nc/4.0/ or send a letter to
+Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
+
+You are free to:
+
+  Share — copy and redistribute the material in any medium or format
+  Adapt — remix, transform, and build upon the material
+
+Under the following terms:
+
+  Attribution — You must give appropriate credit, provide a link to the
+  license, and indicate if changes were made. You may do so in any
+  reasonable manner, but not in any way that suggests the licensor endorses
+  you or your use.
+
+  NonCommercial — You may not use the material for commercial purposes.
+
+  No additional restrictions — You may not apply legal terms or
+  technological measures that legally restrict others from doing anything
+  the license permits.
+
+THE WORK IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE WORK OR THE USE OR OTHER DEALINGS IN THE
+WORK.

package/README.md

@@ -0,0 +1,234 @@
+# @domql/router
+
+Client-side router plugin for DOMQL. Handles route matching, navigation, scroll management, and state updates within DOMQL elements.
+
+## Install
+
+```bash
+npm install @domql/router
+```
+
+## Basic Usage
+
+```js
+import { router } from '@domql/router'
+
+// Navigate to a path
+router('/about', element)
+
+// With state and options
+router('/dashboard', element, { userId: 1 }, { scrollToTop: true })
+```
+
+Define routes on your DOMQL element:
+
+```js
+const App = {
+  routes: {
+    '/': HomePage,
+    '/about': AboutPage,
+    '/contact': ContactPage,
+    '/*': NotFoundPage
+  }
+}
+```
+
+## Dynamic Route Params
+
+Match routes with `:param` segments. Enable with `useParamsMatching: true`.
+
+```js
+const App = {
+  routes: {
+    '/': HomePage,
+    '/:id': UserPage,
+    '/:category/:slug': ArticlePage,
+    '/*': NotFoundPage
+  }
+}
+
+router('/users/42', element, {}, { useParamsMatching: true })
+// state.params = { id: '42' }
+
+router('/tech/my-article', element, {}, { useParamsMatching: true })
+// state.params = { category: 'tech', slug: 'my-article' }
+```
+
+Exact segments score higher than params, so `/about` will match a literal `/about` route before `/:id`.
+
+## Query String Parsing
+
+Query parameters are automatically parsed and stored in state.
+
+```js
+router('/search?q=hello&tag=a&tag=b', element)
+// state.query = { q: 'hello', tag: ['a', 'b'] }
+```
+
+Duplicate keys are collected into arrays.
+
+## Guards / Middleware
+
+Run async guard functions before navigation. Return `true` to allow, `false` to block, or a string to redirect.
+
+```js
+const authGuard = ({ element }) => {
+  if (!element.state.root.isLoggedIn) return '/login'
+  return true
+}
+
+const roleGuard = ({ params }) => {
+  if (params.section === 'admin') return false
+  return true
+}
+
+router('/dashboard', element, {}, {
+  guards: [authGuard, roleGuard]
+})
+```
+
+Guard functions receive a context object:
+
+```js
+{
+  pathname,  // full pathname
+  route,     // matched route key
+  params,    // dynamic route params
+  query,     // parsed query string
+  hash,      // URL hash
+  element,   // DOMQL element
+  state      // navigation state
+}
+```
+
+## 404 Handling
+
+Provide an `onNotFound` callback for unmatched routes:
+
+```js
+router('/unknown', element, {}, {
+  onNotFound: ({ pathname, route, element }) => {
+    console.warn(`No route found for ${pathname}`)
+  }
+})
+```
+
+You can also define a `/*` wildcard route as a catch-all fallback.
+
+## Custom Router Element
+
+Use `customRouterElement` in your `config.js` to route pages into a specific element within the component tree instead of the root. This is useful for persistent layouts where only the content area changes between routes.
+
+```js
+// symbols/config.js
+export default {
+  router: {
+    customRouterElement: 'Folder.Content'
+  }
+}
+```
+
+The value is a dot-separated path resolved from the root element. For example, `'Folder.Content'` means the router will find `root.Folder.Content` and render page content inside it.
+
+This allows you to define a layout once in the `/` (main) page and have sub-pages render inside a specific container:
+
+```js
+// pages/main.js — defines the persistent layout
+export const main = {
+  extends: 'Layout',
+  Folder: {
+    Content: {
+      // default content for '/' route
+    }
+  }
+}
+
+// pages/team.js — only defines content (rendered inside Folder.Content)
+export const team = {
+  state: 'team',
+  extends: 'Grid',
+  childExtends: 'TeamItem',
+  childrenAs: 'state',
+  children: (el, s) => s.data,
+}
+```
+
+## Options
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `level` | `number` | `0` | Route nesting level (which path segment to match) |
+| `pushState` | `boolean` | `true` | Push to browser history |
+| `initialRender` | `boolean` | `false` | Whether this is the initial page render |
+| `scrollToTop` | `boolean` | `true` | Scroll to top after navigation |
+| `scrollToNode` | `boolean` | `false` | Scroll within the element node |
+| `scrollNode` | `Element` | `document.documentElement` | Node to scroll |
+| `scrollToOffset` | `number` | `0` | Offset when scrolling to hash anchors |
+| `scrollToOptions` | `object` | `{ behavior: 'smooth' }` | Options passed to `scrollTo()` |
+| `useFragment` | `boolean` | `false` | Use fragment tag for content |
+| `updateState` | `boolean` | `true` | Update element state on navigation |
+| `contentElementKey` | `string` | `'content'` | Key for the content element slot |
+| `removeOldElement` | `boolean` | `false` | Remove old content element before setting new |
+| `useParamsMatching` | `boolean` | `false` | Enable dynamic `:param` route matching |
+| `guards` | `function[]` | `undefined` | Array of guard/middleware functions |
+| `onNotFound` | `function` | `undefined` | Callback when no route matches |
+
+## Exported Utilities
+
+### `getActiveRoute(level, route)`
+
+Returns the active route segment at the given nesting level.
+
+```js
+import { getActiveRoute } from '@domql/router'
+
+getActiveRoute(0, '/users/42')  // '/users'
+getActiveRoute(1, '/users/42')  // '/42'
+```
+
+### `parseQuery(search)`
+
+Parses a query string into an object.
+
+```js
+import { parseQuery } from '@domql/router'
+
+parseQuery('?page=1&sort=name')  // { page: '1', sort: 'name' }
+```
+
+### `matchRoute(pathname, routes, level)`
+
+Matches a pathname against a routes object. Returns `{ key, content, params }`.
+
+```js
+import { matchRoute } from '@domql/router'
+
+const routes = { '/': Home, '/:id': Detail, '/*': NotFound }
+const result = matchRoute('/42', routes)
+// { key: '/:id', content: Detail, params: { id: '42' } }
+```
+
+### `parseRoutePattern(pattern)`
+
+Parses a route pattern string into segments, param definitions, and wildcard flag. Results are cached.
+
+### `runGuards(guards, context)`
+
+Runs an array of async guard functions sequentially. Returns `true`, `false`, or a redirect path string.
+
+## Events
+
+The router triggers an `onRouteChanged` event on the element after navigation completes. Listen for it in your element definition:
+
+```js
+const App = {
+  routes: { ... },
+  onRouteChanged: (element, options) => {
+    console.log('Route changed:', element.state.route)
+  }
+}
+```
+
+## License
+
+MIT

package/index.js

@@ -1,140 +1,106 @@
-import * as utils from '@domql/utils'
-const { setCookie, merge } = utils.default || utils
+'use strict'
 
-export * from './location.js'
+import { document, window, triggerEventOn } from '@symbo.ls/utils'
 
-export const getLocationPath = (
-  index = 0,
-  route = window.location.pathname
-) => {
-  const routeArray = route.split('/')
-  const activeRoute = routeArray[index + 1]
-  if (activeRoute) {
-    return `/${activeRoute}`
-  }
-}
-
-export const getLastLocationPath = (
-  level = 0,
-  route = window.location.pathname
-) => {
-  const routeArray = route.split('/')
-  const activeRoute = routeArray[routeArray.length - level - 1]
-  if (activeRoute) {
-    return `/${activeRoute}`
-  }
-}
-
-// --- Dynamic route matching ---
+// --- Route matching utilities ---
 
 const paramPattern = /^:(.+)/
+const wildcardPattern = /^\*$/
+
 const routeCache = new Map()
 
-export const parseRouteParams = (pattern, pathname) => {
-  const patternParts = pattern.replace(/^\//, '').split('/')
-  const pathParts = pathname.replace(/^\//, '').split('/').filter(Boolean)
-  const params = {}
+export const parseRoutePattern = (pattern) => {
+  const cached = routeCache.get(pattern)
+  if (cached) return cached
 
-  for (let i = 0; i < patternParts.length; i++) {
-    const match = patternParts[i].match(paramPattern)
-    if (match && pathParts[i]) {
-      params[match[1]] = decodeURIComponent(pathParts[i])
+  const segments = pattern.replace(/^\//, '').split('/')
+  const params = []
+  let hasWildcard = false
+
+  for (let i = 0; i < segments.length; i++) {
+    const match = segments[i].match(paramPattern)
+    if (match) {
+      params.push({ index: i, name: match[1] })
+    } else if (wildcardPattern.test(segments[i])) {
+      hasWildcard = true
     }
   }
 
-  return params
+  const result = { segments, params, hasWildcard, pattern }
+  routeCache.set(pattern, result)
+  return result
 }
 
-export const matchRoutes = (routes, pathname, level = 0) => {
-  const pathParts = pathname.replace(/^\//, '').split('/').filter(Boolean)
-  const relevantParts = pathParts.slice(level)
-  const routeKey = '/' + (relevantParts[0] || '')
+export const matchRoute = (pathname, routes, level = 0) => {
+  const pathSegments = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const relevantSegments = pathSegments.slice(level)
+  const routePath = '/' + (relevantSegments[0] || '')
 
-  // Fast path: direct match
-  if (routes[routeKey]) {
-    return { key: routeKey, content: routes[routeKey], params: {} }
-  }
-
-  // Dynamic param matching
   let bestMatch = null
   let bestScore = -1
-  let bestParams = {}
+  let matchedParams = {}
 
   for (const key in routes) {
     if (key === '/*') continue
-    const keyParts = key.replace(/^\//, '').split('/')
-
-    let score = 0
-    let matched = true
-    const params = {}
-    const len = Math.min(keyParts.length, relevantParts.length)
-
-    if (keyParts.length > relevantParts.length) continue
-
-    for (let i = 0; i < len; i++) {
-      const paramMatch = keyParts[i].match(paramPattern)
-      if (keyParts[i] === relevantParts[i]) {
-        score += 3
-      } else if (paramMatch) {
-        params[paramMatch[1]] = decodeURIComponent(relevantParts[i])
-        score += 1
-      } else {
-        matched = false
-        break
-      }
-    }
 
-    if (matched && score > bestScore) {
+    const parsed = parseRoutePattern(key)
+    const score = scoreMatch(relevantSegments, parsed)
+
+    if (score > bestScore) {
       bestScore = score
       bestMatch = key
-      bestParams = params
+      matchedParams = extractParams(relevantSegments, parsed)
     }
   }
 
-  if (bestMatch) {
-    return { key: bestMatch, content: routes[bestMatch], params: bestParams }
+  if (!bestMatch && routes['/*']) {
+    bestMatch = '/*'
   }
 
-  // Fallback to wildcard
-  if (routes['/*']) {
-    return { key: '/*', content: routes['/*'], params: {} }
+  return {
+    key: bestMatch,
+    content: bestMatch ? routes[bestMatch] : null,
+    params: matchedParams,
+    routePath
   }
-
-  return { key: null, content: null, params: {} }
 }
 
-// --- Nested route resolution ---
+const scoreMatch = (pathSegments, parsed) => {
+  const { segments, hasWildcard } = parsed
 
-export const resolveNestedRoute = (routes, pathname, level = 0) => {
-  const segments = pathname.replace(/^\//, '').split('/').filter(Boolean)
-  const chain = []
-  let currentRoutes = routes
-  let currentLevel = level
+  if (!hasWildcard && segments.length !== pathSegments.length &&
+      segments.length !== 1) {
+    // For single-segment patterns, match just the first segment
+    if (segments.length > pathSegments.length) return -1
+  }
 
-  while (currentLevel < segments.length && currentRoutes) {
-    const match = matchRoutes(currentRoutes, pathname, currentLevel)
-    if (!match.content) break
+  let score = 0
+  const len = Math.min(segments.length, pathSegments.length)
 
-    chain.push({
-      level: currentLevel,
-      key: match.key,
-      content: match.content,
-      params: match.params
-    })
-
-    // Check for nested routes
-    if (match.content.routes) {
-      currentRoutes = match.content.routes
-      currentLevel++
+  for (let i = 0; i < len; i++) {
+    if (segments[i] === pathSegments[i]) {
+      score += 3 // exact match
+    } else if (paramPattern.test(segments[i])) {
+      score += 1 // param match
+    } else if (wildcardPattern.test(segments[i])) {
+      score += 0.5
     } else {
-      break
+      return -1 // no match
     }
   }
 
-  return chain
+  return score
 }
 
-// --- Query string parsing ---
+const extractParams = (pathSegments, parsed) => {
+  const params = {}
+  for (const { index, name } of parsed.params) {
+    if (pathSegments[index]) {
+      params[name] = decodeURIComponent(pathSegments[index])
+    }
+  }
+  return params
+}
 
 export const parseQuery = (search) => {
   if (!search || search === '?') return {}
@@ -151,7 +117,7 @@ export const parseQuery = (search) => {
   return params
 }
 
-// --- Guards / Middleware ---
+// --- Route guards / middleware ---
 
 export const runGuards = async (guards, context) => {
   if (!guards || !guards.length) return true
@@ -163,234 +129,201 @@ export const runGuards = async (guards, context) => {
   return true
 }
 
-// --- Pop state handler ---
-
-let popStateFired = false
-export const onPopState = (element) => {
-  if (popStateFired) return
-  popStateFired = true
-  const win = (element && element.context && element.context.window) || globalThis
-  win.onpopstate = async (e) => {
-    const { pathname, search, hash } = win.location
-    const url = pathname + search + hash
-    if (element && element.call) {
-      await element.call(
-        'router',
-        url,
-        element,
-        {},
-        { pushState: false, scrollToTop: false, level: 0, event: e }
-      )
-    } else {
-      await router(url, element, {}, { pushState: false, scrollToTop: false, level: 0, event: e })
-    }
-  }
+// --- Core router ---
+
+export const getActiveRoute = (level = 0, route) => {
+  if (!route) route = (typeof window !== 'undefined' ? window.location.pathname : '/')
+  const routeArray = route.split('/')
+  const activeRoute = routeArray[level + 1]
+  if (activeRoute) return `/${activeRoute}`
 }
 
-export let lastPathname = null
+export let lastPathname
 export let lastLevel = 0
 
+const normalizePath = (p) => (!p || p === 'srcdoc' || p === 'about:srcdoc') ? '/' : p
+
 const defaultOptions = {
-  window: globalThis,
   level: lastLevel,
-  initialRender: false,
   pushState: true,
+  initialRender: false,
   scrollToTop: true,
   scrollToNode: false,
-  scrollDocument: false,
+  scrollNode: document && document.documentElement,
+  scrollBody: false,
   useFragment: false,
-  authCheck: true,
   updateState: true,
-  updateStateOptions: {
-    preventUpdate: ['Canvas'],
-    preventUpdateTriggerStateUpdate: true
-  },
-  preventUpdate: ['Canvas', 'Modal'],
-  setOptions: {},
-  scrollToOffset: 120,
+  scrollToOffset: 0,
+  contentElementKey: 'content',
   scrollToOptions: { behavior: 'smooth' },
-  useParamsMatching: false,
-  useNestedRoutes: false
+  useParamsMatching: true
 }
 
-const lastElement = {}
+export const router = async (path, el, state = {}, options = {}) => {
+  const element = el || this
+  const win = element?.context?.window || window
+  const doc = element?.context?.document || document
+  const opts = {
+    ...defaultOptions,
+    ...element.context.routerOptions,
+    ...options
+  }
+  lastLevel = opts.lastLevel
 
-// eslint-disable-next-line default-param-last
-export async function router(path = '/', el, state = {}, passedOptions = {}) {
-  const rootElem = this && this.getRoot()
-  const element = el && el.routes ? el : rootElem
-  const options = merge(passedOptions, defaultOptions)
-  lastLevel = options.level
+  const ref = element.__ref
 
-  const isModal = element.getRootState('activeModal')
-  if (isModal) {
-    if (options.event) {
-      options.event.preventDefault()
-      options.event.stopPropagation()
-    }
-    element.call('closeModal')
-    if (options.event) { options.event.preventDefault() }
+  if (
+    (opts.contentElementKey !== 'content' &&
+      opts.contentElementKey !== ref.contentElementKey) ||
+    !ref.contentElementKey
+  ) {
+    ref.contentElementKey = opts.contentElementKey || 'content'
   }
 
-  const urlObj = new options.window.URL(options.window.location.origin + path)
+  const contentElementKey = ref.contentElementKey || opts.contentElementKey || 'content'
+
+  const origin = win.location.origin !== 'null' ? win.location.origin : 'http://localhost'
+  path = normalizePath(path)
+  const urlObj = new win.URL(origin + path)
   const { pathname, search, hash } = urlObj
 
   const query = parseQuery(search)
 
-  const rootRoute = getLocationPath(0, path)
-  let routeArray = pathname.split('/')
-
-  if (options.authCheck) {
-    const authRedirect = element.call('redirectBasedOnAuth', rootRoute)
-    if (authRedirect && rootRoute !== authRedirect) {
-      routeArray = authRedirect.split('/')
-    }
-  }
+  const rootNode = element.node
+  const hashChanged = hash && hash !== win.location.hash.slice(1)
+  const pathChanged = pathname !== lastPathname
+  lastPathname = pathname
 
-  const route = routeArray.join('/').replace('//', '/')
-
-  // Route matching - support dynamic params and nested routes
-  let routeInContent, content, params
-  if (options.useNestedRoutes) {
-    const chain = resolveNestedRoute(element.routes, pathname, lastLevel)
-    const leaf = chain[chain.length - 1]
-    if (leaf) {
-      routeInContent = leaf.key
-      content = leaf.content
-      params = chain.reduce((acc, c) => ({ ...acc, ...c.params }), {})
-    }
-  } else if (options.useParamsMatching) {
-    const match = matchRoutes(element.routes, pathname, lastLevel)
-    routeInContent = match.key
+  // Route matching - support both simple and param-based
+  let route, routePath, content, params
+  if (opts.useParamsMatching) {
+    const match = matchRoute(pathname, element.routes, opts.level)
+    // FRAMEWORK-2: state.route must reflect the matched pattern key
+    // (e.g. `/players/:id`), not the literal first URL segment, so
+    // consumers and devtools can branch on which route handler fired.
+    // The first-segment value is still exposed as `routePath` for the
+    // rare consumer that needs the URL piece directly.
+    route = match.key
+    routePath = match.routePath
     content = match.content
     params = match.params
   } else {
-    routeInContent = `/${routeArray[lastLevel + 1] || ''}`
-    content = element.routes[routeInContent] || element.routes['/*']
+    route = getActiveRoute(opts.level, pathname)
+    routePath = route
+    content = element.routes[route || '/'] || element.routes['/*']
     params = {}
   }
 
-  // Run custom guards
-  if (options.guards && options.guards.length) {
-    const guardCtx = { pathname, route, routeInContent, params, query, hash, element, state }
-    const guardResult = await runGuards(options.guards, guardCtx)
-    if (guardResult === false) return
-    if (typeof guardResult === 'string') {
-      return router.call(this, guardResult, el, state, { ...passedOptions, guards: [] })
-    }
-  }
+  const scrollNode = opts.scrollToNode ? rootNode : opts.scrollNode
 
-  const wasModal = element.call(
-    'isModalRoute',
-    options.window.location.pathname.split('#')[0]
-  )
-  const isInitial = options.initialRender
-  const hashChanged = hash && hash !== options.window.location.hash
-  const pathChanged = pathname !== lastPathname
-  lastPathname = pathname
+  if (element.state?.root?.debugging) {
+    element.state.root.debugging = false
+    return
+  }
 
-  if (
-    !content ||
-    (element.getRootState('debugging') && !options.allowRouterWhileInspect)
-  ) {
-    if (options.onNotFound) {
-      options.onNotFound({ pathname, route, routeInContent, element })
+  if (!content) {
+    if (opts.onNotFound) {
+      opts.onNotFound({ pathname, route, element })
+    } else if (!opts.silent) {
+      console.warn('[smbls/router] no content matched for path', pathname, '— available routes:', Object.keys(element.routes || {}))
     }
     return
   }
-  if (options.pushState && options.level === 0) {
-    options.window.history.pushState(
-      {
-        prevUrl: options.window.location.href,
-        ...state
-      },
-      null,
-      route + (search ? `${search}` : '') + (hash ? `${hash}` : '')
-    )
+
+  // Run guards
+  if (opts.guards && opts.guards.length) {
+    const guardContext = { pathname, route, params, query, hash, element, state }
+    const guardResult = await runGuards(opts.guards, guardContext)
+    if (guardResult === false) return
+    if (typeof guardResult === 'string') {
+      // Redirect
+      return router(guardResult, el, state, { ...options, guards: [] })
+    }
+  }
+
+  // pushState always fires before render so the URL bar stays in sync even
+  // if the content-render step below no-ops due to an extends/ref mismatch.
+  if (opts.pushState) {
+    try {
+      win.history.pushState(state, null, pathname + (search || '') + (hash || ''))
+    } catch (e) {} // expected in sandboxed iframes (e.g. about:srcdoc) where pushState is restricted
   }
 
   if (pathChanged || !hashChanged) {
-    const stateUpdate = { route, hash, routeInContent, debugging: false }
+    const stateUpdate = { route, routePath, hash, debugging: false }
     if (Object.keys(params).length) stateUpdate.params = params
     if (Object.keys(query).length) stateUpdate.query = query
 
-    if (options.updateState) {
-      await element.state.update(
+    if (opts.updateState) {
+      element.state.update(
         stateUpdate,
-        {
-          preventUpdate: [options.preventUpdate, 'content'],
-          updateByRouter: true,
-          ...options.updateStateOptions
-        }
+        { preventContentUpdate: true }
       )
     }
 
-    if (
-      element.content &&
-      (options.forceContentUpdate || (!isInitial && wasModal))
-    ) {
-      await element.content?.update(
-        {},
-        {
-          preventUpdate: options.preventUpdate
-        }
-      )
-    } else {
-      lastElement.content = content
-      element.removeContent()
-      await element.set(
-        {
-          tag: options.useFragment && 'fragment',
-          extends: content
-        },
-        {
-          lastElement,
-          routerContentElement: content,
-          preventUpdate: options.preventUpdate,
-          ...options.setOptions
+    if (contentElementKey && opts.removeOldElement) {
+      element[contentElementKey].remove()
+    }
+
+    // Merge parent's original content definition (styles like overflow, maxHeight)
+    // with the route's content component
+    const originContent = element.__ref?.origin?.content
+    const contentStyles = {}
+    if (originContent) {
+      for (const k in originContent) {
+        const v = originContent[k]
+        if (k === '__ref' || k === 'props' || k === 'node' || k === 'parent' || k === 'key') continue
+        if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean' || (typeof v === 'object' && v !== null && !v.node && !v.__ref)) {
+          contentStyles[k] = v
         }
-      )
+      }
     }
-    if (element.content) {
-      element.content.__ref.__componentKey = route
+
+    const nextContent = {
+      ...contentStyles,
+      ...(typeof content === 'object' ? content : { extends: content })
+    }
+    if (opts.useFragment) nextContent.tag = 'fragment'
+
+    try {
+      element.set(nextContent, { contentElementKey })
+    } catch (err) {
+      console.error('[smbls/router] failed to render route content', pathname, err)
     }
   }
 
-  const rootNode = element.node
-  const scrollNode = options.scrollDocument
-    ? options.window.document.documentElement
-    : rootNode
-  if (options.scrollToTop) {
+  if (opts.scrollToTop && scrollNode?.scrollTo) {
     scrollNode.scrollTo({
-      ...(options.scrollToOptions || {}),
+      ...(opts.scrollToOptions || {}),
       top: 0,
       left: 0
     })
   }
-  if (options.scrollToNode) {
-    content.content.node.scrollTo({
-      ...(options.scrollToOptions || {}),
+  if (opts.scrollToNode && content[contentElementKey]?.node?.scrollTo) {
+    content[contentElementKey].node.scrollTo({
+      ...(opts.scrollToOptions || {}),
       top: 0,
       left: 0
     })
   }
 
   if (hash) {
-    const activeNode = options.window.document.getElementById(hash.slice(1))
-    if (activeNode) {
+    const activeNode = doc.getElementById(hash)
+    if (activeNode && scrollNode?.scrollTo) {
       const top =
         activeNode.getBoundingClientRect().top +
           rootNode.scrollTop -
-          (options.scrollToOffset || 0)
+          (opts.scrollToOffset || 0)
       scrollNode.scrollTo({
-        ...(options.scrollToOptions || {}),
+        ...(opts.scrollToOptions || {}),
         top,
         left: 0
       })
     }
   }
 
-  if (route !== '/*') {
-    setCookie('route', route)
-  }
+  // trigger `on.routeChanged`
+  triggerEventOn('routeChanged', element, opts)
 }
+
+export default router

package/package.json

@@ -1,15 +1,40 @@
 {
   "name": "@symbo.ls/router",
-  "version": "3.5.1",
-  "main": "index.js",
-  "license": "MIT",
+  "version": "3.14.1",
+  "license": "CC-BY-NC-4.0",
   "type": "module",
+  "module": "./index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js",
+    "./package.json": "./package.json"
+  },
+  "source": "index.js",
+  "files": [
+    "dist",
+    "*.js"
+  ],
   "scripts": {
-    "vpatch": "npm version patch && npm publish --access public"
+    "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
+    "build:esm": "NODE_ENV=$NODE_ENV esbuild *.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "NODE_ENV=$NODE_ENV esbuild *.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:iife": "NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=DomqlRouter --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs"
   },
   "dependencies": {
-    "@domql/utils": "^3.5.1"
+    "@symbo.ls/element": "^3.14.3",
+    "@symbo.ls/utils": "^3.14.2"
+  },
+  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
+  "devDependencies": {
+    "@babel/core": "^7.26.0"
   },
-  "gitHead": "0be12bcdd99c265fdeded6d756a1a3616a943ffc",
-  "source": "index.js"
+  "browser": "./index.js",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/location.js

@@ -1,3 +0,0 @@
-export const onLeave = msg => {
-  window.onbeforeunload = () => msg || 'Are you sure you want to leave?'
-}