Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Vanilla-IceCream/rollup-plugin-posthtml-template
Seamless integration between Rollup and PostHTML, and rendering template properties.
https://github.com/Vanilla-IceCream/rollup-plugin-posthtml-template
posthtml rollup template
Last synced: 25 days ago
JSON representation
Seamless integration between Rollup and PostHTML, and rendering template properties.
- Host: GitHub
- URL: https://github.com/Vanilla-IceCream/rollup-plugin-posthtml-template
- Owner: Vanilla-IceCream
- Created: 2017-03-13T09:10:20.000Z (almost 8 years ago)
- Default Branch: main
- Last Pushed: 2022-02-16T11:48:08.000Z (almost 3 years ago)
- Last Synced: 2024-03-15T06:46:34.351Z (9 months ago)
- Topics: posthtml, rollup, template
- Language: JavaScript
- Homepage:
- Size: 90.8 KB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - posthtml-template - Seamless integration with PostHTML (Plugins / Templating)
README
# rollup-plugin-posthtml-template [](https://travis-ci.org/Vanilla-IceCream/rollup-plugin-posthtml-template) [](https://coveralls.io/github/Vanilla-IceCream/rollup-plugin-posthtml-template?branch=master)
Seamless integration between Rollup and PostHTML.
## Install
```bash
$ npm i rollup-plugin-posthtml-template -D
# or
$ yarn add rollup-plugin-posthtml-template -D
```
## Usage
```js
// rollup.config.js
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml()
]
};
```
```html
Hello
World
```
```js
// main.js
import hello from './hello.html';
document.querySelector('#ex').innerHTML = hello;
/*
Output:
Hello
World
*/
```
### plugins
```js
// rollup.config.js
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
import include from 'posthtml-include';
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
plugins: [include()]
})
]
};
```
```html
World
```
```html
Hello
```
```js
// main.js
import hello from './hello.html';
document.querySelector('#ex').innerHTML = hello;
/*
Output:
Hello
World
*/
```
### template
```js
// rollup.config.js
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
template: true
})
]
};
```
```html
Hello
${ _.text }
```
```js
// main.js
import hello from './hello.html';
document.querySelector('#ex').innerHTML = hello({ text: 'World' });
/*
Output:
Hello
World
*/
```
### parser
```js
// rollup.config.js
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
import sugarml from 'posthtml-sugarml';
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
parser: sugarml()
})
]
};
```
```sgr
// hello.sgr
p Hello
p
| World
```
```js
// main.js
import hello from './hello.sgr';
document.querySelector('#ex').innerHTML = hello;
/*
Output:
Hello
World
*/
```
### directives
```js
// rollup.config.js
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
directives: [{ name: '%', start: '<', end: '>' }]
})
]
};
```
```html
Hello
<%= text %>
```
```js
// main.js
import { template } from 'lodash';
import hello from './hello.html';
document.querySelector('#ex').innerHTML = template(hello)({ text: 'World' });
/*
Output:
Hello
World
*/
```