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
https://cdn.jsdelivr.net/npm/jsmart/dist/jsmart.min.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/jsmart.min.js
- 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
- 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
- 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>- 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"
});https://github.com/umakantp/jsmart/wiki
-
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
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent