rollup-plugin-posthtml-template

    1.3.0 • Public • Published

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

    Install

    npm i rollup-plugin-posthtml-template

    DownloadsWeekly Downloads

    2

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    169 kB

    Total Files

    31

    Last publish

    Collaborators

    • shyam-chen