refactor: Swapping out async-loader for preact-iso's lazy

Author: rschristian

jsconfig.json

@@ -1,6 +1,7 @@
 {
 	"compilerOptions": {
 		"target": "ESNext",
+		"module": "ESNext",
 		"moduleResolution": "Node",
 		"allowJs": true,
 		"checkJs": true,

packages/cli/lib/lib/babel-config.js

@@ -25,6 +25,7 @@ module.exports = function (env) {
 			],
 		].filter(Boolean),
 		plugins: [
+			require.resolve('@rschristian/babel-plugin-webpack-chunk-name-comments'),
 			[require.resolve('@babel/plugin-proposal-decorators'), { legacy: true }],
 			isProd &&
 				require.resolve('babel-plugin-transform-react-remove-prop-types'),

packages/cli/lib/lib/webpack/preact-iso-prerender.js

@@ -0,0 +1,60 @@
+const { h, options, cloneElement } = require('preact');
+const renderToString = require('preact-render-to-string');
+
+let vnodeHook;
+
+const old = options.vnode;
+options.vnode = vnode => {
+	if (old) old(vnode);
+	if (vnodeHook) vnodeHook(vnode);
+};
+
+/**
+ * @param {ReturnType<h>} vnode The root JSX element to render (eg: `<App />`)
+ * @param {object} [options]
+ * @param {number} [options.maxDepth = 10] The maximum number of nested asynchronous operations to wait for before flushing
+ * @param {object} [options.props] Additional props to merge into the root JSX element
+ */
+module.exports = async function prerender(vnode, options) {
+	options = options || {};
+
+	const maxDepth = options.maxDepth || 10;
+	const props = options.props;
+	let tries = 0;
+
+	if (typeof vnode === 'function') {
+		vnode = h(vnode, props);
+	} else if (props) {
+		vnode = cloneElement(vnode, props);
+	}
+
+	const render = () => {
+		if (++tries > maxDepth) return;
+		try {
+			return renderToString(vnode);
+		} catch (e) {
+			if (e && e.then) return e.then(render);
+			throw e;
+		}
+	};
+
+	let links = new Set();
+	vnodeHook = ({ type, props }) => {
+		if (
+			type === 'a' &&
+			props &&
+			props.href &&
+			(!props.target || props.target === '_self')
+		) {
+			links.add(props.href);
+		}
+	};
+
+	try {
+		let html = await render();
+		html += `<script type="isodata"></script>`;
+		return { html, links };
+	} finally {
+		vnodeHook = null;
+	}
+};

packages/cli/lib/lib/webpack/prerender.js

@@ -2,17 +2,18 @@ const { red, yellow } = require('kleur');
 const { resolve } = require('path');
 const { readFileSync } = require('fs');
 const stackTrace = require('stack-trace');
-const URL = require('url');
+const { URL } = require('url');
 const { SourceMapConsumer } = require('source-map');
+const prerender = require('./preact-iso-prerender');
 
-module.exports = function (env, params) {
+module.exports = async function (env, params) {
 	params = params || {};
 
 	let entry = resolve(env.dest, './ssr-build/ssr-bundle.js');
 	let url = params.url || '/';
 
 	global.history = {};
-	global.location = { ...URL.parse(url) };
+	global.location = new URL(url, 'http://localhost');
 
 	try {
 		let m = require(entry),
@@ -25,12 +26,7 @@ module.exports = function (env, params) {
 			);
 			return '';
 		}
-		const { cwd } = env;
-		const preact = require(require.resolve('preact', { paths: [cwd] }));
-		const renderToString = require(require.resolve('preact-render-to-string', {
-			paths: [cwd],
-		}));
-		return renderToString(preact.h(app, { ...params, url }));
+		return (await prerender(app, { ...params, url })).html;
 	} catch (err) {
 		let stack = stackTrace.parse(err).filter(s => s.getFileName() === entry)[0];
 		if (!stack) {

packages/cli/lib/lib/webpack/render-html-plugin.js

@@ -72,7 +72,7 @@ module.exports = async function renderHTMLPlugin(config) {
 			title,
 			filename,
 			template: `!!${require.resolve('ejs-loader')}?esModule=false!${template}`,
-			templateParameters: (compilation, assets, assetTags, options) => {
+			templateParameters: async (compilation, assets, assetTags, options) => {
 				let entrypoints = {};
 				compilation.entrypoints.forEach((entrypoint, name) => {
 					let entryFiles = entrypoint.getFiles();
@@ -91,7 +91,9 @@ module.exports = async function renderHTMLPlugin(config) {
 						config,
 						preRenderData: values,
 						CLI_DATA: { preRenderData: { url, ...routeData } },
-						ssr: config.prerender ? prerender({ cwd, dest, src }, values) : '',
+						ssr: config.prerender
+							? await prerender({ cwd, dest, src }, values)
+							: '',
 						entrypoints,
 					},
 					htmlWebpackPlugin: {

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

@@ -127,9 +127,6 @@ module.exports = function createBaseConfig(env) {
 				'react-dom': require.resolve('preact/compat'),
 				'react/jsx-runtime': require.resolve('preact/jsx-runtime'),
 				'react-addons-css-transition-group': 'preact-css-transition-group',
-				'preact-cli/async-component': require.resolve(
-					'@preact/async-loader/async'
-				),
 			},
 		},
 
@@ -321,7 +318,6 @@ module.exports = function createBaseConfig(env) {
 						},
 					},
 				}),
-			isProd && new webpack.LoaderOptionsPlugin({ minimize: true }),
 			new webpack.optimize.ModuleConcatenationPlugin(),
 
 			// strip out babel-helper invariant checks

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

@@ -2,7 +2,6 @@ const webpack = require('webpack');
 const { resolve, join } = require('path');
 const { existsSync } = require('fs');
 const { merge } = require('webpack-merge');
-const { filter } = require('minimatch');
 const SizePlugin = require('size-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -14,21 +13,14 @@ const baseConfig = require('./webpack-base-config');
 const { InjectManifest } = require('workbox-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const RefreshPlugin = require('@prefresh/webpack');
-const { normalizePath, warn } = require('../../util');
+const { warn } = require('../../util');
 const OptimizePlugin = require('optimize-plugin');
 
-const cleanFilename = name =>
-	name.replace(
-		/(^\/(routes|components\/(routes|async))\/|(\/index)?\.[jt]sx?$)/g,
-		''
-	);
-
 /**
  * @returns {Promise<import('webpack').Configuration>}
  */
 async function clientConfig(env) {
 	const { source, src } = env;
-	const asyncLoader = require.resolve('@preact/async-loader');
 
 	let entry = {
 		bundle: resolve(__dirname, './../entry'),
@@ -87,43 +79,9 @@ async function clientConfig(env) {
 				}
 				return env.isProd ? '[name].[chunkhash:5].js' : '[name].js';
 			},
-			chunkFilename: '[name].chunk.[chunkhash:5].js',
-		},
-
-		resolveLoader: {
-			alias: {
-				async: asyncLoader,
-			},
-		},
-
-		// automatic async components :)
-		module: {
-			rules: [
-				{
-					test: /\.[jt]sx?$/,
-					include: [
-						filter(source('routes') + '/{*,*/index}.{js,jsx,ts,tsx}'),
-						filter(
-							source('components') +
-								'/{routes,async}/{*,*/index}.{js,jsx,ts,tsx}'
-						),
-					],
-					loader: asyncLoader,
-					options: {
-						name(filename) {
-							filename = normalizePath(filename);
-							let relative = filename.replace(normalizePath(src), '');
-							if (!relative.includes('/routes/')) return false;
-							return 'route-' + cleanFilename(relative);
-						},
-						formatName(filename) {
-							filename = normalizePath(filename);
-							let relative = filename.replace(normalizePath(source('.')), '');
-							return cleanFilename(relative);
-						},
-					},
-				},
-			],
+			chunkFilename: env.isProd
+				? '[name].chunk.[chunkhash:5].js'
+				: '[name].chunk.js',
 		},
 
 		plugins: [

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

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const { resolve } = require('path');
 const { merge } = require('webpack-merge');
 const baseConfig = require('./webpack-base-config');
@@ -20,11 +21,11 @@ function serverConfig(env) {
 			preact: 'preact',
 		},
 		target: 'node',
-		resolveLoader: {
-			alias: {
-				async: resolve(__dirname, './dummy-loader'),
-			},
-		},
+		plugins: [
+			new webpack.optimize.LimitChunkCountPlugin({
+				maxChunks: 1,
+			}),
+		],
 	};
 }
 

packages/cli/package.json

@@ -42,6 +42,7 @@
     "p-retry": "^4.5.0",
     "polka": "^0.5.2",
     "preact": "^10.6.5",
+    "preact-iso": "^2.3.0",
     "preact-render-to-string": "^5.1.19",
     "preact-router": "^3.0.1",
     "puppeteer": "^9.1.1",
@@ -77,9 +78,9 @@
     "@babel/plugin-transform-react-jsx": "^7.13.12",
     "@babel/preset-env": "^7.13.15",
     "@babel/preset-typescript": "^7.13.0",
-    "@preact/async-loader": "^3.0.1",
     "@prefresh/babel-plugin": "^0.4.1",
     "@prefresh/webpack": "^3.2.2",
+    "@rschristian/babel-plugin-webpack-chunk-name-comments": "^0.1.2",
     "@types/webpack": "^4.38.0",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",

yarn.lock

@@ -2640,6 +2640,11 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rschristian/babel-plugin-webpack-chunk-name-comments@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@rschristian/babel-plugin-webpack-chunk-name-comments/-/babel-plugin-webpack-chunk-name-comments-0.1.2.tgz#5c2101a7241ce47051493b691090412146cb592e"
+  integrity sha512-2kzxyBZB8LhUUPzs1+4yXloLmS074aBdlv5hf7/ntodMfCFoHFyfS+zLYXYek8E3pANQGN29eNHWQZABehe8ig==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -11386,6 +11391,11 @@ postcss@^8.4.13:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact-iso@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/preact-iso/-/preact-iso-2.3.0.tgz#ab6c5de28df9e0f7a0589dd2175a83ba821f69ec"
+  integrity sha512-taJmRidbWrjHEhoVoxXS2Kvxa6X3jXSsTtD7rSYeJuxnPNr1ghCu1JUzCrRxmZwTUNWIqwUpNi+AJoLtvCPN7g==
+
 preact-render-to-string@^5.1.19:
   version "5.1.19"
   resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.1.19.tgz#ffae7c3bd1680be5ecf5991d41fe3023b3051e0e"