gem-hunter
Language: JavaScript
Seamless integration between Rollup and PostHTML, and rendering template properties.
Seamless integration between Rollup and PostHTML.
$ npm i rollup-plugin-posthtml-template -D
# or
$ yarn add rollup-plugin-posthtml-template -D// 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> */
// 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> */
// 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> */
// 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> */
// 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> */