From 8af0a7739c13a95f18f2c58508f73d7e79f48a7b Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Tue, 29 May 2018 13:09:22 +0200
Subject: [PATCH] Webpack: src in app/frontend, selective JS bootstrap

---
 app/assets/config/manifest.js                     |  2 --
 app/{javascript => frontend}/packs/application.js |  7 +++++--
 .../src => frontend/scss}/components/users.scss   |  0
 app/frontend/scss/index.js                        |  1 +
 .../application.scss => frontend/scss/index.scss} |  1 +
 app/frontend/scss/layout.scss                     | 15 +++++++++++++++
 config/webpack/environment.js                     |  9 +++++++++
 config/webpacker.yml                              |  2 +-
 package.json                                      |  1 +
 yarn.lock                                         | 11 +++++++++++
 10 files changed, 44 insertions(+), 5 deletions(-)
 rename app/{javascript => frontend}/packs/application.js (84%)
 rename app/{javascript/packs/src => frontend/scss}/components/users.scss (100%)
 create mode 100644 app/frontend/scss/index.js
 rename app/{javascript/packs/src/application.scss => frontend/scss/index.scss} (78%)
 create mode 100644 app/frontend/scss/layout.scss

diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js
index b16e53d..ac907b3 100644
--- a/app/assets/config/manifest.js
+++ b/app/assets/config/manifest.js
@@ -1,3 +1 @@
 //= link_tree ../images
-//= link_directory ../javascripts .js
-//= link_directory ../stylesheets .css
diff --git a/app/javascript/packs/application.js b/app/frontend/packs/application.js
similarity index 84%
rename from app/javascript/packs/application.js
rename to app/frontend/packs/application.js
index 6abc989..30be22b 100644
--- a/app/javascript/packs/application.js
+++ b/app/frontend/packs/application.js
@@ -7,8 +7,11 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
-import 'bootstrap'
-import './src/application.scss'
 import Rails from 'rails-ujs';
 
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/dropdown';
+
+import '../scss';
+
 Rails.start()
diff --git a/app/javascript/packs/src/components/users.scss b/app/frontend/scss/components/users.scss
similarity index 100%
rename from app/javascript/packs/src/components/users.scss
rename to app/frontend/scss/components/users.scss
diff --git a/app/frontend/scss/index.js b/app/frontend/scss/index.js
new file mode 100644
index 0000000..67aac61
--- /dev/null
+++ b/app/frontend/scss/index.js
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/app/javascript/packs/src/application.scss b/app/frontend/scss/index.scss
similarity index 78%
rename from app/javascript/packs/src/application.scss
rename to app/frontend/scss/index.scss
index f6121ca..649b167 100644
--- a/app/javascript/packs/src/application.scss
+++ b/app/frontend/scss/index.scss
@@ -1,2 +1,3 @@
 @import '~bootstrap/scss/bootstrap';
+@import 'layout';
 @import 'components/users';
diff --git a/app/frontend/scss/layout.scss b/app/frontend/scss/layout.scss
new file mode 100644
index 0000000..ce62abd
--- /dev/null
+++ b/app/frontend/scss/layout.scss
@@ -0,0 +1,15 @@
+@import '~bootstrap/scss/_functions';
+@import '~bootstrap/scss/_variables';
+@import '~bootstrap/scss/mixins/_breakpoints';
+
+.navbar {
+  margin-bottom: 30px;
+
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 20px;
+  }
+}
+
+.alert-layout {
+  margin-bottom: 30px;
+}
diff --git a/config/webpack/environment.js b/config/webpack/environment.js
index d16d9af..ceb0013 100644
--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1,3 +1,12 @@
+const webpack = require('webpack')
 const { environment } = require('@rails/webpacker')
 
+environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
+  $: 'jquery',
+  jQuery: 'jquery',
+  Popper: ['popper.js', 'default'],
+  Util: "exports-loader?Util!bootstrap/js/dist/util",
+}))
+
+
 module.exports = environment
diff --git a/config/webpacker.yml b/config/webpacker.yml
index 0da0d0a..dfd9028 100644
--- a/config/webpacker.yml
+++ b/config/webpacker.yml
@@ -1,7 +1,7 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
+  source_path: app/frontend
   source_entry_path: packs
   public_output_path: packs
   cache_path: tmp/cache/webpacker
diff --git a/package.json b/package.json
index 4dc959a..f1eb294 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "rails-ujs": "^5.2.0"
   },
   "devDependencies": {
+    "exports-loader": "^0.7.0",
     "webpack-dev-server": "2.11.2"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e12e366..83f3e0f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1997,6 +1997,13 @@ expand-range@^1.8.1:
   dependencies:
     fill-range "^2.1.0"
 
+exports-loader@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/exports-loader/-/exports-loader-0.7.0.tgz#84881c784dea6036b8e1cd1dac3da9b6409e21a5"
+  dependencies:
+    loader-utils "^1.1.0"
+    source-map "0.5.0"
+
 express@^4.16.2:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
@@ -5234,6 +5241,10 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
+source-map@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.0.tgz#0fe96503ac86a5adb5de63f4e412ae4872cdbe86"
+
 source-map@^0.4.2:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"