feat: various

api/core/middleware.ts

@@ -8,16 +8,6 @@ import { sessions } from "~/api/core/sessions.ts"
 import { env } from '~/api/env.ts'
 
 const DEBUG = false
-
-export const watcher: Handler = () => {
-  const body = new ReadableStream()
-  return new Response(body, {
-    headers: {
-      'content-type': 'text/event-stream',
-    },
-  })
-}
-
 const ORIGIN_REGEX = /(https:\/\/[^\/\n]+\.deno\.dev)/g
 
 export const cors: Handler = ctx => {
@@ -41,6 +31,15 @@ export const cors: Handler = ctx => {
   })
 }
 
+export const watcher: Handler = () => {
+  const body = new ReadableStream()
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/event-stream',
+    },
+  })
+}
+
 export const logger: Handler = ctx => {
   const before = new Date()
   ctx.done.then(res => {

api/core/router.ts

@@ -9,7 +9,7 @@ const headers: Record<string, string> = {
   'cross-origin-opener-policy': 'same-origin',
   'cross-origin-embedder-policy': 'require-corp',
   'access-control-allow-methods': 'GET, HEAD, OPTIONS, POST, PUT',
-  'access-control-allow-headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization',
+  'access-control-allow-headers': 'Origin, X-Requested-With, Content-Type, Referer, Accept, Authorization',
   'access-control-allow-credentials': 'true',
 }
 

lib/caching-router.ts

@@ -0,0 +1,9 @@
+export function CachingRouter(routes: Record<string, () => JSX.Element>) {
+  const cache = new Map<string, JSX.Element>()
+  return function (pathname: string) {
+    if (!(pathname in routes)) return
+    let el = cache.get(pathname)
+    if (!el) cache.set(pathname, el = routes[pathname]())
+    return el
+  }
+}

src/pages/App.tsx

@@ -1,5 +1,6 @@
 import { Sigui } from 'sigui'
 import { dom } from 'utils'
+import { CachingRouter } from '~/lib/caching-router.ts'
 import { Header } from '~/src/comp/Header.tsx'
 import { Logout } from '~/src/comp/Logout.tsx'
 import { ResetPassword } from '~/src/comp/ResetPassword.tsx'
@@ -23,11 +24,43 @@ export function App() {
 
   const info = $({
     bg: 'transparent',
-
     canvasWidth: 500,
     canvasHeight: 500,
   })
 
+  const router = CachingRouter({
+    '/': () => <Home />,
+    '/chat': () => <Chat />,
+    '/canvas': () => <Canvas width={info.$.canvasWidth} height={info.$.canvasHeight} />,
+    '/asc': () => <AssemblyScript />,
+    '/qrcode': () => <QrCode />,
+    '/about': () => <About />,
+    '/verify-email': () => <VerifyEmail />,
+    '/reset-password': () => <ResetPassword />,
+    '/oauth/popup': () => {
+      const provider = state.url.searchParams.get('provider')!
+      const url = new URL(`${state.apiUrl}oauth/start`)
+      url.searchParams.set('provider', provider)
+      location.href = url.href
+      return <div />
+    },
+    '/oauth/register': () => <OAuthRegister />,
+    '/oauth/cancel': () => {
+      localStorage.oauth = 'cancel' + Math.random()
+      return <div>OAuth login cancelled</div>
+    },
+    '/oauth/complete': () => {
+      // hack: triggering a localStorage write is how we communicate
+      // to the parent window that we're done.
+      localStorage.oauth = 'complete' + Math.random()
+      // window.close()
+      return <div>
+        Successfully logged in.
+        You may now <button onclick={() => window.close()}>close this window</button>.
+      </div>
+    }
+  })
+
   $.fx(() => [
     dom.on(window, 'error', ev => {
       state.toastMessages = [...state.toastMessages, (ev as unknown as ErrorEvent).error]
@@ -52,66 +85,18 @@ export function App() {
 
       <div class="flex items-center gap-2">
         <Link href={() => `/${state.user?.nick ?? ''}`}>{() => state.user?.nick}</Link>
-        <Logout then={() => go('/')} />
+        {() => state.user ? <Logout then={() => go('/')} /> : <div />}
       </div>
     </Header>
 
-    <div class="p-3">
+    <div class="p-3.5">
       {() => {
         if (state.user === undefined) return <div>Loading...</div>
 
-        switch (state.pathname) {
-          case '/':
-            return <Home />
-
-          case '/chat':
-            return <Chat />
-
-          case '/canvas':
-            return <Canvas
-              width={info.$.canvasWidth}
-              height={info.$.canvasHeight}
-            />
-
-          case '/asc':
-            return <AssemblyScript />
-
-          case '/qrcode':
-            return <QrCode />
-
-          case '/about':
-            return <About />
-
-          case '/verify-email':
-            return <VerifyEmail />
-
-          case '/reset-password':
-            return <ResetPassword />
-
-          case '/oauth/popup': {
-            const provider = state.url.searchParams.get('provider')!
-            const url = new URL(`${state.apiUrl}oauth/start`)
-            url.searchParams.set('provider', provider)
-            location.href = url.href
-            return <div />
-          }
-
-          case '/oauth/register':
-            return <OAuthRegister />
-
-          case '/oauth/cancel':
-            localStorage.oauth = 'cancel' + Math.random()
-            return <div>OAuth login cancelled</div>
+        const el = router(state.pathname)
+        if (el) return el
 
-          case '/oauth/complete':
-            // Hack: triggering a localStorage write we listen to
-            // window.onstorage and we can close the popup automatically.
-            localStorage.oauth = 'complete' + Math.random()
-            return <div>
-              Successfully logged in.
-              You may now <button onclick={() => window.close()}>close this window</button>.
-            </div>
-        }
+        return <div>404 Not found</div>
       }}
     </div>
   </main>

src/pages/Chat/Chat.tsx

@@ -104,7 +104,7 @@ export function Chat() {
       .catch(console.error)
   })
 
-  return <div class="h-[calc(100vh-4rem)] flex gap-4">
+  return <div class="h-[calc(100vh-4.5rem)] flex gap-4">
     <Channels />
     <Messages />
     <Users />

src/pages/Home.tsx

@@ -20,7 +20,7 @@ export function Home() {
           <OAuthLogin />
         </div>
         :
-        <div class="flex gap-2">
+        <div class="flex flex-col">
           {state.user.isAdmin && <a href="/admin/">Admin</a>}
           <Link href="/chat">Chat</Link>
           <Link href="/canvas">Canvas</Link>

vendor/vite-plugin-coop-coep.ts

@@ -5,8 +5,8 @@ export function ViteCoopCoep(): Plugin {
     name: 'coop-coep',
     configureServer(server) {
       server.middlewares.use((_req, res, next) => {
-        res.setHeader('Cross-Origin-Opener-Policy', 'same-origin')
-        res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp')
+        res.setHeader('cross-origin-opener-policy', 'same-origin')
+        res.setHeader('cross-origin-embedder-policy', 'require-corp')
         next()
       })
     },