Update Encore app

Author: Kocal

apps/encore/assets/app.js

@@ -11,12 +11,12 @@ import './bootstrap.js';
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
-import { THIS_FIELD_IS_MISSING, trans } from './translator';
+import { trans } from './translator';
 
 registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));
 registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));
 registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/));
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log(trans(THIS_FIELD_IS_MISSING));
+    console.log(trans('say_hello', { name: 'Fabien'}));
 })

apps/encore/assets/translator.js

@@ -1,5 +1,6 @@
-import { localeFallbacks } from '../var/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 '../var/translations';
+export const { trans, setLocale } = translator;

apps/encore/translations/messages+intl-icu.en.yaml

@@ -0,0 +1 @@
+say_hello: 'Hello {name}!'