Dynamic locales in production mode build

[KlavdiiaKoval]

Hey there, we are trying to set locale dynamically in the production build.

And we have faced several issues. Perhaps we are doing something very wrong. But we will appreciate any help and explanations.

To easily reproduce the problem we can consider app-npm-webpack example project.

First issue:

1. In the index.js replace

var numberFormatter = Globalize.numberFormatter( { maximumFractionDigits: 2 } );

with

var tmp = { maximumFractionDigits: 2 };
var numberFormatter = Globalize.numberFormatter( tmp );

2. Try to build the project in the production mode.

Result: I'm getting the following error:

No Globalize compiled data module found
d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\GlobalizeCompilerHelper.js:72
      throw e;
      ^

ReferenceError: tmp is not defined
    at eval (eval at extractor (d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\node_modules\globalize-compiler\lib\extract.js:65:9), <anonymous>:3:35)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\node_modules\globalize-compiler\lib\compile-extracts.js:59:23
    at Array.reduce (native)
    at Object.compileExtracts (d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\node_modules\globalize-compiler\lib\compile-extracts.js:58:49)
    at GlobalizeCompilerHelper.compile (d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\GlobalizeCompilerHelper.js:63:33)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\ProductionModePlugin.js:220:51
    at String.replace (native)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\ProductionModePlugin.js:214:58
    at Array.forEach (native)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\ProductionModePlugin.js:212:63
    at Array.forEach (native)
    at Compilation.<anonymous> (d:\git\globalize\examples\app-npm-webpack\node_modules\globalize-webpack-plugin\ProductionModePlugin.js:210:10)
    at Compilation.applyPlugins (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\tapable\lib\Tapable.js:26:37)
    at Compilation.<anonymous> (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:558:8)
    at Compilation.applyPluginsAsync (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\tapable\lib\Tapable.js:60:69)
    at Compilation.seal (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:525:7)
    at Compiler.<anonymous> (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compiler.js:397:15)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\tapable\lib\Tapable.js:103:11
    at Compilation.<anonymous> (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:445:10)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:417:12
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:332:10
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:52:16
    at done (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:246:17)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:44:16
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\lib\Compilation.js:332:10
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:52:16
    at done (d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:246:17)
    at d:\git\globalize\examples\app-npm-webpack\node_modules\webpack\node_modules\async\lib\async.js:44:16
    at nextTickCallbackWith0Args (node.js:419:9)
    at process._tickCallback (node.js:348:13)

Second issue:

1. In the index.js replace

var numberFormatter = Globalize.numberFormatter( { maximumFractionDigits: 2 } );

with

var numberFormatter = Globalize("de").numberFormatter(  { maximumFractionDigits: 2 } );

2. Build the project in production mode
3. Uncomment <script src="i18n/de.87c3b28dd71ac48d7ae8.js"></script> in index.html
4. Open index.html

Result:
Uncaught TypeError: numberFormatter is not a function

Is it a valid use case at all?
Is it possible to have several locales simultaneously in the production build and change them dynamically from the code?

We have seen similar questions (#13 and #15). But unfortunately they don't really give the answers to our questions.

Thanks.

[rxaviers]

About your first issue: please see globalizejs/globalize-compiler#10 and just let me know if you have any further question.

About your second issue:

When you use Globalize.<fn> you're using the default locale (automatically set by the plugin using Globalize.locale(<locale>)). When you use Globalize(<locale>).<fn> you're using an instance of Globalize, which isn't supported by the static compiler yet (globalize-compiler#5). So:

1. Use Globalize.<fn>, the static functions that will use the default locale.
2. Load the appropriate i18n/<locale> in order to extend your app with such support, which already sets the default locale for you.
3. If you need to switch locales dynamically, load the ones you need support for (e.g., i18n/en, i18n/de, etc). Then use Globalize.locale(<locale>) to set such locale as default for all your Globalize.s.

Please, just let me know if you have any questions.

[KlavdiiaKoval]

Thanks a lot for the answers. I've tried the solution for the second issue. It works fine!

However I still have questions regarding the first problem.
If I understand correctly it is not possible to to use variables as parameters in globalize formatters in the code compiled for production due to the compiler design. You explained the reasons very well in globalizejs/globalize-compiler#10.
Is there any other way to compile the code with variables used as a parameters in globalize formatters for production use?

In our project we need to create some wrappers for globalize functions. And therefore it is very important for us to be able to pass different format options as parameters. Obviously creating a separate formatter for each option is not suitable for us.

Thanks

[rxaviers]

I'm glad it could be of help and you're welcome.

Is there any other way to compile the code with variables used as a parameters in globalize formatters for production use?

In our project we need to create some wrappers for globalize functions. And therefore it is very important for us to be able to pass different format options as parameters. Obviously creating a separate formatter for each option is not suitable for us.

In this case, you need to use regular Globalize, not the runtime one. Regular Globalize has code to traverse CLDR JSON and generate formatters on the fly. Alternatively to that, you could fork Globalize-compiler to statically parse your wrapper instead of Globalize calls. This would allow you to generate compiled code for your wrapper.

[rxaviers]

I'm closing this issue, but feel free to add new comments if you have any further questions.