npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pejs

v0.6.5

Published

Pre-compiled EJS with inheritance, block and file support that works both in the client and on the server

Downloads

264

Readme

PEJS

PEJS is pre-compiled EJS with a inheritance, blocks and file support that works both in the client and on the server. It's available through npm:

npm install pejs

Usage

PEJS is easy to use:

var pejs = require('pejs');
var views = pejs(); // pass in {compress:true} to get compressed output

views.render('./example.ejs', function(err, result) {
	// renders example.ejs into a string
	console.log(result);
});
views.parse('./example.ejs', function(err, src) {
	// parses the template and compiles it down to portable js
	// this means it works in the client!
	console.log(src);
});

PEJS has an internal cache of parsed templates which means that when you render a template twice it will only parse it once.

It also makes sure to clear this cache if the template has changed in anyway on the disk

Options

The pejs() init function supports the following options:

  • compress: Compress the template output. Default: false
  • basedir: Base directory for template resolution. Default: cwd
  • watch: Watch templates for changes. Default: true

Path resolution

PEJS uses a similar file/module resolution as node.js.

  • views.render('./file'): pejs will look for file.pejs, file.ejs, file.html, file/index.pejs, file/index.ejs or file/index.html.
  • views.render('template'): pejs will look for for template in in the nearest views folder using the same scheme as above.

This is almost exactly the same as node does with it's node_modules resolution.

Classic EJS

PEJS templates has your usual EJS syntax with <% and %>. Read more about EJS here

  • inline code: <% var a = 42; %>
  • insert: <%- data %>
  • insert and html escape: <%= data %>

Blocks

PEJS expands the original EJS syntax by letting you declare blocks using the <%{ syntax. A block is basically a partial template that optionally can be loaded from a file.

  • declare block: <%{{ blockName }}%>
  • declare file block: <%{ './filename.html' }%>
  • override block: <%{ blockName %>hello block<%} %>

In general all block can be loaded from a file instead of being defined inline by providing a filename:

  • declare block: <%{{ myBlock './example.ejs' }}%>
  • override block: <%{ myOverrideBlock 'example.ejs' }%>

If you want include a block using a different set of locals than in you current scope you pass these as the last argument to the block.

  • declare block: <%{{ myBlock {newLocalsArg:oldLocalsArg} }}%>
  • override block: <%{ './example.ejs', newLocalsHere }%>

All filepaths above are subject to the same path resolution as decribed in the previous section.

Inheritance

Using blocks it's easy to implement template inheritance. Just declare a base.html with some anchored blocks:

<body>
	Hello i am base
	<%{{ content }}%>
</body>

Then a child.html that renders base.html

<%{ './base.html' }%>
<%{ content %>
	i am inserted in base
<%} %>

To render the example just render child.html

pejs.render('./child.html', function(err, result) {
	console.log(result);
});

The above outputs:

<body>
	Hello i am base
	i am inserted in base
</body>

License

MIT