@comsultia/gulp-l10n-js

gulp-l10n-js

gulp-l10n-js is a gulp plugin for parse l10n XML file and export to js file.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev @comsultia/gulp-l10n-js

USAGE

gulp-l10n-js provides simple exporting methods:

const gulp = require('gulp'),
      l10n = require('gulp-l10n-js '),
      minify = require('gulp-minify');

// example 1 (param is string)
gulp.task('l10n', function () {
  return gulp.src('./mock.L10n')
  .pipe(l10n('l10n.js'))
  .pipe(minify())
  .pipe(gulp.dest('./dist'))
});

// example 2 (param is object)
gulp.task('l10n', function () {
  return gulp.src('./mock.L10n')
  .pipe(l10n({
    name: 'l10n.js',
    variable: 'l10n'
  }))
  .pipe(minify())
  .pipe(gulp.dest('./dist'))
});

// l10n source files
const sourceFiles = [
  './mock.L10n',
  './mock2.L10n'
];

// example 3 (source is array of files)
gulp.task('l10n', function () {
  return gulp.src(sourceFiles)
  .pipe(l10n({
    name: 'l10n.js',
    variable: 'l10n'
  }))
  .pipe(minify())
  .pipe(gulp.dest('./dist'))
});

// --------------------
// watch l10n
// --------------------
gulp.task('watch', function() {
  gulp.watch(sourceFiles, ['l10n']);
});

• use gulp-minify for smaller build

example available in gulpfile.js

Notes

• gulp.src() means path to XML l10n file or array of files to be exported
• gulp.dest() means path to export destination
• l10n(param) => param could be string (example 1) or object (example 2)
• l10n is default variable name (if string param is used)
• name is the name of exported file
• variable is the name of variable inside exported file

l10n XML structure example

<?xml version="1.0" encoding="UTF-8"?>
<L10n>
  <header>
	</header>
  <string id="translate 1">
    <sk-SK>... Preklad cislo 1</sk-SK>
    <en-US>... Translate number 1</en-US>
    <de-DE>... Zahlenübersetzung 1</de-DE>
  </string>
  <string id="translate 2">
    <sk-SK>... Preklad cislo 2</sk-SK>
    <en-US><![CDATA[... Translate number 2 => <p style="color: red">html paragraph</p>]]></en-US>
    <de-DE>... Zahlenübersetzung 2</de-DE>
  </string>
  <string id="translate 3">
    <sk-SK>... Preklad cislo 3</sk-SK>
    <en-US>... Translate number 3</en-US>
    <de-DE>... Zahlenübersetzung 3</de-DE>
  </string>
</L10n>

• HTML inside XML is also suported

example available in mock.L10n

Exported JS file

var l10n = [
  [  
     {  
        "id":"translate 1",
        "lng":[  
           {  
              "name":"sk-SK",
              "translate":"... Preklad cislo 1"
           },
           {  
              "name":"en-US",
              "translate":"... Translate number 1"
           },
           {  
              "name":"de-DE",
              "translate":"... Zahlenübersetzung 1"
           }
        ]
     },
     {  
        "id":"translate 2",
        "lng":[  
           {  
              "name":"sk-SK",
              "translate":"... Preklad cislo 2"
           },
           {  
              "name":"en-US",
              "translate":[
              	{
                	"data":"... Translate number 2 => <p style=\"color: red\">html paragraph</p>",
                    "type":"text"
                 }
               ]
           },
           {  
              "name":"de-DE",
              "translate":"... Zahlenübersetzung 2"
           }
        ]
     }
  ]
];


// helper function for returning translate by id and language params

function getL10n(id, lng = 'en') {
  let l10nArray = [];

  let newl10nArr = l10n.reduce(function(result, current) {
  	return result.concat(current);
  });

  const l10nId = newl10nArr.filter(function(item) {
    if(item.id === id) {
    	return item
    }
  });

  if(typeof l10nId[0] === 'undefined' || l10nId[0] === undefined) {
  	return '{' + id + '}';
  }

  const l10nResult = l10nId[0].lng.filter(function(item) {
    if(item.name === lng || item.name.substr(0,2) === lng) {
      return item
    }
  });

  if(typeof l10nResult[0] === 'undefined' || l10nResult[0] === undefined) {
  	return '{' + id + '}';
  }

  let resultType = l10nResult[0].translate;

  if(typeof resultType === 'object') {
  	return l10nResult[0].translate[0].data;
  } else {
  	return l10nResult[0].translate;
  }
}

• lng param is not required ('en' is default lng)
• lng param could be for example: 'en' or 'en-US' format

example available in dist/l10n.js

Working with export

First include exported js file into head or concat with another js file, then you are able to find translate by id and language simple by calling built-in function getL10n(id, lng):

<!DOCTYPE html>
<html>
<head>
  <title>gulp-l10n-js</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="index,nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <script src="./dist/l10n-min.js" type="text/javascript"></script>
  <!-- or not minified version  -->
  <!-- <script src="./dist/l10n.js" type="text/javascript"></script> -->
</head>
<body>
  
  <div id="element"></div>
  
  <script>
    
    // simple text inside parsed XML
    console.log(getL10n('translate 1', 'de')); // ... Zahlenübersetzung 1
    
    // using default lng param 'en'
    console.log(getL10n('translate 1')); // ... Translate number 1
    
    // HTML inside parsed XML
    console.log(getL10n('translate 2')); // ... Translate number 2 => <p style="color: red">html paragraph</p>
    document.getElementById('element').innerHTML = getL10n('translate 2');
    
  </script>

</body>
</html>

example available in index.html