jsmart

v4.0.0

Published

2 years ago

jSmart is javascript templating engine based on PHP Smarty Template Engine.

Downloads

2,378

0High
0Medium
0Low

umakant

jsmart smarty javascript template templates engine

jSmart - Smarty template engine in JavaScript

jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template syntax and all the features (functions, variable modifiers, etc.) of the well-known PHP template engine Smarty.

jSmart is written entirely in JavaScript, does not have any DOM/browser or third-party JavaScript library dependencies and can be run in a web browser as well as a standalone JavaScript interpreter or CommonJS environments like node.js.

jSmart supports plugin architecture, you can extend it with custom plugins: functions, blocks and variable modifiers, templates inclusion, templates inheritance and overriding, caching, escape HTML.

jSmart has some limited support of the PHP Smarty syntax and allows you to use the same Smarty templates on both server and client side, for both PHP and Javascript.

Play with JsFiddle demo page

Using jSmart with CDN

Always latest version (don't use in production)

https://cdn.jsdelivr.net/npm/jsmart/dist/jsmart.min.js

Current latest version (4.0.0)

https://cdn.jsdelivr.net/npm/[email protected]/dist/jsmart.min.js

jSmart with other tools

Webpack:- https://www.npmjs.com/package/jsmart-loader
Grunt:- https://www.npmjs.com/package/grunt-jsmart
Express Js :- https://www.npmjs.com/package/jsmart-express

How to use jSmart in Node.js

Install jSmart from NPM Registry

$ npm install jsmart --save

Create template, use PHP Smarty syntax. Say demo.tpl

Hello {$name}

Now lets read the template and compile it. jSmart object compiles the template. You can call fetch function as many times with different data you would want to assign to template.

var fs = require('fs'),
  jSmart = require('jsmart'),
  tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'}),
  compiledTemplate = new jSmart(tpl),
  output = compiledTemplate.fetch({name: 'World'});
  // output will be "Hello world"

console.log(output);

Execute the file.

$ node demo.js

How to use jSmart in browser

Include jSmart library Javascript file in your header.

<html>
  <head>
    <script language="javascript" src="jsmart.js"></script>
  </head>

Create template, use PHP Smarty syntax. Put the template's text in <script> with the type="text/x-jsmart-tmpl" so a browser will not try to parse it and mess it up.

  <script id="test_tpl" type="text/x-jsmart-tmpl">
    Hello {$name}
  </script>

Create new object of jSmart class, passing the template's text as it's constructor's argument than call fetch(data), where data is an JavaScript object with variables to assign to the template

<script>
  var content = document.getElementById('test_tpl').innerHTML;
  var compiled = new jSmart(content);
  var output = compiled.fetch({name: 'world'});
  // output will be "Hello world"
</script>

How to use jSmart using Require.js

If you have configured and installed Require.js it easy to load jSmart and use it. Load jSmart.js file in the browser/environment and it already makes use require js to define module, you got to just include it.

define(['jSmart'], function (jSmart) {
  var tplText = 'Hello {$name}';
  var compiled = new jSmart(tplText);
  var output = compiled.fetch({name: 'world'});
  // output is "Hello world"
});

You can also make use Require.js text plugin to load templates.

define(['jSmart', 'text!some/good/template.tpl'], function (jSmart, goodTpl) {
  var compiled = new jSmart(goodTpl);
  var output = compiled.fetch({name: 'world'});
  // output is "Hello world"
});

DOCUMENTATION

https://github.com/umakantp/jsmart/wiki

CONTRIBUTIONS & TESTS

Pull request Best is open a issue first. Then send a pull request referencing the issue number. Before sending pull request make sure you add test case for the fix. Make sure all test cases are passing and eslint tests pass.
Test cases:- grunt karma
ES Lint tests:- grunt eslint
Run lint, run test, build, compress, distribution package and update examples in one command:- grunt

LICENSE

MIT

NOTICE

Project originally was created by miroshnikov. Since author was not active on project very frequently. I have forked and planned on pushing further improvements and features on my own fork.