safa-router 1.0.1

package/src/HistoryManager.js

@@ -0,0 +1,95 @@
+export class HistoryManager {
+  constructor({ useHash = false, basePath = '' } = {}) {
+    this._useHash = useHash
+    this._basePath = basePath
+    this._listeners = []
+    this._bound = this._onPop.bind(this)
+  }
+
+  init() {
+    window.addEventListener('popstate', this._bound)
+  }
+
+  destroy() {
+    window.removeEventListener('popstate', this._bound)
+    this._listeners = []
+  }
+
+  isSupported() {
+    return typeof window !== 'undefined' && !!window.history
+  }
+
+  get path() {
+    if (this._useHash) {
+      const h = location.hash.slice(1)
+      return h || '/'
+    }
+    let p = location.pathname
+    if (this._basePath && p.startsWith(this._basePath)) {
+      p = p.slice(this._basePath.length) || '/'
+    }
+    return p
+  }
+
+  push(url, state = {}) {
+    const scrollY = window.scrollY
+    history.pushState({ ...state, _scrollY: scrollY }, '', this._url(url))
+    this._notify(url, 'push')
+  }
+
+  replace(url, state = {}) {
+    const scrollY = window.scrollY
+    history.replaceState({ ...state, _scrollY: scrollY }, '', this._url(url))
+    this._notify(url, 'replace')
+  }
+
+  back() {
+    history.back()
+  }
+
+  forward() {
+    history.forward()
+  }
+
+  go(delta) {
+    history.go(delta)
+  }
+
+  get length() {
+    return history.length
+  }
+
+  get state() {
+    return history.state
+  }
+
+  clearState() {
+    history.replaceState(null, '', location.href)
+  }
+
+  onChange(fn) {
+    this._listeners.push(fn)
+    return () => {
+      this._listeners = this._listeners.filter(l => l !== fn)
+    }
+  }
+
+  _url(path) {
+    if (this._useHash) return `#${path}`
+    return this._basePath ? `${this._basePath}${path}` : path
+  }
+
+  _onPop(e) {
+    this._notify(this.path, 'popstate', e.state)
+  }
+
+  _notify(path, action, state) {
+    for (const fn of this._listeners) {
+      try {
+        fn({ path, action, state })
+      } catch (err) {
+        console.error('[SafaRouter] History listener error:', err)
+      }
+    }
+  }
+}

package/src/Link.js

@@ -0,0 +1,97 @@
+export class Link {
+  constructor(config = {}) {
+    this._href = config.href || '/'
+    this._children = config.children || this._href
+    this._className = config.className || ''
+    this._activeClass = config.activeClass || 'active'
+    this._router = config.router || null
+    this._attrs = config.attrs || {}
+    this._el = null
+    this._unsub = null
+  }
+
+  get href() { return this._href }
+  get element() { return this._el }
+
+  render(container) {
+    this._el = document.createElement('a')
+    if (container) {
+      if (typeof container === 'string') {
+        const el = document.querySelector(container)
+        if (el) el.appendChild(this._el)
+      } else if (container instanceof Node) {
+        container.appendChild(this._el)
+      }
+    }
+    this._el.href = this._router?.config?.useHash
+      ? `#${this._href}`
+      : this._href
+    if (this._className) this._el.className = this._className
+
+    if (typeof this._children === 'string') {
+      this._el.textContent = this._children
+    } else if (this._children instanceof Node) {
+      this._el.appendChild(this._children)
+    } else if (Array.isArray(this._children)) {
+      for (const c of this._children) {
+        if (c instanceof Node) this._el.appendChild(c)
+      }
+    }
+
+    for (const [k, v] of Object.entries(this._attrs)) {
+      this._el.setAttribute(k, v)
+    }
+
+    this._el.addEventListener('click', (e) => this._onClick(e))
+
+    if (this._router) {
+      if (this._router.config.prefetch) {
+        this._el.addEventListener('mouseenter', () => this._prefetch(), { once: true })
+      }
+      this._unsub = this._router.on('routechange', () => this._refresh())
+      this._refresh()
+    }
+
+    return this._el
+  }
+
+  _prefetch() {
+    if (this._router && this._router.prefetch) {
+      this._router.prefetch(this._href)
+    }
+  }
+
+  _onClick(e) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return
+    if (e.button !== 0) return
+    e.preventDefault()
+    if (this._router) this._router.push(this._href)
+  }
+
+  _refresh() {
+    if (!this._el || !this._router) return
+    const cur = this._router.pathname
+    const active =
+      cur === this._href ||
+      (this._href !== '/' && cur.startsWith(this._href))
+    this._el.classList.toggle(this._activeClass, active)
+  }
+
+  setHref(href) {
+    this._href = href
+    if (this._el) {
+      this._el.href = this._router?.config?.useHash ? `#${href}` : href
+    }
+  }
+
+  destroy() {
+    if (this._unsub) {
+      this._unsub()
+      this._unsub = null
+    }
+    if (this._el) {
+      this._el.remove()
+      this._el = null
+    }
+  }
+}

package/src/MiddlewareChain.js

@@ -0,0 +1,47 @@
+export class MiddlewareChain {
+  constructor() {
+    this._stack = []
+  }
+
+  use(fn) {
+    if (typeof fn !== 'function') {
+      throw new Error('Middleware must be a function')
+    }
+    this._stack.push(fn)
+    return this
+  }
+
+  async run(ctx) {
+    let i = 0
+    const next = async () => {
+      if (i >= this._stack.length) return ctx
+      try {
+        return this._stack[i++](ctx, next)
+      } catch (err) {
+        console.error('[SafaRouter] Middleware error:', err)
+        throw err
+      }
+    }
+    return next()
+  }
+
+  clear() {
+    this._stack = []
+    return this
+  }
+
+  remove(fn) {
+    this._stack = this._stack.filter(f => f !== fn)
+    return this
+  }
+
+  clone() {
+    const chain = new MiddlewareChain()
+    chain._stack = [...this._stack]
+    return chain
+  }
+
+  get length() {
+    return this._stack.length
+  }
+}

package/src/RouteMatcher.js

@@ -0,0 +1,156 @@
+import { normalizePath } from './utils.js'
+import { PARAM_PATTERNS, SEGMENT_TYPES, PATTERN_SCORES } from './constants.js'
+
+class RoutePattern {
+  constructor(pattern) {
+    this.raw = pattern
+    this.path = normalizePath(pattern)
+    this.segments = this.path === '/' ? [] : this.path.split('/').filter(Boolean)
+    this.paramNames = []
+    this._validate()
+    this._compile()
+  }
+
+  _validate() {
+    const names = new Set()
+    for (const seg of this.segments) {
+      const m = seg.match(/^\[(?:\.\.\.)?([^\]]+)\]$/)
+      if (m) {
+        if (names.has(m[1])) {
+          throw new Error(`Duplicate param name "${m[1]}" in pattern "${this.raw}"`)
+        }
+        names.add(m[1])
+      }
+    }
+  }
+
+  _compile() {
+    let regexStr = '^'
+
+    for (const seg of this.segments) {
+      if (PARAM_PATTERNS.OPTIONAL_CATCH_ALL.test(seg)) {
+        const name = seg.match(PARAM_PATTERNS.OPTIONAL_CATCH_ALL)[1]
+        this.paramNames.push(name)
+        regexStr += '(?:/(.*))?'
+      } else if (PARAM_PATTERNS.CATCH_ALL.test(seg)) {
+        const name = seg.match(PARAM_PATTERNS.CATCH_ALL)[1]
+        this.paramNames.push(name)
+        regexStr += '/(.+)'
+      } else if (PARAM_PATTERNS.DYNAMIC.test(seg)) {
+        const name = seg.match(PARAM_PATTERNS.DYNAMIC)[1]
+        this.paramNames.push(name)
+        regexStr += '/([^/]+)'
+      } else if (PARAM_PATTERNS.GROUP.test(seg)) {
+        continue
+      } else {
+        regexStr += `/${seg}`
+      }
+    }
+
+    regexStr += '/?$'
+    this.regex = new RegExp(regexStr)
+  }
+
+  get score() {
+    let s = 0
+    for (const seg of this.segments) {
+      if (PARAM_PATTERNS.OPTIONAL_CATCH_ALL.test(seg)) {
+        s += PATTERN_SCORES[SEGMENT_TYPES.OPTIONAL_CATCH_ALL]
+      } else if (PARAM_PATTERNS.CATCH_ALL.test(seg)) {
+        s += PATTERN_SCORES[SEGMENT_TYPES.CATCH_ALL]
+      } else if (PARAM_PATTERNS.DYNAMIC.test(seg)) {
+        s += PATTERN_SCORES[SEGMENT_TYPES.DYNAMIC]
+      } else if (PARAM_PATTERNS.GROUP.test(seg)) {
+        continue
+      } else {
+        s += PATTERN_SCORES[SEGMENT_TYPES.STATIC]
+      }
+    }
+    return s
+  }
+
+  describe() {
+    return {
+      pattern: this.raw,
+      path: this.path,
+      segments: this.segments,
+      paramNames: this.paramNames,
+      score: this.score,
+      regex: this.regex.source,
+    }
+  }
+
+  match(url) {
+    const p = normalizePath(url)
+    const m = p.match(this.regex)
+    if (!m) return null
+
+    const params = {}
+    let idx = 0
+    for (const name of this.paramNames) {
+      const val = m[++idx]
+      if (val !== undefined) {
+        params[name] = val.includes('/') ? val.split('/') : val
+      }
+    }
+    return params
+  }
+
+  stringify(params = {}) {
+    let path = this.raw
+    for (const [key, val] of Object.entries(params)) {
+      const v = Array.isArray(val) ? val.join('/') : String(val)
+      path = path.replace(`[[...${key}]]`, v)
+      path = path.replace(`[...${key}]`, v)
+      path = path.replace(`[${key}]`, v)
+    }
+    return normalizePath(path)
+  }
+}
+
+export class RouteMatcher {
+  constructor() {
+    this._patterns = []
+  }
+
+  static create(patterns) {
+    const matcher = new RouteMatcher()
+    if (patterns) matcher.addMultiple(patterns)
+    return matcher
+  }
+
+  add(pattern) {
+    const rp = new RoutePattern(pattern)
+    this._patterns.push(rp)
+    this._patterns.sort((a, b) => b.score - a.score)
+    return this
+  }
+
+  addMultiple(patterns) {
+    for (const p of patterns) this.add(p)
+    return this
+  }
+
+  match(url) {
+    for (const p of this._patterns) {
+      const params = p.match(url)
+      if (params !== null) {
+        return { pattern: p.raw, path: p.path, params }
+      }
+    }
+    return null
+  }
+
+  build(pattern, params) {
+    return new RoutePattern(pattern).stringify(params)
+  }
+
+  clear() {
+    this._patterns = []
+    return this
+  }
+
+  get patterns() {
+    return this._patterns.map(p => p.raw)
+  }
+}

package/src/RouteTree.js

@@ -0,0 +1,187 @@
+import { normalizePath, isRouteGroup } from './utils.js'
+
+class RouteNode {
+  constructor({ segment, fullPath, meta } = {}) {
+    this.segment = segment || ''
+    this.fullPath = fullPath || ''
+    this.meta = meta || null
+    this.page = null
+    this.layout = null
+    this.loading = null
+    this.error = null
+    this.notFound = null
+    this.children = []
+    this.parent = null
+    this.isGroup = isRouteGroup(segment)
+  }
+
+  addChild(node) {
+    node.parent = this
+    this.children.push(node)
+  }
+
+  getLayoutChain() {
+    const chain = []
+    if (this.layout) chain.push(this.layout)
+    let cur = this.parent
+    while (cur) {
+      if (cur.layout) chain.unshift(cur.layout)
+      cur = cur.parent
+    }
+    return chain
+  }
+
+  _findChild(segment) {
+    for (const c of this.children) {
+      if (c.isGroup) {
+        const nested = c._findChild(segment)
+        if (nested) return nested
+      }
+      if (c.segment === segment) return c
+    }
+    return null
+  }
+
+  _findDynamic(segment) {
+    for (const c of this.children) {
+      if (c.isGroup) {
+        const nested = c._findDynamic(segment)
+        if (nested) return nested
+      }
+      if (c.segment.startsWith('[') && c.segment.endsWith(']')) return c
+    }
+    return null
+  }
+
+  _findCatchAll() {
+    for (const c of this.children) {
+      if (c.isGroup) {
+        const nested = c._findCatchAll()
+        if (nested) return nested
+      }
+      if (c.segment.startsWith('[...') || c.segment.startsWith('[[...')) return c
+    }
+    return null
+  }
+}
+
+export class RouteTree {
+  constructor(routes) {
+    this.root = new RouteNode({ fullPath: '/' })
+    this._build(this.root, routes, '/')
+  }
+
+  static create(routes) {
+    return new RouteTree(routes)
+  }
+
+  _build(parent, routes, base) {
+    if (!routes || typeof routes !== 'object') return
+
+    for (const [key, val] of Object.entries(routes)) {
+      const isGroup = isRouteGroup(key)
+      const fp = isGroup ? normalizePath(base) : normalizePath(`${base}/${key}`)
+      const isRoot = fp === '/' || key === '/'
+
+      if (isRoot) {
+        if (typeof val === 'object' && val !== null) {
+          if (val.meta) parent.meta = val.meta
+          if (val.layout) parent.layout = val.layout
+          if (val.page) parent.page = val.page
+          if (val.loading) parent.loading = val.loading
+          if (val.error) parent.error = val.error
+          if (val.notFound) parent.notFound = val.notFound
+          if (val.children) this._build(parent, val.children, fp)
+        } else if (typeof val === 'function') {
+          parent.page = val
+        }
+        continue
+      }
+
+      const seg = isGroup ? key : key.replace(/^\//, '')
+      const node = new RouteNode({ segment: seg, fullPath: fp })
+
+      if (typeof val === 'object' && val !== null) {
+        if (val.meta) node.meta = val.meta
+        if (val.layout) node.layout = val.layout
+        if (val.page) node.page = val.page
+        if (val.loading) node.loading = val.loading
+        if (val.error) node.error = val.error
+        if (val.notFound) node.notFound = val.notFound
+        if (val.children) this._build(node, val.children, fp)
+      } else if (typeof val === 'function') {
+        node.page = val
+      }
+
+      parent.addChild(node)
+    }
+  }
+
+  resolve(pathname) {
+    const segs = normalizePath(pathname).split('/').filter(Boolean)
+    return this._resolve(this.root, segs, 0, {})
+  }
+
+  _resolve(node, segs, idx, params) {
+    if (idx >= segs.length) {
+      if (node.page) {
+        return { node, params, layouts: node.getLayoutChain() }
+      }
+      const ca = node._findCatchAll()
+      if (ca && ca.page) {
+        return { node: ca, params: { ...params }, layouts: ca.getLayoutChain() }
+      }
+      return null
+    }
+
+    const seg = segs[idx]
+
+    const exact = node._findChild(seg)
+    if (exact) {
+      const res = this._resolve(exact, segs, idx + 1, { ...params })
+      if (res) return res
+    }
+
+    const dyn = node._findDynamic(seg)
+    if (dyn) {
+      const name = dyn.segment.replace(/^\[|\]$/g, '')
+      const res = this._resolve(dyn, segs, idx + 1, {
+        ...params,
+        [name]: seg,
+      })
+      if (res) return res
+    }
+
+    const ca = node._findCatchAll()
+    if (ca) {
+      const name = ca.segment.replace(/^\[\.\.\.|\]\]?$/g, '')
+      return {
+        node: ca,
+        params: { ...params, [name]: segs.slice(idx) },
+        layouts: ca.getLayoutChain(),
+      }
+    }
+
+    return null
+  }
+
+  flatten() {
+    const result = []
+    const walk = (node) => {
+      if (node.page) {
+        result.push({ path: node.fullPath, page: node.page, meta: node.meta })
+      }
+      for (const child of node.children) walk(child)
+    }
+    walk(this.root)
+    return result
+  }
+
+  find(pathname) {
+    return this.resolve(pathname)
+  }
+
+  getRoute(pathname) {
+    return this.resolve(pathname)
+  }
+}