rollup-plugin-htmlparts
v1.2.2
Published
Converts HTML files into modules
Downloads
11
Maintainers
Readme
rollup-plugin-htmlparts
This helps you import HTML snippets into JavaScript variables using modules.
Suppose you want this in your index.js
:
var heading = '<h1>This is the <em>heading</em></h1>'
var body = '<p>This is the <strong>body</strong>.</p>'
... but prefer to use HTML files to save HTML (for syntax-highlighting, etc.),
then create a HTML file like this (called, for example, template.html
):
<!-- var heading -->
<h1>This is the <em>heading</em></h1>
<!-- end -->
<!-- var body -->
<p>This is the <strong>body</strong>.</p>
<!-- end -->
Set up your rollup.config.js
like this:
import htmlparts from 'rollup-plugin-htmlparts'
export default [
{
input: 'index.js',
output: { file: "index.min.js", name: "package", format: "umd" },
plugins: [htmlparts('template.html')]
}
]
Now, in the index.js
mentioned above, you can import variables from
template.html
.
import { heading, body } from './template.html'
Run node_modules/.bin/rollup -c
to create the index.min.js
, which
will have the imported variables.
HTML structure
Anything enclosed within <!-- var <name> --> ... <!-- end -->
is treated as
a HTML string and assigned to the variable <name>
.
The string is minified by HTML Minifier with these options:
collapseBooleanAttributes: true
collapseInlineTagWhitespace: true
collapseWhitespace: true
decodeEntities: true
removeComments: true
Installation
npm install rollup-plugin-htmlparts
Changelog
- 1.0.0: 9 Mar 2019 - Initial release
- 1.1.1: 9 Mar 2019 - Switch to ES6 modules
- 1.1.2: 10 Mar 2019 - Works on ES6 modules and CJS
- 1.2.0: 19 Mar 2019 - Ignores whitespace in
<!-- var -->
and<!-- end -->
- 1.2.1: 4 Jan 2022 - Upgrade packages for security vulnerabilities
- 1.2.2: 23 Nov 2022 - Upgrade packages for security vulnerabilities
Release
# Update package.json version
# Update Changelog in README.md
npm test
git commit . -m"DOC: Release version x.x.x"
git push
# Ensure that there are no CI build errors
git tag -a vx.x.x -m"Add a one-line summary"
git push --follow-tags
npm publish # maintainer: sanand0