feat: Add support for head and body parameters (#20)

bebraw · web-flow · commit f16bf21fb57a · 2020-01-06T11:01:41.000+02:00
Add support for `body` and `head` to default template. Closes #19.
diff --git a/README.md b/README.md
@@ -26,6 +26,10 @@ const config = {
         title: 'Webpack demo',
         // Optional, defaults to `{ lang: 'en' }`
         htmlAttributes: { lang: 'en' },
+        // Optional, any additional HTML attached within <head>
+        head: '',
+        // Optional, any additional HTML attached within <body>
+        body: '',
         // Optional
         cssAttributes: { rel: 'preload' },
         // Optional
diff --git a/__snapshots__/test.js.snap b/__snapshots__/test.js.snap
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`additional body 1`] = `
+"<!DOCTYPE html>
+  <html lang=\\"en\\">
+    <head>
+      <meta charset=\\"UTF-8\\">
+      <title></title>
+      
+    </head>
+    <body>
+      <div>Demo</div><script src=\\"runtime~main.js\\"></script><script src=\\"main.js\\"></script>
+    </body>
+  </html>"
+`;
+
+exports[`additional head 1`] = `
+"<!DOCTYPE html>
+  <html lang=\\"en\\">
+    <head>
+      <meta charset=\\"UTF-8\\">
+      <title></title>
+      <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\" />
+    </head>
+    <body>
+      <script src=\\"runtime~main.js\\"></script><script src=\\"main.js\\"></script>
+    </body>
+  </html>"
+`;
+
 exports[`custom chunks 1`] = `
 "<!DOCTYPE html>
   <html lang=\\"en\\">
diff --git a/index.js b/index.js
@@ -81,6 +81,8 @@ function defaultTemplate({
 	htmlAttributes = {
 		lang: 'en',
 	},
+	head = '',
+	body = '',
 	cssAttributes = {},
 	jsAttributes = {},
 }) {
@@ -103,10 +105,10 @@ function defaultTemplate({
     <head>
       <meta charset="UTF-8">
       <title>${title}</title>
-      ${cssTags}
+      ${head}${cssTags}
     </head>
     <body>
-      ${jsTags}
+      ${body}${jsTags}
     </body>
   </html>`;
 }
diff --git a/test.js b/test.js
@@ -63,6 +63,28 @@ test('custom lang', () => {
 	});
 });
 
+test('additional head', () => {
+	return compiler(
+		{},
+		getConfig({
+			context: {
+				head:
+					'<meta name="viewport" content="width=device-width, initial-scale=1.0" />',
+			},
+		})
+	).then(result => {
+		expect(result.compilation.assets['index.html']._value).toMatchSnapshot();
+	});
+});
+
+test('additional body', () => {
+	return compiler({}, getConfig({ context: { body: '<div>Demo</div>' } })).then(
+		result => {
+			expect(result.compilation.assets['index.html']._value).toMatchSnapshot();
+		}
+	);
+});
+
 test('custom js attribute', () => {
 	return compiler(
 		{},
