Merge pull request #11 from AkifumiSato/v0.2.1

support query params

README.md

@@ -43,15 +43,16 @@ const dexr = createDexr()
 await dexr.addPage('/', '/App.tsx')
 ```
 
-#### .addPage<T extends {}, U extends {}>(route: string, componentPath: string, renderProps?: (params: T) => U): Promise<void>
+#### .addPage<T extends {}, U extends {}, P extends {}>(route: string, componentPath: string, renderProps?: (params: T, query: U) => P): Promise<void>
 Register the route and app component path.
 ```typescript
 import { createDexr } from 'https://deno.land/x/dexr/mod.ts'
 import { Props as BookProps } from './Book.tsx'
 // --snip--
 const dexr = createDexr()
-await dexr.addPage<{ id: string }, BookProps>('/book/:id', '/Book.tsx', (params) => ({
+await dexr.addPage<{ id: string }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => ({
   id: params.id,
+  foo: query.foo ?? '[default]',
 }))
 ```
 

example/hello-world/Book.tsx

@@ -3,11 +3,13 @@ import React from 'https://dev.jspm.io/react@16.13.1'
 
 export type Props = {
   id: string
+  foo: string
 }
 
-const Book: React.FC<Props> = ({ id }) => (
+const Book: React.FC<Props> = ({ id, foo }) => (
   <div>
-    The book id is { id }
+    The book id is { id }<br/><br/>
+    &foo is { foo }
   </div>
 )
 

example/hello-world/server.ts

@@ -7,7 +7,8 @@ const renderer = createRenderer().useHead(Head)
 
 const dexr = createDexr().useRenderer(renderer)
 await dexr.addPage('/', './App.tsx')
-await dexr.addPage<{ id: string }, BookProps>('/book/:id', '/Book.tsx', (params) => ({
+await dexr.addPage<{ id: string }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => ({
   id: params.id,
+  foo: query.foo ?? '[default]',
 }))
 await dexr.run()

mod.ts

@@ -33,7 +33,7 @@ export class DexrApp {
     return this
   }
 
-  async addPage<T extends {}, U extends {}>(route: string, componentPath: string, renderProps?: (params: T) => U) {
+  async addPage<T extends {}, U extends {}, P extends {}>(route: string, componentPath: string, renderProps?: (params: T, query: U) => P) {
     const fullPath = join(Deno.cwd(), componentPath)
     const App = (await import(`file://${ fullPath }`)).default
 
@@ -47,8 +47,8 @@ export class DexrApp {
       context.response.headers = new Headers({
         'content-type': 'text/html; charset=UTF-8',
       })
-      const query = getQuery(context, { mergeParams: true }) as T
-      const appProps = renderProps ? renderProps(query) : undefined
+      const query = getQuery(context, { mergeParams: false }) as U
+      const appProps = renderProps ? renderProps(context.params as T, query) : undefined
       context.response.body = this.#renderer.render(App, componentPath, appProps)
     })
   }