fixup! add asset handling

Author: vicb

packages/cloudflare/src/cli/build/build.ts

@@ -60,11 +60,6 @@ export async function build(
 	buildHelper.initOutputDir(options);
 
 	compileCache(options);
-	compileEnvFiles(options);
-	compileInit(options);
-	compileImages(options);
-	compileSkewProtection(options, config);
-
 	// Compile middleware
 	await createMiddleware(options, { forceOnlyBuildOnce: true });
 
@@ -78,6 +73,12 @@ export async function build(
 		}
 	}
 
+	compileEnvFiles(options);
+	compileInit(options);
+	compileImages(options);
+	// Compile skew protection, needs the assets to be copied first (see `createStaticAssets`)
+	compileSkewProtection(options, config);
+
 	await createServerBundle(options);
 
 	await compileDurableObjects(options);

packages/cloudflare/src/cli/build/open-next/compile-skew-protection.spec.ts

@@ -0,0 +1,158 @@
+import { describe, expect, it } from "vitest";
+
+import { filesToTree } from "./compile-skew-protection";
+
+describe("filesToTree", () => {
+	it("should return an empty tree for an empty array of paths", () => {
+		const paths: string[] = [];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({ f: [], d: {} });
+	});
+
+	it("should correctly add a single file at the root", () => {
+		const paths = ["file.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: ["file.txt"],
+			d: {},
+		});
+	});
+
+	it("should correctly add multiple files at the root", () => {
+		const paths = ["file1.txt", "file2.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: ["file1.txt", "file2.txt"],
+			d: {},
+		});
+	});
+
+	it("should correctly add a single file in a single folder", () => {
+		const paths = ["folder/file.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				folder: {
+					f: ["file.txt"],
+					d: {},
+				},
+			},
+		});
+	});
+
+	it("should correctly add multiple files in the same folder", () => {
+		const paths = ["folder/file1.txt", "folder/file2.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				folder: {
+					f: ["file1.txt", "file2.txt"],
+					d: {},
+				},
+			},
+		});
+	});
+
+	it("should correctly add files in nested folders", () => {
+		const paths = ["folder1/folder2/file.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				folder1: {
+					f: [],
+					d: { folder2: { f: ["file.txt"], d: {} } },
+				},
+			},
+		});
+	});
+
+	it("should handle mixed files and folders at different levels", () => {
+		const paths = ["root_file.txt", "folderA/fileA.txt", "folderA/subfolderB/fileB.txt", "folderC/fileC.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: ["root_file.txt"],
+			d: {
+				folderA: {
+					f: ["fileA.txt"],
+					d: {
+						subfolderB: {
+							f: ["fileB.txt"],
+							d: {},
+						},
+					},
+				},
+				folderC: {
+					f: ["fileC.txt"],
+					d: {},
+				},
+			},
+		});
+	});
+
+	it("should handle paths with leading/trailing slashes gracefully", () => {
+		const paths = ["/folder/file.txt", "another_folder/file.txt/"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				folder: {
+					f: ["file.txt"],
+					d: {},
+				},
+				another_folder: {
+					f: ["file.txt"], // Trailing slash on file name is removed by filter(Boolean)
+					d: {},
+				},
+			},
+		});
+	});
+
+	it("should handle duplicate file names in different folders", () => {
+		const paths = ["folder1/file.txt", "folder2/file.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				folder1: {
+					f: ["file.txt"],
+					d: {},
+				},
+				folder2: {
+					f: ["file.txt"],
+					d: {},
+				},
+			},
+		});
+	});
+
+	it("should handle folders with the same name but different parents", () => {
+		const paths = ["a/b/file1.txt", "c/b/file2.txt"];
+		const tree = filesToTree(paths);
+		expect(tree).toEqual({
+			f: [],
+			d: {
+				a: {
+					f: [],
+					d: {
+						b: {
+							f: ["file1.txt"],
+							d: {},
+						},
+					},
+				},
+				c: {
+					f: [],
+					d: {
+						b: {
+							f: ["file2.txt"],
+							d: {},
+						},
+					},
+				},
+			},
+		});
+	});
+});

packages/cloudflare/src/cli/build/open-next/compile-skew-protection.ts

@@ -3,14 +3,32 @@ import { fileURLToPath } from "node:url";
 
 import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
 import { build } from "esbuild";
+import { glob } from "glob";
 
 import type { OpenNextConfig } from "../../../api";
+import type { FolderNode } from "../../templates/skew-protection";
 
 export async function compileSkewProtection(options: BuildOptions, config: OpenNextConfig) {
 	const currentDir = path.join(path.dirname(fileURLToPath(import.meta.url)));
 	const templatesDir = path.join(currentDir, "../../templates");
 	const initPath = path.join(templatesDir, "skew-protection.js");
 
+	const skewProtectionEnabled = config.cloudflare?.skewProtectionEnabled ?? false;
+
+	// Create a tree of assets located inside the base path
+	const assetPath = path.join(options.outputDir, "assets", globalThis.__NEXT_BASE_PATH__ ?? "");
+	const files = await glob(`**/*`, {
+		windowsPathsNoEscape: true,
+		posix: true,
+		nodir: true,
+		absolute: false,
+		cwd: assetPath,
+	});
+	// All files located inside `_next/static` are static assets, no need to list them
+	const assetTree = filesToTree(
+		skewProtectionEnabled ? files.filter((path) => !path.startsWith("_next/static/")) : []
+	);
+
 	await build({
 		entryPoints: [initPath],
 		outdir: path.join(options.outputDir, "cloudflare"),
@@ -20,7 +38,40 @@ export async function compileSkewProtection(options: BuildOptions, config: OpenN
 		target: "esnext",
 		platform: "node",
 		define: {
-			__SKEW_PROTECTION_ENABLED__: JSON.stringify(config.cloudflare?.skewProtectionEnabled ?? false),
+			__SKEW_PROTECTION_ENABLED__: JSON.stringify(skewProtectionEnabled),
+			__CF_ASSETS_TREE__: JSON.stringify(assetTree),
 		},
 	});
 }
+
+/**
+ * Converts a list a file to tree of `FolderNode`
+ *
+ * @param paths The list of path
+ * @returns The root node of the tree
+ */
+export function filesToTree(paths: string[]): FolderNode {
+	const root: FolderNode = {
+		f: [],
+		d: {},
+	};
+
+	for (const filePath of paths) {
+		// Split the path into components, filtering out empty strings from potential leading/trailing slashes
+		const parts = filePath.split("/").filter(Boolean);
+
+		let currentNode: FolderNode = root;
+
+		// Traverse through folder parts, creating new nodes as needed
+		for (let i = 0; i < parts.length - 1; i++) {
+			const folderName = parts[i] as string;
+			if (!currentNode.d[folderName]) {
+				currentNode.d[folderName] = { f: [], d: {} };
+			}
+			currentNode = currentNode.d[folderName];
+		}
+		// Add the file to the current node's files array
+		currentNode.f.push(parts[parts.length - 1] as string);
+	}
+	return root;
+}

packages/cloudflare/src/cli/build/open-next/compileDurableObjects.ts

@@ -12,20 +12,15 @@ export function compileDurableObjects(buildOpts: BuildOptions) {
 		_require.resolve("@opennextjs/cloudflare/durable-objects/bucket-cache-purge"),
 	];
 
-	const { outputDir } = buildOpts;
-
 	const baseManifestPath = path.join(
-		outputDir,
+		buildOpts.outputDir,
 		"server-functions/default",
 		getPackagePath(buildOpts),
 		".next"
 	);
 
-	// We need to change the type in aws
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	const prerenderManifest = loadPrerenderManifest(baseManifestPath) as any;
+	const prerenderManifest = loadPrerenderManifest(baseManifestPath);
 	const previewModeId = prerenderManifest.preview.previewModeId;
-
 	const BUILD_ID = loadBuildId(baseManifestPath);
 
 	return esbuildSync(

packages/cloudflare/src/cli/templates/skew-protection.spec.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+
+import { filesToTree } from "../build/open-next/compile-skew-protection.js";
+import { isFileInTree } from "./skew-protection.js";
+
+describe("isFileInTree", () => {
+	const samplePaths = [
+		"file1.txt",
+		"folderA/fileA.txt",
+		"folderA/subfolderB/fileB.txt",
+		"folderC/fileC.txt",
+		"folderC/nested/fileD.txt",
+		"folderC/nested/anotherFile.txt",
+		"/root_file_with_slash.txt",
+	];
+	const tree = filesToTree(samplePaths);
+
+	it("should return true for a file existing at the root", () => {
+		expect(isFileInTree("file1.txt", tree)).toBe(true);
+	});
+
+	it("should return true for a file existing in a single folder", () => {
+		expect(isFileInTree("folderA/fileA.txt", tree)).toBe(true);
+	});
+
+	it("should return true for a file existing in a nested folder", () => {
+		expect(isFileInTree("folderA/subfolderB/fileB.txt", tree)).toBe(true);
+	});
+
+	it("should return true for another file in a nested folder", () => {
+		expect(isFileInTree("folderC/nested/anotherFile.txt", tree)).toBe(true);
+	});
+
+	it("should return true for a file with a leading slash if it's at the root", () => {
+		expect(isFileInTree("/root_file_with_slash.txt", tree)).toBe(true);
+	});
+
+	it("should return false for a file that does not exist at the root", () => {
+		expect(isFileInTree("nonexistent.txt", tree)).toBe(false);
+	});
+
+	it("should return false for a file that does not exist in an existing folder", () => {
+		expect(isFileInTree("folderA/nonexistent.txt", tree)).toBe(false);
+	});
+
+	it("should return false for a file that does not exist in a nonexistent folder", () => {
+		expect(isFileInTree("nonexistentFolder/file.txt", tree)).toBe(false);
+	});
+
+	it("should return false for a file that does not exist in a nested nonexistent folder", () => {
+		expect(isFileInTree("folderA/nonexistentSubfolder/file.txt", tree)).toBe(false);
+	});
+
+	it("should return false for an empty filename", () => {
+		expect(isFileInTree("", tree)).toBe(false);
+	});
+
+	it("should return false for a filename that is just a folder name", () => {
+		expect(isFileInTree("folderA", tree)).toBe(false);
+		expect(isFileInTree("folderA/subfolderB", tree)).toBe(false);
+	});
+
+	it("should return false for a filename that is just a folder name with a trailing slash", () => {
+		expect(isFileInTree("folderA/", tree)).toBe(false);
+		expect(isFileInTree("folderA/subfolderB/", tree)).toBe(false);
+	});
+
+	it("should return false for a file in an incorrect path segment", () => {
+		expect(isFileInTree("folderC/fileA.txt", tree)).toBe(false); // fileA.txt is in folderA
+	});
+
+	it("should handle a tree with no files gracefully", () => {
+		const emptyTree = filesToTree([]);
+		expect(isFileInTree("anyfile.txt", emptyTree)).toBe(false);
+		expect(isFileInTree("folder/file.txt", emptyTree)).toBe(false);
+	});
+});