https://github.com/sanand0/rollup-plugin-htmlparts
Loads HTML templates as a module
https://github.com/sanand0/rollup-plugin-htmlparts
library tool
Last synced: 4 months ago
JSON representation
Loads HTML templates as a module
- Host: GitHub
- URL: https://github.com/sanand0/rollup-plugin-htmlparts
- Owner: sanand0
- License: mit
- Created: 2019-03-09T16:44:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-12-25T11:51:50.000Z (over 1 year ago)
- Last Synced: 2026-02-14T03:14:10.736Z (4 months ago)
- Topics: library, tool
- Language: JavaScript
- Size: 46.9 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rollup-plugin-htmlparts
[](https://travis-ci.com/sanand0/rollup-plugin-htmlparts)
This helps you import HTML snippets into JavaScript variables using modules.
Suppose you want this in your `index.js`:
```js
var heading = '
This is the heading
'
var body = 'This is the body.
'
```
... 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`):
```html
This is the heading
This is the body.
```
Set up your `rollup.config.js` like this:
```js
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`.
```js
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 ` ... ` is treated as
a HTML string and assigned to the variable ``.
The string is minified by [HTML Minifier](http://npmjs.com/package/html-minifier)
with these options:
- `collapseBooleanAttributes: true`
- `collapseInlineTagWhitespace: true`
- `collapseWhitespace: true`
- `decodeEntities: true`
- `removeComments: true`
## Installation
```sh
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 `` and ``
- 1.2.1: 4 Jan 2022 - Upgrade packages for security vulnerabilities
- 1.2.2: 23 Nov 2022 - Upgrade packages for security vulnerabilities
- 1.2.3: 25 Dec 2024 - Upgrade links
## Release
```sh
# 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
```