diff --git a/packages/html/README.md b/packages/html/README.md
index 7f9d0029f..b7f55caa6 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`
+Default: `[{ charset: 'utf-8' }]`
+
+Specifies attributes used to create `meta` elements. For each array member, 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:
-
+ ${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 e6771f46d..92e09ccb3 100644
--- a/packages/html/test/snapshots/test.js.md
+++ b/packages/html/test/snapshots/test.js.md
@@ -20,11 +20,13 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'joker.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'joker.css',
+ map: undefined,
source: Buffer @Uint8Array [
2a207b20 77696474 683a2031 3030253b 207d0a
],
@@ -32,6 +34,7 @@ Generated by [AVA](https://ava.li).
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -63,11 +66,13 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'joker.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'joker.css',
+ map: undefined,
source: Buffer @Uint8Array [
2a207b20 77696474 683a2031 3030253b 207d0a
],
@@ -75,6 +80,7 @@ Generated by [AVA](https://ava.li).
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -106,11 +112,13 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -135,11 +143,13 @@ Generated by [AVA](https://ava.li).
code: `␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -169,11 +179,13 @@ Generated by [AVA](https://ava.li).
}());␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -205,11 +217,13 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'robin.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
@@ -241,16 +255,19 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'batman.html',
+ map: undefined,
source: `␊
␊
␊
␊
␊
+ ␊
Batcave␊
␊
␊
@@ -277,11 +294,13 @@ Generated by [AVA](https://ava.li).
})));␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: '',
},
]
@@ -296,11 +315,13 @@ Generated by [AVA](https://ava.li).
␊
`,
fileName: 'batman.js',
+ map: null,
source: undefined,
},
{
code: undefined,
fileName: 'index.html',
+ map: undefined,
source: `␊
␊
␊
diff --git a/packages/html/test/snapshots/test.js.snap b/packages/html/test/snapshots/test.js.snap
index 36b25dd12..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' }
+ ]
})
]
});