Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/trofima/rollup-plugin-ejs

ejs loader plugin for rollup.js
https://github.com/trofima/rollup-plugin-ejs

Last synced: about 1 month ago
JSON representation

ejs loader plugin for rollup.js

Awesome Lists containing this project

README 

        
# 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

```javascript

import tpl from './tpl.ejs';

```

By default will return you function the execution result of [ejs.compile](https://github.com/mde/ejs#usage) 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](https://github.com/mde/ejs#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

```javascript

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

```javascript

import tpl from './tpl.ejs';



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



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



document.body.appendChild(domNode);

```



tpl.ejs

```html

<%= locals.text %>


```



## Advanced options



### inlineStyles: Boolean



Inlines content of files connected by ```` tags in your shadow dom to load styles. 

But unfortunately not all browsers support this.

[ShadyCSS](https://github.com/webcomponents/polyfills/tree/master/packages/shadycss) doesn't help here, because it works only for `...` tags in your shadow dom.

So for ShadyCSS to process your styles loaded by link tags you have to replace `````` tags with `````` tags containing css rules from linked css file.

To achieve this on loading a template ejs/html file you can use `inlineStyles` option:



>**NOTE**<br>

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

```javascript

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

```html

<link rel="stylesheet" href="./style.css">

<link rel="stylesheet" href="./style1.scss">

<h1>My custom component</h1>

<slot></slot>

```



style.css

```css

:host {

  background: red;

  display: block;

}

```



style1.scss

```scss

$color-link: #000000;



a {

  cursor: auto;

  color: $color-link;

}

```



The resulted compiled template string will look like this:



```html

<style>

  :host {

    background: red;

    display: block;

  }



  a {

    cursor: auto;

    color: #000000;

  }



My custom component



```



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



It will (should at least ;) work for multiple `````` tags even if you mix ```.css``` and ```.scss``` files. 

And also it works even for `````` tags containing `````` tags.



Enjoy. And fill free to pull request.