refactor: Switch to preact-iso for lazy loading

Author: rschristian

jsconfig.json

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

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

@@ -292,9 +292,12 @@ module.exports = function createBaseConfig(env) {
 			new MiniCssExtractPlugin({
 				filename:
 					isProd && !env.isServer ? '[name].[contenthash:5].css' : '[name].css',
-				chunkFilename: isProd
-					? '[name].chunk.[contenthash:5].css'
-					: '[name].chunk.css',
+				chunkFilename: pathData => {
+					const chunkName = pathData.chunk.id.split('_').slice(0, -1).join('-');
+					return isProd
+						? `${chunkName}.chunk.[chunkhash:5].css`
+						: `${chunkName}.chunk.css`;
+				},
 			}),
 			ProgressBarPlugin({
 				format:

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

@@ -88,7 +88,12 @@ async function clientConfig(env) {
 				}
 				return env.isProd ? '[name].[chunkhash:5].js' : '[name].js';
 			},
-			chunkFilename: '[name].chunk.[chunkhash:5].js',
+			chunkFilename: pathData => {
+				const chunkName = pathData.chunk.id.split('_').slice(0, -1).join('-');
+				return env.isProd
+					? `${chunkName}.chunk.[chunkhash:5].js`
+					: `${chunkName}.chunk.js`;
+			},
 		},
 
 		resolveLoader: {
@@ -173,6 +178,7 @@ function isProd(env) {
 		cache: true,
 
 		optimization: {
+			chunkIds: 'named',
 			minimizer: [
 				new TerserPlugin({
 					extractComments: false,

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",

packages/cli/tests/build.test.js

@@ -1,9 +1,9 @@
-const { join } = require('path');
+const { join, relative } = require('path');
 const { access, mkdir, readdir, readFile, rename, unlink, writeFile } =
 	require('fs').promises;
 const looksLike = require('html-looks-like');
 const { create, build, buildFast } = require('./lib/cli');
-const { snapshot } = require('./lib/utils');
+const { expand, snapshot } = require('./lib/utils');
 const { subject } = require('./lib/output');
 const images = require('./images/build');
 const minimatch = require('minimatch');
@@ -84,6 +84,26 @@ describe('preact build', () => {
 		await expect(buildFast(dir)).resolves.not.toThrow();
 	});
 
+	it.only('lazy loads routes with preact-iso `lazy`', async () => {
+		let dir = await subject('lazy-load-iso');
+		await buildFast(dir, { prerender: false });
+
+		let output = await expand(join(dir, 'build')).then(arr => {
+			return arr.map(x => relative(dir, x));
+		});
+
+		let expected = [
+			/build\/a\.chunk\.\w{5}\.js$/,
+			/build\/a\.chunk\.\w{5}\.css$/,
+			/build\/b\.chunk\.\w{5}\.js$/,
+			/build\/b\.chunk\.\w{5}\.css$/,
+		];
+
+		expected.forEach(pattern => {
+			expect(output.find(file => pattern.test(file))).not.toBeUndefined();
+		});
+	});
+
 	it('should patch global location object', async () => {
 		let dir = await subject('location-patch');
 

packages/cli/tests/subjects/lazy-load-iso/a.css

@@ -0,0 +1,3 @@
+h1 {
+	color: red;
+}

packages/cli/tests/subjects/lazy-load-iso/a.js

@@ -0,0 +1,3 @@
+import './a.css';
+
+export default () => <h1>Lazy Load A</h1>;

packages/cli/tests/subjects/lazy-load-iso/b.css

@@ -0,0 +1,3 @@
+h1 {
+	color: blue;
+}

packages/cli/tests/subjects/lazy-load-iso/b.js

@@ -0,0 +1,3 @@
+import './b.css';
+
+export default () => <h1>Lazy Load B</h1>;

packages/cli/tests/subjects/lazy-load-iso/index.js

@@ -0,0 +1,16 @@
+import { ErrorBoundary, lazy, Router } from 'preact-iso';
+
+// Asynchronous, code-splitted:
+const A = lazy(() => import('./a.js'));
+const B = lazy(() => import('./b.js'));
+
+export default function App() {
+	return (
+		<ErrorBoundary>
+			<Router>
+				<A path="/" />
+				<B path="/b" />
+			</Router>
+		</ErrorBoundary>
+	);
+}