remove use of astring (#188)

* remove use of astring

resolves #151

.changeset/pretty-goats-battle.md

@@ -0,0 +1,16 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+remove astring dependency
+
+remove the `astring` dependency and by doing so basically just create and edit
+javascript code via string manipulations.
+
+this should speed up the experimental minification (since we don't generate js code
+from ASTs anymore) and avoid potential bugs in the `astring` library (like #151)
+
+note that this is not the cleanest solution and that we should look into implementing
+more robust and stable javascript code handling via AST visiting and manipulations
+(but currently that has proven quite problematic since modern javascript libraries that
+allow such code modding have turned out to be very slow, significantly impacting DX)

package.json

@@ -23,7 +23,6 @@
 	"dependencies": {
 		"acorn": "^8.8.0",
 		"ast-types": "^0.14.2",
-		"astring": "^1.8.4",
 		"chalk": "^5.2.0",
 		"chokidar": "^3.5.3",
 		"cookie": "^0.5.0",

src/buildApplication/generateFunctionsMap.ts

@@ -1,8 +1,8 @@
 import { readFile, writeFile, mkdir, rm, readdir, copyFile } from 'fs/promises';
 import { exit } from 'process';
 import { dirname, join, relative, resolve } from 'path';
+import type { Node } from 'acorn';
 import { parse } from 'acorn';
-import { generate } from 'astring';
 import {
 	formatRoutePath,
 	normalizePath,
@@ -290,6 +290,7 @@ function extractWebpackChunks(
 	extractedWebpackChunks: Map<number, string>;
 } {
 	const webpackChunks = new Map<number, string>();
+	const webpackChunksCodeReplaceMap = new Map<string, string>();
 
 	const parsedContents = parse(functionContents, {
 		ecmaVersion: 'latest',
@@ -298,53 +299,48 @@ function extractWebpackChunks(
 
 	const chunks = parsedContents.body.flatMap(getWebpackChunksFromStatement);
 
-	for (const chunk of chunks) {
+	chunks.forEach(chunk => {
 		const key = (chunk.key as AST.NumericLiteralKind).value;
 
-		if (key in existingWebpackChunks) {
-			if (existingWebpackChunks.get(key) !== generate(chunk.value)) {
-				cliError(
-					`
+		const chunkExpressionCode = functionContents.slice(
+			(chunk.value as Node).start,
+			(chunk.value as Node).end
+		);
+
+		if (
+			existingWebpackChunks.has(key) &&
+			existingWebpackChunks.get(key) !== chunkExpressionCode
+		) {
+			cliError(
+				`
 							ERROR: Detected a collision with '--experimental-minify'.
 							       Try removing the '--experimental-minify' argument.
 						`,
-					{ spaced: true }
-				);
-				exit(1);
-			}
+				{ spaced: true }
+			);
+			exit(1);
 		}
 
-		webpackChunks.set(key, generate(chunk.value));
+		webpackChunks.set(key, chunkExpressionCode);
 
 		const chunkFilePath = join(tmpWebpackDir, `${key}.js`);
 
-		const newValue = {
-			type: 'MemberExpression',
-			object: {
-				type: 'CallExpression',
-				callee: {
-					type: 'Identifier',
-					name: 'require',
-				},
-				arguments: [
-					{
-						type: 'Literal',
-						value: chunkFilePath,
-						raw: JSON.stringify(chunkFilePath),
-					},
-				],
-			},
-			property: {
-				type: 'Identifier',
-				name: 'default',
-			},
-		};
+		const newChunkExpressionCode = `require(${JSON.stringify(
+			chunkFilePath
+		)}).default`;
 
-		(chunk as unknown as { value: unknown }).value = newValue;
-	}
+		webpackChunksCodeReplaceMap.set(
+			chunkExpressionCode,
+			newChunkExpressionCode
+		);
+	});
+
+	webpackChunksCodeReplaceMap.forEach((newChunkCode, chunkCode) => {
+		functionContents = functionContents.replace(chunkCode, newChunkCode);
+	});
 
 	return {
-		updatedFunctionContents: generate(parsedContents),
+		updatedFunctionContents: functionContents,
 		extractedWebpackChunks: webpackChunks,
 	};
 }