From 750f9e2f7447b6057e91ab0fcbf86c269f04f997 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Wed, 7 Aug 2019 17:56:23 +0200
Subject: [PATCH 1/2] Simplify preact-cli template injection

---
 .gitignore                                    |  1 +
 .prettierignore                               |  1 +
 .../cli/lib/lib/webpack/render-html-plugin.js | 32 +++++++++++++++++--
 packages/cli/lib/resources/body-end.ejs       | 18 +++++++++++
 packages/cli/lib/resources/head-end.ejs       | 12 +++++++
 packages/cli/tests/build.test.js              | 10 ++++++
 packages/cli/tests/images/build.js            | 16 ++++++++++
 .../tests/subjects/custom-template-2/index.js |  3 ++
 .../subjects/custom-template-2/package.json   |  4 +++
 .../subjects/custom-template-2/template.html  | 12 +++++++
 10 files changed, 106 insertions(+), 3 deletions(-)
 create mode 100644 packages/cli/lib/resources/body-end.ejs
 create mode 100644 packages/cli/lib/resources/head-end.ejs
 create mode 100644 packages/cli/tests/subjects/custom-template-2/index.js
 create mode 100644 packages/cli/tests/subjects/custom-template-2/package.json
 create mode 100644 packages/cli/tests/subjects/custom-template-2/template.html

diff --git a/.gitignore b/.gitignore
index 3bd0e8b70..9135188c6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ tmp-*.json
 
 .idea/
 .vscode
+*.tmp.*
diff --git a/.prettierignore b/.prettierignore
index 8741598a4..321f64a39 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,4 @@
 **/node_modules
 **/tests/output
 **/package.json
+**/*.ejs
diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js
index 7a54bb093..829ef95f2 100644
--- a/packages/cli/lib/lib/webpack/render-html-plugin.js
+++ b/packages/cli/lib/lib/webpack/render-html-plugin.js
@@ -1,24 +1,50 @@
 const { resolve } = require('path');
-const { existsSync } = require('fs');
+const { existsSync, readFileSync, writeFileSync } = require('fs');
 const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
 const createLoadManifest = require('./create-load-manifest');
 const { warn } = require('../../util');
 const { info } = require('../../util');
-let template = resolve(__dirname, '../../resources/template.html');
+let defaultTemplate = resolve(__dirname, '../../resources/template.html');
+
+function read(path) {
+	return readFileSync(resolve(__dirname, path), 'utf-8');
+}
 
 module.exports = async function(config) {
 	const { cwd, dest, isProd, src } = config;
 	const inProjectTemplatePath = resolve(src, 'template.html');
+	let template = defaultTemplate;
 	if (existsSync(inProjectTemplatePath)) {
 		template = inProjectTemplatePath;
 	}
+
+	template = config.template || template;
+
+	let content = read(template);
+	if (/preact\.headEnd|preact\.bodyEnd/.test(content)) {
+		const headEnd = read('../../resources/head-end.ejs');
+		const bodyEnd = read('../../resources/body-end.ejs');
+		content = content
+			.replace(
+				/<%\s+preact\.title\s+%>/,
+				'<%= htmlWebpackPlugin.options.title %>'
+			)
+			.replace(/<%\s+preact\.headEnd\s+%>/, headEnd)
+			.replace(/<%\s+preact\.bodyEnd\s+%>/, bodyEnd);
+
+		// Unfortunately html-webpack-plugin expects a true file,
+		// so we'll create a temporary one.
+		template = resolve(__dirname, 'template.tmp.ejs');
+		writeFileSync(template, content);
+	}
+
 	const htmlWebpackConfig = values => {
 		const { url, title, ...routeData } = values;
 		return Object.assign(values, {
 			filename: resolve(dest, url.substring(1), 'index.html'),
-			template: `!!ejs-loader!${config.template || template}`,
+			template: `!!ejs-loader!${template}`,
 			minify: isProd && {
 				collapseWhitespace: true,
 				removeScriptTypeAttributes: true,
diff --git a/packages/cli/lib/resources/body-end.ejs b/packages/cli/lib/resources/body-end.ejs
new file mode 100644
index 000000000..e325d0210
--- /dev/null
+++ b/packages/cli/lib/resources/body-end.ejs
@@ -0,0 +1,18 @@
+<%= htmlWebpackPlugin.options.ssr() %>
+<% if (webpack.assets.filter(entry => entry.name.match(/bundle(\.\w{5})?.esm.js$/)).length > 0) { %>
+	<% /* Fix for safari < 11 nomodule bug. TODO: Do the following only for safari. */ %>
+	<script nomodule>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script>
+	<script crossorigin="anonymous" src="<%= htmlWebpackPlugin.files.publicPath %><%= webpack.assets.filter(entry => entry.name.match(/bundle(\.\w{5})?.esm.js$/))[0].name %>" type="module"></script>
+	<%
+		/*Fetch and Promise polyfills are not needed for browsers that support type=module
+		Please re-evaluate below line if adding more polyfills.*/
+	%>
+	<script nomodule src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"></script>
+	<script nomodule defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+<% } else { %>
+	<script <%= htmlWebpackPlugin.options.scriptLoading %>  src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+	<script nomodule src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"></script>
+<% } %>
+<script type="__PREACT_CLI_DATA__">
+	<%= JSON.stringify(htmlWebpackPlugin.options.CLI_DATA) %>
+</script>
diff --git a/packages/cli/lib/resources/head-end.ejs b/packages/cli/lib/resources/head-end.ejs
new file mode 100644
index 000000000..b5bb729aa
--- /dev/null
+++ b/packages/cli/lib/resources/head-end.ejs
@@ -0,0 +1,12 @@
+<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
+<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
+	<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
+<% } %>
+<% const loadManifest = htmlWebpackPlugin.options.createLoadManifest(compilation.assets, webpack.namedChunkGroups);%>
+<% const filesRegexp = htmlWebpackPlugin.options.inlineCss ? /\.(chunk\.\w{5}\.css|js)$/ : /\.(css|js)$/;%>
+<% for (const file in loadManifest[htmlWebpackPlugin.options.url]) { %>
+	<% if (htmlWebpackPlugin.options.preload && file && file.match(filesRegexp)) { %>
+		<% /* crossorigin for main bundle as that is loaded from `<script type=module` tag, other lazy loaded bundles are from webpack so its not needed */ %>
+		<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>" <%= file.match(/bundle\.\w{5}\.esm\.js$/)?'crossorigin="anonymous"':'' %>>
+	<% } %>
+<% } %>
diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
index cd8f4ab31..9be460f2b 100644
--- a/packages/cli/tests/build.test.js
+++ b/packages/cli/tests/build.test.js
@@ -136,4 +136,14 @@ describe('preact build', () => {
 		let dir = await subject('location-patch');
 		expect(() => build(dir)).not.toThrow();
 	});
+
+	it('should inject preact.* variables into template', async () => {
+		let dir = await subject('custom-template-2');
+		await build(dir);
+
+		let file = join(dir, 'build/index.html');
+		let html = await readFile(file, 'utf-8');
+
+		looksLike(html, images.templateReplaced);
+	});
 });
diff --git a/packages/cli/tests/images/build.js b/packages/cli/tests/images/build.js
index 978090cb2..e8016181e 100644
--- a/packages/cli/tests/images/build.js
+++ b/packages/cli/tests/images/build.js
@@ -153,3 +153,19 @@ exports.template = `
 	</body>
 </html>
 `;
+
+exports.templateReplaced = `
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>preact-webpack</title>
+		<link rel="manifest" href="/manifest.json">
+	</head>
+	<body>
+		<h1>Guess what</h1>
+		<h2>This is an app with custom template</h2>
+		{{ ... }}
+	</body>
+</html>
+`;
diff --git a/packages/cli/tests/subjects/custom-template-2/index.js b/packages/cli/tests/subjects/custom-template-2/index.js
new file mode 100644
index 000000000..dcf3bb109
--- /dev/null
+++ b/packages/cli/tests/subjects/custom-template-2/index.js
@@ -0,0 +1,3 @@
+import { h } from 'preact';
+
+export default () => <h2>This is an app with custom template</h2>;
diff --git a/packages/cli/tests/subjects/custom-template-2/package.json b/packages/cli/tests/subjects/custom-template-2/package.json
new file mode 100644
index 000000000..94671fbec
--- /dev/null
+++ b/packages/cli/tests/subjects/custom-template-2/package.json
@@ -0,0 +1,4 @@
+{
+  "private": true,
+  "name": "preact-webpack"
+}
diff --git a/packages/cli/tests/subjects/custom-template-2/template.html b/packages/cli/tests/subjects/custom-template-2/template.html
new file mode 100644
index 000000000..d2f4d0365
--- /dev/null
+++ b/packages/cli/tests/subjects/custom-template-2/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title><% preact.title %></title>
+		<% preact.headEnd %>
+	</head>
+	<body>
+		<h1>Guess what</h1>
+		<% preact.bodyEnd %>
+	</body>
+</html>

From 0b52ec59ba8bbceed9f8b40b4889ca7236c6c890 Mon Sep 17 00:00:00 2001
From: Marvin Hagemeister <hello@marvinh.dev>
Date: Wed, 7 Aug 2019 19:05:14 +0200
Subject: [PATCH 2/2] WIP Inline-loader

---
 packages/cli/lib/lib/webpack/empty.html       |  1 +
 packages/cli/lib/lib/webpack/inline-loader.js |  8 ++++++++
 .../cli/lib/lib/webpack/render-html-plugin.js | 19 +++++++++++++------
 .../lib/lib/webpack/webpack-base-config.js    |  1 +
 packages/cli/tests/build.test.js              |  9 ++++++++-
 5 files changed, 31 insertions(+), 7 deletions(-)
 create mode 100644 packages/cli/lib/lib/webpack/empty.html
 create mode 100644 packages/cli/lib/lib/webpack/inline-loader.js

diff --git a/packages/cli/lib/lib/webpack/empty.html b/packages/cli/lib/lib/webpack/empty.html
new file mode 100644
index 000000000..1a4a02127
--- /dev/null
+++ b/packages/cli/lib/lib/webpack/empty.html
@@ -0,0 +1 @@
+<!-- Placeholder file for inline-loader. Don't put something in here -->
diff --git a/packages/cli/lib/lib/webpack/inline-loader.js b/packages/cli/lib/lib/webpack/inline-loader.js
new file mode 100644
index 000000000..53700c564
--- /dev/null
+++ b/packages/cli/lib/lib/webpack/inline-loader.js
@@ -0,0 +1,8 @@
+import loaderUtils from 'loader-utils';
+
+module.exports = function() {
+	let { code, filename, cacheable } = loaderUtils.getOptions(this);
+	if (cacheable === false) this.cacheable(false);
+	this.resourcePath = filename;
+	return code.replace(/__PREACT__BANG__/g, '!');
+};
diff --git a/packages/cli/lib/lib/webpack/render-html-plugin.js b/packages/cli/lib/lib/webpack/render-html-plugin.js
index 829ef95f2..7288172b6 100644
--- a/packages/cli/lib/lib/webpack/render-html-plugin.js
+++ b/packages/cli/lib/lib/webpack/render-html-plugin.js
@@ -1,5 +1,5 @@
 const { resolve } = require('path');
-const { existsSync, readFileSync, writeFileSync } = require('fs');
+const { existsSync, readFileSync } = require('fs');
 const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const prerender = require('./prerender');
@@ -23,7 +23,9 @@ module.exports = async function(config) {
 	template = config.template || template;
 
 	let content = read(template);
+	let hasAbtraction = false;
 	if (/preact\.headEnd|preact\.bodyEnd/.test(content)) {
+		hasAbtraction = true;
 		const headEnd = read('../../resources/head-end.ejs');
 		const bodyEnd = read('../../resources/body-end.ejs');
 		content = content
@@ -34,17 +36,22 @@ module.exports = async function(config) {
 			.replace(/<%\s+preact\.headEnd\s+%>/, headEnd)
 			.replace(/<%\s+preact\.bodyEnd\s+%>/, bodyEnd);
 
-		// Unfortunately html-webpack-plugin expects a true file,
-		// so we'll create a temporary one.
-		template = resolve(__dirname, 'template.tmp.ejs');
-		writeFileSync(template, content);
+		// webpack treats every ! as a loader call. We'll replace it back to the
+		// original in our loader.
+		content = content.replace(/!/g, '__PREACT__BANG__');
+		template = `!!ejs-loader!inline-loader?filename=template.js&code=${content}!${resolve(
+			__dirname,
+			'empty.html'
+		)}`;
+		// template = resolve(__dirname, 'template.tmp.ejs');
+		// writeFileSync(template, content);
 	}
 
 	const htmlWebpackConfig = values => {
 		const { url, title, ...routeData } = values;
 		return Object.assign(values, {
 			filename: resolve(dest, url.substring(1), 'index.html'),
-			template: `!!ejs-loader!${template}`,
+			template: !hasAbtraction ? `!!ejs-loader!${template}` : template,
 			minify: isProd && {
 				collapseWhitespace: true,
 				removeScriptTypeAttributes: true,
diff --git a/packages/cli/lib/lib/webpack/webpack-base-config.js b/packages/cli/lib/lib/webpack/webpack-base-config.js
index 9f5abb0d9..3b907007f 100644
--- a/packages/cli/lib/lib/webpack/webpack-base-config.js
+++ b/packages/cli/lib/lib/webpack/webpack-base-config.js
@@ -139,6 +139,7 @@ module.exports = function(env) {
 			modules: [...nodeModules],
 			alias: {
 				'proxy-loader': require.resolve('./proxy-loader'),
+				'inline-loader': require.resolve('./inline-loader'),
 			},
 		},
 
diff --git a/packages/cli/tests/build.test.js b/packages/cli/tests/build.test.js
index 9be460f2b..0dca3b0a7 100644
--- a/packages/cli/tests/build.test.js
+++ b/packages/cli/tests/build.test.js
@@ -139,11 +139,18 @@ describe('preact build', () => {
 
 	it('should inject preact.* variables into template', async () => {
 		let dir = await subject('custom-template-2');
-		await build(dir);
+		try {
+			await build(dir);
+		} catch (e) {
+			console.log('ERROR', e);
+			throw e;
+		}
 
+		console.log('YEAAAH');
 		let file = join(dir, 'build/index.html');
 		let html = await readFile(file, 'utf-8');
 
+		console.log('REPLACED', html);
 		looksLike(html, images.templateReplaced);
 	});
 });