refactor: Closer but still a bunch of issues

Author: rschristian

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>;
+};