diff --git a/packages/html/README.md b/packages/html/README.md
index 7f9d0029f..3a20e0b12 100644
--- 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`
Default: `'index.html'`
+### `meta`
+
+Type: `Array[...object]`
+Default: `[{ charset: 'utf-8' }]`
+
+Specifies attributes used to create `` elements. For each array item, provide an object with key-value pairs that represent `` 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:
-
+ ${metas}
${title}
${links}
diff --git a/packages/html/lib/index.js b/packages/html/lib/index.js
index c85ba354e..b5e136d07 100644
--- 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 ``;
+ })
+ .join('\n');
+
return `
-
+ ${metas}
${title}
${links}
@@ -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
index bbbf9f004..92e09ccb3 100644
--- 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).
␊
␊
␊
+ ␊
Batcave␊
␊
␊
diff --git a/packages/html/test/snapshots/test.js.snap b/packages/html/test/snapshots/test.js.snap
index f7873ad4e..c9eea875c 100644
Binary files a/packages/html/test/snapshots/test.js.snap and b/packages/html/test/snapshots/test.js.snap differ
diff --git a/packages/html/test/test.js b/packages/html/test/test.js
index 1a8890679..ef11a9745 100644
--- 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' }
+ ]
})
]
});