Workflow for widget development:? how to set up /locales/xx/WidgetName.po language files

  • 2
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I'm working developing a widget, based on the framework that Ms. Peplinskie created for the google-calendar and weather widgets.

I'm stuck trying to create and use the language message file (used for i18n / L12n of the settings.html screen, etc.) . I've figured out that the message sources go into a .po file named like this       .../locales/en/MyWidget.po 

I've figured out that those message files live on Github at  common-i18n/src/locales/en

I've figured out how to do "gulp build" on a standalone common-i18n project to compile the .po files into the  dist/locales/translation_en.json files.

What I haven't figured out is how to integrate message development into my workflow.  I've been fiddling with doing the "gulp build" in my widget tree at src/components/rv-common-i18n/.

But when I build the widget that results in a minification mess with an extra copy of angular loaded in the  dist/i18n.min.js. 

I'd LIKE to be able to fiddle with my message text and hit refresh on the settings.html file.  I'd settle for getting something to work where I can change my messages and do some simple operation to to see them.

You all must have some kind of workflow for this language-development task? Help?   Thanks!
Photo of Oliver Jones

Oliver Jones

  • 692 Points 500 badge 2x thumb

Posted 4 years ago

  • 2
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi Oliver,

Great question! Sadly, I actually don't have an optimized workflow for this as it's still a relatively new process for us. The usual steps I typically take are to submit a PR for my translations to the common-i18n repo, and once accepted, integrate the translations into my Widget.

To provide a little more background, if you look inside the src/config folder of Calendar Widget, you'll notice there are different files in here, one per environment. If you open config.js, you'll see that the translation files are being pulled from components/rv-common-i18n/dist/locales/translation_. settings.html is linking out to the config.js file. The translation library will automatically append the appropriate locale to the end of that filename (e.g. translation_en) and then append the suffix (.json).

You should be able to manipulate the contents of those translation files directly and/or alter the URL to the translation files in config.jsin order to make translation changes locally. I've not played around with this though, so can't really provide much more direction than that.

Good luck.
Photo of Pieter Schaafsma

Pieter Schaafsma

  • 102 Points 100 badge 2x thumb
Hi Oliver,

I don't know if you are still looking for a way to get your translations in. I struggled with the same issue and this is what I found out and what I did to create new translation files.

During the gulp build the data from src\components\rv-common-i18n\dist\locales is copied to the dist\locales. The content from the src is not being refreshed. Trying to refresh them in the source folder I ran into the same issues you described so I needed an alternative.

This is what I did: I created a new development space and cloned the content from https://github.com/Rise-Vision/common-i18n. Next I followed the instructions on that page:
  • Change the po files.
  • Run gulp dev to create new translation files.
What I haven't figured out is why the script does not terminate. However, files created are good to use. These you can than copy to the locales folder in the src folder of your own project.

There is an issue/problem with this solution. When the common project is updated, the base po files may have changed. So you should think hard about what you change. If you change the po files provided you must reapply your own changes.
So I added po files for my own changes. This way if the source changes, I can copy my po files to the clone I created.

I hope this helps.