Use webpack

This paves the way for a more modern approach in frontend development. I've also written more about how we produce the final RPM. Signed-off-by: Miquel Sabaté Solà <[email protected]>
SUSE · Mar 9, 2017 · bc56035 · bc56035
1 parent 3d4fb37
commit bc56035
Show file tree

Hide file tree

Showing 23 changed files with 4,353 additions and 140 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -7,6 +7,16 @@
   "globals": {
     "Bloodhound": false,
   },
+  "plugins": [
+    "import"
+  ],
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "./config/webpack.js"
+      }
+    }
+  },
   "rules": {
     "camelcase": 0,
     "func-names": 0,

diff --git a/.travis.yml b/.travis.yml
@@ -35,6 +35,9 @@ before_script:
   - mysql -e 'create database portus_test;'
 
 script:
+  # Compile assets
+  - bundle exec rake portus:assets:compile
+
   # Ruby tests
   - bundle exec rspec spec packaging/suse/portusctl/spec
 

diff --git a/Gemfile b/Gemfile
@@ -1,7 +1,6 @@
 source "https://rubygems.org"
 
 gem "rails", "~> 4.2.8"
-gem "jquery-rails"
 gem "sass-rails", ">= 3.2"
 gem "bootstrap-sass", "~> 3.3.4"
 gem "slim"
@@ -21,7 +20,6 @@ gem "crono"
 gem "net-ldap"
 gem "redcarpet"
 gem "font-awesome-rails"
-gem "bootstrap-typeahead-rails"
 gem "rails_stdout_logging", "~> 0.0.5", group: [:development, :staging, :production]
 
 # Pinning these specific versions because that's what we have on OBS.
@@ -45,7 +43,10 @@ gem "thor"
 # run:
 #
 # IGNORE_ASSETS=yes bundle list
-gem "uglifier" unless ENV["IGNORE_ASSETS"] == "yes"
+unless ENV["IGNORE_ASSETS"] == "yes"
+  gem "uglifier"
+  gem "webpack-rails"
+end
 
 # Returns true if the bundle is targeted towards building a package.
 def packaging?

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -58,8 +58,6 @@ GEM
     bootstrap-sass (3.3.5)
       autoprefixer-rails (>= 5.0.0.1)
       sass (>= 3.2.19)
-    bootstrap-typeahead-rails (0.10.5.1)
-      railties (>= 3.0)
     brakeman (3.2.1)
       erubis (~> 2.6)
       haml (>= 3.0, < 5.0)
@@ -155,10 +153,7 @@ GEM
     hike (1.2.3)
     hirb (0.7.3)
     i18n (0.7.0)
-    jquery-rails (3.1.3)
-      railties (>= 3.0, < 5.0)
-      thor (>= 0.14, < 2.0)
-    json (1.8.3)
+    json (1.8.6)
     json-schema (2.5.1)
       addressable (~> 2.3.7)
     jwt (1.5.0)
@@ -371,6 +366,8 @@ GEM
     webmock (1.21.0)
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
+    webpack-rails (0.9.10)
+      railties (>= 3.2.0)
     websocket-driver (0.5.4)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.2)
@@ -393,7 +390,6 @@ DEPENDENCIES
   bcrypt
   binman (~> 5.1.0)
   bootstrap-sass (~> 3.3.4)
-  bootstrap-typeahead-rails
   brakeman
   byebug
   capybara
@@ -412,7 +408,6 @@ DEPENDENCIES
   guard-rspec
   guard-rubocop
   hirb
-  jquery-rails
   json-schema
   jwt
   kaminari
@@ -446,6 +441,7 @@ DEPENDENCIES
   vcr
   web-console (~> 2.1.3)
   webmock
+  webpack-rails
   wirb
   wirble
 

diff --git a/app/assets/javascripts/alert.js b/app/assets/javascripts/alert.js
@@ -1,27 +1,30 @@
-(function () {
-  var float_alert = typeof exports !== 'undefined' && exports !== null ? exports : this;
-
-  float_alert.refreshFloatAlertPosition = function () {
-    var box = $('.float-alert');
+/* eslint-disable wrap-iife, no-param-reassign */
+// TODO: remove the eslint disable parts once we move to proper modules.
 
-    if ($(this).scrollTop() < 60) {
-      box.css('top', (72 - $(this).scrollTop()) + 'px');
-    }
+(function () {
+  (function (w) {
+    w.refreshFloatAlertPosition = function () {
+      var box = $('.float-alert');
 
-    $(window).scroll(function scrollEvent() {
-      if ($(this).scrollTop() > 60) {
-        box.css('top', '12px');
-      } else {
+      if ($(this).scrollTop() < 60) {
         box.css('top', (72 - $(this).scrollTop()) + 'px');
       }
-    });
-  };
 
-  float_alert.setTimeOutAlertDelay = function () {
-    setTimeout(function () {
-      $('.alert-hide').click();
-    }, 4000);
-  };
+      $(w).scroll(function scrollEvent() {
+        if ($(this).scrollTop() > 60) {
+          box.css('top', '12px');
+        } else {
+          box.css('top', (72 - $(this).scrollTop()) + 'px');
+        }
+      });
+    };
+
+    w.setTimeOutAlertDelay = function () {
+      setTimeout(function () {
+        $('.alert-hide').click();
+      }, 4000);
+    };
 
-  float_alert.setTimeOutAlertDelay();
-}).call(this);
+    w.setTimeOutAlertDelay();
+  })(window);
+}).call(window);
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -1,9 +1,29 @@
-//= require jquery
-//= require jquery_ujs
-//= require bootstrap/transition
-//= require bootstrap/tab
-//= require bootstrap/tooltip
-//= require bootstrap/popover
-//= require lifeitup_layout
-//= require bootstrap-typeahead-rails
-//= require_tree .
+// jQuery
+window.jQuery = require('jquery');
+require('jquery-ujs');
+
+// Bootstrap
+require('bootstrap/js/transition');
+require('bootstrap/js/tab');
+require('bootstrap/js/tooltip');
+require('bootstrap/js/popover');
+
+// Life it up
+require('vendor/lifeitup_layout');
+
+// NOTE: should be removed in the future
+require('vendor/bootstrap-typeahead');
+
+// Require tree.
+// NOTE: This should be moved into proper modules.
+require('./alert');
+require('./auth/cover');
+require('./auth/registrations');
+require('./bootstrap');
+require('./dashboard');
+require('./includes/open_close_icon');
+require('./includes/set_typehead');
+require('./namespaces');
+require('./open_search');
+require('./repositories');
+require('./teams');
diff --git a/app/assets/javascripts/includes/open_close_icon.js b/app/assets/javascripts/includes/open_close_icon.js
@@ -1,13 +1,16 @@
-(function () {
-  var open_close_icon = typeof exports !== 'undefined' && exports !== null ? exports : this;
+/* eslint-disable wrap-iife, no-param-reassign */
+// TODO: remove the eslint disable parts once we move to proper modules.
 
-  open_close_icon.open_close_icon = function (icon) {
-    if (icon.hasClass('fa-close')) {
-      icon.removeClass('fa-close');
-      icon.addClass('fa-pencil');
-    } else {
-      icon.removeClass('fa-pencil');
-      icon.addClass('fa-close');
-    }
-  };
-}).call(this);
+(function () {
+  (function (w) {
+    w.open_close_icon = function (icon) {
+      if (icon.hasClass('fa-close')) {
+        icon.removeClass('fa-close');
+        icon.addClass('fa-pencil');
+      } else {
+        icon.removeClass('fa-pencil');
+        icon.addClass('fa-close');
+      }
+    };
+  })(window);
+}).call(window);
diff --git a/app/assets/javascripts/includes/set_typehead.js b/app/assets/javascripts/includes/set_typehead.js
@@ -1,22 +1,26 @@
+/* eslint-disable wrap-iife, no-param-reassign */
+// TODO: remove the eslint disable parts once we move to proper modules.
+
 (function () {
-  var set_typehead = typeof exports !== 'undefined' && exports !== null ? exports : this;
-  var bloodhound;
+  (function (w) {
+    var bloodhound;
 
-  set_typehead.set_typeahead = function (url) {
-    $('.remote .typeahead').typeahead('destroy');
-    bloodhound = new Bloodhound({
-      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
-      queryTokenizer: Bloodhound.tokenizers.whitespace,
-      remote: {
-        cache: false,
-        url: url,
-        wildcard: '%QUERY',
-      },
-    });
-    bloodhound.initialize();
-    $('.remote .typeahead').typeahead({ highlight: true }, {
-      displayKey: 'name',
-      source: bloodhound.ttAdapter(),
-    });
-  };
-}).call(this);
+    w.set_typeahead = function (url) {
+      $('.remote .typeahead').typeahead('destroy');
+      bloodhound = new Bloodhound({
+        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
+        queryTokenizer: Bloodhound.tokenizers.whitespace,
+        remote: {
+          cache: false,
+          url: url,
+          wildcard: '%QUERY',
+        },
+      });
+      bloodhound.initialize();
+      $('.remote .typeahead').typeahead({ highlight: true }, {
+        displayKey: 'name',
+        source: bloodhound.ttAdapter(),
+      });
+    };
+  })(window);
+}).call(window);
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -1,7 +1,6 @@
 // Typeahead
-/*
- *= require bootstrap-typeahead-rails
- */
+// NOTE: this should be removed in the future in favor of a package in the npm
+@import "bootstrap-typeahead";
 
 // Vendored fonts and styles.
 @import "font-awesome";

diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim
@@ -3,7 +3,7 @@ html
   head
     title Portus
     = stylesheet_link_tag 'application', media: 'all'
-    = javascript_include_tag 'application'
+    = javascript_include_tag(*webpack_asset_paths("application"))
     = csrf_meta_tags
     meta content="width=device-width, initial-scale=1" name="viewport"
     link href="/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"

diff --git a/app/views/layouts/authentication.html.slim b/app/views/layouts/authentication.html.slim
@@ -3,7 +3,7 @@ html
   head
     title Portus
     = stylesheet_link_tag 'application', media: 'all'
-    = javascript_include_tag 'application'
+    = javascript_include_tag(*webpack_asset_paths("application"))
     = csrf_meta_tags
     meta content="width=device-width, initial-scale=1" name="viewport"
     link href="/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"

diff --git a/app/views/layouts/errors.html.slim b/app/views/layouts/errors.html.slim
@@ -3,7 +3,7 @@ html
   head
     title Portus
     = stylesheet_link_tag "application", media: "all"
-    = javascript_include_tag "application"
+    = javascript_include_tag(*webpack_asset_paths("application"))
     = csrf_meta_tags
     meta content="width=device-width, initial-scale=1" name="viewport"
     link href="/favicon/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"

diff --git a/config/application.rb b/config/application.rb
@@ -33,5 +33,11 @@ class Application < Rails::Application
 
       g.fallbacks[:rspec] = :test_unit
     end
+
+    # Configure webpack
+    config.webpack.config_file = "config/webpack.js"
+    config.webpack.output_dir  = "public/assets/webpack"
+    config.webpack.public_path = "assets/webpack"
+    config.webpack.dev_server.enabled = false
   end
 end