Skip to content

updating the-grid to support Polymer 3.0#34

Open
aveiga wants to merge 1 commit intovpusher:masterfrom
aveiga:master
Open

updating the-grid to support Polymer 3.0#34
aveiga wants to merge 1 commit intovpusher:masterfrom
aveiga:master

Conversation

@aveiga
Copy link

@aveiga aveiga commented May 10, 2018

Polymer 3 has just been released.

I've run the polymer-modulizer and made the necessary changes to migrate the-grid to Polymer 3.0. The demo is working flawlessly but there's still some problems:

What's still not working:

  • the playground demo
  • the responsive demo
  • 8 unit tests

As these don't seem to affect general functionality I think we can create the relevant issues and deal with them later.

Note: This is a breaking change! Hence, this should bump the major version.

@danielgek
Copy link
Contributor

@vpusher are you still maintaining this? or you will not give more support ?

@vpusher
Copy link
Owner

vpusher commented May 20, 2018

Yes I still maintain this component but as a best effort basis. I already planned to migrate the component to Polymer 3. Just waiting for the official release. In the meantime, feel free to PR for any needs 😉

@danielgek
Copy link
Contributor

awesome XD i think @aveiga needs to rebase 👍

Copy link
Owner

@vpusher vpusher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we style need bower.json ? I don't think so. Please update README also. Thx.

@@ -1,3 +1,4 @@
bower_components/
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need that anymore.

$_documentContainer.setAttribute('style', 'display: none;');

<dom-module id="grid-styles">
$_documentContainer.innerHTML = `<dom-module id="grid-styles">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What the hell is that ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I had a look. It looks like we should get rid of the styles modules. Let's go back to the basics. Create a simple stylesheet and import it as usual CSS.

See: https://github.com/Polymer/polymer-modulizer/issues/154
-->
<script type="module">
const $_documentContainer = document.createElement('div');
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, can't we avoid that ?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my comment above

"main": "the-grid.html",
"homepage": "https://github.com/vpusher/the-grid",
"dependencies": {
"@polymer/polymer": "^3.0.0-pre.1"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move to release please.

"web-component",
"web-components",
"polymer",
"polymer2"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

polymer 3

},
"devDependencies": {
"@polymer/iron-component-page": "^3.0.0-pre.19",
"@polymer/iron-demo-helpers": "^3.0.0-pre.19",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move to release please.

@demo demo/playground.html Playground
@demo demo/responsive.html Responsiveness
*/
class TheGrid extends GestureEventListeners(PolymerElement) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering if we should go LitElement of not ?

<tile col="3" row="1" height="2" width="1"></tile>
<tile col="4" row="0" height="3" width="2"></tile>
<div placeholder></div>
<div placeholder=""></div>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is no way we can declare an attribute without value ? The syntax is is bit ugly...

return Math.round(Math.random() * 15);
}
</script>
&lt;/script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

?

<script type="module">
const $_documentContainer = document.createElement('div');

$_documentContainer.innerHTML = `<custom-style>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use classic stylesheet here.

@vpusher
Copy link
Owner

vpusher commented May 29, 2018

@aveiga Will you have time to do then changes and fix the conflict ?

@uplg
Copy link

uplg commented Jan 26, 2019

Made a Polymer3 working version (used in a lit-element project) https://gist.github.com/Ghostfly/ed0839700f0a53e7fbeecad128cfb2e7

I think it's better in Polymer3 as gestures event listeners are really great

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants