framework icon indicating copy to clipboard operation
framework copied to clipboard

Add i18n/CLDR support from the .dojorc in codesandbox

Open matt-gadd opened this issue 6 years ago • 3 comments

Enhancement Currently any app or example that uses i18n and cldr from the .dojorc will not work on codesandbox. We have 2 examples of this in @dojo/examples:

https://github.com/dojo/examples/tree/master/world-clock https://github.com/dojo/examples/tree/master/todo-mvc-kitchensink

It would be nice if we could offer support for this in codesandbox.

matt-gadd avatar Oct 21 '19 14:10 matt-gadd

The current work can be seen on this branch.

After some digging and playing around, I added support for .dojorc as a config file for Dojo codesandboxes, which adds them to the manager.configurations for the evaluation manager. From here, I've been experimenting with injecting a virtual module that loads in the CLDR data based on what's included in the cldrPaths config.

The injected module is definitely getting run as part of the sandbox, but the main problem I am running into right now is that the cldd-data module doesn't actually have anything until it's install script is run. Unfortunately, it seems that CodeSandbox doesn't run the install script (though I thought I saw somewhere that they do run postinstall). So, the CLDR data is failing to load because it cannot be found.

image

nicknisi avatar Oct 27 '19 16:10 nicknisi

Here's a little more thorough of an update.

Since I last worked on it, codesandbox added this cerebral debugger to the project, which was supposed to give me insight on the complete state of the app, but I spent too much time and was never able to get it to work. I thought it would’ve helped things go faster though because I would know what codesandbox knows both in the editor and in the sandbox manager.

Then, I spent some time learning how Dojo itself handles i18n and loading of the cldr portion through the reading of the .dojorc. I have to read the .dojorc in codesandbox and I learned how to do that, but then I needed to inject arbitrary code that mimics what our webpack plugin from webpack-contrib does. All I can really go against is the other codesandbox flavors (React, Angular, Vue, etc) to see what they’re doing, and none of them inject code that doesn’t really exist in this way to the front of the runtime I then experimented with their sandpack code, which is supposed to help run webpack code for sandboxes, but that seemed a bit incomplete as of yet. So I fell back on what I still think is a little hacky of a solution, but I basically have some form of the code in our webpack plugin mixed in a template string that I dynamically generate with the contents of the .dojorc that exists in the sandbox project.

This seemed to work in so far as it seemed like it was injecting my code and the code had all the pieces to load the code from the CLDR project But then I learned that the CLDR project actually relies on a install script to actually fetch and download the json files it need, which of course wasn’t happening in codesandbox. I spent some time digging through issues to see if there was a solution and that’s where I left it on Friday.

I looked at Matt's example to see if there was something I could pull out, and I then tried using some different modules that had different pieces that I’d need to get the one specific example running, and it seemed like it still wasn’t finding the json files properly. The next thing I need to do is to verify via unpkg that those modules actually have the files in the paths I expect, and if that doesn’t work, I need to see if there’s another way.

nicknisi avatar Nov 01 '19 18:11 nicknisi

In Dojo 7 i18n configuration and initialisation has been updated. This would need to be reflected in the original POC from @nicknisi - we can use cldr-core over cldr-data to enable i18n for message bundles at least.

Here is an example codesandbox that has configured i18n, this is the configuration that would need to be executed automatically using the projects .dojorc https://codesandbox.io/s/i18n-example-cftku?file=/src/main.tsx

agubler avatar Jul 28 '20 09:07 agubler