breaking: combine params and query of RouterURL

Author: ije

framework/core/routing.ts

@@ -131,7 +131,7 @@ export class Routing {
     let locale = this._defaultLocale
     let pathname = decodeURI(url.pathname)
     let pagePath = ''
-    let params: Record<string, string> = {}
+    let params = new URLSearchParams()
     let nestedModules: RouteModule[] = []
 
     if (pathname !== '/' && this._locales.length > 0) {
@@ -153,19 +153,25 @@ export class Routing {
           nestedModules.push(c.module)
         }
         pagePath = path
-        params = p
+        Object.entries(p).forEach(([key, value]) => {
+          params.append(key, value)
+        })
         return false
       }
     }, true)
 
+    for (const name of url.searchParams.keys()) {
+      const values = url.searchParams.getAll(name)
+      values.forEach(value => params.append(name, value))
+    }
+
     return [
       {
         baseURL: this._baseURL,
         locale,
         pathname,
         pagePath,
         params,
-        query: url.searchParams,
         push: (url: string) => redirect(url),
         replace: (url: string) => redirect(url, true),
       },
@@ -238,8 +244,7 @@ export function createBlankRouterURL(baseURL = '/', locale = 'en'): RouterURL {
     locale,
     pagePath: '',
     pathname: '/',
-    params: {},
-    query: new URLSearchParams(),
+    params: new URLSearchParams(),
     push: () => void 0,
     replace: () => void 0,
   }

framework/core/routing_test.ts

@@ -131,47 +131,53 @@ Deno.test(`routing`, () => {
     const [router, nestedModules] = routing.createRouter({ pathname: '/blog/hello-world' })
     assertEquals(router.pathname, '/blog/hello-world')
     assertEquals(router.pagePath, '/blog/[slug]')
-    assertEquals(router.params, { slug: 'hello-world' })
+    assertEquals(router.params.get('slug'), 'hello-world')
     assertEquals(nestedModules.map(m => m.url), ['/pages/blog.tsx', '/pages/blog/[slug].tsx'])
   }
 
   {
     const [router, nestedModules] = routing.createRouter({ pathname: '/user' })
     assertEquals(router.pathname, '/user')
     assertEquals(router.pagePath, '/user')
-    assertEquals(router.params, {})
+    assertEquals(nestedModules.map(m => m.url), ['/pages/user.tsx', '/pages/user/index.tsx'])
+  }
+
+  {
+    const [router, nestedModules] = routing.createRouter({ pathname: '/user?name=aleph' })
+    assertEquals(router.pathname, '/user')
+    assertEquals(router.pagePath, '/user')
+    assertEquals(router.params.get('name'), 'aleph')
     assertEquals(nestedModules.map(m => m.url), ['/pages/user.tsx', '/pages/user/index.tsx'])
   }
 
   {
     const [router, nestedModules] = routing.createRouter({ pathname: '/user/projects' })
     assertEquals(router.pathname, '/user/projects')
     assertEquals(router.pagePath, '/user/[...all]')
-    assertEquals(router.params, { all: 'projects' })
+    assertEquals(router.params.get('all'), 'projects')
     assertEquals(nestedModules.map(m => m.url), ['/pages/user.tsx', '/pages/user/[...all].tsx'])
   }
 
   {
     const [router, nestedModules] = routing.createRouter({ pathname: '/user/settings/profile' })
     assertEquals(router.pathname, '/user/settings/profile')
     assertEquals(router.pagePath, '/user/[...all]')
-    assertEquals(router.params, { all: 'settings/profile' })
+    assertEquals(router.params.get('all'), 'settings/profile')
     assertEquals(nestedModules.map(m => m.url), ['/pages/user.tsx', '/pages/user/[...all].tsx'])
   }
 
   {
     const [router, nestedModules] = routing.createRouter({ pathname: '/user/settings/security' })
     assertEquals(router.pathname, '/user/settings/security')
     assertEquals(router.pagePath, '/user/[...all]')
-    assertEquals(router.params, { all: 'settings/security' })
+    assertEquals(router.params.get('all'), 'settings/security')
     assertEquals(nestedModules.map(m => m.url), ['/pages/user.tsx', '/pages/user/[...all].tsx'])
   }
 
   {
     const [router, nestedModules] = routing.createRouter({ pathname: '/null' })
     assertEquals(router.pathname, '/null')
     assertEquals(router.pagePath, '')
-    assertEquals(router.params, {})
     assertEquals(nestedModules.map(m => m.url), [])
   }
 })

server/api.ts

@@ -8,8 +8,7 @@ import type { APIRequest, ServerRequest, ServerResponse } from '../types.ts'
 
 export class Request implements APIRequest {
   #req: ServerRequest
-  #params: Record<string, string>
-  #query: URLSearchParams
+  #params: URLSearchParams
   #cookies: ReadonlyMap<string, string>
   #resp = {
     status: 200,
@@ -19,10 +18,9 @@ export class Request implements APIRequest {
     done: false
   }
 
-  constructor(req: ServerRequest, params: Record<string, string>, query: URLSearchParams) {
+  constructor(req: ServerRequest, params: URLSearchParams) {
     this.#req = req
     this.#params = params
-    this.#query = query
     const cookies = new Map()
     this.headers.get('cookie')?.split(';').forEach(cookie => {
       const p = cookie.trim().split('=')
@@ -65,14 +63,10 @@ export class Request implements APIRequest {
     return this.#req.respond(r)
   }
 
-  get params(): Record<string, string> {
+  get params(): URLSearchParams {
     return this.#params
   }
 
-  get query(): URLSearchParams {
-    return this.#query
-  }
-
   get cookies(): ReadonlyMap<string, string> {
     return this.#cookies
   }

server/app.ts

@@ -473,7 +473,7 @@ export class Application implements ServerApplication {
       return null
     }
 
-    const cacheKey = router.pathname + router.query.toString()
+    const cacheKey = loc.pathname + (loc.search || '')
     const [_, data] = await this.#renderer.useCache(pagePath, cacheKey, async () => {
       return await this.#renderer.renderPage(router, nestedModules)
     })
@@ -485,7 +485,7 @@ export class Application implements ServerApplication {
     const [router, nestedModules] = this.#pageRouting.createRouter(loc)
     const { pagePath } = router
     const status = pagePath !== '' ? 200 : 404
-    const path = router.pathname + router.query.toString()
+    const path = loc.pathname + (loc.search || '')
 
     if (!this.isSSRable(loc.pathname)) {
       const [html] = await this.#renderer.useCache('-', 'spa-index', async () => {

server/localproxy.ts

@@ -17,7 +17,7 @@ export async function localProxy(cwd: string, port: number) {
   log.debug(`Proxy https://deno.land/x/aleph on http://localhost:${port}`)
   for await (const r of s) {
     const url = new URL('http://localhost' + r.url)
-    const resp = new Request(r, {}, url.searchParams)
+    const resp = new Request(r, url.searchParams)
     const filepath = join(cwd, url.pathname)
     try {
       const info = await Deno.lstat(filepath)

server/server.ts

@@ -31,7 +31,7 @@ export class Server {
     const { baseUrl, rewrites } = app.config
     const url = rewriteURL(r.url, baseUrl, rewrites)
     const pathname = decodeURI(url.pathname)
-    const req = new Request(r, {}, url.searchParams)
+    const req = new Request(r, url.searchParams)
 
     // set custom headers
     for (const key in app.config.headers) {
@@ -152,10 +152,10 @@ export class Server {
         const route = app.getAPIRoute({ pathname, search: url.searchParams.toString() })
         if (route !== null) {
           try {
-            const [{ params, query }, { jsFile, hash }] = route
+            const [{ params }, { jsFile, hash }] = route
             const { default: handle } = await import(`file://${jsFile}#${hash.slice(0, 6)}`)
             if (util.isFunction(handle)) {
-              await handle(new Request(req, params, query))
+              await handle(new Request(req, params))
             } else {
               req.status(500).json({ status: 500, message: 'bad api handler' })
             }

types.ts

@@ -102,11 +102,10 @@ export interface ServerApplication {
   readonly mode: 'development' | 'production'
   readonly config: Required<Config>
   addModule(url: string, options?: { code?: string }): Promise<void>
-  injectCode(stage: 'compilation' | 'hmr' | 'ssr', transform: TransformFn): void
-}
-
-export type TransformFn = {
-  (url: string, code: string): string
+  injectCode(
+    stage: 'compilation' | 'hmr' | 'ssr',
+    transform: (url: string, code: string) => string
+  ): void
 }
 
 /**
@@ -136,8 +135,7 @@ export interface ServerResponse {
  * An interface extends the `ServerRequest` for API requests.
  */
 export interface APIRequest extends ServerRequest {
-  readonly params: Record<string, string>
-  readonly query: URLSearchParams
+  readonly params: URLSearchParams
   readonly cookies: ReadonlyMap<string, string>
   /** `readBody` reads the body to an object in bytes, string, json, or multipart form data. */
   readBody(type?: 'raw'): Promise<Uint8Array>
@@ -181,8 +179,7 @@ export type RouterURL = {
   readonly locale: string
   readonly pathname: string
   readonly pagePath: string
-  readonly params: Record<string, string>
-  readonly query: URLSearchParams
+  readonly params: URLSearchParams
   push(url: string): void
   replace(url: string): void
 }