Merge pull request #158 from PolymerX/develop

Develop

README.md

@@ -16,11 +16,10 @@
 * Service Workers generated by [Workbox](https://workboxjs.org/) through the [workbox-webpack-plugin](https://www.npmjs.com/package/workbox-webpack-plugin) (just for `build`)
 * Copy statics file on `dist` folder (like `vendor/webcomponents-loader.js` and others)
 * [standard-version](https://github.com/conventional-changelog/standard-version) is bundled for managing versioning and changelogs.
-* **ES6 modules bundle and ES5 transpiled bundle** both handled using the new `nomodule` and `type=module` feature of modern browsers. [Learn more on how to ship ES6 modules today in production](https://www.youtube.com/watch?v=GWmO88hBbKY).
 
 #### Loaders
 
-* [babel-loader](https://github.com/babel/babel-loader) with the [babel-preset-env](https://github.com/babel/babel-preset-env) enabled for the [**last 2 versions**](https://babeljs.io/docs/plugins/preset-env/) and babel-plugin-transform-object-rest-spread installed.
+* [babel-loader](https://github.com/babel/babel-loader) with the [babel-preset-env](https://github.com/babel/babel-preset-env) and `babel-plugin-transform-object-rest-spread` installed.
 * [text-loader](https://github.com/dfenstermaker/text-loader) - Load HTML templates as string.
 * [postcss-loader](https://github.com/postcss/postcss-loader) - Load PostCSS into the `<style>` scoped tag of Polymer elements as string.
 
@@ -54,18 +53,10 @@ yarn
 
 Start the `webpack-dev-server` on localhost `http://localhost:3000` with hot-reload and watch on `.pcss` files.
 
-For "oldie" browsers, transpiling also Javascript `class`. Works on `Firefox`:
-
 ```bash
 yarn dev
 ```
 
-For modern browsers with `class` support. Works on `Chrome`, `Safari`, and `Edge`:
-
-```bash
-yarn dev:module
-```
-
 #### Test
 
 XO for code style, Stylelint for PostCSS linting, and WCT for components tests:
@@ -104,11 +95,6 @@ You can simply `import` any other `.pcss` file within your main component `.js`
 We are getting the `webpcomponents-loader.js` polyfill from GitHub using NPM/Yarn and copying it into a `vendor` folder with a `Node` script.
 
 
-## custom-element-es5-adpater.js
-
-Loading the `custom-element-es5-adapter.js` is necessary because the `custom elements` [known(1)](https://stackoverflow.com/questions/43520535/class-constructor-polymerelement-cannot-be-invoked-without-new/45097891#45097891) [issue(2)](https://github.com/webcomponents/custom-elements#es5-vs-es2015) (the lovely `Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'`) about ES6 `classes`, but just on **old browsers**.
-
-
 ## Contributors
 
 | Name                      | Website                  |

now.json

@@ -0,0 +1,4 @@
+{
+  "name": "polymer-skeleton",
+  "alias": ["polymer-skeleton.now.sh"]
+}

package.json

@@ -10,24 +10,21 @@
     "Mattia Astorino (http://equinsuocha.io/)"
   ],
   "scripts": {
-    "build": "webpack --env.BROWSERS=module && webpack",
-    "build:prod": "webpack --env.BROWSERS=module --env.NODE_ENV=production && webpack --env.NODE_ENV=production --optimize-minimize",
+    "build": "webpack",
+    "build:prod": "webpack --env.NODE_ENV=production --optimize-minimize",
     "dev": "webpack-dev-server --hot --inline",
-    "dev:module": "webpack-dev-server --env.BROWSERS=module --hot --inline",
     "pretest": "yarn build",
     "test": "yarn lint && wct --npm && yarn test:lighthouse",
     "test:lighthouse": "concurrently --kill-others \"http-server dist\" \"lighthouse --view http://localhost:8080\" ",
     "test:travis": "yarn pretest && yarn lint && wct --npm",
     "clean:lighthouse": "rm *.report.html",
     "posttest": "yarn rmbower",
     "lint": "xo && stylelint src/components/**/*.pcss",
-    "rmbower": "node scripts/link-bower.js remove",
     "release": "standard-version",
-    "postinstall": "node scripts/postinstall.js",
-    "start": "http-server dist -p $PORT"
+    "start": "yarn build && http-server dist"
   },
   "engines": {
-    "node": ">= 8.0"
+    "node": ">= 8.0 < 10"
   },
   "xo": {
     "space": true,
@@ -36,11 +33,9 @@
     ],
     "rules": {
       "eol-last": 0,
-      "import/no-unassigned-import": 0
-    },
-    "ignores": [
-      "test/test-fixture.js"
-    ]
+      "import/no-unassigned-import": 0,
+      "promise/prefer-await-to-then": 0
+    }
   },
   "devDependencies": {
     "autoprefixer": "8.4.1",
@@ -51,7 +46,9 @@
     "concurrently": "3.5.1",
     "copy-webpack-plugin": "4.5.1",
     "cssnano": "3.10.0",
-    "fs-extra": "6.0.0",
+    "ejs-loader": "0.3.1",
+    "html-webpack-exclude-assets-plugin": "0.0.7",
+    "html-webpack-plugin": "3.2.0",
     "http-server": "0.11.1",
     "lighthouse": "2.9.4",
     "postcss": "6.0.22",
@@ -64,6 +61,7 @@
     "postcss-nesting": "4.2.1",
     "postcss-reporter": "5.0.0",
     "postcss-selector-not": "3.0.1",
+    "script-ext-html-webpack-plugin": "2.0.1",
     "standard-version": "4.3.0",
     "stylelint": "9.2.0",
     "stylelint-config-standard": "18.2.0",
@@ -73,7 +71,6 @@
     "webpack": "4.7.0",
     "webpack-cli": "2.1.2",
     "webpack-dev-server": "3.1.4",
-    "webpack-merge": "4.1.2",
     "workbox-webpack-plugin": "3.2.0",
     "xo": "0.21.0"
   },

postcss.config.js

@@ -18,10 +18,9 @@ module.exports = () => ({
     require('postcss-discard-comments'),
     require('autoprefixer')({
       browsers: [
-        '> 1%',
-        'last 2 versions',
-        'Firefox ESR',
-        'not ie <= 11'
+        '>=1%',
+        'not ie 11',
+        'not op_mini all'
       ]
     }),
     require('cssnano')({

src/components/containers/sk-app/index.js

@@ -18,6 +18,10 @@ export default class SkApp extends PolymerElement {
       ENV: {
         type: String,
         value: process.env.NODE_ENV
+      },
+      updateReady: {
+        type: Boolean,
+        value: false
       }
     };
   }
@@ -26,9 +30,21 @@ export default class SkApp extends PolymerElement {
     return html([`<style>${css}</style> ${template}`]);
   }
 
+  constructor() {
+    super();
+
+    document.addEventListener('updateReady', () => {
+      this.updateReady = true;
+    });
+  }
+
   startTour() {
     window.location.replace('https://github.com/PolymerX/polymer-skeleton');
   }
+
+  reload() {
+    window.location.reload();
+  }
 }
 
 window.customElements.define('sk-app', SkApp);

src/components/containers/sk-app/style.pcss

@@ -21,7 +21,7 @@
   cursor: default;
   position: relative;
   padding-top: 220px;
-  margin-bottom: 100px;
+  overflow-x: hidden;
 }
 
 
@@ -87,11 +87,17 @@
 
 
 sk-button {
-  margin-top: 80px;
+  margin-top: 20px;
   opacity: 0;
   animation-name: FadeIn;
   animation-duration: 400ms;
   animation-delay: 700ms;
   animation-fill-mode: forwards;
   animation-timing-function: ease-out;
 }
+
+.UpdateReadyAlert {
+  position: absolute;
+  left: 30px;
+  bottom: 30px;
+}

src/components/containers/sk-app/template.html

@@ -8,6 +8,11 @@ <h1 class="Title">Web Components — Now.</h1>
   <sk-button on-click="startTour">Take a tour</sk-button>
 </section>
 
+<dom-if if=[[updateReady]]>
+  <template>
+    <sk-button on-click="reload" class="UpdateReadyAlert">Update ready, reload!</sk-button>
+  </template>
+</dom-if>
 
 <aside class="Meta">
   v[[appVersion]] - ENV: [[ENV]]

src/index.html

@@ -99,28 +99,20 @@
 
       var script = document.createElement('script');
       script.async = true
-      script.src = './bundle.js';
-      script.setAttribute('nomodule', true);
-
-      var scriptModule = document.createElement('script');
-      scriptModule.async = true
-      scriptModule.src = './module.bundle.js';
-      scriptModule.setAttribute('type', 'module');
+      script.src = '<%= htmlWebpackPlugin.files.chunks["main"].entry %>';
 
       var refScript = document.body.getElementsByTagName('script')[0];
       refScript.parentNode.insertBefore(script, refScript);
-      refScript.parentNode.insertBefore(scriptModule, refScript);
     }, false);
   </script>
 </head>
 
 <body>
-	<sk-app unresolved name="Polymer Skeleton">
+	<sk-app name="Polymer Skeleton">
     <div class="Loader">Loading...</div>
   </sk-app>
 
-  <script src="./vendor/custom-elements-es5-adapter.js" nomodule></script>
-  <script src="./vendor/webcomponents-loader.js"></script>
+  <script defer src="<%= htmlWebpackPlugin.options.paths.webcomponents %>"></script>
 </body>
 
 </html>

src/index.js

@@ -3,4 +3,9 @@
 /* Import WebpackApp */
 
 /* eslint-disable no-unused-vars */
+import '@polymer/polymer/lib/elements/dom-if';
 import './components/containers/sk-app';
+import sw from './sw-loader';
+
+sw();
+

src/sw-loader.js

@@ -0,0 +1,36 @@
+const updateReady = () =>
+  document.dispatchEvent(new CustomEvent('updateReady'));
+
+const trackInstalling = worker => {
+  worker.addEventListener('statechange', () => {
+    if (worker.state === 'installed') {
+      updateReady();
+    }
+  });
+};
+
+export default () => {
+  if (!('serviceWorker' in navigator)) {
+    console.info('SW is not supported');
+    return;
+  }
+
+  navigator.serviceWorker.register('/sw.js')
+    .then(registration => {
+      if (!navigator.serviceWorker.controller) {
+        return;
+      }
+
+      if (registration.waiting) {
+        return updateReady();
+      }
+
+      if (registration.installing) {
+        return trackInstalling(registration.installing);
+      }
+
+      registration.addEventListener('updatefound', () => trackInstalling(registration.installing));
+    }).catch(err => {
+      console.error('Error during service worker registration:', err);
+    });
+};

test/suites/sk-app.html

@@ -6,7 +6,6 @@
   <meta charset="UTF-8">
 
   <!-- MAIN IMPORTS -->
-  <script src="../../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
   <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script src="../../node_modules//wct-browser-legacy/browser.js"></script>