• Stars
    star
    514
  • Rank 82,727 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 3 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A light, crispy, and delicious template engine 🍤
tempura
A light, crispy, and delicious template engine 🍤

Features

  • Extremely lightweight
    Everything is 1.26 kB (gzip) – even less with tree-shaking!

  • Super Performant
    Significantly faster than the big names; and the small ones.

  • Familiar Syntax
    Tempura templates look great with Handlebars syntax highlighting.

  • Custom Directives
    Easily define custom blocks, via the API, to extend functionality.

Install

$ npm install --save tempura

Usage

Visit the /examples and Syntax Cheatsheet for more info!

example.hbs

{{! expected props to receive }}
{{#expect title, items }}

{{! inline variables }}
{{#var count = items.length }}
{{#var suffix = count === 1 ? 'task' : 'tasks' }}

{{#if count == 0}}
  <p>You're done! 🎉</p>
{{#else}}
  <p>You have {{{ count }}} {{{ suffix }}} remaining!</p>

  {{#if count == 1}}
    <small>Almost there!</small>
  {{#elif count > 10}}
    <small>... you must be <em>fried</em> 😔</small>
  {{#else}}
    <small>You've got this 💪🏼</small>
  {{/if}}

  <ul>
    {{#each items as todo}}
      <li>{{ todo.text }}</li>
    {{/each}}
  </ul>
{{/if}}

render.js

import { readFile } from 'fs/promises';
import { transform, compile } from 'tempura';

const template = await readFile('example.hbs', 'utf8');

// Transform the template into a function
// NOTE: Produces a string; ideal for build/bundlers
// ---

let toESM = transform(template);
console.log(typeof toESM); //=> "string"
console.log(toESM);
//=> `import{esc as $$1}from"tempura";export default function($$3,$$2){...}`

let toCJS = transform(template, { format: 'cjs' });
console.log(typeof toCJS); //=> "string"
console.log(toCJS);
//=> `var $$1=require("tempura").esc;module.exports=function($$3,$$2){...}`


// Convert the template into a live function
// NOTE: Produces a `Function`; ideal for runtime/servers
// ---

let render = compile(template);
console.log(typeof render); //=> "function"
render({
  title: 'Reminders',
  items: [
    { id: 1, text: 'Feed the doggo' },
    { id: 2, text: 'Buy groceries' },
    { id: 3, text: 'Exercise, ok' },
  ]
});
//=> "<p>You have 3 tasks remaining!</p>\n"
//=> + "<small>You've got this 💪🏼</small>\n\n"
//=> + "<ul>\n"
//=> + "  <li>Feed the doggo</li>\n"
//=> + "  <li>Buy groceries</li>\n"
//=> + "  <li>Exercise, ok</li>\n"
//=> + "</ul>"

Syntax

Please refer to the Syntax Cheatsheet.

API

Visit the API and Custom Blocks for documentation.

Benchmarks

Running via Node v14.15.13

Please visit the /bench directory for complete, reproducible benchmarks.

The following is a subset of the full results, presented without context. Again, please visit /bench for explanations, comparisons, and/or differences.

Benchmark: Render w/ raw values (no escape)
  pug                x 34,847 ops/sec ±2.79% (93 runs sampled)
  handlebars         x  6,700 ops/sec ±1.41% (92 runs sampled)
  ejs                x    802 ops/sec ±0.54% (94 runs sampled)
  dot                x 40,704 ops/sec ±3.08% (93 runs sampled)
  art-template       x 39,839 ops/sec ±0.86% (90 runs sampled)
  tempura            x 44,656 ops/sec ±0.42% (92 runs sampled)

Benchmark: Render w/ escaped values
  pug                x 2,800 ops/sec ±0.31% (95 runs sampled)
  handlebars         x   733 ops/sec ±0.34% (94 runs sampled)
  ejs                x   376 ops/sec ±0.17% (91 runs sampled)
  dot                x   707 ops/sec ±0.15% (96 runs sampled)
  art-template       x 2,707 ops/sec ±0.12% (96 runs sampled)
  tempura            x 2,922 ops/sec ±0.31% (96 runs sampled)

License

MIT © Luke Edwards

More Repositories

1

clsx

A tiny (239B) utility for constructing `className` strings conditionally.
JavaScript
7,354
star
2

polka

A micro web server so fast, it'll make you dance! 👯
JavaScript
5,266
star
3

pwa

(WIP) Universal PWA Builder
JavaScript
3,123
star
4

uvu

uvu is an extremely fast and lightweight test runner for Node.js and the browser
JavaScript
2,938
star
5

taskr

A fast, concurrency-focused task automation tool.
JavaScript
2,528
star
6

sockette

The cutest little WebSocket wrapper! 🧦
JavaScript
2,398
star
7

worktop

The next generation web framework for Cloudflare Workers
TypeScript
1,635
star
8

kleur

The fastest Node.js library for formatting terminal text with ANSI colors~!
JavaScript
1,593
star
9

klona

A tiny (240B to 501B) and fast utility to "deep clone" Objects, Arrays, Dates, RegExps, and more!
JavaScript
1,537
star
10

dequal

A tiny (304B to 489B) utility to check for deep equality
JavaScript
1,271
star
11

tsm

TypeScript Module Loader
TypeScript
1,164
star
12

tinydate

A tiny (349B) reusable date formatter. Extremely fast!
JavaScript
1,060
star
13

sirv

An optimized middleware & CLI application for serving static files~!
JavaScript
1,023
star
14

sade

Smooth (CLI) Operator 🎶
JavaScript
1,009
star
15

rosetta

A general purpose internationalization library in 292 bytes
JavaScript
766
star
16

navaid

A navigation aid (aka, router) for the browser in 850 bytes~!
JavaScript
755
star
17

dset

A tiny (194B) utility for safely writing deep Object values~!
JavaScript
739
star
18

uid

A tiny (130B to 205B) and fast utility to generate random IDs of fixed length
JavaScript
634
star
19

httpie

A Node.js HTTP client as easy as pie! 🥧
JavaScript
575
star
20

ganalytics

A tiny (312B) client-side module for tracking with Google Analytics
JavaScript
575
star
21

trouter

🐟 A fast, small-but-mighty, familiar fish...errr, router*
JavaScript
563
star
22

regexparam

A tiny (394B) utility that converts route patterns into RegExp. Limited alternative to `path-to-regexp` 🙇‍♂️
JavaScript
555
star
23

dimport

Run ES Module syntax (`import`, `import()`, and `export`) in any browser – even IE!
JavaScript
547
star
24

mri

Quickly scan for CLI flags and arguments
JavaScript
533
star
25

calendarize

A tiny (202B) utility to generate calendar views.
JavaScript
471
star
26

formee

A tiny (532B) library for handling <form> elements.
JavaScript
443
star
27

qss

A tiny (294b) browser utility for encoding & decoding a querystring.
JavaScript
408
star
28

preact-starter

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact
JavaScript
387
star
29

uuid

A tiny (~230B)and fast UUID (V4) generator for Node and the browser
JavaScript
386
star
30

vegemite

A Pub/Sub state manager you'll love... or hate
JavaScript
373
star
31

resolve.exports

A tiny (952b), correct, general-purpose, and configurable `"exports"` and `"imports"` resolver without file-system reliance
TypeScript
351
star
32

polkadot

The tiny HTTP server that gets out of your way! ・
JavaScript
322
star
33

matchit

Quickly parse & match URLs
JavaScript
321
star
34

fetch-event-stream

A tiny (736b) utility for Server Sent Event (SSE) streaming via `fetch` and Web Streams API
TypeScript
321
star
35

flru

A tiny (215B) and fast Least Recently Used (LRU) cache
JavaScript
310
star
36

mrmime

A tiny (2.8kB) and fast utility for getting a MIME type from an extension or filename
TypeScript
300
star
37

watchlist

Recursively watch a list of directories & run a command on any file system changes
JavaScript
261
star
38

arr

A collection of tiny, highly performant Array.prototype alternatives
JavaScript
255
star
39

ley

(WIP) Driver-agnostic database migrations
JavaScript
254
star
40

flattie

A tiny (203B) and fast utility to flatten an object with customizable glue
JavaScript
254
star
41

webpack-messages

Beautifully format Webpack messages throughout your bundle lifecycle(s)!
JavaScript
246
star
42

obj-str

A tiny (96B) library for serializing Object values to Strings.
JavaScript
225
star
43

templite

Lightweight templating in 150 bytes
JavaScript
221
star
44

ms

A tiny (414B) and fast utility to convert milliseconds to and from strings.
JavaScript
200
star
45

nestie

A tiny (215B) and fast utility to expand a flattened object
JavaScript
199
star
46

throttles

A tiny (139B to 204B) utility to regulate the execution rate of your functions
JavaScript
195
star
47

hexoid

A tiny (190B) and extremely fast utility to generate random IDs of fixed length
JavaScript
185
star
48

fromnow

A tiny (339B) utility for human-readable time differences between now and past or future dates.
JavaScript
178
star
49

astray

Walk an AST without being led astray
JavaScript
177
star
50

tmp-cache

A least-recently-used cache in 35 lines of code~!
JavaScript
174
star
51

bundt

A simple bundler for your delicious modules
JavaScript
167
star
52

wrr

A tiny (148B) weighted round robin utility
JavaScript
164
star
53

freshie

(WIP) A fresh take on building universal applications with support for pluggable frontends and backends.
TypeScript
153
star
54

svelte-ssr-worker

A quick demo for rendering Svelte server-side (SSR), but within a Cloudflare Worker!
JavaScript
152
star
55

totalist

A tiny (195B to 224B) utility to recursively list all (total) files in a directory
JavaScript
148
star
56

typescript-module

Template repository for authoring npm modules via TypeScript
TypeScript
141
star
57

sublet

Reactive leases for data subscriptions
JavaScript
139
star
58

escalade

A tiny (183B to 210B) and fast utility to ascend parent directories
JavaScript
138
star
59

webpack-route-manifest

Generate an asset manifest file, keyed by route patterns!
JavaScript
127
star
60

url-shim

A 1.5kB browser polyfill for the Node.js `URL` and `URLSearchParams` classes.
JavaScript
123
star
61

semiver

A tiny (153B) utility to compare semver strings.
JavaScript
119
star
62

cfw

(WIP) A build and deploy utility for Cloudflare Workers.
TypeScript
113
star
63

svelte-demo

Multi-page demo built Svelte 3.x and Rollup with code-splitting
Svelte
113
star
64

webpack-format-messages

Beautiful formatting for Webpack messages; ported from Create React App!
JavaScript
111
star
65

gittar

🎸 Download and/or Extract git repositories (GitHub, GitLab, BitBucket). Cross-platform and Offline-first!
JavaScript
111
star
66

saturated

A tiny (203B) utility to enqueue items for batch processing and/or satisfying rate limits.
JavaScript
110
star
67

webpack-critical

Extracts & inlines Critical CSS with Wepack
JavaScript
109
star
68

pages-fullstack

Demo SvelteKit application running on Cloudflare Pages
Svelte
102
star
69

sort-isostring

A tiny (110B) and fast utility to sort ISO 8601 Date strings
JavaScript
98
star
70

colors-app

🎨 A PWA for copying values from popular color palettes. Supports HEX, RGB, and HSL formats.
JavaScript
95
star
71

salteen

A snappy and lightweight (259B) utility to encrypt and decrypt values with salt.
JavaScript
95
star
72

is-offline

A tiny (174B) library to detect `offline` status & respond to changes in the browser.
JavaScript
91
star
73

seolint

(WIP) A robust and configurable SEO linter
TypeScript
86
star
74

rafps

A tiny (178B) helper for playing, pausing, and setting `requestAnimationFrame` frame rates
JavaScript
82
star
75

preact-cli-ssr

A quick demo for adding SSR to a Preact CLI app
JavaScript
79
star
76

webpack-modules

Handle `.mjs` files correctly within webpack
JavaScript
71
star
77

csprng

A tiny (~90B) isomorphic wrapper for `crypto.randomBytes` in Node.js and browsers.
JavaScript
66
star
78

classico

A tiny (255B) shim when Element.classList cannot be used~!
JavaScript
62
star
79

premove

A tiny (201B to 247B) utility to remove items recursively
JavaScript
62
star
80

mk-dirs

A tiny (381B to 419B) utility to make a directory and its parents, recursively
JavaScript
54
star
81

primeval

A tiny (128B) utility to check if a value is a prime number
JavaScript
51
star
82

loadr

Quickly attach multiple ESM Loaders and/or Require Hooks together but without the repetitive `--experimental-loader` and/or `--require` Node flags
JavaScript
49
star
83

preact-progress

Simple and lightweight (~590 bytes gzip) progress bar component for Preact
JavaScript
49
star
84

route-manifest

A tiny (412B) runtime to retrieve the correct entry from a Route Manifest file.
JavaScript
46
star
85

svelte-preprocess-esbuild

A Svelte Preprocessor to compile TypeScript via esbuild!
TypeScript
44
star
86

preact-scroll-header

A (800b gzip) header that will show/hide while scrolling for Preact
JavaScript
41
star
87

inferno-starter

Webpack2 boilerplate for building SPA / PWA / offline front-end apps with Inferno.js
JavaScript
41
star
88

rollup-route-manifest

A Rollup plugin to generate an asset manifest, keyed by route patterns ("route manifest")
JavaScript
40
star
89

onloaded

A tiny (350B) library to detect when images have loaded.
JavaScript
38
star
90

webpack-plugin-replace

Replace content while bundling.
JavaScript
36
star
91

route-sort

A tiny (200B) utility to sort route patterns by specificity
JavaScript
35
star
92

scorta

A tiny (330B to 357B) and fast utility to find a package's hidden supply / cache directory.
JavaScript
33
star
93

local-hostname

A tiny (171B) utility to check if a hostname is local
JavaScript
32
star
94

taskr-outdated

A generator & coroutine-based task runner. Fasten your seatbelt. 🚀
JavaScript
32
star
95

rewrite-imports

Rewrite `import` statements as `require()`s; via RegExp
JavaScript
31
star
96

preact-offline

A (300b gzip) component to render alerts/messages when offline.
JavaScript
29
star
97

fly-kit-preact

A starter kit for building offline / SPA / PWA apps with Preact
JavaScript
28
star
98

fannypack

The tool belt for front-end developers
JavaScript
28
star
99

is-ready

A tiny (309B) library to detect when `window` globals are defined and ready to use~!
JavaScript
28
star
100

ava-http

Async HTTP request wrapper 🚀
JavaScript
25
star