Add webpack workflow to support ES6 module and better dependency chec…

…king

.eslintignore

@@ -0,0 +1,2 @@
+app/vendor/
+*.bundle.js

.eslintrc.js

@@ -2,61 +2,27 @@
 module.exports = {
 	'root': true,
 	'extends': [
-		'eslint:recommended',
+		'nau',
 	],
 	'rules': {
-		'block-scoped-var'            : 1,
-		'camelcase'                   :[2, {'properties': 'never'}],
-		'comma-style'                 :[2, 'last' ],
-		'comma-dangle'                : 0, // We allow trailing commas in list for benefit of version control diff
-		'comma-spacing'               :[2, { 'before': false, 'after': true} ],
-		'curly'                       :[2, 'all' ],
-		'dot-notation'                :[2, { 'allowKeywords': true } ],
-		'eqeqeq'                      :[2, 'allow-null' ],
-		'indent'                      :[2, 'tab', {'SwitchCase': 1} ],
-		'linebreak-style'             :[2, 'unix' ],
-		'new-cap'                     :[2, { 'capIsNew': false } ], // must: new ClassFunction(); but allow: Component() (JSX component)
-		'no-bitwise'                  : 2,
-		'no-caller'                   : 2,
-		'no-console'                  : 0,
-		'no-eval'                     : 2,
-		'no-invalid-this'             : 0,
-		'no-iterator'                 : 2,
-		'no-loop-func'                : 2,
-		'no-multi-str'                : 2,
-		'no-new'                      : 2,
-		'no-proto'                    : 2,
-		'no-script-url'               : 2,
-		'no-sequences'                : 2,
-		'no-shadow'                   : 2,
-		'no-unused-vars'              :[2, { 'vars': 'local', 'args': 'none' }],
-		'no-with'                     : 2,
-		'one-var'                     :[2, { 'initialized': 'never' }],
-		'quotes'                      :[2, 'single' ],
-		'semi'                        :[2, 'always' ],
-		'keyword-spacing'             : 2,
-		'space-before-blocks'         : 2,
-		'space-infix-ops'             : 2,
-		'space-unary-ops'             :[2, { 'words': true }],
-		'strict'                      :[2, 'function'],
-		'valid-jsdoc'                 : 2,
+		'prefer-template': 'off',
+		'spaced-comment': 'off',
+		'no-underscore-dangle': 'off',
+		'no-param-reassign': 'off',
+		'prefer-spread': 'off',
+		'max-len': ['error', 120]
 	},
 	'globals': {
 		'chrome': false,
 		// bliss globals
 		'$': false,
 		'$$': false,
-		// Polyglot intl lib
-		'Polyglot': false,
-		// our namespace
-		'nau': true,
 	},
 	'env': {
 		'browser': true,
 		'node': true,
 		'es6': true,
 		'mocha': true,
-		// 'jquery': true,
 	},
 	// 'parser': 'babel-eslint',
 	'parserOptions': {
@@ -69,7 +35,15 @@ module.exports = {
 		}
 	},
 	'plugins': [
+		'import',
 		// react (install eslint-plugin-react)
 		// babel (install eslint-plugin-babel)
-	]
+	],
+	'settings': {
+		'import/resolver': {
+			'webpack': {
+				'config': 'webpack.config.js'
+			}
+		}
+	}
 };

.gitignore

@@ -6,4 +6,5 @@ dist
 app/bower_components
 test/bower_components
 package
-
+*.bundle.js
+*.js.map

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "cSpell.enabled": false
+}

app/index.html

@@ -125,22 +125,7 @@ <h3 class="modal__title" i18n="settings">Settings</h3>
 		</div>
 		<div class="modal-overlay"></div>
 
-		<!-- build:js scripts/vendor.js -->
-		<script src="vendor/bliss.min.js"></script>
-		<script src="vendor/lockr.js"></script>
-		<script src="vendor/polyglot.min.js"></script>
-		<!-- endbuild -->
-
-		<!-- build:js scripts/index.js -->
-		<script src="scripts/config.js"></script>
-		<script src="scripts/i18n.js"></script>
-		<script src="scripts/fetch.js"></script>
-		<script src="scripts/wallpaper.js"></script>
-		<script src="scripts/clock.js"></script>
-		<script src="scripts/greeting.js"></script>
-		<script src="scripts/quotes.js"></script>
-		<script src="scripts/quicklinks.js"></script>
-		<script src="scripts/index.js"></script>
-		<!-- endbuild -->
+		<script src="js/vendor.bundle.js"></script>
+		<script src="js/app.bundle.js"></script>
 	</body>
 </html>

app/scripts/clock.js

@@ -1,54 +1,52 @@
 /* © 2016 int3ractive.com
  * @author Thanh
  */
-(function() {
-	'use strict';
-	/**
-	 * The clock component
-	 * @type {Object}
-	 */
-	nau.define('clock', {
-		init(selector) {
-			this.clock = $(selector);
-
-			if (!this.clock) {
-				throw new Error('Clock.start: cannot find Clock element with selector', selector);
-			}
 
-			// update time immediately
-			this.currentTime = this.getCurrentTime();
-			this.render();
-
-			// check every second but only render when text is different
-			this.tickId = setInterval(() => {
-				const time = this.getCurrentTime();
-				if (!$.shallowEqual(time, this.currentTime)) {
-					this.currentTime = time;
-					this.render();
-				}
-			}, 1000);
-		},
-
-		stop() {
-			if (this.tickId) {
-				clearInterval(this.tickId);
-				this.tickId = 0;
-			}
-		},
+/**
+ * The clock component
+ * @type {Object}
+ */
+export default {
+	init(selector) {
+		this.clock = $(selector);
 
-		getCurrentTime() {
-			let now = new Date();
-			let hours = now.getHours() < 10 ? '0' + now.getHours() : now.getHours();
-			let minutes = now.getMinutes() < 10 ? '0' + now.getMinutes() : now.getMinutes();
-			// let seconds = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
+		if (!this.clock) {
+			throw new Error('Clock.start: cannot find Clock element with selector', selector);
+		}
 
-			return {hours, minutes};
-		},
+		// update time immediately
+		this.currentTime = this.getCurrentTime();
+		this.render();
 
-		render() {
-			let {hours, minutes} = this.currentTime;
-			this.clock.innerHTML = `<span class="clock__hour">${hours}</span>:<span class="clock__minute">${minutes}</span>`;
-		}
-	});
+		// check every second but only render when text is different
+		this.tickId = setInterval(() => {
+			const time = this.getCurrentTime();
+			if (!$.shallowEqual(time, this.currentTime)) {
+				this.currentTime = time;
+				this.render();
+			}
+		}, 1000);
+	},
 
-}());
+	stop() {
+		if (this.tickId) {
+			clearInterval(this.tickId);
+			this.tickId = 0;
+		}
+	},
+
+	getCurrentTime() {
+		const now = new Date();
+		const hours = now.getHours() < 10 ? `0${now.getHours()}` : now.getHours();
+		const minutes = now.getMinutes() < 10 ? `0${now.getMinutes()}` : now.getMinutes();
+		// let seconds = now.getSeconds() < 10 ? '0' + now.getSeconds() : now.getSeconds();
+
+		return { hours, minutes };
+	},
+
+	render() {
+		const { hours, minutes } = this.currentTime;
+		this.clock.innerHTML =
+			`<span class="clock__hour">${hours}</span>:<span class="clock__minute">${minutes}</span>`;
+	},
+};