bdadam/rollup-plugin-html

Import HTML files as strings in rollup build

rollup-plugin-html

Rollup plugin for loading content of HTML files to use as string variable in JavaScript code.

Installation

npm install --save-dev rollup-plugin-html

Usage

import { rollup } from 'rollup';
import html from 'rollup-plugin-html';

rollup({
	entry: 'main.js',
	plugins: [
		html({
			include: '**/*.html'
		})
	]
}).then(...)

Options

include

Type: array or string
Default: **/*.html

A single file pattern, or an array of file patterns to include when importing html files. For more details see rollup-pluginutils.

exclude

Type: array or string
Default: undefined

A single file pattern, or an array of file patterns to exclude when importing html files. For more details see rollup-pluginutils.

htmlMinifierOptions

Type: Object Default: {}

The options which are given to html-minifier

E.g.:

rollup({
	entry: 'main.js',
	plugins: [
		html({
			include: '**/*.html',
			htmlMinifierOptions: {
				collapseWhitespace: true,
				collapseBooleanAttributes: true,
				conservativeCollapse: true,
				minifyJS: true
			}
		})
	]
}).then(...)

License

MIT

Credits

Thanks for Bogdan Chadkin (@TrySound) for his rollup-plugin-string rollup plugin which I used as the basis for this plugin.

rollup-plugin-html's Issues

Plugin includes UTF8 BOM at the beginning of the template string

Hello,

This issue isn't the end of the world, as the UTF8 spec says a BOM zero width and non line breaking - but it would be nice if it didn't include the file BOM in the exported template string.

Picture of an example, converted to ANSI to show the BOM

VSCode shows it as an unknown character even when in UTF8 mode, which is why I noticed it.

Examples

Hi, could you provide some real examples. As I understand I can do something like

import htmlTemplate from './template.html';

document.body.innerHTML = htmlTemplate;

Can you use some kind of variables in template? If it returns an ES6 template string, then you could be able to call htmlTemplate(data);

Lost slash in self-closing tag

When using a self-closing tag in the included template, the slash is lost in the output, For example:

template.html:

<div>
    <router-view />
</div>

control.js:

import template from './template.html';

Result:

var template = "<div>\r\n    <router-view>\r\n</div>";

Update dependencies (in particular pluginutils)

Is anyone home? Can we get a update of dependencies?

How to use CSS Modeules together?

<!-- home.html -->
<div class="${homeStyl.title}">  <!-- <= Note! -->
  Home
</div>

// home.css
.title {
  color: red;
}

// home.js
import homeStyl from './home.css';
import homeTpl from './home.html';

document.querySelector('#home').innerHTML = ??

// home.js
import homeStyl from './home.css';

document.querySelector('#home').innerHTML = `
  <div class="${homeStyl.title}">
    Home
  </div>
`;

Expects a closing tag for <img>, which is not required in HTML

Trying to import a file that contains the following results in an error:

<img src="foo.png"> <!-- Valid HTML -->

[!] (plugin at position 5) SyntaxError: Expected corresponding JSX closing tag for <img> (68:20)
src\foo.html (68:20)
SyntaxError: Expected corresponding JSX closing tag for <img> (68:20)

HTML does not require closing tags on many elements, including img, input, etc.
So, this shouldn't be requiring this.