fix: Correcting SW flag in dev (#1534)

Co-authored-by: Leah <[email protected]>
preactjs · Mar 8, 2021 · 9f9277b · 9f9277b
1 parent bf668b1
commit 9f9277b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 42 deletions.
diff --git a/.changeset/twenty-months-smash.md 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
@@ -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({