js: use ES6 classes for polymer 2.x

grunt_config.json

@@ -16,7 +16,7 b''
     "main": {
       "expand": true,
       "cwd": "bower_components",
-      "src": "webcomponentsjs/webcomponents*.*",
+      "src": "webcomponentsjs/*.*",
       "dest": "<%= dirs.js.dest %>/vendors"
     }
   },

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.html

@@ -17,9 +17,14 b''
         var ccLog = Logger.get('RhodeCodeApp');
         ccLog.setLevel(Logger.OFF);
 
-        var rhodeCodeApp = Polymer({
-            is: 'rhodecode-app',
-            attached: function () {
+        class RhodecodeApp extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-app';
+            }
+
+            connectedCallback() {
+                super.connectedCallback();
                 ccLog.debug('rhodeCodeApp created');
                 $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
                 $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
@@ -37,9 +42,9 b''
                 $(document).ready(function () {
                     this.kickoffChannelstreamPlugin();
                 }.bind(this));
-            },
+            }
 
-            initPlugins: function(){
+            initPlugins() {
                 for (var i = 0; i < window.APPLICATION_PLUGINS.length; i++) {
                     var pluginDef = window.APPLICATION_PLUGINS[i];
                     if (pluginDef.component){
@@ -50,26 +55,27 b''
                         }
                     }
                 }
-            },
+            }
+
             /** proxy to channelstream connection */
-            getChannelStreamConnection: function () {
+            getChannelStreamConnection() {
                 return this.$['channelstream-connection'];
-            },
+            }
 
-            handleNotifications: function (data) {
+            handleNotifications(data) {
                 var elem = document.getElementById('notifications');
                 if(elem){
                     elem.handleNotification(data);
                 }
 
-            },
+            }
 
-            faviconUpdate: function (data) {
+            faviconUpdate(data) {
                 this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
-            },
+            }
 
             /** opens connection to ws server */
-            kickoffChannelstreamPlugin: function (data) {
+            kickoffChannelstreamPlugin(data) {
                 ccLog.debug('kickoffChannelstreamPlugin');
                 var channels = ['broadcast'];
                 var addChannels = this.checkViewChannels();
@@ -90,9 +96,9 b''
                     $.Topic('/connection_controller/subscribe').processPrepared();
                     channelstreamConnection.connect();
                 }
-            },
+            }
 
-            checkViewChannels: function () {
+            checkViewChannels() {
                 // subscribe to different channels data is sent.
 
                 var channels = [];
@@ -110,10 +116,10 b''
                 }
 
                 return channels;
-            },
+            }
 
             /** subscribes users from channels in channelstream */
-            subscribeToChannelTopic: function (channels) {
+            subscribeToChannelTopic(channels) {
                 var channelstreamConnection = this.getChannelStreamConnection();
                 var toSubscribe = channelstreamConnection.calculateSubscribe(channels);
                 ccLog.debug('subscribeToChannelTopic', toSubscribe);
@@ -129,10 +135,10 b''
                         }
                     }
                 }
-            },
+            }
 
             /** publish received messages into correct topic */
-            receivedMessage: function (event) {
+            receivedMessage(event) {
                 for (var i = 0; i < event.detail.length; i++) {
                     var message = event.detail[i];
                     if (message.message.topic) {
@@ -146,17 +152,18 b''
                         ccLog.warn('unhandled message', message);
                     }
                 }
-            },
+            }
 
-            handleConnected: function (event) {
+            handleConnected(event) {
                 var channelstreamConnection = this.getChannelStreamConnection();
                 channelstreamConnection.set('channelsState',
                     event.detail.channels_info);
                 channelstreamConnection.set('userState', event.detail.state);
                 channelstreamConnection.set('channels', event.detail.channels);
                 this.propagageChannelsState();
-            },
-            handleSubscribed: function (event) {
+            }
+
+            handleSubscribed(event) {
                 var channelstreamConnection = this.getChannelStreamConnection();
                 var channelInfo = event.detail.channels_info;
                 var channelKeys = Object.keys(event.detail.channels_info);
@@ -166,9 +173,10 b''
                 }
                 channelstreamConnection.set('channels', event.detail.channels);
                 this.propagageChannelsState();
-            },
+            }
+
             /** propagates channel states on topics */
-            propagageChannelsState: function (event) {
+            propagageChannelsState(event) {
                 var channelstreamConnection = this.getChannelStreamConnection();
                 var channel_data = channelstreamConnection.channelsState;
                 var channels = channelstreamConnection.channels;
@@ -179,7 +187,9 b''
                     );
                 }
             }
-        });
 
+        }
+
+        customElements.define(RhodecodeApp.is, RhodecodeApp);
     </script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-favicon/rhodecode-favicon.html

@@ -4,26 +4,35 b''
     <template>
     </template>
     <script>
-        Polymer({
-            is: 'rhodecode-favicon',
-            properties: {
+        class RhodecodeFavicon extends Polymer.Element {
+
+            static get is() { return 'rhodecode-favicon'; }
+
+            static get properties() {
+                return {
                 favicon: Object,
                 counter: {
                     type: Number,
                     observer: '_handleCounter'
                 }
-            },
+                }
+            }
 
-            ready: function () {
+            connectedCallback() {
+                super.connectedCallback();
                 this.favicon = new Favico({
                     type: 'rectangle',
                     animation: 'none'
                 });
-            },
-            _handleCounter: function (newVal, oldVal) {
+            }
+
+            _handleCounter(newVal, oldVal) {
                 this.favicon.badge(this.counter);
             }
-        });
+
+        }
+        customElements.define(RhodecodeFavicon.is, RhodecodeFavicon);
+
 
     </script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-toast/rhodecode-toast.html

@@ -1,5 +1,6 b''
 <link rel="import" href="../../../../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import"
+      href="../../../../../../bower_components/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
@@ -19,57 +20,69 b''
                 bottom: 0;
                 right: 0;
             }
+
             .top-left-rounded-corner {
                 -webkit-border-top-left-radius: 2px;
                 -khtml-border-radius-topleft: 2px;
                 border-top-left-radius: 2px;
             }
+
             .top-right-rounded-corner {
                 -webkit-border-top-right-radius: 2px;
                 -khtml-border-radius-topright: 2px;
                 border-top-right-radius: 2px;
             }
+
             .bottom-left-rounded-corner {
                 -webkit-border-bottom-left-radius: 2px;
                 -khtml-border-radius-bottomleft: 2px;
                 border-bottom-left-radius: 2px;
             }
+
             .bottom-right-rounded-corner {
                 -webkit-border-bottom-right-radius: 2px;
                 -khtml-border-radius-bottomright: 2px;
                 border-bottom-right-radius: 2px;
             }
+
             .top-left-rounded-corner-mid {
                 -webkit-border-top-left-radius: 2px;
                 -khtml-border-radius-topleft: 2px;
                 border-top-left-radius: 2px;
             }
+
             .top-right-rounded-corner-mid {
                 -webkit-border-top-right-radius: 2px;
                 -khtml-border-radius-topright: 2px;
                 border-top-right-radius: 2px;
             }
+
             .bottom-left-rounded-corner-mid {
                 -webkit-border-bottom-left-radius: 2px;
                 -khtml-border-radius-bottomleft: 2px;
                 border-bottom-left-radius: 2px;
             }
+
             .bottom-right-rounded-corner-mid {
                 -webkit-border-bottom-right-radius: 2px;
                 -khtml-border-radius-bottomright: 2px;
                 border-bottom-right-radius: 2px;
             }
+
             .alert {
                 margin: 10px 0;
             }
+
             .toast-close {
                 margin: 0;
                 float: right;
                 cursor: pointer;
             }
+
             .toast-message-holder {
                 background: rgba(255, 255, 255, 0.25);
             }
+
             .toast-message-holder.fixed {
                 position: fixed;
                 padding: 10px 0;
@@ -86,7 +99,7 b''
             <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">
                     <div class$="alert alert-[[item.level]]">
-                        <div on-tap="dismissNotification" class="toast-close"  index-pos="[[index]]">
+                        <div on-click="dismissNotification" class="toast-close" index-pos="[[index]]">
                             <span>[[_gettext('Close')]]</span>
                         </div>
                         <rhodecode-unsafe-html text="[[item.message]]"></rhodecode-unsafe-html>
@@ -97,12 +110,18 b''
     </template>
 
     <script>
-        Polymer({
-            is: 'rhodecode-toast',
-            properties: {
+
+        class RhodecodeToast extends Polymer.mixinBehaviors([Polymer.IronA11yKeysBehavior], Polymer.Element) {
+
+            static get is() {
+                return 'rhodecode-toast';
+            }
+
+            static get properties() {
+                return {
                 toasts: {
                     type: Array,
-                    value: function(){
+                        value() {
                         return []
                     }
                 },
@@ -116,40 +135,43 b''
                 },
                 keyEventTarget: {
                     type: Object,
-                    value: function() {
+                        value() {
                         return document.body;
                     }
                 }
-            },
-            behaviors: [
-                Polymer.IronA11yKeysBehavior
-            ],
-            observers: [
-                '_changedToasts(toasts.splices)'
-            ],
+                }
+            }
 
-            keyBindings: {
+            get keyBindings() {
+                return {
                 'esc:keyup': '_hideOnEsc'
-            },
+                }
+            }
 
-            _hideOnEsc: function (event) {
-                return this.dismissNotifications();
-            },
+            static get observers() {
+                return [
+                    '_changedToasts(toasts.splices)'
+                ]
+            }
 
-            _computeHasToasts: function(){
+            _hideOnEsc(event) {
+                return this.dismissNotifications();
+            }
+
+            _computeHasToasts() {
                 return this.toasts.length > 0;
-            },
+            }
 
-            _debouncedCalc: function(){
+            _debouncedCalc() {
                 // calculate once in a while
                 this.debounce('debouncedCalc', this.toastInWindow, 25);
-            },
+            }
 
-            conditionalClass: function(){
+            conditionalClass() {
                 return this.isFixed ? 'fixed': '';
-            },
+            }
 
-            toastInWindow: function() {
+            toastInWindow() {
                 if (!this._headerNode){
                     return true
                 }
@@ -162,28 +184,33 b''
                 else{
                     this.isFixed = headerHeight <= scrollPosition;
                 }
-            },
+            }
 
-            attached: function(){
+            connectedCallback() {
+                super.connectedCallback();
                 this._headerNode = document.querySelector('.header', document);
                 this.listen(window,'scroll', '_debouncedCalc');
                 this.listen(window,'resize', '_debouncedCalc');
                 this._debouncedCalc();
-            },
-            _changedToasts: function(newValue, oldValue){
+            }
+
+            _changedToasts(newValue, oldValue) {
                 $.Topic('/favicon/update').publish({count: this.toasts.length});
-            },
-            dismissNotification: function(e) {
+            }
+
+            dismissNotification(e) {
                 $.Topic('/favicon/update').publish({count: this.toasts.length-1});
                 var idx = e.target.parentNode.indexPos
                 this.splice('toasts', idx, 1);
 
-            },
-            dismissNotifications: function(){
+            }
+
+            dismissNotifications() {
                 $.Topic('/favicon/update').publish({count: 0});
                 this.splice('toasts', 0);
-            },
-            handleNotification: function(data){
+            }
+
+            handleNotification(data) {
                 if (!templateContext.rhodecode_user.notification_status && !data.message.force) {
                     // do not act if notifications are disabled
                     return
@@ -192,9 +219,15 b''
                     level: data.message.level,
                     message: data.message.message
                 });
-            },
-            _gettext: _gettext
-        });
+            }
+
+            _gettext(x){
+                return _gettext(x)
+            }
+
+        }
+
+        customElements.define(RhodecodeToast.is, RhodecodeToast);
 
     </script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-toggle/rhodecode-toggle.html

@@ -1,4 +1,5 b''
-<link rel="import" href="../../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
+<link rel="import"
+      href="../../../../../../bower_components/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../../../../../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../../../../../bower_components/paper-tooltip/paper-tooltip.html">
 
@@ -9,6 +10,7 b''
             float: left;
             position: relative;
         }
+
         .rc-toggle paper-spinner {
             position: absolute;
             top: 0;
@@ -29,20 +31,31 b''
     </template>
 
     <script>
-        Polymer({
-            is: 'rhodecode-toggle',
-            properties: {
+
+        class RhodecodeToggle extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-toggle';
+            }
+
+            static get properties() {
+                return {
                 noSpinner: { type: Boolean, value: false, reflectToAttribute:true},
                 tooltipText: { type: String, value: "Click to toggle", reflectToAttribute:true},
                 checked: { type:  Boolean, value: false, reflectToAttribute:true},
                 active: { type: Boolean, value: false, reflectToAttribute:true, notify:true}
-            },
-            shouldShow: function(){
+                }
+            }
+
+            shouldShow() {
                 return !this.noSpinner
-            },
-            labelStatus: function(isActive){
+            }
+
+            labelStatus(isActive) {
                 return this.checked? 'Enabled' : "Disabled"
             }
-        });
+        }
+
+        customElements.define(RhodecodeToggle.is, RhodecodeToggle);
     </script>
 </dom-module>

rhodecode/public/js/src/components/rhodecode-unsafe-html/rhodecode-unsafe-html.html

@@ -1,4 +1,4 b''
-<link rel="import" href="../../../../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../../../../bower_components/polymer/polymer-element.html">
 
 <dom-module id="rhodecode-unsafe-html">
     <template>
@@ -6,18 +6,26 b''
         <slot></slot>
     </template>
     <script>
-        Polymer({
-            is: 'rhodecode-unsafe-html',
-            properties: {
+        class RhodecodeUnsafeHtml extends Polymer.Element {
+
+            static get is() {
+                return 'rhodecode-unsafe-html';
+            }
+
+            static get properties() {
+                return {
                 text: {
                     type: String,
                     observer: '_handleText'
                 }
-            },
-            _handleText: function(newVal, oldVal){
+                }
+            }
+
+            _handleText(newVal, oldVal) {
                 this.innerHTML = this.text;
             }
-        })
+        }
 
+        customElements.define(RhodecodeUnsafeHtml.is, RhodecodeUnsafeHtml);
     </script>
 </dom-module>

rhodecode/templates/base/root.mako

@@ -27,6 +27,8 b" c.template_context['default_user'] = {"
 %>
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
+
+        <script src="${h.asset('js/vendors/webcomponentsjs/custom-elements-es5-adapter.js', ver=c.rhodecode_version_hash)}"></script>
         <script src="${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.js', ver=c.rhodecode_version_hash)}"></script>
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

webpack.config.js

@@ -10,6 +10,18 b' if (process.env.RC_STATIC_DIR) {'
     destinationDirectory = process.env.RC_STATIC_DIR;
 }
 
+// doing it this way because it seems that plugin via grunt does not pick up .babelrc
+let babelRCOptions = {
+    "presets": [
+        ["env", {
+            "targets": {
+                "browsers": ["last 2 versions"]
+            }
+        }]
+    ],
+    "plugins": ["transform-object-rest-spread"]
+}
+
 module.exports = {
     // Tell Webpack which file kicks off our app.
     entry: {
@@ -42,7 +54,8 b' module.exports = {'
                 // polymer-webpack-loader, and hand the output to
                 // babel-loader. This let's us transpile JS in our `<script>` elements.
                 use: [
-                    {loader: 'babel-loader'},
+                    {loader: 'babel-loader',
+                    options: babelRCOptions},
                     {loader: 'polymer-webpack-loader',
                         options: {
                             processStyleLinks: true,
@@ -53,7 +66,7 b' module.exports = {'
             {
                 // If you see a file that ends in .js, just send it to the babel-loader.
                 test: /\.js$/,
-                use: 'babel-loader'
+                use: {loader: 'babel-loader', options: babelRCOptions}
                 // Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
                 // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
             },