Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Commit e96167d

Browse files
authored
Merge pull request #1027 from PolymerElements/2.0-preview
Migrate PSK to Polymer 2.0
2 parents 8e1030c + 1e0eeed commit e96167d

14 files changed

+123
-109
lines changed

.eslintrc.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
{
22
"extends": ["eslint:recommended", "google"],
3+
"parserOptions": {
4+
"ecmaVersion": 6
5+
},
36
"env": {
47
"browser": true
58
},
69
"plugins": [
710
"html"
811
],
912
"rules": {
13+
"brace-style": "off",
14+
"new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }],
1015
"no-var": "off",
11-
"new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }]
16+
"require-jsdoc": "off"
1217
},
1318
"globals": {
1419
"Polymer": true

bower.json

+13-10
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@
55
],
66
"license": "https://polymer.github.io/LICENSE.txt",
77
"dependencies": {
8-
"app-layout": "PolymerElements/app-layout#^1.0.0",
9-
"app-route": "PolymerElements/app-route#^1.0.0",
10-
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.0",
11-
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.1.0",
12-
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
13-
"iron-pages": "PolymerElements/iron-pages#^1.0.0",
14-
"iron-selector": "PolymerElements/iron-selector#^1.5.0",
15-
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.0",
16-
"polymer": "Polymer/polymer#^1.9.0",
17-
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
8+
"app-layout": "PolymerElements/app-layout#^2.0.0",
9+
"app-route": "PolymerElements/app-route#^2.0.0",
10+
"iron-flex-layout": "PolymerElements/iron-flex-layout#^2.0.0",
11+
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#^2.0.0",
12+
"iron-media-query": "PolymerElements/iron-media-query#^2.0.0",
13+
"iron-pages": "PolymerElements/iron-pages#^2.0.0",
14+
"iron-selector": "PolymerElements/iron-selector#^2.0.0",
15+
"paper-icon-button": "PolymerElements/paper-icon-button#^2.0.0",
16+
"polymer": "Polymer/polymer#^2.0.0",
17+
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
18+
},
19+
"resolutions": {
20+
"polymer": "^2.0.0"
1821
},
1922
"devDependencies": {
2023
"web-component-tester": "Polymer/web-component-tester#^6.0.0"

index.html

+8-42
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,6 @@
6060
<meta name="msapplication-tap-highlight" content="no">
6161

6262
<script>
63-
// Setup Polymer options
64-
window.Polymer = {
65-
dom: 'shadow',
66-
lazyRegister: true,
67-
};
68-
6963
/**
7064
* [polymer-root-path]
7165
*
@@ -78,42 +72,9 @@
7872
* to indicate the path from which you'll be serving, including leading
7973
* and trailing slashes (e.g., `/my-app/`).
8074
*/
81-
window.Polymer.rootPath = '/';
82-
83-
// Load webcomponentsjs polyfill if browser does not support native
84-
// Web Components
85-
(function() {
86-
'use strict';
87-
88-
var onload = function() {
89-
// For native Imports, manually fire WebComponentsReady so user code
90-
// can use the same code path for native and polyfill'd imports.
91-
if (!window.HTMLImports) {
92-
document.dispatchEvent(
93-
new CustomEvent('WebComponentsReady', {bubbles: true})
94-
);
95-
}
96-
};
97-
98-
var webComponentsSupported = (
99-
'registerElement' in document
100-
&& 'import' in document.createElement('link')
101-
&& 'content' in document.createElement('template')
102-
);
103-
104-
if (!webComponentsSupported) {
105-
var script = document.createElement('script');
106-
script.async = true;
107-
script.src =
108-
'bower_components/webcomponentsjs/webcomponents-lite.min.js';
109-
script.onload = onload;
110-
document.head.appendChild(script);
111-
} else {
112-
onload();
113-
}
114-
})();
115-
116-
// Load pre-caching Service Worker
75+
window.Polymer = {rootPath: '/'};
76+
77+
// Load and register pre-caching Service Worker
11778
if ('serviceWorker' in navigator) {
11879
window.addEventListener('load', function() {
11980
navigator.serviceWorker.register('service-worker.js', {
@@ -123,8 +84,13 @@
12384
}
12485
</script>
12586

87+
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
88+
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
89+
90+
<!-- Load your application shell -->
12691
<link rel="import" href="src/my-app.html">
12792

93+
<!-- Add any global styles for body, document, etc. -->
12894
<style>
12995
body {
13096
margin: 0;

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"eslint-plugin-html": "^2.0.0"
88
},
99
"scripts": {
10-
"lint": "npm run lint:javascript",
10+
"lint": "npm run lint:javascript && polymer lint",
1111
"lint:javascript": "eslint . --ext js,html --ignore-path .gitignore",
1212
"test": "polymer test",
1313
"test:integration": "polymer build # test that psk builds without error with the CLI"

polymer.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
],
1515
"extraDependencies": [
1616
"manifest.json",
17-
"bower_components/webcomponentsjs/webcomponents-lite.min.js"
17+
"bower_components/webcomponentsjs/*.js"
1818
],
1919
"lint": {
20-
"rules": ["polymer-1"]
20+
"rules": ["polymer-2"]
2121
},
2222
"builds": [
2323
{

src/my-app.html

+54-26
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
1313
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
1414
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
@@ -22,6 +22,11 @@
2222
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
2323
<link rel="import" href="my-icons.html">
2424

25+
<link rel="lazy-import" href="my-view1.html">
26+
<link rel="lazy-import" href="my-view2.html">
27+
<link rel="lazy-import" href="my-view3.html">
28+
<link rel="lazy-import" href="my-view404.html">
29+
2530
<dom-module id="my-app">
2631
<template>
2732
<style>
@@ -32,10 +37,15 @@
3237
display: block;
3338
}
3439

40+
app-drawer-layout:not([narrow]) [drawer-toggle] {
41+
display: none;
42+
}
43+
3544
app-header {
3645
color: #fff;
3746
background-color: var(--app-primary-color);
3847
}
48+
3949
app-header paper-icon-button {
4050
--paper-icon-button-ink-color: white;
4151
}
@@ -67,7 +77,7 @@
6777

6878
<app-drawer-layout fullbleed narrow="{{narrow}}">
6979
<!-- Drawer content -->
70-
<app-drawer id="drawer" swipe-open="[[narrow]]">
80+
<app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
7181
<app-toolbar>Menu</app-toolbar>
7282
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
7383
<a name="view1" href="[[rootPath]]view1">View One</a>
@@ -79,7 +89,7 @@
7989
<!-- Main content -->
8090
<app-header-layout has-scrolling-region>
8191

82-
<app-header condenses reveals effects="waterfall">
92+
<app-header slot="header" condenses reveals effects="waterfall">
8393
<app-toolbar>
8494
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
8595
<div main-title>My App</div>
@@ -101,38 +111,56 @@
101111
</template>
102112

103113
<script>
104-
Polymer({
105-
is: 'my-app',
106-
107-
properties: {
108-
page: {
109-
type: String,
110-
reflectToAttribute: true,
111-
observer: '_pageChanged',
112-
},
113-
},
114-
115-
observers: [
116-
'_routePageChanged(routeData.page)',
117-
],
118-
119-
_routePageChanged: function(page) {
114+
class MyApp extends Polymer.Element {
115+
static get is() { return 'my-app'; }
116+
117+
static get properties() {
118+
return {
119+
page: {
120+
type: String,
121+
reflectToAttribute: true,
122+
observer: '_pageChanged',
123+
},
124+
routeData: Object,
125+
subroute: String,
126+
// This shouldn't be neccessary, but the Analyzer isn't picking up
127+
// Polymer.Element#rootPath
128+
rootPath: String,
129+
};
130+
}
131+
132+
static get observers() {
133+
return [
134+
'_routePageChanged(routeData.page)',
135+
];
136+
}
137+
138+
_routePageChanged(page) {
139+
// If no page was found in the route data, page will be an empty string.
140+
// Deault to 'view1' in that case.
120141
this.page = page || 'view1';
121142

143+
// Close a non-persistent drawer when the page & route are changed.
122144
if (!this.$.drawer.persistent) {
123145
this.$.drawer.close();
124146
}
125-
},
147+
}
126148

127-
_pageChanged: function(page) {
149+
_pageChanged(page) {
128150
// Load page import on demand. Show 404 page if fails
129151
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
130-
this.importHref(resolvedPageUrl, null, this._showPage404, true);
131-
},
152+
Polymer.importHref(
153+
resolvedPageUrl,
154+
null,
155+
this._showPage404.bind(this),
156+
true);
157+
}
132158

133-
_showPage404: function() {
159+
_showPage404() {
134160
this.page = 'view404';
135-
},
136-
});
161+
}
162+
}
163+
164+
window.customElements.define(MyApp.is, MyApp);
137165
</script>
138166
</dom-module>

src/my-view1.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212
<link rel="import" href="shared-styles.html">
1313

1414
<dom-module id="my-view1">
@@ -30,8 +30,10 @@ <h1>View One</h1>
3030
</template>
3131

3232
<script>
33-
Polymer({
34-
is: 'my-view1',
35-
});
33+
class MyView1 extends Polymer.Element {
34+
static get is() { return 'my-view1'; }
35+
}
36+
37+
window.customElements.define(MyView1.is, MyView1);
3638
</script>
3739
</dom-module>

src/my-view2.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212
<link rel="import" href="shared-styles.html">
1313

1414
<dom-module id="my-view2">
@@ -30,8 +30,10 @@ <h1>View Two</h1>
3030
</template>
3131

3232
<script>
33-
Polymer({
34-
is: 'my-view2',
35-
});
33+
class MyView2 extends Polymer.Element {
34+
static get is() { return 'my-view2'; }
35+
}
36+
37+
window.customElements.define(MyView2.is, MyView2);
3638
</script>
3739
</dom-module>

src/my-view3.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212
<link rel="import" href="shared-styles.html">
1313

1414
<dom-module id="my-view3">
@@ -30,8 +30,10 @@ <h1>View Three</h1>
3030
</template>
3131

3232
<script>
33-
Polymer({
34-
is: 'my-view3',
35-
});
33+
class MyView3 extends Polymer.Element {
34+
static get is() { return 'my-view3'; }
35+
}
36+
37+
window.customElements.define(MyView3.is, MyView3);
3638
</script>
3739
</dom-module>

src/my-view404.html

+13-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212

1313
<dom-module id="my-view404">
1414
<template>
@@ -24,8 +24,17 @@
2424
</template>
2525

2626
<script>
27-
Polymer({
28-
is: 'my-view404',
29-
});
27+
class MyView404 extends Polymer.Element {
28+
static get is() { return 'my-view404'; }
29+
static get properties() {
30+
return {
31+
// This shouldn't be neccessary, but the Analyzer isn't picking up
32+
// Polymer.Element#rootPath
33+
rootPath: String,
34+
};
35+
}
36+
}
37+
38+
window.customElements.define(MyView404.is, MyView404);
3039
</script>
3140
</dom-module>

src/shared-styles.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
99
-->
1010

11-
<link rel="import" href="../bower_components/polymer/polymer.html">
11+
<link rel="import" href="../bower_components/polymer/polymer-element.html">
1212

1313
<!-- shared styles for all views -->
1414
<dom-module id="shared-styles">

sw-precache-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ module.exports = {
1414
staticFileGlobs: [
1515
'index.html',
1616
'manifest.json',
17-
'bower_components/webcomponentsjs/webcomponents-lite.min.js',
17+
'bower_components/webcomponentsjs/*',
1818
],
1919
navigateFallback: 'index.html',
2020
};

0 commit comments

Comments
 (0)