[Translator] Remove Twig extension, compute locale fallbacks at cache warmup

Kocal · Kocal · commit 973dc28ead98 · 2023-04-15T09:00:09.000+02:00
diff --git a/src/Translator/LICENSE b/src/Translator/LICENSE
@@ -1,4 +1,4 @@
-Copyright (c) 2020-2023 Fabien Potencier
+Copyright (c) 2023-present Fabien Potencier
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/src/Translator/assets/dist/translator.d.ts b/src/Translator/assets/dist/translator.d.ts
@@ -1,14 +1,14 @@
-export declare type DomainType = string;
-export declare type LocaleType = string;
-export declare type TranslationsType = Record<DomainType, {
+export type DomainType = string;
+export type LocaleType = string;
+export type TranslationsType = Record<DomainType, {
     parameters: ParametersType;
 }>;
-export declare type NoParametersType = Record<string, never>;
-export declare type ParametersType = Record<string, string | number> | NoParametersType;
-export declare type RemoveIntlIcuSuffix<T> = T extends `${infer U}+intl-icu` ? U : T;
-export declare type DomainsOf<M> = M extends Message<infer Translations, LocaleType> ? keyof Translations : never;
-export declare type LocaleOf<M> = M extends Message<TranslationsType, infer Locale> ? Locale : never;
-export declare type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType> ? Translations[D] extends {
+export type NoParametersType = Record<string, never>;
+export type ParametersType = Record<string, string | number> | NoParametersType;
+export type RemoveIntlIcuSuffix<T> = T extends `${infer U}+intl-icu` ? U : T;
+export type DomainsOf<M> = M extends Message<infer Translations, LocaleType> ? keyof Translations : never;
+export type LocaleOf<M> = M extends Message<TranslationsType, infer Locale> ? Locale : never;
+export type ParametersOf<M, D extends DomainType> = M extends Message<infer Translations, LocaleType> ? Translations[D] extends {
     parameters: infer Parameters;
 } ? Parameters : never : never;
 export interface Message<Translations extends TranslationsType, Locale extends LocaleType> {
@@ -19,15 +19,8 @@ export interface Message<Translations extends TranslationsType, Locale extends L
         };
     };
 }
-declare global {
-    interface Window {
-        __symfony_ux_translator?: {
-            locale?: LocaleType;
-            locales_fallbacks?: Record<LocaleType, LocaleType | null>;
-        };
-        setTranslatorLocale(locale: LocaleType): void;
-    }
-}
-export declare function setLocale(locale: LocaleType): void;
+export declare function setLocale(locale: LocaleType | null): void;
 export declare function getLocale(): LocaleType;
+export declare function setLocaleFallbacks(localeFallbacks: Record<LocaleType, LocaleType>): void;
+export declare function getLocaleFallbacks(): Record<LocaleType, LocaleType>;
 export declare function trans<M extends Message<TranslationsType, LocaleType>, D extends DomainsOf<M>, P extends ParametersOf<M, D>>(...args: P extends NoParametersType ? [message: M, parameters?: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>] : [message: M, parameters: P, domain?: RemoveIntlIcuSuffix<D>, locale?: LocaleOf<M>]): string;
diff --git a/src/Translator/assets/dist/translator_controller.js b/src/Translator/assets/dist/translator_controller.js
@@ -195,16 +195,22 @@ function getPluralizationRule(number, locale) {
     }
 }
 
+let _locale = null;
+let _localeFallbacks = {};
 function setLocale(locale) {
-    window.__symfony_ux_translator = Object.assign(Object.assign({}, (window.__symfony_ux_translator || {})), { locale });
+    _locale = locale;
 }
 function getLocale() {
-    var _a;
-    return ((_a = window.__symfony_ux_translator) === null || _a === void 0 ? void 0 : _a.locale) || document.documentElement.lang || 'en';
+    return (_locale ||
+        document.documentElement.getAttribute('data-symfony-ux-translator-locale') ||
+        document.documentElement.lang ||
+        'en');
 }
-function getLocalesFallbacks() {
-    var _a;
-    return ((_a = window.__symfony_ux_translator) === null || _a === void 0 ? void 0 : _a.locales_fallbacks) || {};
+function setLocaleFallbacks(localeFallbacks) {
+    _localeFallbacks = localeFallbacks;
+}
+function getLocaleFallbacks() {
+    return _localeFallbacks;
 }
 function trans(message, parameters = {}, domain = 'messages', locale = null) {
     if (typeof domain === 'undefined') {
@@ -216,7 +222,7 @@ function trans(message, parameters = {}, domain = 'messages', locale = null) {
     if (typeof message.translations === 'undefined') {
         return message.id;
     }
-    const localesFallbacks = getLocalesFallbacks();
+    const localesFallbacks = getLocaleFallbacks();
     const translationsIntl = message.translations[`${domain}+intl-icu`];
     if (typeof translationsIntl !== 'undefined') {
         while (typeof translationsIntl[locale] === 'undefined') {
@@ -244,4 +250,4 @@ function trans(message, parameters = {}, domain = 'messages', locale = null) {
     return message.id;
 }
 
-export { getLocale, setLocale, trans };
+export { getLocale, getLocaleFallbacks, setLocale, setLocaleFallbacks, trans };
diff --git a/src/Translator/assets/package.json b/src/Translator/assets/package.json
@@ -8,6 +8,11 @@
     "peerDependencies": {
         "intl-messageformat": "^10.2.5"
     },
+    "peerDependenciesMeta": {
+        "intl-messageformat": {
+            "optional": false
+        }
+    },
     "devDependencies": {
         "intl-messageformat": "^10.2.5",
         "ts-jest": "^27.1.5"
diff --git a/src/Translator/assets/src/formatters/formatter.ts b/src/Translator/assets/src/formatters/formatter.ts
@@ -41,6 +41,8 @@ import {strtr} from '../utils';
  *
  * @see https://en.wikipedia.org/wiki/ISO_31-11
  *
+ * @private
+ *
  * @param id         The message id
  * @param parameters An array of parameters for the message
  * @param locale     The locale
@@ -233,4 +235,4 @@ function getPluralizationRule(number: number, locale: string): number {
         default:
             return 0
     }
-}
+}
diff --git a/src/Translator/assets/src/formatters/intl-formatter.ts b/src/Translator/assets/src/formatters/intl-formatter.ts
@@ -1,6 +1,8 @@
 import {IntlMessageFormat} from 'intl-messageformat';
 
 /**
+ * @private
+ *
  * @param id         The message id
  * @param parameters An array of parameters for the message
  * @param locale     The locale
diff --git a/src/Translator/assets/src/translator.ts b/src/Translator/assets/src/translator.ts
@@ -37,30 +37,28 @@ export interface Message<Translations extends TranslationsType, Locale extends L
 import { formatIntl } from './formatters/intl-formatter';
 import { format } from './formatters/formatter';
 
-declare global {
-    interface Window {
-        __symfony_ux_translator?: {
-            locale?: LocaleType;
-            locales_fallbacks?: Record<LocaleType, LocaleType | null>;
-        };
+let _locale: LocaleType | null = null;
+let _localeFallbacks: Record<LocaleType, LocaleType> = {};
 
-        setTranslatorLocale(locale: LocaleType): void;
-    }
+export function setLocale(locale: LocaleType | null) {
+    _locale = locale;
 }
 
-export function setLocale(locale: LocaleType) {
-    window.__symfony_ux_translator = {
-        ...(window.__symfony_ux_translator || {}),
-        locale,
-    };
+export function getLocale(): LocaleType {
+    return (
+        _locale ||
+        document.documentElement.getAttribute('data-symfony-ux-translator-locale') || // <html data-symfony-ux-translator-locale="en">
+        document.documentElement.lang || // <html lang="en">
+        'en'
+    );
 }
 
-export function getLocale(): LocaleType {
-    return window.__symfony_ux_translator?.locale || document.documentElement.lang || 'en';
+export function setLocaleFallbacks(localeFallbacks: Record<LocaleType, LocaleType>): void {
+    _localeFallbacks = localeFallbacks;
 }
 
-function getLocalesFallbacks(): Record<LocaleType, LocaleType | null> {
-    return window.__symfony_ux_translator?.locales_fallbacks || {};
+export function getLocaleFallbacks(): Record<LocaleType, LocaleType> {
+    return _localeFallbacks;
 }
 
 /**
@@ -135,7 +133,7 @@ export function trans<
         return message.id;
     }
 
-    const localesFallbacks = getLocalesFallbacks();
+    const localesFallbacks = getLocaleFallbacks();
 
     const translationsIntl = message.translations[`${domain}+intl-icu`];
     if (typeof translationsIntl !== 'undefined') {
diff --git a/src/Translator/assets/src/utils.ts b/src/Translator/assets/src/utils.ts
@@ -1,10 +1,13 @@
 /**
  * PHP strtr's equivalent, inspired and adapted from https://stackoverflow.com/a/37949642.
+ *
+ * @private
+ *
  * @param string The string to replace in
  * @param replacePairs The pairs of characters to replace
  */
 export function strtr(string: string, replacePairs: Record<string, string | number>): string {
-    const regex: Array<string> = Object.entries(replacePairs).map(([from, to]) => {
+    const regex: Array<string> = Object.entries(replacePairs).map(([from]) => {
         return from.replace(/([-[\]{}()*+?.\\^$|#,])/g, '\\$1');
     });
 
diff --git a/src/Translator/assets/test/translator.test.ts b/src/Translator/assets/test/translator.test.ts
@@ -1,10 +1,39 @@
-import {getLocale, Message, NoParametersType, trans} from '../src/translator';
+import {getLocale, Message, NoParametersType, setLocale, setLocaleFallbacks, trans} from '../src/translator';
 
 describe('Translator', function () {
     beforeEach(function() {
-        delete window.__symfony_ux_translator;
+        setLocale(null);
+        setLocaleFallbacks({})
+        document.documentElement.lang = '';
+        document.documentElement.removeAttribute('data-symfony-ux-translator-locale');
     })
 
+    describe('getLocale', function () {
+        test('default locale', function () {
+            // 'en' is the default locale
+            expect(getLocale()).toEqual('en');
+
+            // or the locale from <html lang="...">, if exists
+            document.documentElement.lang = 'fr';
+            expect(getLocale()).toEqual('fr');
+
+            // or the locale from <html data-symfony-ux-translator-locale="...">, if exists
+            document.documentElement.setAttribute('data-symfony-ux-translator-locale', 'it')
+            expect(getLocale()).toEqual('it');
+
+            setLocale('de');
+            expect(getLocale()).toEqual('de');
+        });
+    });
+
+    describe('setLocale', function () {
+        test('custom locale', function () {
+            setLocale('fr');
+
+            expect(getLocale()).toEqual('fr');
+        });
+    });
+
     describe('trans', function () {
         test('basic message', function () {
             const MESSAGE_BASIC: Message<{ messages: { parameters: NoParametersType } }, 'en'> = {
@@ -290,10 +319,7 @@ describe('Translator', function () {
         });
 
         test('fallback behavior', function() {
-            window.__symfony_ux_translator = {
-                locale: getLocale(),
-                locales_fallbacks: {'fr_FR':'fr','fr':'en','en':null,'en_US':'en','en_GB':'en','de_DE':'de','de':'en'}
-            };
+            setLocaleFallbacks({'fr_FR':'fr','fr':'en','en_US':'en','en_GB':'en','de_DE':'de','de':'en'});
 
             const MESSAGE: Message<{ messages: { parameters: NoParametersType } }, 'en'|'en_US'|'fr'> = {
                 id: 'message',
@@ -317,6 +343,15 @@ describe('Translator', function () {
                 }
             }
 
+            const MESSAGE_FRENCH_ONLY: Message<{ messages: { parameters: NoParametersType } }, 'fr'> = {
+                id: 'message_french_only',
+                translations: {
+                    messages: {
+                        fr: 'Un message en français uniquement',
+                    }
+                }
+            }
+
             expect(trans(MESSAGE, {}, 'messages', 'en')).toEqual('A message in english');
             expect(trans(MESSAGE_INTL, {}, 'messages', 'en')).toEqual('A intl message in english');
             expect(trans(MESSAGE, {}, 'messages', 'en_US')).toEqual('A message in english (US)');
@@ -331,6 +366,9 @@ describe('Translator', function () {
 
             expect(trans(MESSAGE, {}, 'messages', 'de_DE' as 'en')).toEqual('A message in english');
             expect(trans(MESSAGE_INTL, {}, 'messages', 'de_DE' as 'en')).toEqual('A intl message in english');
+
+            expect(trans(MESSAGE_FRENCH_ONLY, {}, 'messages', 'fr')).toEqual('Un message en français uniquement');
+            expect(trans(MESSAGE_FRENCH_ONLY, {}, 'messages', 'en' as 'fr')).toEqual('message_french_only');
         })
     });
 });
diff --git a/src/Translator/composer.json b/src/Translator/composer.json
@@ -32,13 +32,11 @@
         "symfony/console": "^5.4|^6.0",
         "symfony/filesystem": "^5.4|^6.0",
         "symfony/string": "^5.4|^6.0",
-        "symfony/translation": "^5.4|^6.0",
-        "twig/twig": "^2.0|^3.0"
+        "symfony/translation": "^5.4|^6.0"
     },
     "require-dev": {
         "symfony/framework-bundle": "^5.4|^6.0",
         "symfony/phpunit-bridge": "^5.2|^6.0",
-        "symfony/twig-bundle": "^5.4|^6.0",
         "symfony/var-dumper": "^5.4|^6.0"
     },
     "extra": {
diff --git a/src/Translator/config/services.php b/src/Translator/config/services.php
@@ -16,7 +16,6 @@
 use Symfony\UX\Translator\MessageParameters\Extractor\MessageParametersExtractor;
 use Symfony\UX\Translator\MessageParameters\Printer\TypeScriptMessageParametersPrinter;
 use Symfony\UX\Translator\TranslationsDumper;
-use Symfony\UX\Translator\Twig\TranslatorExtension;
 
 /*
  * @author Hugo Alliaume <hugo@alliau.me>
@@ -44,11 +43,5 @@
         ->set('ux.translator.message_parameters.extractor.intl_message_parameters_extractor', IntlMessageParametersExtractor::class)
 
         ->set('ux.translator.message_parameters.printer.typescript_message_parameters_printer', TypeScriptMessageParametersPrinter::class)
-
-        ->set('ux.translator.twig.extension', TranslatorExtension::class)
-            ->args([
-                service('translator'),
-            ])
-            ->tag('twig.extension')
     ;
 };
diff --git a/src/Translator/doc/index.rst b/src/Translator/doc/index.rst
@@ -25,6 +25,29 @@ Install this bundle using Composer and Symfony Flex:
     $ yarn install --force
     $ yarn watch
 
+After installing the bundle, the following file should be created, thanks to the Symfony Flex recipe:
+
+.. code-block:: javascript
+
+    // assets/translator.js
+
+    /*
+     * This file is part of the Symfony UX Translator package.
+     *
+     * If folder "../var/translations" does not exist, or some translations are missing,
+     * you must warmup your Symfony cache to refresh JavaScript translations.
+     *
+     * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
+     */
+
+    import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+    import { localeFallbacks } from '../var/translations/configuration';
+
+    setLocaleFallbacks(localeFallbacks);
+
+    export { trans }
+    export * from '../var/translations';
+
 Usage
 -----
 
@@ -34,26 +57,13 @@ For a better developer experience, TypeScript types definitions are also generat
 Then, you will be able to import those JavaScript translations in your assets.
 Don't worry about your final bundle size, only the translations you use will be included in your final bundle, thanks to the [tree shaking](https://webpack.js.org/guides/tree-shaking/).
 
-Configuring the default locale and locale fallbacks
-~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-By default, if the JavaScript translator is not configured, it will:
-- use the value of ``document.documentElement.lang`` or ``en`` (English) as the default locale
-- not use any locale fallbacks
-
-This step is optional, but if you want to configure the default locale and locale fallbacks for the JavaScript translator, you must use the Twig function ``initialize_js_translator()``:
-
-.. code-block:: twig
-
-    {# templates/base.html.twig #}
-
-    {% block javascripts %}
-        {# It will use `Locale::getDefault()` or `en` as default locale #}
-        {{ initialize_js_translator() }}
+Configuring the default locale
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
-        {# But you can manually specify which locale to use #}
-        {{ initialize_js_translator(locale=app.request.locale) }}
-    {% endblock %}
+By default, the default locale is ``en`` (English) that you can configure through many ways (in order of priority):
+1. With ``setLocale('your-locale')`` from ``@symfony/ux-translator`` package
+2. Or with ``<html data-symfony-ux-translator-locale="your-locale">`` attribute
+3. Or with ``<html lang="your-locale">`` attribute
 
 Importing and using translations
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
diff --git a/src/Translator/src/TranslationsDumper.php b/src/Translator/src/TranslationsDumper.php
diff --git a/src/Translator/src/Twig/TranslatorExtension.php b/src/Translator/src/Twig/TranslatorExtension.php
diff --git a/src/Translator/tests/Kernel/TwigAppKernel.php b/src/Translator/tests/Kernel/TwigAppKernel.php
diff --git a/src/Translator/tests/TranslatorBundleTest.php b/src/Translator/tests/TranslatorBundleTest.php
diff --git a/src/Translator/tests/Twig/TranslatorExtensionTest.php b/src/Translator/tests/Twig/TranslatorExtensionTest.php

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-Copyright (c) 2020-2023 Fabien Potencier`
	`1`	`+Copyright (c) 2023-present Fabien Potencier`
`2`	`2`
`3`	`3`	`Permission is hereby granted, free of charge, to any person obtaining a copy`
`4`	`4`	`of this software and associated documentation files (the "Software"), to deal`
Original file line number	Diff line number	Diff line change
`@@ -41,6 +41,8 @@ import {strtr} from '../utils';`
`41`	`41`	`*`
`42`	`42`	`* @see https://en.wikipedia.org/wiki/ISO_31-11`
`43`	`43`	`*`
	`44`	`+ * @private`
	`45`	`+ *`
`44`	`46`	`* @param id The message id`
`45`	`47`	`* @param parameters An array of parameters for the message`
`46`	`48`	`* @param locale The locale`
`@@ -233,4 +235,4 @@ function getPluralizationRule(number: number, locale: string): number {`
`233`	`235`	`default:`
`234`	`236`	`return 0`
`235`	`237`	`}`
`236`		`-}`
	`238`	`+}`