Refactor/remove preact 8 support

.changeset/cuddly-ducks-reply.md

@@ -0,0 +1,6 @@
+---
+'@preact/async-loader': major
+'preact-cli': major
+---
+
+Drops support for Preact v8

packages/async-loader/index.js

@@ -1,11 +1,9 @@
 const path = require('path');
-const { getOptions, stringifyRequest } = require('loader-utils');
-const PREACT_LEGACY_MODE = 'PREACT_LEGACY_MODE';
 
-exports.pitch = function (req, mode) {
+exports.pitch = function (req) {
 	this.cacheable && this.cacheable();
 	let name;
-	let query = getOptions(this) || {};
+	let query = this.getOptions() || {};
 	let routeName =
 		typeof query.name === 'function' ? query.name(this.resourcePath) : null;
 
@@ -19,23 +17,19 @@ exports.pitch = function (req, mode) {
 
 	// import Async from '${path.relative(process.cwd(), path.resolve(__dirname, 'async-component.js'))}';
 	return `
-		import Async from ${stringifyRequest(
-			this,
-			path.resolve(
-				__dirname,
-				mode === PREACT_LEGACY_MODE ? 'async-legacy.js' : 'async.js'
-			) // explicit value check because webpack sends 2nd argument values but we dont use it
+		import Async from ${JSON.stringify(
+			this.utils.contextify(this.context, path.resolve(__dirname, 'async.js'))
 		)};
 
 		function load(cb) {
 			require.ensure([], function (require) {
-				var result = require(${stringifyRequest(this, '!!' + req)});
+				var result = require(${JSON.stringify(
+					this.utils.contextify(this.context, '!!' + req)
+				)});
 				typeof cb === 'function' && cb(result);
 			}${name ? ', ' + JSON.stringify(name) : ''});
 		}
 
 		export default Async(load);
 	`;
 };
-
-exports.PREACT_LEGACY_MODE = PREACT_LEGACY_MODE;

packages/async-loader/package.json

@@ -18,8 +18,7 @@
     "node": ">=8"
   },
   "dependencies": {
-    "kleur": "^4.1.4",
-    "loader-utils": "^2.0.0"
+    "kleur": "^4.1.4"
   },
   "peerDependencies": {
     "preact": ">= 10.0.0"

packages/cli/lib/lib/webpack/webpack-base-config.js

@@ -2,7 +2,6 @@ const webpack = require('webpack');
 const path = require('path');
 const { resolve, dirname } = require('path');
 const { readFileSync, existsSync } = require('fs');
-const { isInstalledVersionPreactXOrAbove } = require('./utils');
 const autoprefixer = require('autoprefixer');
 const browserslist = require('browserslist');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -64,7 +63,6 @@ function getSassConfiguration(...includePaths) {
  */
 module.exports = function createBaseConfig(env) {
 	const { cwd, isProd, src, source } = env;
-	const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
 	// Apply base-level `env` values
 	env.dest = resolve(cwd, env.dest || 'build');
 	env.manifest = readJson(source('manifest.json')) || {};
@@ -142,9 +140,9 @@ module.exports = function createBaseConfig(env) {
 				'react-dom': compat,
 				'preact-compat': compat,
 				'react-addons-css-transition-group': 'preact-css-transition-group',
-				'preact-cli/async-component': IS_SOURCE_PREACT_X_OR_ABOVE
-					? require.resolve('@preact/async-loader/async')
-					: require.resolve('@preact/async-loader/async-legacy'),
+				'preact-cli/async-component': require.resolve(
+					'@preact/async-loader/async'
+				),
 			},
 		},
 

packages/cli/lib/lib/webpack/webpack-client-config.js

@@ -1,7 +1,6 @@
 const webpack = require('webpack');
 const { resolve, join } = require('path');
 const { existsSync } = require('fs');
-const { isInstalledVersionPreactXOrAbove } = require('./utils');
 const { merge } = require('webpack-merge');
 const { filter } = require('minimatch');
 const SizePlugin = require('size-plugin');
@@ -29,11 +28,8 @@ const cleanFilename = name =>
  * @returns {Promise<import('webpack').Configuration>}
  */
 async function clientConfig(env) {
-	const { source, src, cwd } = env;
-	const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
-	const asyncLoader = IS_SOURCE_PREACT_X_OR_ABOVE
-		? require.resolve('@preact/async-loader')
-		: require.resolve('@preact/async-loader/legacy');
+	const { source, src } = env;
+	const asyncLoader = require.resolve('@preact/async-loader');
 
 	let entry = {
 		bundle: resolve(__dirname, './../entry'),

packages/cli/tests/client.test.js

@@ -22,35 +22,6 @@ describe('client-side tests', () => {
 		PORT = await getPort();
 	});
 
-	//it('should hydrate routes progressively with preact8.', async () => {
-	//	let dir = await subject('progressive-hydration-preact8');
-	//	await build(dir, {}, true);
-	//	const server = getServer(join(dir, 'build'), PORT);
-
-	//	// let page = await loadPage(chrome, `http://127.0.0.1:${PORT}/`);
-	//	const page = await chrome.newPage();
-
-	//	page.on('console', consoleMessage => {
-	//		// eslint-disable-next-line
-	//		console[consoleMessage.type()](consoleMessage.text());
-	//	});
-
-	//	await page.goto(`http://127.0.0.1:${PORT}/`);
-
-	//	// await waitUntilExpression(page, `window.booted`);
-	//	await sleep(500);
-
-	//	const mutations = await page.evaluate('window.ROOT_MUTATION_COUNT');
-
-	//	expect(mutations).toEqual(0);
-
-	//	expect(await page.evaluate('window.CHANGED_VAR')).toEqual(undefined);
-	//	await page.click('button');
-	//	expect(await page.evaluate('window.CHANGED_VAR')).toEqual(1);
-
-	//	server.server.close();
-	//});
-
 	it('should hydrate for pre-rendered URLs only', async () => {
 		let dir = await subject('prerendering-hydration');
 		await build(dir, {});