@symbo.ls/router 3.5.1 → 3.14.0

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,194 @@ 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, content, params
+  if (opts.useParamsMatching) {
+    const match = matchRoute(pathname, element.routes, opts.level)
+    route = match.routePath
     content = match.content
     params = match.params
   } else {
-    routeInContent = `/${routeArray[lastLevel + 1] || ''}`
-    content = element.routes[routeInContent] || element.routes['/*']
+    route = getActiveRoute(opts.level, pathname)
+    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, 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.0",
+  "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.0",
+    "@symbo.ls/utils": "^3.14.0"
+  },
+  "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?'
-}