Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emgyrz/ar-templater
Templates translater and compiler (for AddReality)
https://github.com/emgyrz/ar-templater
Last synced: 8 days ago
JSON representation
Templates translater and compiler (for AddReality)
- Host: GitHub
- URL: https://github.com/emgyrz/ar-templater
- Owner: emgyrz
- Created: 2018-01-09T09:47:58.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-12T11:08:07.000Z (almost 7 years ago)
- Last Synced: 2024-12-27T08:36:25.316Z (15 days ago)
- Language: JavaScript
- Homepage:
- Size: 46.9 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AR-templater
[](https://nodei.co/npm/ar-templater/)
AR-templater internationalize your HTML files and compile its to tempate functions if it's needed
## Installation
As usual via `npm`
## Usage
If you use the config file it must be a CommonJS module
### Node API
```js
const templater = require( 'ar-templater' )
const arg = './path/to/config/file'
// or
const arg = { langDir: './langs', ... } // configuration object
// to compile all templates
templater.build( arg[, callback ] )
```
or
```js
const templater = require( 'ar-templater' )
const arg = './path/to/config/file'
// or
const arg = { langDir: './langs', ... } // configuration object
// to create watcher for incrementals build. at start it will execute `build` function
const watcher = templater.createWatcher( arg )
watcher.on( 'start', function() {
console.log( 'start event triggered' )
} )
watcher.on( 'stop', function() {
console.log( 'stop event triggered' )
} )
watcher.on( 'file:change', function( { filePath } ) {
console.log( 'file changed - ', filePath )
} )
watcher.on( 'file:remove', function( { filePath } ) {
console.log( 'file removed - ', filePath )
} )
watcher.start()
// watcher also has a `stop` method
// watcher.stop()
```
### CLI
```bash
./node_modules/.bin/ar-templater [COMMAND] [ARGS]
```
...or if you install it globally:
```bash
ar-templater [COMMAND] [ARGS]
```
For more information see `ar-templater help`
## Configuration options reference
**NOTE** that options `langDir`, `templatesSrc` and `dest` are **required**
| Option | Type | Description | Default |
|----------------|------|---------|---------|
| **langDir** | `string` | Specifies the path to find the language definitions | `undefined` |
| **templatesSrc** | `string` | Pattern for matching to file paths like Unix shell style. See [node-glob](https://github.com/isaacs/node-glob) | `undefined` |
| **dest** | `string` | The path (output directory) to write files to. If the directory doesn't exist it will be created | `undefined` |
| templatesInterpolate | `regexp` | The regular expression used for matching the variables. See more at [lodash docs](https://lodash.com/docs#template) | `/<%=([\s\S]+?)%>/g` |
| translatesInterpolate | `regexp` | The regular expression used for matching the language tags | `/\$\{\{([\s\S]+?)\}\}\$/g` |
| minify | `boolean` | Minify HTML code and JS template functions | `false` |
| compareCtime | `boolean` | | `false` |
| htmlminifyOptions | `{ [ string ]: any }` | html-minifier options. See more [here](https://github.com/kangax/html-minifier#options-quick-reference) | `{}` |
| langFallback | `string` | If some translations of the phrases don't exist it will be used translations from this language | `'en'` |
| customLangFallbacks | `{ [ string ]: string }` | Custom languages fallbacks, for example if this option was setted to `{ be: 'ru' }`, words that is not finded in `be` language will be taken from `ru` | `{}` |
| varNameModificator | `( filePath: string ) => string` | Modifies the property name of file content in generated result | `filePath => filePath` |
| output | `object` | Option to specify output files format and name | `{}` |
| output.type | `string` | The format of the generated files. One of the following `[ 'amd', 'commonjs', 'esm' ]` | `'amd'` |
| output.name | `( langCode: string ) => string` | Function that modifies file name to write to. By default it returns just a language code. The extension (.js) is added automatically | `langCode => langCode` |
| langsFilter | `object` | Filters languages to compile. Helpful for development| `{}` |
| langsFilter.excludes | `Array` | Excludes languages. this parameter has a higher priority than `includes` | `[]` |
| langsFilter.includes | `Array` | Includes languages | `[]` | |
## Reasons for creating
Due to some circumstances in our project we used `gulp` and a few plugins to it (let their names remain a secret) to build the templates. With the increase of the code base the compilation of only the templates became slower and slower. And breaking dependencies made more and more discontent while I upgraded packages. In the end I had to write something else. The problem with the dependencies naturally was resolved. And the acceleration of the compilation speed has been a pleasant surprise. Naked stats:
In the project:
- 167 template files
- ~5500 lines of code in this files
- 17 languages
The compilation speed before:
- on init - ~37 seconds
- incremental - ~1.2 seconds
The compilation speed during using this package:
- on init - ~0.7sec ( ~4 sec with `minify` option)
- incremental - 0.2 seconds
## Example
##### languge definitions
```js
// ./langs/en/main.js
module.exports = {
nameDescription: 'This is the item name',
hello: 'Hello!'
}
// ./langs/de/main.js
module.exports = {
nameDescription: 'Dies ist der name',
hello: 'Hallo!'
}
// ./langs/ru/main.js
module.exports = {
nameDescription: 'Это имя элемента',
hello: 'Привет!'
}
```
##### input
```xml
<%= name %>
<%= price %>
${{ main.hello }}$
```
##### config
```js
module.exports = {
langDir: './langs',
templatesSrc: './tpls/**/*.html'
dest: './dest',
minify: false,
output: {
type: 'esm',
name: langCode => `my-template-${langCode}`
}
}
```
##### output(without minification)
```js
// ./dest/my-template-en.js
export default {
"tpls/tpl.html": function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='
((__t=( name ))==null?'':__t)+
' '+
((__t=( price ))==null?'':__t)+
'
}
return __p;
},
"tpls/plain.html": '
Hello!
'}
// ./dest/my-template-de.js
export default {
"tpls/tpl.html": function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='
((__t=( name ))==null?'':__t)+
' '+
((__t=( price ))==null?'':__t)+
'
}
return __p;
},
"tpls/plain.html": '
Hallo!
'}
// ./dest/my-template-ru.js
export default {
"tpls/tpl.html": function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='
((__t=( name ))==null?'':__t)+
' '+
((__t=( price ))==null?'':__t)+
'
}
return __p;
},
"tpls/plain.html": '
Привет!
'}
```
## Demo
```
npm run test
npm run test:watcher
```
Demo is located at `./demo` directory