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

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

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

./node_modules/.bin/ar-templater [COMMAND] [ARGS]

...or if you install it globally:

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 | 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 | /<%=([\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 | {} | | 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<string> | Excludes languages. this parameter has a higher priority than includes | [] | | langsFilter.includes | Array<string> | 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

// ./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

<!-- ./tpls/tpl.html -->
<li>
  <span title="${{ main.nameDescription }}$"><%= name %></span>
  <span><%= price %></span>
</li>

<!-- ./tpls/plain.html -->
<h1>${{ main.hello }}$</h1>

config

module.exports = {
  langDir: './langs',
  templatesSrc: './tpls/**/*.html'
  dest: './dest',
  minify: false,
  output: {
    type: 'esm',
    name: langCode => `my-template-${langCode}`
  }

}

output(without minification)

// ./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+='<li>   <span title=\"This is the item name\">'+
    ((__t=( name ))==null?'':__t)+
    '</span>   <span>'+
    ((__t=( price ))==null?'':__t)+
    '</span> </li>';
    }
    return __p;
  },

  "tpls/plain.html": '<h1>Hello!</h1>'
}


// ./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+='<li>   <span title=\"Dies ist der name\">'+
    ((__t=( name ))==null?'':__t)+
    '</span>   <span>'+
    ((__t=( price ))==null?'':__t)+
    '</span> </li>';
    }
    return __p;
  },

  "tpls/plain.html": '<h1>Hallo!</h1>'
}



// ./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+='<li>   <span title=\"Это имя элемента\">'+
    ((__t=( name ))==null?'':__t)+
    '</span>   <span>'+
    ((__t=( price ))==null?'':__t)+
    '</span> </li>';
    }
    return __p;
  },

  "tpls/plain.html": '<h1>Привет!</h1>'
}

Demo

npm run test
npm run test:watcher

Demo is located at ./demo directory