requirejs/i18n

An AMD loader plugin for loading internationalization/localization string resources

RequireJS

RequireJS loads plain JavaScript files as well as more defined modules. It is optimized for in-browser use, including in a Web Worker, but it can be used in other JavaScript environments, like Rhino and Node. It implements the Asynchronous Module API.

RequireJS uses plain script tags to load modules/files, so it should allow for easy debugging. It can be used simply to load existing JavaScript files, so you can add it to your existing project without having to re-write your JavaScript files.

RequireJS includes an optimization tool you can run as part of your packaging steps for deploying your code. The optimization tool can combine and minify your JavaScript files to allow for better performance.

If the JavaScript file defines a JavaScript module via define(), then there are other benefits RequireJS can offer: improvements over traditional CommonJS modules and loading multiple versions of a module in a page. RequireJS also has a plugin system that supports features like i18n string bundles, and text file dependencies.

RequireJS does not have any dependencies on a JavaScript framework.

RequireJS works in IE 6+, Firefox 2+, Safari 3.2+, Chrome 3+, and Opera 10+.

Latest Release

License

MIT

Code of Conduct

jQuery Foundation Code of Conduct.

Directories

• dist: Scripts and assets to generate the requirejs.org docs, and for generating a require.js release.
• docs: The raw HTML files for the requirejs.org docs. Only includes the body of each page. Files in dist are used to generate a complete HTML page.
• tests: Tests for require.js.
• testBaseUrl.js: A file used in the tests inside tests. Purposely placed outside the tests directory for testing paths that go outside a baseUrl.
• updatesubs.sh: Updates projects that depend on require.js Assumes the projects are siblings to this directory and have specific names. Useful to copy require.js to dependent projects easily while in development.

Tests

This repo assumes some other repos are checked out as siblings to this repo:

git clone https://github.com/requirejs/text.git
git clone https://github.com/requirejs/i18n.git
git clone https://github.com/requirejs/domReady.git
git clone https://github.com/requirejs/requirejs.git

So when the above clones are done, the directory structure should look like:

• domReady
• i18n
• text
• requirejs (this repo)

You will need to be connected to the internet because the JSONP and remoteUrls tests access the internet to complete their tests.

Serve the directory with these 4 siblings from a web server. It can be a local web server.

Open requirejs/tests/index.html in all the browsers, click the arrow button to run all the tests.

i18n's Issues

Support for pluralization

Do you have plans to support pluralization as a part of the plugin, or do you envision leaving that to a higher layer?

custom defined module config isn't used

Hi, I have configured a default locale in my config.js which is my main requirejs file and it looks like this:

require.config({

    deps: ["main"],

    config: {
        i18n: {
            locale: 'nl'
        }
    },

    // 3rd party script alias names (Easier to type "jquery" than "libs/jquery-1.7.2.min")
    paths: {
        ...
        'nls': '../scripts/nls',
        'i18n': '../scripts/libs/i18n',
        ...
    },

    // Sets the configuration for your third party scripts that are not AMD compatible
    shim: {
    }

});

This seems to work when i am just developing, but when i use the optimization tool (r.js) and all my scripts are concatenated and minified it doesn't load the right config ... my config has then en-us as locale. Any idea how this is possible? or how to fix this?

my r.js config is as follows:

  mainFile: 'nl.html',
  optimize: 'none',
  baseUrl: './scripts',
  wrap: true,
  name: 'config'

i'm using yeoman in combination with requirejs and the i18n plugin

kind regards,
Daan

Leveraging the if document.documentElement.lang for the locale choice

@jrburke et al. any thoughts on leveraging the document.documentElement.lang as part of the fallbacks if there is no local set?

I can understand leveraging the navigation property but for sites that offer content in different languages, this gets a bit challenging if users go on languages that are not there browser settings.

I am more talking about the cases (which in some of my experiences is often) where people come to sites on computers in libraries and so forth where they may not have control to change there local to the language of there choice.

Thoughts?

I am work on a quick P.R. if you think this has value.

Files path not concat the baseUrl of requireJs

I have folder structure like this

App
│── javascript
│ │── collection
│ │── template
│ │── config.js
│ │── etc.
│── style
│── index.html

in file config.js I set the baseUrl of requireJs as '/javascript'. When I have to require file with requireJS I do something like

define([
'collection/mainCollection.js',
'text!templates/mainView.html',
'i18n!nls/color.js'
],function (
col, view, label
){
.....
.....
.....
}

Then I test my app this file load the dependencies as follow :

• javascript/collection/mainCollection.js
• javascript/templates/mainView.html
• nls/color.js

At the first, I work around by set 'i18n!nls/color.js' to 'i18n!javascript/nls/color.js' but I have the problem when I prepare my app for unit test with karma runner. I have to create the new config.test.js with baseUrl like 'base/javascript' that make me the problem with i18n not concat baseUrl of requireJs

Retrieving a translation whit multiple dots as key does not return a value

Whenever i use the following statement in a template - print("myfile.foo.bar") it doesn't print anything, even though the myfile does contain a value for it.
When changing it to print("myfile.foobar") the value does get printed (off course i also changed the key foo.bar to foobar in myfile.js).
Is this the expected behaviour ? Is there an escape character needed for dots after the filename ?
I cannot find anything about this in the documentation...

Setting locale manually in r.js build is not working

I'm developing an application using i18n plugin. And I'm setting locale manually in main.js file according to user preferences. Like this:

requirejs.config({
  config: {
    i18n: { locale: 'some_locale' }
  }
});

And it works pretty well. But I can't set locale manually for r.js build.

According to documentation I'm setting locale in r.js config file and r.js should inline following i18n resources into the build:

{
  ...
  optimize: 'uglify2',
  config: {
    i18n: { locale: 'some_locale' }
  }
}

And it works, i18n resources are actually inlined into the build file. But i18n plugin still detects locale automatically. So nothing works if detected locale and bundled resources don't matched. It happens because i18n plugin is trying to load not existing i18n resources for automatically detected locale.

nls bundles not playing well with requirejs 2.1.4 node module.

I'm using i18n as part of a project that uses the grunt-contrib-requirejs package for compilation. That package recently upgraded to the 2.1.4 requirejs node module. I'm now seeing results where running grunt requirejs picks up my root nls files but not the translation files themselves. (So nls/colors.js is included in the generated file, but not nls/fr-fr/colors.js.)

I'm not sure what source would be helpful to see here. The code I'm working with is actually just for proofing i18n for my project, and is taken directly from the i18n example from the requirejs docs. http://requirejs.org/docs/api.html#i18n

mixin function sometimes converts null into empty object

I’ve found a problem that is related to mixin function. In my case mixin function is called with the following parameters:

• target = ["audio", "video", null]
• source = ["audio", "video", null]
• force = undefined

where target and source reference to the same array (i.e. target === source).
As a result the third item in the array (null) is converted into empty object ({}).

Not working in IE 7

Hi,

I am planning to use this library for my new project. I have implemented everything and got it working as well in IE 9, Firefox, Chrome.

But when I tried the same in IE 7, I got below JS error message.

Error: expected identifier string or number

Can you please confirm is it compatible with IE 7 as well?

Thanks & Regards,
Jimit

Mixed double and single quotes

Source code contains both double and single quotes. Please use either double or single quotes to make jshint happy.

baseUrl problem

hi there!

Maybe i am missing something, but is there any reason why the config.baseUrl gets ignored? because of this i ran into some problems with loading the nls files in my modules.

my fix was to change https://github.com/requirejs/i18n/blob/master/i18n.js#L102
insert

if (!config.isBuild) { // it works fine in the build
name = config.baseUrl + name;
}

Where to put the locale setting?

According to the documentation the locale setting should be a property of the i18n object, but I also got it to work as a direct property of the config object. So my question is, what is the preferred way for setting the locale?

// This works
require.config({
  locale: 'en-gb'
});

// and this is the documented way
require.config({
  config: {
    i18n: {
      locale: 'en-gb'
    }
  }
});

Versions used: RequireJS 2.1.15 and i18n 2.0.4

Possible to pull translations with ajax?

I have a backbone app that connects to a wordpress app and would need to get the translations from the wordpress by ajax if possible?

"Load timeout for modules" error with map config

Hello guys.

Please, look my code below.

main.js

requirejs.config({
    config: {
        i18n: {
            locale: 'en'
        }
    },
    map: {
        '*': {
            'locales/translations': './locales/translations.js'
        }
    },
    paths: {
        i18n: 'i18n-2.0.4'
    }

});

require(['locales/translations'], function (i18n) {
    console.log(i18n);
});

locales/translations.js

define(["i18n!locales/nls/translations"], function(i18n) {

    return i18n
});

locales/nls/translations.js

define({
    "root": true,
    "ru": true
});

locales/nls/ru/translations.js

define({
   "key": "value-ru"
});

locales/nls/root/translations.js

define({
   "key": "value-en"
});

In network tab of the browser console I seen that all scripts were successfully loaded.
But I seen this:

Uncaught Error: Load timeout for modules: ./locales/translations.js
http://requirejs.org/docs/errors.html#timeout require-2.1.14.js:166makeError require-2.1.14.js:166checkLoaded require-2.1.14.js:694(anonymous function) require-2.1.14.js:715

My browser is 37.0.2062.94 under mac os x 10.9.4
requirejs version is 2.1.15
i18n plugin version is 2.0.4

It works fine when I changed 'locales/translations': './locales/translations.js' to 'locales/translations': 'locales/translations.js'
in a map config, but I want to use that url(with './') in a map config.

Thank you!

Problems with dynamically populating the language list

I'm trying to dynamically populate the language list of adobe/brackets. It is loaded via require("i18n!nls/strings").
But for dynamically populating the file, I need to require two modules... which fails!
As soon as I add the call var FileUtils = require("file/FileUtils");, which works everywhere else, the require won't work any more.

Error message (console):

Uncaught Error: Load timeout for modules: i18n!nls/strings_unnormalized7,i18n!nls/strings
http://requirejs.org/docs/errors.html#timeout

How to change the reference path of i18n

I’d like to use i18n in my project. But I met with a problem in the process. The question was that the structure of directory I designed is not fit to the requirement of i18n. This question resulted the resource files cannot be loaded normally. To be better understanding, I will include more details in the following description.
The structure of directory in my project can be abstracted as below:

app/  
  -- config.js  
   -- widgets/  
     -- WidgetName/  
       -- nls/  
          -- strings.js  
       -- Widget.js  
   -- index.html

I set up the baseUrl as the root directory of application. Then, call the resource file in the Widget.js and depends this Widget in the index.html. The code is as below:
config.js:

require.config({  
    baseUrl: '/app/widgets'  
});  

Widget.js:

define(["i18n!./nls/strings.js"], function (nls) {
    ...
});

index.html:

require(["widgets/WidgetName/Widget"], function (Widget) {
    ...
});

However, when I ran the code, the request path of i18n was “app/WidgetName/nls/strings.js” other than “app/widgets/WidgetName/nls/strings.js” which I expected. It implied i18n used the directory in the index.html other than the baseUrl I set up.

Therefore, my questions are as following:

1. How to solve this problem if I don’t want to modify the directory structure?
2. How to set up the baseUrl as the default path of i18n?

Use JSON files for translations instead of javascript files

Writing all the translations as a javascript object wrapped in a function is tedious and unmaintainable. It would make a lot more sense to write the translations as JSON files. I would do this simply with text!, but then I would lose the advantage of the built-in locale detection. I considered using text! in conjunction with i18n!:

define(function(require) {
  translations = require('text!nls/translations.json')
  return JSON.parse(translations)
})

but that leads to a bloated repository with a file structure like:

• nls/
  • translations.js
  • translations.json
  • fr-fr/
    • translations.js
    • translations.json

etc.

Additionally, if your project is in coffeescript and you're taking advantage of the cs! plugin, it doesn't appear that you can write your nls files in coffeescript.

Is there some technical reason why this plugin can't just use json files?

Bower package

I see the the bower.js, but cant find the package here http://bower.io/search.

I think its because the package is not made yet.

Could you please create the package, and also create an Install section to the docs?

Expose the detected locale part

Let's say I want to write a requirejs plugin which would be based on i18n but including some more features like :

• Dynamic generation of an array of all supported languages for a given bundle ([{ code: "en", name: "English", root: true, current: false }, { code: "fr", name: "Français", current: true }, ...])
• ...

Why ? Mainly in order to help providing a language picker (select menu, flags or whatever) in my applications.

Generating the array is easy but knowing which locale part has been detected by the i18n plugin is not currently possible because the value isn't exposed somehow.

In addition to making my life easier, I think appending that functionality to the official i18n requirejs plugin could be useful to other plugin developers too.

Adding something like value._currentLocale = needed.slice(-1)[0] just before onLoad(value) (line 175) does the trick but I'm pretty sure one can find a better solution.

Hopefully my english wasn't too bad and you get the point of this "issue". Thanks.

Dynamic load not allowed: strings/nls/lang

When I build - I am getting the above error Dynamic load not allowed: strings/nls/lang

is there a setting I'm missing on the build obj that I need to define all the languages to import them?

I have 6 language files in appropriate dir if I don't build the languages load. To refresh the language I store in local storage and do an app refresh.

lang.js example

define({
    "root":     true,
    "fr":       true
});

Folders with lang.js
/strings/nls/lang/root
/strings/nls/lang/fr

Within the HTML

var require = {
    config: {
        i18n: {
            locale: localStorage.getItem('locale') || 'en_gb'
        }
    }
};

within the build.js

({
    stubModules : ['text', 'hgn', 'i18n'],

    pragmasOnSave : {
        // you can use this pragma to exclude compiler logic from Hogan.js in
        // case you don't need to compile any templates after buid
        excludeHogan : false
    },
    appDir: "../",
    dir: "../../app-build",
    modules: [
        {
            name: "base"
        }
    ],
    locale: 'en',
    baseUrl: 'js/com/base/section',
    paths: {
        requireLib: '../../../libs/requirejs',
        i18n:       '../../../libs/requirejs/i18n',
        templates:  '../../../../gen/templates',
        strings:    '../../../../gen/strings',
        cordovaLib: '../../../libs/import/cordova/rim/cordova'
    },
    hgn: {
        templateExtension: '.mustache',
    },
    waitSeconds: 10,
    xhtml: true
})

base.js

require([
    'i18n!strings/nls/lang',
], function(){

});

Thanks - I've been searching and trying different things but haven't had any luck with figuring out the issue.
Also I'm using RequireJS 2.0.6 i18n 2.0.4

mixin into root?

I followed http://requirejs.org/docs/api.html#i18n to try out i18n.js which is very easy and lightweight to use, but somehow I get below mixin-ed result

{
"root": {
"header": "French - bleu",
"body": "This is an example of translated text",
"blue": "bleu",
"green": "vert"
},
"header": "RequireJS i18n - Testing 2",
"body": "This is an example of translated text"
}

That means in my module code, I should use message.root.header, message.root.blue to get the message.

I expect to see something like below

{
"root": {
"header": "RequireJS i18n - Testing 2",
"body": "This is an example of translated text"
},
"header": "French - bleu",
"body": "This is an example of translated text",
"blue": "bleu",
"green": "vert"
}

so for different locales, I always use message.header, message.blue etc to get the i18n message.

I did the following things:

1. created nls folder sth like
   main.js
   nls
   message.js
   fr-fr
   message.js
2. I added config section in requirejs.config
   requirejs.config({
   config: {
   //Set the config for the i18n
   //module ID
   i18n: {
   locale: 'fr-fr'
   }
   },
   .....
   }
3. I define the nls and use in my module code
   define(['text!template/list.html', 'i18n!nls/message'], function(tpl, message) {
   alert(message.header);
   alert(message.blue);
   });

I am not sure if there is some usage error, or something missing here to use i18n.js plugin. Or I should look at other lib like messageformat.js, i18next.js?

Is there a way to dynamically change content ?

Hi :)

I was wondering how could I switch my page content based on the locale, without refreshing the whole page. Basically, I want to switch the content locale inside a click event handler. How can I access my other namespaces ?

Thanks in advance !

Support for list of locales at build time

Currently we can use config.locale to inline support for a single locale at build time.

Would it be possible to have something like config.locales where we could provide an array of locales and have them all inlined at build time.