Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Update site to use Polymer 2.0 #2318

Merged
merged 12 commits into from
Oct 4, 2017
Merged

Update site to use Polymer 2.0 #2318

merged 12 commits into from
Oct 4, 2017

Conversation

keanulee
Copy link
Contributor

@keanulee keanulee commented Sep 5, 2017

Fixes #2242

Staged at https://polymer-2-dot-polymer-project.appspot.com/ - please leave feedback as comments here on this PR.

TODOs:

  • Make elements hybrid
  • Compile to ES5 and make sure webcomponents-loader.js works
  • Transpile-to-ES5/minify/bundle demos in /1.0/samples/homepage/
    • Optional: Make homepage demos use webcomponents-loader.js instead of -lite.js
      • Not possible since customElements.define() call is bundled in index.html and must be polyfilled before in index.html
      • The 2 homepage demos are now treated as standalone projects with their own polymer.json and built/bundled using polymer build. Element definitions are in the shell HTML import, so polyfills are guaranteed to be run by the time the shell is imported.
  • Page navigation seems broken in Firefox/Edge/IE (does full-page reload)
  • [IE] Promise.catch missing in IE - see regression: Promise.prototype.catch is undefined in IE11 (v1.0.8+) webcomponents/webcomponentsjs#837
  • [IE] Issue with template polyfill (t.content.querySelectorAll missing) on homepage demos
  • Port summit 2015 and 2016 sites, or check in Polymer 1 deps in those dirs
  • Service worker should precache webcomponents-loader.js and runtime cache needed polyfill

@keanulee
Copy link
Contributor Author

The staging website (https://polymer-2-dot-polymer-project.appspot.com) is now ready for testing on all browsers, including IE 11! I'm waiting until patched dependencies are merged and tagged before merging this PR though.

@notwaldorf
Copy link
Contributor

I have been browsing and refreshing this for the last 5 minute on IE11, and it's pretty aces!

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
Copy link
Contributor

Choose a reason for hiding this comment

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

yasssssss

@@ -0,0 +1 @@
../../../../bower_components
Copy link
Contributor

Choose a reason for hiding this comment

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

oh is this a link? smart!

</iron-pages>
</div>

<div class="results">
<content select="iframe"></content>
<slot select="iframe"></slot>
Copy link
Contributor

Choose a reason for hiding this comment

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

this should be name="iframe", no?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It should be <slot name="iframe"> with the corresponding iframes updated with slot="iframe", but since there's no default slot before I'm just going to make this the default (and remove select="iframe").

<link rel="import" href="../bower_components/app-layout/helpers/helpers.html">
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">
Copy link
Contributor

Choose a reason for hiding this comment

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

isn't the toast needed by the service worker code?

Copy link
Contributor

Choose a reason for hiding this comment

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

(like, why isn't it lazy anymore)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

On Firefox (at least), if you navigate to a non-cached page, the toast won't be upgraded and you don't see it (and get an ugly "show is not a function" error).

Polymer.dom(this).appendChild(document.importNode(fragment, true));
// Replace shell contents.
var shell = Polymer.dom(this);
while (shell.firstChild) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Why is this better than shell.innerHTML = '';?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

DOM manipulations are faster than invoking the parser, I think (even for empty strings), though the real motivation behind this change was that setting innerHTML was causing issues.

bower.json Outdated
"iron-selector": "2",
"webcomponentsjs": "^0.7.24"
"iron-location": "fix-ie-capture",
"webcomponentsjs": "master"
Copy link
Contributor

Choose a reason for hiding this comment

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

but you're going to update this to depend on real releases before you merge this, right?

window.Polymer = window.Polymer || {dom: 'shadow', lazyRegister: true};
</script>
<!-- Node: the webcomponents polyfill is lazily loaded in app.js -->
<script>!function(e){var r=e.babelHelpers={};r.typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r.classCallCheck=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},r.createClass=function(){function e(e,r){for(var t=0;t<r.length;t++){var n=r[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(r,t,n){return t&&e(r.prototype,t),n&&e(r,n),r}}(),r.defineEnumerableProperties=function(e,r){for(var t in r){var n=r[t];n.configurable=n.enumerable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,t,n)}return e},r.defaults=function(e,r){for(var t=Object.getOwnPropertyNames(r),n=0;n<t.length;n++){var o=t[n],i=Object.getOwnPropertyDescriptor(r,o);i&&i.configurable&&void 0===e[o]&&Object.defineProperty(e,o,i)}return e},r.defineProperty=function(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e},r.extends=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},r.get=function e(r,t,n){null===r&&(r=Function.prototype);var o=Object.getOwnPropertyDescriptor(r,t);if(void 0===o){var i=Object.getPrototypeOf(r);return null===i?void 0:e(i,t,n)}if("value"in o)return o.value;var a=o.get;if(void 0!==a)return a.call(n)},r.inherits=function(e,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function, not "+typeof r);e.prototype=Object.create(r&&r.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),r&&(Object.setPrototypeOf?Object.setPrototypeOf(e,r):e.__proto__=r)},r.instanceof=function(e,r){return null!=r&&"undefined"!=typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](e):e instanceof r},r.newArrowCheck=function(e,r){if(e!==r)throw new TypeError("Cannot instantiate an arrow function")},r.objectDestructuringEmpty=function(e){if(null==e)throw new TypeError("Cannot destructure undefined")},r.objectWithoutProperties=function(e,r){var t={};for(var n in e)r.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},r.possibleConstructorReturn=function(e,r){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!r||"object"!=typeof r&&"function"!=typeof r?e:r},r.set=function e(r,t,n,o){var i=Object.getOwnPropertyDescriptor(r,t);if(void 0===i){var a=Object.getPrototypeOf(r);null!==a&&e(a,t,n,o)}else if("value"in i&&i.writable)i.value=n;else{var u=i.set;void 0!==u&&u.call(o,n)}return n},r.slicedToArray=function(){function e(e,r){var t=[],n=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(n=(a=u.next()).done)&&(t.push(a.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{!n&&u.return&&u.return()}finally{if(o)throw i}}return t}return function(r,t){if(Array.isArray(r))return r;if(Symbol.iterator in Object(r))return e(r,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),r.taggedTemplateLiteral=function(e,r){return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(r)}}))},r.temporalRef=function(e,r,t){if(e===t)throw new ReferenceError(r+" is not defined - temporal dead zone");return e},r.temporalUndefined={},r.toArray=function(e){return Array.isArray(e)?e:Array.from(e)},r.toConsumableArray=function(e){if(Array.isArray(e)){for(var r=0,t=Array(e.length);r<e.length;r++)t[r]=e[r];return t}return Array.from(e)}}("undefined"==typeof global?self:global);</script>
Copy link
Contributor

Choose a reason for hiding this comment

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

Yum. What is this?

@FluorescentHallucinogen
Copy link
Contributor

@keanulee Could you please also update the old and/or deprecated versions of dependencies such as app-layout#^0.0.14 and firebase-element#^1.0.12 to actual versions?

@FluorescentHallucinogen
Copy link
Contributor

@keanulee Oh, dependenies are already updated. Please ignore my previous message. One question: why you don't use version ranges in bower.json for some dependenies (e.g. paper-item#^2.0.0 instead of paper-item#2)?

@keanulee
Copy link
Contributor Author

keanulee commented Sep 15, 2017

@FluorescentHallucinogen I like #2 because it's succinct. It equivalent to #^2.0.0, just personal preference 😉 (Note that #2.2.5 is NOT equivalent to #^2.2.5 - 2 means versions that "start with 2", where the latter is an exact match)

@arthurevans
Copy link

Is the IE iron-location issue the last issue blocking this?

@keanulee
Copy link
Contributor Author

keanulee commented Oct 3, 2017

The iron-location fix is now published and I updated the staging site with the latest bower deps (https://polymer-2-dot-polymer-project.appspot.com/). I tested the latest update and everything seems to be good. @arthurevans wanna give it one last check and merge? (I believe I already addressed all @notwaldorf 's feedback.)

@keanulee keanulee changed the title [DO NOT MERGE] Update site to use Polymer 2.0 Update site to use Polymer 2.0 Oct 3, 2017
"promise-polyfill": "polymerlabs/promise-polyfill#^1.0.0",
"google-youtube": "GoogleWebComponents/google-youtube#^1.2.1",
"google-map": "GoogleWebComponents/google-map#^1.1.10",
"promise-polyfill": "polymerlabs/promise-polyfill#2",

Choose a reason for hiding this comment

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

I think we can drop the separate promise-polyfill now... There's a promise polyfill in the v1 WC polyfills, so WC-loader should take care of this, I think. (Only needed this to run the hybrid iron-ajax against 1.x, IIRC).

@arthurevans
Copy link

Will pull and do a test build tomorrow to make sure I don't have any issues building locally.

@arthurevans arthurevans merged commit 1cd2cb5 into master Oct 4, 2017
@keanulee keanulee deleted the 2.0 branch October 4, 2017 21:41
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants