From 9f9277be2ed50476147bae5567640b36740b4d38 Mon Sep 17 00:00:00 2001
From: Ryan Christian <33403762+rschristian@users.noreply.github.com>
Date: Mon, 8 Mar 2021 11:57:41 -0600
Subject: [PATCH] fix: Correcting SW flag in dev (#1534)

Co-authored-by: Leah <github.leah@hrmny.sh>
---
 .changeset/twenty-months-smash.md             |  5 ++
 .../lib/lib/webpack/webpack-client-config.js  | 87 ++++++++++---------
 2 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/twenty-months-smash.md

diff --git a/.changeset/twenty-months-smash.md b/.changeset/twenty-months-smash.md
new file mode 100644
index 000000000..2d60878c7
--- /dev/null
+++ b/.changeset/twenty-months-smash.md
@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Fixes SW flag in dev
diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js
index 00d765a89..e49e72f71 100644
--- a/packages/cli/lib/lib/webpack/webpack-client-config.js
+++ b/packages/cli/lib/lib/webpack/webpack-client-config.js
@@ -37,6 +37,47 @@ async function clientConfig(env) {
 		polyfills: resolve(__dirname, './polyfills'),
 	};
 
+	let swInjectManifest = [];
+	if (env.sw) {
+		let swPath = join(__dirname, '..', '..', '..', 'sw', 'sw.js');
+		const userSwPath = join(src, 'sw.js');
+		if (existsSync(userSwPath)) {
+			swPath = userSwPath;
+		} else {
+			warn(`Could not find sw.js in ${src}. Using the default service worker.`);
+		}
+		swInjectManifest = env.esm
+			? [
+					new InjectManifest({
+						swSrc: swPath,
+						swDest: 'sw-esm.js',
+						include: [
+							/200\.html$/,
+							/\.esm.js$/,
+							/\.css$/,
+							/\.(png|jpg|svg|gif|webp)$/,
+						],
+						webpackCompilationPlugins: [
+							new webpack.DefinePlugin({
+								'process.env.ESM': true,
+							}),
+						],
+					}),
+			  ]
+			: [
+					new InjectManifest({
+						swSrc: join(src, 'sw.js'),
+						include: [
+							/200\.html$/,
+							/\.js$/,
+							/\.css$/,
+							/\.(png|jpg|svg|gif|webp)$/,
+						],
+						exclude: [/\.esm\.js$/],
+					}),
+			  ];
+	}
+
 	return {
 		entry: entry,
 		output: {
@@ -83,6 +124,9 @@ async function clientConfig(env) {
 		},
 
 		plugins: [
+			new webpack.DefinePlugin({
+				'process.env.ES_BUILD': false,
+			}),
 			new PushManifestPlugin(env),
 			...(await renderHTMLPlugin(env)),
 			...getBabelEsmPlugin(env),
@@ -103,6 +147,7 @@ async function clientConfig(env) {
 					},
 				].filter(Boolean)
 			),
+			...swInjectManifest,
 		],
 	};
 }
@@ -156,17 +201,6 @@ function getBabelEsmPlugin(config) {
 
 function isProd(config) {
 	let limit = 200 * 1000; // 200kb
-	const { src, sw } = config;
-	let swPath;
-	if (sw) {
-		swPath = join(__dirname, '..', '..', '..', 'sw', 'sw.js');
-		const userSwPath = join(src, 'sw.js');
-		if (existsSync(userSwPath)) {
-			swPath = userSwPath;
-		} else {
-			warn(`Could not find sw.js in ${src}. Using the default service worker.`);
-		}
-	}
 	const prodConfig = {
 		performance: Object.assign(
 			{
@@ -180,7 +214,6 @@ function isProd(config) {
 		plugins: [
 			new webpack.DefinePlugin({
 				'process.env.ADD_SW': config.sw,
-				'process.env.ES_BUILD': false,
 				'process.env.ESM': config.esm,
 				'process.env.PRERENDER': config.prerender,
 			}),
@@ -222,36 +255,6 @@ function isProd(config) {
 		},
 	};
 
-	if (config.esm && config.sw) {
-		prodConfig.plugins.push(
-			new InjectManifest({
-				swSrc: swPath,
-				swDest: 'sw-esm.js',
-				include: [
-					/200\.html$/,
-					/\.esm.js$/,
-					/\.css$/,
-					/\.(png|jpg|svg|gif|webp)$/,
-				],
-				webpackCompilationPlugins: [
-					new webpack.DefinePlugin({
-						'process.env.ESM': true,
-					}),
-				],
-			})
-		);
-	}
-
-	if (config.sw) {
-		prodConfig.plugins.push(
-			new InjectManifest({
-				swSrc: swPath,
-				include: [/200\.html$/, /\.js$/, /\.css$/, /\.(png|jpg|svg|gif|webp)$/],
-				exclude: [/\.esm\.js$/],
-			})
-		);
-	}
-
 	if (config['inline-css']) {
 		prodConfig.plugins.push(
 			new CrittersPlugin({