All Projects → abelljs → abell-renderer

abelljs / abell-renderer

Licence: MIT license
A template engine that lets you write variables, loops, and conditions in HTML using JavaScript Syntax.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to abell-renderer

Quicktemplate
Fast, powerful, yet easy to use template engine for Go. Optimized for speed, zero memory allocations in hot paths. Up to 20x faster than html/template
Stars: ✭ 2,287 (+5345.24%)
Mutual labels:  template-engine
Ructe
Rust Compiled Templates with static-file handling
Stars: ✭ 206 (+390.48%)
Mutual labels:  template-engine
Eta
Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript
Stars: ✭ 233 (+454.76%)
Mutual labels:  template-engine
Microconfig
Modern tool for microservice configuration management
Stars: ✭ 180 (+328.57%)
Mutual labels:  template-engine
Yarte
Yarte stands for Yet Another Rust Template Engine
Stars: ✭ 189 (+350%)
Mutual labels:  template-engine
Flexml
🚀基于Litho的Android高性能动态业务容器。
Stars: ✭ 225 (+435.71%)
Mutual labels:  template-engine
Craftsman
Craftsman is the workhorse behind the Wrapt framework and provides a suite of CLI commands for quickly scaffolding out new files and projects for your .NET Web APIs with simple CLI commands and configuration files.
Stars: ✭ 165 (+292.86%)
Mutual labels:  template-engine
Jade
Jade.go - pug template engine for Go (golang)
Stars: ✭ 251 (+497.62%)
Mutual labels:  template-engine
React Ssr
React SSR as a view template engine
Stars: ✭ 200 (+376.19%)
Mutual labels:  template-engine
Himl
HTML-based Indented Markup Language for Ruby
Stars: ✭ 236 (+461.9%)
Mutual labels:  template-engine
Gotemplatebenchmark
comparing the performance of different template engines
Stars: ✭ 180 (+328.57%)
Mutual labels:  template-engine
Elefant
Elefant, the refreshingly simple PHP CMS and web framework.
Stars: ✭ 188 (+347.62%)
Mutual labels:  template-engine
Jte
jte is a secure and lightweight template engine for Java.
Stars: ✭ 228 (+442.86%)
Mutual labels:  template-engine
Express Es6 Template Engine
Rendering engine for Express that uses ES6 javascript string templates as syntax.
Stars: ✭ 175 (+316.67%)
Mutual labels:  template-engine
Sodajs
Light weight but powerful template engine for JavaScript
Stars: ✭ 240 (+471.43%)
Mutual labels:  template-engine
Diamond
Diamond is a full-stack web-framework written in The D Programming Language using vibe.d
Stars: ✭ 173 (+311.9%)
Mutual labels:  template-engine
Fatfree
A powerful yet easy-to-use PHP micro-framework designed to help you build dynamic and robust Web applications - fast!
Stars: ✭ 2,504 (+5861.9%)
Mutual labels:  template-engine
sempare-delphi-template-engine
Sempare Template Engine for Delphi allows for flexible dynamic text generation. It can be used for generating email, html, source code, xml, configuration, etc.
Stars: ✭ 79 (+88.1%)
Mutual labels:  template-engine
Sailfish
Simple, small, and extremely fast template engine for Rust
Stars: ✭ 242 (+476.19%)
Mutual labels:  template-engine
Pupa
Simple micro templating
Stars: ✭ 231 (+450%)
Mutual labels:  template-engine

Abell renderer cover

NOT READY FOR PRODUCTION USE

GitHub package.json version    Twitter profile badge of @abellland



This repository is being moved to monorepo abelljs/abell. You can new release there [email protected].

A template parser that lets you use JavaScript syntax to render loops, conditions, do maths, and require JSONs from HTML. Low level library used in abelljs/abell

🚀 Installation & Usage

Executing directly with npx

npx abell-renderer build --input src/index.abell --output dist/index.html

or

npm install -g abell-renderer
abell-renderer build --input src/index.abell --output dist/index.html

Check out Abell Template Guide for how to write .abell files.

📘 Abell Template Guide

.abell files are nothing but .html files which can contain JavaScript inside double curly brackets {{ and }}.

Note that abell-renderer renders abell files in NodeJS context which means you cannot access DOM inside brackets.

Simplest example of .abell file can look like:

{{ const siteTitle = "Abell Demo" }}
<html>
  <head>
    <title>{{ siteTitle }}</title>
  </head>
  <body>
    {{
      const a = 3;
      const b = 5;
    }}
    <h1>{{ siteTitle.toUpperCase() }}</h1>
    <div>Addition of {{ a }} and {{ b }} is {{ a + b }}</div>
  </body>
</html>

All the JavaScript inside curly brakets will be rendered on virtual instance on NodeJS and you will get the output as completely renderer .html file:

<html>
  <head>
    <title>Abell Demo</title>
  </head>
  <body>
    <h1>ABELL DEMO</h1>
    <div>Addition of 3 and 5 is 8</div>
  </body>
</html>

Loops in Abell

You can use JavaScript Array methods to loop over array. Other JavaScript Array methods like .filter, .map, .reduce can be used as well.

{{
  const users = [
    {name: 'Saurabh', age: 20},
    {name: 'John Doe', age: 78}
  ]
}}

<main>
  {{
    users.map(user => `
      <div>
        <h2>${user.name}</h2>
        <span>Age: ${user.age}</span>
      </div>
    `).join('')
  }}
</main>

/*
Ouputs:

<main>
  <div>
    <h2>Saurabh</h2>
    <span>Age: 20</span>
  </div>
  <div>
    <h2>John Doe</h2>
    <span>Age: 78</span>
  </div>
</main>

⤵️ Import JS/JSON/NPM Modules

NOTE: Starting v0.1.10 require() can only be used when allowRequire: true is passed from options or --allow-require flag is passed in CLI

With Abell you can import your Native NodeJS Modules, NPM Modules, JS Files (should export data), and JSON Files with require()

{{ const MarkdownIt = require('markdown-it') }}
<!-- NPM Module to convert markdown to HTML (npm install --save markdown-it) -->

{{ const md = new MarkdownIt(); }}
<!DOCTYPE html>
<html>
  <body>
    {{ md.render("[Open Google](https://google.com)") }}
  </body>
</html>

/*
Outputs:

<!DOCTYPE html>
<html>
  <body>
    <p><a href="https://google.com">Open Google</a></p>
  </body>
</html>
*/

Note: fs module or any module that deals with external files cannot be used. The only way to read any external file is require()

💛 JavaScript API

npm install --save-dev abell-renderer
const abellRenderer = require('abell-renderer');

const sandbox = {
  nameObjects: [{ name: 'Nice' }, { name: 'very cool' }],
  globalMeta: {
    siteName: 'Abell Renderer Demo'
  }
};

const template = `
<body>
  <h1>{{ globalMeta.siteName }}</h1>
  <div class="article-container">
    {{
      nameObjects
        .map(content => '<b>' + content.name + '</b>')
        .join('');
    }}
  </div>
</body>
`;

const htmlTemplate = abellRenderer.render(template, sandbox);

console.log(htmlTemplate);

/*
Outputs:
<body>
  <h1>Abell Renderer Demo</h1>
  <div class="article-container">
    <b>Nice</b>
    <b>very cool</b>
  </div>
</body>
*/

🤖 Server-side Rendering with Abell + Express

You can tell express to use Abell as a template engine, check out following example to know how

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

app.engine('abell', require('abell-renderer').engine({ allowRequire: true }));
app.set('views', './views'); // specify the views directory
app.set('view engine', 'abell'); // register the template engine

app.get('/', function (req, res) {
  res.render('index', { foo: 'I am coming from server.js' });
});

app.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});

Then you can have your index.abell file in views/ directory.

Check out saurabhdaware/abell-ssr-express for full example.

📚 Reference

abellRenderer.render(template, sandbox, options)

template: Abell template in String sandbox: Object over which the scripts execute, Can define variables and inject them into script. options.basePath: basePath which is prefixed on require() paths in abellTemplate. options.allowRequire: Passing true allows using require() in templates. Default is false.

🤗 Contributing

Check out CONTRIBUTING.md for Local Setup Guide, and Contribution Guidelines.

🕑 Changelogs

CHANGELOG.md


Buy me a Coffee Button   Buy me a Coffee Button

For status updates you can follow me on Twitter @saurabhcodes

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].