@opennextjs/cloudflare 0.0.0-fd3c2b9 → 0.1.0

package/dist/cli/templates/cache-handler/index.ts

@@ -0,0 +1 @@
+export * from "./open-next-cache-handler";

package/dist/cli/templates/cache-handler/open-next-cache-handler.ts

@@ -0,0 +1,148 @@
+import type {
+  CacheHandler,
+  CacheHandlerContext,
+  CacheHandlerValue,
+} from "next/dist/server/lib/incremental-cache";
+import {
+  NEXT_BODY_SUFFIX,
+  NEXT_DATA_SUFFIX,
+  NEXT_HTML_SUFFIX,
+  RSC_PREFETCH_SUFFIX,
+  RSC_SUFFIX,
+  SEED_DATA_DIR,
+} from "../../constants/incremental-cache";
+import { getSeedBodyFile, getSeedMetaFile, getSeedTextFile, parseCtx } from "./utils";
+import type { IncrementalCacheValue } from "next/dist/server/response-cache";
+import type { KVNamespace } from "@cloudflare/workers-types";
+
+type CacheEntry = {
+  lastModified: number;
+  value: IncrementalCacheValue | null;
+};
+
+export class OpenNextCacheHandler implements CacheHandler {
+  protected kv: KVNamespace | undefined;
+
+  protected debug: boolean = !!process.env.NEXT_PRIVATE_DEBUG_CACHE;
+
+  constructor(protected ctx: CacheHandlerContext) {
+    this.kv = process.env[process.env.__OPENNEXT_KV_BINDING_NAME] as KVNamespace | undefined;
+  }
+
+  async get(...args: Parameters<CacheHandler["get"]>): Promise<CacheHandlerValue | null> {
+    const [key, _ctx] = args;
+    const ctx = parseCtx(_ctx);
+
+    if (this.debug) console.log(`cache - get: ${key}, ${ctx?.kind}`);
+
+    if (this.kv !== undefined) {
+      try {
+        const value = await this.kv.get<CacheEntry>(key, "json");
+        if (value) return value;
+      } catch (e) {
+        console.error(`Failed to get value for key = ${key}: ${e}`);
+      }
+    }
+
+    // Check for seed data from the file-system.
+
+    // we don't check for seed data for fetch or image cache entries
+    if (ctx?.kind === "FETCH" || ctx?.kind === "IMAGE") return null;
+
+    const seedKey = `http://assets.local/${SEED_DATA_DIR}/${key}`.replace(/\/\//g, "/");
+
+    if (ctx?.kind === "APP" || ctx?.kind === "APP_ROUTE") {
+      const fallbackBody = await getSeedBodyFile(seedKey, NEXT_BODY_SUFFIX);
+      if (fallbackBody) {
+        const meta = await getSeedMetaFile(seedKey);
+        return {
+          lastModified: meta?.lastModified,
+          value: {
+            kind: (ctx.kind === "APP_ROUTE" ? ctx.kind : "ROUTE") as Extract<
+              IncrementalCacheValue["kind"],
+              "ROUTE"
+            >,
+            body: fallbackBody,
+            status: meta?.status ?? 200,
+            headers: meta?.headers ?? {},
+          },
+        };
+      }
+
+      if (ctx.kind === "APP_ROUTE") {
+        return null;
+      }
+    }
+
+    const seedHtml = await getSeedTextFile(seedKey, NEXT_HTML_SUFFIX);
+    if (!seedHtml) return null; // we're only checking for prerendered routes at the moment
+
+    if (ctx?.kind === "PAGES" || ctx?.kind === "APP" || ctx?.kind === "APP_PAGE") {
+      const metaPromise = getSeedMetaFile(seedKey);
+
+      let pageDataPromise: Promise<Buffer | string | undefined> = Promise.resolve(undefined);
+      if (!ctx.isFallback) {
+        const rscSuffix = ctx.isRoutePPREnabled ? RSC_PREFETCH_SUFFIX : RSC_SUFFIX;
+
+        if (ctx.kind === "APP_PAGE") {
+          pageDataPromise = getSeedBodyFile(seedKey, rscSuffix);
+        } else {
+          pageDataPromise = getSeedTextFile(seedKey, ctx.kind === "APP" ? rscSuffix : NEXT_DATA_SUFFIX);
+        }
+      }
+
+      const [meta, pageData] = await Promise.all([metaPromise, pageDataPromise]);
+
+      return {
+        lastModified: meta?.lastModified,
+        value: {
+          kind: (ctx.kind === "APP_PAGE" ? "APP_PAGE" : "PAGE") as Extract<
+            IncrementalCacheValue["kind"],
+            "PAGE"
+          >,
+          html: seedHtml,
+          pageData: pageData ?? "",
+          ...(ctx.kind === "APP_PAGE" && { rscData: pageData }),
+          postponed: meta?.postponed,
+          status: meta?.status,
+          headers: meta?.headers,
+        },
+      };
+    }
+
+    return null;
+  }
+
+  async set(...args: Parameters<CacheHandler["set"]>) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [key, entry, _ctx] = args;
+
+    if (this.kv === undefined) {
+      return;
+    }
+
+    if (this.debug) console.log(`cache - set: ${key}`);
+
+    const data: CacheEntry = {
+      lastModified: Date.now(),
+      value: entry,
+    };
+
+    try {
+      await this.kv.put(key, JSON.stringify(data));
+    } catch (e) {
+      console.error(`Failed to set value for key = ${key}: ${e}`);
+    }
+  }
+
+  async revalidateTag(...args: Parameters<CacheHandler["revalidateTag"]>) {
+    const [tags] = args;
+    if (this.kv === undefined) {
+      return;
+    }
+
+    if (this.debug) console.log(`cache - revalidateTag: ${JSON.stringify([tags].flat())}`);
+  }
+
+  resetRequestCache(): void {}
+}

package/dist/cli/templates/cache-handler/utils.ts

@@ -0,0 +1,41 @@
+import type { IncrementalCache } from "next/dist/server/lib/incremental-cache";
+import { NEXT_META_SUFFIX } from "../../constants/incremental-cache";
+
+type PrerenderedRouteMeta = {
+  lastModified: number;
+  status?: number;
+  headers?: Record<string, string>;
+  postponed?: string;
+};
+
+type EntryKind =
+  | "APP" // .body, .html - backwards compat
+  | "PAGES"
+  | "FETCH"
+  | "APP_ROUTE" // .body
+  | "APP_PAGE" // .html
+  | "IMAGE"
+  | undefined;
+
+async function getAsset<T>(key: string, cb: (resp: Response) => T): Promise<Awaited<T> | undefined> {
+  const resp = await process.env.ASSETS.fetch(key);
+  return resp.status === 200 ? await cb(resp) : undefined;
+}
+
+export function getSeedBodyFile(key: string, suffix: string) {
+  return getAsset(key + suffix, (resp) => resp.arrayBuffer() as Promise<Buffer>);
+}
+
+export function getSeedTextFile(key: string, suffix: string) {
+  return getAsset(key + suffix, (resp) => resp.text());
+}
+
+export function getSeedMetaFile(key: string) {
+  return getAsset(key + NEXT_META_SUFFIX, (resp) => resp.json<PrerenderedRouteMeta>());
+}
+
+export function parseCtx(ctx: Parameters<IncrementalCache["get"]>[1] = {}) {
+  return { ...ctx, kind: ctx?.kindHint?.toUpperCase() } as
+    | (typeof ctx & { kind?: EntryKind; isFallback?: boolean; isRoutePPREnabled?: boolean })
+    | undefined;
+}

package/dist/{templates → cli/templates}/shims/node-fs.ts

@@ -17,7 +17,7 @@ function existsSync(path: string) {
   return FILES.has(path);
 }
 
-async function readFile(path: string, options: unknown): Promise<any> {
+async function readFile(path: string, options: unknown): Promise<unknown> {
   console.log(
     "readFile",
     { path, options }

package/dist/cli/templates/worker.ts

@@ -0,0 +1,156 @@
+import type { ExportedHandler, Fetcher } from "@cloudflare/workers-types";
+import { NodeNextRequest, NodeNextResponse } from "next/dist/server/base-http/node";
+import { AsyncLocalStorage } from "node:async_hooks";
+import type { CloudflareContext } from "../../api";
+import type { IncomingMessage } from "node:http";
+import { MockedResponse } from "next/dist/server/lib/mock-request";
+import type { NextConfig } from "next";
+import type { NodeRequestHandler } from "next/dist/server/next-server";
+import Stream from "node:stream";
+
+const NON_BODY_RESPONSES = new Set([101, 204, 205, 304]);
+
+const cloudflareContextALS = new AsyncLocalStorage<CloudflareContext>();
+
+// Note: this symbol needs to be kept in sync with the one defined in `src/api/get-cloudflare-context.ts`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(globalThis as any)[Symbol.for("__cloudflare-context__")] = new Proxy(
+  {},
+  {
+    ownKeys: () => Reflect.ownKeys(cloudflareContextALS.getStore()!),
+    getOwnPropertyDescriptor: (_, ...args) =>
+      Reflect.getOwnPropertyDescriptor(cloudflareContextALS.getStore()!, ...args),
+    get: (_, property) => Reflect.get(cloudflareContextALS.getStore()!, property),
+    set: (_, property, value) => Reflect.set(cloudflareContextALS.getStore()!, property, value),
+  }
+);
+
+// Injected at build time
+const nextConfig: NextConfig = JSON.parse(process.env.__NEXT_PRIVATE_STANDALONE_CONFIG ?? "{}");
+
+let requestHandler: NodeRequestHandler | null = null;
+
+export default {
+  async fetch(request, env, ctx) {
+    return cloudflareContextALS.run({ env, ctx, cf: request.cf }, async () => {
+      if (requestHandler == null) {
+        globalThis.process.env = { ...globalThis.process.env, ...env };
+        // Note: "next/dist/server/next-server" is a cjs module so we have to `require` it not to confuse esbuild
+        //       (since esbuild can run in projects with different module resolutions)
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const NextNodeServer = require("next/dist/server/next-server")
+          .default as typeof import("next/dist/server/next-server").default;
+
+        requestHandler = new NextNodeServer({
+          conf: nextConfig,
+          customServer: false,
+          dev: false,
+          dir: "",
+          minimalMode: false,
+        }).getRequestHandler();
+      }
+
+      const url = new URL(request.url);
+
+      if (url.pathname === "/_next/image") {
+        const imageUrl =
+          url.searchParams.get("url") ?? "https://developers.cloudflare.com/_astro/logo.BU9hiExz.svg";
+        if (imageUrl.startsWith("/")) {
+          return env.ASSETS.fetch(new URL(imageUrl, request.url));
+        }
+        return fetch(imageUrl, { cf: { cacheEverything: true } });
+      }
+
+      const { req, res, webResponse } = getWrappedStreams(request, ctx);
+
+      ctx.waitUntil(Promise.resolve(requestHandler(new NodeNextRequest(req), new NodeNextResponse(res))));
+
+      return await webResponse();
+    });
+  },
+} as ExportedHandler<{ ASSETS: Fetcher }>;
+
+function getWrappedStreams(request: Request, ctx: ExecutionContext) {
+  const url = new URL(request.url);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const reqBody = request.body && Stream.Readable.fromWeb(request.body as any);
+  const req = (reqBody ?? Stream.Readable.from([])) as IncomingMessage;
+  req.httpVersion = "1.0";
+  req.httpVersionMajor = 1;
+  req.httpVersionMinor = 0;
+  req.url = url.href.slice(url.origin.length);
+  req.headers = Object.fromEntries([...request.headers]);
+  req.method = request.method;
+  Object.defineProperty(req, "__node_stream__", {
+    value: true,
+    writable: false,
+  });
+  Object.defineProperty(req, "headersDistinct", {
+    get() {
+      const headers: Record<string, string[]> = {};
+      for (const [key, value] of Object.entries(req.headers)) {
+        if (!value) continue;
+        headers[key] = Array.isArray(value) ? value : [value];
+      }
+      return headers;
+    },
+  });
+
+  const { readable, writable } = new IdentityTransformStream();
+  const resBodyWriter = writable.getWriter();
+
+  const res = new MockedResponse({
+    resWriter: (chunk) => {
+      resBodyWriter.write(typeof chunk === "string" ? Buffer.from(chunk) : chunk).catch((err) => {
+        if (
+          err.message.includes("WritableStream has been closed") ||
+          err.message.includes("Network connection lost")
+        ) {
+          // safe to ignore
+          return;
+        }
+        console.error("Error in resBodyWriter.write");
+        console.error(err);
+      });
+      return true;
+    },
+  });
+
+  // It's implemented as a no-op, but really it should mark the headers as done
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  res.flushHeaders = () => (res as any).headPromiseResolve();
+
+  // Only allow statusCode to be modified if not sent
+  let { statusCode } = res;
+  Object.defineProperty(res, "statusCode", {
+    get: function () {
+      return statusCode;
+    },
+    set: function (val) {
+      if (this.finished || this.headersSent) {
+        return;
+      }
+      statusCode = val;
+    },
+  });
+
+  // Make sure the writer is eventually closed
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ctx.waitUntil((res as any).hasStreamed.finally(() => resBodyWriter.close().catch(() => {})));
+
+  return {
+    res,
+    req,
+    webResponse: async () => {
+      await res.headPromise;
+      // TODO: remove this once streaming with compression is working nicely
+      res.setHeader("content-encoding", "identity");
+      return new Response(NON_BODY_RESPONSES.has(res.statusCode) ? null : readable, {
+        status: res.statusCode,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        headers: (res as any).headers,
+      });
+    },
+  };
+}

package/package.json

@@ -1,16 +1,24 @@
 {
   "name": "@opennextjs/cloudflare",
   "description": "Cloudflare builder for next apps",
-  "version": "0.0.0-fd3c2b9",
-  "bin": "dist/index.mjs",
+  "version": "0.1.0",
+  "bin": "dist/cli/index.mjs",
+  "main": "./dist/api/index.mjs",
+  "types": "./dist/api/index.d.mts",
+  "exports": {
+    ".": {
+      "import": "./dist/api/index.mjs",
+      "types": "./dist/api/index.d.mts"
+    }
+  },
   "files": [
     "README.md",
     "dist"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/flarelabs-net/poc-next.git",
-    "directory": "builder"
+    "url": "https://github.com/opennextjs/opennextjs-cloudflare.git",
+    "directory": "packages/cloudflare"
   },
   "keywords": [
     "cloudflare",
@@ -19,23 +27,38 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/flarelabs-net/poc-next/issues"
+    "url": "https://github.com/opennextjs/opennextjs-cloudflare/issues"
   },
-  "homepage": "https://github.com/flarelabs-net/poc-next",
+  "homepage": "https://github.com/opennextjs/opennextjs-cloudflare",
   "devDependencies": {
+    "@cloudflare/workers-types": "^4.20240925.0",
+    "@eslint/js": "^9.11.1",
+    "@tsconfig/strictest": "^2.0.5",
     "@types/node": "^22.2.0",
     "esbuild": "^0.23.0",
+    "eslint": "^9.11.1",
+    "eslint-plugin-unicorn": "^55.0.0",
     "glob": "^11.0.0",
+    "globals": "^15.9.0",
+    "next": "14.2.11",
+    "package-manager-detector": "^0.2.0",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
+    "typescript-eslint": "^8.7.0",
     "vitest": "^2.1.1"
   },
   "dependencies": {
     "ts-morph": "^23.0.0"
   },
+  "peerDependencies": {
+    "wrangler": "^3.78.10"
+  },
   "scripts": {
     "build": "tsup",
     "build:watch": "tsup --watch src",
+    "lint:check": "eslint",
+    "lint:fix": "eslint --fix",
+    "ts:check": "tsc --noEmit",
     "test": "vitest --run",
     "test:watch": "vitest"
   }

package/dist/templates/worker.ts

@@ -1,128 +0,0 @@
-import Stream from "node:stream";
-import type { NextConfig } from "next";
-import { NodeNextRequest, NodeNextResponse } from "next/dist/server/base-http/node";
-import { MockedResponse } from "next/dist/server/lib/mock-request";
-import NextNodeServer, { NodeRequestHandler } from "next/dist/server/next-server";
-import type { IncomingMessage } from "node:http";
-
-const NON_BODY_RESPONSES = new Set([101, 204, 205, 304]);
-
-// Injected at build time
-const nextConfig: NextConfig = JSON.parse(process.env.__NEXT_PRIVATE_STANDALONE_CONFIG ?? "{}");
-
-let requestHandler: NodeRequestHandler | null = null;
-
-export default {
-  async fetch(request: Request, env: any, ctx: any) {
-    if (requestHandler == null) {
-      globalThis.process.env = { ...globalThis.process.env, ...env };
-      requestHandler = new NextNodeServer({
-        conf: { ...nextConfig, env },
-        customServer: false,
-        dev: false,
-        dir: "",
-        minimalMode: false,
-      }).getRequestHandler();
-    }
-
-    const url = new URL(request.url);
-
-    if (url.pathname === "/_next/image") {
-      let imageUrl =
-        url.searchParams.get("url") ?? "https://developers.cloudflare.com/_astro/logo.BU9hiExz.svg";
-      if (imageUrl.startsWith("/")) {
-        return env.ASSETS.fetch(new URL(imageUrl, request.url));
-      }
-      return fetch(imageUrl, { cf: { cacheEverything: true } } as any);
-    }
-
-    const { req, res, webResponse } = getWrappedStreams(request, ctx);
-
-    ctx.waitUntil(requestHandler(new NodeNextRequest(req), new NodeNextResponse(res)));
-
-    return await webResponse();
-  },
-};
-
-function getWrappedStreams(request: Request, ctx: any) {
-  const url = new URL(request.url);
-
-  const req = (
-    request.body ? Stream.Readable.fromWeb(request.body as any) : Stream.Readable.from([])
-  ) as IncomingMessage;
-  req.httpVersion = "1.0";
-  req.httpVersionMajor = 1;
-  req.httpVersionMinor = 0;
-  req.url = url.href.slice(url.origin.length);
-  req.headers = Object.fromEntries([...request.headers]);
-  req.method = request.method;
-  Object.defineProperty(req, "__node_stream__", {
-    value: true,
-    writable: false,
-  });
-  Object.defineProperty(req, "headersDistinct", {
-    get() {
-      const headers: Record<string, string[]> = {};
-      for (const [key, value] of Object.entries(req.headers)) {
-        if (!value) continue;
-        headers[key] = Array.isArray(value) ? value : [value];
-      }
-      return headers;
-    },
-  });
-
-  const { readable, writable } = new IdentityTransformStream();
-  const resBodyWriter = writable.getWriter();
-
-  const res = new MockedResponse({
-    resWriter: (chunk) => {
-      resBodyWriter.write(typeof chunk === "string" ? Buffer.from(chunk) : chunk).catch((err: any) => {
-        if (
-          err.message.includes("WritableStream has been closed") ||
-          err.message.includes("Network connection lost")
-        ) {
-          // safe to ignore
-          return;
-        }
-        console.error("Error in resBodyWriter.write");
-        console.error(err);
-      });
-      return true;
-    },
-  });
-
-  // It's implemented as a no-op, but really it should mark the headers as done
-  res.flushHeaders = () => (res as any).headPromiseResolve();
-
-  // Only allow statusCode to be modified if not sent
-  let { statusCode } = res;
-  Object.defineProperty(res, "statusCode", {
-    get: function () {
-      return statusCode;
-    },
-    set: function (val) {
-      if (this.finished || this.headersSent) {
-        console.error("headers already sent");
-        return;
-      }
-      statusCode = val;
-    },
-  });
-
-  // Make sure the writer is eventually closed
-  ctx.waitUntil((res as any).hasStreamed.finally(() => resBodyWriter.close().catch(() => {})));
-
-  return {
-    res,
-    req,
-    webResponse: async () => {
-      await res.headPromise;
-      // TODO: remove this once streaming with compression is working nicely
-      res.setHeader("content-encoding", "identity");
-      return new Response(NON_BODY_RESPONSES.has(res.statusCode) ? null : readable, {
-        status: res.statusCode,
-        headers: (res as any).headers,
-      });
-    },
-  };
-}