grunt: separate js from web components

Gruntfile.js

@@ -98,15 +98,23 b' module.exports = function(grunt) {'
           '<%= dirs.js.src %>/rhodecode/users.js',
           '<%= dirs.js.src %>/rhodecode/utils/notifications.js',
           '<%= dirs.js.src %>/rhodecode/appenlight.js',
-
           // Rhodecode main module
-          '<%= dirs.js.src %>/rhodecode.js'
+          '<%= dirs.js.src %>/rhodecode.js',
         ],
         dest: '<%= dirs.js.dest %>/scripts.js',
         nonull: true
       }
     },
-
+    crisper: {
+      dist: {
+        options: {
+          cleanup: false,
+          onlySplit: true
+        },
+        src: '<%= dirs.js.dest %>/rhodecode-components.html',
+        dest: '<%= dirs.js.dest %>/rhodecode-components.js'
+      }
+    },
     less: {
       development: {
         options: {
@@ -148,7 +156,7 b' module.exports = function(grunt) {'
       },
       js: {
         files: ["<%= dirs.js.src %>/**/*.js", "<%= dirs.js.src %>/components/**/*.html"],
-        tasks: ['less:components', 'concat:polymercss', "vulcanize", "concat:dist"]
+        tasks: ['less:components', 'concat:polymercss', "vulcanize", 'crisper', "concat:dist"]
       }
     },
 
@@ -183,5 +191,5 b' module.exports = function(grunt) {'
   grunt.loadNpmTasks('grunt-crisper');
   grunt.loadNpmTasks('grunt-contrib-copy');
 
-  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy','vulcanize', 'crisper', 'concat:dist']);
 };

rhodecode/templates/base/root.html

@@ -46,17 +46,30 b" c.template_context['visual']['default_re"
                 // setup Polymer options
                 window.Polymer = {lazyRegister: true, dom: 'shadow'};
 
-                // load webcomponents polyfills
+                // Load webcomponentsjs polyfill if browser does not support native Web Components
                 (function() {
-                    if ('registerElement' in document
+                    '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')) {
-                        // browser has web components
-                    } else {
-                        // polyfill web components
+                            && 'content' in document.createElement('template')
+                    );
+                    if (!webComponentsSupported) {
                         var e = document.createElement('script');
+                        e.async = true;
                         e.src = '${h.asset('js/vendors/webcomponentsjs/webcomponents-lite.min.js', ver=c.rhodecode_version_hash)}';
                         document.head.appendChild(e);
+                    } else {
+                        onload();
                     }
                 })();
             </script>
@@ -103,6 +116,11 b" c.template_context['visual']['default_re"
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
+            <script>
+                var e = document.createElement('script');
+                e.src = '${h.asset('js/rhodecode-components.js', ver=c.rhodecode_version_hash)}';
+                document.head.appendChild(e);
+            </script>
             <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
             <style include="shared-styles" is="custom-style"></style>
             ## avoide escaping the %N