rollup-plugin-posthtml-template

Seamless integration between Rollup and PostHTML.

Install

$ npm i rollup-plugin-posthtml-template -D
# or
$ yarn add rollup-plugin-posthtml-template -D

Usage

// 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()
  ]
};

<!-- hello.html -->
<p>Hello</p>
<p>World</p>

// main.js
import hello from './hello.html';

document.querySelector('#ex').innerHTML = hello;
/*
  Output:
    <p>Hello</p>
    <p>World</p>
*/

plugins

// 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()]
    })
  ]
};

<!-- world.html -->
<p>World</p>

<!-- hello.html -->
<p>Hello</p>
<include src="world.html"></include>

// main.js
import hello from './hello.html';

document.querySelector('#ex').innerHTML = hello;
/*
  Output:
    <p>Hello</p>
    <p>World</p>
*/

template

// 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
    })
  ]
};

<!-- hello.html -->
<p>Hello</p>
<p>${ _.text }</p>

// main.js
import hello from './hello.html';

document.querySelector('#ex').innerHTML = hello({ text: 'World' });
/*
  Output:
    <p>Hello</p>
    <p>World</p>
*/

parser

// 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()
    })
  ]
};

// hello.sgr
p Hello
p
  | World

// main.js
import hello from './hello.sgr';

document.querySelector('#ex').innerHTML = hello;
/*
  Output:
    <p>Hello</p>
    <p>World</p>
*/

directives

// 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: '>' }]
    })
  ]
};

<!-- hello.html -->
<p>Hello</p>
<p><%= text %></p>

// main.js
import { template } from 'lodash';

import hello from './hello.html';

document.querySelector('#ex').innerHTML = template(hello)({ text: 'World' });
/*
  Output:
    <p>Hello</p>
    <p>World</p>
*/