fix(dev-server): bundle browser TypeScript assets

Author: chrisbbreuer

packages/bun-plugin/src/serve.ts

@@ -259,6 +259,65 @@ const staticContentTypes: Record<string, string> = {
   eot: 'application/vnd.ms-fontobject',
 }
 
+const bundledAssetExtensions = new Set(['ts', 'tsx', 'mts', 'cts'])
+
+function isBundledAssetExtension(ext: string | undefined): ext is string {
+  return Boolean(ext && bundledAssetExtensions.has(ext))
+}
+
+function getAssetExtension(pathname: string): string | undefined {
+  return pathname.split('.').pop()?.toLowerCase()
+}
+
+function isSafeAssetPath(pathname: string): boolean {
+  if (pathname.includes('\0'))
+    return false
+
+  return !pathname
+    .split('/')
+    .some(segment => segment === '..')
+}
+
+function assetRequestPaths(pathname: string): string[] {
+  const paths = [
+    pathname,
+    pathname.replace(/^\/assets\//, '/resources/assets/'),
+    pathname.replace(/^\/resources\/assets\//, '/assets/'),
+  ]
+
+  return [...new Set(paths)]
+}
+
+export async function bundleBrowserAsset(entrypoint: string): Promise<Response> {
+  const result = await Bun.build({
+    entrypoints: [entrypoint],
+    format: 'esm',
+    minify: false,
+    packages: 'bundle',
+    sourcemap: 'inline',
+    target: 'browser',
+  })
+
+  if (!result.success) {
+    const message = result.logs.map(log => log.message).join('\n') || 'Unable to build TypeScript asset'
+
+    return new Response(message, {
+      status: 500,
+      headers: {
+        'Content-Type': 'text/plain; charset=utf-8',
+        'Cache-Control': 'no-cache',
+      },
+    })
+  }
+
+  return new Response(await result.outputs[0].text(), {
+    headers: {
+      'Content-Type': 'application/javascript',
+      'Cache-Control': 'no-cache',
+    },
+  })
+}
+
 /**
  * Start the STX development server
  * @param options Server options with patterns and port
@@ -410,7 +469,8 @@ export async function serve(options: ServeOptions): Promise<void> {
         // cached copy and re-fetches.
         const isCss = f.endsWith('.css')
         const isAsset = isCss
-          || f.endsWith('.js') || f.endsWith('.ts')
+          || f.endsWith('.js') || f.endsWith('.ts') || f.endsWith('.tsx')
+          || f.endsWith('.mts') || f.endsWith('.cts')
           || f.endsWith('.jpg') || f.endsWith('.jpeg') || f.endsWith('.png')
           || f.endsWith('.gif') || f.endsWith('.svg') || f.endsWith('.webp') || f.endsWith('.avif')
           || f.endsWith('.woff') || f.endsWith('.woff2') || f.endsWith('.ttf') || f.endsWith('.otf')
@@ -1945,37 +2005,28 @@ export async function serve(options: ServeOptions): Promise<void> {
       if (path.startsWith('/assets/') || path.startsWith('/resources/assets/')) {
         // Ensure assets are copied on first request
         await ensureAssets()
-        // Try multiple possible paths (like Laravel does)
-        const possiblePaths = [
-          path, // Original path
-          path.replace(/^\/assets\//, '/resources/assets/'), // /assets/* -> /resources/assets/*
-          path.replace(/^\/resources\/assets\//, '/assets/'), // /resources/assets/* -> /assets/*
-        ]
-
-        for (const assetPath of possiblePaths) {
+        let assetPathname: string
+        try {
+          assetPathname = decodeURIComponent(path)
+        }
+        catch {
+          return new Response('Invalid asset path', { status: 400 })
+        }
+
+        if (!isSafeAssetPath(assetPathname))
+          return new Response('Invalid asset path', { status: 400 })
+
+        for (const assetPath of assetRequestPaths(assetPathname)) {
           try {
-            const filePath = `.${assetPath}`
+            const filePath = nodePath.resolve(process.cwd(), `.${assetPath}`)
             const file = Bun.file(filePath)
 
             if (await file.exists()) {
               // Determine content type based on file extension
-              const ext = assetPath.split('.').pop()?.toLowerCase()
-
-              // Handle TypeScript files - transpile to JavaScript
-              if (ext === 'ts') {
-                const transpiler = new Bun.Transpiler({
-                  loader: 'ts',
-                })
-                const code = await file.text()
-                const transpiled = transpiler.transformSync(code)
-
-                return new Response(transpiled, {
-                  headers: {
-                    'Content-Type': 'application/javascript',
-                    'Cache-Control': 'no-cache', // Dev mode - no caching for TS
-                  },
-                })
-              }
+              const ext = getAssetExtension(assetPath)
+
+              if (isBundledAssetExtension(ext))
+                return bundleBrowserAsset(filePath)
 
               return new Response(file, {
                 headers: {

packages/bun-plugin/test/serve.test.ts

@@ -2,8 +2,11 @@ import { describe, expect, it, setDefaultTimeout } from 'bun:test'
 
 // Increase timeout for CI environments where Bun.build() can be slow
 setDefaultTimeout(30000)
+import { mkdtemp, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
 import path from 'node:path'
 import stxPlugin from '../src/index'
+import { bundleBrowserAsset } from '../src/serve'
 
 const TEST_DIR = import.meta.dir
 const FIXTURES_DIR = path.join(TEST_DIR, 'fixtures')
@@ -115,4 +118,32 @@ describe('bun-plugin-stx serving', () => {
       expect(content).toContain('<meta name="twitter:card"')
     }
   })
+
+  it('should bundle TypeScript assets for browser modules', async () => {
+    const dir = await mkdtemp(path.join(tmpdir(), 'stx-asset-'))
+
+    try {
+      const helperPath = path.join(dir, 'helper.ts')
+      const entryPath = path.join(dir, 'analytics.ts')
+
+      await writeFile(helperPath, 'export const label = "bundled asset"\n')
+      await writeFile(entryPath, [
+        'import { label } from "./helper"',
+        '',
+        'const target = document.querySelector("[data-chart]")',
+        'if (target) target.textContent = label',
+      ].join('\n'))
+
+      const response = await bundleBrowserAsset(entryPath)
+      const code = await response.text()
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get('Content-Type')).toBe('application/javascript')
+      expect(code).toContain('bundled asset')
+      expect(code).not.toContain('from "./helper"')
+    }
+    finally {
+      await rm(dir, { recursive: true, force: true })
+    }
+  })
 })