example/src/pages/js-test.tsx

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

src/frontend.ts

@@ -1,14 +1,14 @@
-import { AsyncLocalStorage } from 'async_hooks'
-
-export const fnStorage = new AsyncLocalStorage<{ fns: string[] }>()
+let funcs: string[] = []
 
 // Designate a function in a .tsx file as frontend
 export function frontend(code: Function) {
-  const store = fnStorage.getStore()
-  store?.fns.push(code.toString())
+  funcs.push(code.toString())
 }
 
 export function feFunctions(): string[] {
-  const store = fnStorage.getStore()
-  return store?.fns ?? []
+  return funcs
+}
+
+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, fnStorage } from './frontend'
+import { feFunctions, clearFeFunctions } from './frontend'
 
 const SHOW_HTTP_LOG = true
 const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
@@ -90,7 +90,6 @@ export class Hype<
 
     // serve frontend js
     this.use('*', async (c, next) => {
-      await fnStorage.run({ fns: [] }, async () => {
       await next()
 
       const contentType = c.res.headers.get('content-type')
@@ -102,10 +101,10 @@ export class Hype<
       const res = c.res.clone()
       const html = await res.text()
       const newHtml = html.replace('</body>', `<script>${fns.join('\n')}</script></body>`)
+      clearFeFunctions()
 
       c.res = new Response(newHtml, c.res)
     })
-    })
 
     // css reset
     this.get('/css/reset.css', async c => new Response(CSS_RESET, { headers: { 'Content-Type': 'text/css' } }))