Proceeding with ES6 modules (with the help of Browserify)

- Added necessary grunt tasks and npm packages
- Concept of Global functions to be revised

.eslintrc

@@ -0,0 +1,42 @@
+{
+	"env": {
+		"browser": true,
+		"node": true,
+		"es6": true
+	},
+	"ecmaFeatures": {
+		"arrowFunctions": true,
+		"binaryLiterals": true,
+		"blockBindings": true,
+		"classes": true,
+		"defaultParams": true,
+		"destructuring": true,
+		"forOf": true,
+		"generators": true,
+		"modules": true,
+		"objectLiteralComputedProperties": true,
+		"objectLiteralDuplicateProperties": true,
+		"objectLiteralShorthandMethods": true,
+		"objectLiteralShorthandProperties": true,
+		"octalLiterals": true,
+		"regexUFlag": true,
+		"regexYFlag": true,
+		"spread": true,
+		"superInFunctions": false,
+		"templateStrings": true,
+		"unicodeCodePointEscapes": true,
+		"globalReturn": true,
+		"jsx": true
+	},
+	"rules": {
+		"eqeqeq": 2,
+		"strict": 0,
+		"no-empty": 1,
+		"no-alert": 2,
+		"no-eval": 2,
+		"quotes": [1, "single", "avoid-escape"],
+		"no-trailing-spaces": [2, { "skipBlankLines": true }],
+		"eol-last": 0,
+		"yoda": [2, "never", { "exceptRange": true }]
+	}
+}

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 node_modules/
 vendor
 composer.lock

Gruntfile.js

@@ -17,6 +17,7 @@ module.exports = function(grunt) {
 	var config = {
 		pkg: grunt.file.readJSON('package.json')
 	}
+
 	grunt.loadTasks('grunt_tasks');
 	grunt.util._.extend(config, loadConfig('./grunt_tasks/'));
 	grunt.initConfig(config);
@@ -24,20 +25,21 @@ module.exports = function(grunt) {
 	// Load tasks
 	require('load-grunt-tasks')(grunt);
 
-
 	// Register tasks
 	grunt.registerTask('default', ['watch', 'notify:watch']);
 	grunt.registerTask('sync', ['browserSync', 'watch', 'notify:watch']);
 	grunt.registerTask('build', [
-		'concat',
+		// CSS
 		'sass',
-		'svgstore',
 		'postcss',
-		'babel',
-		'uglify',
 		'cssmin',
-		'svgmin',
-		'imagemin'
+		// JS
+		'browserify:prod',
+		'eslint',
+		'uglify',
+		// SVG
+		'svgstore',
+		'svgmin'
 	]);
 	grunt.registerTask('c', [
 		'csscomb'

grunt_tasks/babel.js

@@ -1,11 +0,0 @@
-module.exports = {
-	options: {
-		sourceMap: true,
-		presets: ['es2015']
-	},
-	dist: {
-		files: {
-			'www/modules/boilerplate/assets/scripts/dist/app.js': 'www/modules/boilerplate/assets/scripts/dist/app.js'
-		}
-	}
-};

grunt_tasks/browserify.js

@@ -0,0 +1,22 @@
+module.exports = {
+	dev: {
+		options: {
+			transform: [['babelify', { presets: ['es2015'] }]],
+			browserifyOptions: { debug: true },
+			exclude: ''
+		},
+		files: {
+			'www/modules/boilerplate/assets/scripts/dist/app.js': ['www/modules/boilerplate/assets/scripts/src/**/*.js']
+		}
+	},
+	prod: {
+		options: {
+			transform: [['babelify', { presets: ['es2015'] }]],
+			browserifyOptions: { debug: false },
+			exclude: ''
+		},
+		files: {
+			'www/modules/boilerplate/assets/scripts/dist/app.js': ['www/modules/boilerplate/assets/scripts/src/**/*.js']
+		}
+	}
+};

grunt_tasks/eslint.js

@@ -0,0 +1,7 @@
+module.exports = {
+	options: {
+		format: require('eslint-tap'),
+		configFile: '.eslintrc'
+	},
+	target: 'www/modules/boilerplate/assets/scripts/src/**/*.js'
+};

grunt_tasks/notify.js

@@ -17,10 +17,10 @@ module.exports = {
 			message: 'Sass compiled to CSS.'
 		}
 	},
-	concat: {
+	javascript: {
 		options: {
 			// title: '<%= pkg.title %>',
-			message: 'JavaScript is now concatenated'
+			message: 'JavaScript is ready.'
 		}
 	},
 	svg: {

grunt_tasks/watch.js

@@ -1,7 +1,7 @@
 module.exports = {
 	javascript: {
 		files: ['www/modules/boilerplate/assets/scripts/src/**/*.js'],
-		tasks: ['concat', 'babel', 'notify:concat']
+		tasks: ['browserify:dev', 'eslint', 'notify:javascript']
 	},
 	sass: {
 		files: ['www/modules/boilerplate/assets/styles/src/**/*.scss'],

package.json

@@ -4,17 +4,20 @@
   "author": "Locomotive <info@locomotive.ca>",
   "devDependencies": {
     "autoprefixer": "0.0.0",
-    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-es2015": "0.0.0",
+    "babelify": "0.0.0",
+    "eslint-tap": "0.0.0",
     "glob": "0.0.0",
     "grunt": "0.0.0",
-    "grunt-babel": "^6.0.0",
     "grunt-browser-sync": "0.0.0",
+    "grunt-browserify": "0.0.0",
     "grunt-contrib-concat": "0.0.0",
     "grunt-contrib-cssmin": "0.0.0",
     "grunt-contrib-jshint": "0.0.0",
     "grunt-contrib-uglify": "0.0.0",
     "grunt-contrib-watch": "0.0.0",
     "grunt-csscomb": "0.0.0",
+    "grunt-eslint": "0.0.0",
     "grunt-jsonlint": "0.0.0",
     "grunt-notify": "0.0.0",
     "grunt-phplint": "0.0.0",

www/index.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <!--[if lte IE 9]>     <html lang="fr" class="ie9"> <![endif]-->
-<!--[if gt IE 9]><!--> <html lang="fr"> <!--<![endif]-->
+<!--[if gt IE 9]><!--> <html lang="fr" data-template="generic"> <!--<![endif]-->
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -14,7 +14,7 @@
 
         <link rel="stylesheet" href="modules/boilerplate/assets/styles/dist/main.css">
     </head>
-    <body>
+    <body data-widget="generic">
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="modules/boilerplate/assets/scripts/dist/jquery-1.11.3.min.js"><\/script>')</script>

www/modules/boilerplate/assets/scripts/src/app.js

@@ -1,56 +1,58 @@
 /* jshint esnext: true */
 // ==========================================================================
-// App
-// ==========================================================================
-var app = window.app || {};
+import * as widgets from './widgets'
+import * as templates from './templates'
 
-app.init = function () {
+class App {
+	constructor (options) {
 
-	this.elements = {
-		html: document.documentElement,
-		body: document.body
-	};
+		this.elements = {
+			html: document.documentElement,
+			body: document.body
+		};
 
-	this.params = {
-		current_modules: [],
-		current_template: this.elements.html.getAttribute('data-template'),
-		current_widgets: []
-	};
+		this.params = {
+			current_modules: [],
+			current_template: this.elements.html.getAttribute('data-template'),
+			current_widgets: []
+		};
 
-	this.templates = this.templates || {};
-	this.widgets = this.widgets || {};
+		this.widgets = widgets;
+		this.templates = templates;
 
-	// Globals
-	// ==========================================================================
-	if (typeof this.globals === 'function') {
-		this.globals();
-	}
+		/**
+		 * @todo Discuss naming conventions and difference between modules and widgets
+		 */
+		// Modules
+		// ==========================================================================
+		//var modules = document.querySelectorAll('[data-app]');
+		//for (let i = 0, len = modules.length; i < len; i++) {
+		//	let ident = modules[i].getAttribute('data-app');
+		//	if (typeof this[ident] === 'object' && this.params.current_modules.indexOf(ident) === -1) {
+		//		this[ident].init();
+		//		this.params.current_modules.push(ident);
+		//	}
+		//}
 
-	// Modules
-	// ==========================================================================
-	var modules = document.querySelectorAll('[data-app]');
-	for (let i = 0, len = modules.length; i < len; i++) {
-		let ident = modules[i].getAttribute('data-app');
-		if (typeof this[ident] === 'object' && this.params.current_modules.indexOf(ident) === -1) {
-			this[ident].init();
-			this.params.current_modules.push(ident);
+		// Template
+		// ==========================================================================
+		var templateIdent = this.params.current_template + 'Template';
+		if (typeof this.templates[templateIdent] === 'function') {
+			var template = new this.templates[templateIdent];
 		}
-	}
 
-	// Template
-	// ==========================================================================
-	if (typeof this.templates[this.params.current_template] === 'object') {
-		this.templates[this.params.current_template].init();
-	}
-
-	// Widgets
-	// ==========================================================================
-	var widgets = document.querySelectorAll('[data-widget]');
-	for (let i = 0, len = widgets.length; i < len; i++) {
-		let ident = widgets[i].getAttribute('data-widget');
-		if (typeof this.widgets[ident] === 'object' && this.params.current_widgets.indexOf(ident) === -1) {
-			this.widgets[ident].init();
-			this.params.current_widgets.push(ident);
+		// Widgets
+		// ==========================================================================
+		var widgetEls = document.querySelectorAll('[data-widget]');
+		for (let i = 0, len = widgetEls.length; i < len; i++) {
+			let ident = widgetEls[i].getAttribute('data-widget') + 'Widget';
+			if (typeof this.widgets[ident] === 'function' && this.params.current_widgets.indexOf(ident) === -1) {
+				/**
+				 * @todo Discuss storing instanciated objects
+				 */
+				let widget = new this.widgets[ident];
+				this.params.current_widgets.push(widget);
+			}
 		}
 	}
 };
@@ -58,5 +60,5 @@ app.init = function () {
 // Init
 // ==========================================================================
 $(function() {
-	app.init();
+	window.app = new App();
 });

www/modules/boilerplate/assets/scripts/src/app/globals.js

@@ -1,11 +0,0 @@
-/* jshint esnext: true */
-// ==========================================================================
-// Globals
-// ==========================================================================
-var app = window.app || {};
-
-app.globals = function() {
-    // Global app modules
-    // ==========================================================================
-    // this.parallax.init();
-};

www/modules/boilerplate/assets/scripts/src/templates.js

@@ -0,0 +1 @@
+export {default as genericTemplate} from './templates/generic';

www/modules/boilerplate/assets/scripts/src/templates/generic.js

@@ -1,13 +1,10 @@
 // ==========================================================================
 // Generic template
 // ==========================================================================
-var app = window.app || {};
-app.templates = app.templates || {};
 
-app.templates.generic = {
-
-    init: function() {
-
-    }
-
-};
+export default class genericTemplate {
+	constructor (options) {
+		console.log('Generic template');
+		this.options = options;
+	}
+}

www/modules/boilerplate/assets/scripts/src/widgets.js

@@ -0,0 +1 @@
+export {default as genericWidget} from './widgets/generic';

www/modules/boilerplate/assets/scripts/src/widgets/generic.js

@@ -1,13 +1,10 @@
 // ==========================================================================
 // Generic widget
 // ==========================================================================
-var app = window.app || {};
-app.widgets = app.widgets || {};
 
-app.widgets.generic = {
-
-    init: function() {
-
-    }
-
-};
+export default class genericWidget {
+	constructor (options) {
+		console.log('Generic widget');
+		this.options = options;
+	}
+}