vaadin-grid Polymer 2.0 support #710

macjuan · 2017-02-15T08:05:46Z

Developers can use vaadin-grid with Polymer2 projects

See more on IDEA 210 vaadin-grid Polymer 2.0 support

Premilinary Steps: (by @Saulis)

~~In preparation for using <slot>, place cells inside shadow root of <vaadin-grid>~~
Switch <content> for <slot> and ::content to ::slotted()
Replace custom elements extending native elements
~~Separate "fixed" elements sections to improve UX~~
Revise and fix multi-property observers with checks for undefined values
Replace <style is="custom-style"> with <custom-style>
Modify the Templatizer functionality to work with both v1 and v2
Deprecate CSS mixins
~~Modify scroller internals to use a flexbox~~

Other notable changes:

Polymer.dom(x).querySelectorAll(..) returns NodeList instead of Array
<slot> without a name cannot have fallback/default content
Polymer.Settings.useNativeShadow -> Polymer.Settings.useShadow
Polymer.dom.flush() no longer flushes mutation observers, they need to be explicitly flushed.
adding listeners using target.click: _onClick in listeners block doesn't work

The text was updated successfully, but these errors were encountered:

tomivirkki · 2017-02-27T11:15:23Z

Things to consider:

Instead of fixing the current iron-list-behavior to support Polymer 2/re-integrating the 2.0-preview version of <iron-list>, we could switch to using a “flexbox-scroller” (a virtual scroller based on flexbox layout, at prototype phase currently) which would solve performance issues + eliminate excess code from the current approach. The new scroller behavior would also serve as a basis for a shared scroller component used in other Vaadin Elements requiring a virtual scroller.
Since we’re anyway dropping <table> DOM structure from the grid during the process, we could separate header/footer/body/“fixed elements section” into dedicated containers. This would improve UX (more expected scrollbar positioning) and could further improve scrolling performance.

Saulis · 2017-03-03T07:00:36Z

Also, we can most likely have only one shadow root between the cell containers in <vaadin-grid>'s light DOM and the cells.

jouni · 2017-03-13T08:55:02Z

Regarding the proposal of refactoring fixed elements to their own containers (which is currently struck out), to which I commented that it prevents the use of :hover styles for the rows:

We should evaluate the tradeoffs here. Is it more beneficial to have the scrolling more smooth, at the expense of making it more difficult to add hover styles?

I mean, we could move the fixed elements to their own containers and then add mouse event listeners for the row elements that toggles a [hovered] attribute on the row element, which could then be used by the theme. This wouldn’t be any different from what we are doing with vaadin-text-field and its [focused] state toggling.

So, how big of a performance and styling convenience penalty would we get from toggling the ´[hovered]` attribute on each row (it should probably be prevented during scrolling anyways) vs. the performance penalty we get from supporting fixed elements inside the scrolling container?

jouni · 2017-03-13T08:56:06Z

Added one more thing to consider during this refactoring: deprecate CSS mixins. This should apply to all of our hybrid elements (the next minor versions).

Edit: in case someone is wondering why, the reason is that since the future support for CSS mixins is currently under consideration by the W3C working group, we don’t want to depend on it. Also, as a mechanism for comprehensive styling support, they are not really that ideal. See this issue for more discussion and details.

lchen2017 · 2017-03-15T18:51:59Z

We do see a lot of errors under Polymer 2.0 with 2.1-polymer-2 branch, so my question is when vaadin-grid will be available for alpha testing .

platosha · 2017-03-16T14:13:28Z

@lchen2017 as soon as we can. Unfortunately, it turned out to be challenging to port such a complex element, but we are actively working on it these days. Please keep watching this issue to track the progress.

lchen2017 · 2017-03-16T17:13:26Z

@platosha Thanks! are there any tasks we can help with?

Saulis · 2017-03-23T12:16:41Z

A small update for those interested: the 2.1-polymer-2 contains the latest development branch regarding Polymer 2 support.

Current situation: all tests are currently passing on Chrome + Polymer 2.0.0-rc.3, both on native Shadow and Shady. Although at least Firefox and Safari seem to be working also, there might be some small issues here and there. We're going to address those next and then make sure everything still works with Polymer 1.x.

If you try the dev branch out and find problems, please don't file new issues at this point yet, but instead add a comment here or contact us in the Gitter chat room. Thanks!

Update: Safari and Firefox pass tests now also on Polymer 2.

victorhooi · 2017-04-01T22:45:21Z

Curious - what does moving this from in-progress to backlog mean, for those of us hoping to use vaadin-grid under Polymer 2.x? =)

Saulis · 2017-04-03T04:52:27Z

Hi @victorhooi!

We had to change priorities for a week or two to work on other things, but rest assured, we'll pick it back up shortly.
Meanwhile, you can try out how the 2.1-polymer-2 works for you.

andersforsell · 2017-04-03T06:58:34Z

@Saulis I'm having trouble in getting all dependencies right with bower install. Its complaining about "ECONFLICT Unable to find suitable version for webcomponentsjs". (using Polymer-cli@next)

Can you give a hint on how to get it right?

Saulis · 2017-04-03T08:17:34Z

@andersforsell hmm strange.. which exact version of Polymer CLI are you running? Mine reports 0.18.0-pre.15

Tried clearing out my bower cache and everything and everything seems to install smoothly.
Can you join me in our Gitter chat for further discussions? Thanks!

victorhooi · 2017-04-03T12:43:25Z

I'm also seeing weirdness/issues around package versions. I'm running Polymer CLI 0.18.0-pre-15.

victorhooi@victorhooi-macbookpro /p/t/vaadin-grid-test> polymer --version
0.18.0-pre.15

I create a new Polymer 2.0 project:

polymer init polymer-2-starter-kit

I then try to install vaadin-grid:

victorhooi@victorhooi-macbookpro /p/t/vaadin-grid-test> bower install --save vaadin/vaadin-grid#2.1-polymer-2
bower vaadin-grid#2.1-polymer-2       not-cached https://github.com/vaadin/vaadin-grid.git#2.1-polymer-2
bower vaadin-grid#2.1-polymer-2          resolve https://github.com/vaadin/vaadin-grid.git#2.1-polymer-2
bower vaadin-grid#2.1-polymer-2         download https://github.com/vaadin/vaadin-grid/archive/2.1-polymer-2.tar.gz
bower vaadin-grid#2.1-polymer-2          extract archive.tar.gz
bower vaadin-grid#2.1-polymer-2         resolved https://github.com/vaadin/vaadin-grid.git#85bca5cb14
bower iron-resizable-behavior#^1.0.5      cached https://github.com/PolymerElements/iron-resizable-behavior.git#1.0.5
bower iron-resizable-behavior#^1.0.5    validate 1.0.5 against https://github.com/PolymerElements/iron-resizable-behavior.git#^1.0.5
bower iron-scroll-target-behavior#^1.1.0  cached https://github.com/PolymerElements/iron-scroll-target-behavior.git#1.1.1
bower iron-scroll-target-behavior#^1.1.0         validate 1.1.1 against https://github.com/PolymerElements/iron-scroll-target-behavior.git#^1.1.0
bower polymer#^1.6.1                               cached https://github.com/Polymer/polymer.git#1.8.1
bower polymer#^1.6.1                             validate 1.8.1 against https://github.com/Polymer/polymer.git#^1.6.1
bower iron-a11y-keys-behavior#^1.1.9               cached https://github.com/PolymerElements/iron-a11y-keys-behavior.git#1.1.9
bower iron-a11y-keys-behavior#^1.1.9             validate 1.1.9 against https://github.com/PolymerElements/iron-a11y-keys-behavior.git#^1.1.9
bower iron-a11y-announcer#^1.0.5                   cached https://github.com/PolymerElements/iron-a11y-announcer.git#1.0.5
bower iron-a11y-announcer#^1.0.5                 validate 1.0.5 against https://github.com/PolymerElements/iron-a11y-announcer.git#^1.0.5
bower webcomponentsjs#^0.7.24                      cached https://github.com/Polymer/webcomponentsjs.git#0.7.24
bower webcomponentsjs#^0.7.24                    validate 0.7.24 against https://github.com/Polymer/webcomponentsjs.git#^0.7.24
bower webcomponentsjs#^v1.0.0-rc.5                 cached https://github.com/Polymer/webcomponentsjs.git#1.0.0-rc.7
bower webcomponentsjs#^v1.0.0-rc.5               validate 1.0.0-rc.7 against https://github.com/Polymer/webcomponentsjs.git#^v1.0.0-rc.5

Unable to find a suitable version for iron-resizable-behavior, please choose one by typing one of the numbers below:
    1) iron-resizable-behavior#2.0-preview which resolved to 4c10452634 and is required by app-layout#d1aa650ded, iron-pages#798b292446
    2) iron-resizable-behavior#^1.0.5 which resolved to 1.0.5 and is required by vaadin-grid#85bca5cb14

Prefix the choice with ! to persist it to bower.json

? Answer 1

Unable to find a suitable version for iron-scroll-target-behavior, please choose one by typing one of the numbers below:
    1) iron-scroll-target-behavior#2.0-preview which resolved to 3ec8fe6009 and is required by app-layout#d1aa650ded
    2) iron-scroll-target-behavior#^1.1.0 which resolved to 1.1.1 and is required by vaadin-grid#85bca5cb14

Prefix the choice with ! to persist it to bower.json

? Answer 1

Unable to find a suitable version for polymer, please choose one by typing one of the numbers below:
    1) polymer#^1.1.0 which resolved to 1.8.1 and is required by iron-a11y-announcer#1.0.5, iron-a11y-keys-behavior#1.1.9, iron-resizable-behavior#1.0.5, iron-scroll-target-behavior#1.1.1
    2) polymer#^1.6.1 which resolved to 1.8.1 and is required by vaadin-grid#85bca5cb14
    3) polymer#^2.0.0-rc.1 which resolved to 2.0.0-rc.3 and is required by app-layout#d1aa650ded, app-route#8f4f7acc27, iron-a11y-keys-behavior#fa811ff11f, iron-behaviors#a27904b516, iron-checked-element-behavior#6257d75137, iron-flex-layout#ec9a1f91d9, iron-form-element-behavior#e5975d6a19, iron-icon#55fe529584, iron-iconset-svg#1ba09ae80e, iron-localstorage#5603bdcd15, iron-location#9ba94fa17b, iron-media-query#6dc49cdc2b, iron-meta#1421651c70, iron-pages#798b292446, iron-resizable-behavior#4c10452634, iron-scroll-target-behavior#3ec8fe6009, iron-selector#e7107b383f, iron-validatable-behavior#325063248a, paper-behaviors#b66457441b, paper-icon-button#ffb9c64bcf, paper-ripple#f82228704f, paper-styles#86e6abcc81, polymer-starter-kit

Prefix the choice with ! to persist it to bower.json

? Answer 3

Unable to find a suitable version for iron-a11y-keys-behavior, please choose one by typing one of the numbers below:
    1) iron-a11y-keys-behavior#2.0-preview which resolved to fa811ff11f and is required by iron-behaviors#a27904b516, paper-ripple#f82228704f
    2) iron-a11y-keys-behavior#^1.1.9 which resolved to 1.1.9 and is required by vaadin-grid#85bca5cb14

Prefix the choice with ! to persist it to bower.json

? Answer 1

Unable to find a suitable version for webcomponentsjs, please choose one by typing one of the numbers below:
    1) webcomponentsjs#^0.7.24 which resolved to 0.7.24 and is required by polymer#1.8.1
    2) webcomponentsjs#^1.0.0-rc.4 which resolved to 1.0.0-rc.7 and is required by polymer-starter-kit
    3) webcomponentsjs#^v1.0.0-rc.5 which resolved to 1.0.0-rc.7 and is required by polymer#2.0.0-rc.3

Prefix the choice with ! to persist it to bower.json

? Answer 3
bower webcomponentsjs#^v1.0.0-rc.5                install webcomponentsjs#1.0.0-rc.7
bower vaadin-grid#2.1-polymer-2                   install vaadin-grid#85bca5cb14
bower iron-a11y-announcer#^1.0.5                  install iron-a11y-announcer#1.0.5

webcomponentsjs#1.0.0-rc.7 bower_components/webcomponentsjs

vaadin-grid#85bca5cb14 bower_components/vaadin-grid
├── iron-a11y-announcer#1.0.5
├── iron-a11y-keys-behavior#fa811ff11f
├── iron-resizable-behavior#4c10452634
├── iron-scroll-target-behavior#3ec8fe6009
└── polymer#2.0.0-rc.3

iron-a11y-announcer#1.0.5 bower_components/iron-a11y-announcer
└── polymer#2.0.0-rc.3

Is the above expected?

Saulis · 2017-04-04T08:44:56Z

@victorhooi hi!

Yes, currently it's expected since we are still having Polymer 1.x dependencies as defaults for the hybrid version, which requires dependency resolution when using Polymer 2.

After the hybrid is released, the plan is to start working towards a Polymer 2-only version which will have the Polymer 2.0 dependencies.

nicolasr75 · 2017-04-13T10:59:55Z

I am trying to use the Polymer-2 version in Chrome with the simple binding example and get

this._debounceTemplate is not a function
at HTMLElement._sizeChanged (vaadin-grid-table.html:557)

I find the following implementation in Polymer 1.0

_debounceTemplate: function (fn) {
    Polymer.dom.addDebouncer(this.debounce('_debounceTemplate', fn));
}

Any idea how I could fix this in vaadin-grid-table.html to make progress?
Thanks, Nicolas

Edit:
this may be helpful http://stackoverflow.com/questions/42773171/debouncer-in-polymer-2-0

Saulis · 2017-04-20T09:48:22Z

@nicolasr75 which branch/version of vaadin-grid are you using?

nicolasr75 · 2017-04-20T09:50:32Z

@Saulis Sorry, I forgot. I use 2.1-Polymer-2.

Saulis · 2017-04-20T10:26:37Z

@nicolasr75 can you double-check that?
The line vaadin-grid-table.html:557 doesn't call _debounceTemplate

Try calling bower cache clean and reinstalling vaadin-grid to make sure you're running the latest version of the branch.

nicolasr75 · 2017-04-20T23:07:51Z

@Saulis You are right, somehow my packages were messed up. With a new project everything so far works as expected. Sorry for wasting your time. Keep up the good work!

amahdy · 2017-05-04T08:02:18Z

+1

lchen2017 · 2017-05-31T23:23:09Z

We have migrated all other components to Polymer 2.0 except vaadin-grid. Question is which branch can be used right now, 2.1-polymer-2-rebased or something else. Also, which branch (Polymer 2.0 compatible) is working in IE 11? Thanks!

Saulis · 2017-06-01T11:48:49Z

@lchen2017 there's a v3.0.0-alpha1 release with Polymer 2.0 support.

lchen2017 · 2017-06-01T17:48:32Z

@Saulis Thanks. Appreciate if you can update us on support for IE11.

manolo · 2017-06-01T17:51:18Z

v3.0.0-alpha1 should work for IE11. Does not work for you?

lchen2017 · 2017-06-01T18:06:01Z

@manolo No, it doesn't work.

manolo · 2017-06-01T18:13:49Z

what version of polymer are you using ? Are you compiling your javascript to ES5 ?

lchen2017 · 2017-06-01T18:38:26Z

@manolo It doesn't work with Polymer 2.0 when we use vaadin 2.1-polymer-2 code. We will try release v3.0.0-alpha1 and let you know. Thanks!

Fixes vaadin#710

Saulis added the backlog label Feb 15, 2017

Saulis added needs design Design is needed sprint backlog and removed backlog needs design Design is needed labels Mar 8, 2017

Saulis assigned Saulis and tomivirkki Mar 13, 2017

Saulis added in progress and removed sprint backlog labels Mar 13, 2017

This was referenced Mar 13, 2017

Replace <content> with <slot> #800

Merged

Add undefined guards to multi-property observers #801

Merged

tomivirkki mentioned this issue Mar 13, 2017

2.1 drop extensions #803

Merged

jouni mentioned this issue Mar 14, 2017

Question : How to auto adjust Height of entire grid? #786

Closed

tomivirkki mentioned this issue Mar 14, 2017

Make body relative and wrap sizer #804

Merged

jouni mentioned this issue Mar 17, 2017

Is Vaadin grid compatible with polymer 2.0? #809

Closed

platosha assigned platosha and unassigned platosha Mar 21, 2017

Saulis added backlog and removed in progress labels Mar 28, 2017

platosha added sprint backlog and removed backlog labels May 5, 2017

platosha assigned platosha and unassigned Saulis May 5, 2017

upstairlounge added in progress and removed sprint backlog labels May 9, 2017

tomivirkki mentioned this issue May 18, 2017

Grid 2 hybrid #880

Merged

tomivirkki added in review and removed in progress labels May 18, 2017

Saulis closed this as completed in #880 May 19, 2017

Saulis removed the in review label May 19, 2017

Saulis added this to the 3.0.0-alpha1 milestone May 19, 2017

HJK181 pushed a commit to CommerceExperts/vaadin-grid that referenced this issue Jul 27, 2020

fix: add loader part and style loading items state

42b2f77

Fixes vaadin#710

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vaadin-grid Polymer 2.0 support #710

vaadin-grid Polymer 2.0 support #710

macjuan commented Feb 15, 2017 •

edited by ahm3din

Loading

tomivirkki commented Feb 27, 2017

Saulis commented Mar 3, 2017 •

edited

Loading

jouni commented Mar 13, 2017

jouni commented Mar 13, 2017 •

edited

Loading

lchen2017 commented Mar 15, 2017

platosha commented Mar 16, 2017

lchen2017 commented Mar 16, 2017

Saulis commented Mar 23, 2017 •

edited

Loading

victorhooi commented Apr 1, 2017

Saulis commented Apr 3, 2017

andersforsell commented Apr 3, 2017

Saulis commented Apr 3, 2017

victorhooi commented Apr 3, 2017

Saulis commented Apr 4, 2017

nicolasr75 commented Apr 13, 2017 •

edited

Loading

Saulis commented Apr 20, 2017

nicolasr75 commented Apr 20, 2017

Saulis commented Apr 20, 2017

nicolasr75 commented Apr 20, 2017

amahdy commented May 4, 2017

lchen2017 commented May 31, 2017

Saulis commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

manolo commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

manolo commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

vaadin-grid Polymer 2.0 support #710

vaadin-grid Polymer 2.0 support #710

Comments

macjuan commented Feb 15, 2017 • edited by ahm3din Loading

tomivirkki commented Feb 27, 2017

Saulis commented Mar 3, 2017 • edited Loading

jouni commented Mar 13, 2017

jouni commented Mar 13, 2017 • edited Loading

lchen2017 commented Mar 15, 2017

platosha commented Mar 16, 2017

lchen2017 commented Mar 16, 2017

Saulis commented Mar 23, 2017 • edited Loading

victorhooi commented Apr 1, 2017

Saulis commented Apr 3, 2017

andersforsell commented Apr 3, 2017

Saulis commented Apr 3, 2017

victorhooi commented Apr 3, 2017

Saulis commented Apr 4, 2017

nicolasr75 commented Apr 13, 2017 • edited Loading

Saulis commented Apr 20, 2017

nicolasr75 commented Apr 20, 2017

Saulis commented Apr 20, 2017

nicolasr75 commented Apr 20, 2017

amahdy commented May 4, 2017

lchen2017 commented May 31, 2017

Saulis commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

manolo commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

manolo commented Jun 1, 2017

lchen2017 commented Jun 1, 2017

macjuan commented Feb 15, 2017 •

edited by ahm3din

Loading

Saulis commented Mar 3, 2017 •

edited

Loading

jouni commented Mar 13, 2017 •

edited

Loading

Saulis commented Mar 23, 2017 •

edited

Loading

nicolasr75 commented Apr 13, 2017 •

edited

Loading