googlearchive / polymer-expressions

PolymerExpressions

polymer-expressions's Issues

template binding + using getters in firefox = 100% CPU & all RAM

Try doing template binding in firefox where the target is a getter rather than a property.

You'll notice Firefox wants 100% CPU, reducing display perf to about 0.1 frames a second, without any interaction. Similar issue chrome canary (without any experimental flags on), but is slightly more usable.

If left for a few minutes will consume many gigabytes of RAM.

The problem may be more in the object observe code or wherever the dirty checking lives.

I'm thinking the dirty checking needs to be a bit smarter. Changes applying late is better than eating all the resources.

Let me know if you want more information or a minimal reproducible case, you probably already know about this, probably an issue somewhere on one of these repos.

Expressions with tokenList, styleObject filters don't update dynamically

With an expression like:

{{ classes | tokenList }}

The expression doesn't update when one of the values inside classes is updated. For example you might expect to be able to toggle the 'selected' class like this:

this.classes.selected = !this.classes.selected

However, since the properties of classes aren't observed, the change isn't detected.

Test case:

http://jsbin.com/qamat/12/edit

The Broken Switch button (which updates the property) doesn't trigger a change to the binding.

The Working Switch button (which clones the object) does trigger a change.

May be related to the issues mentioned in PR #23, of knowing which values to observe.

Arguments in CallExpression are not watched - binding fails

According to official docs "The function’s arguments are observed for changes, and the expression is re-evaluated whenever one of the arguments changes" (https://www.polymer-project.org/docs/polymer/expressions.html).

However when running following example we can see that Names list is not updated after a change in the names object.

   <func-binding></func-binding>

    <polymer-element name="func-binding">
      <template>
        Names (not updated):
        <ul>
          <template repeat="{{key in keys(names)}}">
            <li>{{key}}: {{names[key]}}</li>
          </template>
        </ul>
        Ages (updated):
        <ul>
          <template repeat="{{age in ages}}">
            <li>{{age}}</li>
          </template>
        </ul>
      </template>
      <script>
        Polymer({
          names: {
            a: "John",
            b: "James"
          },
          ages: [20, 30],
          ready: function() {
            var self = this;
            setTimeout(function() {
              self.names.c = "Bob";
              self.ages.push(40);
            }, 1000);
          },
          keys: function(obj) {
            return obj == undefined ? [] : Object.keys(obj);
          },
        });
      </script>
    </polymer-element>

Make bindings available in conditional expressions

For the sake of brevity, it would be nice if the bindings done in the bind attribute would be instantly available in any ifexpressions. Like so:

<template bind="{{ user.address.street as street }}" if="{{ street }}>
   {{ street }}
</template>

Similarly

<template bind="{{ user.address }}" if="{{ street }}>
   {{ street }}
</template>

Perhaps the same thing would be useful for repeat expressions.

Literal "true" doesn't test as truthy

When I write an expression like it doesn't appear to test as truthy. {{ 1 }} and {{ !! true }} work as expected. Even if="{{ }}" appears to evaluate as truthy, but not true.

Repro:
http://jsbin.com/pagejoga/3/edit

Would like a way to register filters on arbitrary templates

I'm using sorted-table in one of my components:
https://github.com/stevenrskelton/sortable-table#polymer-filters

I provide a row template, and would like to use custom filters in that provided template. However to do that, I have to register them on PolymerExpressions:

function myFilter(row){
return [your logic here];
}
...
PolymerExpressions.prototype.myFilter = myFilter

This breaks encapsulation of my polymer component. :(

path expressions with literal computed properties will fail to fetch

e.g. foo[0] as bar

The "as bar" is required so that the path is processed as an 'as' expression within PolymerExpressions, rather than being handed directly out to observe-js as a path.

Should be able to <template repeat> on object values, Maps just like we do on array values.

Moved from googlearchive/TemplateBinding#116

It would also be nice for both arrays and objects to be able to have an index value available for binding. For instance:

<template repeat="{{ myarray }}" index="i"> {{ i }} {{ somevalue }}</template>

Demonstration of object repeat template not working:

<!DOCTYPE html>
<html>
  <head>
    <script src="polymer.min.js" debug></script>
    <element name="v-bug">
        <template>
            Array Template:
            <template repeat="{{arraydata}}">
                {{}}
            </template><br>
            Object Template:
            <template repeat="{{objectdata}}">
                {{}}
            </template>
        </template>
        <script>
        Polymer.register(this, {
            objectdata: { alpha: 1, beta: 2, charlie: 3 },
            arraydata: [1,2,3]
        });
        </script>
    </element>
  </head>
  <body>
    <v-bug></v-bug><br>
  </body>
</html>

Allow declaring expressions as 'safe'

I understand why Polymer is escaping source code in expressions by default, but it should also be possible to declare an expression as 'safe' and allow it to return source code, as in other frameworks.

I like the handlebars triple mustache syntax.

<div>{{{ safeExpression }}}</div>

Computed properties still can't fully express all dependencies. Consider some mechanism of imperatively directing them to update

One can use filter syntax to conveniently construct computed properties. For example, I made a json-dump element that uses this construction:

{{object | stringify}}

Where stringify is a method on my element which stringifies an input object.

However, the stringified representation of object depends on more than object (iow, my filter has non-explicit dependencies on object's properties).

It's normal behavior for the binding not to update when object's properties changes, so it would be useful if there was a way to touch, tickle, or kick the binding explicitly when needed.

Strange syntax error with square brackets in template

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>

Need a design for registration of custom filters as well as a first batch of default (built-in) filters

Expression Comprehension

I have a set of points stored in an array which are mapped to an SVG path:

<template>
  <svg>
    <path d="M {{array | comprehension}}"/>
  </svg>
</template>

array: [{x:1, y:1}, {x:100, y:100}, {x:100, y:1}, {x:1, y:1}]
comprehension: function(a) {
  return a.map(function(e) {
    return e.x + ' ' + e.y;
  }).join(' L ')
}

However the points aren't updated because only the array is observed. It would be great if the following was possible:

<template>
  <svg>
    <path d="M {{array[0].x array[0].y}} L {{a.x + '  ' + a.y for a in array.splice(1)}}"/>
  </svg>
</template>

That's probably out of scope for the expressions project? I guess when an array object is unbound you'd have to make sure to unbind from the bound internal objects before it was removed.

If an alternate HTML spec SVG path had nested point elements:

<template>
  <svg>
    <path d="M {{a.x + '  ' + a.y for a in array}}"/>
      <template repeat="{{array}}">
        <point x="{{x}}" y="{{y}}"/>
      </template>
    </path>
  </svg>
</template>

Do you have any suggestions on how to solve this issue? Binding to the SVG elements via Polymer is very difficult at the moment. I'm not sure how to set up the bindings I need manually.

allow filters in "in" and "as" expressions

e.g. for use in <template bind/repeat>

dereferencing expressions do not bind correctly when the key contains dash "-"

This title may not be correct, it's a bit strange.

http://jsbin.com/fejepapi/2/edit

{{comments[key]}}

Does not update property when comments[key] is replaced and key contains a dash.

From the bin:

key: 'first' // works
key: 'f-irst' // doesn't work

polymer-expressions broken for semantic templates?

I saw this code in prepareBinding:

      if (expression.scopeIdent &&
          (node.nodeType !== Node.ELEMENT_NODE ||
           node.tagName !== 'TEMPLATE' ||
           (name !== 'bind' && name !== 'repeat'))) {
        throw Error('as and in can only be used within <template bind/repeat>');
      }

... but I can have templates like <td template repeat> right? And those wouldn't necessarily have tagName == 'TEMPLATE'.

improve syntax for filters with multiple parameters

Currently we can do:

{data | filter}}
...
filter: function(data) {

But if there are two values, we have to do:

{{data: data, more: more} | filter}}
...
filter: function(args) {

Which is wordy and uses a different call style.This has led to people using corruptions like this:

{{null | filter(data, more)}}
...
filter: function(_, data, more) {

Ideally we can figure out something that allows us to specify multiple dependencies without the crufty syntax.

function call syntax

not endorsing this, but I think it's the request at Polymer/polymer#693
the idea would be to support function call syntax like {{ foo(bar, baz) }}. I recall this being discussed but I don't think it's implemented.

Some variables in ternary operator are not updating display.

Repro code: https://dl.dropboxusercontent.com/u/5739705/polymer/ternary/test.html

I think that the hidden term at first time has been not observed its value.
The hidden term: It's the third term if the first term is truthy. Otherwise, it's the second term.

add on-* event bindings support

This is moved from: googlearchive/NodeBind#10

member expressions with identifiers are broken

e.g. foo[bar].bat will not work properly.

the issue is that the deps mechanism will observe

foo
bar
bat

Which is wrong. It needs to observe

bar
foo[bar].bat

dynamically

Document implications of expression scopes on filters

If I understand things correctly, PolymerExpressions always looks for defined filters in the current scope. This means that in this example

<template bind="{{ user.address }}">
    {{ street | shorten }}
</template>

PolymerExpressions will look for the shorten filter on user.address object instead of the elements prototype. I'm assuming this is the intended behavior but I suspect it will trip up quite a lot of people so it should probably be documented somewhere.

should an expression fail to render if filter does not exist

I feel like the expression should be ignored (and still render value) if filter doesn't exist in the scope. so {{myValue | toUpper}} should still render to DOM even if the toUpper filter does not exist.

Filters bind incorrectly in template with anonymous repeat

If I try and bind something like this:

<template repeat="{{myItems}}">
    {{ property | myCustomFilter }}
</template>

The filter doesn't run correctly.

However, if I change the HTML to be:

<template repeate="{{item in myItems}}">
    {{ item.property | myCustomFilter }}
</template>

The filter runs correctly. I think it should run in both cases.

What should named scopes do when the scope *name* is bound to an input value

Moved from: googlearchive/TemplateBinding#109

i.e.

<template repeat="{{ user in users }}">
   <input value="{{ user }}">
</template>

Seems like the two choices are

1. Up the element position in the iterated Array. This seems scary, as it will destroy the instance and create a new one

2. Issue a warning.

support binding to HTMLInputElement.valueAsNumber property

need number filter

moved from:

googlearchive/TemplateBinding#84

Cache expressions

Expression parsing is currently showing up in profiling.

test failure after issue29 - 3 test on IE11

Running IE11 on the "issue 29 - 3" test it passes, but there's a failure on cleanup afterwards.

Not entirely sure if it's that test, the results seem timing dependent. Some of the early investigation notes are here: #43 (comment)

(edit: it's 29-3 not 29-2. can be seen by running http://localhost:8000/polymer-expressions/tests/index.html?grep=issue-29 - 3)

Scope-level filters should take precedence over 'global' filters

Currently, filters defined on PolymerExpressions.prototype take precedence over filters defined on the current model/scope. I think it should be the other way around as the current scope obviously has a higher specificity than the 'global' filter scope.

Error with `<tr template repeat="{{tr in rows}}">`

https://github.com/Polymer/polymer-expressions/blob/master/src/polymer-expressions.js#L17

I think to throw an error here if node.tagName !== 'TEMPLATE'

Tests failing on Windows

The computed property with object index and computed property with object index - assignment tests are currently failing on all platforms on windows.

class="foo {{ {bar: true} | tokenList }}" excludes foo

http://jsbin.com/acolUxu/1/edit

This works here, but on head seems to be broken.

Support binding to events with mixed case

A number of dom events have mixed case. Attributes are all lowercase so we can't match the event name directly using the attribute.

Here's a partial list with mappings:

{
  webkitanimationstart: 'webkitAnimationStart',
  webkitanimationend: 'webkitAnimationEnd',
  webkittransitionend: 'webkitTransitionEnd',
  domfocusout: 'DOMFocusOut',
  domfocusin: 'DOMFocusIn',
  dommousescroll: 'DOMMouseScroll'
}

Unintended Semicolon in if statement

Introduced:
e8ca9c0#diff-368560b32795b265ae8f22c45179d21dR118

In IdentPath

    setValue: function(model, newValue) {
      if (this.path.length == 1); // <-- Semicolon should be removed.
        model = findScope(model, this.path[0]);

      return this.path.setValueFrom(model, newValue);
    }

Bindings of the form `{{items[index]}}` do not update when `index` differs from it's initial value, and `items[index]` changes

We tried to reduce this problem to this smallish form:

http://jsbin.com/rotow/5/edit

But as noted in the title, the problem behavior requires specific steps. Click on the JSBin to see the steps.

@arv, @rafaelw

implement non-dynamic deps expressions which can enumerate complete paths

Expressions like 1 > foo.bar will currently generate two addPath() calls. If model.foo is initially null, when model.foo.bar becomes reachable, it must be observed.

Rather than having all expressions reset their dependencies on any change, implement a way for non-dynamic deps expressions to enumerate full paths (in the above example foo.bar)

Null paths throw exceptions with "as" syntax

If a template is bound to a path that would evaluate an undefined model member, then an exception is thrown at https://github.com/Polymer/polymer-expressions/blob/master/src/polymer-expressions.js#L149

Example:

  <template id="t" bind="{{ foo.bar as b }}">
    <span>{{ b }}</span>
  </template>
  <script>
    t.bindingDelegate = new PolymerExpressions();
    t.model = {};
  </script>

Provide some standalone examples

I tried to write a test case for googlearchive/TemplateBinding#188, but got stuck because there weren't any simple examples of the filtering library. TemplateBinding provides some at https://github.com/Polymer/TemplateBinding/tree/master/examples/how_to, but those don't include named scopes or filters because those features are provided by this library instead.

Question: Advice for how to implement global filters in 1.0

In .5, we could write global filters:

PolymerExpressions.prototype.uppercase = function(input) {
  if (input) {
    return input.toUpperCase();
  }
};

And bind data piped through the filter {{data | uppercase}}

In 1.0, we'd do something like this: {{uppercase(data)}}.

I'm wondering if there's a recommended approach to making the function (ie: uppercase) available to all custom-elements in my project?

remove support for labelled statements

this will be breaking change when we do it.

Expression based on array does not update when array is modified

See http://jsbin.com/wemunuzulonu/2/edit for several examples, type something in the input box and watch the behaviour.

Implement sort and filter array filters

Moved from: googlearchive/TemplateBinding#103

scope names in expressions can collide with other references

Please update the issue title as needed, I'm not being super precise.

An expression like this

<polymer-element name="test-element" attributes="property">
<template>
  <template repeat="{{id in ['a', 'b', 'c']}}">

Throws or has unusual behavior when the alias variable (id in this case) corresponds to an HTMLElement built-in.

Repro: http://jsbin.com/wediq/2/edit

Fwiw, I've also seen alias variables affect an element's properties, but I didn't capture the details, I'm working on a repro.

Should support "last" filter for array access

You can write {{ object.foo[object.foo.length - 1] }} but it's really gross, you should be able to just write {{ object.foo | last }}.

{{ myArrray[ myKey ] }} isn't a valid expression

I tried to use an expression of the form {{ myArrray[ myKey ] }} where my array and my key both are defined values of my custom-element instance but I get the following error: Exception caught during observer callback.
Looking at the documentation for expression, it seems that what I'm trying to achieve isn't possible yet.

Could you help me make it work?

support binding to HTMLInputElement.valueAsDate property

The solution is to implement a built-in date filter which servers the same purpose.

Moved from: googlearchive/TemplateBinding#85