Wednesday, December 25, 2013

Rel Import of Non Polymers


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">
I have absolutely no idea how feasible that is, but there is, as they say one way to find out. The question for tonight is, does Polymer allow me to import non-Polymers via the <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>
But when I load the web page from 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>
All of my JSON localizations are gone. And, unlike the Polymers, they are not showing up in the network tab of my browser. This is the work of the Polymer transformer that I have specified in my pubspec.yaml:
name: i18n_example
dependencies:
  polymer: any
transformers:
- polymer:
    entry_points: web/index.html
But 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