Code Generation and Polymer i18n

So how do internationalization messages work in Dart? I was able to make good use of Intl.plural() in a silly Polymer example yesterday. I even used Intl.message(), but I am pretty sure it is just dead code at this point.

My Polymer displays a locale-dependent greeting, buttons and the number of balloons that a person has:



Thanks to Intl.plural(), my Polymer can display proper grammar versions of the number of balloons that I have be it 99 or 1:



Or even, sadly no red balloons:



I am doing this with locale-specific maps that are chosen at runtime:

  static Map get fr => {
    'hello': 'Bonjour',
    'done': 'Fin',
    'how_many': 'Combien?',
    'instructions': 'Présentez-vous une expérience personnalisée incroyable!',
    'count_message': (count) =>
      Intl.message(
        '''
        ${Intl.plural(
            count,
            zero: "Je n'ai pas de ballon rouge",
            one: "J'ai un ballon rouge",
            other: "J'ai $count ballons rouges"
          )}.''')
  };

I am using Intl.message() for the count_message propery-function. But as I mentioned, it serves no purpose. In fact it rather gets in the way. If I remove it, the code still works and is far more readable:

  static Map get fr => {
    // ...
    'count_message': (count) =>
      Intl.plural(
        count,
        zero: "Je n'ai pas de ballon rouge",
        one: "J'ai un ballon rouge",
        other: "J'ai $count ballons rouges"
      )
  };

But darn it, Intl.message() does something.

I extract the Intl.message() call out in to a function:

count_message(count) =>
  Intl.message(
    '''
    ${Intl.plural(
        count,
        zero: "Je n'ai pas de ballon rouge",
        one: "J'ai un ballon rouge",
        other: "J'ai $count ballons rouges"
    )}.''',
    name: 'count_message',
    desc: 'Reports the number of red balloons a person has.',
    args: [count],
    examples: {'count': 99}
  );

And I dig through the intl code to find that I should:

$ dart \
  --package-root=packages \
  /home/chris/.pub-cache/hosted/pub.dartlang.org/intl-0.9.1/test/message_extraction/extract_to_json.dart \
  lib/hello_you.dart

Which produces a intl_messages.json file with:

[{
  "name":"count_message",
  "desc":"Reports the number of red balloons a person has.",
  "examples":"{'count' : 99}",
  "args":[],
  "message":"\n    ${Intl.plural(count, zero: 'Je n\\'ai pas de ballon rouge', one: 'J\\'ai un ballon rouge', other: 'J\\'ai ${count} ballons rouges')}."
}]

(the actual file output is one a single line -- I split the lines here for readability)

Great. So what does this file actually do?

Well, based on the documentation, I think it mostly serves as a template for translation_* files. I think that I have likely made a mistake here starting with the French, so I am going to create a separate French translation as well as an English translation in translation_en.json:

{
  "locale": "en",
  "count_message": "${Intl.plural(count, zero: 'I have no red balloons', one: 'I have one red balloon', other: 'I have ${count} red balloons')}."
}

Then I run the opposite of the original extract_to_json.dart script. Now I need to generate_from_json.dart. This uses the same command line arguments as the previous script, but now includes the translation_* files as well:

$ dart \
  --package-root=packages \
  /home/chris/.pub-cache/hosted/pub.dartlang.org/intl-0.9.1/test/message_extraction/generate_from_json.dart \
  lib/hello_you.dart \
  translation_en.json translation_fr.json

That fails for me with the following error:

Unable to open file: /home/chris/repos/polymer-book/play/i18n/dart/packages/serialization/serialization.dart'file:///home/chris/.pub-cache/hosted/pub.dartlang.org/intl-0.9.1/test/message_extraction/generate_from_json.dart': error: line 25 pos 1: library handler failed
import 'package:serialization/serialization.dart';
^

Bleh. So I add serialization to my pubspec.yaml, pub get and try again. And still get an error:

Unhandled exception:
The null object does not have a getter 'string'.

NoSuchMethodError : method not found: 'string'
Receiver: null
Arguments: []
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:42)
#1      generateLocaleFile (file:///home/chris/.pub-cache/hosted/pub.dartlang.org/intl-0.9.1/test/message_extraction/generate_from_json.dart:95:32)
#2      main (file:///home/chris/.pub-cache/hosted/pub.dartlang.org/intl-0.9.1/test/message_extraction/generate_from_json.dart:63:23)
#3      _startIsolate.isolateStartHandler (dart:isolate-patch/isolate_patch.dart:188)
#4      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:93)

Looking through the code in the stacktrace, it seems that my JSON translation files need a _locale attribute, not a locale attribute:

{
  "_locale": "fr",
  "count_message": "${Intl.plural(count, zero: 'Je n\\'ai pas de ballon rouge', one: 'J\\'ai un ballon rouge', other: 'J\\'ai ${count} ballons rouges')}."
}

With that now working, I have three new files:messages_all.dart, messages_en.dart, and messages_fr.dart.

So what do I do with these?

I start with a simple import:

import 'messages_all.dart';

That, combined with setting the Intl.defaultLocale has no effect in the code -- the default French message is always shown. I find that I need to call the initializeMessages() function from the generated messages_all.dart file:

@CustomTag('hello-you')
class HelloYou extends PolymerElement {
  @observable String balloon_message;
  // ...
  HelloYou.created(): super.created() {
    initializeMessages('en_US');
  }
  // ...
  updateCount() {
    // count_message is the i18n function:
    balloon_message = count_message(int.parse(count));
  }
}

With that, I am setting my locale such that the count_message() function will honor it. Almost:



It seems that my translation_en.json is not generating a proper messages_en.dart. At this point, I just want to get this working, so I remove backslashes from messages_en.dart:

class MessageLookup extends MessageLookupByLibrary {
  get localeName => 'en';
  static count_message(count) => "\${Intl.plural(count, zero: \'I have no red balloons\', one: \'I have one red balloon\', other: \'I have ${count} red balloons\')}.";
  // ...
}

After removing the backslashes, I am left with:

  static count_message(count) => "${Intl.plural(count, zero: 'I have no red balloons', one: 'I have one red balloon', other: 'I have ${count} red balloons')}.";

Then I have my Dart intl-based solution working.

Having gone through all that, I can safely say that this is a huge pain. Even if the code was not mis-generated in the last step, this feels awkward to use. Much of that is probably my own biases, so I am not dismissing this approach outright. I personally prefer metaprogramming to code generation. But I recognize that code generation may very well be the right approach in this case. I also recognize that this approach may scale a little better than my poor man's map-based approach.

But in the end, I do not understand what the intializeMessages() does—even after digging through it. That alone may be enough to push me away. But I will sleep on it first.


Day #975

‹prev | My Chain | next›