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

template-literal

v1.0.4

Published

fastest, smallest and simplest template engine, using JS's literal template feature

Downloads

1,277

Readme

template-literal

fastest, smallest and simplest template engine, using JS's literal template feature

Install

If you use Express, you can find here a simple wrapper to use it as Express templating engine : https://github.com/Drulac/express-tl/

npm install template-literal

Usage

Usage is simple, the syntaxe is template literals

Expressions are enclosed by ${ and }. The value returned by the expression contained inside brackets is insered in the page code. d is the name of the object used to access data variable.

require('template-literal') returns the template compiler function.

Code sample

example template

<!doctype html>
<html>
<head>
	<title>index template</title>
</head>
<body>
	<meal>
		${d.eat.reduce((str,food)=>str+'<eat>'+food+'</eat>', '')}
	</meal>

	<sport>
		${d.sport ? 'you are in a good way' : 'change it now'}
	</sport>

	<dessert>
	</dessert>
</body>
</html>

example use

const fs = require('fs');
let code = fs.readFileSync('./template.html', 'utf8');

const compile = require('template-literal');

let runTemplate = compile(code);

console.log(runTemplate({
	eat: ['apple', 'orange', 'carot'],
	sport: true
}));

Benchmark

this benchmark (and this documentation) is mostly inspired by Zup's official benchmark

  • module's versions:
    • benchmark : v2.1.4
    • template-literal : v0.0.1
    • dot : v1.1.2
    • edge.js : v1.1.0
    • ejs : v2.5.7
    • zup : v0.0.1
  • node v7.10.1

template-literal doesn't have options, unlike the others template engine. It's a parts of the high speed reason.

Template code

<html>
<head>
	<title>My First Article</title>
</head>
<body>
	<h1>${d.heading.length > 16 ? d.heading.slice(0,16) + '...' : d.heading}</h1>
	${d.alert ? '<h3>'+d.alert+'</h3>' : ''}
	<pre>${d.content}</pre>
</body>
</html>

template for other engines can be found in the bench directory

Results

Simplifed

Using console.time with 1e5 runs (lower is better)

| | Compilation | Render | | ------------- | ---: | ---: | | literal | 622.954ms | 33.071ms | | zup | 2'555.846ms | 184.788ms | | doT | 6'624.527ms | 620.174ms | | ejs | 15'055.106ms | 1'660.634ms | | edge | 25'413.106ms | 28'073.437ms |

Using the benchmark nodejs lib (higher is better)

| | Compilation | Render | | ------------- | ---: | ---: | | literal | 163'222 ops/sec | 3'156'867 ops/sec | | zup | 38'914 ops/sec | 562'130 ops/sec | | doT | 14'515 ops/sec | 157'347 ops/sec | | ejs | 6'216 ops/sec | 57'079 ops/sec | | edge | 4'285 ops/sec | 3'476 ops/sec |

Original results
--------- console.time Compile ---------
literal compile: 622.954ms
zup compile: 2555.846ms
ejs compile: 15055.106ms
doT compile: 6624.527ms
edge compile: 25413.106ms
--------- console.time Render ---------
literal render: 33.071ms
zup render: 184.788ms
ejs render: 1660.634ms
doT render: 620.174ms
edge render: 28073.437ms
--------- Benchmark Compile ---------
Literal compile x 163,222 ops/sec ±0.86% (79 runs sampled)
Zup compile x 38,914 ops/sec ±1.89% (78 runs sampled)
Ejs compile x 6,216 ops/sec ±3.10% (77 runs sampled)
Dot compile x 14,515 ops/sec ±0.71% (80 runs sampled)
Edge compile x 4,285 ops/sec ±1.60% (80 runs sampled)
Fastest is Literal compile
--------- Benchmark Render ---------
Literal render x 3,156,867 ops/sec ±0.43% (81 runs sampled)
Zup render x 562,130 ops/sec ±1.64% (80 runs sampled)
Ejs render x 57,079 ops/sec ±1.79% (78 runs sampled)
Dot render x 157,347 ops/sec ±0.82% (80 runs sampled)
Edge render x 3,476 ops/sec ±2.40% (79 runs sampled)
Fastest is Literal render

Run by yourself

you can run the benchmark on your own computer easily : go to the bench directory, run :

  • npm i
  • node benchmark.js and wait :grin:

Donate

You can make me a donation to support my work :