// import React from 'react'
// import ReactDOMServer from 'react-dom/server'
import { contentType } from 'media-types'
import { Router } from 'oak'
// import App from '~/client/App.tsx'
async function createClientBundle() {
const {files} = await Deno.emit('server/client.tsx', {
bundle: 'module',
importMapPath: 'import_map.json',
compilerOptions: {
lib: ["dom", "dom.iterable", "esnext"],
allowJs: true,
jsx: "react",
strictPropertyInitialization: false,
},
})
return files
}
const bundle = await createClientBundle()
function getBundleFile(path: string) {
return bundle[`deno:///${path}`]
}
function getAssetFile(file: string): Uint8Array | null {
try {
const asset = Deno.readFileSync(`assets/${file}`)
return asset
} catch {
return null
}
}
const html = `
Deno React Web Starter
`
const staticRouter = new Router()
// handle static routes by proxying to web resources
// https://deno.com/deploy/docs/serve-static-assets
staticRouter
.get('/', (ctx) => {
ctx.response.body = html
})
.get('/styles.css', (ctx) => {
const styles = Deno.readTextFileSync('client/styles.css')
const contentTypeValue = contentType('styles.css')
const headers = new Headers(ctx.response.headers)
if (contentTypeValue) {
headers.set('Content-Type', contentTypeValue)
}
ctx.response.headers = headers
ctx.response.body = styles
})
.get('/assets/:pathname', async (ctx, next) => {
const assetPath = ctx.params.pathname
if (!assetPath) {
return await next()
}
const file = getAssetFile(assetPath)
if (!file) {
return await next()
}
const filePathParts = assetPath.split('/')
const contentTypeValue = contentType(filePathParts[filePathParts.length - 1])
const headers = new Headers(ctx.response.headers)
if (contentTypeValue) {
headers.set('Content-Type', contentTypeValue)
}
ctx.response.headers = headers
ctx.response.body = file
})
.get('/:pathname', async (ctx, next) => {
const pathname = ctx.params.pathname
if (!pathname) {
return await next()
}
const file = getBundleFile(pathname)
if (!file) {
return await next()
}
// get just the last bit so we can determine the correct filetype
// contentType from media-types@v2.10.0 checks path.includes('/')
const filePathParts = pathname.split('/')
const contentTypeValue = contentType(filePathParts[filePathParts.length - 1])
const headers = new Headers(ctx.response.headers)
if (contentTypeValue) {
headers.set('Content-Type', contentTypeValue)
}
ctx.response.headers = headers
if (pathname.endsWith('.js')) {
ctx.response.type = 'application/javascript'
}
ctx.response.body = file
})
export default staticRouter