Convert psk to use polymer 2.0 (#967)

* Convert psk to use polymer 2.0 * update tests for 2.0 * load webcomponents.js polyfill without js check * add handling for undefined observer values * update to latest polymer config property names * fix eslintrc spacing * use the google eslint ruleset * bind the callback we send to importHref * add comments to test/index.html * reference polymer-element.html instead of polymer * add slot=header attribute to app-header * fix js line length * add webcomponents-loader * Update polymer.json * respond to feedback * convert config to properties & observers methods * Hide drawer-toggle * Update webcomponentsjs version to webcomponents/webcomponentsjs#^1.0.0-rc.1
Polymer · Mar 6, 2017 · 88c5ba5 · 88c5ba5
1 parent db9f3b9
commit 88c5ba5
Show file tree

Hide file tree

Showing 13 changed files with 118 additions and 114 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,14 +1,19 @@
 {
   "extends": ["eslint:recommended", "google"],
+  "parserOptions": {
+    "ecmaVersion": 6
+  },
   "env": {
     "browser": true
   },
   "plugins": [
     "html"
   ],
   "rules": {
+    "brace-style": "off",
+    "new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }],
     "no-var": "off",
-    "new-cap": ["error", { "capIsNewExceptions": ["Polymer"] }]
+    "require-jsdoc": "off"
   },
   "globals": {
     "Polymer": true

diff --git a/bower.json b/bower.json
@@ -5,22 +5,21 @@
   ],
   "license": "https://polymer.github.io/LICENSE.txt",
   "dependencies": {
-    "app-layout": "PolymerElements/app-layout#^0.10.0",
-    "app-route": "PolymerElements/app-route#^0.9.0",
-    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
-    "iron-icon": "PolymerElements/iron-icon#^1.0.0",
-    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#^1.0.0",
-    "iron-localstorage": "PolymerElements/iron-localstorage#^1.0.0",
-    "iron-media-query": "PolymerElements/iron-media-query#^1.0.0",
-    "iron-pages": "PolymerElements/iron-pages#^1.0.0",
-    "iron-selector": "PolymerElements/iron-selector#^1.0.0",
-    "paper-icon-button": "PolymerElements/paper-icon-button#~1.1.0",
-    "polymer": "Polymer/polymer#^1.6.0"
+    "app-layout": "PolymerElements/app-layout#2.0-preview",
+    "app-route": "PolymerElements/app-route#2.0-preview",
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#2.0-preview",
+    "iron-icon": "PolymerElements/iron-icon#2.0-preview",
+    "iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.0-preview",
+    "iron-localstorage": "PolymerElements/iron-localstorage#2.0-preview",
+    "iron-media-query": "PolymerElements/iron-media-query#2.0-preview",
+    "iron-pages": "PolymerElements/iron-pages#2.0-preview",
+    "iron-selector": "PolymerElements/iron-selector#2.0-preview",
+    "paper-icon-button": "PolymerElements/paper-icon-button#2.0-preview",
+    "polymer": "Polymer/polymer#2.0-preview",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
   },
   "devDependencies": {
-    "web-component-tester": "^4.0.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+    "web-component-tester": "6.0.0-prerelease.5"
   },
-  "private": true,
-  "ignore": []
+  "private": true
 }
diff --git a/index.html b/index.html
@@ -47,55 +47,22 @@
     <meta name="msapplication-TileColor" content="#3f51b5">
     <meta name="msapplication-tap-highlight" content="no">
 
+    <!-- Load and register pre-caching Service Worker -->
     <script>
-      // Setup Polymer options
-      window.Polymer = {
-        dom: 'shadow',
-        lazyRegister: true,
-      };
-
-      // Load webcomponentsjs polyfill if browser does not support native
-      // Web Components
-      (function() {
-        'use strict';
-
-        var onload = function() {
-          // For native Imports, manually fire WebComponentsReady so user code
-          // can use the same code path for native and polyfill'd imports.
-          if (!window.HTMLImports) {
-            document.dispatchEvent(
-              new CustomEvent('WebComponentsReady', {bubbles: true})
-            );
-          }
-        };
-
-        var webComponentsSupported = (
-          'registerElement' in document
-          && 'import' in document.createElement('link')
-          && 'content' in document.createElement('template')
-        );
-
-        if (!webComponentsSupported) {
-          var script = document.createElement('script');
-          script.async = true;
-          script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
-          script.onload = onload;
-          document.head.appendChild(script);
-        } else {
-          onload();
-        }
-      })();
-
-      // Load pre-caching Service Worker
       if ('serviceWorker' in navigator) {
         window.addEventListener('load', function() {
           navigator.serviceWorker.register('/service-worker.js');
         });
       }
     </script>
 
+    <!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
+    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+
+    <!-- Load your application shell -->
     <link rel="import" href="/src/my-app.html">
 
+    <!-- Add any global styles for body, document, etc. -->
     <style>
       body {
         margin: 0;

diff --git a/polymer.json b/polymer.json
@@ -7,13 +7,16 @@
     "src/my-view3.html",
     "src/my-view404.html"
   ],
-  "sourceGlobs": [
+  "sources": [
     "src/**/*",
     "images/**/*",
     "bower.json"
   ],
-  "includeDependencies": [
+  "extraDependencies": [
     "manifest.json",
-    "bower_components/webcomponentsjs/webcomponents-lite.min.js"
-  ]
-}
+    "bower_components/webcomponentsjs/*.js"
+  ],
+  "lint": {
+    "rules": ["polymer-2"]
+  }
+}
diff --git a/src/my-app.html b/src/my-app.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
 <link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
 <link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
@@ -32,10 +32,15 @@
         display: block;
       }
 
+      app-drawer-layout:not([narrow]) [drawer-toggle] {
+        display: none;
+      }
+
       app-header {
         color: #fff;
         background-color: var(--app-primary-color);
       }
+
       app-header paper-icon-button {
         --paper-icon-button-ink-color: white;
       }
@@ -67,7 +72,7 @@
 
     <app-drawer-layout fullbleed>
       <!-- Drawer content -->
-      <app-drawer id="drawer">
+      <app-drawer id="drawer" slot="drawer">
         <app-toolbar>Menu</app-toolbar>
         <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
           <a name="view1" href="/view1">View One</a>
@@ -79,7 +84,7 @@
       <!-- Main content -->
       <app-header-layout has-scrolling-region>
 
-        <app-header condenses reveals effects="waterfall">
+        <app-header slot="header" condenses reveals effects="waterfall">
           <app-toolbar>
             <paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
             <div main-title>My App</div>
@@ -101,38 +106,58 @@
   </template>
 
   <script>
-    Polymer({
-      is: 'my-app',
-
-      properties: {
-        page: {
-          type: String,
-          reflectToAttribute: true,
-          observer: '_pageChanged',
-        },
-      },
-
-      observers: [
-        '_routePageChanged(routeData.page)',
-      ],
-
-      _routePageChanged: function(page) {
+    class MyApp extends Polymer.Element {
+
+      static get is() { return 'my-app'; }
+
+      static get properties() {
+        return {
+          page: {
+            type: String,
+            reflectToAttribute: true,
+            observer: '_pageChanged',
+          },
+        };
+      }
+
+      static get observers() {
+        return [
+          '_routePageChanged(routeData.page)',
+        ];
+      }
+
+      _routePageChanged(page) {
+        // Polymer 2.0 will call with `undefined` on initialization.
+        // Ignore until we are properly called with a string.
+        if (page === undefined) {
+          return;
+        }
+
+        // If no page was found in the route data, page will be an empty string.
+        // Deault to 'view1' in that case.
         this.page = page || 'view1';
 
+        // Close a non-persistent drawer when the page & route are changed.
         if (!this.$.drawer.persistent) {
           this.$.drawer.close();
         }
-      },
+      }
 
-      _pageChanged: function(page) {
+      _pageChanged(page) {
         // Load page import on demand. Show 404 page if fails
         var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
-        this.importHref(resolvedPageUrl, null, this._showPage404, true);
-      },
+        Polymer.importHref(
+            resolvedPageUrl,
+            null,
+            this._showPage404.bind(this),
+            true);
+      }
 
-      _showPage404: function() {
+      _showPage404() {
         this.page = 'view404';
-      },
-    });
+      }
+    }
+
+    window.customElements.define(MyApp.is, MyApp);
   </script>
 </dom-module>
diff --git a/src/my-view1.html b/src/my-view1.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view1">
@@ -30,8 +30,10 @@ <h1>View One</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view1',
-    });
+    class MyView1 extends Polymer.Element {
+      static get is() { return 'my-view1'; }
+    }
+
+    window.customElements.define(MyView1.is, MyView1);
   </script>
 </dom-module>
diff --git a/src/my-view2.html b/src/my-view2.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view2">
@@ -30,8 +30,10 @@ <h1>View Two</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view2',
-    });
+    class MyView2 extends Polymer.Element {
+      static get is() { return 'my-view2'; }
+    }
+
+    window.customElements.define(MyView2.is, MyView2);
   </script>
 </dom-module>
diff --git a/src/my-view3.html b/src/my-view3.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 <link rel="import" href="shared-styles.html">
 
 <dom-module id="my-view3">
@@ -30,8 +30,10 @@ <h1>View Three</h1>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view3',
-    });
+    class MyView3 extends Polymer.Element {
+      static get is() { return 'my-view3'; }
+    }
+
+    window.customElements.define(MyView3.is, MyView3);
   </script>
 </dom-module>
diff --git a/src/my-view404.html b/src/my-view404.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <dom-module id="my-view404">
   <template>
@@ -20,16 +20,18 @@
       }
     </style>
 
-    <!-- 
+    <!--
       If deploying in a folder replace href="/" with the full path to your site.
       Such as: href=="http://polymerelements.github.io/polymer-starter-kit"
     -->
     Oops you hit a 404. <a href="/">Head back to home.</a>
   </template>
 
   <script>
-    Polymer({
-      is: 'my-view404',
-    });
+    class MyView404 extends Polymer.Element {
+      static get is() { return 'my-view404'; }
+    }
+
+    window.customElements.define(MyView404.is, MyView404);
   </script>
 </dom-module>
diff --git a/src/shared-styles.html b/src/shared-styles.html
@@ -8,7 +8,7 @@
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
-<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
 
 <!-- shared styles for all views -->
 <dom-module id="shared-styles">

diff --git a/sw-precache-config.js b/sw-precache-config.js
@@ -14,7 +14,7 @@ module.exports = {
   staticFileGlobs: [
     '/index.html',
     '/manifest.json',
-    '/bower_components/webcomponentsjs/webcomponents-lite.min.js',
+    '/bower_components/webcomponentsjs/*',
   ],
   navigateFallback: 'index.html',
 };
diff --git a/test/index.html b/test/index.html
@@ -21,8 +21,10 @@
   <body>
     <script>
       WCT.loadSuites([
-        'my-view1.html?dom=shady',
+        // Load 'my-view1.html' test suite, using native shadow dom
         'my-view1.html?dom=shadow',
+        // Load 'my-view1.html' test suite, using shadydom
+        'my-view1.html?wc-shadydom=true',
       ]);
     </script>
   </body>