rollup-plugin-ejs

.ejs(embedded javascript) templates loader plugin for rollup.js

Supports loading of any files with proper ejs content.

Breaking changes in v4

• node-sass and html-minifier moved to peerDependencies
• loadStyles option renamed to inlineStyles

Installation

npm install rollup-plugin-ejs --save

NOTE: This plugin depends on node-sass module for supporting inlineStyles option and html-minifier module for supporting render.minifierOptions (see peerDependencies in package.json). So if you are going to use those options, don't forget to install relevant dependencies. Otherwise you can ignore npm installation warning about missing peer dependencies for this module.

NOTE: If you are bundling code with rollup in es format, keep in mind that since this plugin dynamically imports peer dependencies, your node version should support import() feature (node 13.2.0+).

Usage

Construction

import tpl from './tpl.ejs';

By default will return you function the execution result of ejs.compile function. This function should be executed with data to return parsed html string. By default data goes to the 'locals' variable of the template (see following usage example). You can change ejs compiler options when setting up the ejs rollup plugin.

If you'll pass render option with data to the plugin, it will return you compiled html.

rollup.config.js

import { rollup } from 'rollup';
import ejs from 'rollup-plugin-ejs';

rollup({
  entry: 'main.js',
  plugins: [
    ejs({
      include: ['**/*.ejs', '**/*.html'], // optional, '**/*.ejs' by default
      exclude: ['**/index.html'], // optional, undefined by default
      compilerOptions: {client: true}, // optional, any options supported by ejs compiler
      render: { //optional, if passed, html string will be returned instead of template render function
        data: {...}, //required, data to be rendered to html
        minifierOptions: {...} //optional, [html-minifier](https://github.com/kangax/html-minifier) options, won't minify by default, if not passed
      },
    }),
  ],
});

someModule.js

import tpl from './tpl.ejs';

const domNode = document.createElement('div');

domNode.innerHTML = tpl({text: 'Hello World'});

document.body.appendChild(domNode);

tpl.ejs

<p><%= locals.text %></p>

Advanced options

inlineStyles: Boolean

Inlines content of files connected by <link rel="stylesheet> tags to <style>...</style> tags in a template.

It might be useful first of all for those are using webcomponents.js. By the webcomponents spec v1 you can use <link rel="stylesheet" href="..."> tags in your shadow dom to load styles. But unfortunately not all browsers support this. ShadyCSS doesn't help here, because it works only for <style>...</style> tags in your shadow dom. So for ShadyCSS to process your styles loaded by link tags you have to replace <link> tags with <style> tags containing css rules from linked css file. To achieve this on loading a template ejs/html file you can use inlineStyles option:

NOTE Starting from v2 you can also use link to .scss files instead of .css directly! .scss will be compiled on the fly and appended to the <style> as regular css! So you don't need to compile sass separately anymore.

rollup.config.js

import { rollup } from 'rollup';
import ejs from 'rollup-plugin-ejs';

rollup({
  entry: 'main.js',
    plugins: [
      ejs({
        include: ['**/*.ejs', '**/*.html'],
        inlineStyles: true, // false by default
      }),
    ],
});

tpl.ejs

<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./style1.scss">
<h1>My custom component</h1>
<slot></slot>

style.css

:host {
  background: red;
  display: block;
}

style1.scss

$color-link: #000000;

a {
  cursor: auto;
  color: $color-link;
}

The resulted compiled template string will look like this:

<style>
  :host {
    background: red;
    display: block;
  }
</style>
<style>
  a {
    cursor: auto;
    color: #000000;
  }
</style>

<h1>My custom component</h1>
<slot></slot>

Now ShadyCSS is able to process the html content in a right way.

It will (should at least ;) work for multiple <link> tags even if you mix .css and .scss files. And also it works even for <template> tags containing <link> tags.

Enjoy. And fill free to pull request.