Skip to content

Seamless integration between Rollup and PostHTML, and rendering template properties.

Notifications You must be signed in to change notification settings

Vanilla-IceCream/rollup-plugin-posthtml-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

41 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

rollup-plugin-posthtml-template Build Status Coverage Status

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>
*/

About

Seamless integration between Rollup and PostHTML, and rendering template properties.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published