Strange syntax error with square brackets in template

[leviw]

The following polymer-element can be happily embedded in a page, but fails with a SyntaxError: Unexpected token ] when it's created through script.

<polymer-element name="borked" attributes="failures tree ">
  <template>
    <template if="{{ failures[tree] }}">

    </template>
  </template>
  <script>
    Polymer({
      failures: {},
      tree: '',

    });
  </script>
</polymer-element>

[jmesserly]

@leviw -- what do you mean "when it's created through script"?

[jmesserly]

one possible explanation: by default, https://github.com/Polymer/TemplateBinding doesn't support any syntax. Polymer associates syntax with the template by doing template.bindingDelegate = new PolymerExpressions(); (you can see tests.js line 91 doing something similar)

[jmesserly]

tentatively closing, but feel free to reopen if that doesn't fix the issue

[leviw]

I mean if you instantiate it as follows:

var borked = document.createElement('borked');

I'd disagree that requiring the developer to jump through additional hoops to create an element is a fix, but that's up to you.

[jmesserly]

Sorry Levi, I didn't understand what you meant. That sounds like a bug somewhere in the system! (possibly in https://github.com/Polymer/polymer-dev, though)

I'd disagree that requiring the developer to jump through additional hoops to create an element is a fix, but that's up to you.

My guess was you were hitting a different problem. Sorry! If you're interested on the background of that: <template>'s data binding doesn't provide a syntax. The syntax is provided by this package. If you do document.createElement('template') you need to provide the syntax because otherwise it has no way of knowing. But, that doesn't sound like the issue you hit.

[leviw]

No worries :)

Let me know if you have any issue repro-ing. The above should make it pretty easy.

[jmesserly]

I was able to reproduce the error here: http://jsbin.com/layudepavuzu/1/edit ... but it happens even with my-element on the main page. Not sure why createElement would make a difference, though maybe it changes the timing of how the error shows up (createElement will upgrade synchronously before returning). But I think I tracked down the "]" issue.

The error is caused by tree: '' ... what happens is the code tries to generate a fast getter, and ends up generating an invalid JavaScript function:

if (obj != null)
  return obj[];
else
  return undefined;

code that generates it is here: https://github.com/Polymer/observe-js/blob/08b8dfa21bf49d9ac60bc495e77a0bfa57f84cde/src/observe.js#L402

Thanks to JavaScript conversion of "" -> 0, the isIndex function returns true for empty string, which sends formatAccessor down the wrong path:
https://github.com/Polymer/observe-js/blob/08b8dfa21bf49d9ac60bc495e77a0bfa57f84cde/src/observe.js#L358

Offhand I'm not entirely sure why the isIndex function works that way...

I'm going to see if observe-js is the only place that needs to be fixed. Since the original syntax couldn't express empty paths, this might be hitting other untested code paths.

[jmesserly]

https://codereview.appspot.com/136950043 ... that seemed like the only issue