Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(html): Allow adding arbitrary HTML to body and head #339

Closed
wants to merge 4 commits into from
Closed

feat(html): Allow adding arbitrary HTML to body and head #339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d21db1d
chore: fixup html plugin readme
yagebu Apr 27, 2020
c49ca2f
fix(html): remove eslint-disable; improve helper func
yagebu Apr 27, 2020
ce0cd0b
chore(html): fix type description
yagebu Apr 27, 2020
c999c0e
feat(html): add body and head options to insert extra HTML
yagebu Apr 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 22 additions & 6 deletions packages/html/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,20 +57,34 @@ 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`<br>
Default: `''`

Specifies any extra HTML to insert into the `<body>` tag.

### `fileName`

Type: `String`<br>
Default: `'index.html'`

Specifies the name of the HTML to emit.

### `head`

Type: `String`<br>
Default: `''`

Specifies any extra HTML to insert into the `<head>` tag.

### `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`

Type: `String`<br>
Expand All @@ -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

Expand All @@ -104,10 +120,10 @@ By default this is handled internally and produces HTML in the following format:
<head>
${metas}
<title>${title}</title>
${links}
${links}${head}
</head>
<body>
${scripts}
${scripts}${body}
</body>
</html>
```
Expand All @@ -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
Expand Down
27 changes: 19 additions & 8 deletions packages/html/lib/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -52,10 +52,10 @@ const defaultTemplate = async ({ attributes, files, meta, publicPath, title }) =
<head>
${metas}
<title>${title}</title>
${links}
${links}${head}
</head>
<body>
${scripts}
${scripts}${body}
</body>
</html>`;
};
Expand All @@ -68,15 +68,17 @@ const defaults = {
html: { lang: 'en' },
script: null
},
body: '',
fileName: 'index.html',
head: '',
meta: [{ charset: 'utf-8' }],
publicPath: '',
template: defaultTemplate,
title: 'Rollup Bundle'
};

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
Expand All @@ -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',
Expand Down
4 changes: 3 additions & 1 deletion packages/html/test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<link rel="icon" href="favicon.ico" type="image/x-icon">',
body: '<script type="application/json">{}</script>'
})
]
});
Expand Down