frontend: use webpack instead of vulcanize

rhodecode/public/js/src/components/index.js

@@ -0,0 +1,7 b''
+import '../../../../../bower_components/iron-ajax/iron-ajax.html';
+import './root-styles.gen.html';
+import './channelstream-connection/channelstream-connection.html';
+import './rhodecode-toast/rhodecode-toast.html';
+import './rhodecode-toggle/rhodecode-toggle.html';
+import './rhodecode-unsafe-html/rhodecode-unsafe-html.html';
+import './rhodecode-app/rhodecode-app.html';

webpack.config.js

@@ -0,0 +1,69 b''
+/* webpack.config.js */
+require('style-loader');
+require('css-loader');
+var path = require('path');
+
+const projectName = 'rhodecode-components';
+let destinationDirectory = path.join(process.cwd(), 'rhodecode', 'public', 'js')
+
+if (process.env.RC_STATIC_DIR) {
+    destinationDirectory = process.env.RC_STATIC_DIR;
+}
+
+module.exports = {
+    // Tell Webpack which file kicks off our app.
+    entry: {
+        main: path.resolve(__dirname, 'rhodecode/public/js/src/components/index.js'),
+    },
+    output: {
+        filename: 'rhodecode-components.js',
+        path: path.resolve(destinationDirectory)
+    },
+    // Tell Webpack which directories to look in to resolve import statements.
+    // Normally Webpack will look in node_modules by default but since we’re overriding
+    // the property we’ll need to tell it to look there in addition to the
+    // bower_components folder.
+    resolve: {
+        modules: [
+            path.resolve(__dirname, 'node_modules'),
+            path.resolve(__dirname, 'bower_components')
+        ]
+    },
+    // These rules tell Webpack how to process different module types.
+    // Remember, *everything* is a module in Webpack. That includes
+    // CSS, and (thanks to our loader) HTML.
+    module: {
+        rules: [
+            {
+                // If you see a file that ends in .html, send it to these loaders.
+                test: /\.html$/,
+                // This is an example of chained loaders in Webpack.
+                // Chained loaders run last to first. So it will run
+                // 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: 'polymer-webpack-loader',
+                        options: {
+                            processStyleLinks: true,
+                        }
+                    }
+                ],
+            },
+            {
+                // If you see a file that ends in .js, just send it to the babel-loader.
+                test: /\.js$/,
+                use: 'babel-loader'
+                // Optionally exclude node_modules from transpilation except for polymer-webpack-loader:
+                // exclude: /node_modules\/(?!polymer-webpack-loader\/).*/
+            },
+            // this is required because of bug:
+            // https://github.com/webpack-contrib/polymer-webpack-loader/issues/49
+            {
+                test: /intl-messageformat.min.js/,
+                use: 'imports-loader?this=>window'
+            }
+        ]
+    },
+    plugins: []
+};

.hgignore

@@ -45,6 +45,7 b' syntax: regexp'
 ^rhodecode/public/js/rhodecode-components.html$
 ^rhodecode/public/js/scripts.js$
 ^rhodecode/public/js/rhodecode-components.js$
+^rhodecode/public/js/app-bundle.js$
 ^rhodecode/public/js/src/components/root-styles.gen.html$
 ^rhodecode/public/js/vendors/webcomponentsjs/
 ^rhodecode\.db$

Gruntfile.js

@@ -1,4 +1,12 b''
 var gruntConfig = require('./grunt_config.json');
+var webpackConfig = require('./webpack.config');
+gruntConfig["webpack"] = {
+    options: {
+        stats: !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
+    },
+    prod: webpackConfig,
+    dev: Object.assign({ watch: false }, webpackConfig)
+};
 
 module.exports = function(grunt) {
   grunt.initConfig(gruntConfig);
@@ -7,8 +15,7 b' module.exports = function(grunt) {'
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-vulcanize');
   grunt.loadNpmTasks('grunt-contrib-copy');
-
-  grunt.registerTask('default', ['less:production', 'less:components', 'concat:polymercss', 'copy', 'concat:dist', 'vulcanize']);
+  grunt.loadNpmTasks('grunt-webpack');
+  grunt.registerTask('default', ['less:production', 'less:components',  'concat:polymercss', 'copy', 'webpack', 'concat:dist']);
 };

grunt_config.json

@@ -93,7 +93,8 b''
         "<%= dirs.js.src %>/rhodecode/tooltips.js",
         "<%= dirs.js.src %>/rhodecode/users.js",
         "<%= dirs.js.src %>/rhodecode/appenlight.js",
-        "<%= dirs.js.src %>/rhodecode.js"
+        "<%= dirs.js.src %>/rhodecode.js",
+        "<%= dirs.js.dest %>/rhodecode-components.js"
       ],
       "dest": "<%= dirs.js.dest %>/scripts.js",
       "nonull": true
@@ -146,7 +147,7 b''
         "less:development",
         "less:components",
         "concat:polymercss",
-        "vulcanize",
+        "webpack",
         "concat:dist"
       ]
     },
@@ -159,7 +160,7 b''
       "tasks": [
         "less:components",
         "concat:polymercss",
-        "vulcanize",
+        "webpack",
         "concat:dist"
       ]
     }
@@ -171,18 +172,5 b''
         "jshintrc": ".jshintrc"
       }
     }
-  },
-  "vulcanize": {
-    "default": {
-      "options": {
-        "abspath": "",
-        "inlineScripts": true,
-        "inlineCss": true,
-        "stripComments": true
-      },
-      "files": {
-        "<%= dirs.js.dest %>/rhodecode-components.html": "<%= dirs.js.src %>/components/shared-components.html"
-      }
-    }
   }
 }

package.json

@@ -21,16 +21,30 b''
     "grunt-contrib-jshint": "^0.12.0",
     "grunt-contrib-less": "^1.1.0",
     "grunt-contrib-watch": "^0.6.1",
-    "grunt-vulcanize": "^1.0.0",
+    "grunt-webpack": "^3.1.3",
     "jquery": "1.11.3",
     "jshint": "^2.9.1-rc3",
     "moment": "^2.18.1",
     "mousetrap": "^1.6.1",
     "qrious": "^4.0.2",
     "sticky-sidebar": "3.3.1",
-    "vulcanize": "^1.16.0",
     "waypoints": "4.0.1",
     "webpack": "4.23.1",
-    "webpack-cli": "3.1.2"
+    "webpack-cli": "3.1.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "copy-webpack-plugin": "^4.4.2",
+    "css-loader": "^0.28.11",
+    "exports-loader": "^0.6.4",
+    "html-loader": "^0.4.4",
+    "html-webpack-plugin": "^3.2.0",
+    "imports-loader": "^0.7.1",
+    "polymer-webpack-loader": "^2.0.1",
+    "style-loader": "^0.21.0",
+    "webpack-uglify-js-plugin": "^1.1.9",
+    "raw-loader": "1.0.0-beta.0",
+    "ts-loader": "^1.3.3"
   }
 }

rhodecode/apps/home/tests/test_home.py

@@ -63,7 +63,6 b' class TestHomeController(TestController)'
             {'beaker.session.secret': 'test-rc-uytcxaz'})
         response.mustcontain('style.css?ver={0}'.format(rhodecode_version_hash))
         response.mustcontain('scripts.js?ver={0}'.format(rhodecode_version_hash))
-        response.mustcontain('hodecode-components.html?ver={0}'.format(rhodecode_version_hash))
 
     def test_index_contains_backend_specific_details(self, backend):
         self.log_user()

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

@@ -14,7 +14,7 b''
         <rhodecode-favicon></rhodecode-favicon>
     </template>
     <script>
-        ccLog = Logger.get('RhodeCodeApp');
+        var ccLog = Logger.get('RhodeCodeApp');
         ccLog.setLevel(Logger.OFF);
 
         var rhodeCodeApp = Polymer({

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

@@ -3,8 +3,85 b''
 <link rel="import" href="../rhodecode-unsafe-html/rhodecode-unsafe-html.html">
 <dom-module id="rhodecode-toast">
     <template>
-        <style include="shared-styles"></style>
-        <link rel="stylesheet" href="rhodecode-toast.css">
+        <style include="shared-styles">
+            /* inset border for buttons - does not work in ie */
+            /* rounded borders */
+            /* rounded borders - bottom only */
+            /* rounded borders - top only */
+            /* text shadow */
+            /* centers text in a circle - input diameter of circle and color */
+            /* pill version of the circle */
+            .absolute-center {
+                margin: auto;
+                position: absolute;
+                top: 0;
+                left: 0;
+                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;
+                margin-left: 10px;
+                margin-right: 10px;
+                top: 0;
+                left: 0;
+                right: 0;
+                z-index: 100;
+            }
+        </style>
+
         <template is="dom-if" if="[[hasToasts]]">
             <div class$="container toast-message-holder [[conditionalClass(isFixed)]]">
                 <template is="dom-repeat" items="[[toasts]]">

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

@@ -4,8 +4,19 b''
 
 <dom-module id="rhodecode-toggle">
 
-    <style include="shared-styles"></style>
-    <link rel="stylesheet" href="rhodecode-toggle.css">
+    <style include="shared-styles">
+        .rc-toggle {
+            float: left;
+            position: relative;
+        }
+        .rc-toggle paper-spinner {
+            position: absolute;
+            top: 0;
+            left: -30px;
+            width: 20px;
+            height: 20px;
+        }
+    </style>
 
     <template>
         <div class="rc-toggle">

rhodecode/public/js/src/components/root-styles-prefix.html

@@ -1,3 +1,3 b''
-<dom-module id="root-styles">
+<dom-module id="shared-styles">
     <template>
         <style>

rhodecode/templates/base/root.mako

@@ -101,7 +101,6 b" c.template_context['default_user'] = {"
             <script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
             ## avoide escaping the %N
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
-            <link rel="import" href="${h.asset('js/rhodecode-components.html', ver=c.rhodecode_version_hash)}">
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js?ver='+c.rhodecode_version_hash}";</script>