add frontend()

example/src/css/main.css

@@ -33,4 +33,8 @@ h1 {
   100% {
     background-position: 100% 50%;
   }
+}
+
+ul {
+  list-style-type: none;
 }

example/src/pages/index.tsx

@@ -4,6 +4,10 @@ export default () => (
     <h1>Hello, world!</h1>
     <p>Welcome to <span class="hype">hype</span>!</p>
     <p>If you're seeing this, something definitely went right.</p>
-    <a href="/about">About This Website</a>
+
+    <ul>
+      <li><a href="/about">About This Website</a></li>
+      <li><a href="/js-test">JS Test</a></li>
+    </ul>
   </section>
 )

example/src/pages/js-test.tsx

@@ -0,0 +1,11 @@
+import { frontend as fe } from 'hype'
+
+fe(function test() {
+  alert('ding dong')
+})
+
+export default () => (
+  <section>
+    <a href="#" click="test()">test</a>
+  </section>
+)

src/frontend.ts

@@ -0,0 +1,10 @@
+let funcs: string[] = []
+
+// Designate a function in a .tsx file as frontend
+export function frontend(code: Function) {
+  funcs.push(code.toString())
+}
+
+export function feFunctions(): string[] {
+  return funcs
+}

src/index.tsx

@@ -6,12 +6,14 @@ import color from 'kleur'
 
 import { transpile } from './utils'
 import defaultLayout from './layout'
+import { feFunctions } from './frontend'
 
 const SHOW_HTTP_LOG = true
 const CSS_RESET = await Bun.file(join(import.meta.dir, '/reset.css')).text()
 const PICO_CSS = await Bun.file(join(import.meta.dir, '/pico.css')).text()
 
 export * from './utils'
+export { frontend } from './frontend'
 
 export type HypeProps = {
   pico?: boolean
@@ -76,14 +78,33 @@ export class Hype<
       this.use('*', async (c, next) => {
         await next()
 
-        if (c.res.headers.get('content-type')?.includes('text/html')) {
+        const contentType = c.res.headers.get('content-type')
-          const html = await c.res.text()
+        if (!contentType?.includes('text/html')) return
-          const formatted = formatHTML(html)
+
-          c.res = new Response(formatted, c.res)
+        const res = c.res.clone()
-        }
+        const html = await res.text()
+        const formatted = formatHTML(html)
+        c.res = new Response(formatted, c.res)
       })
     }
 
+    // serve frontend js
+    this.use('*', async (c, next) => {
+      await next()
+
+      const contentType = c.res.headers.get('content-type')
+      if (!contentType?.includes('text/html')) return
+
+      const fns = feFunctions()
+      if (!fns.length) return
+
+      const res = c.res.clone()
+      const html = await res.text()
+      const newHtml = html.replace('</body>', `<script>${fns.join('\n')}</script></body>`)
+
+      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' } }))