@tschk/moonshine-deploy-vercel 0.3.1

package/README.md

@@ -0,0 +1,20 @@
+# `@tschk/moonshine-deploy-vercel`
+
+Vercel deployment adapter for Moonshine.
+
+```ts
+import { vercelAdapter } from "@tschk/moonshine-deploy-vercel";
+
+await vercelAdapter.build(manifest, ".moonshine");
+```
+
+- Target runtimes: `node`, `vercel-edge`.
+- Capabilities: `streaming`, `islands`, `edge`.
+- Output: `.vercel/output` with static HTML, function directories, and
+  `config.json` route regexes.
+
+Limitations: static catch-all routes are not pre-rendered; each non-static
+route becomes a separate function; `revalidation` is not supported.
+
+See [docs/DEPLOYMENT.md](../../docs/DEPLOYMENT.md) and
+[docs/MANIFEST.md](../../docs/MANIFEST.md).

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@tschk/moonshine-deploy-vercel",
+  "version": "0.3.1",
+  "license": "ISC",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "scripts": {
+    "format": "bunx prettier --check .",
+    "lint": "bunx oxlint .",
+    "typecheck": "bunx tsc --noEmit",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "@tschk/moonshine-framework": "^0.3.1",
+    "@tschk/moonshine-server": "^0.3.1",
+    "@tschk/moonshine-router": "^0.3.1",
+    "@tschk/moonshine-compiler": "^0.3.1",
+    "@tschk/moonshine-react": "^0.3.1"
+  },
+  "devDependencies": {
+    "@types/bun": "1.3.14",
+    "@tschk/moonshine-adapter-conformance": "^0.3.1",
+    "typescript": "7.0.2"
+  },
+  "files": [
+    "src"
+  ]
+}

package/src/index.ts

@@ -0,0 +1,262 @@
+import { copyFile, mkdir, writeFile } from "node:fs/promises";
+import { dirname, isAbsolute, resolve } from "node:path";
+import { tryServeStatic } from "@tschk/moonshine-server";
+import { reactRenderer, type RenderContext } from "@tschk/moonshine-react";
+import type {
+  DeploymentAdapter,
+  MoonshineManifest,
+  RouteArtifact,
+} from "@tschk/moonshine-framework";
+import type {
+  Harness,
+  HarnessFactory,
+} from "@tschk/moonshine-adapter-conformance";
+
+type VercelRoute = {
+  src: string;
+  dest: string;
+};
+
+type VercelConfig = {
+  version: 3;
+  routes: VercelRoute[];
+};
+
+function resolveManifestFiles(
+  manifest: MoonshineManifest,
+  projectRoot: string,
+): MoonshineManifest {
+  return {
+    ...manifest,
+    routes: manifest.routes.map((route) => ({
+      ...route,
+      file: isAbsolute(route.file)
+        ? route.file
+        : resolve(projectRoot, route.file),
+      ...(route.dataFile && {
+        dataFile: isAbsolute(route.dataFile)
+          ? route.dataFile
+          : resolve(projectRoot, route.dataFile),
+      }),
+      ...(route.layouts && {
+        layouts: route.layouts.map((layout) =>
+          isAbsolute(layout) ? layout : resolve(projectRoot, layout),
+        ),
+      }),
+      ...(route.middleware && {
+        middleware: route.middleware.map((middleware) =>
+          isAbsolute(middleware)
+            ? middleware
+            : resolve(projectRoot, middleware),
+        ),
+      }),
+      ...(route.errorBoundary && {
+        errorBoundary: isAbsolute(route.errorBoundary)
+          ? route.errorBoundary
+          : resolve(projectRoot, route.errorBoundary),
+      }),
+    })),
+  };
+}
+
+async function copyAssets(
+  assets: MoonshineManifest["assets"],
+  outDir: string,
+): Promise<void> {
+  for (const asset of assets) {
+    const source = isAbsolute(asset.file)
+      ? asset.file
+      : resolve(outDir, asset.file);
+    const target = resolve(
+      outDir,
+      (asset.path ?? asset.file).replace(/^\/+/, ""),
+    );
+    await mkdir(dirname(target), { recursive: true });
+    if (source !== target) {
+      await copyFile(source, target);
+    }
+  }
+}
+
+function validateRuntime(
+  adapter: DeploymentAdapter,
+  manifest: MoonshineManifest,
+): void {
+  const errors: string[] = [];
+  for (const route of manifest.routes) {
+    if (!adapter.runtimes.includes(route.runtime)) {
+      errors.push(
+        `${adapter.name} adapter does not support route "${route.path}" with runtime "${route.runtime}"; supported runtimes: ${adapter.runtimes.join(", ")}`,
+      );
+    }
+  }
+  if (errors.length) throw new Error(errors.join("\n"));
+}
+
+function validateCapabilities(
+  adapter: DeploymentAdapter,
+  manifest: MoonshineManifest,
+): void {
+  for (const capability of manifest.capabilities) {
+    if (!adapter.capabilities.includes(capability)) {
+      throw new Error(
+        `${adapter.name} adapter does not support capability "${capability}"; supported capabilities: ${adapter.capabilities.join(", ")}`,
+      );
+    }
+  }
+}
+
+function routeToRegex(path: string): string {
+  return `^${path
+    .replace(/\//g, "\\/")
+    .replace(/\*/g, ".*")
+    .replace(/:([^/]+?)\?/g, "(?<$1>[^/]*)")
+    .replace(/:([^/]+)/g, "(?<$1>[^/]+)")}$`;
+}
+
+function staticSlug(path: string): string {
+  if (path === "/") return "index";
+  return path.replace(/^\/+/, "").replace(/\//g, "-");
+}
+
+async function prerenderRoute(route: RouteArtifact): Promise<string> {
+  const context: RenderContext = {
+    request: new Request(`http://localhost${route.path}`),
+    route,
+    params: {},
+    data: {},
+    signal: new AbortController().signal,
+  };
+  return reactRenderer.prerender(context);
+}
+
+export const vercelAdapter: DeploymentAdapter = {
+  name: "vercel",
+  runtimes: ["node", "vercel-edge"],
+  capabilities: ["streaming", "islands", "edge"],
+  build: async (manifest, outDir) => {
+    validateRuntime(vercelAdapter, manifest);
+    validateCapabilities(vercelAdapter, manifest);
+
+    await mkdir(outDir, { recursive: true });
+    const projectRoot = resolve(outDir, "..");
+    const resolvedManifest = resolveManifestFiles(manifest, projectRoot);
+
+    await writeFile(
+      resolve(outDir, "manifest.json"),
+      JSON.stringify(resolvedManifest, null, 2) + "\n",
+    );
+    await copyAssets(manifest.assets, outDir);
+
+    const vercelOutput = resolve(outDir, ".vercel/output");
+    const staticDir = resolve(vercelOutput, "static");
+    const functionsDir = resolve(vercelOutput, "functions");
+    await mkdir(staticDir, { recursive: true });
+    await mkdir(functionsDir, { recursive: true });
+
+    const config: VercelConfig = { version: 3, routes: [] };
+
+    for (const route of resolvedManifest.routes) {
+      if (route.mode === "static" && !route.path.includes("*")) {
+        const html = await prerenderRoute(route);
+        const slug = staticSlug(route.path);
+        await writeFile(resolve(staticDir, `${slug}.html`), html);
+        config.routes.push({
+          src: routeToRegex(route.path),
+          dest: `/${slug}.html`,
+        });
+      } else {
+        const funcDir = resolve(functionsDir, `${route.id}.func`);
+        await mkdir(funcDir, { recursive: true });
+
+        const runtime = route.runtime === "vercel-edge" ? "edge" : "nodejs20.x";
+        const vcConfig = { runtime, handler: "index.ts" };
+        if (runtime !== "edge") {
+          (vcConfig as Record<string, string>).launcherType = "Nodejs";
+        }
+        await writeFile(
+          resolve(funcDir, ".vc-config.json"),
+          JSON.stringify(vcConfig, null, 2) + "\n",
+        );
+
+        const functionEntry = `import { createRequestHandler } from "@tschk/moonshine-server";
+import { reactRenderer } from "@tschk/moonshine-react";
+import manifest from "../../manifest.json" with { type: "json" };
+
+const fetch = createRequestHandler({ manifest, renderer: reactRenderer });
+
+export default { fetch };
+`;
+        await writeFile(resolve(funcDir, "index.ts"), functionEntry);
+
+        config.routes.push({
+          src: routeToRegex(route.path),
+          dest: `/${route.id}`,
+        });
+      }
+    }
+
+    for (const asset of resolvedManifest.assets) {
+      const source = isAbsolute(asset.file)
+        ? asset.file
+        : resolve(outDir, asset.file);
+      const target = resolve(
+        staticDir,
+        (asset.path ?? asset.file).replace(/^\/+/, ""),
+      );
+      await mkdir(dirname(target), { recursive: true });
+      if (source !== target) {
+        await copyFile(source, target);
+      }
+    }
+
+    await writeFile(
+      resolve(vercelOutput, "manifest.json"),
+      JSON.stringify(resolvedManifest, null, 2) + "\n",
+    );
+    await writeFile(
+      resolve(vercelOutput, "config.json"),
+      JSON.stringify(config, null, 2) + "\n",
+    );
+
+    const serverEntry = `import { createRequestHandler } from "@tschk/moonshine-server";
+import { reactRenderer } from "@tschk/moonshine-react";
+import { join } from "node:path";
+import manifest from "./manifest.json" with { type: "json" };
+
+const fetch = createRequestHandler({
+  manifest,
+  renderer: reactRenderer,
+  staticDir: join(import.meta.dir, ".vercel/output/static"),
+});
+
+Bun.serve({ port: Number(process.env.PORT) || 0, fetch });
+`;
+    await writeFile(resolve(outDir, "server.ts"), serverEntry);
+  },
+};
+
+export const vercelHarness: HarnessFactory = (fetch, options) => {
+  const server = Bun.serve({
+    port: 0,
+    fetch: async (request) => {
+      const url = new URL(request.url);
+      const pathname = url.pathname.replace(/\/+$/, "") || "/";
+      if (
+        (request.method === "GET" || request.method === "HEAD") &&
+        pathname !== "/"
+      ) {
+        const res = await tryServeStatic(options.staticDir, pathname);
+        if (res) return res;
+      }
+      return fetch(request);
+    },
+  });
+
+  return {
+    start: async () => server.url,
+    stop: async () => {
+      server.stop(true);
+    },
+  } as Harness;
+};