threadsafe frontend()

example/src/pages/js-test.tsx

@@ -6,6 +6,6 @@ fe(function test() {
 
 export default () => (
   <section>
-    <a href="#" click="test()">test</a>
+    <a href="#" onclick="test()">test</a>
   </section>
 )

src/frontend.ts

@@ -1,14 +1,14 @@
-let funcs: string[] = []
+import { AsyncLocalStorage } from 'async_hooks'
+
+export const fnStorage = new AsyncLocalStorage<{ fns: string[] }>()
 
 // Designate a function in a .tsx file as frontend
 export function frontend(code: Function) {
-  funcs.push(code.toString())
+  const store = fnStorage.getStore()
+  store?.fns.push(code.toString())
 }
 
 export function feFunctions(): string[] {
-  return funcs
+  const store = fnStorage.getStore()
-}
+  return store?.fns ?? []
-
-export function clearFeFunctions() {
-  funcs.length = 0
 }

src/index.tsx

@@ -6,7 +6,7 @@ import color from 'kleur'
 
 import { transpile } from './utils'
 import defaultLayout from './layout'
-import { feFunctions, clearFeFunctions } from './frontend'
+import { feFunctions, fnStorage } from './frontend'
 
 const SHOW_HTTP_LOG = true
 const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
@@ -90,20 +90,21 @@ export class Hype<
 
     // serve frontend js
     this.use('*', async (c, next) => {
-      await next()
+      await fnStorage.run({ fns: [] }, async () => {
+        await next()
 
-      const contentType = c.res.headers.get('content-type')
+        const contentType = c.res.headers.get('content-type')
-      if (!contentType?.includes('text/html')) return
+        if (!contentType?.includes('text/html')) return
 
-      const fns = feFunctions()
+        const fns = feFunctions()
-      if (!fns.length) return
+        if (!fns.length) return
 
-      const res = c.res.clone()
+        const res = c.res.clone()
-      const html = await res.text()
+        const html = await res.text()
-      const newHtml = html.replace('</body>', `<script>${fns.join('\n')}</script></body>`)
+        const newHtml = html.replace('</body>', `<script>${fns.join('\n')}</script></body>`)
-      clearFeFunctions()
 
-      c.res = new Response(newHtml, c.res)
+        c.res = new Response(newHtml, c.res)
+      })
     })
 
     // css reset