Refactor/remove preact 8 support (#1716)

* refactor: Drops support for Preact v8

* docs: Adding changeset

.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, {});