angular-gettext-tools
angular-gettext-tools copied to clipboard
Custom compiler formats
Hi everyone, I just grab the code and i am trying to use the extractor and compiler to run on every js code, some places we are using Angular and other ones we are using Backbone, jquery...
Now i can use the same grunt task to extract all the strings, but the format of the compiled .po files created by the task nggettext_compile are not suitable for the old jquery strings, there are any way for me to make my own format and use it in the grunt task?!
Thanks in advance.
What i just did to make it work is:
// angular-gettext-tools/lib/compile.js
var formats = {
angularjs_and_jqueryi18n: {
addLocale: function (locale, strings) {
return {
name: locale,
strings: strings
};
},
format: function (locales, options) {
var angularjs_locales = [];
locales.forEach(function (locale) {
angularjs_locales.push(
'gettextCatalog.setStrings("' + locale.name + '", ' + JSON.stringify(locale.strings) + ');\n');
});
var jqueryi18n_locales = {};
locales.forEach(function (locale) {
_.extend(jqueryi18n_locales, locale.strings);
});
var module = '' +
'// AngularJS \n' +
'if (typeof angular !== "undefined") {\n' +
' angular.module("' + options.module + '").run(["gettextCatalog", function (gettextCatalog) {\n' +
' ' + angularjs_locales.join('\n') +
' }]);\n' +
'}\n\n' +
'// Jquery-i18n\n' +
'if (typeof $.i18n !== "undefined") {\n' +
' $.i18n.load('+ JSON.stringify(jqueryi18n_locales) +');\n' +
'}';
return module;
}
},
javascript: {
addLocale: function (locale, strings) {
return ' gettextCatalog.setStrings(\'' + locale + '\', ' + JSON.stringify(strings) + ');\n';
},
format: function (locales, options) {
var module = 'angular.module(\'' + options.module + '\')' +
...
Hi Guys,
I'm also very insterested in custom format support for compilation and I think the case I described below might become quite popular when ES6 will be used more often.
Right now I'm using Babel for ES6 transpilation along with SystemJS as module loader to import dependencies (in the way compatible with ES6 mode).
With this setup I can't load translation file in standard way since app.js is loaded asynchroniusly by module loader using following piece of code placed in index.html file
System.import('app/app')
.then(function(module) {
angular.bootstrap(document.body, ['myApp']);
})
To acheive it with module loading compilation format so as a result it creates JS translation file in the following format
export function includeTranslations(gettextCatalog) {
gettextCatalog.setStrings('de', {"Email Address":"E-Mail Adresse"});
}
then it can be registered in app.js using as following
import { includeTranslations } from './translations'
angular
.module('myApp', ['gettext'])
.run(['gettextCatalog', function (gettextCatalog) {
gettextCatalog.currentLanguage = 'de';
includeTranslations(gettextCatalog); // important
}])
to acheive it I changed follwing in compile.js file: javascript format:
lines 12 and 13
var module = 'angular.module(\'' + options.module + '\')' +
'.run([\'gettextCatalog\', function (gettextCatalog) {\n' +
becomes
var module = 'export function (gettextCatalog) {\n' +
and line 20
module += '}]);';
becomes
module += '}';
In case you are aware about simpler solution to solve abovementioned problem without using custom format PLEASE share it with me otherwise please I'd like to know if you're planning to add such feature as custom format or I need to solve it in a different way