Merge pull request #13 from AkifumiSato/v0.2.2

support dynamic routing join async callback

README.md

@@ -43,17 +43,34 @@ const dexr = createDexr()
 await dexr.addPage('/', '/App.tsx')
 ```
 
-#### .addPage<T extends {}, U extends {}, P extends {}>(route: string, componentPath: string, renderProps?: (params: T, query: U) => P): Promise<void>
+#### .addPage<T extends {}, U extends {}, P extends {}>(route: string, componentPath: string, renderProps?: (params: T, query: U) => Promise<P>): Promise<void>
 Register the route and app component path.
 ```typescript
+import { delay } from 'https://deno.land/std@0.57.0/async/delay.ts'
 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 }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => ({
+await dexr.addPage<{ id: string }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => Promise.resolve({
   id: params.id,
   foo: query.foo ?? '[default]',
 }))
+
+type BookParams = {
+  id: string
+}
+
+type BookQuery = {
+  foo?: string
+}
+
+await dexr.addPage<BookParams, BookQuery, BookProps>('/book_async/:id', '/Book.tsx', async (params, query) => {
+  await delay(1000) // async callback
+  return {
+    id: params.id,
+    foo: query.foo ?? '[default]',
+  }
+})
 ```
 
 #### .run(option?: Option): Promise<void>

example/hello-world/server.ts

@@ -1,3 +1,4 @@
+import { delay } from 'https://deno.land/std@0.57.0/async/delay.ts'
 import { createRenderer } from '../../renderer.tsx'
 import { createDexr } from '../../mod.ts'
 import { Props as BookProps } from './Book.tsx'
@@ -7,8 +8,24 @@ const renderer = createRenderer().useHead(Head)
 
 const dexr = createDexr().useRenderer(renderer)
 await dexr.addPage('/', './App.tsx')
-await dexr.addPage<{ id: string }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => ({
+await dexr.addPage<{ id: string }, { foo?: string }, BookProps>('/book/:id', '/Book.tsx', (params, query) => Promise.resolve({
   id: params.id,
   foo: query.foo ?? '[default]',
 }))
+
+type BookParams = {
+  id: string
+}
+
+type BookQuery = {
+  foo?: string
+}
+
+await dexr.addPage<BookParams, BookQuery, BookProps>('/book_async/:id', '/Book.tsx', async (params, query) => {
+  await delay(1000) // async callback
+  return {
+    id: params.id,
+    foo: query.foo ?? '[default]',
+  }
+})
 await dexr.run()

mod.ts

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