explicit deps

src/app.js

@@ -1,12 +1,11 @@
-/* global app, log */
 'use strict'
 
-require('./view')
+var View = require('./view')
-require('./helpers')
+var helpers = require('./helpers')
-require('./controller')
+var Controller = require('./controller')
-require('./model')
+var Model = require('./model')
-require('./store')
+var Store = require('./store')
-require('./template')
+var Template = require('./template')
 
 /**
 * Sets up a brand new Todo list.
@@ -14,19 +13,15 @@ require('./template')
 * @param {string} name The name of your new to do list.
 */
 function Todo(name) {
-  this.storage = new app.Store(name)
+  this.storage = new Store(name)
-  this.model = new app.Model(this.storage)
+  this.model = new Model(this.storage)
-  this.template = new app.Template()
+  this.template = new Template()
-  this.view = new app.View(this.template)
+  this.view = new View(this.template)
-  this.controller = new app.Controller(this.model, this.view)
+  this.controller = new Controller(this.model, this.view)
 }
 
-function onLoad() {
+module.exports.onLoad = function onLoad() {
   var todo = new Todo('todos-vanillajs')
   todo.controller.setView(document.location.hash)
-  log('view set')
+  helpers.log('view set')
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.onLoad = onLoad

src/bootstrap.js

@@ -1,8 +1,7 @@
-/* global app, $on */
 'use strict'
 
-require('./app')
+var app = require('./app')
-require('./helpers')
+var helpers = require('./helpers')
 
-$on(window, 'load', app.onLoad)
+helpers.$on(window, 'load', app.onLoad)
-$on(window, 'hashchange', app.onLoad)
+helpers.$on(window, 'hashchange', app.onLoad)

src/controller.js

@@ -1,5 +1,7 @@
 'use strict'
 
+module.exports = Controller
+
 /**
 * Takes a model and view and acts as the controller between them
 *
@@ -260,7 +262,3 @@ Controller.prototype._updateFilterState = function(currentPage) {
 
   this.view.render('setFilter', currentPage)
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.Controller = Controller

src/helpers.js

@@ -1,31 +1,42 @@
 'use strict'
 
+module.exports = {
+  qs: qs,
+  qsa: qsa,
+  log: log,
+  $on: $on,
+  $delegate: $delegate,
+  $parent: $parent,
+  remove: remove,
+  leftPad: leftPad,
+}
+
 // Get element(s) by CSS selector:
-window.qs = function(selector, scope) {
+function qs(selector, scope) {
   return (scope || document).querySelector(selector)
 }
 
-window.qsa = function(selector, scope) {
+function qsa(selector, scope) {
   return (scope || document).querySelectorAll(selector)
 }
 
-window.log = function log() {
+function log() {
   if (window.console && window.console.log) {
     window.console.log.apply(window.console, arguments) // eslint-disable-line
   }
 }
 
 // addEventListener wrapper:
-window.$on = function(target, type, callback, useCapture) {
+function $on(target, type, callback, useCapture) {
   target.addEventListener(type, callback, !!useCapture)
 }
 
 // Attach a handler to event for all elements that match the selector,
 // now or in the future, based on a root element
-window.$delegate = function(target, selector, type, handler) {
+function $delegate(target, selector, type, handler) {
   function dispatchEvent(event) {
     var targetElement = event.target
-    var potentialElements = window.qsa(selector, target)
+    var potentialElements = qsa(selector, target)
     var hasMatch = Array.prototype.indexOf.call(potentialElements, targetElement) >= 0
 
     if (hasMatch) {
@@ -36,26 +47,26 @@ window.$delegate = function(target, selector, type, handler) {
   // https://developer.mozilla.org/en-US/docs/Web/Events/blur
   var useCapture = type === 'blur' || type === 'focus'
 
-  window.$on(target, type, dispatchEvent, useCapture)
+  $on(target, type, dispatchEvent, useCapture)
 }
 
 // Find the element's parent with the given tag name:
 // $parent(qs('a'), 'div');
-window.$parent = function(element, tagName) {
+function $parent(element, tagName) {
   if (!element.parentNode) {
     return
   }
   if (element.parentNode.tagName.toLowerCase() === tagName.toLowerCase()) {
     return element.parentNode
   }
-  return window.$parent(element.parentNode, tagName)
+  return $parent(element.parentNode, tagName)
 }
 
 // removes an element from an array
 // const x = [1,2,3]
 // remove(x, 2)
 // x ~== [1,3]
-window.remove = function remove(array, thing) {
+function remove(array, thing) {
   const index = array.indexOf(thing)
   if (index === -1) {
     return array
@@ -65,7 +76,7 @@ window.remove = function remove(array, thing) {
 
 // pad the left of the given string by the given size with the given character
 // leftPad('10', 3, '0') -> 010
-window.leftPad = function leftPad(str, size, padWith) {
+function leftPad(str, size, padWith) {
   if (size <= str.length) {
     return str
   } else {

src/model.js

@@ -1,5 +1,7 @@
 'use strict'
 
+module.exports = Model
+
 /**
 * Creates a new Model instance and hooks up the storage.
 *
@@ -114,7 +116,3 @@ Model.prototype.getCount = function(callback) {
     callback(todos)
   })
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.Model = Model

src/store.js

@@ -1,5 +1,7 @@
 'use strict'
 
+module.exports = Store
+
 /**
 * Creates a new client side storage object and will create an empty
 * collection if no collection already exists.
@@ -136,7 +138,3 @@ Store.prototype.drop = function(callback) {
   localStorage[this._dbName] = JSON.stringify({todos: []})
   callback.call(this, JSON.parse(localStorage[this._dbName]).todos)
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.Store = Store

src/template.js

@@ -1,5 +1,7 @@
 'use strict'
 
+module.exports = Template
+
 var htmlEscapes = {
   '&': '&',
   '<': '&lt;',
@@ -104,7 +106,3 @@ Template.prototype.clearCompletedButton = function(completedTodos) {
     return ''
   }
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.Template = Template

src/view.js

@@ -1,7 +1,15 @@
-/*global qs, qsa, $on, $parent, $delegate */
 /* eslint no-invalid-this: 0 */
 'use strict'
 
+var helpers = require('./helpers')
+var qs = helpers.qs
+var qsa = helpers.qsa
+var $on = helpers.$on
+var $parent = helpers.$parent
+var $delegate = helpers.$delegate
+
+module.exports = View
+
 /**
 * View that abstracts away the browser's DOM completely.
 * It has two simple entry points:
@@ -211,7 +219,3 @@ View.prototype.bind = function(event, handler) { // eslint-disable-line
     that._bindItemEditCancel(handler)
   }
 }
-
-// Export to window
-window.app = window.app || {}
-window.app.View = View