DigiComp.FlowTranslationEndpoint

This package is designed to help bringing needed translations to javascript components, without pushing them to the DOM in your views.

Other solutions, which would generate files available for usage in client scope, have the disadvantage that one would have to repeat the relativ complex overriding and merging logic of Flow. With this endpoint you can get the same content, as you would get, if you call the translation service with your translation id.

The main components are a CurrentHtmlLangViewHelper, which is intended to be used to fill the lang attribute of the html tag, so the frontend knows, which language is currently active (and is good practice anyway) and a TranslationMiddleware, which will respond to any request, which have a X-Translation-Request header, carrying a pattern of translation ids which should be returned.

For example:

X-Translation-Request: Neos.Flow:Main|authentication.*

would return all translation keys from the main unit of Neos.Flow starting with "authentication" and would look like that:

{
    "Neos.Flow:Main": {
        "authentication.required": "Authentication required", 
        "authentication.username": "Username",
        "authentication.password": "Password", 
        "authentication.new-password": "New password",
        "authentication.login": "Login", 
        "authentication.logout": "Logout"
    }
}

To let the middleware know, in which langauge the translated units should be, you should set the correct Accept-Language-Header with your request, which you obtained from the lang attribute of the html element.

Your JavaScript could look like that:

async function translate(idPatterns) {
    const response = await fetch(document.location, {headers: {
        'X-Translation-Request': idPatterns,
        'Accept-Language': document.documentElement.lang
    }});
    if (! response.ok) {
        return Promise.reject('Unexpected server response');
    }
    return await response.json();
}

If, for whatever reason, you prefer to have a "traditional" single endpoint, which works without a custom header, you can set DigiComp.FlowTranslationEndpoint.replaceRoutedEndpoint.reactOnPath. At this point a middleware translates all incoming requests and the GET parameter idPatterns (you can change the name in Settings.yaml).