All Projects → benchpressjs → Benchpressjs

benchpressjs / Benchpressjs

Licence: mit
ultralight javascript templating framework

Programming Languages

javascript
184084 projects - #8 most used programming language
rust
11053 projects

Labels

Projects that are alternatives of or similar to Benchpressjs

Cms.js Themes
Themes and Templates for CMS.js
Stars: ✭ 29 (-64.63%)
Mutual labels:  templates
Android Templates And Utilities
Collection of source codes, utilities, templates and snippets for Android development.
Stars: ✭ 1,099 (+1240.24%)
Mutual labels:  templates
Quack
In-Cluster templating for Kubernetes manifests
Stars: ✭ 69 (-15.85%)
Mutual labels:  templates
Interplate
Templates and type-safe string formatting based on Swift 5 string interpolation
Stars: ✭ 31 (-62.2%)
Mutual labels:  templates
Liquid.net
.Net Port of the Liquid template language
Stars: ✭ 47 (-42.68%)
Mutual labels:  templates
Templates Using Bootstrap4
🌆 Here I've aggregated some of the most commonly used web-page templates made using Bootstrap4 🛒
Stars: ✭ 60 (-26.83%)
Mutual labels:  templates
Builder Template Categories
Organize your Page Builder Templates in the WordPress Admin. Time saver, especially for bigger projects. Get a better and faster overview, don't get lost. Filter templates with your categories. With extended plugin & theme support.
Stars: ✭ 20 (-75.61%)
Mutual labels:  templates
Plates
Native PHP template system
Stars: ✭ 1,195 (+1357.32%)
Mutual labels:  templates
Wedding Website
Our Wedding Website 👫
Stars: ✭ 1,090 (+1229.27%)
Mutual labels:  templates
Awesome Readme
A guide to writing an Awesome README. Read the full article in Towards Data Science.
Stars: ✭ 65 (-20.73%)
Mutual labels:  templates
Jinja
A very fast and expressive template engine.
Stars: ✭ 8,170 (+9863.41%)
Mutual labels:  templates
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+1115.85%)
Mutual labels:  templates
Kube Gen
Generate files from Kubernetes events
Stars: ✭ 59 (-28.05%)
Mutual labels:  templates
Freemo
A free resume,portfolio and CV HTML template
Stars: ✭ 30 (-63.41%)
Mutual labels:  templates
Tufte Latex
A Tufte-inspired LaTeX class for producing handouts, papers, and books
Stars: ✭ 1,161 (+1315.85%)
Mutual labels:  templates
Ng Typeview
Enables type-checking of angular1 views
Stars: ✭ 20 (-75.61%)
Mutual labels:  templates
Generate Template Files
A simple generator to create custom template files for any application
Stars: ✭ 60 (-26.83%)
Mutual labels:  templates
Handlebars.java
Logic-less and semantic Mustache templates with Java
Stars: ✭ 1,204 (+1368.29%)
Mutual labels:  templates
Staradmin Free Bootstrap Admin Template
A Free Responsive Admin Dashboard Template Built With Bootstrap 4. Elegant UI Theme for Your Web App!
Stars: ✭ 1,191 (+1352.44%)
Mutual labels:  templates
Gena
Generic pseudo-templated containers for C. Written entirely in C89 with design inspired by the C++ STL. /// DOCS ARE SLIGHTLY OUTDATED, PROJECT IS STABLE AND STILL IN ACTIVE DEVELOPMENT
Stars: ✭ 61 (-25.61%)
Mutual labels:  templates

benchpress

CI Status Coverage Status Code Climate

Benchpress is an ultralight (1.3kb minified + gzipped) and super fast templating framework for Javascript and node.js.

It has express support out-of-the-box, and requires zero client-side dependencies.

Installation

Benchpress is available as an npm module:

npm i benchpressjs

API

The following is a quick rundown of the API. See the full docs

Benchpress uses an ahead of time (AOT) compilation model. It requires that you precompile templates into Javascript modules before using them.

.precompile(source, { filename }): Promise<string>

This method compiles a template source into Javascript code.

const fs = require('fs').promises;
const benchpress = require('benchpressjs');

const template = await fs.readFile('path/to/source/templates/favorite.tpl', 'utf8');
const compiled = benchpress.precompile(template, { filename: 'favorite.tpl' });
await fs.writeFile('path/to/compiled/templates/favorite.jst', compiled);

path/to/source/templates/favorite.tpl

My favourite forum software is {forum}. This templating engine is written in {language}.

path/to/compiled/templates/favorite.jst

(function (factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory();
  } else if (typeof define === 'function' && define.amd) {
    define(factory);
  }
})(function () {
  function compiled(helpers, context, get, iter, helper) {
    return 'My favourite forum software is ' + get(context && context['forum']) + '. This templating engine is written in ' + get(context && context['language']) + '.';
  }

  return compiled;
});

.__express

This method provides an express engine API.

const express = require('express');
const app = express();
const benchpress = require('benchpressjs');

const data = {
  foo: 'bar',
};

app.configure(function() {
  app.engine('jst', benchpress.__express);
  app.set('view engine', 'jst');
  app.set('views', 'path/to/compiled/templates');
});

app.render('myview', data, function(err, html) {
  console.log(html);
});

app.get('/myroute', function(req, res, next) {
  res.render('myview', data);
});

.render(template, data): Promise<string> (alias: .parse(template, data, callback(string)))

This method is used mainly to parse templates on the client-side. To use it, .registerLoader(loader) must be used to set the callback for fetching compiled template modules.

require(['benchpress'], (benchpress) => {
  benchpress.registerLoader((name, callback) => {
    // fetch `name` template module
  });

  benchpress.render('basic', {
    forum: 'NodeBB',
    language: 'Javascript',
  }).then((output) => {
    // do something with output
  });
});

Template Syntax

Sample data, see test cases for more:

{
  "animals": [
    {
      "name": "Cat",
      "species": "Felis silvestris catus",
      "isHuman": false,
    },
    {
      "name": "Dog",
      "species": "Canis lupus familiaris",
      "isHuman": false,
    },
    {
      "name": "Human",
      "species": "Homo sapiens",
      "isHuman": true
    }
  ],
  "package": {
    "name": "benchpressjs",
    "author": "psychobunny",
    "url": "http://www.github.com/benchpressjs/benchpress"
  },
  "website": "http://burnaftercompiling.com",
  "sayHello": true
}

Simple key/value

My blog URL is {website}. The URL for this library is {{package.url}}

Conditionals

{{{ if sayHello }}}
  Hello world!
{{{ end }}}

{{{ if !somethingFalse }}}
  somethingFalse doesn't exist
{{{ end }}}

Benchpress supports several syntaxes for conditionals in order to be backwards compatible with templates.js. <!-- ENDIF abcd -->, <!-- END abcd -->, <!-- ENDIF !foobar -->, and <!-- END --> are all equivalent tokens as far as Benchpress is concerned.

Iteration

Repeat blocks of HTML. The two special keys @first and @last are available as booleans, and the @index, @key, and @value special keys are also available. Benchpress supports iterating over objects, in which case @index will be the current loop number and @key will be the key of the current item. For normal arrays, @key == @index.

{{{ each animals }}}
  {animals.name} is from the species {animals.species}.
  {{{ if !animals.isHuman }}}
    - This could be a pet.
  {{{ end }}}
{{{ end }}}

prints out:

Cat is from the species Felis silvestris catus.
- This could be a pet.
Dog is from the Canis lupus familiaris.
- This could be a pet.
Human is from the species Homo sapiens.

Benchpress supports several syntaxes for iteration in order to be backwards compatible with templates.js:

  • <!-- END abcd --> == <!-- END foo --> == <!-- END -->
  • <!-- BEGIN abc --> {abc.def} <!-- END --> == <!-- BEGIN abc --> {../def} <!-- END --> which will print the def key of every item in abc.

There is a grey zone where if you wish to print a field of the object you are iterating over, you can't directly. This is a breaking change from templates.js. To fix this, change {abc.def} to {../../abc.def}.

Helpers

Helpers are JavaScript methods for advanced logic in templates. This example shows a really simple example of a function called print_is_human which will render text depending on the current block's data.

benchpress.registerHelper('print_is_human', function (data) {
  return (data.isHuman) ? "Is human" : "Isn't human";
});
{{{ each animals }}}
{print_is_human(@value)}
{{{ end }}}

prints out:

Isn't human
Isn't human
Is human

Testing

npm install
npm test

Projects using Benchpress

NodeBB

Add yours here by submitting a PR :)

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].