refactor: Closer but still a bunch of issues

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/prerender.js

@@ -26,7 +26,7 @@ module.exports = async function (env, params) {
 			);
 			return '';
 		}
-		return await prerender(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

@@ -92,7 +92,7 @@ module.exports = async function renderHTMLPlugin(config) {
 						preRenderData: values,
 						CLI_DATA: { preRenderData: { url, ...routeData } },
 						ssr: config.prerender
-							? (await prerender({ cwd, dest, src }, values)).html
+							? await prerender({ cwd, dest, src }, values)
 							: '',
 						entrypoints,
 					},

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

@@ -23,10 +23,6 @@ const cleanFilename = name =>
 		''
 	);
 
-// TODO: Swap with the above when removing the async loader
-const cleanFilename2 = name =>
-	(name = name.replace(/_/g, '-').replace(/(-index|-[jt]sx?$)/, ''));
-
 /**
  * @returns {Promise<import('webpack').Configuration>}
  */
@@ -91,12 +87,9 @@ async function clientConfig(env) {
 				}
 				return env.isProd ? '[name].[chunkhash:5].js' : '[name].js';
 			},
-			chunkFilename: pathData => {
-				const chunkName = cleanFilename2(pathData.chunk.id);
-				return env.isProd
-					? `${chunkName}.chunk.[chunkhash:5].js`
-					: `${chunkName}.chunk.js`;
-			},
+			chunkFilename: env.isProd
+				? '[name].chunk.[chunkhash:5].js'
+				: '[name].chunk.js',
 		},
 
 		resolveLoader: {
@@ -180,7 +173,6 @@ function isProd(env) {
 		cache: true,
 
 		optimization: {
-			chunkIds: 'named',
 			minimizer: [
 				new TerserPlugin({
 					extractComments: false,

packages/cli/package.json

@@ -81,6 +81,7 @@
     "@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.1",
     "@types/webpack": "^4.38.0",
     "autoprefixer": "^10.4.7",
     "babel-loader": "^8.2.5",

packages/cli/tests/subjects/preload-modern/index.js

@@ -0,0 +1,21 @@
+import { LocationProvider, Router } from 'preact-iso/router';
+import { default as lazy, ErrorBoundary } from 'preact-iso/lazy';
+
+const Home = lazy(() => import('./routes/home.js'));
+const Route66 = lazy(() => import('./routes/route66.js'));
+const Route89 = lazy(() => import('./routes/route89.js'));
+import './style.css';
+
+export default function App() {
+	return (
+		<LocationProvider>
+			<ErrorBoundary>
+				<Router>
+					<Home path="/" />
+					<Route66 path="/route66" />
+					<Route89 path="/route89" />
+				</Router>
+			</ErrorBoundary>
+		</LocationProvider>
+	);
+}

packages/cli/tests/subjects/preload-modern/package.json

@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-preload-chunks"
+}

packages/cli/tests/subjects/preload-modern/preact.config.js

@@ -0,0 +1,6 @@
+module.exports = function (config, env, helpers) {
+	// TODO: clean up later, just removes the async loader
+	if (env.isProd && !env.isServer) {
+		config.module.rules.pop();
+	}
+};

packages/cli/tests/subjects/preload-modern/routes/home.css

@@ -0,0 +1,3 @@
+.home {
+	background: red;
+}

packages/cli/tests/subjects/preload-modern/routes/home.js

@@ -0,0 +1,8 @@
+import { useBase } from '../useBase';
+import './home.css';
+
+export default () => {
+	const base = useBase();
+
+	return <div>{base}Home</div>;
+};

packages/cli/tests/subjects/preload-modern/routes/route66.css

@@ -0,0 +1,3 @@
+.route66 {
+	background: tomato;
+}

packages/cli/tests/subjects/preload-modern/routes/route66.js

@@ -0,0 +1,8 @@
+import { useBase } from '../useBase';
+import './route66.css';
+
+export default () => {
+	const base = useBase();
+
+	return <div>{base}route66</div>;
+};

packages/cli/tests/subjects/preload-modern/routes/route89.css

@@ -0,0 +1,3 @@
+.route66 {
+	background: tomato;
+}

packages/cli/tests/subjects/preload-modern/routes/route89.js

@@ -0,0 +1,8 @@
+import { useBase } from '../useBase';
+import './route89.css';
+
+export default () => {
+	const base = useBase();
+
+	return <div>{base}route89</div>;
+};

packages/cli/tests/subjects/preload-modern/style.css

@@ -0,0 +1,3 @@
+html {
+	padding: 0px;
+}

packages/cli/tests/subjects/preload-modern/useBase.js

@@ -0,0 +1,6 @@
+import { useState } from 'preact/hooks';
+
+export function useBase() {
+	const [dummyState, _setDummyState] = useState('');
+	return dummyState;
+}

packages/create-cli/lib/commands/create.js

@@ -35,8 +35,10 @@ exports.create = async function create(repo, dest, argv) {
 	if (!repo.includes('/')) {
 		repo = `preactjs-templates/${repo}`;
 
-		// TODO: Remove this after updating all templates
-		if (repo.endsWith('default') || repo.endsWith('typescript')) {
+		// TODO: This is an awful hack but necessary to test with
+		if (repo.endsWith('default')) {
+			repo += '#experimental/preact-iso';
+		} else if (repo.endsWith('typescript')) {
 			repo += '#next';
 		}
 	}

yarn.lock

@@ -2640,6 +2640,11 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rschristian/babel-plugin-webpack-chunk-name-comments@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@rschristian/babel-plugin-webpack-chunk-name-comments/-/babel-plugin-webpack-chunk-name-comments-0.1.1.tgz#8a3939eb2ee7578cc7e56ad99f0ba4af0adb8b13"
+  integrity sha512-m4W4X1hIAD/kWCAWV42bWmSDP4NnB6y7nlq5S3kl4JvaSXGtL7SAbd5Z7LxZItwhxIRbCON4Tz9Any676PMULA==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"