Merge pull request #1625 from ptrckvzn/webpack-sage-9

WIP: webpack implementation

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    "es2015"
+  ]
+}

.eslintrc

@@ -10,6 +10,7 @@
     "node": true,
     "amd": true
   },
+  "parser": "babel-eslint",
   "rules": {
     "no-console": 0
   }

assets/scripts/main.js

@@ -1,77 +1,51 @@
-/* ========================================================================
- * DOM-based Routing
- * Based on http://goo.gl/EUTi53 by Paul Irish
- *
- * Only fires on body classes that match. If a body class contains a dash,
- * replace the dash with an underscore when adding it to the object below.
- *
- * .noConflict()
- * The routing is enclosed within an anonymous function so that you can
- * always reference jQuery with $, even when in .noConflict() mode.
- * ======================================================================== */
-
-(function($) {
-
-  // Use this variable to set up the common and page specific functions. If you
-  // rename this variable, you will also need to rename the namespace below.
-  var Sage = {
-    // All pages
-    'common': {
-      init: function() {
-        // JavaScript to be fired on all pages
-      },
-      finalize: function() {
-        // JavaScript to be fired on all pages, after page specific JS is fired
-      }
-    },
-    // Home page
-    'home': {
-      init: function() {
-        // JavaScript to be fired on the home page
-      },
-      finalize: function() {
-        // JavaScript to be fired on the home page, after the init JS
-      }
+import "../styles/main.scss";
+
+import $ from 'jquery';
+import Router from './util/router';
+
+// Import Bootstrap
+import "bootstrap/dist/js/umd/util.js";
+import "bootstrap/dist/js/umd/alert.js";
+import "bootstrap/dist/js/umd/button.js";
+import "bootstrap/dist/js/umd/carousel.js";
+import "bootstrap/dist/js/umd/collapse.js";
+import "bootstrap/dist/js/umd/dropdown.js";
+import "bootstrap/dist/js/umd/modal.js";
+import "bootstrap/dist/js/umd/scrollspy.js";
+import "bootstrap/dist/js/umd/tab.js";
+import "bootstrap/dist/js/umd/tooltip.js";
+import "bootstrap/dist/js/umd/popover.js";
+
+// Use this variable to set up the common and page specific functions. If you
+// rename this variable, you will also need to rename the namespace below.
+var Sage = {
+  // All pages
+  'common': {
+    init: function() {
+      // JavaScript to be fired on all pages
     },
-    // About us page, note the change from about-us to about_us.
-    'about_us': {
-      init: function() {
-        // JavaScript to be fired on the about us page
-      }
+    finalize: function() {
+      // JavaScript to be fired on all pages, after page specific JS is fired
     }
-  };
-
-  // The routing fires all common scripts, followed by the page specific scripts.
-  // Add additional events for more control over timing e.g. a finalize event
-  var UTIL = {
-    fire: function(func, funcname, args) {
-      var fire;
-      var namespace = Sage;
-      funcname = (funcname === undefined) ? 'init' : funcname;
-      fire = func !== '';
-      fire = fire && namespace[func];
-      fire = fire && typeof namespace[func][funcname] === 'function';
-
-      if (fire) {
-        namespace[func][funcname](args);
-      }
+  },
+  // Home page
+  'home': {
+    init: function() {
+      // JavaScript to be fired on the home page
     },
-    loadEvents: function() {
-      // Fire common init JS
-      UTIL.fire('common');
-
-      // Fire page-specific init JS, and then finalize JS
-      $.each(document.body.className.replace(/-/g, '_').split(/\s+/), function(i, classnm) {
-        UTIL.fire(classnm);
-        UTIL.fire(classnm, 'finalize');
-      });
-
-      // Fire common finalize JS
-      UTIL.fire('common', 'finalize');
+    finalize: function() {
+      // JavaScript to be fired on the home page, after the init JS
     }
-  };
-
-  // Load Events
-  $(document).ready(UTIL.loadEvents);
+  },
+  // About us page, note the change from about-us to about_us.
+  'about_us': {
+    init: function() {
+      // JavaScript to be fired on the about us page
+    }
+  }
+};
 
-})(jQuery); // Fully reference jQuery after this point.
+// Load Events
+$(document).ready(function () {
+  new Router(Sage).loadEvents();
+});

assets/scripts/util/router.js

@@ -0,0 +1,45 @@
+import $ from 'jquery';
+
+/* ========================================================================
+ * DOM-based Routing
+ * Based on http://goo.gl/EUTi53 by Paul Irish
+ *
+ * Only fires on body classes that match. If a body class contains a dash,
+ * replace the dash with an underscore when adding it to the object below.
+ * ======================================================================== */
+
+// The routing fires all common scripts, followed by the page specific scripts.
+// Add additional events for more control over timing e.g. a finalize event
+export default class Router {
+  constructor(namespace) {
+    this.namespace = namespace;
+  }
+
+  fire(func, funcname, args) {
+    funcname = (funcname === undefined) ? 'init' : funcname;
+    let fire = func !== '';
+    fire = fire && this.namespace[func];
+    fire = fire && typeof this.namespace[func][funcname] === 'function';
+
+    if (fire) {
+      this.namespace[func][funcname](args);
+    }
+  }
+
+  loadEvents() {
+    // Fire common init JS
+    this.fire('common');
+
+    // Fire page-specific init JS, and then finalize JS
+    $.each(
+      document.body.className.replace(/-/g, '_').split(/\s+/),
+      (i, className) => {
+        this.fire(className);
+        this.fire(className, 'finalize');
+      }
+    );
+
+    // Fire common finalize JS
+    this.fire('common', 'finalize');
+  }
+}

assets/styles/components/_grid.scss

@@ -1,15 +1,18 @@
 // Grid system
 .main {
-  @include make-col($main-sm-columns, $main-sm-columns, $grid-gutter-width);
+  @include make-col();
 
   @include media-breakpoint-up(sm) {
+    @include make-col-span($main-sm-columns);
     .sidebar-primary & {
-      @include make-col($main-sm-columns - $sidebar-sm-columns, $main-sm-columns, $grid-gutter-width);
+      @include make-col-span($main-sm-columns - $sidebar-sm-columns);
     }
   }
 }
 .sidebar {
+  @include make-col();
+
   @include media-breakpoint-up(sm) {
-    @include make-col($sidebar-sm-columns, $main-sm-columns, $grid-gutter-width);
+    @include make-col-span($sidebar-sm-columns);
   }
 }

assets/styles/main.scss

@@ -1,9 +1,7 @@
 @import "common/variables";
 
-// Automatically injected Bower dependencies via wiredep (never manually edit this block)
-// bower:scss
-@import "../../bower_components/bootstrap/scss/bootstrap.scss";
-// endbower
+// Import Boostrap from node_modules/...
+@import "~bootstrap/scss/bootstrap";
 
 @import "common/global";
 @import "components/buttons";

dev.js

@@ -0,0 +1,30 @@
+/* eslint no-console: 0 */
+
+var webpack = require('webpack'),
+    webpackDevMiddleware = require('webpack-dev-middleware'),
+    webpackHotMiddleware = require('webpack-hot-middleware'),
+    browserSync = require('browser-sync');
+
+var devBuildConfig = require('./webpack.config'),
+    compiler = webpack(devBuildConfig);
+
+browserSync.init({
+  proxy: {
+    target: 'http://example.dev', // change to dev server
+    middleware: [
+      webpackDevMiddleware(compiler, {
+        publicPath: devBuildConfig.output.publicPath,
+        stats: {
+          colors: true
+        },
+      }),
+      webpackHotMiddleware(compiler, {
+        log: browserSync.notify
+      })
+    ]
+  },
+  files: [
+    'templates/**/*.php',
+    'src/**/*.php'
+  ]
+});