Bazinga Js Translation Bundle

https://github.com/willdurand/bazingajstranslationbundle
Admin
Bazinga Js Translation Bundle is a Symfony bundle that exposes translation messages to JavaScript...
Tokens:9,414
Snippets:114
Trust Score:9.5
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Reference Configuration Example

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

A consolidated example of common configuration settings for the BazingaJsTranslationBundle.

```yaml
# app/config/config*.yml
bazinga_js_translation:
    locale_fallback:      en
    default_domain:       messages
```

--------------------------------

### Install NPM Package

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Install the JavaScript translator library for module bundlers.

```bash
# Install the NPM package
npm install bazinga-translator --save
```

--------------------------------

### Install and Register Bundle

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Commands and configuration to install the bundle via Composer and register it in the Symfony kernel.

```bash
composer require "willdurand/js-translation-bundle"
```

```php
<?php
// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Bazinga\Bundle\JsTranslationBundle\BazingaJsTranslationBundle(),
    );
}
```

--------------------------------

### Install via NPM

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Optional installation of the translator package via NPM for module-based projects.

```bash
npm install bazinga-translator --save
```

--------------------------------

### Install Bundle via Composer

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Use Composer to add the bundle to your Symfony project.

```bash
# Install the bundle via Composer
composer require "willdurand/js-translation-bundle"
```

--------------------------------

### Load Intl-MessageFormat Library

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Include the `intl-messageformat` library globally via CDN or install it using NPM for advanced ICU MessageFormat support.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-messageformat/9.0.2/intl-messageformat.min.js" integrity="sha512-uGIOqaLIi8I30qAnPLfrEnecDDi08AcCrg7gzGp/XrDafLJl/NIilHwAm1Wl2FLiTSf10D5vM70108k3oMjK5Q==" crossorigin="anonymous"></script>
<script src="{{ url('bazinga_jstranslation_js') }}"></script>
```

--------------------------------

### Translate a String with JS Translator

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use the `Translator.trans()` method to get a translated string. Provide the translation key, an empty object for parameters, and optionally the domain name.

```javascript
Translator.trans('key', {}, 'DOMAIN_NAME');
// the translated message or undefined
```

--------------------------------

### Update JavaScript Translator Methods

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Replace deprecated get() methods with the new trans() and transChoice() methods.

```javascript
// before
Translator.get('foo')
Translator.get('apples', {"count" : 0}, 0);

// after
Translator.trans('foo')
Translator.transChoice('apples', 0, {"count" : 0});
```

--------------------------------

### Get Current Locale in JavaScript

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Access the `Translator.locale` attribute to retrieve the current locale setting of the translator.

```javascript
Translator.locale;
// will return the current locale.
```

--------------------------------

### Publish Assets

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Command to publish the bundle assets.

```bash
php bin/console assets:install --symlink
```

--------------------------------

### Basic Translation with trans()

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Use the trans() method to retrieve translated strings. Placeholders are defined using the %key% syntax by default.

```yaml
# translations/messages.en.yaml
hello.world: "Hello World!"
hello.name: "Hello %name%!"
greeting.formal: "Good morning, %title% %lastname%."
```

```javascript
// Set the locale
Translator.locale = 'en';

// Basic translation
Translator.trans('hello.world');
// Returns: "Hello World!"

// Translation with placeholders
Translator.trans('hello.name', { name: 'John' });
// Returns: "Hello John!"

// Multiple placeholders
Translator.trans('greeting.formal', { title: 'Mr.', lastname: 'Smith' });
// Returns: "Good morning, Mr. Smith."

// Specify domain explicitly
Translator.trans('hello.world', {}, 'messages');
// Returns: "Hello World!"

// Specify domain and locale
Translator.trans('hello.world', {}, 'messages', 'en');
// Returns: "Hello World!"

// Unknown key returns the key itself
Translator.trans('unknown.key');
// Returns: "unknown.key"
```

--------------------------------

### Dump Translations to Static Files

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Use the console command to dump all translations to static files for production deployment. Specify the output directory and desired formats (JSON, JS).

```bash
# Dump to default location (public/js/)
php bin/console bazinga:js-translation:dump
```

```bash
# Dump to custom directory
php bin/console bazinga:js-translation:dump web/assets/translations
```

```bash
# Dump only JSON format
php bin/console bazinga:js-translation:dump --format=json
```

```bash
# Dump only JS format
php bin/console bazinga:js-translation:dump --format=js
```

```bash
# Dump both formats (default)
php bin/console bazinga:js-translation:dump --format=js --format=json
```

```bash
# Merge all domains into single file per locale
php bin/console bazinga:js-translation:dump --merge-domains
```

```bash
# Custom URL pattern for generated files
php bin/console bazinga:js-translation:dump --pattern="/i18n/{domain}.{_format}"
```

--------------------------------

### Configure Bundle Settings

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Define locale fallbacks, domains, and cache settings in your Symfony configuration.

```yaml
# config/packages/bazinga_js_translation.yaml
bazinga_js_translation:
    locale_fallback: en              # Fallback locale for missing translations
    default_domain: messages         # Default translation domain
    http_cache_time: 86400           # HTTP cache duration in seconds (24 hours)
    active_locales:                  # Limit to specific locales
        - en
        - fr
        - de
    active_domains:                  # Limit to specific domains
        - messages
        - validators
```

--------------------------------

### Loading Configuration from JSON

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Load translator configuration, including locale, fallback, and all translations, from a JSON object or string.

```APIDOC
## Loading Configuration from JSON

Load complete translator configuration including locale, fallback, and all translations from a JSON object.

### Request Body Example (JSON Object)
```json
{
    "locale": "fr",
    "fallback": "en",
    "defaultDomain": "messages",
    "translations": {
        "fr": {
            "messages": {
                "hello": "Bonjour",
                "goodbye": "Au revoir"
            },
            "validators": {
                "required": "Ce champ est obligatoire"
            }
        },
        "en": {
            "messages": {
                "hello": "Hello",
                "goodbye": "Goodbye"
            }
        }
    }
}
```

### Usage
```javascript
// Load from object
Translator.fromJSON(translationData);

// Load from JSON string
Translator.fromJSON(JSON.stringify(translationData));

// Translations are now available
Translator.trans('hello');           // Returns: "Bonjour"
Translator.trans('hello', {}, 'messages', 'en');  // Returns: "Hello"
```
```

--------------------------------

### Configure Routing

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Optional routing configuration for the bundle.

```yaml
# app/config/routing.yml
_bazinga_jstranslation:
    resource: "@BazingaJsTranslationBundle/Resources/config/routing/routing.yml"
```

--------------------------------

### Configure Routing

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Import the bundle's routing configuration to enable the translation endpoint.

```yaml
# config/routes/bazinga_js_translation.yaml
_bazinga_jstranslation:
    resource: "@BazingaJsTranslationBundle/Resources/config/routing/routing.yml"
```

--------------------------------

### Load Static Translation Files in HTML

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

After running the dump command, load the generated static translation files in your HTML. Ensure the translator script and configuration are loaded before the translation files.

```html
<!-- After running dump command, load static files -->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
    <!-- Load configuration first -->
    <script src="{{ asset('js/translations/config.js') }}"></script>
    <!-- Then load translation files -->
    <script src="{{ asset('js/translations/messages/en.js') }}"></script>
    <script src="{{ asset('js/translations/messages/fr.js') }}"></script>
    <script src="{{ asset('js/translations/validators/en.js') }}"></script>
</head>
</html>
```

--------------------------------

### Register Bundle in Kernel

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Register the bundle in your Symfony configuration file.

```php
<?php
// config/bundles.php (Symfony 4+) or app/AppKernel.php (Symfony 3)
return [
    // ...
    Bazinga\Bundle\JsTranslationBundle\BazingaJsTranslationBundle::class => ['all' => true],
];
```

--------------------------------

### Import Translator Module

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Import the translator library using ES2015 or CommonJS syntax.

```javascript
// ES2015 module import
import Translator from 'bazinga-translator';

// ES5 CommonJS require
var Translator = require('bazinga-translator');
```

--------------------------------

### Dump Translations Command

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Use the console command to dump all translations to static files for production deployment.

```APIDOC
## Dump Translations to Static Files

Use the console command to dump all translations to static files for production deployment, eliminating the need for dynamic controller requests.

### Command Usage
```bash
# Dump to default location (public/js/)
php bin/console bazinga:js-translation:dump

# Dump to custom directory
php bin/console bazinga:js-translation:dump web/assets/translations

# Dump only JSON format
php bin/console bazinga:js-translation:dump --format=json

# Dump only JS format
php bin/console bazinga:js-translation:dump --format=js

# Dump both formats (default)
php bin/console bazinga:js-translation:dump --format=js --format=json

# Merge all domains into single file per locale
php bin/console bazinga:js-translation:dump --merge-domains

# Custom URL pattern for generated files
php bin/console bazinga:js-translation:dump --pattern="/i18n/{domain}.{_format}"
```

### Loading Static Files (HTML Example)
```html
<!-- After running dump command, load static files -->
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
    <!-- Load configuration first -->
    <script src="{{ asset('js/translations/config.js') }}"></script>
    <!-- Then load translation files -->
    <script src="{{ asset('js/translations/messages/en.js') }}"></script>
    <script src="{{ asset('js/translations/messages/fr.js') }}"></script>
    <script src="{{ asset('js/translations/validators/en.js') }}"></script>
</head>
</html>
```

### Using with Assetic (Twig Example)
```twig
{% javascripts
    'bundles/bazingajstranslation/js/translator.min.js'
    'js/translations/config.js'
    'js/translations/*/*.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

{# Load only specific domains #}
{% javascripts
    'bundles/bazingajstranslation/js/translator.min.js'
    'js/translations/config.js'
    'js/translations/messages/*.js'
    'js/translations/admin/*.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
```
```

--------------------------------

### Update Asset Paths

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Update script tags to point to the new bundle asset paths.

```html
// before
<script type="text/javascript" src="{{ asset('bundles/bazingaexposetranslation/js/translator.min.js') }}"></script>

// after
<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
```

--------------------------------

### Import Translator as Module

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Import the translator object using ES2015 or ES5 syntax.

```javascript
// ES2015
import Translator from 'bazinga-translator';
```

```javascript
// ES5
var Translator = require('bazinga-translator');
```

--------------------------------

### Set HTML Locale

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Set the lang attribute on the html tag to define the application locale.

```html
<html lang="{{ app.request.locale|split('_')[0] }}">
```

--------------------------------

### Dump Translation Files Command

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use this Symfony console command to dump translation files. Options allow specifying target directory, output format (js or json), URL pattern, and merging domains.

```bash
php bin/console bazinga:js-translation:dump [target] [--format=js|json] [--pattern=/translations/{domain}.{_format}] [--merge-domains]
```

--------------------------------

### Specify Active Domains

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Define an array of domains that should be considered active and dumped. By default, all domains are dumped.

```yaml
bazinga_js_translation:
    active_domains:
        - messages
```

--------------------------------

### Load Translator Globally

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Include the translator script globally in your template.

```html
<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
```

--------------------------------

### Load Translator Configuration from JSON

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Load translator configuration, including locale, fallback, and all translations, from a JavaScript object or a JSON string. Ensure the Translator object is available before calling this method.

```javascript
var translationData = {
    "locale": "fr",
    "fallback": "en",
    "defaultDomain": "messages",
    "translations": {
        "fr": {
            "messages": {
                "hello": "Bonjour",
                "goodbye": "Au revoir"
            },
            "validators": {
                "required": "Ce champ est obligatoire"
            }
        },
        "en": {
            "messages": {
                "hello": "Hello",
                "goodbye": "Goodbye"
            }
        }
    }
};

// Load from object
Translator.fromJSON(translationData);

// Load from JSON string
Translator.fromJSON(JSON.stringify(translationData));

// Translations are now available
Translator.trans('hello');           // Returns: "Bonjour"
Translator.trans('hello', {}, 'messages', 'en');  // Returns: "Hello"
```

--------------------------------

### Update Bundle Registration

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Update the bundle registration in your AppKernel to reflect the new namespace and class name.

```php
// before
new \Bazinga\ExposeTranslationBundle\BazingaExposeTranslationBundle()

// after
new \Bazinga\Bundle\JsTranslationBundle\BazingaJsTranslationBundle()
```

--------------------------------

### Translate Strings with Domain and Placeholders

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Translate strings using `Translator.trans`, specifying the translation key, parameters, and the translation domain. If no domain is specified, it defaults to 'messages'.

```javascript
Translator.trans('foo');
// will return 'Bar'

Translator.trans('foo', {}, 'Hello');
// will return 'Bar'

Translator.trans('ba.bar');
// will return 'Hello world'

Translator.trans('ba.bar', {}, 'Hello');
// will return 'Hello world'

Translator.trans('placeholder', {} , 'messages');
// will return 'Hello %username%, how are you?'

Translator.trans('placeholder', {} , 'Hello');
// will return 'Hello %username%!'

Translator.trans('placeholder', { "username" : "will" }, 'messages');
// will return 'Hello will, how are you?'

Translator.trans('placeholder', { "username" : "will" }, 'Hello');
// will return 'Hello will!'

Translator.trans('placeholder', { "username" : "will" });
// will return 'Hello will!' as the `Hello` messages have been loaded before the `messages` ones
```

--------------------------------

### HTTP Endpoint for Dynamic Translations

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

The bundle exposes an HTTP endpoint for dynamically fetching translations in JS or JSON format. You can specify the domain and locales.

```http
# Route: bazinga_jstranslation_js
# Path: /translations/{domain}.{_format}
# Methods: GET
# Formats: js, json

# Examples:
GET /translations/messages.js              # Default messages domain as JavaScript
GET /translations/messages.json            # Default messages domain as JSON
GET /translations/validators.js            # Validators domain as JavaScript
GET /translations/messages.js?locales=fr   # French locale only
GET /translations/messages.js?locales=fr,en,de  # Multiple locales
```

--------------------------------

### Load Translations by Multiple Locales

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Specify multiple locales separated by commas to load translations for all listed languages. This targets files like DOMAIN_NAME.(fr|en).*.

```html
<script src="{{ url('bazinga_jstranslation_js', { 'domain': 'DOMAIN_NAME', 'locales': 'fr,en' }) }}"></script>
```

--------------------------------

### Load Translations via Script Tags

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Include translations dynamically in your HTML templates using script tags.

```html
<!DOCTYPE html>
<html lang="{{ app.request.locale|split('_')[0] }}">
<head>
    <!-- Load the Translator library -->
    <script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
</head>
<body>
    <!-- Load default messages domain for current locale -->
    <script src="{{ url('bazinga_jstranslation_js') }}"></script>

    <!-- Load specific domain -->
    <script src="{{ url('bazinga_jstranslation_js', { 'domain': 'validators' }) }}"></script>

    <!-- Load specific locale(s) -->
    <script src="{{ url('bazinga_jstranslation_js', { 'domain': 'messages', 'locales': 'fr' }) }}"></script>

    <!-- Load multiple locales at once -->
    <script src="{{ url('bazinga_jstranslation_js', { 'domain': 'messages', 'locales': 'fr,en,de' }) }}"></script>
</body>
</html>
```

--------------------------------

### Configuring the Translator Object

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Customize translator behavior such as locale, fallback, domains, and placeholder delimiters.

```javascript
// Set the current locale
Translator.locale = 'fr';

// Set the fallback locale for missing translations
Translator.fallback = 'en';

// Set the default domain (used when domain is not specified)
Translator.defaultDomain = 'messages';

// Customize placeholder delimiters (default is %...%)
Translator.placeHolderPrefix = '{';
Translator.placeHolderSuffix = '}';
// Now placeholders use {name} format instead of %name%

// Change the plural separator (default is |)
Translator.pluralSeparator = '|';

// Get the current locale
console.log(Translator.locale);
// Returns: "fr" (or value from html lang attribute)

// Reset the translator to initial state
Translator.reset();
// Clears all messages and resets locale to html lang attribute value
```

--------------------------------

### Update Route Pattern

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

The route pattern for translation files has changed.

```text
// before
/i18n/DOMAIN/LOCALE.js

// after
/translations/DOMAIN.js
```

--------------------------------

### HTTP Translation Endpoint

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

The bundle exposes an HTTP endpoint for dynamically fetching translations in JS or JSON format.

```APIDOC
## Translation Endpoint Routes

The bundle exposes an HTTP endpoint for dynamically fetching translations in JS or JSON format.

### Route Details
- **Route**: `bazinga_jstranslation_js`
- **Path**: `/translations/{domain}.{_format}`
- **Methods**: `GET`
- **Formats**: `js`, `json`

### Examples
```http
# Default messages domain as JavaScript
GET /translations/messages.js

# Default messages domain as JSON
GET /translations/messages.json

# Validators domain as JavaScript
GET /translations/validators.js

# French locale only
GET /translations/messages.js?locales=fr

# Multiple locales
GET /translations/messages.js?locales=fr,en,de
```

### Response Example (JSON)
```json
{
    "fallback": "en",
    "defaultDomain": "messages",
    "translations": {
        "en": {
            "messages": {
                "hello": "Hello",
                "goodbye": "Goodbye"
            }
        },
        "fr": {
            "messages": {
                "hello": "Bonjour",
                "goodbye": "Au revoir"
            }
        }
    }
}
```
```

--------------------------------

### Load Translations by Domain

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Include this script tag to load translations for a specific domain. It uses the current locale by default.

```html
<script src="{{ url('bazinga_jstranslation_js', { 'domain': 'DOMAIN_NAME' }) }}"></script>
```

--------------------------------

### Load Translations by Specific Locale

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use the 'locales' query parameter to load translations for a single, specific language. This targets files like DOMAIN_NAME.MY_LOCALE.*.

```html
<script src="{{ url('bazinga_jstranslation_js', { 'domain': 'DOMAIN_NAME', 'locales': 'MY_LOCALE' }) }}"></script>
```

--------------------------------

### Update Domain Handling

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Pass the domain as an argument to trans() instead of prefixing the message ID.

```javascript
// before
Translator.get('HELLO:foo')

// after
Translator.trans('foo', {}, 'HELLO')
```

--------------------------------

### Update Configuration Root

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Update the configuration root name in your application configuration files.

```yaml
# app/config/config*.yml

# before
bazinga_expose_translation: ~

# after
bazinga_js_translation: ~
```

--------------------------------

### Configure Locale Fallback

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Set a fallback locale to use when translations are incomplete. It's recommended to match the translator's fallback locale.

```yaml
bazinga_js_translation:
    locale_fallback: en
```

--------------------------------

### Update Translation File Loading

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Update the script tags used to load translation files.

```html
// before
<script type="text/javascript" src="{{ url('bazinga_exposetranslation_js') }}"></script>

// after
<script src="{{ url('bazinga_jstranslation_js') }}"></script>
```

--------------------------------

### Load Translations via Script

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Load translation messages for the current locale using a script tag.

```html
<script src="{{ url('bazinga_jstranslation_js') }}"></script>
```

--------------------------------

### Assetic Configuration for Translations

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Include these javascript files using Assetic to load the translator, configuration, and all translation files. You can specify specific domain files like 'js/translations/admin/*.js'.

```twig
{% javascripts
    'bundles/bazingajstranslation/js/translator.min.js'
    'js/translations/config.js'
    'js/translations/*/*.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
```

--------------------------------

### Add Locale to HTML Tag

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Include the application locale in the HTML lang attribute.

```html
<html lang="{{ app.request.locale }}">
```

--------------------------------

### Translate with Message Placeholders

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Pass an object with key-value pairs to the second argument of `Translator.trans()` to replace placeholders (e.g., '%foo%') in the translated string.

```javascript
Translator.trans('key', { "foo" : "bar" }, 'DOMAIN_NAME');
// will replace each "%foo%" in the message by "bar".
```

--------------------------------

### Translate a Plural String with JS Translator

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use the `Translator.transChoice()` method for pluralization. Provide the key, the number for pluralization, an empty object for parameters, and optionally the domain name.

```javascript
Translator.transChoice('key', 1, {}, 'DOMAIN_NAME');
// the translated message or undefined
```

--------------------------------

### ICU MessageFormat Support

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Enable advanced formatting by loading the intl-messageformat library. Use the +intl-icu suffix for translation files.

```yaml
# translations/messages+intl-icu.en.yaml (note the +intl-icu suffix)
hello_name: "Hello {name}!"
user_projects: "{name} has {projectCount, plural, =0 {no projects} one {# project} other {# projects}}"
gender_message: "{gender, select, male {He} female {She} other {They}} liked your post"
order_date: "Order placed on {orderDate, date, medium}"
```

```html
<!-- Load intl-messageformat library (required for ICU support) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-messageformat/9.0.2/intl-messageformat.min.js"></script>
<script src="{{ asset('bundles/bazingajstranslation/js/translator.min.js') }}"></script>
<script src="{{ url('bazinga_jstranslation_js') }}"></script>
```

```javascript
// ICU MessageFormat with simple placeholder
Translator.trans('hello_name', { name: 'Alice' }, 'messages');
// Returns: "Hello Alice!"

// ICU plural formatting
Translator.trans('user_projects', { name: 'John', projectCount: 0 }, 'messages');
// Returns: "John has no projects"

Translator.trans('user_projects', { name: 'John', projectCount: 1 }, 'messages');
// Returns: "John has 1 project"

Translator.trans('user_projects', { name: 'John', projectCount: 5 }, 'messages');
// Returns: "John has 5 projects"

// ICU select formatting
Translator.trans('gender_message', { gender: 'female' }, 'messages');
// Returns: "She liked your post"

Translator.trans('gender_message', { gender: 'other' }, 'messages');
// Returns: "They liked your post"
```

--------------------------------

### Fetch Translations via JSON

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Load translation data into the client-side translator using JSON endpoints.

```javascript
// Fetch translations via JSON format using fetch API
fetch('/translations/messages.json?locales=en,fr')
    .then(response => response.json())
    .then(data => {
        // Load translations from JSON into Translator
        Translator.fromJSON(data);

        // Now translations are available
        console.log(Translator.trans('welcome.message'));
    });

// Using jQuery
$.getJSON('/translations/messages.json?locales=en', function(data) {
    Translator.fromJSON(data);
});
```

--------------------------------

### Translate Choice with Message Placeholders

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Pass an object with key-value pairs to the third argument of `Translator.transChoice()` to replace placeholders (e.g., '%foo%') in the translated string.

```javascript
Translator.transChoice('key', 123, { "foo" : "bar" }, 'DOMAIN_NAME');
// will replace each "%foo%" in the message by "bar".
```

--------------------------------

### Load Translations via JSON Format

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Append '_format': 'json' to the URL to retrieve translations in JSON format. This JSON string can then be loaded into the Translator using `Translator.fromJSON()`.

```html
{{ url('bazinga_jstranslation_js', { '_format': 'json' }) }}
```

--------------------------------

### Specify Active Locales

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Define an array of locales that should be considered active and dumped. By default, all locales are dumped.

```yaml
bazinga_js_translation:
    active_locales:
        - fr
        - en
```

--------------------------------

### Update Routing Configuration

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Update the routing import in your application configuration to use the new bundle name.

```yaml
# app/config/routing.yml

# before
_bazinga_exposetranslation:
    resource: "@BazingaExposeTranslationBundle/Resources/config/routing/routing.yml"

# after
_bazinga_jstranslation:
    resource: "@BazingaJsTranslationBundle/Resources/config/routing/routing.yml"
```

--------------------------------

### Pluralization with transChoice()

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Handle pluralized messages using Symfony-style plural rules. The count parameter is automatically injected into placeholders.

```yaml
# translations/messages.en.yaml
apples: "{0} There are no apples|{1} There is one apple|]1,19] There are %count% apples|[20,Inf] There are many apples"
items.cart: "You have %count% item in your cart|You have %count% items in your cart"
```

```javascript
Translator.locale = 'en';

// Explicit plural intervals
Translator.transChoice('apples', 0, { count: 0 });
// Returns: "There are no apples"

Translator.transChoice('apples', 1, { count: 1 });
// Returns: "There is one apple"

Translator.transChoice('apples', 5, { count: 5 });
// Returns: "There are 5 apples"

Translator.transChoice('apples', 25, { count: 25 });
// Returns: "There are many apples"

// Standard indexed pluralization (uses locale rules)
Translator.transChoice('items.cart', 1, { count: 1 });
// Returns: "You have 1 item in your cart"

Translator.transChoice('items.cart', 3, { count: 3 });
// Returns: "You have 3 items in your cart"

// The count parameter is automatically added if not provided
Translator.transChoice('apples', 10);
// Returns: "There are 10 apples" (count is auto-set to 10)
```

--------------------------------

### Define Default Translation Domain

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Specify the default domain for translation messages if no domain is explicitly provided.

```yaml
bazinga_js_translation:
    default_domain:       messages
```

--------------------------------

### Translate Plural Choices in JavaScript

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use `transChoice` to translate strings with pluralization rules based on a count. Ensure the locale is set before translation.

```javascript
Translator.locale = 'en';

Translator.transChoice('apples', 0, {"count" : 0});
// will return "There is no apples"

Translator.transChoice('apples', 1, {"count" : 1});
// will return "There is one apple"

Translator.transChoice('apples', 2, {"count" : 2});
// will return "There are 2 apples"

Translator.transChoice('apples', 10, {"count" : 10});
// will return "There are 10 apples"

Translator.transChoice('apples', 19, {"count" : 19});
// will return "There are 19 apples"

Translator.transChoice('apples', 20, {"count" : 20});
// will return "There are many apples"

Translator.transChoice('apples', 100, {"count" : 100});
// will return "There are many apples"
```

--------------------------------

### Request Specific Locales

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/UPGRADE.md

Use the locales query parameter to request translations for specific locales.

```text
/translations/DOMAIN.js?locales=fr,en
```

--------------------------------

### Add Translations Manually

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Register translation entries programmatically or via Twig templates.

```javascript
// Add a single translation entry
// Translator.add(id, message, domain, locale)
Translator.add('greeting', 'Hello!', 'messages', 'en');
Translator.add('greeting', 'Bonjour!', 'messages', 'fr');
Translator.add('farewell', 'Goodbye!', 'messages', 'en');

// Add translations in Twig templates
// This allows translators to modify translations without changing JS code
```

```twig
<script>
Translator.add(
    'user.welcome',
    '{{ 'user.welcome'|trans }}',
    'messages',
    '{{ app.request.locale }}'
);
</script>
```

--------------------------------

### Integrate Dumped Translations with Assetic

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

Integrate dumped translation files with Symfony's Assetic for optimized production builds. You can load all translation files or specify specific domains.

```twig
{% javascripts
    'bundles/bazingajstranslation/js/translator.min.js'
    'js/translations/config.js'
    'js/translations/*/*.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

{# Load only specific domains #}
{% javascripts
    'bundles/bazingajstranslation/js/translator.min.js'
    'js/translations/config.js'
    'js/translations/messages/*.js'
    'js/translations/admin/*.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}
```

--------------------------------

### Manually Add Translations

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Register individual translation entries manually using the Translator object.

```twig
<script>
/**
 * Adds a translation entry.
 *
 * @param {String} id         The message id
 * @param {String} message    The message to register for the given id
 * @param {String} [domain]   The domain for the message or null to use the default
 * @param {String} [locale]   The locale or null to use the default
 * @return {Object}           Translator
 * @api public
 */
Translator.add(
    'translation_key',
    '{{ 'translation_key'|trans }}',
    'messages',
    'en'
);
</script>
```

--------------------------------

### Translate with ICU MessageFormat in JavaScript

Source: https://github.com/willdurand/bazingajstranslationbundle/blob/master/Resources/doc/index.md

Use `Translator.trans` with ICU MessageFormat syntax for advanced translations including placeholders and pluralization. Ensure translations are suffixed with `+intl-icu`.

```javascript
Translator.trans('hello_name', { name: 'John' }, 'messages');
// will return "Hello John!"


// equivalent to Translator.transChoice() with the "classic" translations format
Translator.trans('name_has_x_projects', { name: 'John', projectCount: 0 }, 'messages');
// will return "John has no projects."

Translator.trans('name_has_x_projects', { name: 'John', projectCount: 1 }, 'messages');
// will return "John has 1 project."

Translator.trans('name_has_x_projects', { name: 'John', projectCount: 4 }, 'messages');
// will return "John has 4 projects."
```

--------------------------------

### JSON Response Format for Translation Endpoint

Source: https://context7.com/willdurand/bazingajstranslationbundle/llms.txt

This is the expected JSON response format when requesting translations via the HTTP endpoint. It includes fallback locale, default domain, and translations organized by locale and domain.

```json
{
    "fallback": "en",
    "defaultDomain": "messages",
    "translations": {
        "en": {
            "messages": {
                "hello": "Hello",
                "goodbye": "Goodbye"
            }
        },
        "fr": {
            "messages": {
                "hello": "Bonjour",
                "goodbye": "Au revoir"
            }
        }
    }
}
```
Tokens:
Raw