feat: update plugin to handle vercel specific code

Author: brettkolodny

src/server/index.tsx

@@ -1,15 +1,18 @@
 import { api } from "@/server/api";
 import { Hono } from "hono";
-import { handle } from "hono/vercel";
 import { renderToString } from "react-dom/server";
 
+// This must be exported for the dev server to work
 export const app = new Hono();
 
 app.route("/api", api);
+
+// Serves the main web application. This must come after the API route.
 app.get("*", (c) => {
+	// Along with the vite React plugin this enables HMR within react while
+	// running the dev server.
 	const { url } = c.req;
 	const { origin } = new URL(url);
-
 	const injectClientScript = `
     import RefreshRuntime from "${origin}/@react-refresh";
     RefreshRuntime.injectIntoGlobalHook(window);
@@ -21,6 +24,8 @@ app.get("*", (c) => {
 		<script type="module">{injectClientScript}</script>
 	) : null;
 
+	// Sets the correct path for static assets based on the environment.
+	// The production paths are hard coded based on the output of the build script.
 	const cssPath = import.meta.env.PROD
 		? "/assets/index.css"
 		: "src/client/index.css";
@@ -57,11 +62,3 @@ app.get("*", (c) => {
 		].join("\n"),
 	);
 });
-
-const handler = handle(app);
-
-export const GET = handler;
-export const POST = handler;
-export const PATCH = handler;
-export const PUT = handler;
-export const OPTIONS = handler;

vite.config.ts

@@ -1,10 +1,9 @@
-import { defineConfig, mergeConfig } from "vite";
-
-import react from "@vitejs/plugin-react";
-import basicSsl from "@vitejs/plugin-basic-ssl";
-import path from "node:path";
 import fs from "node:fs/promises";
+import path from "node:path";
 import devServer from "@hono/vite-dev-server";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import react from "@vitejs/plugin-react";
+import { defineConfig, mergeConfig, type Plugin } from "vite";
 
 const OUT_DIR = ".vercel";
 
@@ -37,6 +36,71 @@ const vercelConfigPlugin = () => ({
 	},
 });
 
+/**
+ * Generate the vercel specific code within the server entry file.
+ *
+ * ```ts
+ * import { handle } from "hono/vercel";
+ *
+ * ...
+ *
+ * const handler = handle(app);
+ * export const GET = handler;
+ * export const POST = handler;
+ * export const PATCH = handler;
+ * export const PUT = handler;
+ * export const OPTIONS = handler;
+ * ```
+ *
+ */
+const vercelEntryPlugin = (): Plugin => {
+	let entry: string;
+	let resolvedEntryPath: string;
+	let projectRoot: string;
+
+	return {
+		name: "vercel-entry",
+		configResolved(config) {
+			if (config.build.lib) {
+				const e = config.build.lib.entry;
+				if (typeof e === "string") {
+					entry = e;
+				} else {
+					throw new Error("Entry must be a string path");
+				}
+			}
+
+			projectRoot = config.root;
+			resolvedEntryPath = path.normalize(path.resolve(projectRoot, entry));
+		},
+		async load(id) {
+			const normalizedId = path.normalize(path.resolve(projectRoot, id));
+
+			if (normalizedId === resolvedEntryPath) {
+				try {
+					const content = await fs.readFile(resolvedEntryPath, "utf-8");
+					const transformedContent = [
+						'import { handle } from "hono/vercel";',
+						content,
+						"const handler = handle(app);",
+						"export const GET = handler;",
+						"export const POST = handler;",
+						"export const PATCH = handler;",
+						"export const PUT = handler;",
+						"export const OPTIONS = handler;",
+					].join("\n");
+
+					return transformedContent;
+				} catch (e) {
+					this.error(`Failed to process entry file ${entry}: ${e}`);
+				}
+			}
+
+			return null;
+		},
+	};
+};
+
 /**
  * Vite is handling both the building of our final assets and also running the
  * dev server which gives us HMR for both SSR'd templates and client React code.
@@ -62,7 +126,7 @@ const vercelConfigPlugin = () => ({
  * paths within the code. This is something that could be improved to make
  * the build script less brittle.
  *
- * [1]: <https://vercel.com/docs/build-output-api> 
+ * [1]: <https://vercel.com/docs/build-output-api>
  */
 export default defineConfig(({ mode, command }) => {
 	const baseConfig = {
@@ -101,13 +165,15 @@ export default defineConfig(({ mode, command }) => {
 				name: "server",
 				formats: ["umd"],
 			},
+			plugins: [vercelConfigPlugin()],
 			rollupOptions: {
 				output: {
 					entryFileNames: "output/functions/index.func/index.js",
 				},
-				plugins: [vercelConfigPlugin()],
+				// plugins: [vercelEntryPlugin("src/server/index.tsx")],
 			},
 		},
+		plugins: [vercelEntryPlugin()],
 	};
 
 	const devConfig = {