feat(html): support custom meta element creation (#308)

* feat(html): support custom meta element creation This allows for convenient creation of `meta` elements without reimplementing all template function responsibilities. * chore: readme changes Co-authored-by: Andrew Powell <shellscape@users.noreply.github.com>
rollup · Apr 26, 2020 · 05ef80b · 05ef80b
1 parent 7416d8d
commit 05ef80b
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 6 deletions.
diff --git a/packages/html/README.md b/packages/html/README.md
@@ -62,6 +62,13 @@ _Note: If using the `es` / `esm` output format, `{ type: 'module'}` is automatic
 Type: `String`<br>
 Default: `'index.html'`
 
+### `meta`
+
+Type: `Array[...object]`<br>
+Default: `[{ charset: 'utf-8' }]`
+
+Specifies attributes used to create `<meta>` elements. For each array item, provide an object with key-value pairs that represent `<meta>` element attribute names and values.
+
 Specifies the name of the HTML to emit.
 
 ### `publicPath`
@@ -95,7 +102,7 @@ By default this is handled internally and produces HTML in the following format:
 <!DOCTYPE html>
 <html ${attributes}>
   <head>
-    <meta charset="utf-8" />
+    ${metas}
     <title>${title}</title>
     ${links}
   </head>

diff --git a/packages/html/lib/index.js b/packages/html/lib/index.js
@@ -24,7 +24,7 @@ const makeHtmlAttributes = (attributes) => {
   return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
 };
 
-const defaultTemplate = async ({ attributes, files, publicPath, title }) => {
+const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) => {
   const scripts = (files.js || [])
     .map(({ fileName }) => {
       const attrs = makeHtmlAttributes(attributes.script);
@@ -39,11 +39,18 @@ const defaultTemplate = async ({ attributes, files, publicPath, title }) => {
     })
     .join('\n');
 
+  const metas = meta
+    .map((input) => {
+      const attrs = makeHtmlAttributes(input);
+      return `<meta${attrs}>`;
+    })
+    .join('\n');
+
   return `
 <!doctype html>
 <html${makeHtmlAttributes(attributes.html)}>
   <head>
-    <meta charset="utf-8">
+    ${metas}
     <title>${title}</title>
     ${links}
   </head>
@@ -62,13 +69,19 @@ const defaults = {
     script: null
   },
   fileName: 'index.html',
+  meta: [{ charset: 'utf-8' }],
   publicPath: '',
   template: defaultTemplate,
   title: 'Rollup Bundle'
 };
 
 const html = (opts = {}) => {
-  const { attributes, fileName, publicPath, template, title } = Object.assign({}, defaults, opts);
+  const { attributes, fileName, meta, publicPath, template, title } = Object.assign(
+    {},
+    defaults,
+    opts
+  );
+
   return {
     name: 'html',
 
@@ -88,7 +101,7 @@ const html = (opts = {}) => {
       }
 
       const files = getFiles(bundle);
-      const source = await template({ attributes, bundle, files, publicPath, title });
+      const source = await template({ attributes, bundle, files, meta, publicPath, title });
 
       const htmlFile = {
         type: 'asset',

diff --git a/packages/html/test/snapshots/test.js.md b/packages/html/test/snapshots/test.js.md
@@ -267,6 +267,7 @@ Generated by [AVA](https://ava.li).
         <html lang="en">␊
           <head>␊
             <meta charset="utf-8">␊
+        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width">␊
             <title>Batcave</title>␊
             ␊
           </head>␊

diff --git a/packages/html/test/snapshots/test.js.snap b/packages/html/test/snapshots/test.js.snap
diff --git a/packages/html/test/test.js b/packages/html/test/test.js
@@ -30,7 +30,11 @@ test.serial('options', async (t) => {
       html({
         fileName: 'batman.html',
         publicPath: 'batcave/',
-        title: 'Batcave'
+        title: 'Batcave',
+        meta: [
+          { charset: 'utf-8' },
+          { name: 'viewport', content: 'minimum-scale=1, initial-scale=1, width=device-width' }
+        ]
       })
     ]
   });