include import when transpiling frontend files

src/utils.tsx

@@ -8,6 +8,8 @@ export function css(strings: TemplateStringsArray, ...values: any[]) {
   }} />
 }
 
+const transpiler = new Bun.Transpiler({ loader: 'tsx' })
+
 // template literal tag for inline JS. transpiles and returns a <script> tag
 export function js(strings: TemplateStringsArray, ...values: any[]) {
   return <script dangerouslySetInnerHTML={{
@@ -137,21 +139,25 @@ export function weightedRand(): number {
   return numbers[numbers.length - 1]!
 }
 
-const transpiler = new Bun.Transpiler({ loader: 'tsx' })
 const transpileCache: Record<string, string> = {}
 
-// Transpile the frontend *.ts file at `path` to JavaScript.
+// transpile frontend ts to js
 export async function transpile(path: string): Promise<string> {
   const { mtime } = await stat(path)
   const key = `${path}?${mtime}`
 
   let cached = transpileCache[key]
   if (!cached) {
-    const code = await Bun.file(path).text()
-    cached = transpiler.transformSync(code)
-    cached = cached.replaceAll(/\bjsxDEV_?\w*\(/g, "jsx(")
-    cached = cached.replaceAll(/\bFragment_?\w*,/g, "Fragment,")
+    const result = await Bun.build({
+      entrypoints: [path],
+      format: 'esm',
+      minify: false,
+      sourcemap: 'none',
+    })
 
+    if (!result.outputs[0]) throw new Error(`Failed to build ${path}`)
+
+    cached = await result.outputs[0].text()
     transpileCache[key] = cached
   }