@symbo.ls/router 3.14.7 → 3.14.9

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @symbo.ls/router
 
+## 3.14.9
+
+### Patch Changes
+
+- Manual patch bump triggered via workflow_dispatch (scope: @symbo.ls).
+  No source change behind this bump — released to refresh dist or
+  coordinate a cross-package version line.
+- Updated dependencies
+  - @symbo.ls/element@3.14.12
+  - @symbo.ls/utils@3.14.11
+
+## 3.14.8
+
+### Patch Changes
+
+- Manual patch bump triggered via workflow_dispatch (scope: @symbo.ls).
+  No source change behind this bump — released to refresh dist or
+  coordinate a cross-package version line.
+- Updated dependencies
+  - @symbo.ls/element@3.14.11
+  - @symbo.ls/utils@3.14.10
+
 ## 3.14.7
 
 ### Patch Changes

package/index.js

@@ -0,0 +1,329 @@
+'use strict'
+
+import { document, window, triggerEventOn } from '@symbo.ls/utils'
+
+// --- Route matching utilities ---
+
+const paramPattern = /^:(.+)/
+const wildcardPattern = /^\*$/
+
+const routeCache = new Map()
+
+export const parseRoutePattern = (pattern) => {
+  const cached = routeCache.get(pattern)
+  if (cached) return cached
+
+  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
+    }
+  }
+
+  const result = { segments, params, hasWildcard, pattern }
+  routeCache.set(pattern, result)
+  return result
+}
+
+export const matchRoute = (pathname, routes, level = 0) => {
+  const pathSegments = pathname.replace(/^\//, '').split('/').filter(Boolean)
+  const relevantSegments = pathSegments.slice(level)
+  const routePath = '/' + (relevantSegments[0] || '')
+
+  let bestMatch = null
+  let bestScore = -1
+  let matchedParams = {}
+
+  for (const key in routes) {
+    if (key === '/*') continue
+
+    const parsed = parseRoutePattern(key)
+    const score = scoreMatch(relevantSegments, parsed)
+
+    if (score > bestScore) {
+      bestScore = score
+      bestMatch = key
+      matchedParams = extractParams(relevantSegments, parsed)
+    }
+  }
+
+  if (!bestMatch && routes['/*']) {
+    bestMatch = '/*'
+  }
+
+  return {
+    key: bestMatch,
+    content: bestMatch ? routes[bestMatch] : null,
+    params: matchedParams,
+    routePath
+  }
+}
+
+const scoreMatch = (pathSegments, parsed) => {
+  const { segments, hasWildcard } = parsed
+
+  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
+  }
+
+  let score = 0
+  const len = Math.min(segments.length, pathSegments.length)
+
+  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 {
+      return -1 // no match
+    }
+  }
+
+  return score
+}
+
+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 {}
+  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
+}
+
+// --- Route 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
+}
+
+// --- 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
+export let lastLevel = 0
+
+const normalizePath = (p) => (!p || p === 'srcdoc' || p === 'about:srcdoc') ? '/' : p
+
+const defaultOptions = {
+  level: lastLevel,
+  pushState: true,
+  initialRender: false,
+  scrollToTop: true,
+  scrollToNode: false,
+  scrollNode: document && document.documentElement,
+  scrollBody: false,
+  useFragment: false,
+  updateState: true,
+  scrollToOffset: 0,
+  contentElementKey: 'content',
+  scrollToOptions: { behavior: 'smooth' },
+  useParamsMatching: true
+}
+
+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
+
+  const ref = element.__ref
+
+  if (
+    (opts.contentElementKey !== 'content' &&
+      opts.contentElementKey !== ref.contentElementKey) ||
+    !ref.contentElementKey
+  ) {
+    ref.contentElementKey = opts.contentElementKey || 'content'
+  }
+
+  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 rootNode = element.node
+  const hashChanged = hash && hash !== win.location.hash.slice(1)
+  const pathChanged = pathname !== lastPathname
+  lastPathname = pathname
+
+  // 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 {
+    route = getActiveRoute(opts.level, pathname)
+    routePath = route
+    content = element.routes[route || '/'] || element.routes['/*']
+    params = {}
+  }
+
+  const scrollNode = opts.scrollToNode ? rootNode : opts.scrollNode
+
+  if (element.state?.root?.debugging) {
+    element.state.root.debugging = false
+    return
+  }
+
+  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
+  }
+
+  // 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, routePath, hash, debugging: false }
+    if (Object.keys(params).length) stateUpdate.params = params
+    if (Object.keys(query).length) stateUpdate.query = query
+
+    if (opts.updateState) {
+      element.state.update(
+        stateUpdate,
+        { preventContentUpdate: true }
+      )
+    }
+
+    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
+        }
+      }
+    }
+
+    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)
+    }
+  }
+
+  if (opts.scrollToTop && scrollNode?.scrollTo) {
+    scrollNode.scrollTo({
+      ...(opts.scrollToOptions || {}),
+      top: 0,
+      left: 0
+    })
+  }
+  if (opts.scrollToNode && content[contentElementKey]?.node?.scrollTo) {
+    content[contentElementKey].node.scrollTo({
+      ...(opts.scrollToOptions || {}),
+      top: 0,
+      left: 0
+    })
+  }
+
+  if (hash) {
+    const activeNode = doc.getElementById(hash)
+    if (activeNode && scrollNode?.scrollTo) {
+      const top =
+        activeNode.getBoundingClientRect().top +
+          rootNode.scrollTop -
+          (opts.scrollToOffset || 0)
+      scrollNode.scrollTo({
+        ...(opts.scrollToOptions || {}),
+        top,
+        left: 0
+      })
+    }
+  }
+
+  // trigger `on.routeChanged`
+  triggerEventOn('routeChanged', element, opts)
+}
+
+export default router

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/router",
-  "version": "3.14.7",
+  "version": "3.14.9",
   "license": "CC-BY-NC-4.0",
   "type": "module",
   "module": "./dist/esm/index.js",
@@ -17,6 +17,7 @@
   "source": "index.js",
   "files": [
     "dist",
+    "*.js",
     "*.md",
     "LICENSE"
   ],
@@ -27,8 +28,8 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@symbo.ls/element": "^3.14.10",
-    "@symbo.ls/utils": "^3.14.9"
+    "@symbo.ls/element": "^3.14.12",
+    "@symbo.ls/utils": "^3.14.11"
   },
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "devDependencies": {