Build client-side javascript templates
I write a lot in JavaScript, and if you, when working with templates, like me, got tired of escaping the end of lines, keeping track of template names and collecting them before each build, this solution is for you, jsttojs is a utility for precompiling client templates in JavaScript.
The first thought was to "google", after a brief search, it became clear that there was nothing suitable. There are handlebars.js , but the amount of code that it generates leaves much to be desired, the gain seems questionable. Of course there is a wonderful Google Closure Tools , but this is a complete solution tied to the infrastructure of Closure Tools, which is not suitable for us. It was decided to write its own utility, JavaScript was chosen as the language for consistency.
The essence is very simple, you have a folder with templates, templates have a hierarchy with infinite nesting, the script searches for all your templates, makes minification and places into a global object, where the template key is the path to a specific template.
This tool is not tied to any specific template engine, you can use your favorite solution, for example, mustache, underscore.js, or your own best framework.
')
Since the script is launched from the console, if you wish, you can integrate into any project build system, and if you use grunt then you can use the grunt-jsttojs plugin .
Installation is performed using the standard npm package manager:
The following options are available:
The “delicious” option in my opinion is the --watch option, you can simply run the script and forget about it, with any changes inside the templates, adding or deleting files, the entire assembly will occur automatically without breaking your usual working rhythm.
You can easily write a wrapper for convenient work with templates, for example with hogan.js it will look something like this:
And use
Templates:
Execute the command:
And we get the templates ready to use:
As a result, templates began to write as easily and pleasantly as we do for server applications. Hopefully this will add some good rays to your project. Thoughts, suggestions and pool requests are welcome.
Code available on github
You can also look away
If you need an "honest" compilation on the server, then look towards the handlebars, but remember that the size of your templates will increase significantly (more details in the comments ). But first of all jsttojs is intended for template engines that do not have built-in server recompilation, although it does not exclude use with them.
The first thought was to "google", after a brief search, it became clear that there was nothing suitable. There are handlebars.js , but the amount of code that it generates leaves much to be desired, the gain seems questionable. Of course there is a wonderful Google Closure Tools , but this is a complete solution tied to the infrastructure of Closure Tools, which is not suitable for us. It was decided to write its own utility, JavaScript was chosen as the language for consistency.
The essence is very simple, you have a folder with templates, templates have a hierarchy with infinite nesting, the script searches for all your templates, makes minification and places into a global object, where the template key is the path to a specific template.
Application area
This tool is not tied to any specific template engine, you can use your favorite solution, for example, mustache, underscore.js, or your own best framework.
')
Since the script is launched from the console, if you wish, you can integrate into any project build system, and if you use grunt then you can use the grunt-jsttojs plugin .
Using
Installation is performed using the standard npm package manager:
$ npm install -g jsttojs The following options are available:
-h, --help -V, --version -e, --ext <n> , jst -n, --name <n> , JSTmpl -w, --watch -r, --removebreak , -a, --amd AMD requirejs $ jsttojs templates compiled/templates/index.js --ext mustache --watch The “delicious” option in my opinion is the --watch option, you can simply run the script and forget about it, with any changes inside the templates, adding or deleting files, the entire assembly will occur automatically without breaking your usual working rhythm.
You can easily write a wrapper for convenient work with templates, for example with hogan.js it will look something like this:
var Template = { render: function(name, data) { var template = Hogan.compile(MyGlobalVariable[name]); return template.render(data); }, compile: function(name) { return Hogan.compile(MyGlobalVariable[name]); } } And use
var html = Template.render('video/index', { username: 'World' }); Examples
Templates:
// tamplates/index.jst Hello world {{ username }} second line // tamplates/video/index.jst Hello {{ username }} on index video page Execute the command:
$ jsttojs templates compiled/templates/index.js --name MyGlobalVariable And we get the templates ready to use:
// compiled/templates/index.js window.MyGlobalVariable = { "index" : "Hello world {{ username }}\nsecond line", "video/index" : "Hello {{ username }} on index video page" } Conclusion
As a result, templates began to write as easily and pleasantly as we do for server applications. Hopefully this will add some good rays to your project. Thoughts, suggestions and pool requests are welcome.
Code available on github
Links
You can also look away
Upd
If you need an "honest" compilation on the server, then look towards the handlebars, but remember that the size of your templates will increase significantly (more details in the comments ). But first of all jsttojs is intended for template engines that do not have built-in server recompilation, although it does not exclude use with them.
Source: https://habr.com/ru/post/157341/
All Articles