JSPM

import { Router } from 'itty-router'

// create a Router
const router = Router()

// basic GET routs
router.get('/todos/:id', console.log)
  
// first match always wins, so be careful with order of registering routes
router
  .get('/todos/oops', () => console.log('you will never see this'))
  .get('/chainable', () => console.log('because why not?')) // this may be dropped to save characters...
  .get('/optional/:support?', () => console.log('optionals!')) // will match /optional and /optional/14 both

// works with POST, DELETE, PATCH, etc
router.post('/todos', () => console.log('posted a todo'))

// ...or any other method we haven't yet thought of (thanks to @mvasigh implementation of Proxy <3)
router.future('/todos', () => console.log(`this caught using the FUTURE method!`))

// then handle a request!
router.handle({ method: 'GET', url: 'https://foo.com/todos/13?foo=bar' })
// {
//   method: 'GET',
//   url: 'http://foo.com/todos/13?foo=bar',
//   path: '/todos/13',
//   index: 0,
//   params: { id: '13' },
//   query: { foo: 'bar' }
// }

addEventListener('fetch', ({ request }) => router.handle(request))

const Router = () => new Proxy({}, {
  get: (obj, prop) => prop === 'handle'
    ? (req) => {
      let { pathname: path, searchParams } = new URL(req.url)
      for (let [route, handler] of obj[req.method.toLowerCase()] || []) {
        if (hit = path.match(route)) {
          return handler({
            ...req,
            params: hit.groups,
            path,
            query: Object.fromEntries(searchParams.entries()) 
          })
        }
      }
    } 
    : (path, handler) => 
        (obj[prop] = obj[prop] || []).push([path.replace(/(\/:([^\/\?]+)(\?)?)/gi, '/$3(?<$2>[^\/]+)$3'), handler]) && obj
})