New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket

@teskon/vite-plugin-ejs-engine

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@teskon/vite-plugin-ejs-engine

Vite plugin for supporting ejs templates

latest
Source
npmnpm
Version
1.2.0
Version published
Maintainers
1
Created
Source

@teskon/vite-plugin-ejs-engine

npm Downloads

Thiis is a fork of vite-plugin-ejs-engine

Vite plugin for Ejs.

Supports:

Install

Yarn

yarn add @teskon/vite-plugin-ejs-engine -D

or npm

npm i @teskon/vite-plugin-ejs-engine --save-dev

Usage

Configuration

Use plugin in your Vite config (vite.config.ts)

import ejs from '@teskon/vite-plugin-ejs-engine'

export default {
    plugins: [
        ejs(),
    ]
}

If you're not using typescript you can enable the plugin by calling the method ejs.default in the vite.config.js file, as such:

import ejs from '@teskon/vite-plugin-ejs-engine'

export default {
    plugins: [
        ejs.default(),
    ],
};

Options

This fork enables injection of variables by passing the variables into the ejs method, for example:

import ejs from '@teskon/vite-plugin-ejs-engine'

export default {
    plugins: [
        ejs.default({
          inject: {
            title: 'Hello world',
          },
        }),
    ],
};

You will then be able to use that variable in your template files as such:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Below you can see all available options that you can apply to this plugin.

propertydefaultdescription
inject-Data injected into HTML.
ejsOptions-ejs options, @See

Example

Input (src/index.html):

 <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <h1>Hello world</h1>

      <!-- variable declaration -->
      <% var users = [{name: 'Jose'}, {name: 'Pedro'}]; %>

      <!-- variable and partial usage -->
      <ul>
        <% users.forEach(function(user){ %>
          <%- include('user/show', {user: user}); %>
        <% }); %>
      </ul>
    </body>
  </html>

Template (src/user/show.ejs):

<li><%= user.name %></li>

Output (dist/index.html)

 <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Document</title>
    </head>
    <body>
      <h1>Hello world</h1>
      <ul>
         <li>Jose</li>
         <li>Pedro</li>
      </ul>
    </body>
  </html>

Keywords

Vite

FAQs

Package last updated on 05 Nov 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts