Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
i18n-js - npm Package Compare versions
Comparing version 3.8.0 to 4.0.0-alpha.1
| { | ||
| "name": "i18n-js", | ||
| "version": "3.8.0", | ||
| "description": "A javascript library similar to Ruby on Rails i18n gem", | ||
| "author": "Nando Vieira", | ||
| "version": "4.0.0-alpha.1", | ||
| "description": "A small library to provide I18n on JavaScript.", | ||
| "main": "./dist/import/index.js", | ||
| "browser": "./dist/browser/index.js", | ||
| "exports": { | ||
| "import": "./dist/import/index.js", | ||
| "require": "./dist/require/index.js" | ||
| }, | ||
| "files": [ | ||
| "dist/**/*", | ||
| "typings/**/*" | ||
| ], | ||
| "typings": "./typings", | ||
| "repository": "https://github.com/fnando/i18n", | ||
| "author": "Nando Vieira <me@fnando.com>", | ||
| "license": "MIT", | ||
| "keywords": [ | ||
| "i18n" | ||
| ], | ||
| "devDependencies": { | ||
| "jasmine-node": "^1.14.5" | ||
| }, | ||
| "main": "app/assets/javascripts/i18n.js", | ||
| "scripts": { | ||
| "test": "./node_modules/.bin/jasmine-node spec/js" | ||
| "docs": "typedoc src", | ||
| "test": "jest --watch", | ||
| "test:ci": "jest", | ||
| "clean": "rm -rf ./dist", | ||
| "build:browser": "webpack --output-path ./dist/browser/index.js --mode production --entry ./dist/import/index.js --output-library-type var --output-library-name I18n --devtool source-map", | ||
| "build:require": "tsc --outDir ./dist/commonjs --module commonjs", | ||
| "build:import": "tsc --outDir ./dist/import --module ESNext", | ||
| "build": "yarn clean && yarn build:import && yarn build:browser && yarn build:require && yarn docs", | ||
| "lint:typescript": "tsc --noEmit", | ||
| "lint:eslint": "eslint --config .eslintrc.js --max-warnings 0 'src/**/*'", | ||
| "lint": "yarn lint:typescript && yarn lint:eslint" | ||
| }, | ||
| "homepage": "https://github.com/fnando/i18n-js", | ||
| "bugs": { | ||
| "url": "https://github.com/fnando/i18n-js/issues" | ||
| "devDependencies": { | ||
| "@fnando/codestyle": "*", | ||
| "@fnando/eslint-config-codestyle": "*", | ||
| "@types/jest": "*", | ||
| "@types/lodash": "*", | ||
| "@typescript-eslint/eslint-plugin": "*", | ||
| "@typescript-eslint/parser": "*", | ||
| "eslint": "*", | ||
| "eslint-config-prettier": "*", | ||
| "eslint-plugin-prettier": "*", | ||
| "jest": "*", | ||
| "jest-filename-transform": "*", | ||
| "prettier": "*", | ||
| "ts-jest": "*", | ||
| "typedoc": "*", | ||
| "typescript": "*", | ||
| "webpack": "*", | ||
| "webpack-cli": "*" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/fnando/i18n-js.git" | ||
| "dependencies": { | ||
| "lodash": "*" | ||
| } | ||
| } |
1130
README.md
@@ -1,552 +0,329 @@ | ||
| # I18n.js | ||
| <p align="center"> | ||
| <strong style="font-size: 36px;">i18n-js</strong> | ||
| </p> | ||
| [](http://badge.fury.io/rb/i18n-js) | ||
| [](https://www.npmjs.com/package/i18n-js) | ||
| [](https://opensource.org/licenses/MIT) | ||
| <p align="center"> | ||
| A small library to provide the <a href="https://rubygems.org/gems/i18n">i18n</a> translations on the JavaScript. | ||
| </p> | ||
| [](https://travis-ci.org/fnando/i18n-js) | ||
| [](https://coveralls.io/r/fnando/i18n-js) | ||
| <p align="center"> | ||
| <a href="https://github.com/fnando/i18n/actions?query=workflow%3Atests"><img src="https://github.com/fnando/i18n/workflows/tests/badge.svg" alt="Tests"></a> | ||
| <a href="https://www.npmjs.com/package/i18n"><img src="https://img.shields.io/npm/v/i18n-js.svg" alt="npm version"></a> | ||
| <a href="https://www.npmjs.com/package/i18n"><img src="https://img.shields.io/npm/dt/i18n-js.svg" alt="npm downloads"></a> | ||
| <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="License: MIT"></a> | ||
| </p> | ||
| [](https://gitter.im/fnando/i18n-js) | ||
| ## Installation | ||
| > The above badges are generated by https://shields.io/ | ||
| - Yarn: `yarn add i18n-js@next` | ||
| - NPM: `npm install i18n-js@next` | ||
| It's a small library to provide the Rails I18n translations on the JavaScript. | ||
| Features: | ||
| - Pluralization | ||
| - Date/Time localization | ||
| - Number localization | ||
| - Locale fallback | ||
| - Asset pipeline support | ||
| - Lots more! :) | ||
| ## Version Notice | ||
| The `master` branch (including this README) is for latest `3.0.0` instead of `2.x`. | ||
| ## Usage | ||
| ### Installation | ||
| ### Setting up | ||
| #### Rails app | ||
| First, you need to instantiate `I18n` with the translations' object, the main | ||
| class of this library. | ||
| Add the gem to your Gemfile. | ||
| ```ruby | ||
| gem "i18n-js" | ||
| ``` | ||
| ```js | ||
| import { I18n } from "i18n"; | ||
| import translations from "./translations.json"; | ||
| #### Rails with [webpacker](https://github.com/rails/webpacker) | ||
| If you're using `webpacker`, you may need to add the dependencies to your client with: | ||
| const i18n = new I18n(translations); | ||
| ``` | ||
| yarn add i18n-js | ||
| # or, if you're using npm, | ||
| npm install i18n-js | ||
| ``` | ||
| For more details, see [this gist](https://gist.github.com/bazzel/ecdff4718962e57c2d5569cf01d332fe). | ||
| The `translations` object is a direct export of translations defined by | ||
| [Ruby on Rails](https://guides.rubyonrails.org/i18n.html). To export the | ||
| translations, you can use [i18n-js](https://github.com/fnando/i18n-js), a Ruby | ||
| gem that's completely disconnected from Rails and that can be used for the | ||
| solely purpose of exporting the translations, even if your project is written in | ||
| a different language. If all you care about is some basic translation mechanism, | ||
| then you can set the object like this: | ||
| #### Rails app with [Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html) | ||
| If you're using the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html), | ||
| then you must add the following line to your `app/assets/javascripts/application.js`. | ||
| ```javascript | ||
| // | ||
| // This is optional (in case you have `I18n is not defined` error) | ||
| // If you want to put this line, you must put it BEFORE `i18n/translations` | ||
| //= require i18n | ||
| // Some people even need to add the extension to make it work, see https://github.com/fnando/i18n-js/issues/283 | ||
| //= require i18n.js | ||
| // | ||
| // This is a must | ||
| //= require i18n/translations | ||
| ```js | ||
| const i18n = new I18n({ | ||
| en: { | ||
| hello: "Hi!", | ||
| }, | ||
| "pt-BR": { | ||
| hello: "Olá!", | ||
| }, | ||
| }); | ||
| ``` | ||
| #### Rails app without [Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html) | ||
| Each root key is a different locale that may or may not have the script code. | ||
| This library also supports locales with region code, like `zh-Hant-TW`. | ||
| Once everything is set up, you can then define the locale. `en` is both the | ||
| current and default locale. To override either values, you have to use | ||
| `I18n#defaultLocale` and `I18n#locale`. | ||
| First, put this in your `application.html` (layout file). | ||
| Then get the JS files following the instructions below. | ||
| ```erb | ||
| <%# This is just an example, you can put `i18n.js` and `translations.js` anywhere you like %> | ||
| <%# Unlike the Asset Pipeline example, you need to require both **in order** %> | ||
| <%= javascript_include_tag "i18n" %> | ||
| <%= javascript_include_tag "translations", skip_pipeline: true %> | ||
| ```js | ||
| i18n.defaultLocale = "pt-BR"; | ||
| i18n.locale = "pt-BR"; | ||
| ``` | ||
| **There are two ways to get `translations.js` (For Rails app without Asset Pipeline).** | ||
| #### Base translations | ||
| 1. This `translations.js` file can be automatically generated by the `I18n::JS::Middleware`. | ||
| Just add `config.middleware.use I18n::JS::Middleware` to your `config/application.rb` file. | ||
| 2. If you can't or prefer not to generate this file, | ||
| you can move the middleware line to your `config/environments/development.rb` file | ||
| and run `rake i18n:js:export` before deploying. | ||
| This will export all translation files, including the custom scopes | ||
| you may have defined on `config/i18n-js.yml`. | ||
| If `I18n.available_locales` is set (e.g. in your Rails `config/application.rb` file) | ||
| then only the specified locales will be exported. | ||
| Current version of `i18n.js` will also be exported to avoid version mismatching by downloading. | ||
| This library comes bundled with all base translations made available by | ||
| [rails-i18n](https://github.com/svenfuchs/rails-i18n/tree/master/rails/locale). | ||
| Base translations allow formatting date, numbers, and sentence connectors, among | ||
| other things. | ||
| #### Export Configuration (For translations) | ||
| To load the base translations, use something like the following: | ||
| Exported translation files generated by `I18n::JS::Middleware` or `rake i18n:js:export` can be customized with config file `config/i18n-js.yml` | ||
| (use `rails generate i18n:js:config` to create it). | ||
| You can even get more files generated to different folders and with different translations to best suit your needs. | ||
| The config file also affects developers using Asset Pipeline to require translations. | ||
| Except the option `file`, since all translations are required by adding `//= require i18n/translations`. | ||
| ```js | ||
| import { I18n } from "i18n-js"; | ||
| import ptBR from "i18n-js/json/pt-BR.json"; | ||
| import en from "i18n-js/json/en.json"; | ||
| Examples: | ||
| ```yaml | ||
| translations: | ||
| - file: 'public/javascripts/path-to-your-messages-file.js' | ||
| only: '*.date.formats' | ||
| - file: 'public/javascripts/path-to-your-second-file.js' | ||
| only: ['*.activerecord', '*.admin.*.title'] | ||
| const i18n = new I18n({ | ||
| ...ptBR, | ||
| ...en, | ||
| }); | ||
| ``` | ||
| If `only` is omitted all the translations will be saved. Also, make sure you add that initial `*`; it specifies that all languages will be exported. If you want to export only one language, you can do something like this: | ||
| ```yaml | ||
| translations: | ||
| - file: 'public/javascripts/en.js' | ||
| only: 'en.*' | ||
| - file: 'public/javascripts/pt-BR.js' | ||
| only: 'pt-BR.*' | ||
| ``` | ||
| ### Translating messages | ||
| Optionally, you can auto generate a translation file per available locale if you specify the `%{locale}` placeholder. | ||
| ```yaml | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| - file: "public/javascripts/frontend/i18n/%{locale}.js" | ||
| only: ['*.frontend', '*.users.*'] | ||
| ``` | ||
| To translate messages, you have to use the `I18n#translate`, or its `I18n#t` | ||
| alias. | ||
| You can also include ERB in your config file. | ||
| ```yaml | ||
| translations: | ||
| <% Widgets.each do |widget| %> | ||
| - file: <%= "'#{widget.file}'" %> | ||
| only: <%= "'#{widget.only}'" %> | ||
| <% end %> | ||
| ``` | ||
| ```js | ||
| i18n.locale = "en"; | ||
| i18n.t("hello"); //=> Hi! | ||
| You are able to exclude certain phrases or whole groups of phrases by | ||
| specifying the YAML key(s) in the `except` configuration option. The outputted | ||
| JS translations file (exported or generated by the middleware) will omit any | ||
| keys listed in `except` configuration param: | ||
| ```yaml | ||
| translations: | ||
| - except: ['*.active_admin', '*.ransack', '*.activerecord.errors'] | ||
| i18n.locale = "pt-BR"; | ||
| i18n.t("hello"); //=> Olá! | ||
| ``` | ||
| You can also provide an array as scope. Both calls below are equivalent. | ||
| #### Export Configuration (For other things) | ||
| - `I18n::JS.config_file_path` | ||
| Expected Type: `String` | ||
| Default: `config/i18n-js.yml` | ||
| Behaviour: Try to read the config file from that location | ||
| - `I18n::JS.export_i18n_js_dir_path` | ||
| Expected Type: `String` | ||
| Default: `public/javascripts` | ||
| Behaviour: | ||
| - Any `String`: considered as a relative path for a folder to `Rails.root` and export `i18n.js` to that folder for `rake i18n:js:export` | ||
| - Any non-`String` (`nil`, `false`, `:none`, etc): Disable `i18n.js` exporting | ||
| - `I18n::JS.sort_translation_keys` | ||
| Expected Type: `Boolean` | ||
| Default: `true` | ||
| Behaviour: | ||
| - Sets whether or not to deep sort all translation keys in order to generate identical output for the same translations | ||
| - Set to true to ensure identical asset fingerprints for the asset pipeline | ||
| - You may also set `export_i18n_js` and `sort_translation_keys` in your config file, e.g.: | ||
| ```yaml | ||
| export_i18n_js: false | ||
| # OR | ||
| export_i18n_js: "my/path" | ||
| sort_translation_keys: false | ||
| translations: | ||
| - ... | ||
| ```js | ||
| i18n.t(["greetings", "hello"]); | ||
| i18n.t("greetings.hello"); | ||
| ``` | ||
| To find more examples on how to use the configuration file please refer to the tests. | ||
| Your translations may have dynamic values that should be interpolated. Here's a | ||
| greeting message that takes a name: | ||
| #### Fallbacks | ||
| ```js | ||
| const i18n = new I18n({ | ||
| en: { greetings: "Hi, %{name}!" }, | ||
| "pt-BR": { greetings: "Olá, %{name}!" }, | ||
| }); | ||
| If you specify the `fallbacks` option, you will be able to fill missing translations with those inside fallback locale(s). | ||
| Default value is `true`. | ||
| Examples: | ||
| ```yaml | ||
| fallbacks: true | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| i18n.t("greetings", { name: "John" }); | ||
| ``` | ||
| This will enable merging fallbacks into each file. (set to `false` to disable). | ||
| If you use `I18n` with fallbacks, the fallbacks defined there will be used. | ||
| Otherwise `I18n.default_locale` will be used. | ||
| ```yaml | ||
| fallbacks: :de | ||
| #### Missing translations | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| ``` | ||
| Here, the specified locale `:de` will be used as fallback for all locales. | ||
| A translation may be missing. In that case, you may set the default value that's | ||
| going to be returned. | ||
| ```yaml | ||
| fallbacks: | ||
| fr: ["de", "en"] | ||
| de: "en" | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| ```js | ||
| i18n.t("missing.scope", { defaultValue: "This is a default message" }); | ||
| ``` | ||
| Fallbacks defined will be used, if not defined (e.g. `:pl`) `I18n.fallbacks` or `I18n.default_locale` will be used. | ||
| ```yaml | ||
| fallbacks: :default_locale | ||
| Default messages can also have interpolation. | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| ```js | ||
| i18n.t("noun", { defaultValue: "I'm a {{noun}}", noun: "Mac" }); | ||
| ``` | ||
| Setting the option to `:default_locale` will enforce the fallback to use the `I18n.default_locale`, ignoring `I18n.fallbacks`. | ||
| Examples: | ||
| ```yaml | ||
| fallbacks: false | ||
| Alternatively, you can define a list of scopes that will be searched instead. | ||
| translations: | ||
| - file: "public/javascripts/i18n/%{locale}.js" | ||
| only: '*' | ||
| ``` | ||
| You must disable this feature by setting the option to `false`. | ||
| ```js | ||
| // As a scope | ||
| i18n.t("some.missing.scope", { defaults: [{ scope: "some.existing.scope" }] }); | ||
| To find more examples on how to use the configuration file please refer to the tests. | ||
| #### Namespace | ||
| Setting the `namespace` option will change the namespace of the output Javascript file to something other than `I18n`. | ||
| This can be useful in no-conflict scenarios. Example: | ||
| ```yaml | ||
| translations: | ||
| - file: "public/javascripts/i18n/translations.js" | ||
| namespace: "MyNamespace" | ||
| // As a simple translation | ||
| i18n.t("some.missing.scope", { defaults: [{ message: "Some message" }] }); | ||
| ``` | ||
| will create: | ||
| Default values must be provided as an array of objects where the key is the type | ||
| of desired translation, a `scope` or a `message`. The returned translation will | ||
| be either the first scope recognized, or the first message defined. | ||
| ``` | ||
| MyNamespace.translations || (MyNamespace.translations = {}); | ||
| MyNamespace.translations["en"] = { ... } | ||
| ``` | ||
| The translation will fall back to the `defaultValue` translation if no scope in | ||
| `defaults` matches and if no `message` default is found. | ||
| You can enable translation fallback with `I18n#enableFallback`. | ||
| ### Adding prefix & suffix to the translations file(s) | ||
| Setting the `prefix: "import I18n from 'i18n-js';\n"` option will add the line at the beginning of the resultant translation file. | ||
| This can be useful to use this gem with the [i18n-js](https://www.npmjs.com/package/i18n-js) npm package, which is quite useful to use it with webpack. | ||
| The user should provide the semi-colon and the newline character if needed. | ||
| For example: | ||
| ```yaml | ||
| translations: | ||
| - file: "public/javascripts/i18n/translations.js" | ||
| prefix: "import I18n from 'i18n-js';\n" | ||
| ```js | ||
| i18n.enableFallback = true; | ||
| ``` | ||
| will create: | ||
| By default missing translations will first be looked for in less specific | ||
| versions of the requested locale and if that fails by taking them from your | ||
| `I18n#defaultLocale`. | ||
| ```js | ||
| // if i18n.defaultLocale = "en" and translation doesn't exist | ||
| // for i18n.locale = "de-DE" this key will be taken from "de" locale scope | ||
| // or, if that also doesn't exist, from "en" locale scope | ||
| i18n.t("some.missing.scope"); | ||
| ``` | ||
| import I18n from 'i18n-js'; | ||
| I18n.translations || (I18n.translations = {}); | ||
| ``` | ||
| Custom fallback rules can also be specified for a specific language. There are | ||
| three different ways of doing it so. In any case, the locale handler must be | ||
| registered using `i18n.locales.register()`. | ||
| `suffix` option is added in https://github.com/fnando/i18n-js/pull/561. | ||
| It's similar to `prefix` so won't explain it in details. | ||
| ```js | ||
| // Using an array | ||
| i18n.locales.register("no", ["nb", "en"]); | ||
| // Using a string | ||
| i18n.locales.no.register("nb"); | ||
| #### Pretty Print | ||
| Set the `pretty_print` option if you would like whitespace and indentation in your output file (default: false) | ||
| ```yaml | ||
| translations: | ||
| - file: "public/javascripts/i18n/translations.js" | ||
| pretty_print: true | ||
| // Using a function. | ||
| i18n.locales.no.register((locale) => ["nb"]); | ||
| ``` | ||
| By default a missing translation will be displayed as | ||
| `[missing "name of scope" translation]`. You can override this behavior by | ||
| setting `i18n.missingBehavior` to `"guess"`. | ||
| #### Javascript Deep Merge (:js_extend option) | ||
| By default, the output file Javascript will call the `I18n.extend` method to ensure that newly loaded locale | ||
| files are deep-merged with any locale data already in memory. To disable this either globally or per-file, | ||
| set the `js_extend` option to false | ||
| ```yaml | ||
| js_extend: false # this will disable Javascript I18n.extend globally | ||
| translations: | ||
| - file: "public/javascripts/i18n/translations.js" | ||
| js_extend: false # this will disable Javascript I18n.extend for this file | ||
| ```js | ||
| i18n.missingBehaviour = "guess"; | ||
| ``` | ||
| The "guess" behavior will take the last section of the scope and apply some | ||
| replace rules; camel case becomes lower case and underscores are replaced with | ||
| space. In practice, it means that a scope like | ||
| `questionnaire.whatIsYourFavorite_ChristmasPresent` becomes | ||
| `what is your favorite Christmas present`. | ||
| #### Vanilla JavaScript | ||
| To detect missing translations, you can also set | ||
| `i18n.missingTranslationPrefix`. | ||
| Just add the `i18n.js` file to your page. You'll have to build the translations object | ||
| by hand or using your favorite programming language. More info below. | ||
| #### Via NPM with webpack and CommonJS | ||
| Add the following line to your package.json dependencies | ||
| where version is the version you want | ||
| ```javascript | ||
| "i18n-js": "{version_constraint}" | ||
| // Or if you want unreleased version | ||
| // npm install requires it to be the gzipped tarball, see [npm install](https://www.npmjs.org/doc/cli/npm-install.html) | ||
| "i18n-js": "https://github.com/fnando/i18n-js/archive/{tag_name_or_branch_name_or_commit_sha}.tar.gz" | ||
| ```js | ||
| i18n.missingTranslationPrefix = "EE: "; | ||
| ``` | ||
| Run npm install then use via | ||
| ```javascript | ||
| var i18n = require("i18n-js"); | ||
| ``` | ||
| The same `questionnaire.whatIsYourFavorite_ChristmasPresent` scope would | ||
| converted into `EE: what is your favorite Christmas present`. This is helpful if | ||
| you want to add a check to your automated tests. | ||
| ### Setting up | ||
| Finally, you can completely override the missing translation strategy by setting | ||
| it to a function. The following example will return `null` for every missing | ||
| translation. | ||
| You **don't** need to set up a thing. The default settings will work just okay. But if you want to split translations into several files or specify contexts, you can follow the rest of this setting up section. | ||
| Set your locale is easy as | ||
| ```javascript | ||
| I18n.defaultLocale = "pt-BR"; | ||
| I18n.locale = "pt-BR"; | ||
| I18n.currentLocale(); | ||
| // pt-BR | ||
| ```js | ||
| i18n.missingTranslation = () => null; | ||
| ``` | ||
| **NOTE:** You can now apply your configuration **before I18n** is loaded like this: | ||
| ```javascript | ||
| I18n = {} // You must define this object in top namespace, which should be `window` | ||
| I18n.defaultLocale = "pt-BR"; | ||
| I18n.locale = "pt-BR"; | ||
| #### Pluralization | ||
| // Load I18n from `i18n.js`, `application.js` or whatever | ||
| This library has support for pluralization and by default works with English, | ||
| and similar pluralized languages like Portuguese. | ||
| I18n.currentLocale(); | ||
| // pt-BR | ||
| ``` | ||
| First, you have to define your translations with special keywords defined by the | ||
| pluralization handler. The default keywords are `zero`, `one`, and `other`. | ||
| In practice, you'll have something like the following in your `application.html.erb`: | ||
| ```js | ||
| const i18n = new I18n({ | ||
| en: { | ||
| inbox: { | ||
| zero: "You have no messages", | ||
| one: "You have one message", | ||
| other: "You have %{count} messages", | ||
| }, | ||
| }, | ||
| ```erb | ||
| <script type="text/javascript"> | ||
| I18n.defaultLocale = "<%= I18n.default_locale %>"; | ||
| I18n.locale = "<%= I18n.locale %>"; | ||
| </script> | ||
| "pt-BR": { | ||
| inbox: { | ||
| zero: "Você não tem mensagens", | ||
| one: "Você tem uma mensagem", | ||
| other: "Você tem %{count} mensagens", | ||
| }, | ||
| }, | ||
| }); | ||
| ``` | ||
| You can use translate your messages: | ||
| To retrieve the pluralized translation you must provide the `count` option with | ||
| a numeric value. | ||
| ```javascript | ||
| I18n.t("some.scoped.translation"); | ||
| // or translate with explicit setting of locale | ||
| I18n.t("some.scoped.translation", {locale: "fr"}); | ||
| ```js | ||
| i18n.t("inbox", { count: 0 }); //=> You have no messages | ||
| i18n.t("inbox", { count: 1 }); //=> You have one message | ||
| i18n.t("inbox", { count: 2 }); //=> You have 2 messages | ||
| ``` | ||
| You can also interpolate values: | ||
| You may need to define new rules for other languages like Russian. This can be | ||
| done by registering a handler with `i18n.pluralization.register()`. The | ||
| following example defines a Russian pluralizer. | ||
| ```javascript | ||
| // You need the `translations` object setup first | ||
| I18n.translations["en"] = { | ||
| greeting: "Hello %{name}" | ||
| } | ||
| ```js | ||
| i18n.pluralization.register("ru", (_i18n, count) => { | ||
| const mod10 = count % 10; | ||
| const mod100 = count % 100; | ||
| let key; | ||
| I18n.t("greeting", {name: "John Doe"}); | ||
| ``` | ||
| You can set default values for missing scopes: | ||
| ```javascript | ||
| // simple translation | ||
| I18n.t("some.missing.scope", {defaultValue: "A default message"}); | ||
| const one = mod10 === 1 && mod100 !== 11; | ||
| const few = [2, 3, 4].includes(mod10) && ![12, 13, 14].includes(mod100); | ||
| const many = | ||
| mod10 === 0 || | ||
| [5, 6, 7, 8, 9].includes(mod10) || | ||
| [11, 12, 13, 14].includes(mod100); | ||
| // with interpolation | ||
| I18n.t("noun", {defaultValue: "I'm a {{noun}}", noun: "Mac"}); | ||
| ``` | ||
| if (one) { | ||
| key = "one"; | ||
| } else if (few) { | ||
| key = "few"; | ||
| } else if (many) { | ||
| key = "many"; | ||
| } else { | ||
| key = "other"; | ||
| } | ||
| You can also provide a list of default fallbacks for missing scopes: | ||
| ```javascript | ||
| // As a scope | ||
| I18n.t("some.missing.scope", {defaults: [{scope: "some.existing.scope"}]}); | ||
| // As a simple translation | ||
| I18n.t("some.missing.scope", {defaults: [{message: "Some message"}]}); | ||
| ``` | ||
| Default values must be provided as an array of hashes where the key is the | ||
| type of translation desired, a `scope` or a `message`. The translation returned | ||
| will be either the first scope recognized, or the first message defined. | ||
| The translation will fallback to the `defaultValue` translation if no scope | ||
| in `defaults` matches and if no default of type `message` is found. | ||
| Translation fallback can be enabled by enabling the `I18n.fallbacks` option: | ||
| ```erb | ||
| <script type="text/javascript"> | ||
| I18n.fallbacks = true; | ||
| </script> | ||
| ``` | ||
| By default missing translations will first be looked for in less | ||
| specific versions of the requested locale and if that fails by taking | ||
| them from your `I18n.defaultLocale`. | ||
| ```javascript | ||
| // if I18n.defaultLocale = "en" and translation doesn't exist | ||
| // for I18n.locale = "de-DE" this key will be taken from "de" locale scope | ||
| // or, if that also doesn't exist, from "en" locale scope | ||
| I18n.t("some.missing.scope"); | ||
| ``` | ||
| Custom fallback rules can also be specified for a particular language. There | ||
| are three different ways of doing it so: | ||
| ```javascript | ||
| I18n.locales.no = ["nb", "en"]; | ||
| I18n.locales.no = "nb"; | ||
| I18n.locales.no = function(locale){ return ["nb"]; }; | ||
| ``` | ||
| By default a missing translation will be displayed as | ||
| [missing "name of scope" translation] | ||
| While you are developing or if you do not want to provide a translation | ||
| in the default language you can set | ||
| ```javascript | ||
| I18n.missingBehaviour='guess'; | ||
| ``` | ||
| this will take the last section of your scope and guess the intended value. | ||
| Camel case becomes lower cased text and underscores are replaced with space | ||
| questionnaire.whatIsYourFavorite_ChristmasPresent | ||
| becomes "what is your favorite Christmas present" | ||
| In order to still detect untranslated strings, you can | ||
| i18n.missingTranslationPrefix to something like: | ||
| ```javascript | ||
| I18n.missingTranslationPrefix = 'EE: '; | ||
| ``` | ||
| And result will be: | ||
| ```javascript | ||
| "EE: what is your favorite Christmas present" | ||
| ``` | ||
| This will help you doing automated tests against your localisation assets. | ||
| Some people prefer returning `null` for missing translation: | ||
| ```javascript | ||
| I18n.missingTranslation = function () { return undefined; }; | ||
| ``` | ||
| Pluralization is possible as well and by default provides English rules: | ||
| ```javascript | ||
| I18n.t("inbox.counting", {count: 10}); // You have 10 messages | ||
| ``` | ||
| The sample above expects the following translation: | ||
| ```yaml | ||
| en: | ||
| inbox: | ||
| counting: | ||
| one: You have 1 new message | ||
| other: You have {{count}} new messages | ||
| zero: You have no messages | ||
| ``` | ||
| **NOTE:** Rails I18n recognizes the `zero` option. | ||
| If you need special rules just define them for your language, for example Russian, just add a new pluralizer: | ||
| ```javascript | ||
| I18n.pluralization["ru"] = function (count) { | ||
| var key = count % 10 == 1 && count % 100 != 11 ? "one" : [2, 3, 4].indexOf(count % 10) >= 0 && [12, 13, 14].indexOf(count % 100) < 0 ? "few" : count % 10 == 0 || [5, 6, 7, 8, 9].indexOf(count % 10) >= 0 || [11, 12, 13, 14].indexOf(count % 100) >= 0 ? "many" : "other"; | ||
| return [key]; | ||
| }; | ||
| }); | ||
| ``` | ||
| You can find all rules on <https://unicode-org.github.io/cldr-staging/charts/37/supplemental/language_plural_rules.html>. | ||
| You can find all rules on | ||
| [http://www.unicode.org/](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html). | ||
| If you're using the same scope over and over again, you may use the `scope` option. | ||
| It's encourage to publish your pluralizers using the following name pattern: | ||
| `i18n-<locale>-pluralizer`. If you publish a pluralizer, please add a pull | ||
| request so we can list it here. | ||
| ```javascript | ||
| var options = {scope: "activerecord.attributes.user"}; | ||
| #### Other options | ||
| I18n.t("name", options); | ||
| I18n.t("email", options); | ||
| I18n.t("username", options); | ||
| ``` | ||
| If you're providing the same scope again and again, you can reduce the | ||
| boilerplate by setting the `scope` option. | ||
| You can also provide an array as scope. | ||
| ```js | ||
| const options = { scope: "activerecord.attributes.user" }; | ||
| ```javascript | ||
| // use the greetings.hello scope | ||
| I18n.t(["greetings", "hello"]); | ||
| i18n.t("name", options); | ||
| i18n.t("email", options); | ||
| i18n.t("username", options); | ||
| ``` | ||
| #### Number formatting | ||
| ### Number Formatting | ||
| Similar to Rails helpers, you have localized number and currency formatting. | ||
| Similar to Rails helpers, you can have localized number and currency formatting. | ||
| ```javascript | ||
| I18n.l("currency", 1990.99); | ||
| ```js | ||
| i18n.l("currency", 1990.99); | ||
| // $1,990.99 | ||
| I18n.l("number", 1990.99); | ||
| i18n.l("number", 1990.99); | ||
| // 1,990.99 | ||
| I18n.l("percentage", 123.45); | ||
| i18n.l("percentage", 123.45); | ||
| // 123.450% | ||
| ``` | ||
| To have more control over number formatting, you can use the | ||
| `I18n.toNumber`, `I18n.toPercentage`, `I18n.toCurrency` and `I18n.toHumanSize` | ||
| functions. | ||
| To have more control over number formatting, you can use the `I18n#toNumber`, | ||
| `I18n#toPercentage`, `I18n#toCurrency` and `I18n#toHumanSize` functions. | ||
| ```javascript | ||
| I18n.toNumber(1000); // 1,000.000 | ||
| I18n.toCurrency(1000); // $1,000.00 | ||
| I18n.toPercentage(100); // 100.000% | ||
| ```js | ||
| i18n.toNumber(1000); // 1,000.000 | ||
| i18n.toCurrency(1000); // $1,000.00 | ||
| i18n.toPercentage(100); // 100.000% | ||
| ``` | ||
| The `toNumber` and `toPercentage` functions accept the following options: | ||
| The `I18n#toNumber` and `I18n#toPercentage` functions accept the following | ||
| options: | ||
@@ -560,9 +337,9 @@ - `precision`: defaults to `3` | ||
| ```javascript | ||
| I18n.toNumber(1000, {precision: 0}); // 1,000 | ||
| I18n.toNumber(1000, {delimiter: ".", separator: ","}); // 1.000,000 | ||
| I18n.toNumber(1000, {delimiter: ".", precision: 0}); // 1.000 | ||
| ```js | ||
| i18n.toNumber(1000, { precision: 0 }); // 1,000 | ||
| i18n.toNumber(1000, { delimiter: ".", separator: "," }); // 1.000,000 | ||
| i18n.toNumber(1000, { delimiter: ".", precision: 0 }); // 1.000 | ||
| ``` | ||
| The `toCurrency` function accepts the following options: | ||
| The `I18n#toCurrency` function accepts the following options: | ||
@@ -579,7 +356,7 @@ - `precision`: sets the level of precision | ||
| ```javascript | ||
| I18n.toCurrency(1000, {precision: 0}); // $1,000 | ||
| ```js | ||
| i18n.toCurrency(1000, { precision: 0 }); // $1,000 | ||
| ``` | ||
| The `toHumanSize` function accepts the following options: | ||
| The `I18n#toHumanSize` function accepts the following options: | ||
@@ -591,361 +368,140 @@ - `precision`: defaults to `1` | ||
| - `format`: defaults to `%n%u` | ||
| - `scope`: defaults to `""` | ||
| <!----> | ||
| ```javascript | ||
| I18n.toHumanSize(1234); // 1KB | ||
| I18n.toHumanSize(1234 * 1024); // 1MB | ||
| ```js | ||
| i18n.toHumanSize(1234); // 1KB | ||
| i18n.toHumanSize(1234 * 1024); // 1MB | ||
| ``` | ||
| ### Date Formatting | ||
| #### Date formatting | ||
| The `I18n#localize` (or its alias `I18n#l`) can accept a string, epoch time | ||
| integer or a `Date` object. You can see below the accepted formats: | ||
| ```javascript | ||
| // accepted formats | ||
| I18n.l("date.formats.short", "2009-09-18"); // yyyy-mm-dd | ||
| I18n.l("time.formats.short", "2009-09-18 23:12:43"); // yyyy-mm-dd hh:mm:ss | ||
| I18n.l("time.formats.short", "2009-11-09T18:10:34"); // JSON format with local Timezone (part of ISO-8601) | ||
| I18n.l("time.formats.short", "2009-11-09T18:10:34Z"); // JSON format in UTC (part of ISO-8601) | ||
| I18n.l("date.formats.short", 1251862029000); // Epoch time | ||
| I18n.l("date.formats.short", "09/18/2009"); // mm/dd/yyyy | ||
| I18n.l("date.formats.short", (new Date())); // Date object | ||
| ``` | ||
| You can also add placeholders to the date format: | ||
| ```javascript | ||
| I18n.translations["en"] = { | ||
| date: { | ||
| formats: { | ||
| ordinal_day: "%B %{day}" | ||
| } | ||
| } | ||
| } | ||
| I18n.l("date.formats.ordinal_day", "2009-09-18", { day: '18th' }); // Sep 18th | ||
| ``` | ||
| If you prefer, you can use the `I18n.toTime` and `I18n.strftime` functions to format dates. | ||
| ```javascript | ||
| var date = new Date(); | ||
| I18n.toTime("date.formats.short", "2009-09-18"); | ||
| I18n.toTime("date.formats.short", date); | ||
| I18n.strftime(date, "%d/%m/%Y"); | ||
| ``` | ||
| The accepted formats for `I18n.strftime` are: | ||
| %a - The abbreviated weekday name (Sun) | ||
| %A - The full weekday name (Sunday) | ||
| %b - The abbreviated month name (Jan) | ||
| %B - The full month name (January) | ||
| %c - The preferred local date and time representation | ||
| %d - Day of the month (01..31) | ||
| %-d - Day of the month (1..31) | ||
| %H - Hour of the day, 24-hour clock (00..23) | ||
| %-H/%k - Hour of the day, 24-hour clock (0..23) | ||
| %I - Hour of the day, 12-hour clock (01..12) | ||
| %-I/%l - Hour of the day, 12-hour clock (1..12) | ||
| %m - Month of the year (01..12) | ||
| %-m - Month of the year (1..12) | ||
| %M - Minute of the hour (00..59) | ||
| %-M - Minute of the hour (0..59) | ||
| %p - Meridian indicator (AM or PM) | ||
| %P - Meridian indicator (am or pm) | ||
| %S - Second of the minute (00..60) | ||
| %-S - Second of the minute (0..60) | ||
| %w - Day of the week (Sunday is 0, 0..6) | ||
| %y - Year without a century (00..99) | ||
| %-y - Year without a century (0..99) | ||
| %Y - Year with century | ||
| %z/%Z - Timezone offset (+0545) | ||
| Check out `spec/*.spec.js` files for more examples! | ||
| #### Using pluralization and number formatting together | ||
| Sometimes you might want to display translation with formatted number, like adding thousand delimiters to displayed number | ||
| You can do this: | ||
| ```json | ||
| { | ||
| "en": { | ||
| "point": { | ||
| "one": "1 Point", | ||
| "other": "{{formatted_number}} Points", | ||
| "zero": "0 Points" | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
| ```js | ||
| var point_in_number = 1000; | ||
| I18n.t('point', { count: point_in_number, formatted_number: I18n.toNumber(point_in_number) }); | ||
| ``` | ||
| Output should be `1,000 points` | ||
| // yyyy-mm-dd | ||
| i18n.l("date.formats.short", "2009-09-18"); | ||
| // yyyy-mm-dd hh:mm:ss | ||
| i18n.l("time.formats.short", "2009-09-18 23:12:43"); | ||
| ## Using multiple exported translation files on a page. | ||
| This method is useful for very large apps where a single contained translations.js file is not desirable. Examples would be a global translations file and a more specific route translation file. | ||
| // JSON format with local Timezone (part of ISO-8601) | ||
| i18n.l("time.formats.short", "2009-11-09T18:10:34"); | ||
| ### Rails without asset pipeline | ||
| 1. Setup your `config/i18n-js.yml` to have multiple files and try to minimize any overlap. | ||
| // JSON format in UTC (part of ISO-8601) | ||
| i18n.l("time.formats.short", "2009-11-09T18:10:34Z"); | ||
| ```yaml | ||
| sort_translation_keys: true | ||
| fallbacks: false | ||
| // Epoch time | ||
| i18n.l("date.formats.short", 1251862029000); | ||
| translations: | ||
| + file: "app/assets/javascript/nls/welcome.js" | ||
| only: | ||
| + '*.welcome.*' | ||
| // mm/dd/yyyy | ||
| i18n.l("date.formats.short", "09/18/2009"); | ||
| + file: "app/assets/javascript/nls/albums.js" | ||
| only: | ||
| + '*.albums.*' | ||
| + file: "app/assets/javascript/nls/global.js" | ||
| only: | ||
| + '*' | ||
| # Exempt any routes specific translations from being | ||
| # included in the global translation file | ||
| except: | ||
| + '*.welcome.*' | ||
| + '*.albums.*' | ||
| ``` | ||
| When `rake i18n:js:export` is executed it will create 3 translations files that can be loaded via the `javascript_include_tag` | ||
| 2. Add the `javascript_include_tag` to your layout and to any route specific files that will require it. | ||
| ```ruby | ||
| # views/layouts/application.html.erb | ||
| <%= javascript_include_tag( | ||
| "i18n" | ||
| "nls/global" | ||
| ) %> | ||
| ``` | ||
| and in the route specific | ||
| ```ruby | ||
| # views/welcome/index.html.erb | ||
| <%= javascript_include_tag( | ||
| "nls/welcome" | ||
| ) %> | ||
| ``` | ||
| 3. Make sure that you add these files to your `config/application.rb` | ||
| ```ruby | ||
| config.assets.precompile += %w( | ||
| i18n | ||
| nls/* | ||
| ) | ||
| ``` | ||
| ### Using require.js / r.js | ||
| To use this with require.js we are only going to change a few things from above. | ||
| 1. In your `config/i18n-js.yml` we need to add a better location for the i18n to be exported to. You want to use this location so that it can be properly precompiled by r.js. | ||
| ```yaml | ||
| export_i18n_js: "app/assets/javascript/nls" | ||
| ``` | ||
| 2. In your `config/require.yml` we need to add a map, shim all the translations, and include them into the appropriate modules | ||
| ```yaml | ||
| # In your maps add (if you do not have this you will need to add it) | ||
| map: | ||
| '*': | ||
| i18n: 'nls/i18n' | ||
| # In your shims | ||
| shims: | ||
| nls/welcome: | ||
| deps: | ||
| + i18n | ||
| nls/global: | ||
| deps: | ||
| + i18n | ||
| # Finally in your modules | ||
| modules: | ||
| + name: 'application' | ||
| include: | ||
| + i18n | ||
| + 'nls/global' | ||
| + name: 'welcome' | ||
| exclude: | ||
| + application | ||
| include: | ||
| + 'nls/welcome' | ||
| ``` | ||
| 3. When `rake assets:precompile` is executed it will optimize the translations into the correct modules so they are loaded with their assigned module, and loading them with requirejs is as simple as requiring any other shim. | ||
| ```javascript | ||
| define(['welcome/other_asset','nls/welcome'], function (otherAsset){ | ||
| // ... | ||
| }); | ||
| ``` | ||
| 4. (optional) As an additional configuration we can make a task to be run before the requirejs optimizer. This will allow any automated scripts that run the requirejs optimizer to export the strings before we run r.js. | ||
| ```rake | ||
| # lib/tasks/i18n.rake | ||
| Rake::Task[:'i18n:js:export'].prerequisites.clear | ||
| task :'i18n:js:export' => :'i18n:js:before_export' | ||
| task :'requirejs:precompile:external' => :'i18n:js:export' | ||
| namespace :i18n do | ||
| namespace :js do | ||
| task :before_export => :'assets:environment' do | ||
| I18n.load_path += Dir[Rails.root.join('config', 'locales', '*.{yml,rb}')] | ||
| I18n.backend.load_translations | ||
| end | ||
| end | ||
| end | ||
| ``` | ||
| ## Using I18n.js with other languages (Python, PHP, ...) | ||
| The JavaScript library is language agnostic; so you can use it with PHP, Python, [your favorite language here]. | ||
| The only requirement is that you need to set the `translations` attribute like following: | ||
| ```javascript | ||
| I18n.translations = {}; | ||
| I18n.translations["en"] = { | ||
| message: "Some special message for you" | ||
| } | ||
| I18n.translations["pt-BR"] = { | ||
| message: "Uma mensagem especial para você" | ||
| } | ||
| // Date object | ||
| i18n.l("date.formats.short", new Date()); | ||
| ``` | ||
| You can also add placeholders to the date format: | ||
| ## Known Issues | ||
| ```js | ||
| const i18n = new I18n({ | ||
| date: { | ||
| formats: { | ||
| ordinal_day: "%B %{day}", | ||
| }, | ||
| }, | ||
| }); | ||
| ### Missing translations in precompiled file(s) after adding any new locale file | ||
| Due to the design of `sprockets`: | ||
| - `depend_on` only takes file paths, not directory paths | ||
| - registered `preprocessors` are only run when the fingerprint of any asset file, including `.erb` files, is changed | ||
| This means that new locale files will not be detected, and so they will not trigger a i18n-js refresh. There are a few approaches to work around this: | ||
| 1. You can force i18n-js to update its translations by completely clearing the assets cache. Use one of the following: | ||
| ```bash | ||
| $ rake assets:clobber | ||
| # Or, with older versions of Rails: | ||
| $ rake tmp:cache:clear | ||
| i18n.l("date.formats.ordinal_day", "2009-09-18", { day: "18th" }); // Sep 18th | ||
| ``` | ||
| These commands will remove *all* fingerprinted assets, and you will have to recompile them with | ||
| If you prefer, you can use the `I18n#toTime` and `I18n#strftime` functions | ||
| directly to format dates. | ||
| ```bash | ||
| $ rake assets:precompile | ||
| ```js | ||
| var date = new Date(); | ||
| i18n.toTime("date.formats.short", "2009-09-18"); | ||
| i18n.toTime("date.formats.short", date); | ||
| i18n.strftime(date, "%d/%m/%Y"); | ||
| ``` | ||
| or similar commands. If you are precompiling assets on the target machine(s), cached pages may be broken by this, so they will need to be refreshed. | ||
| The accepted formats for `i18n.strftime` are: | ||
| 2. You can change something in a different locale file. | ||
| 3. Finally, you can change `config.assets.version`. | ||
| **Note:** See issue [#213](https://github.com/fnando/i18n-js/issues/213) for more details and discussion of this issue. | ||
| ### Translations in JS are not updated when Sprockets not loaded before this gem | ||
| The "rails engine" declaration will try to detect existence of "sprockets" before adding the initailizer | ||
| If sprockets is loaded after this gem, the preprocessor for | ||
| making JS translations file cache to depend on content of locale files will not be hooked. | ||
| So ensure sprockets is loaded before this gem by moving the entry of sprockets in the Gemfile or adding "require" statements for sprockets somewhere. | ||
| **Note:** See issue [#404](https://github.com/fnando/i18n-js/issues/404) for more details and discussion of this issue. | ||
| ### JS `I18n.toCurrency` & `I18n.toNumber` cannot handle large integers | ||
| The above methods use `toFixed` and it only supports 53 bit integers. | ||
| Ref: http://2ality.com/2012/07/large-integers.html | ||
| Feel free to find & discuss possible solution(s) at issue [#511](https://github.com/fnando/i18n-js/issues/511) | ||
| ### Only works with `Simple` backend | ||
| If you set `I18n.backend` to something other than the default `Simple` backend, you will likely get an exception like this: | ||
| ``` | ||
| Undefined method 'initialized?' for <your backend class> | ||
| %a - The abbreviated weekday name (Sun) | ||
| %A - The full weekday name (Sunday) | ||
| %b - The abbreviated month name (Jan) | ||
| %B - The full month name (January) | ||
| %c - The preferred local date and time representation | ||
| %d - Day of the month (01..31) | ||
| %-d - Day of the month (1..31) | ||
| %H - Hour of the day, 24-hour clock (00..23) | ||
| %-H - Hour of the day, 24-hour clock (0..23) | ||
| %k - Hour of the day, 24-hour clock (0..23) | ||
| %I - Hour of the day, 12-hour clock (01..12) | ||
| %-I - Hour of the day, 12-hour clock (1..12) | ||
| %l - Hour of the day, 12-hour clock (1..12) | ||
| %m - Month of the year (01..12) | ||
| %-m - Month of the year (1..12) | ||
| %M - Minute of the hour (00..59) | ||
| %-M - Minute of the hour (0..59) | ||
| %p - Meridian indicator (AM or PM) | ||
| %P - Meridian indicator (am or pm) | ||
| %S - Second of the minute (00..60) | ||
| %-S - Second of the minute (0..60) | ||
| %w - Day of the week (Sunday is 0, 0..6) | ||
| %y - Year without a century (00..99) | ||
| %-y - Year without a century (0..99) | ||
| %Y - Year with century | ||
| %z - Timezone offset (+0545) | ||
| %Z - Timezone offset (+0545) | ||
| ``` | ||
| For now, i18n-js is only compatible with the `Simple` backend. | ||
| If you need a more sophisticated backend for your rails application, like `I18n::Backend::ActiveRecord`, you can setup i18n-js to get translations from a separate `Simple` backend, by adding the following in an initializer: | ||
| Check out | ||
| [\_\_tests\_\_/strftime.test.ts](https://github.com/fnando/i18n/blob/main/__tests__/strftime.test.ts) | ||
| file for more examples! | ||
| ```ruby | ||
| I18n::JS.backend = I18n.backend | ||
| I18n.backend = I18n::Backend::Chain.new(<your other backend(s)>, I18n.backend) | ||
| ``` | ||
| Finally, you can also diplay relative time strings using `I18n#timeAgoInWords`. | ||
| This will use your backend with the default `Simple` backend as fallback, while i18n-js only sees and uses the simple backend. | ||
| This means however, that only translations from your static locale files will be present in JavaScript. | ||
| ```js | ||
| const to = new Date(); | ||
| const from = to.getTime() - 60 * 60 * 1000; // ~1h ago. | ||
| If you do cannot use a `Chain`-Backend for some reason, you can also set | ||
| ```ruby | ||
| I18n::JS.backend = I18n::Backend::Simple.new | ||
| I18n.backend = <something different> | ||
| i18n.timeAgoInWords(from, to); | ||
| //=> about 1 hour | ||
| ``` | ||
| However, the automatic reloading of translations in developement will not work in this case. | ||
| This is because Rails calls `I18n.reload!` for each request in development, but `reload!` will not be called on `I18n::JS.backend`, since it is a different object. | ||
| One option would be to patch `I18n.reload!` in an initializer: | ||
| #### Using pluralization and number formatting together | ||
| ```ruby | ||
| module I18n | ||
| def self.reload! | ||
| I18n::JS.backend.reload! | ||
| super | ||
| end | ||
| end | ||
| ``` | ||
| Sometimes you might want to display translation with formatted number, like | ||
| adding thousand delimiters to displayed number You can do this: | ||
| See issue [#428](https://github.com/fnando/i18n-js/issues/428) for more details and discussion of this issue. | ||
| ```js | ||
| const i18n = new I18n({ | ||
| en: { | ||
| points: { | ||
| one: "1 Point", | ||
| other: "{{points}} Points", | ||
| }, | ||
| }, | ||
| }); | ||
| ## Maintainer | ||
| const points = 1234; | ||
| - Nando Vieira - <http://nandovieira.com.br> | ||
| i18n.t("points", { | ||
| count: points, | ||
| points: i18n.toNumber(points), | ||
| }); | ||
| ``` | ||
| ## Contributing | ||
| Output should be `1,234 points`. | ||
| Once you've made your great commits: | ||
| ### Other helpers | ||
| 1. [Fork](http://help.github.com/forking/) I18n.js | ||
| 2. Create a branch with a clear name | ||
| 3. Make your changes (Please also add/change spec, README and CHANGELOG if applicable) | ||
| 4. Push changes to the created branch | ||
| 5. [Create an Pull Request](http://github.com/fnando/i18n-js/pulls) | ||
| 6. That's it! | ||
| #### `I18n#toSentence(list, options)` | ||
| Please respect the indentation rules and code style. | ||
| And use 2 spaces, not tabs. And don't touch the versioning thing. | ||
| ```js | ||
| i18n.toSentence(["apple", "banana", "pineapple"]); | ||
| //=> apple, banana, and pineapple. | ||
| ``` | ||
| ## Running tests | ||
| You can run I18n tests using Node.js or your browser. | ||
| To use Node.js, install the `jasmine-node` library: | ||
| $ npm install jasmine-node | ||
| Then execute the following command from the lib's root directory: | ||
| $ npm test | ||
| To run using your browser, just open the `spec/js/specs.html` file. | ||
| You can run both Ruby and JavaScript specs with `rake spec`. | ||
| ## License | ||
@@ -955,19 +511,17 @@ | ||
| Permission is hereby granted, free of charge, to any person obtaining | ||
| a copy of this software and associated documentation files (the | ||
| 'Software'), to deal in the Software without restriction, including | ||
| without limitation the rights to use, copy, modify, merge, publish, | ||
| distribute, sublicense, and/or sell copies of the Software, and to | ||
| permit persons to whom the Software is furnished to do so, subject to | ||
| the following conditions: | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy of | ||
| this software and associated documentation files (the 'Software'), to deal in | ||
| the Software without restriction, including without limitation the rights to | ||
| use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of | ||
| the Software, and to permit persons to whom the Software is furnished to do so, | ||
| subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be | ||
| included in all copies or substantial portions of the Software. | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, | ||
| EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF | ||
| MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. | ||
| IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY | ||
| CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, | ||
| TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE | ||
| SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. | ||
| THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS | ||
| FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR | ||
| COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER | ||
| IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN | ||
| CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Wildcard dependency
QualityPackage has a dependency with a floating version range. This can cause issues if the dependency publishes a new major version.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
No bug tracker
MaintenancePackage does not have a linked bug tracker in package.json.
Found 1 instance in 1 package
No repository
Supply chain riskPackage does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Unidentified License
License(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1081.31%
972238
- Number of package files
- increased by2425%
101
- Lines of code
- increased by120.87%
2085
Worsened metrics
- Dependency count
- increased byInfinity%
1
- Dev dependency count
- increased by1600%
17
- Number of low license alerts
- increased byInfinity%
1
- License quality
- decreased by-20%
80
- Number of low maintenance alerts
- increased byInfinity%
1
- Number of low quality alerts
- increased byInfinity%
2
- Number of medium quality alerts
- increased byInfinity%
1
- Number of lines in readme file
- decreased by-45.98%
524
- Number of low supply chain risk alerts
- increased byInfinity%
1
- Number of medium supply chain risk alerts
- increased byInfinity%
2
Dependency changes
+ Addedlodash@*
+ Addedlodash@4.17.21(transitive)