Auto-Set Locale from HTML-lang-attribute when used with international routing

[mkrauser]

We have international routes enabled in our project and we use FosJsRouting with encore like this:

// webpack.config.js
  ...
  .addPlugin(
    new FosRouting({
      locale: "de",
      target: "var/cache/frontend/fosRoutes.json",
    })
  )

I thought, that the locale given here is just the default (or fallback) locale, but this is not the case.
And there is not documented way, of setting the locale after Routing has been initialized. I tried calling Routing.setLocale manually, but the routes were loaded after that by webpack so my setting was overridden.
It would be nice, if the current locale can be read from html-tag attributes (like the symfony ux translator bundle: https://github.com/symfony/ux/blob/412da630824772f1fcb4d363b24b243a7165c4a0/src/Translator/assets/src/translator.ts#L47)

[mkrauser]

Here's a working solution, using the webpack-inject-plugin:

// webpack.config.js
const InjectPlugin = require('@bpnetguy/webpack-inject-plugin').default;

    ...
    .addPlugin(
        new FosRouting({
            locale: "de",
            target: "var/cache/frontend/fosRoutes.json",
        })
    )
    .addPlugin(
        new InjectPlugin(
            () => 'import Routing from "fos-router"; Routing.setLocale(' +
                'document.documentElement.getAttribute("data-symfony-ux-translator-locale") || ' +
                'document.documentElement.lang || ' +
                '"de"' +
                ');'
        )
    )