feature #3208 [Translator] Refactor API to use string-based translation keys instead of generated constants (Kocal)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Translator] Refactor API to use string-based translation keys instead of generated constants

| Q              | A
| -------------- | ---
| Bug fix?       | no
| New feature?   | yes <!-- please update src/**/CHANGELOG.md files -->
| Deprecations?  | no <!-- if yes, also update UPGRADE-*.md and src/**/CHANGELOG.md -->
| Documentation? | yes <!-- required for new features, or documentation updates -->
| Issues         | Fix #2619 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License        | MIT

This pull request introduces a **breaking change** to the UX Translator component, refactoring its API to use string-based translation keys instead of generated constants.

The main advantages are:
- You can now use **exactly the same translation keys** as in your Symfony PHP code
- Simpler and more readable code
- No need to memorize generated constant names
- No need to import translation constants: smaller files
- And you can still get autocompletion and type-safety 🚀

**Before:**
```typescript
import { trans } from '`@symfony`/ux-translator';
import { SYMFONY_GREAT } from '`@app`/translations';

trans(SYMFONY_GREAT);
```

**After:**
```typescript
import { createTranslator } from '`@symfony`/ux-translator';
import { messages } from '../var/translations/index.js';

const { trans } = createTranslator({ messages });
trans('symfony.great');
```

Changing the import from ``@app`/translations` to `../var/translations/index.js` allows IDEs and other tools to correctly interpret these files, which is required to make `trans()` type-safe.

It also make the configuration easier for AssetMapper users, they must now remove these entries from their `importmap.php`:
```php
   '`@app`/translations' => [
        'path' => './var/translations/index.js',
    ],
    '`@app`/translations/configuration' => [
        'path' => './var/translations/configuration.js',
    ],
```

Commits
-------

a8de99d Update Encore app
d77ffc0 Update ux.symfony.com app
fc0ccfa Update E2E app
2519033 [Translator] Refactor API to use string-based translation keys instead of generated constants

Author: Kocal

apps/e2e/README.md

@@ -1,8 +1,8 @@
 # E2E App
 
-This is a Symfony application designed for end-to-end testing. 
+This is a Symfony application designed for end-to-end testing.
 
-It serves for testing UX packages in a real-world scenario, 
+It serves for testing UX packages in a real-world scenario,
 to ensure they work as expected for multiple Symfony versions and various browsers.
 
 ## Requirements
@@ -16,7 +16,7 @@ to ensure they work as expected for multiple Symfony versions and various browse
 
 ```shell
 docker compose up -d
-symfony php ../.github/build-packages.php
+symfony php ../../.github/build-packages.php
 
 SYMFONY_REQUIRE=6.4.* symfony composer update
 # or...

apps/e2e/assets/app.js

@@ -2,6 +2,8 @@ import { registerVueControllerComponents } from '@symfony/ux-vue';
 import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
 import { registerReactControllerComponents } from '@symfony/ux-react';
 import './bootstrap.js';
+import { trans } from "./translator.js";
+
 /*
  * Welcome to your app's main JavaScript file!
  *
@@ -16,3 +18,5 @@ console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');
 registerReactControllerComponents();
 registerSvelteControllerComponents();
 registerVueControllerComponents();
+
+export { trans };

apps/e2e/assets/translator.js

@@ -1,5 +1,6 @@
-import { localeFallbacks } from '@app/translations/configuration';
-import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-translator';
+import { createTranslator } from "@symfony/ux-translator";
+import { messages, localeFallbacks } from "../var/translations/index.js";
+
 /*
  * This file is part of the Symfony UX Translator package.
  *
@@ -9,8 +10,9 @@ import { trans, getLocale, setLocale, setLocaleFallbacks } from '@symfony/ux-tra
  * If you use TypeScript, you can rename this file to "translator.ts" to take advantage of types checking.
  */
 
-setLocaleFallbacks(localeFallbacks);
-
-export { trans };
+export const translator = createTranslator({
+    messages,
+    localeFallbacks,
+});
 
-export * from '@app/translations';
+export const { trans, setLocale } = translator;

apps/e2e/importmap.php

@@ -139,12 +139,6 @@
     '@symfony/ux-translator' => [
         'path' => './vendor/symfony/ux-translator/assets/dist/translator_controller.js',
     ],
-    '@app/translations' => [
-        'path' => './var/translations/index.js',
-    ],
-    '@app/translations/configuration' => [
-        'path' => './var/translations/configuration.js',
-    ],
     'typed.js' => [
         'version' => '2.1.0',
     ],

apps/e2e/templates/ux_translator/basic.html.twig

@@ -11,15 +11,14 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { HELLO } from '@app/translations';
+        import { trans } from 'app';
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(HELLO, {}, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(HELLO, {}, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('hello', {}, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('hello', {}, 'messages', 'fr')}</li>
                 </ul>
             `
         }

apps/e2e/templates/ux_translator/icu_date_time.html.twig

@@ -15,17 +15,16 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { PUBLISHED_AT } from '@app/translations';
+        import { trans } from 'app';
 
         const inputDate = document.querySelector('#date');
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(PUBLISHED_AT, { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('published_at', { publication_date: new Date(inputDate.value) }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('published_at', { publication_date: new Date(inputDate.value) }, 'messages', 'fr')}</li>
                 </ul>
             `
         }

apps/e2e/templates/ux_translator/icu_number_currency.html.twig

@@ -15,17 +15,16 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { VALUE_OF_OBJECT } from '@app/translations';
+        import { trans } from 'app';
 
         const inputPrice = document.querySelector('#price');
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(VALUE_OF_OBJECT, { price: inputPrice.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('value_of_object', { price: inputPrice.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('value_of_object', { price: inputPrice.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }

apps/e2e/templates/ux_translator/icu_number_percent.html.twig

@@ -15,17 +15,16 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { PROGRESS } from '@app/translations';
+        import { trans } from 'app';
 
         const inputProgress = document.querySelector('#progress');
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(PROGRESS, { progress: inputProgress.value }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('progress', { progress: inputProgress.value }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('progress', { progress: inputProgress.value }, 'messages', 'fr')}</li>
                 </ul>
             `
         }

apps/e2e/templates/ux_translator/icu_plural.html.twig

@@ -15,17 +15,16 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { NUM_OF_APPLES } from '@app/translations';
+        import { trans } from 'app';
 
         const inputApples = document.querySelector('#apples');
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(NUM_OF_APPLES, { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('num_of_apples', { apples: inputApples.valueAsNumber }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('num_of_apples', { apples: inputApples.valueAsNumber }, 'messages', 'fr')}</li>
                 </ul>
             `
         }

apps/e2e/templates/ux_translator/icu_select.html.twig

@@ -20,17 +20,16 @@
 {% block javascripts %}
     {{ parent() }}
     <script type="module">
-        import { trans } from '@symfony/ux-translator';
-        import { INVITATION_TITLE } from '@app/translations';
+        import { trans } from 'app';
 
         const selectGender = document.querySelector('#gender');
 
         function render() {
             document.querySelector('[data-testid="output"]').innerHTML = `
                 <h2>Output</h2>
                 <ul >
-                    <li>🇬🇧 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
-                    <li>🇫🇷 ${trans(INVITATION_TITLE, { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
+                    <li>🇬🇧 ${trans('invitation_title', { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'en')}</li>
+                    <li>🇫🇷 ${trans('invitation_title', { organizer_gender: selectGender.value, organizer_name: 'Alex' }, 'messages', 'fr')}</li>
                 </ul>
             `
         }