Add new Vercel middleware implementation

Author: psd-coder

integrations/vercel-middleware/index.ts

@@ -0,0 +1,85 @@
+import { fileURLToPath } from "node:url";
+import type { AstroConfig, AstroIntegration, IntegrationResolvedRoute } from "astro";
+import { getAstroMiddlewarePath } from "./utils/astro";
+import { buildMiddlewareMatcherRegexp, type MatcherOptions } from "./utils/matcher";
+import { generateEdgeMiddlewareFile } from "./utils/middleware";
+import {
+  generateFunctionConfig,
+  getFunctionDir,
+  insertMiddlewareRoute,
+} from "./utils/vercelOutput";
+
+const INTEGRATION_NAME = "vercel-middleware";
+const VERCEL_ADAPTER_LINK = "[@astrojs/vercel](https://www.npmjs.com/package/@astrojs/vercel)";
+const VERCEL_MIDDLEWARE_FUNCTION_NAME = "_middleware";
+
+type VercelMiddlewareIntegrationOptions = MatcherOptions;
+
+export default function vercelMiddlewareIntegration(options?: VercelMiddlewareIntegrationOptions) {
+  let astroConfig: AstroConfig;
+  let resolvedRoutes: IntegrationResolvedRoute[];
+
+  const integration: AstroIntegration = {
+    name: INTEGRATION_NAME,
+    hooks: {
+      "astro:routes:resolved": ({ routes, logger }) => {
+        logger.info("Resolving routes for Vercel middleware matcher…");
+        resolvedRoutes = routes;
+      },
+      "astro:config:done": ({ config }) => {
+        astroConfig = config;
+      },
+      "astro:build:done": async ({ logger }) => {
+        if (
+          !astroConfig.integrations.some((integration) => integration.name === "@astrojs/vercel")
+        ) {
+          logger.error(`${VERCEL_ADAPTER_LINK} must be installed to use ${INTEGRATION_NAME}.`);
+          return;
+        }
+
+        if (astroConfig.adapter?.name !== "@astrojs/vercel") {
+          logger.error(
+            `${VERCEL_ADAPTER_LINK} must be used as adapter for proper ${INTEGRATION_NAME} work.`,
+          );
+          return;
+        }
+
+        const rootDir = fileURLToPath(astroConfig.root);
+
+        logger.info("Looking for Astro middleware…");
+        const astroMiddlewarePath = await getAstroMiddlewarePath(rootDir);
+
+        if (!astroMiddlewarePath) {
+          logger.warn("Astro middleware not found. Skipping Vercel middleware build.");
+          return;
+        }
+
+        logger.info(`Found middleware file at: ${astroMiddlewarePath}`);
+        logger.info("Building Vercel middleware…");
+        logger.info("Compiling edge middleware file…");
+        const functionDir = getFunctionDir(rootDir, VERCEL_MIDDLEWARE_FUNCTION_NAME);
+        const middlewareEntrypoint = await generateEdgeMiddlewareFile(
+          rootDir,
+          astroMiddlewarePath,
+          functionDir,
+        );
+        logger.info("Creating edge middleware Vercel config file…");
+        await generateFunctionConfig(functionDir, middlewareEntrypoint);
+
+        logger.info("Collecting routes which must be handled by middleware…");
+        const matcher = buildMiddlewareMatcherRegexp({
+          assetsDir: astroConfig.build.assets,
+          routes: resolvedRoutes,
+          ...options,
+        });
+
+        logger.info("Inserting generated middleware into vercel output config…");
+        await insertMiddlewareRoute(rootDir, matcher, VERCEL_MIDDLEWARE_FUNCTION_NAME);
+
+        logger.info("Successfully created middleware function for Vercel deployment.");
+      },
+    },
+  };
+
+  return integration;
+}

integrations/vercel-middleware/utils/astro.ts

@@ -0,0 +1,25 @@
+import path from "node:path";
+import fs from "fs/promises";
+
+const POSSIBLE_ASTRO_MIDDLEWARE_PATHS = [
+  "src/middleware.ts",
+  "src/middleware/index.ts",
+  "src/middleware.js",
+  "src/middleware/index.js",
+];
+
+export async function getAstroMiddlewarePath(projectRootDir: string) {
+  for (const possiblePath of POSSIBLE_ASTRO_MIDDLEWARE_PATHS) {
+    const fullPath = path.join(projectRootDir, possiblePath);
+    const exists = await fs
+      .stat(fullPath)
+      .then(() => true)
+      .catch(() => false);
+
+    if (exists) {
+      return possiblePath;
+    }
+  }
+
+  return null;
+}

integrations/vercel-middleware/utils/matcher.ts

@@ -0,0 +1,45 @@
+import type { IntegrationResolvedRoute } from "astro";
+
+export interface MatcherOptions {
+  include?: (string | RegExp)[];
+  exclude?: (string | RegExp)[];
+}
+
+interface BuildMiddlewareMatcherRegexpOptions extends MatcherOptions {
+  assetsDir: string;
+  routes: IntegrationResolvedRoute[];
+}
+
+export function buildMiddlewareMatcherRegexp({
+  routes,
+  assetsDir,
+  exclude,
+  include,
+}: BuildMiddlewareMatcherRegexpOptions) {
+  const groupedRoutes = Object.groupBy(routes, (r) => r.origin);
+  const dontMatchPatterns = [
+    `\\/${assetsDir}\\/(.*)`,
+    ...(groupedRoutes.internal?.map((r) => stripAstroRoutePatternRegexp(r.patternRegex)) ?? []),
+    ...(exclude ?? []).map(stripRoutePattern),
+  ];
+  const matchPatterns = [...(include ?? []).map(stripRoutePattern)];
+
+  // The regex is constructed to first negate any paths that match the internal patterns
+  // and then allow paths that match the project patterns.
+  // For example it can output such regexp: /^(?!.*(\/_server-islands\/[^\/]+\/?|\/_image\/?)$)(?:\/(.*))$/;
+  return `^(?!.*(${dontMatchPatterns.join("|")})$)(?:${matchPatterns.length ? matchPatterns.join("|") : "\\/.*"})$`;
+}
+
+// Strips leading ^ and trailing $ from a RegExp pattern string
+const PATTERN_STRIP_LINE_START = /^\^/;
+const PATTERN_STRIP_LINE_END = /\$$/;
+function stripRoutePattern(pattern: string | RegExp) {
+  return pattern
+    .toString()
+    .replace(PATTERN_STRIP_LINE_START, "")
+    .replace(PATTERN_STRIP_LINE_END, "");
+}
+
+function stripAstroRoutePatternRegexp(pattern: RegExp) {
+  return stripRoutePattern(pattern.toString().slice(1, -1));
+}

integrations/vercel-middleware/utils/middleware.ts

@@ -0,0 +1,59 @@
+import { builtinModules } from "node:module";
+import path from "node:path";
+
+// https://docs.astro.build/en/guides/middleware/
+const MIDDLEWARE_ENTRYPOINT = "middleware.mjs";
+
+export async function generateEdgeMiddlewareFile(
+  projectRootDir: string,
+  middlewarePath: string,
+  functionDir: string,
+) {
+  const esbuild = await import("esbuild");
+  const middlewareModule = getMiddlewareTemplate(middlewarePath);
+  const outfile = path.join(functionDir, MIDDLEWARE_ENTRYPOINT);
+
+  await esbuild.build({
+    stdin: {
+      contents: middlewareModule,
+      resolveDir: projectRootDir,
+    },
+    target: "esnext",
+    platform: "browser",
+    conditions: ["edge-light", "workerd", "worker"],
+    outfile,
+    allowOverwrite: true,
+    format: "esm",
+    bundle: true,
+    minify: false,
+    plugins: [
+      {
+        name: "esbuild-namespace-node-built-in-modules",
+        setup(build) {
+          const filter = new RegExp(builtinModules.map((mod) => `(^${mod}$)`).join("|"));
+          build.onResolve({ filter }, (args) => ({
+            path: "node:" + args.path,
+            external: true,
+          }));
+        },
+      },
+    ],
+  });
+
+  return MIDDLEWARE_ENTRYPOINT;
+}
+
+function getMiddlewareTemplate(middlewarePath: string) {
+  return `
+import { createContext, trySerializeLocals } from 'astro/middleware';
+import { next } from "@vercel/functions";
+import { onRequest } from "${middlewarePath}";
+
+export default async function middleware(request, context) {
+  const url = new URL(request.url);
+  const ctx = createContext({ request, params: {} });
+  Object.assign(ctx.locals, { vercel: { edge: context } });
+
+  return onRequest(ctx, next);
+}`;
+}

integrations/vercel-middleware/utils/vercelOutput.ts

@@ -0,0 +1,44 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+interface VercelConfig {
+  version: 3;
+  routes: {
+    src: string;
+    dest?: string;
+    middlewarePath?: string;
+    continue?: boolean;
+  }[];
+}
+
+const VERCEL_OUTPUT_DIR = ".vercel/output";
+
+export function getFunctionDir(rootDir: string, functionName: string) {
+  return path.join(rootDir, VERCEL_OUTPUT_DIR, `functions/${functionName}.func/`);
+}
+
+export async function insertMiddlewareRoute(
+  rootDir: string,
+  matcher: string,
+  middlewareName: string,
+) {
+  const vercelConfigPath = path.join(rootDir, VERCEL_OUTPUT_DIR, "config.json");
+  const vercelConfig = JSON.parse(await fs.readFile(vercelConfigPath, "utf-8")) as VercelConfig;
+
+  vercelConfig.routes.unshift({
+    src: matcher,
+    middlewarePath: middlewareName,
+    continue: true,
+  });
+
+  await fs.writeFile(vercelConfigPath, JSON.stringify(vercelConfig, null, 2));
+}
+export async function generateFunctionConfig(functionDir: string, entrypoint: string) {
+  const config = {
+    runtime: "edge",
+    deploymentTarget: "v8-worker",
+    entrypoint,
+  };
+
+  await fs.writeFile(path.join(functionDir, ".vc-config.json"), JSON.stringify(config, null, 2));
+}

package.json

@@ -58,6 +58,7 @@
     "@types/react-dom": "^19.1.6",
     "@vercel/analytics": "^1.5.0",
     "@vercel/edge": "^1.2.2",
+    "@vercel/functions": "^2.2.13",
     "@vercel/og": "^0.6.8",
     "@vercel/speed-insights": "^1.2.0",
     "astro": "^5.13.2",
@@ -101,6 +102,7 @@
     "@types/node": "^22.16.5",
     "@vercel/node": "^5.3.6",
     "astro-eslint-parser": "^1.2.2",
+    "esbuild": ">=0.25.0",
     "eslint": "^9.31.0",
     "eslint-config-flat-gitignore": "^2.1.0",
     "eslint-config-prettier": "^10.1.8",