Add support for async templates (#21)

akx · bebraw · commit bc6c773efd5d · 2020-01-28T11:22:55.000+01:00
diff --git a/README.md b/README.md
@@ -93,7 +93,9 @@ const config = {
 
 Use [@vxna/mini-html-webpack-template](https://www.npmjs.com/package/@vxna/mini-html-webpack-template) to add an app container div, a favicon, meta tags, inline JavaScript or CSS.
 
-Or define a template function to generate your own code:
+Or define a template function to generate your own code.
+
+The template function may return a string or a Promise resolving to a string.
 
 ```js
 const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin');
diff --git a/__snapshots__/test.js.snap b/__snapshots__/test.js.snap
@@ -28,6 +28,8 @@ exports[`additional head 1`] = `
   </html>"
 `;
 
+exports[`custom async template 1`] = `"<div>Pizza</div>"`;
+
 exports[`custom chunks 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
diff --git a/index.js b/index.js
@@ -23,11 +23,10 @@ class MiniHtmlWebpackPlugin {
 
 		const options = Object.assign({}, { publicPath }, context, files);
 
-		compilation.assets[filename] = new RawSource(
-			(template || defaultTemplate)(options)
-		);
-
-		callback();
+		Promise.resolve((template || defaultTemplate)(options)).then(source => {
+			compilation.assets[filename] = new RawSource(source);
+			callback();
+		});
 	}
 
 	apply(compiler) {
diff --git a/test.js b/test.js
@@ -106,6 +106,21 @@ test('custom template', () => {
 	});
 });
 
+test('custom async template', () => {
+	return compiler(
+		{},
+		getConfig({
+			context: { title: 'Pizza' },
+			template: ({ title }) => {
+				const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+				return delay(50).then(() => `<div>${title}</div>`);
+			},
+		})
+	).then(result => {
+		expect(result.compilation.assets['index.html']._value).toMatchSnapshot();
+	});
+});
+
 test('custom filename', () => {
 	const filename = 'pizza.html';
 	return compiler({}, getConfig({ filename })).then(result => {
