From d7086fbf439720a1421bdf60416317192c77425c Mon Sep 17 00:00:00 2001
From: Shah Shalin <shalinshh723@gmail.com>
Date: Thu, 30 Jan 2025 14:23:42 +0530
Subject: [PATCH 01/18] fix: added a proxy API route which will make request to
 our WordPress server for the required module. Replaced the WordPress url from
 our module handle with our API route.

---
 examples/nextjs/starter/package-lock.json     | 106 ++++++++++++++++++
 .../api/proxy/js/module/[...path]/route.ts    |  57 ++++++++++
 .../next/src/components/script-module.tsx     |   8 +-
 .../template-renderer/template-scripts.tsx    |   2 +-
 4 files changed, 169 insertions(+), 4 deletions(-)
 create mode 100644 examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts

diff --git a/examples/nextjs/starter/package-lock.json b/examples/nextjs/starter/package-lock.json
index be658380..b3e6f780 100644
--- a/examples/nextjs/starter/package-lock.json
+++ b/examples/nextjs/starter/package-lock.json
@@ -123,6 +123,7 @@
 			}
 		},
 		"../../../packages/next": {
+			"name": "@snapwp/next",
 			"version": "0.0.1",
 			"dependencies": {
 				"html-react-parser": "^5.1.12",
@@ -3031,6 +3032,111 @@
 				"node": ">= 10"
 			}
 		},
+		"node_modules/@next/swc-darwin-x64": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.1.6.tgz",
+			"integrity": "sha512-x1jGpbHbZoZ69nRuogGL2MYPLqohlhnT9OCU6E6QFewwup+z+M6r8oU47BTeJcWsF2sdBahp5cKiAcDbwwK/lg==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-arm64-gnu": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.1.6.tgz",
+			"integrity": "sha512-jar9sFw0XewXsBzPf9runGzoivajeWJUc/JkfbLTC4it9EhU8v7tCRLH7l5Y1ReTMN6zKJO0kKAGqDk8YSO2bg==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-arm64-musl": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.1.6.tgz",
+			"integrity": "sha512-+n3u//bfsrIaZch4cgOJ3tXCTbSxz0s6brJtU3SzLOvkJlPQMJ+eHVRi6qM2kKKKLuMY+tcau8XD9CJ1OjeSQQ==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-x64-gnu": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.1.6.tgz",
+			"integrity": "sha512-SpuDEXixM3PycniL4iVCLyUyvcl6Lt0mtv3am08sucskpG0tYkW1KlRhTgj4LI5ehyxriVVcfdoxuuP8csi3kQ==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-linux-x64-musl": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.1.6.tgz",
+			"integrity": "sha512-L4druWmdFSZIIRhF+G60API5sFB7suTbDRhYWSjiw0RbE+15igQvE2g2+S973pMGvwN3guw7cJUjA/TmbPWTHQ==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-win32-arm64-msvc": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.1.6.tgz",
+			"integrity": "sha512-s8w6EeqNmi6gdvM19tqKKWbCyOBvXFbndkGHl+c9YrzsLARRdCHsD9S1fMj8gsXm9v8vhC8s3N8rjuC/XrtkEg==",
+			"cpu": [
+				"arm64"
+			],
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@next/swc-win32-x64-msvc": {
+			"version": "15.1.6",
+			"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.1.6.tgz",
+			"integrity": "sha512-6xomMuu54FAFxttYr5PJbEfu96godcxBTRk1OhAvJq0/EnmFU/Ybiax30Snis4vdWZ9LGpf7Roy5fSs7v/5ROQ==",
+			"cpu": [
+				"x64"
+			],
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
diff --git a/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts b/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
new file mode 100644
index 00000000..44d8b22a
--- /dev/null
+++ b/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
@@ -0,0 +1,57 @@
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+import { getConfig } from '@snapwp/core/config';
+
+/**
+ * Proxies a request to WordPress API.
+ *
+ * @param request The incoming request.
+ * @param root0 The parameters for the request.
+ * @param root0.params The parameters for the request.
+ * @param root0.params.path The path to the external API.
+ *
+ * @return The response from the external API.
+ */
+export async function GET(
+	request: NextRequest,
+	{ params }: { params: { path: string[] } }
+) {
+	const { path } = params;
+
+	const { homeUrl } = getConfig();
+	// Construct the target URL
+	const targetUrl = new URL( path.join( '/' ), homeUrl ).toString();
+
+	try {
+		// Forward the request to the external API
+		const response = await fetch( targetUrl, {
+			headers: {
+				'Content-Type': 'application/javascript', // Ensure the correct MIME type
+			},
+		} );
+
+		// Check if the response is OK
+		if ( ! response.ok ) {
+			throw new Error(
+				`Error from external API: ${ response.statusText }`
+			);
+		}
+
+		// Get the response data
+		const data = await response.text();
+
+		// Return the response with the correct Content-Type header
+		return new NextResponse( data, {
+			headers: {
+				'Content-Type': 'application/javascript',
+			},
+		} );
+	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.error( 'Proxy error:', error );
+		return NextResponse.json(
+			{ error: 'Internal Server Error' },
+			{ status: 500 }
+		);
+	}
+}
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 12a1bd03..6727c6b7 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -9,6 +9,7 @@
  */
 import React, { type PropsWithoutRef } from 'react';
 import Script from 'next/script';
+import { getConfig } from '@snapwp/core/config';
 
 interface ScriptModuleInterface {
 	handle?: string | null;
@@ -43,6 +44,7 @@ export default function ScriptModule( {
 	extraData,
 	...props
 }: PropsWithoutRef< ScriptModuleInterface > ) {
+	const { homeUrl } = getConfig();
 	// Generate dependency scripts
 	const DependencyScripts = dependencies?.map( ( dep, index ) => {
 		if ( ! dep?.connectedScriptModule ) {
@@ -58,7 +60,7 @@ export default function ScriptModule( {
 					rel="preload"
 					as="script"
 					key={ depHandle || `${ handle }-dep-${ index }` }
-					href={ depSrc }
+					href={ depSrc.replace( homeUrl, '/api/proxy/js/module' ) }
 					id={ `${ depHandle }-js-modulepreload` }
 				/>
 			);
@@ -69,7 +71,7 @@ export default function ScriptModule( {
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				id={ depHandle || undefined }
 				type="module"
-				src={ depSrc }
+				src={ depSrc.replace( homeUrl, '/api/proxy/js/module' ) }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
@@ -96,7 +98,7 @@ export default function ScriptModule( {
 	const MainScript = src && (
 		<Script
 			type="module"
-			src={ src }
+			src={ src.replace( homeUrl, '/api/proxy/js/module' ) }
 			id={ handle || undefined }
 			strategy="lazyOnload"
 			{ ...props }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 26798196..95e89223 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -127,7 +127,7 @@ const ScriptModuleMap = ( {
 
 					// We use this to prevent (re)loading the main script module if it's already included in the page.
 					const shouldLoadMainScript =
-						uniqueScriptModuleDependencies.has( handle! );
+						! uniqueScriptModuleDependencies.has( handle! );
 
 					return (
 						<ScriptModule

From 775e04ce4f03bffcafa1533213343236705b4c00 Mon Sep 17 00:00:00 2001
From: Shah Shalin <shalinshh723@gmail.com>
Date: Thu, 30 Jan 2025 14:26:05 +0530
Subject: [PATCH 02/18] refactor: created a moduleAPIRoute variable which will
 have our API route details.

---
 packages/next/src/components/script-module.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 6727c6b7..5f4e3399 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -45,6 +45,8 @@ export default function ScriptModule( {
 	...props
 }: PropsWithoutRef< ScriptModuleInterface > ) {
 	const { homeUrl } = getConfig();
+	const moduleAPIRoute = '/api/proxy/js/module';
+
 	// Generate dependency scripts
 	const DependencyScripts = dependencies?.map( ( dep, index ) => {
 		if ( ! dep?.connectedScriptModule ) {
@@ -60,7 +62,7 @@ export default function ScriptModule( {
 					rel="preload"
 					as="script"
 					key={ depHandle || `${ handle }-dep-${ index }` }
-					href={ depSrc.replace( homeUrl, '/api/proxy/js/module' ) }
+					href={ depSrc.replace( homeUrl, moduleAPIRoute ) }
 					id={ `${ depHandle }-js-modulepreload` }
 				/>
 			);
@@ -71,7 +73,7 @@ export default function ScriptModule( {
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				id={ depHandle || undefined }
 				type="module"
-				src={ depSrc.replace( homeUrl, '/api/proxy/js/module' ) }
+				src={ depSrc.replace( homeUrl, moduleAPIRoute ) }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
@@ -98,7 +100,7 @@ export default function ScriptModule( {
 	const MainScript = src && (
 		<Script
 			type="module"
-			src={ src.replace( homeUrl, '/api/proxy/js/module' ) }
+			src={ src.replace( homeUrl, moduleAPIRoute ) }
 			id={ handle || undefined }
 			strategy="lazyOnload"
 			{ ...props }

From db0ae365161193a002af93fbe58d97cd741e5344 Mon Sep 17 00:00:00 2001
From: Shah Shalin <shalinshh723@gmail.com>
Date: Thu, 30 Jan 2025 14:45:51 +0530
Subject: [PATCH 03/18] fix: replaced the url inside the importmap

---
 packages/next/src/template-renderer/template-scripts.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 95e89223..f1f37cf7 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -3,6 +3,7 @@ import NextScript from 'next/script';
 import Script from '@/components/script';
 import ScriptModule from '@/components/script-module';
 import { type EnqueuedScriptProps, type ScriptModuleProps } from '@snapwp/core';
+import { getConfig } from '@snapwp/core/config';
 
 /**
  * Renders a list of script elements from a given array of script data.
@@ -38,11 +39,13 @@ const ImportMap = ( {
 	scriptModules: ScriptModuleProps[];
 } ) => {
 	// Generate import map from all module dependencies
+	const moduleAPIRoute = '/api/proxy/js/module';
+	const { homeUrl } = getConfig();
 	const imports = scriptModules.reduce< Record< string, string > >(
 		( acc, module ) => {
 			module.dependencies?.forEach( ( dep ) => {
 				const { handle, src } = dep?.connectedScriptModule!;
-				acc[ handle ] = src;
+				acc[ handle ] = src.replace( homeUrl, moduleAPIRoute );
 			} );
 			return acc;
 		},

From 053427ee7427514269326b7ac4844d673a9753cb Mon Sep 17 00:00:00 2001
From: Shah Shalin <shalinshh723@gmail.com>
Date: Thu, 30 Jan 2025 15:30:00 +0530
Subject: [PATCH 04/18] fix: fixed the type issue with the GET API route

---
 .../starter/src/app/api/proxy/js/module/[...path]/route.ts   | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts b/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
index 44d8b22a..abf1d336 100644
--- a/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
+++ b/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
@@ -8,15 +8,14 @@ import { getConfig } from '@snapwp/core/config';
  * @param request The incoming request.
  * @param root0 The parameters for the request.
  * @param root0.params The parameters for the request.
- * @param root0.params.path The path to the external API.
  *
  * @return The response from the external API.
  */
 export async function GET(
 	request: NextRequest,
-	{ params }: { params: { path: string[] } }
+	{ params }: { params: Promise< { path: string[] } > }
 ) {
-	const { path } = params;
+	const { path } = await params;
 
 	const { homeUrl } = getConfig();
 	// Construct the target URL

From 2cdcc610defc33098901aeac100028dfd16b798e Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 17:17:13 +0530
Subject: [PATCH 05/18] refactor: move cors proxy to be implemented as a
 middleware

---
 .../api/proxy/js/module/[...path]/route.ts    | 56 -------------------
 examples/nextjs/starter/src/middleware.ts     |  5 +-
 .../core/src/config/snapwp-config-manager.ts  |  5 ++
 .../next/src/components/script-module.tsx     |  9 ++-
 packages/next/src/index.ts                    |  1 +
 packages/next/src/middleware/cors.ts          | 54 ++++++++++++++++++
 packages/next/src/middleware/utils.ts         |  3 +-
 .../template-renderer/template-scripts.tsx    |  5 +-
 8 files changed, 71 insertions(+), 67 deletions(-)
 delete mode 100644 examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
 create mode 100644 packages/next/src/middleware/cors.ts

diff --git a/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts b/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
deleted file mode 100644
index abf1d336..00000000
--- a/examples/nextjs/starter/src/app/api/proxy/js/module/[...path]/route.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { NextResponse } from 'next/server';
-import type { NextRequest } from 'next/server';
-import { getConfig } from '@snapwp/core/config';
-
-/**
- * Proxies a request to WordPress API.
- *
- * @param request The incoming request.
- * @param root0 The parameters for the request.
- * @param root0.params The parameters for the request.
- *
- * @return The response from the external API.
- */
-export async function GET(
-	request: NextRequest,
-	{ params }: { params: Promise< { path: string[] } > }
-) {
-	const { path } = await params;
-
-	const { homeUrl } = getConfig();
-	// Construct the target URL
-	const targetUrl = new URL( path.join( '/' ), homeUrl ).toString();
-
-	try {
-		// Forward the request to the external API
-		const response = await fetch( targetUrl, {
-			headers: {
-				'Content-Type': 'application/javascript', // Ensure the correct MIME type
-			},
-		} );
-
-		// Check if the response is OK
-		if ( ! response.ok ) {
-			throw new Error(
-				`Error from external API: ${ response.statusText }`
-			);
-		}
-
-		// Get the response data
-		const data = await response.text();
-
-		// Return the response with the correct Content-Type header
-		return new NextResponse( data, {
-			headers: {
-				'Content-Type': 'application/javascript',
-			},
-		} );
-	} catch ( error ) {
-		// eslint-disable-next-line no-console
-		console.error( 'Proxy error:', error );
-		return NextResponse.json(
-			{ error: 'Internal Server Error' },
-			{ status: 500 }
-		);
-	}
-}
diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index 4a252f43..3ef43998 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,10 +1,11 @@
-import { appMiddlewares, type MiddlewareFactory } from '@snapwp/next';
+import { appMiddlewares, type MiddlewareFactory, cors } from '@snapwp/next';
 
 /**
  * Layer your own custom middlewares here by adding them to the array.
+ * NOTE: Cors is a developer middleware to bypass CORS errors encountered when running on localhost.
  *
  * @see https://github.com/rtCamp/snapwp/blob/main/docs/middleware.md
  */
-const middleware: MiddlewareFactory[] = [];
+const middleware: MiddlewareFactory[] = [cors];
 
 export default appMiddlewares( middleware );
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index c6a43934..2c6aba5f 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -25,6 +25,10 @@ export interface SnapWPConfig {
 	 * REST URL prefix. Defaults to `/wp-json`.
 	 */
 	restUrlPrefix?: string;
+	/**
+	 * REST URL prefix. Defaults to `/wp-json`.
+	 */
+	corsProxyPrefix?: string;
 }
 
 /**
@@ -45,6 +49,7 @@ const defaultConfig: SnapWPConfig = {
 	graphqlEndpoint: 'index.php?graphql',
 	uploadsDirectory: '/wp-content/uploads',
 	restUrlPrefix: '/wp-json',
+	corsProxyPrefix: '/proxy',
 };
 
 /**
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 5f4e3399..ceca7967 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -44,8 +44,7 @@ export default function ScriptModule( {
 	extraData,
 	...props
 }: PropsWithoutRef< ScriptModuleInterface > ) {
-	const { homeUrl } = getConfig();
-	const moduleAPIRoute = '/api/proxy/js/module';
+	const { homeUrl, corsProxyPrefix } = getConfig();
 
 	// Generate dependency scripts
 	const DependencyScripts = dependencies?.map( ( dep, index ) => {
@@ -62,7 +61,7 @@ export default function ScriptModule( {
 					rel="preload"
 					as="script"
 					key={ depHandle || `${ handle }-dep-${ index }` }
-					href={ depSrc.replace( homeUrl, moduleAPIRoute ) }
+					href={ depSrc.replace( homeUrl, corsProxyPrefix ) }
 					id={ `${ depHandle }-js-modulepreload` }
 				/>
 			);
@@ -73,7 +72,7 @@ export default function ScriptModule( {
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				id={ depHandle || undefined }
 				type="module"
-				src={ depSrc.replace( homeUrl, moduleAPIRoute ) }
+				src={ depSrc.replace( homeUrl, corsProxyPrefix ) }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
@@ -100,7 +99,7 @@ export default function ScriptModule( {
 	const MainScript = src && (
 		<Script
 			type="module"
-			src={ src.replace( homeUrl, moduleAPIRoute ) }
+			src={ src.replace( homeUrl, corsProxyPrefix ) }
 			id={ handle || undefined }
 			strategy="lazyOnload"
 			{ ...props }
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 3b263cdb..851b69e6 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -1,6 +1,7 @@
 export { currentPath } from './middleware/current-path';
 export { proxies } from './middleware/proxies';
 export * from './middleware/utils';
+export * from './middleware/cors';
 export * from './template-renderer';
 export * from './root-layout';
 export { default as Parse } from './react-parser';
diff --git a/packages/next/src/middleware/cors.ts b/packages/next/src/middleware/cors.ts
new file mode 100644
index 00000000..79105db3
--- /dev/null
+++ b/packages/next/src/middleware/cors.ts
@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import type { NextFetchEvent, NextMiddleware, NextRequest } from 'next/server';
+import { getConfig } from '@snapwp/core/config';
+import { MiddlewareFactory } from './utils';
+
+/**
+ *
+ * @param next
+ */
+export const cors: MiddlewareFactory = ( next: NextMiddleware ) => {
+	return async ( request: NextRequest, _next: NextFetchEvent ) => {
+		const { homeUrl, corsProxyPrefix } = getConfig();
+
+		if ( ! request.nextUrl.pathname.startsWith( corsProxyPrefix ) ) {
+			return next( request, _next );
+		}
+
+		// Construct the target URL
+		const targetUrl =
+			homeUrl + request.nextUrl.pathname.replace( corsProxyPrefix, '' );
+		try {
+			// Forward the request to the external API
+			const response = await fetch( targetUrl, {
+				headers: {
+					'Content-Type': 'application/javascript', // Ensure the correct MIME type
+				},
+			} );
+
+			// Check if the response is OK
+			if ( ! response.ok ) {
+				throw new Error(
+					`Error from external API: ${ response.statusText }`
+				);
+			}
+
+			// Get the response data
+			const data = await response.text();
+
+			// Return the response with the correct Content-Type header
+			return new NextResponse( data, {
+				headers: {
+					'Content-Type': 'application/javascript',
+				},
+			} );
+		} catch ( error ) {
+			// eslint-disable-next-line no-console
+			console.error( 'Proxy error:', error );
+			return NextResponse.json(
+				{ error: 'Internal Server Error' },
+				{ status: 500 }
+			);
+		}
+	};
+};
diff --git a/packages/next/src/middleware/utils.ts b/packages/next/src/middleware/utils.ts
index 72785555..f495c28f 100644
--- a/packages/next/src/middleware/utils.ts
+++ b/packages/next/src/middleware/utils.ts
@@ -1,6 +1,7 @@
 import { NextMiddleware, NextResponse } from 'next/server';
 import { proxies } from './proxies';
 import { currentPath as cm } from './current-path';
+import { cors } from './cors';
 
 export type MiddlewareFactory = (
 	middleware: NextMiddleware
@@ -46,7 +47,7 @@ export function appMiddlewares(
  * @return Array combining default middlewares and custom middlewares.
  */
 export function stackMiddlewares( middlewares: MiddlewareFactory[] = [] ) {
-	const defaultMiddlewares = [ cm, proxies ];
+	const defaultMiddlewares = [ cm, proxies, cors ];
 
 	return [ ...defaultMiddlewares, ...middlewares ];
 }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index f1f37cf7..afa9acd4 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -39,13 +39,12 @@ const ImportMap = ( {
 	scriptModules: ScriptModuleProps[];
 } ) => {
 	// Generate import map from all module dependencies
-	const moduleAPIRoute = '/api/proxy/js/module';
-	const { homeUrl } = getConfig();
+	const { homeUrl, corsProxyPrefix } = getConfig();
 	const imports = scriptModules.reduce< Record< string, string > >(
 		( acc, module ) => {
 			module.dependencies?.forEach( ( dep ) => {
 				const { handle, src } = dep?.connectedScriptModule!;
-				acc[ handle ] = src.replace( homeUrl, moduleAPIRoute );
+				acc[ handle ] = src.replace( homeUrl, corsProxyPrefix );
 			} );
 			return acc;
 		},

From 06fa587348efb4a5b1586b33c8f260de504d3a4b Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:03:10 +0530
Subject: [PATCH 06/18] refactor: rename cors middleware

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 examples/nextjs/starter/src/middleware.ts | 8 +++++---
 packages/next/src/index.ts                | 2 +-
 packages/next/src/middleware/utils.ts     | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index 3ef43998..6092113e 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,11 +1,13 @@
-import { appMiddlewares, type MiddlewareFactory, cors } from '@snapwp/next';
+import { appMiddlewares, type MiddlewareFactory, corsMiddleware } from '@snapwp/next';
 
 /**
  * Layer your own custom middlewares here by adding them to the array.
- * NOTE: Cors is a developer middleware to bypass CORS errors encountered when running on localhost.
  *
  * @see https://github.com/rtCamp/snapwp/blob/main/docs/middleware.md
  */
-const middleware: MiddlewareFactory[] = [cors];
+const middleware: MiddlewareFactory[] = [
+    // Proxies WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
+    corsMiddleware
+];
 
 export default appMiddlewares( middleware );
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 851b69e6..0323ab37 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -1,7 +1,7 @@
 export { currentPath } from './middleware/current-path';
 export { proxies } from './middleware/proxies';
 export * from './middleware/utils';
-export * from './middleware/cors';
+export { cors as corsMiddleware } from './middleware/cors';
 export * from './template-renderer';
 export * from './root-layout';
 export { default as Parse } from './react-parser';
diff --git a/packages/next/src/middleware/utils.ts b/packages/next/src/middleware/utils.ts
index f495c28f..e942515e 100644
--- a/packages/next/src/middleware/utils.ts
+++ b/packages/next/src/middleware/utils.ts
@@ -47,7 +47,7 @@ export function appMiddlewares(
  * @return Array combining default middlewares and custom middlewares.
  */
 export function stackMiddlewares( middlewares: MiddlewareFactory[] = [] ) {
-	const defaultMiddlewares = [ cm, proxies, cors ];
+	const defaultMiddlewares = [ cm, proxies ];
 
 	return [ ...defaultMiddlewares, ...middlewares ];
 }

From a34a4005a6d3b950b089738077c02cf139883ed8 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:26:11 +0530
Subject: [PATCH 07/18] refactor: handle src changes in the template renderer

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/core/src/config/snapwp-config-manager.ts        | 2 +-
 packages/next/src/components/script-module.tsx           | 8 +++-----
 packages/next/src/template-renderer/template-scripts.tsx | 7 ++++++-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 2c6aba5f..225045aa 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -26,7 +26,7 @@ export interface SnapWPConfig {
 	 */
 	restUrlPrefix?: string;
 	/**
-	 * REST URL prefix. Defaults to `/wp-json`.
+	 * URL prefix for WP assests loaded from 'wp-includes' dir . Defaults to `/proxy`.
 	 */
 	corsProxyPrefix?: string;
 }
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index ceca7967..1b6926cc 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -44,8 +44,6 @@ export default function ScriptModule( {
 	extraData,
 	...props
 }: PropsWithoutRef< ScriptModuleInterface > ) {
-	const { homeUrl, corsProxyPrefix } = getConfig();
-
 	// Generate dependency scripts
 	const DependencyScripts = dependencies?.map( ( dep, index ) => {
 		if ( ! dep?.connectedScriptModule ) {
@@ -61,7 +59,7 @@ export default function ScriptModule( {
 					rel="preload"
 					as="script"
 					key={ depHandle || `${ handle }-dep-${ index }` }
-					href={ depSrc.replace( homeUrl, corsProxyPrefix ) }
+					href={ depSrc }
 					id={ `${ depHandle }-js-modulepreload` }
 				/>
 			);
@@ -72,7 +70,7 @@ export default function ScriptModule( {
 				key={ depHandle || `${ handle }-dep-${ index }` }
 				id={ depHandle || undefined }
 				type="module"
-				src={ depSrc.replace( homeUrl, corsProxyPrefix ) }
+				src={ depSrc }
 				/*
 				 * Use lazyOnload strategy for dependencies to ensure they are loaded asynchronously.
 				 * This strategy is recommended for non-blocking scripts and they prevent preload warnings.
@@ -99,7 +97,7 @@ export default function ScriptModule( {
 	const MainScript = src && (
 		<Script
 			type="module"
-			src={ src.replace( homeUrl, corsProxyPrefix ) }
+			src={ src }
 			id={ handle || undefined }
 			strategy="lazyOnload"
 			{ ...props }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index afa9acd4..b3101233 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -83,6 +83,7 @@ const ScriptModuleMap = ( {
 }: {
 	scriptModules?: ScriptModuleProps[];
 } ) => {
+	const { homeUrl, corsProxyPrefix } = getConfig();
 	// Array to store handles of script modules that should not be loaded
 	const uniqueScriptModuleDependencies = new Set< string >();
 
@@ -135,7 +136,11 @@ const ScriptModuleMap = ( {
 						<ScriptModule
 							key={ handle || id }
 							handle={ handle }
-							src={ shouldLoadMainScript ? src : undefined }
+							src={
+								shouldLoadMainScript
+									? src.replace( homeUrl, corsProxyPrefix )
+									: undefined
+							}
 							extraData={ extraData }
 							dependencies={ dependencies }
 						/>

From dd322c9d999249dd4352d34c5bee645e82a213d8 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:36:31 +0530
Subject: [PATCH 08/18] refactor: rename cors middleware

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 examples/nextjs/starter/src/middleware.ts | 4 ++--
 packages/next/src/index.ts                | 2 +-
 packages/next/src/middleware/cors.ts      | 4 +++-
 packages/next/src/middleware/utils.ts     | 1 -
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index 6092113e..eb49038f 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,4 +1,4 @@
-import { appMiddlewares, type MiddlewareFactory, corsMiddleware } from '@snapwp/next';
+import { appMiddlewares, type MiddlewareFactory, corsProxyMiddleware } from '@snapwp/next';
 
 /**
  * Layer your own custom middlewares here by adding them to the array.
@@ -7,7 +7,7 @@ import { appMiddlewares, type MiddlewareFactory, corsMiddleware } from '@snapwp/
  */
 const middleware: MiddlewareFactory[] = [
     // Proxies WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
-    corsMiddleware
+    corsProxyMiddleware
 ];
 
 export default appMiddlewares( middleware );
diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 0323ab37..851b69e6 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -1,7 +1,7 @@
 export { currentPath } from './middleware/current-path';
 export { proxies } from './middleware/proxies';
 export * from './middleware/utils';
-export { cors as corsMiddleware } from './middleware/cors';
+export * from './middleware/cors';
 export * from './template-renderer';
 export * from './root-layout';
 export { default as Parse } from './react-parser';
diff --git a/packages/next/src/middleware/cors.ts b/packages/next/src/middleware/cors.ts
index 79105db3..500638a1 100644
--- a/packages/next/src/middleware/cors.ts
+++ b/packages/next/src/middleware/cors.ts
@@ -7,7 +7,9 @@ import { MiddlewareFactory } from './utils';
  *
  * @param next
  */
-export const cors: MiddlewareFactory = ( next: NextMiddleware ) => {
+export const corsProxyMiddleware: MiddlewareFactory = (
+	next: NextMiddleware
+) => {
 	return async ( request: NextRequest, _next: NextFetchEvent ) => {
 		const { homeUrl, corsProxyPrefix } = getConfig();
 
diff --git a/packages/next/src/middleware/utils.ts b/packages/next/src/middleware/utils.ts
index e942515e..72785555 100644
--- a/packages/next/src/middleware/utils.ts
+++ b/packages/next/src/middleware/utils.ts
@@ -1,7 +1,6 @@
 import { NextMiddleware, NextResponse } from 'next/server';
 import { proxies } from './proxies';
 import { currentPath as cm } from './current-path';
-import { cors } from './cors';
 
 export type MiddlewareFactory = (
 	middleware: NextMiddleware

From e71c3647ad85f2dac3c1252ad6f91facbbcf4080 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:50:11 +0530
Subject: [PATCH 09/18] docs: document cors middleware

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/next/src/middleware/cors.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/next/src/middleware/cors.ts b/packages/next/src/middleware/cors.ts
index 500638a1..59c5af68 100644
--- a/packages/next/src/middleware/cors.ts
+++ b/packages/next/src/middleware/cors.ts
@@ -4,8 +4,14 @@ import { getConfig } from '@snapwp/core/config';
 import { MiddlewareFactory } from './utils';
 
 /**
+ * Facilitates proxying resources from WP resources. Any request with `corsProxyPrefix`
+ * as the first path element will be proxied to WP server.
  *
- * @param next
+ * eg: http://localhost:3000/proxy/assets/api.js will get resouce at https://examplewp/assets/api.js
+ * assuming env vars NEXT_PUBLIC_URL had its value set to http://localhost:3000 and NEXT_PUBLIC_WORDPRESS_URL to https://examplewp.com
+ *
+ * @param  next - Next middleware
+ * @return The response object with modified headers
  */
 export const corsProxyMiddleware: MiddlewareFactory = (
 	next: NextMiddleware
@@ -42,6 +48,7 @@ export const corsProxyMiddleware: MiddlewareFactory = (
 			return new NextResponse( data, {
 				headers: {
 					'Content-Type': 'application/javascript',
+					'Content-Security-Policy': "default-src 'self'",
 				},
 			} );
 		} catch ( error ) {

From 1e5806dc3ba12ae25f21237e743e7246135ab302 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 18:51:52 +0530
Subject: [PATCH 10/18] chore: format

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 examples/nextjs/starter/src/middleware.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index eb49038f..77ba8327 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,4 +1,8 @@
-import { appMiddlewares, type MiddlewareFactory, corsProxyMiddleware } from '@snapwp/next';
+import {
+	appMiddlewares,
+	type MiddlewareFactory,
+	corsProxyMiddleware,
+} from '@snapwp/next';
 
 /**
  * Layer your own custom middlewares here by adding them to the array.
@@ -6,8 +10,8 @@ import { appMiddlewares, type MiddlewareFactory, corsProxyMiddleware } from '@sn
  * @see https://github.com/rtCamp/snapwp/blob/main/docs/middleware.md
  */
 const middleware: MiddlewareFactory[] = [
-    // Proxies WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
-    corsProxyMiddleware
+	// Proxies WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
+	corsProxyMiddleware,
 ];
 
 export default appMiddlewares( middleware );

From 803b2d1fe50d05e6feec0a52e9c991983b08a990 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 19:08:49 +0530
Subject: [PATCH 11/18] fix: unit test

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/core/src/config/tests/snapwp-config-manager.test.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/core/src/config/tests/snapwp-config-manager.test.ts b/packages/core/src/config/tests/snapwp-config-manager.test.ts
index aac516c9..7a6aea9e 100644
--- a/packages/core/src/config/tests/snapwp-config-manager.test.ts
+++ b/packages/core/src/config/tests/snapwp-config-manager.test.ts
@@ -24,6 +24,7 @@ describe( 'SnapWPConfigManager functions', () => {
 		graphqlEndpoint: 'index.php?graphql',
 		uploadsDirectory: '/wp-content/uploads',
 		restUrlPrefix: '/wp-json',
+		corsProxyPrefix: '/proxy',
 	};
 
 	beforeEach( () => {

From 048422680de8ea2b8039418f343cc3c29ebea87d Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 19:16:39 +0530
Subject: [PATCH 12/18] fix: unit test

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/core/src/config/tests/snapwp-config-manager.test.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/config/tests/snapwp-config-manager.test.ts b/packages/core/src/config/tests/snapwp-config-manager.test.ts
index 7a6aea9e..10b23b01 100644
--- a/packages/core/src/config/tests/snapwp-config-manager.test.ts
+++ b/packages/core/src/config/tests/snapwp-config-manager.test.ts
@@ -152,6 +152,7 @@ describe( 'SnapWPConfigManager functions', () => {
 			graphqlEndpoint: ' index.php?graphql ',
 			restUrlPrefix: ' /wp-json ',
 			uploadsDirectory: ' /wp-content/uploads ',
+			corsProxyPrefix: ' /proxy ',
 		};
 
 		expect( getConfig() ).toEqual( {
@@ -160,6 +161,7 @@ describe( 'SnapWPConfigManager functions', () => {
 			graphqlEndpoint: 'index.php?graphql',
 			restUrlPrefix: '/wp-json',
 			uploadsDirectory: '/wp-content/uploads',
+			corsProxyPrefix: '/proxy',
 		} );
 	} );
 

From 3f68143649ba69ca7b0c2381cda9b930e97b7fb7 Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Thu, 30 Jan 2025 16:09:30 +0200
Subject: [PATCH 13/18] chore: cleanup

---
 examples/nextjs/starter/src/middleware.ts                | 2 +-
 packages/core/src/config/snapwp-config-manager.ts        | 2 +-
 packages/next/src/components/script-module.tsx           | 3 ---
 packages/next/src/template-renderer/template-scripts.tsx | 1 +
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index 77ba8327..03c805f3 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,7 +1,7 @@
 import {
 	appMiddlewares,
-	type MiddlewareFactory,
 	corsProxyMiddleware,
+	type MiddlewareFactory,
 } from '@snapwp/next';
 
 /**
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 225045aa..01b262a7 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -26,7 +26,7 @@ export interface SnapWPConfig {
 	 */
 	restUrlPrefix?: string;
 	/**
-	 * URL prefix for WP assests loaded from 'wp-includes' dir . Defaults to `/proxy`.
+	 * URL prefix for WP assets loaded from 'wp-includes' dir . Defaults to `/proxy`.
 	 */
 	corsProxyPrefix?: string;
 }
diff --git a/packages/next/src/components/script-module.tsx b/packages/next/src/components/script-module.tsx
index 1b6926cc..afb7e920 100644
--- a/packages/next/src/components/script-module.tsx
+++ b/packages/next/src/components/script-module.tsx
@@ -4,12 +4,9 @@
  * A script module is typically a JavaScript file that needs to be loaded on a webpage.
  * This component ensures that all dependencies of a script module are loaded before the main script.
  * Dependencies are rendered as individual <Script /> components and are typically loaded asynchronously.
- *
- * @todo Add CORS headers in production by fetching WordPress site URL from getConfig
  */
 import React, { type PropsWithoutRef } from 'react';
 import Script from 'next/script';
-import { getConfig } from '@snapwp/core/config';
 
 interface ScriptModuleInterface {
 	handle?: string | null;
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index b3101233..598d3631 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -40,6 +40,7 @@ const ImportMap = ( {
 } ) => {
 	// Generate import map from all module dependencies
 	const { homeUrl, corsProxyPrefix } = getConfig();
+
 	const imports = scriptModules.reduce< Record< string, string > >(
 		( acc, module ) => {
 			module.dependencies?.forEach( ( dep ) => {

From d2b6f687c8ddf8dd12dee6fdad38b940fbbd8fe8 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 19:47:29 +0530
Subject: [PATCH 14/18] fix: add check if src url needs to be fixed

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 .../src/template-renderer/template-scripts.tsx     | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 598d3631..4b64f335 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -45,7 +45,9 @@ const ImportMap = ( {
 		( acc, module ) => {
 			module.dependencies?.forEach( ( dep ) => {
 				const { handle, src } = dep?.connectedScriptModule!;
-				acc[ handle ] = src.replace( homeUrl, corsProxyPrefix );
+				acc[ handle ] = src.includes( corsProxyPrefix )
+					? src.replace( homeUrl, corsProxyPrefix )
+					: src;
 			} );
 			return acc;
 		},
@@ -129,6 +131,10 @@ const ScriptModuleMap = ( {
 						return null;
 					}
 
+					src = src.includes( corsProxyPrefix )
+						? src.replace( homeUrl, corsProxyPrefix )
+						: src;
+
 					// We use this to prevent (re)loading the main script module if it's already included in the page.
 					const shouldLoadMainScript =
 						! uniqueScriptModuleDependencies.has( handle! );
@@ -137,11 +143,7 @@ const ScriptModuleMap = ( {
 						<ScriptModule
 							key={ handle || id }
 							handle={ handle }
-							src={
-								shouldLoadMainScript
-									? src.replace( homeUrl, corsProxyPrefix )
-									: undefined
-							}
+							src={ shouldLoadMainScript ? src : undefined }
 							extraData={ extraData }
 							dependencies={ dependencies }
 						/>

From 0e5382438614ea33f61d1de0c94579a7e6698c3d Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 20:34:58 +0530
Subject: [PATCH 15/18] fix: rely on config flag

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 examples/nextjs/starter/snapwp.config.mjs             |  5 ++++-
 examples/nextjs/starter/src/middleware.ts             | 11 ++---------
 packages/core/src/config/snapwp-config-manager.ts     |  7 +++++++
 .../src/config/tests/snapwp-config-manager.test.ts    |  3 +++
 packages/next/src/middleware/utils.ts                 |  8 ++++++++
 .../next/src/template-renderer/template-scripts.tsx   |  8 ++++----
 6 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/examples/nextjs/starter/snapwp.config.mjs b/examples/nextjs/starter/snapwp.config.mjs
index b8a99724..91db01a5 100644
--- a/examples/nextjs/starter/snapwp.config.mjs
+++ b/examples/nextjs/starter/snapwp.config.mjs
@@ -1,5 +1,8 @@
 // eslint-disable-next-line jsdoc/check-tag-names
 /** @type {import('@snapwp/core/config').SnapWPConfig} */
-const config = {};
+const config = {
+	// Allow Proxy to WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
+	useCorsProxy: process.env.NODE_ENV === 'development',
+};
 
 export default config;
diff --git a/examples/nextjs/starter/src/middleware.ts b/examples/nextjs/starter/src/middleware.ts
index 03c805f3..4a252f43 100644
--- a/examples/nextjs/starter/src/middleware.ts
+++ b/examples/nextjs/starter/src/middleware.ts
@@ -1,17 +1,10 @@
-import {
-	appMiddlewares,
-	corsProxyMiddleware,
-	type MiddlewareFactory,
-} from '@snapwp/next';
+import { appMiddlewares, type MiddlewareFactory } from '@snapwp/next';
 
 /**
  * Layer your own custom middlewares here by adding them to the array.
  *
  * @see https://github.com/rtCamp/snapwp/blob/main/docs/middleware.md
  */
-const middleware: MiddlewareFactory[] = [
-	// Proxies WordPress assets (scripts, theme files, etc) to prevent CORS issues on localhost.
-	corsProxyMiddleware,
-];
+const middleware: MiddlewareFactory[] = [];
 
 export default appMiddlewares( middleware );
diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 01b262a7..68952875 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -29,6 +29,10 @@ export interface SnapWPConfig {
 	 * URL prefix for WP assets loaded from 'wp-includes' dir . Defaults to `/proxy`.
 	 */
 	corsProxyPrefix?: string;
+	/**
+	 * URL prefix for WP assets loaded from 'wp-includes' dir . Defaults to `/proxy`.
+	 */
+	useCorsProxy?: boolean;
 }
 
 /**
@@ -49,6 +53,7 @@ const defaultConfig: SnapWPConfig = {
 	graphqlEndpoint: 'index.php?graphql',
 	uploadsDirectory: '/wp-content/uploads',
 	restUrlPrefix: '/wp-json',
+	useCorsProxy: false,
 	corsProxyPrefix: '/proxy',
 };
 
@@ -86,6 +91,7 @@ function normalizeConfig( cfg: SnapWPConfig ): SnapWPConfig {
 		( key: keyof SnapWPConfig ) => {
 			// Trim the value if it is a string.
 			if ( typeof cfg[ key ] === 'string' ) {
+				//@ts-ignore
 				cfg[ key ] = cfg[ key ]?.trim();
 			}
 
@@ -267,6 +273,7 @@ class SnapWPConfigManager {
 			}
 
 			if ( prop.validate ) {
+				//@ts-ignore
 				prop.validate( value );
 			}
 		};
diff --git a/packages/core/src/config/tests/snapwp-config-manager.test.ts b/packages/core/src/config/tests/snapwp-config-manager.test.ts
index 10b23b01..72e27469 100644
--- a/packages/core/src/config/tests/snapwp-config-manager.test.ts
+++ b/packages/core/src/config/tests/snapwp-config-manager.test.ts
@@ -25,6 +25,7 @@ describe( 'SnapWPConfigManager functions', () => {
 		uploadsDirectory: '/wp-content/uploads',
 		restUrlPrefix: '/wp-json',
 		corsProxyPrefix: '/proxy',
+		useCorsProxy: false,
 	};
 
 	beforeEach( () => {
@@ -153,6 +154,7 @@ describe( 'SnapWPConfigManager functions', () => {
 			restUrlPrefix: ' /wp-json ',
 			uploadsDirectory: ' /wp-content/uploads ',
 			corsProxyPrefix: ' /proxy ',
+			useCorsProxy: true,
 		};
 
 		expect( getConfig() ).toEqual( {
@@ -162,6 +164,7 @@ describe( 'SnapWPConfigManager functions', () => {
 			restUrlPrefix: '/wp-json',
 			uploadsDirectory: '/wp-content/uploads',
 			corsProxyPrefix: '/proxy',
+			useCorsProxy: true,
 		} );
 	} );
 
diff --git a/packages/next/src/middleware/utils.ts b/packages/next/src/middleware/utils.ts
index 72785555..26861d82 100644
--- a/packages/next/src/middleware/utils.ts
+++ b/packages/next/src/middleware/utils.ts
@@ -1,6 +1,8 @@
 import { NextMiddleware, NextResponse } from 'next/server';
 import { proxies } from './proxies';
 import { currentPath as cm } from './current-path';
+import { corsProxyMiddleware } from './cors';
+import { getConfig } from '@snapwp/core/config';
 
 export type MiddlewareFactory = (
 	middleware: NextMiddleware
@@ -46,7 +48,13 @@ export function appMiddlewares(
  * @return Array combining default middlewares and custom middlewares.
  */
 export function stackMiddlewares( middlewares: MiddlewareFactory[] = [] ) {
+	const { useCorsProxy } = getConfig();
+
 	const defaultMiddlewares = [ cm, proxies ];
 
+	if ( useCorsProxy ) {
+		defaultMiddlewares.push( corsProxyMiddleware );
+	}
+
 	return [ ...defaultMiddlewares, ...middlewares ];
 }
diff --git a/packages/next/src/template-renderer/template-scripts.tsx b/packages/next/src/template-renderer/template-scripts.tsx
index 4b64f335..23ff1915 100644
--- a/packages/next/src/template-renderer/template-scripts.tsx
+++ b/packages/next/src/template-renderer/template-scripts.tsx
@@ -39,13 +39,13 @@ const ImportMap = ( {
 	scriptModules: ScriptModuleProps[];
 } ) => {
 	// Generate import map from all module dependencies
-	const { homeUrl, corsProxyPrefix } = getConfig();
+	const { homeUrl, corsProxyPrefix, useCorsProxy } = getConfig();
 
 	const imports = scriptModules.reduce< Record< string, string > >(
 		( acc, module ) => {
 			module.dependencies?.forEach( ( dep ) => {
 				const { handle, src } = dep?.connectedScriptModule!;
-				acc[ handle ] = src.includes( corsProxyPrefix )
+				acc[ handle ] = useCorsProxy
 					? src.replace( homeUrl, corsProxyPrefix )
 					: src;
 			} );
@@ -86,7 +86,7 @@ const ScriptModuleMap = ( {
 }: {
 	scriptModules?: ScriptModuleProps[];
 } ) => {
-	const { homeUrl, corsProxyPrefix } = getConfig();
+	const { homeUrl, corsProxyPrefix, useCorsProxy } = getConfig();
 	// Array to store handles of script modules that should not be loaded
 	const uniqueScriptModuleDependencies = new Set< string >();
 
@@ -131,7 +131,7 @@ const ScriptModuleMap = ( {
 						return null;
 					}
 
-					src = src.includes( corsProxyPrefix )
+					src = useCorsProxy
 						? src.replace( homeUrl, corsProxyPrefix )
 						: src;
 

From fce75a0a9c5d9de422b77022d63264e193f9fa83 Mon Sep 17 00:00:00 2001
From: Dovid Levine <david@axepress.dev>
Date: Thu, 30 Jan 2025 18:33:34 +0200
Subject: [PATCH 16/18] chore: revert + cleanup

---
 packages/next/src/components/font.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/next/src/components/font.tsx b/packages/next/src/components/font.tsx
index 30a03d65..95c6dd60 100644
--- a/packages/next/src/components/font.tsx
+++ b/packages/next/src/components/font.tsx
@@ -1,3 +1,4 @@
+import { getConfig } from '@snapwp/core/config';
 import React from 'react';
 
 /**
@@ -11,13 +12,16 @@ import React from 'react';
  */
 export default function Fonts( props: { renderedFontFaces: string } ) {
 	const { renderedFontFaces } = props;
+
+	// @todo: we might need to proxy these for CORS.
+
 	return (
 		<style
 			id="wp-fonts-local"
 			dangerouslySetInnerHTML={ {
 				__html: renderedFontFaces
-					?.replace( "<style id='wp-fonts-local'>", '' )
-					?.replace( '</style>\n', '' ),
+					.replace( /<style[^>]*>/g, '' )
+					.replace( /<\/style>/g, '' ),
 			} }
 		></style>
 	);

From 04812b8fa149608894454f6a884c7bc418a66bf3 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 22:07:02 +0530
Subject: [PATCH 17/18] doc: add doc for useCorsProxy flag

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/core/src/config/snapwp-config-manager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/config/snapwp-config-manager.ts b/packages/core/src/config/snapwp-config-manager.ts
index 68952875..6e3cd7e5 100644
--- a/packages/core/src/config/snapwp-config-manager.ts
+++ b/packages/core/src/config/snapwp-config-manager.ts
@@ -30,7 +30,7 @@ export interface SnapWPConfig {
 	 */
 	corsProxyPrefix?: string;
 	/**
-	 * URL prefix for WP assets loaded from 'wp-includes' dir . Defaults to `/proxy`.
+	 * Flag to enable cors middleware which proxies assets from WP server.
 	 */
 	useCorsProxy?: boolean;
 }

From 8a6e541af981d7be35e0c389ded2135f2ff3d085 Mon Sep 17 00:00:00 2001
From: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Date: Thu, 30 Jan 2025 22:08:27 +0530
Subject: [PATCH 18/18] refactor: remove cors middleware export

Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
---
 packages/next/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/next/src/index.ts b/packages/next/src/index.ts
index 851b69e6..3b263cdb 100644
--- a/packages/next/src/index.ts
+++ b/packages/next/src/index.ts
@@ -1,7 +1,6 @@
 export { currentPath } from './middleware/current-path';
 export { proxies } from './middleware/proxies';
 export * from './middleware/utils';
-export * from './middleware/cors';
 export * from './template-renderer';
 export * from './root-layout';
 export { default as Parse } from './react-parser';