Fix/prerender urls esm

.changeset/dirty-socks-invite.md

@@ -0,0 +1,5 @@
+---
+'preact-cli': patch
+---
+
+Allows users to author prerender-urls.js as ESM once again

README.md

@@ -279,6 +279,21 @@ module.exports = [
 ];
 ```
 
+```js
+// prerender-urls.js
+export default () => {
+	return [
+		{
+			url: '/',
+			title: 'Homepage',
+		},
+		{
+			url: '/route/random',
+		},
+	];
+};
+```
+
 #### Template
 
 A template is used to render your page by [EJS](https://ejs.co/).

packages/cli/jest.config.js

@@ -31,4 +31,7 @@ module.exports = {
 
 	// This option allows use of a custom test runner
 	// testRunner: "jest-circus/runner",
+
+	// TODO: Restored in #1667, remove when upgrading Jest
+	testEnvironment: 'node',
 };

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

@@ -5,8 +5,7 @@ const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plug
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
 const createLoadManifest = require('./create-load-manifest');
-const { warn } = require('../../util');
-const { info } = require('../../util');
+const { esmImport, warn } = require('../../util');
 
 const PREACT_FALLBACK_URL = '/200.html';
 
@@ -109,19 +108,18 @@ module.exports = async function (config) {
 	if (config.prerenderUrls) {
 		if (existsSync(resolve(cwd, config.prerenderUrls))) {
 			try {
-				let result = require(resolve(cwd, config.prerenderUrls));
+				let result = esmImport(resolve(cwd, config.prerenderUrls));
+
 				if (typeof result.default !== 'undefined') {
-					result = result.default();
+					result = result.default;
 				}
 				if (typeof result === 'function') {
-					info(`Fetching URLs from ${config.prerenderUrls}`);
 					result = await result();
-					info(`Fetched URLs from ${config.prerenderUrls}`);
 				}
 				if (typeof result === 'string') {
 					result = JSON.parse(result);
 				}
-				if (result instanceof Array) {
+				if (Array.isArray(result)) {
 					pages = result;
 				}
 			} catch (error) {

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

@@ -1,7 +1,7 @@
 const { resolve } = require('path');
 const webpack = require('webpack');
 const { stat } = require('fs').promises;
-const { error } = require('../../util');
+const { error, esmImport } = require('../../util');
 
 const FILE = 'preact.config';
 const EXTENSIONS = ['js', 'json'];
@@ -98,23 +98,26 @@ module.exports = async function (env, webpackConfig, isServer = false) {
 	env.config = configFile;
 	let myConfig = resolve(env.cwd, env.config);
 
+	let m;
 	try {
-		await stat(myConfig);
-	} catch (e) {
-		if (isDefault) return;
+		m = esmImport(myConfig);
+	} catch (err) {
+		const notFound =
+			err.message.includes('Cannot find module') ||
+			err.message.includes('Qualified path resolution failed');
+		if (notFound && isDefault) return;
+		if (notFound) {
+			throw new Error(
+				`Failed to load preact-cli config!\nFile ${env.config} not found.\n`
+			);
+		}
 		throw new Error(
-			`preact-cli config could not be loaded!\nFile ${env.config} not found.`
+			`Failed to load preact-cli config!\n${
+				env.verbose ? err.stack : err.message
+			}\n`
 		);
 	}
 
-	let m = require('esm')(module)(myConfig);
-
-	// The line above results in an empty object w/ Jest,
-	// so we need to do the following in order to load it:
-	if (Object.keys(m).length === 0) {
-		m = require(myConfig);
-	}
-
 	const transformers = parseConfig((m && m.default) || m);
 
 	const helpers = new WebpackConfigHelpers(env.cwd);

packages/cli/lib/util.js

@@ -56,6 +56,8 @@ exports.toBool = function (val) {
 	return val === void 0 || (val === 'false' ? false : val);
 };
 
+exports.esmImport = require('esm')(module);
+
 /**
  * Taken from: https://github.com/preactjs/wmr/blob/3401a9bfa6491d25108ad68688c067a7e17d0de5/packages/wmr/src/lib/net-utils.js#L4-Ll4
  * Check if a port is free

packages/cli/package.json

@@ -34,9 +34,9 @@
   "homepage": "https://github.com/preactjs/preact-cli",
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^24.9.1",
     "html-looks-like": "^1.0.2",
-    "jest": "^27.0.1",
+    "jest": "^24.9.0",
     "less": "^4.1.1",
     "less-loader": "^7.3.0",
     "ncp": "^2.0.0",

packages/cli/tests/config.test.js

@@ -0,0 +1,65 @@
+const { build } = require('./lib/cli');
+const { subject } = require('./lib/output');
+
+const formats = ['cjs', 'esm'];
+
+const prerenderUrlFiles = [
+	'array.js',
+	'stringified-array.js',
+	'function-returning-array.js',
+	'function-returning-stringified-array.js',
+];
+
+const preactConfigFiles = ['function.js', 'object.js'];
+
+describe('config files', () => {
+	describe('prerender-urls', () => {
+		it(`should load the 'prerender-urls.json' file`, async () => {
+			let dir = await subject('multiple-config-files');
+
+			const logSpy = jest.spyOn(process.stdout, 'write');
+
+			await build(dir);
+
+			expect(logSpy).not.toHaveBeenCalledWith(
+				expect.stringContaining(
+					'Failed to load prerenderUrls file, using default!'
+				)
+			);
+		});
+
+		formats.forEach(moduleFormat => {
+			prerenderUrlFiles.forEach(dataFormat => {
+				it(`should load the '${dataFormat}' file in ${moduleFormat}`, async () => {
+					let dir = await subject('multiple-config-files');
+
+					const logSpy = jest.spyOn(process.stdout, 'write');
+
+					await build(dir, {
+						prerenderUrls: `prerenderUrls/${moduleFormat}/${dataFormat}`,
+					});
+
+					expect(logSpy).not.toHaveBeenCalledWith(
+						expect.stringContaining(
+							'Failed to load prerenderUrls file, using default!'
+						)
+					);
+				});
+			});
+		});
+	});
+
+	describe('preact.config', () => {
+		formats.forEach(moduleFormat => {
+			preactConfigFiles.forEach(dataFormat => {
+				it(`should load the '${dataFormat}' file in ${moduleFormat}`, async () => {
+					let dir = await subject('multiple-config-files');
+
+					await expect(
+						build(dir, { config: `preactConfig/${moduleFormat}/${dataFormat}` })
+					).resolves.not.toThrow();
+				});
+			});
+		});
+	});
+});

packages/cli/tests/subjects/multiple-config-files/index.js

@@ -0,0 +1,19 @@
+import { h, Component } from 'preact';
+import { Router } from 'preact-router';
+import Home from './routes/home';
+
+export default class App extends Component {
+	handleRoute = e => {
+		this.currentUrl = e.url;
+	};
+
+	render(props) {
+		return (
+			<div id="app">
+				<Router url={props.url} onChange={this.handleRoute} {...props}>
+					<Home path="/" />
+				</Router>
+			</div>
+		);
+	}
+}

packages/cli/tests/subjects/multiple-config-files/package.json

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

packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/function.js

@@ -0,0 +1 @@
+module.exports = function () {};

packages/cli/tests/subjects/multiple-config-files/preactConfig/cjs/object.js

@@ -0,0 +1,3 @@
+module.exports = {
+	webpack() {},
+};

packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/function.js

@@ -0,0 +1 @@
+export default function () {}

packages/cli/tests/subjects/multiple-config-files/preactConfig/esm/object.js

@@ -0,0 +1,3 @@
+export default {
+	webpack() {},
+};

packages/cli/tests/subjects/multiple-config-files/prerender-urls.json

@@ -0,0 +1,8 @@
+[
+	{
+		"url": "/"
+	},
+	{
+		"url": "/custom"
+	}
+]

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/cjs/array.js

@@ -0,0 +1,8 @@
+module.exports = [
+	{
+		url: '/',
+	},
+	{
+		url: '/custom',
+	},
+];

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/cjs/function-returning-array.js

@@ -0,0 +1,8 @@
+module.exports = () => [
+	{
+		url: '/',
+	},
+	{
+		url: '/custom',
+	},
+];

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/cjs/function-returning-stringified-array.js

@@ -0,0 +1,8 @@
+module.exports = () => `[
+	{
+		"url": "/"
+	},
+	{
+		"url": "/custom"
+	}
+]`;

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/cjs/stringified-array.js

@@ -0,0 +1,8 @@
+module.exports = `[
+	{
+		"url": "/"
+	},
+	{
+		"url": "/custom"
+	}
+]`;

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/esm/array.js

@@ -0,0 +1,8 @@
+export default [
+	{
+		url: '/',
+	},
+	{
+		url: '/custom',
+	},
+];

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/esm/function-returning-array.js

@@ -0,0 +1,8 @@
+export default () => [
+	{
+		url: '/',
+	},
+	{
+		url: '/custom',
+	},
+];

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/esm/function-returning-stringified-array.js

@@ -0,0 +1,8 @@
+export default () => `[
+	{
+		"url": "/"
+	},
+	{
+		"url": "/custom"
+	}
+]`;

packages/cli/tests/subjects/multiple-config-files/prerenderUrls/esm/stringified-array.js

@@ -0,0 +1,8 @@
+export default `[
+	{
+		"url": "/"
+	},
+	{
+		"url": "/custom"
+	}
+]`;

packages/cli/tests/subjects/multiple-config-files/routes/home.css

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

packages/cli/tests/subjects/multiple-config-files/routes/home.js

@@ -0,0 +1,3 @@
+import './home.css';
+
+export default () => <div>Home</div>;