@opennextjs/cloudflare 0.0.0-5454280 → 0.0.0-fd3c2b9

package/README.md

@@ -1,32 +1,21 @@
 # Next.js builder for Cloudflare
 
-## Build your app
-
-- update the `next.config.mjs` as follows
-
-  ```typescript
-  /** @type {import('next').NextConfig} */
-  const nextConfig = {
-    output: "standalone",
-    experimental: {
-      serverMinification: false,
-    },
-  };
-
-  export default nextConfig;
-  ```
+## Configure your app
 
 - add the following `devDependency` to the `package.json`:
 
-  ```json
-  "node-url": "npm:url@^0.11.4",
-  "wrangler": "^3.77.0"
+  ```bash
+  pnpm add -D wrangler@latest @opennextjs/cloudflare
   ```
 
-- Execute `npx @flarelabs-net/builder@latest` in your app folder
-
 ## Serve your app
 
+- build the app and adapt it for Cloudflare
+
+  ```bash
+  pnpx cloudflare
+  ```
+
 - add a `wrangler.toml` at the root of your project
 
   ```toml
@@ -36,11 +25,13 @@
 
   compatibility_date = "2024-08-29"
   compatibility_flags = ["nodejs_compat_v2"]
-  workers_dev = true
-  minify = false
 
   # Use the new Workers + Assets to host the static frontend files
   experimental_assets = { directory = ".worker-next/assets", binding = "ASSETS" }
   ```
 
-- Use `wrangler dev`
+- Preview the app in Wrangler
+
+  ```bash
+  pnpm wrangler dev
+  ```

package/dist/index.mjs

@@ -309,7 +309,7 @@ function runNextBuildCommand(packager, nextAppDir2) {
 
 // src/build/build-worker.ts
 import { build } from "esbuild";
-import { readdirSync as readdirSync2, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "node:fs";
+import { readFileSync as readFileSync4 } from "node:fs";
 import { cp, readFile, writeFile } from "node:fs/promises";
 
 // src/build/patches/investigated/patch-require.ts
@@ -6842,12 +6842,138 @@ function patchWranglerDeps(paths) {
   writeFileSync(tracerFile, pacthedTracer);
 }
 
+// src/build/patches/investigated/update-webpack-chunks-file/index.ts
+import { readdirSync as readdirSync2, readFileSync as readFileSync3, writeFileSync as writeFileSync2 } from "node:fs";
+
+// src/build/patches/investigated/update-webpack-chunks-file/get-chunk-installation-identifiers.ts
+import * as ts from "ts-morph";
+async function getChunkInstallationIdentifiers(sourceFile) {
+  const installChunkDeclaration = getInstallChunkDeclaration(sourceFile);
+  const installedChunksDeclaration = getInstalledChunksDeclaration(sourceFile, installChunkDeclaration);
+  return {
+    installChunk: installChunkDeclaration.getName(),
+    installedChunks: installedChunksDeclaration.getName()
+  };
+}
+function getInstallChunkDeclaration(sourceFile) {
+  const installChunkDeclaration = sourceFile.getDescendantsOfKind(ts.SyntaxKind.VariableDeclaration).find((declaration) => {
+    const arrowFunction = declaration.getInitializerIfKind(ts.SyntaxKind.ArrowFunction);
+    if (!arrowFunction) return false;
+    const functionParameters = arrowFunction.getParameters();
+    if (functionParameters.length !== 1) return false;
+    const arrowFunctionBodyBlock = arrowFunction.getFirstChildByKind(ts.SyntaxKind.Block);
+    if (!arrowFunctionBodyBlock) return false;
+    const statementKinds = arrowFunctionBodyBlock.getStatements().map((statement) => statement.getKind());
+    const forInStatements = statementKinds.filter((s) => s === ts.SyntaxKind.ForInStatement);
+    const forStatements = statementKinds.filter((s) => s === ts.SyntaxKind.ForStatement);
+    if (forInStatements.length !== 1 || forStatements.length !== 1) return false;
+    const parameterName = functionParameters[0].getText();
+    const functionParameterAccessedProperties = arrowFunctionBodyBlock.getDescendantsOfKind(ts.SyntaxKind.PropertyAccessExpression).filter(
+      (propertyAccessExpression) => propertyAccessExpression.getExpression().getText() === parameterName
+    ).map((propertyAccessExpression) => propertyAccessExpression.getName());
+    if (functionParameterAccessedProperties.join(", ") !== "modules, ids, runtime") return false;
+    return true;
+  });
+  if (!installChunkDeclaration) {
+    throw new Error("ERROR: unable to find the installChunk function declaration");
+  }
+  return installChunkDeclaration;
+}
+function getInstalledChunksDeclaration(sourceFile, installChunkDeclaration) {
+  const allVariableDeclarations = sourceFile.getDescendantsOfKind(ts.SyntaxKind.VariableDeclaration);
+  const installChunkDeclarationIdx = allVariableDeclarations.findIndex(
+    (declaration) => declaration === installChunkDeclaration
+  );
+  const installedChunksDeclaration = allVariableDeclarations[installChunkDeclarationIdx - 1];
+  if (!installedChunksDeclaration?.getInitializer()?.isKind(ts.SyntaxKind.ObjectLiteralExpression)) {
+    throw new Error("ERROR: unable to find the installedChunks declaration");
+  }
+  return installedChunksDeclaration;
+}
+
+// src/build/patches/investigated/update-webpack-chunks-file/get-file-content-with-updated-webpack-f-require-code.ts
+import * as ts2 from "ts-morph";
+async function getFileContentWithUpdatedWebpackFRequireCode(sourceFile, { installedChunks, installChunk }, chunks) {
+  const webpackFRequireFunction = sourceFile.getDescendantsOfKind(ts2.SyntaxKind.ArrowFunction).find((arrowFunction) => {
+    const binaryExpression = arrowFunction.getFirstAncestorByKind(ts2.SyntaxKind.BinaryExpression);
+    if (!binaryExpression) return false;
+    const binaryExpressionLeft = binaryExpression.getLeft();
+    if (!binaryExpressionLeft.getText().endsWith(".f.require")) return false;
+    const binaryExpressionOperator = binaryExpression.getOperatorToken();
+    if (binaryExpressionOperator.getText() !== "=") return false;
+    const binaryExpressionRight = binaryExpression.getRight();
+    if (binaryExpressionRight !== arrowFunction) return false;
+    const arrowFunctionBody = arrowFunction.getBody();
+    if (!arrowFunctionBody.isKind(ts2.SyntaxKind.Block)) return false;
+    const arrowFunctionBodyText = arrowFunctionBody.getText();
+    const functionUsesChunkInstallationVariables = arrowFunctionBodyText.includes(installChunk) && arrowFunctionBodyText.includes(installedChunks);
+    if (!functionUsesChunkInstallationVariables) return false;
+    const functionParameters = arrowFunction.getParameters();
+    if (functionParameters.length !== 2) return false;
+    const callsInstallChunk = arrowFunctionBody.getDescendantsOfKind(ts2.SyntaxKind.CallExpression).some((callExpression) => callExpression.getExpression().getText() === installChunk);
+    if (!callsInstallChunk) return false;
+    const functionFirstParameterName = functionParameters[0]?.getName();
+    const accessesInstalledChunksUsingItsFirstParameter = arrowFunctionBody.getDescendantsOfKind(ts2.SyntaxKind.ElementAccessExpression).some((elementAccess) => {
+      return elementAccess.getExpression().getText() === installedChunks && elementAccess.getArgumentExpression()?.getText() === functionFirstParameterName;
+    });
+    if (!accessesInstalledChunksUsingItsFirstParameter) return false;
+    return true;
+  });
+  if (!webpackFRequireFunction) {
+    throw new Error("ERROR: unable to find the webpack f require function declaration");
+  }
+  const functionParameterNames = webpackFRequireFunction.getParameters().map((parameter) => parameter.getName());
+  const chunkId = functionParameterNames[0];
+  const functionBody = webpackFRequireFunction.getBody();
+  functionBody.insertStatements(0, [
+    `if (${installedChunks}[${chunkId}]) return;`,
+    ...chunks.map(
+      (chunk) => `
+if(${chunkId} === ${chunk}) return ${installChunk}(require("./chunks/${chunk}.js"));`
+    )
+  ]);
+  return sourceFile.print();
+}
+
+// src/build/utils/ts-parse-file.ts
+import * as ts3 from "ts-morph";
+function tsParseFile(fileContent) {
+  const project = new ts3.Project();
+  const sourceFile = project.createSourceFile("file.js", fileContent);
+  return sourceFile;
+}
+
+// src/build/patches/investigated/update-webpack-chunks-file/get-updated-webpack-chunks-file-content.ts
+async function getUpdatedWebpackChunksFileContent(fileContent, chunks) {
+  const tsSourceFile = tsParseFile(fileContent);
+  const chunkInstallationIdentifiers = await getChunkInstallationIdentifiers(tsSourceFile);
+  const updatedFileContent = getFileContentWithUpdatedWebpackFRequireCode(
+    tsSourceFile,
+    chunkInstallationIdentifiers,
+    chunks
+  );
+  return updatedFileContent;
+}
+
+// src/build/patches/investigated/update-webpack-chunks-file/index.ts
+async function updateWebpackChunksFile(nextjsAppPaths) {
+  console.log("# updateWebpackChunksFile");
+  const webpackRuntimeFile = `${nextjsAppPaths.standaloneAppServerDir}/webpack-runtime.js`;
+  const fileContent = readFileSync3(webpackRuntimeFile, "utf-8");
+  const chunks = readdirSync2(`${nextjsAppPaths.standaloneAppServerDir}/chunks`).filter((chunk) => /^\d+\.js$/.test(chunk)).map((chunk) => {
+    console.log(` - chunk ${chunk}`);
+    return chunk.replace(/\.js$/, "");
+  });
+  const updatedFileContent = await getUpdatedWebpackChunksFileContent(fileContent, chunks);
+  writeFileSync2(webpackRuntimeFile, updatedFileContent);
+}
+
 // src/build/build-worker.ts
 async function buildWorker(outputDir2, nextjsAppPaths, templateSrcDir) {
   const templateDir = copyTemplates(templateSrcDir, nextjsAppPaths);
   const workerEntrypoint = `${templateDir}/worker.ts`;
   const workerOutputFile = `${outputDir2}/index.mjs`;
-  const nextConfigStr = readFileSync3(nextjsAppPaths.standaloneAppDir + "/server.js", "utf8")?.match(
+  const nextConfigStr = readFileSync4(nextjsAppPaths.standaloneAppDir + "/server.js", "utf8")?.match(
     /const nextConfig = ({.+?})\n/
   )?.[1] ?? {};
   console.log(`\x1B[35m\u2699\uFE0F Bundling the worker file...
@@ -6954,31 +7080,6 @@ async function updateWorkerBundledCode(workerOutputFile, nextjsAppPaths) {
   patchedCode = inlineEvalManifest(patchedCode, nextjsAppPaths);
   await writeFile(workerOutputFile, patchedCode);
 }
-async function updateWebpackChunksFile(nextjsAppPaths) {
-  console.log("# updateWebpackChunksFile");
-  const webpackRuntimeFile = `${nextjsAppPaths.standaloneAppServerDir}/webpack-runtime.js`;
-  console.log({ webpackRuntimeFile });
-  const fileContent = readFileSync3(webpackRuntimeFile, "utf-8");
-  const chunks = readdirSync2(`${nextjsAppPaths.standaloneAppServerDir}/chunks`).filter((chunk) => /^\d+\.js$/.test(chunk)).map((chunk) => {
-    console.log(` - chunk ${chunk}`);
-    return chunk.replace(/\.js$/, "");
-  });
-  const updatedFileContent = fileContent.replace(
-    "__webpack_require__.f.require = (chunkId, promises) => {",
-    `__webpack_require__.f.require = (chunkId, promises) => {
-	if (installedChunks[chunkId]) return;
-	${chunks.map(
-      (chunk) => `
-	  if (chunkId === ${chunk}) {
-		installChunk(require("./chunks/${chunk}.js"));
-		return;
-	  }
-	`
-    ).join("\n")}
-  `
-  );
-  writeFileSync2(webpackRuntimeFile, updatedFileContent);
-}
 function createFixRequiresESBuildPlugin(templateDir) {
   return {
     name: "replaceRelative",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opennextjs/cloudflare",
   "description": "Cloudflare builder for next apps",
-  "version": "0.0.0-5454280",
+  "version": "0.0.0-fd3c2b9",
   "bin": "dist/index.mjs",
   "files": [
     "README.md",
@@ -23,16 +23,20 @@
   },
   "homepage": "https://github.com/flarelabs-net/poc-next",
   "devDependencies": {
-    "@cloudflare/workers-types": "^4.20240909.0",
     "@types/node": "^22.2.0",
     "esbuild": "^0.23.0",
     "glob": "^11.0.0",
-    "next": "14.2.5",
     "tsup": "^8.2.4",
-    "typescript": "^5.5.4"
+    "typescript": "^5.5.4",
+    "vitest": "^2.1.1"
+  },
+  "dependencies": {
+    "ts-morph": "^23.0.0"
   },
   "scripts": {
     "build": "tsup",
-    "build:watch": "tsup --watch src"
+    "build:watch": "tsup --watch src",
+    "test": "vitest --run",
+    "test:watch": "vitest"
   }
 }