Implement Vercel Build Output API with lightweight edge functions and proper bundling

.gitignore

@@ -1,3 +1,4 @@
 **/node_modules
 **/dist
 **/.turbo
+**/.vercel

packages/example-wormhole/.gitignore

@@ -33,3 +33,5 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 # Finder (MacOS) folder config
 .DS_Store
 .wormhole
+
+.vercel

packages/example-wormhole/package.json

@@ -1,23 +1,24 @@
 {
-    "name": "@vortexjs/example-wormhole",
-    "module": "index.ts",
-    "type": "module",
-    "license": "MIT-0",
-    "private": true,
-    "devDependencies": {
-        "@types/bun": "catalog:"
-    },
-    "dependencies": {
-        "@vortexjs/core": "workspace:*",
-        "@vortexjs/dom": "workspace:*",
-        "@vortexjs/wormhole": "workspace:*",
-        "tailwindcss": "catalog:",
-        "valibot": "catalog:"
-    },
-    "scripts": {
-        "dev": "wormhole dev"
-    },
-    "peerDependencies": {
-        "typescript": "catalog:"
-    }
+	"name": "@vortexjs/example-wormhole",
+	"module": "index.ts",
+	"type": "module",
+	"license": "MIT-0",
+	"private": true,
+	"devDependencies": {
+		"@types/bun": "catalog:"
+	},
+	"dependencies": {
+		"@vortexjs/core": "workspace:*",
+		"@vortexjs/dom": "workspace:*",
+		"@vortexjs/wormhole": "workspace:*",
+		"tailwindcss": "catalog:",
+		"valibot": "catalog:"
+	},
+	"scripts": {
+		"dev": "wormhole dev",
+		"vbuild": "wormhole build vercel"
+	},
+	"peerDependencies": {
+		"typescript": "catalog:"
+	}
 }

packages/example-wormhole/src/features/home/index.tsx

@@ -1,62 +1,67 @@
+import { useAwait } from "@vortexjs/core";
 import route, { query } from "@vortexjs/wormhole/route";
 import * as v from "valibot";
 
 route("/", {
-    page() {
-        return (
-            <>
-                <h1 class="text-4xl font-bold">
-                    Welcome to Wormhole, {Object.entries(globalThis).length}
-                </h1>
-                <p>
-                    This is an example app, go to the{" "}
-                    <a href="/docs/tada">docs</a>
-                </p>
-                <button on:click={async () => {
-                    console.log(await add({
-                        a: 1,
-                        b: 2
-                    }))
-                }}>
-                    add
-                </button>
-            </>
-        );
-    },
-    layout({ children }) {
-        return (
-            <>
-                <title>Wormhole Example</title>
-                {children}
-            </>
-        );
-    },
-    notFound() {
-        return (
-            <>
-                <h1>404 not found</h1>
-            </>
-        )
-    }
+	page() {
+		const pause = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+		const awaited = useAwait();
+
+		return (
+			<>
+				<h1 class="text-4xl font-bold">
+					Welcome to Wormhole, {Object.entries(globalThis).length}
+				</h1>
+				<p>
+					This is an example app, go to the{" "}
+					<a href="/docs/tada">docs</a>
+				</p>
+				<button on:click={async () => {
+					console.log(await add({
+						a: 1,
+						b: 2
+					}))
+				}}>
+					add
+				</button>
+			</>
+		);
+	},
+	layout({ children }) {
+		return (
+			<>
+				<title>Wormhole Example</title>
+				{children}
+			</>
+		);
+	},
+	notFound() {
+		return (
+			<>
+				<h1>404 not found</h1>
+			</>
+		)
+	}
 });
 
-route("/docs/[...page]", {
-    page({ page }) {
-        return (
-            <>
-                <h1>Documentation for {page.join(", ")}</h1>
-                <p>This is the documentation page for {page.join(", ")}.</p>
-            </>
-        );
-    },
+route("/docs", {
+	page({ }) {
+		const page = "introduction";
+		return (
+			<>
+				<h1>Documentation for {page}</h1>
+				<p>This is the documentation page for {page}.</p>
+			</>
+		);
+	},
 });
 
 export const add = query("/api/add", {
-    schema: v.object({
-        a: v.number(),
-        b: v.number()
-    }),
-    impl({ a, b }) {
-        return a + b;
-    }
+	schema: v.object({
+		a: v.number(),
+		b: v.number()
+	}),
+	impl({ a, b }) {
+		return a + b;
+	}
 })

packages/vortex-core/src/context.ts

@@ -42,7 +42,7 @@ export class StreamingContext {
 	private updateCallbackImmediate = 0;
 	private updateCallbacks = new Set<() => void>();
 	private loadingCounter = 0;
-	private onDoneLoadingCallback = () => {};
+	private onDoneLoadingCallback = () => { };
 	onDoneLoading: Promise<void>;
 
 	constructor() {

packages/wormhole/README.md

@@ -8,6 +8,32 @@ Wormhole is the metaframework for Vortex, providing an opinionated way to build
 - What we believe is the best way to structure applications
 - Provides a set of tools that synergize with said reccommended structure
 
+## Build Adapters
+
+Wormhole supports different build adapters for various deployment targets:
+
+### Development
+```bash
+wormhole dev
+```
+Uses the DevAdapter for local development with hot reloading and debugging features.
+
+### Vercel
+```bash
+wormhole build vercel
+```
+Uses the VercelAdapter with the Vercel Build Output API for production deployment to Vercel. This adapter:
+- Generates production-optimized builds (minified, no dev flags)
+- Creates lightweight edge functions for each route and API endpoint
+- Outputs in the `.vercel/output` directory structure
+- Handles static assets separately from serverless functions
+- Supports both server-side rendering and API routes
+
+The build output follows the Vercel Build Output API format:
+- `.vercel/output/static/`: Client-side JavaScript and CSS bundles
+- `.vercel/output/functions/`: Individual edge functions for each route
+- `.vercel/output/config.json`: Vercel configuration and routing rules
+
 ## Who this isn't for
 
 - People who don't want to use Vortex