@symbo.ls/router 3.1.2 → 3.3.0

package/index.js

@@ -25,6 +25,168 @@ export const getLastLocationPath = (
   }
 }
 
+// --- Dynamic route matching ---
+
+const paramPattern = /^:(.+)/
+const routeCache = new Map()
+
+export const parseRouteParams = (pattern, pathname) => {
+  const patternParts = pattern.replace(/^\//, '').split('/')
+  const pathParts = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const params = {}
+
+  for (let i = 0; i < patternParts.length; i++) {
+    const match = patternParts[i].match(paramPattern)
+    if (match && pathParts[i]) {
+      params[match[1]] = decodeURIComponent(pathParts[i])
+    }
+  }
+
+  return params
+}
+
+export const matchRoutes = (routes, pathname, level = 0) => {
+  const pathParts = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const relevantParts = pathParts.slice(level)
+  const routeKey = '/' + (relevantParts[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 = {}
+
+  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) {
+      bestScore = score
+      bestMatch = key
+      bestParams = params
+    }
+  }
+
+  if (bestMatch) {
+    return { key: bestMatch, content: routes[bestMatch], params: bestParams }
+  }
+
+  // Fallback to wildcard
+  if (routes['/*']) {
+    return { key: '/*', content: routes['/*'], params: {} }
+  }
+
+  return { key: null, content: null, params: {} }
+}
+
+// --- Nested route resolution ---
+
+export const resolveNestedRoute = (routes, pathname, level = 0) => {
+  const segments = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const chain = []
+  let currentRoutes = routes
+  let currentLevel = level
+
+  while (currentLevel < segments.length && currentRoutes) {
+    const match = matchRoutes(currentRoutes, pathname, currentLevel)
+    if (!match.content) break
+
+    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++
+    } else {
+      break
+    }
+  }
+
+  return chain
+}
+
+// --- Query string parsing ---
+
+export const parseQuery = (search) => {
+  if (!search || search === '?') return {}
+  const params = {}
+  const searchParams = new URLSearchParams(search)
+  searchParams.forEach((value, key) => {
+    if (params[key] !== undefined) {
+      if (!Array.isArray(params[key])) params[key] = [params[key]]
+      params[key].push(value)
+    } else {
+      params[key] = value
+    }
+  })
+  return params
+}
+
+// --- Guards / Middleware ---
+
+export const runGuards = async (guards, context) => {
+  if (!guards || !guards.length) return true
+  for (const guard of guards) {
+    const result = await guard(context)
+    if (result === false) return false
+    if (typeof result === 'string') return result // redirect path
+  }
+  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 })
+    }
+  }
+}
+
 export let lastPathname = null
 export let lastLevel = 0
 
@@ -42,18 +204,21 @@ const defaultOptions = {
   updateStateOptions: {
     preventUpdate: ['Canvas'],
     preventUpdateTriggerStateUpdate: true
-    // preventContentUpdate: true,
-    // preventUpdate: ['MainHeaderCaptions', 'HeaderSubAside']
   },
   preventUpdate: ['Canvas', 'Modal'],
   setOptions: {},
   scrollToOffset: 120,
-  scrollToOptions: { behavior: 'smooth' }
+  scrollToOptions: { behavior: 'smooth' },
+  useParamsMatching: false,
+  useNestedRoutes: false
 }
 
+const lastElement = {}
+
 // eslint-disable-next-line default-param-last
-export async function router (path = '/', el, state = {}, passedOptions = {}) {
-  const element = el || (this && this.getRoot())
+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
 
@@ -63,12 +228,15 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
       options.event.preventDefault()
       options.event.stopPropagation()
     }
-    return element.call('closeModal')
+    element.call('closeModal')
+    if (options.event) { options.event.preventDefault() }
   }
 
   const urlObj = new options.window.URL(options.window.location.origin + path)
   const { pathname, search, hash } = urlObj
 
+  const query = parseQuery(search)
+
   const rootRoute = getLocationPath(0, path)
   let routeArray = pathname.split('/')
 
@@ -80,12 +248,37 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
   }
 
   const route = routeArray.join('/').replace('//', '/')
-  const routeInContent = `/${routeArray[lastLevel + 1] || ''}`
 
-  // const isPreview = location.pathname.includes('/editor')
-  // const pages = element.routes || element.context.pages
-  // const content = pages[routeInContent] || pages['/*']
-  const content = element.routes[routeInContent] || element.routes['/*']
+  // 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
+    content = match.content
+    params = match.params
+  } else {
+    routeInContent = `/${routeArray[lastLevel + 1] || ''}`
+    content = element.routes[routeInContent] || 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 wasModal = element.call(
     'isModalRoute',
@@ -100,6 +293,9 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
     !content ||
     (element.getRootState('debugging') && !options.allowRouterWhileInspect)
   ) {
+    if (options.onNotFound) {
+      options.onNotFound({ pathname, route, routeInContent, element })
+    }
     return
   }
   if (options.pushState && options.level === 0) {
@@ -114,11 +310,13 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
   }
 
   if (pathChanged || !hashChanged) {
-    //  || (!rootRouteHasChanged && { preventUpdateTriggerStateUpdate: true, preventContentUpdate: true })
+    const stateUpdate = { route, hash, routeInContent, 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(
-        { route, hash, routeInContent, debugging: false },
+        stateUpdate,
         {
           preventUpdate: [options.preventUpdate, 'content'],
           updateByRouter: true,
@@ -127,31 +325,34 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
       )
     }
 
-    const hasSet = isInitial || !isInitial
-    if (hasSet) {
-      if (options.forceContentUpdate || (!isInitial && wasModal)) {
-        await element.content.update(
-          {},
-          {
-            preventUpdate: options.preventUpdate
-          }
-        )
-      } else {
-        await element.set(
-          {
-            tag: options.useFragment && 'fragment',
-            extends: content
-          },
-          {
-            // ...(!isInitial && wasModal && !options.forceContentUpdate && { preventContentUpdate: true }),
-            preventUpdate: options.preventUpdate,
-            ...options.setOptions
-          }
-        )
-      }
-      if (element.content) {
-        element.content.__ref.__componentKey = route
-      }
+    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 (element.content) {
+      element.content.__ref.__componentKey = route
     }
   }
 
@@ -180,7 +381,7 @@ export async function router (path = '/', el, state = {}, passedOptions = {}) {
       const top =
         activeNode.getBoundingClientRect().top +
           rootNode.scrollTop -
-          options.scrollToOffset || 0
+          (options.scrollToOffset || 0)
       scrollNode.scrollTo({
         ...(options.scrollToOptions || {}),
         top,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/router",
-  "version": "3.1.2",
+  "version": "3.3.0",
   "main": "index.js",
   "license": "MIT",
   "type": "module",
@@ -8,8 +8,8 @@
     "vpatch": "npm version patch && npm publish --access public"
   },
   "dependencies": {
-    "@domql/utils": "^3.1.2"
+    "@domql/utils": "^3.2.3"
   },
-  "gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
+  "gitHead": "0be12bcdd99c265fdeded6d756a1a3616a943ffc",
   "source": "index.js"
 }