Guidance for updating to the 2.0 version

[rictic]

I'm taking a look at updating some usages of this element to the 2.0 version inside google and here are my notes so far:

• <iron-meta-query> is gone, but its API looks very similar to <iron-meta>. Was it just a read-only way of accessing <iron-meta>? Is the solution to change users of <iron-meta-query> to just do one-directional binding of an <iron-meta> instance?
• new Polymer.IronMeta(...) used to give you an element, now it doesn't. If you want an element imperatively from JS, looks like you should use document.createElement('iron-meta')

Once I've got this worked out I'll send over a PR to update the README with some upgrade guidance.

[rictic]

Hm, changing <iron-meta-query key="foo" value="{{bar}}"> to <iron-meta key="foo" value="{{bar}}"> isn't quite right, because if bar changes, with iron-meta-query it would not be pushed down into the store. What we really want is to read the property from the iron-meta but never to write it.

I guess the best way to emulate this would be to create a new property _barReadOnly on the parent, then in its observer do this.bar = this._barReadOnly.

[rictic]

My first gambit of just changing all <iron-meta-query> instances to <iron-meta> did break a handful of things. Mostly in one app.

[notwaldorf]

/cc @cdata

[rictic]

/cc @bicknellr

[bicknellr]

• <iron-meta-query key="K" value="{{V}}"> → <iron-meta key="K" value="{{V}}"> doesn't work in Polymer 1 because this observer is the only thing performing updates in iron-meta v2 and Polymer 1 never triggers the observer because the value property of the iron-meta is initially undefined.
• iron-meta v2 changed value's type to String, so if you were doing something like <iron-meta key="K" value="{prop: 'value'}"> and expecting to retrieve K and get an object, you now have to wrap in JSON.parse().
• If you're using the constructor to create an iron-meta, the argument is not optional because of this in, but I think this could probably be written off as a bug and fixed later. For now though, you have to pass it in.
• IronMeta.getIronMeta() doesn't exist anymore but it doesn't seem heavily used and is easy to work around anyway (make your own instance).

Generally, I've found that most updates to hybrid end up looking like this:

before:

<dom-module id="some-element">
  <template>
    <iron-meta-query key="K" value="{{valueToExtract}}"></iron-meta>
    Then, use the [[valueToExtract]] somewhere else in the template.
  </template>
  <script>
    Polymer({
      is: 'some-element',
    });
  </script>
</dom-module>

after:

<dom-module id="some-element">
  <template>
    Then, use the [[valueToExtract]] somewhere else in the template.
  </template>
  <script>
    (function() {
      const ironMeta = new Polymer.IronMeta(/* required! */ {});
      Polymer({
        is: 'some-element',

        properties: {
          valueToExtract: {
            value: function() {
              // Use the imperative interface to get values.
              return ironMeta.byKey("K");
            }
          }
        }
      });
    })();
  </script>
</dom-module>

(1.x...master diff link for reference.)