I still need a way to internationalize Polymer. As I found last night, the Dart
intl package is likely to be of little use. Although the code generation is interesting, it seems prohibitively difficult for a web developer who just wants to use a nifty custom Polymer element. Besides, it is just a Dart solution and I need something that will work in both Polymer.dart and in the JavaScript version of Polymer. That said, I do like many of the intl features—especially pluralization and date formatting—so I do not want to totally disregard it.My thought for tonight is that it might be nice for a localized Polymer element to automatically detect localization (either in code or JSON format). That is, an element that looks like:
<hello-you locale="fr"></hello-you>Would default to French unless the observed
locale attribute changes to another supported locale. And the list of supported locales could be specified by the web developer via <link> tags: <link rel="import" href="packages/i18n_example/hello-you.html">
<link rel="import" href="packages/i18n_example/hello-you-en.json">
<link rel="import" href="packages/i18n_example/hello-you-fr.json">
<link rel="import" href="packages/i18n_example/hello-you-es.json"><link> tags?The answer, at least in Dart, seems to be “no.” After creating those files and adding them as
<link> tags to the document's <head> tag, I have something like: <head>
<title>Polymer i18n</title>
<link type="text/css" rel="stylesheet" href="assets/i18n_example/bootstrap.min.css">
<!-- Load component(s) -->
<link rel="import" href="packages/i18n_example/hello-you.html">
<link rel="import" href="packages/i18n_example/hello-you-en.json">
<link rel="import" href="packages/i18n_example/hello-you-fr.json">
<link rel="import" href="packages/i18n_example/hello-you-es.json">
<!-- Load Polymer -->
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
</head>pub serve, I am left with: <head>
<!-- Polymer.dart JS helpers -->
<title>Polymer i18n</title>
<link type="text/css" rel="stylesheet" href="assets/i18n_example/bootstrap.min.css">
<!-- START: load -->
<!-- Load component(s) -->
<!-- Load Polymer -->
<script type="application/dart" src="index.html_bootstrap.dart"></script>
<!-- END: load --
</head>pubspec.yaml:name: i18n_example
dependencies:
polymer: any
transformers:
- polymer:
entry_points: web/index.htmlBut I rather need that.At this point the question becomes: should Polymer.dart allow non-Polymer imports this?
To answer that, I re-implement my Polymer in JavaScript, load things and find that yes, the JSON
<link> tags are loaded in the network tab (even in Internet Explorer 10, so it does seem like Polymer does this). Furthermore, the imported JSON is available programmatically:> el = document.querySelectorAll('link')[3].import
Object {href: "http://localhost:8000/scripts/hello-you-fr.json", ownerNode: b, content: b}
> el.content.textContent
"import{
'hello': 'Bonjour',
'done': 'Fin',
'how_many': 'Combien?',
'instructions': 'Présentez-vous une expérience personnalisée incroyable!'
}
"Unfortunately, this does me little immediate good since Polymer.dart is in seeming disagreement with its JavaScript sibling. Still, an approach that imports localizations seems to be possible—at least on the surface. I will dig in a little deeper tomorrow with the JavaScript version and then circle back to the Dart to see if there is anyway to cajole it into supporting non-Polymer <link> imports.Day #976
No comments:
Post a Comment