@rubriclab/bunl 0.1.25 → 0.2.1

package/e2e.test.ts

@@ -0,0 +1,187 @@
+import { afterAll, beforeAll, describe, expect, test } from 'bun:test'
+import type { Subprocess } from 'bun'
+
+const SERVER_PORT = 9100
+const DEMO_PORT = 9101
+const SUBDOMAIN = 'e2e'
+
+function tunnelFetch(path: string, init?: RequestInit): Promise<Response> {
+	const headers = new Headers(init?.headers as HeadersInit)
+	headers.set('host', `${SUBDOMAIN}.localhost:${SERVER_PORT}`)
+	return fetch(`http://localhost:${SERVER_PORT}${path}`, {
+		...init,
+		headers
+	})
+}
+
+let serverProc: Subprocess
+let demoProc: Subprocess
+let clientProc: Subprocess
+
+async function waitFor(url: string, timeoutMs = 10_000): Promise<void> {
+	const start = Date.now()
+	while (Date.now() - start < timeoutMs) {
+		try {
+			await fetch(url)
+			return
+		} catch {
+			await Bun.sleep(200)
+		}
+	}
+	throw new Error(`Timed out waiting for ${url}`)
+}
+
+async function waitForTunnel(timeoutMs = 15_000): Promise<void> {
+	const start = Date.now()
+	while (Date.now() - start < timeoutMs) {
+		try {
+			const res = await tunnelFetch('/')
+			if (res.status !== 404) return
+		} catch {
+			/* not ready */
+		}
+		await Bun.sleep(300)
+	}
+	throw new Error('Timed out waiting for tunnel to be ready')
+}
+
+beforeAll(async () => {
+	serverProc = Bun.spawn(['bun', 'run', 'server.ts'], {
+		cwd: import.meta.dir,
+		env: {
+			...process.env,
+			DOMAIN: `localhost:${SERVER_PORT}`,
+			PORT: String(SERVER_PORT),
+			SCHEME: 'http'
+		},
+		stderr: 'pipe',
+		stdout: 'pipe'
+	})
+
+	demoProc = Bun.spawn(['bun', 'run', 'demo.tsx'], {
+		cwd: import.meta.dir,
+		env: { ...process.env, DEMO_PORT: String(DEMO_PORT) },
+		stderr: 'pipe',
+		stdout: 'pipe'
+	})
+
+	await Promise.all([
+		waitFor(`http://localhost:${SERVER_PORT}/?new`),
+		waitFor(`http://localhost:${DEMO_PORT}/api/health`)
+	])
+
+	clientProc = Bun.spawn(
+		[
+			'bun',
+			'run',
+			'client.ts',
+			'-p',
+			String(DEMO_PORT),
+			'-d',
+			`localhost:${SERVER_PORT}`,
+			'-s',
+			SUBDOMAIN
+		],
+		{
+			cwd: import.meta.dir,
+			env: process.env,
+			stderr: 'pipe',
+			stdout: 'pipe'
+		}
+	)
+
+	await waitForTunnel()
+})
+
+afterAll(() => {
+	clientProc?.kill()
+	demoProc?.kill()
+	serverProc?.kill()
+})
+
+describe('e2e tunnel', () => {
+	test('serves HTML through tunnel', async () => {
+		const res = await tunnelFetch('/')
+		expect(res.status).toBe(200)
+		expect(res.headers.get('content-type')).toContain('text/html')
+		const body = await res.text()
+		expect(body).toContain('<h1>bunl</h1>')
+	})
+
+	test('serves CSS through tunnel', async () => {
+		const res = await tunnelFetch('/style.css')
+		expect(res.status).toBe(200)
+		expect(res.headers.get('content-type')).toContain('text/css')
+		const body = await res.text()
+		expect(body).toContain('font-family')
+	})
+
+	test('serves PNG image (binary) through tunnel', async () => {
+		const res = await tunnelFetch('/image.png')
+		expect(res.status).toBe(200)
+		expect(res.headers.get('content-type')).toBe('image/png')
+		const buf = await res.arrayBuffer()
+		const bytes = new Uint8Array(buf)
+		expect(bytes[0]).toBe(0x89)
+		expect(bytes[1]).toBe(0x50)
+		expect(bytes[2]).toBe(0x4e)
+		expect(bytes[3]).toBe(0x47)
+	})
+
+	test('serves binary font through tunnel', async () => {
+		const res = await tunnelFetch('/font.woff2')
+		expect(res.status).toBe(200)
+		expect(res.headers.get('content-type')).toBe('font/woff2')
+		const buf = await res.arrayBuffer()
+		const bytes = new Uint8Array(buf)
+		expect(bytes.length).toBe(256)
+		expect(bytes[0]).toBe(0)
+		expect(bytes[127]).toBe(127)
+		expect(bytes[255]).toBe(255)
+	})
+
+	test('serves JSON API through tunnel', async () => {
+		const res = await tunnelFetch('/api/health')
+		expect(res.status).toBe(200)
+		const json = await res.json()
+		expect(json.status).toBe('ok')
+		expect(typeof json.timestamp).toBe('number')
+	})
+
+	test('handles POST with body through tunnel', async () => {
+		const payload = JSON.stringify({ hello: 'world' })
+		const res = await tunnelFetch('/echo', {
+			body: payload,
+			headers: { 'content-type': 'application/json' },
+			method: 'POST'
+		})
+		expect(res.status).toBe(200)
+		const body = await res.text()
+		expect(body).toBe(payload)
+	})
+
+	test("concurrent requests don't collide", async () => {
+		const paths = ['/', '/style.css', '/image.png', '/api/health', '/font.woff2']
+		const results = await Promise.all(paths.map(p => tunnelFetch(p).then(r => r.status)))
+		expect(results).toEqual([200, 200, 200, 200, 200])
+	})
+
+	test('returns 404 for unknown subdomain', async () => {
+		const res = await fetch(`http://localhost:${SERVER_PORT}/`, {
+			headers: { host: `nonexistent.localhost:${SERVER_PORT}` }
+		})
+		expect(res.status).toBe(404)
+		const body = await res.text()
+		expect(body).toContain('Not Found')
+	})
+
+	test('returns landing page for root domain', async () => {
+		const res = await fetch(`http://localhost:${SERVER_PORT}/`, {
+			headers: { host: `localhost:${SERVER_PORT}` }
+		})
+		expect(res.status).toBe(200)
+		const body = await res.text()
+		expect(body).toContain('bunl')
+		expect(body).toContain('Expose localhost to the world')
+	})
+})

package/package.json

@@ -1,46 +1,54 @@
 {
-  "bin": {
-    "bunl": "build/client.js"
-  },
-  "name": "@rubriclab/bunl",
-  "description": "Expose localhost to the world",
-  "version": "0.1.25",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/RubricLab/bunl.git"
-  },
-  "dependencies": {
-    "human-id": "^4.1.1",
-    "open": "^10.1.0"
-  },
-  "devDependencies": {
-    "@rubriclab/typescript-config": "^1.0.0",
-    "@types/bun": "latest"
-  },
-  "main": "build/client.js",
-  "scripts": {
-    "server": "bun server.ts",
-    "dev:server": "bun --watch server.ts",
-    "client": "bun --watch client.ts",
-    "demo": "bun --watch demo.ts",
-    "client:upgrade": "bun rm -g @rubriclab/bunl && bun i -g @rubriclab/bunl@latest",
-    "build": "BUILD=build/client.js && bun build client.ts --outdir build --target bun && echo -e \"#! /usr/bin/env bun\n$(cat $BUILD)\" > $BUILD",
-    "npm:publish": "bun run build && npm publish"
-  },
-  "type": "module",
-  "peerDependencies": {
-    "typescript": "^5.0.0"
-  },
-  "publishConfig": {
-    "@RubricLab:registry": "https://registry.npmjs.org",
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  },
-  "homepage": "https://github.com/RubricLab/bunl#readme",
-  "keywords": [
-    "local",
-    "tunnel",
-    "rubric"
-  ]
+	"bin": {
+		"bunl": "build/client.js"
+	},
+	"dependencies": {
+		"@rubriclab/config": "^0.0.24",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4"
+	},
+	"description": "Expose localhost to the world. Bun-native localtunnel.",
+	"devDependencies": {
+		"@rubriclab/package": "^0.0.124",
+		"@types/bun": "latest",
+		"@types/react": "^19.2.13",
+		"@types/react-dom": "^19.2.3"
+	},
+	"homepage": "https://github.com/RubricLab/bunl#readme",
+	"keywords": [
+		"local",
+		"tunnel",
+		"bun",
+		"websocket"
+	],
+	"license": "MIT",
+	"main": "build/client.js",
+	"name": "@rubriclab/bunl",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/RubricLab/bunl.git"
+	},
+	"scripts": {
+		"bleed": "bun x npm-check-updates -u",
+		"build": "bun build client.ts --outdir build --target bun && printf '#! /usr/bin/env bun\\n%s' \"$(cat build/client.js)\" > build/client.js",
+		"clean": "rm -rf .next && rm -rf node_modules",
+		"client": "bun --watch client.ts",
+		"demo": "bun --watch demo.tsx",
+		"dev:server": "bun --watch server.ts",
+		"format": "bun x biome format --write .",
+		"lint": "bun x biome check .",
+		"lint:fix": "bun x biome lint . --write --unsafe",
+		"prepare": "bun x @rubriclab/package prepare",
+		"server": "bun server.ts",
+		"test": "bun test",
+		"test:e2e": "bun test e2e.test.ts"
+	},
+	"simple-git-hooks": {
+		"post-commit": "rubriclab-package post-commit"
+	},
+	"type": "module",
+	"version": "0.2.1"
 }

package/server.ts

@@ -1,87 +1,162 @@
-import { serve, type ServerWebSocket } from "bun";
-import { uid } from "./utils";
-import type { Client, Payload } from "./types";
-
-const port = Bun.env.PORT || 1234;
-const scheme = Bun.env.SCHEME || "http";
-const domain = Bun.env.DOMAIN || `localhost:${port}`;
-
-const clients = new Map<string, ServerWebSocket<Client>>();
-const requesters = new Map<string, WritableStream>();
+import { type ServerWebSocket, serve } from 'bun'
+import type { Client, TunnelInit, TunnelRequest, TunnelResponse } from './types'
+import { fromBase64, page, toBase64, uid } from './utils'
+
+const port = Number(Bun.env.PORT) || 1234
+const scheme = Bun.env.SCHEME || 'http'
+const domain = Bun.env.DOMAIN || `localhost:${port}`
+const domainHost = domain.replace(/:\d+$/, '')
+
+const clients = new Map<string, ServerWebSocket<Client>>()
+const pending = new Map<
+	string,
+	{
+		resolve: (res: TunnelResponse) => void
+		timer: Timer
+	}
+>()
+
+const TIMEOUT_MS = 30_000
+
+const landingHtml = page(
+	'bunl',
+	`<h1>bunl</h1>
+<p>Expose localhost to the world.</p>
+<p><code>bun x bunl -p 3000</code></p>`
+)
+
+function notFoundHtml(subdomain: string) {
+	return page(
+		'Not Found',
+		`<h1>Not Found</h1>
+<p>No tunnel is connected for <code>${subdomain}</code>.</p>
+<p>Make sure your client is running.</p>`
+	)
+}
+
+const timeoutHtml = page(
+	'Gateway Timeout',
+	`<h1>Gateway Timeout</h1>
+<p>The tunnel client didn't respond in time.</p>`
+)
 
 serve<Client>({
-  port,
-  fetch: async (req, server) => {
-    const reqUrl = new URL(req.url);
-
-    if (reqUrl.searchParams.has("new")) {
-      const requested = reqUrl.searchParams.get("subdomain");
-      let id = requested || uid();
-      if (clients.has(id)) id = uid();
-
-      const upgraded = server.upgrade(req, { data: { id } });
-      if (upgraded) return;
-      else return new Response("upgrade failed", { status: 500 });
-    }
-
-    const subdomain = reqUrl.hostname.split(".")[0];
-
-    if (!clients.has(subdomain)) {
-      return new Response(`${subdomain} not found`, { status: 404 });
-    }
-
-    // The magic: forward the req to the client
-    const client = clients.get(subdomain)!;
-    const { method, url, headers: reqHeaders } = req;
-    const reqBody = await req.text();
-    const pathname = new URL(url).pathname;
-    const payload: Payload = {
-      method,
-      pathname,
-      body: reqBody,
-      headers: reqHeaders,
-    };
-
-    const { writable, readable } = new TransformStream();
-
-    requesters.set(`${method}:${subdomain}${pathname}`, writable);
-    client.send(JSON.stringify(payload));
-
-    const res = await readable.getReader().read();
-    const { status, statusText, headers, body } = JSON.parse(res.value);
-
-    delete headers["content-encoding"]; // remove problematic header
-
-    return new Response(body, { status, statusText, headers });
-  },
-  websocket: {
-    open(ws) {
-      clients.set(ws.data.id, ws);
-      console.log(`\x1b[32m+ ${ws.data.id} (${clients.size} total)\x1b[0m`);
-      ws.send(
-        JSON.stringify({
-          url: `${scheme}://${ws.data.id}.${domain}`,
-        })
-      );
-    },
-    message: async ({ data: { id } }, message: string) => {
-      console.log("message from", id);
-
-      const { method, pathname } = JSON.parse(message) as Payload;
-      const writable = requesters.get(`${method}:${id}${pathname}`);
-      if (!writable) throw "connection not found";
-
-      if (writable.locked) return;
-
-      const writer = writable.getWriter();
-      await writer.write(message);
-      await writer.close();
-    },
-    close({ data }) {
-      console.log("closing", data.id);
-      clients.delete(data.id);
-    },
-  },
-});
-
-console.log(`websocket server up at ws://${domain}`);
+	fetch: async (req, server) => {
+		const reqUrl = new URL(req.url)
+
+		if (reqUrl.searchParams.has('new')) {
+			const requested = reqUrl.searchParams.get('subdomain')
+			let id = requested || uid()
+			if (clients.has(id)) id = uid()
+
+			const upgraded = server.upgrade(req, { data: { id } })
+			if (upgraded) return undefined
+			return new Response('WebSocket upgrade failed', { status: 500 })
+		}
+
+		const host = (req.headers.get('host') || reqUrl.hostname).replace(/:\d+$/, '')
+		const subdomain = host.endsWith(`.${domainHost}`) ? host.slice(0, -(domainHost.length + 1)) : ''
+
+		if (!subdomain) {
+			return new Response(landingHtml, {
+				headers: { 'content-type': 'text/html; charset=utf-8' }
+			})
+		}
+
+		const client = clients.get(subdomain)
+
+		if (!client) {
+			return new Response(notFoundHtml(subdomain), {
+				headers: { 'content-type': 'text/html; charset=utf-8' },
+				status: 404
+			})
+		}
+
+		const id = crypto.randomUUID()
+		const { method } = req
+		const pathname = reqUrl.pathname + reqUrl.search
+
+		const rawBody = await req.arrayBuffer()
+		const body = rawBody.byteLength > 0 ? toBase64(rawBody) : ''
+
+		const headers: Record<string, string> = {}
+		req.headers.forEach((v, k) => {
+			headers[k] = v
+		})
+
+		const message: TunnelRequest = {
+			body,
+			headers,
+			id,
+			method,
+			pathname,
+			type: 'request'
+		}
+
+		const response = await new Promise<TunnelResponse>((resolve, reject) => {
+			const timer = setTimeout(() => {
+				pending.delete(id)
+				reject(new Error('Tunnel request timed out'))
+			}, TIMEOUT_MS)
+
+			pending.set(id, { resolve, timer })
+			client.send(JSON.stringify(message))
+		}).catch((): TunnelResponse => {
+			return {
+				body: Buffer.from(timeoutHtml).toString('base64'),
+				headers: { 'content-type': 'text/html; charset=utf-8' },
+				id,
+				status: 504,
+				statusText: 'Gateway Timeout',
+				type: 'response'
+			}
+		})
+
+		const resBody = response.body ? fromBase64(response.body) : null
+
+		const resHeaders = { ...response.headers }
+		delete resHeaders['content-encoding']
+		delete resHeaders['transfer-encoding']
+		if (resBody) {
+			resHeaders['content-length'] = String(resBody.byteLength)
+		}
+
+		return new Response(resBody as Uint8Array<ArrayBuffer> | null, {
+			headers: resHeaders,
+			status: response.status,
+			statusText: response.statusText
+		})
+	},
+	port,
+	websocket: {
+		close(ws) {
+			console.log(`\x1b[31m- ${ws.data.id}\x1b[0m (${clients.size - 1} connected)`)
+			clients.delete(ws.data.id)
+		},
+		message(_ws, raw) {
+			const msg = JSON.parse(
+				typeof raw === 'string' ? raw : new TextDecoder().decode(raw)
+			) as TunnelResponse
+
+			if (msg.type !== 'response' || !msg.id) return
+
+			const entry = pending.get(msg.id)
+			if (!entry) return
+
+			clearTimeout(entry.timer)
+			pending.delete(msg.id)
+			entry.resolve(msg)
+		},
+		open(ws) {
+			clients.set(ws.data.id, ws)
+			console.log(`\x1b[32m+ ${ws.data.id}\x1b[0m (${clients.size} connected)`)
+			const init: TunnelInit = {
+				type: 'init',
+				url: `${scheme}://${ws.data.id}.${domain}`
+			}
+			ws.send(JSON.stringify(init))
+		}
+	}
+})
+
+console.log(`bunl server listening on :${port} (${scheme}://*.${domain})`)

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "compilerOptions": { "baseUrl": "." },
-  "exclude": ["node_modules"],
-  "extends": "@rubriclab/typescript-config/base"
+	"exclude": ["node_modules"],
+	"extends": "@rubriclab/config/tsconfig",
+	"include": ["**/*.ts", "**/*.tsx"]
 }

package/types.ts

@@ -1,10 +1,24 @@
-export type Client = { id: string };
+export type Client = { id: string }
 
-export type Payload = {
-  status?: number;
-  statusText?: string;
-  method?: string;
-  pathname?: string;
-  body: string;
-  headers: object;
-};
+export type TunnelRequest = {
+	type: 'request'
+	id: string
+	method: string
+	pathname: string
+	headers: Record<string, string>
+	body: string
+}
+
+export type TunnelResponse = {
+	type: 'response'
+	id: string
+	status: number
+	statusText: string
+	headers: Record<string, string>
+	body: string
+}
+
+export type TunnelInit = {
+	type: 'init'
+	url: string
+}