diff --git a/packages/html/README.md b/packages/html/README.md
index 3a20e0b12..ca289dec8 100644
--- a/packages/html/README.md
+++ b/packages/html/README.md
@@ -57,11 +57,27 @@ Specifies additional attributes for `html`, `link`, and `script` elements. For e
_Note: If using the `es` / `esm` output format, `{ type: 'module'}` is automatically added to `attributes.script`._
+### `body`
+
+Type: `String`
+Default: `''`
+
+Specifies any extra HTML to insert into the `` tag.
+
### `fileName`
Type: `String`
Default: `'index.html'`
+Specifies the name of the HTML to emit.
+
+### `head`
+
+Type: `String`
+Default: `''`
+
+Specifies any extra HTML to insert into the `` tag.
+
### `meta`
Type: `Array[...object]`
@@ -69,8 +85,6 @@ 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`
Type: `String`
@@ -91,8 +105,10 @@ const template = ({ attributes, bundle, files, publicPath, title }) => { ... }
```
- `attributes`: Corresponds to the `attributes` option passed to the plugin
+- `body`: Corresponds to the `body` option passed to the plugin
- `bundle`: An `Object` containing key-value pairs of [`AssetInfo` or `ChunkInfo`](https://rollupjs.org/guide/en/#generatebundle)
-- `files`: An `Array` of `AssetInfo` or `ChunkInfo` containing any entry (`isEntry: true`) files, and any asset (`isAsset: true`) files in the bundle that will be emitted
+- `head`: Corresponds to the `head` option passed to the plugin
+- `files`: An `Object` mapping file types to `Array`s of `AssetInfo` or `ChunkInfo` of entry (`isEntry: true`) files, and asset (`isAsset: true`) files in the bundle that will be emitted
- `publicPath`: Corresponds to the `publicPath` option passed to the plugin
- `title`: Corresponds to the `title` option passed to the plugin
@@ -104,10 +120,10 @@ By default this is handled internally and produces HTML in the following format:
${metas}
${title}
- ${links}
+ ${links}${head}
- ${scripts}
+ ${scripts}${body}
```
@@ -134,7 +150,7 @@ Consumes an object with key-value pairs that represent an HTML element attribute
const { makeHtmlAttributes } = require('@rollup/plugin-html');
makeHtmlAttributes({ lang: 'en', 'data-batcave': 'secret' });
-// -> 'lang="en" data-batcave="secret"'
+// -> ' lang="en" data-batcave="secret"'
```
## Supported Output Formats
diff --git a/packages/html/lib/index.js b/packages/html/lib/index.js
index b5e136d07..1d7322a95 100644
--- a/packages/html/lib/index.js
+++ b/packages/html/lib/index.js
@@ -19,12 +19,12 @@ const makeHtmlAttributes = (attributes) => {
return '';
}
- const keys = Object.keys(attributes);
- // eslint-disable-next-line no-param-reassign
- return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
+ return Object.entries(attributes)
+ .map(([key, value]) => ` ${key}="${value}"`)
+ .join('');
};
-const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) => {
+const defaultTemplate = async ({ attributes, body, files, head, meta, publicPath, title }) => {
const scripts = (files.js || [])
.map(({ fileName }) => {
const attrs = makeHtmlAttributes(attributes.script);
@@ -52,10 +52,10 @@ const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) =
${metas}
${title}
- ${links}
+ ${links}${head}
- ${scripts}
+ ${scripts}${body}
`;
};
@@ -68,7 +68,9 @@ const defaults = {
html: { lang: 'en' },
script: null
},
+ body: '',
fileName: 'index.html',
+ head: '',
meta: [{ charset: 'utf-8' }],
publicPath: '',
template: defaultTemplate,
@@ -76,7 +78,7 @@ const defaults = {
};
const html = (opts = {}) => {
- const { attributes, fileName, meta, publicPath, template, title } = Object.assign(
+ const { attributes, body, fileName, head, meta, publicPath, template, title } = Object.assign(
{},
defaults,
opts
@@ -101,7 +103,16 @@ const html = (opts = {}) => {
}
const files = getFiles(bundle);
- const source = await template({ attributes, bundle, files, meta, publicPath, title });
+ const source = await template({
+ attributes,
+ body,
+ bundle,
+ files,
+ head,
+ meta,
+ publicPath,
+ title
+ });
const htmlFile = {
type: 'asset',
diff --git a/packages/html/test/test.js b/packages/html/test/test.js
index ef11a9745..f45adfdde 100644
--- a/packages/html/test/test.js
+++ b/packages/html/test/test.js
@@ -34,7 +34,9 @@ test.serial('options', async (t) => {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'minimum-scale=1, initial-scale=1, width=device-width' }
- ]
+ ],
+ head: '',
+ body: ''
})
]
});