Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add nocache option to buildInFunction's extends #16

Closed
wants to merge 6 commits into from
Closed

Add nocache option to buildInFunction's extends #16

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
44e1a7a
Add nocache option to buildInFunction's extends
Avcajaraville Apr 13, 2016
09b8fb8
Modify module & update README.md:
Avcajaraville May 10, 2016
9d63e2d
Change function fetch, now the data object is send as a new object:
Avcajaraville May 15, 2016
21d592c
Merge branch 'develop'
Avcajaraville May 24, 2016
2c38d17
Fix small typo on README.md
Avcajaraville May 24, 2016
c8315e1
feat(modifiers): add in_array modifier
Avcajaraville Aug 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 30 additions & 157 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,172 +1,45 @@
jSmart
======
# avcajaraville/jsmart

jSmart is a port of the Smarty Template Engine to Javascript, a JavaScript template library that supports the template [syntax](https://github.com/umakantp/jsmart/wiki/syntax) and all the features (functioens, variable modifiers, etc.) of the well-known PHP template engine [Smarty](http://www.smarty.net/).
## Notice

jSmart is written entirely in JavaScript, does not have any DOM/DHTML/browser or third-party JavaScript library dependencies and can be run in a web browser as well as a standalone JavaScript interpreter or [CommonJS](http://www.commonjs.org/) environments like [node.js](http://nodejs.org/).
This is a fork from [umakantp/jsmart](https://github.com/umakantp/jsmart), which is also a fork from [miroshnikov/jsmart](https://github.com/miroshnikov/jsmart).

jSmart supports plugin architecture, you can [extend it with custom plugins](https://github.com/umakantp/jsmart/wiki/Create-Plugin): functions, blocks and variable modifiers, [templates inclusion](https://github.com/umakantp/jsmart/wiki/Include-Templates), [templates inheritance](https://github.com/umakantp/jsmart/wiki/Template-Inheritance) and overriding, [caching](https://github.com/umakantp/jsmart/wiki/Caching), [escape HTML](https://github.com/umakantp/jsmart/wiki/escape_html).
I originally forked from [umakantp/jsmart](https://github.com/umakantp/jsmart) and added the following modifications:

jSmart has some limited support of the [PHP Smarty syntax](https://github.com/umakantp/jsmart/wiki/syntax) and allows you to [use the same Smarty templates on both server and client side](https://github.com/umakantp/jsmart/wiki/Smarty-template-in-javascript), for both PHP and Javascript.
- Force **nocache** option for **extends** blocks. This was causing templates being only properly compiled once. If you need cache (and you probably would), you will have to address this outside the jSmart class.
- Add UMD, CommonJS & web/browser support. Based on [this pull request](https://github.com/umakantp/jsmart/pull/14).
- Remove **String.prototype.fetch** function (since this is a very bad practice), and instead, modifying the export of the module. Now it exports the constructor and the fetch function.
- The module now exports the following object: `{ jSmart: jSmart, fetch: fetch }`. This is, `jSmart` constructor and `fecth` function

### How to use jSmart in Node.js

1. Install jSmart from NPM Registry
**Caution**: when using fetch function, you want to proper set it context (ie: call or apply to the rescue). I didn’t want to re-write this function and keep as it was originally written.

$ npm install jsmart
## How to use it

Im gonna just highlight the main differences with [umakantp/jsmart](https://github.com/umakantp/jsmart).

2. Create template, use [PHP Smarty syntax](https://github.com/umakantp/jsmart/wiki/syntax). Say demo.tpl
For a more detailed explanation and documentation, please refer to [it main repository](https://github.com/umakantp/jsmart) or the [wiki](https://github.com/umakantp/jsmart/wiki)

Hello {$name}
```javascript

var import_jSmart = require( 'jsmart' );
// import the constructor:
var jSmart = import_jSmart.jSmart;
// and the fetch function:
var fetch = import_jSmart.fetch;

3. Now lets read the template and compile it. _jSmart_ object compiles the template.
// Following the example on the original repo (refer to it for more details):
var fs = require( 'fs' );
var tpl = fs.readFileSync( './demo.tpl', { encoding: 'utf-8' } );
var compiledTpl = new jSmart( tpl );
// We need to set the context of the fetch function, for example, through Function.prototype.call function
var output = fetch.call( compiledTpl, { name: 'World' } );
console.log( output );

var fs = require('fs');
require('jsmart');
var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
var compiledTpl = new jSmart(tpl);
```

4. Assign data to the template passing Javascript object to the _fetch_ function. Variable _compiledTpl_ has the compiled template. You can call _fetch_ function as many times with different data.

var fs = require(fs);
require('jsmart');
var tpl = fs.readFileSync('./demo.tpl', {encoding: 'utf-8'});
var compiledTpl = new jSmart(tpl);
var output = compiledTpl.fetch({name: 'World'});
console.log(output);

5. Execute the file.

$ node demo.js

6. Result would be.

Hello World


### How to use jSmart in browser

1. Include jSmart library Javascript file in your header.

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

2. Create template, use [PHP Smarty syntax](https://github.com/umakantp/jsmart/wiki/syntax). Put the template's text in _&lt;script&gt;_ 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">

<h1>{$greeting}</h1>

{foreach $books as $i => $book}
<div style="background-color: {cycle values="cyan,yellow"};">
[{$i+1}] {$book.title|upper} by {$book.author}
{if $book.price}
Price: <span style="color:red">${$book.price}</span>
{/if}
</div>
{foreachelse}
No books
{/foreach}

Total: {$book@total}

</script>

3. Create JavaScript data object with variables to assign to the template

<script>
var data = {
greeting: 'Hi, there are some JScript books you may find interesting:',
books : [
{
title : 'JavaScript: The Definitive Guide',
author : 'David Flanagan',
price : '31.18'
},
{
title : 'Murach JavaScript and DOM Scripting',
author : 'Ray Harris',
},
{
title : 'Head First JavaScript',
author : 'Michael Morrison',
price : '29.54'
}
]
};
</script>

4. 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 tplText = document.getElementById('test_tpl').innerHTML;

var tpl = new jSmart( tplText );

var res = tpl.fetch( data );

/*
or fetch straigth from JavaScript string
var res = document.getElementById('test_tpl').innerHTML.fetch(data);
*/

document.write( res );

</script>

5. The result would be

<h1>Hi, there are some JScript books you may find interesting:</h1>

<div style="background-color: cyan;">
[1] JAVASCRIPT: THE DEFINITIVE GUIDE by David Flanagan
<span style="color:red">$31.18</span>
</div>

<div style="background-color: yellow;">
[2] MURACH JAVASCRIPT AND DOM SCRIPTING by Ray Harris
</div>

<div style="background-color: cyan;">
[3] HEAD FIRST JAVASCRIPT by Michael Morrison
<span style="color:red">$29.54</span>
</div>

Total: 3

6. The template's text is compiled in the _jSmart_ constructor, so it's fast to call _fetch()_ with different assigned variables many times.

var tpl = new jSmart( '{$greeting}, {$name}!' );

tpl.fetch( {greeting:'Hello', name:'John'} ); //returns: Hello, John!

tpl.fetch( {greeting:'Hi', name:'Jane'} ); //returns: Hi, Jane!


### DOCUMENTATION

[https://github.com/umakantp/jsmart/wiki](https://github.com/umakantp/jsmart/wiki)

### TESTS

* Install [Node.js](http://nodejs.org/) and [PHP](http://www.php.net) in a folder.
e.g. Install them in directories _/home/user/jsmart/node_ and _/home/user/jsmart/php_ respectively.

* Clone jSmart repo in the same folder.
e.g. Clone at _/home/user/jsmart_. So jsmart repo is in _/home/user/jsmart/jsmart_ folder.

* Go to jSmart and run _make test_.
e.g. Go to _/home/user/jsmart/jsmart_ and run _make test_.

* You can modify _makefile_ and _test/js/test-common.js_ for changing path of node and php respectively as per your needs but never commit those changes in master repository.

### NOTICE

This project was originally hosted at [Google code](http://code.google.com/p/jsmart/) and was started by [miroshnikov](https://github.com/miroshnikov).
Since author was not active on project. I have forked and planned on pushing further improvements and features.
## Thanks to

- [miroshnikov](https://github.com/miroshnikov) for his [original jSmart](https://github.com/miroshnikov/jsmart).
- [umakantp](https://github.com/umakantp) for his [jSmart fork](https://github.com/umakantp/jsmart).
- [duzun](https://github.com/duzun) for adding UMD support on his [pull request](https://github.com/umakantp/jsmart/pull/14).
Loading