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' } + ] }) ] });