diff --git a/.eslintrc b/.eslintrc index 50cc65d..e8856c8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,5 +1,5 @@ { - "extends": ["kentcdodds"], + "extends": ["kentcdodds", "kentcdodds/mocha", "kentcdodds/webpack"], "rules": { // these are only here because I did not // want to update the entire codebase ¯\_(ツ)_/¯ @@ -12,8 +12,13 @@ "complexity": [2, 8], "max-depth": [2, 6], "consistent-return": 0, + "id-match": 0, + "import/newline-after-import": 0, // es6 stuff we technically can not do yet "object-shorthand": 0, + "prefer-arrow-callback": 0, + "prefer-template": 0, + "babel/object-shorthand": 0, }, "globals": { "describe": false, diff --git a/index.html b/index.html index 77dd369..26198ae 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ VanillaJS • TodoMVC - @@ -40,7 +39,6 @@

Ported to ES6 by Kent C. Dodds

Part of TodoMVC

- @@ -48,5 +46,6 @@ + diff --git a/karma.conf.js b/karma.conf.js deleted file mode 100644 index 17c1adf..0000000 --- a/karma.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -var preprocessors = {} -preprocessors['src/**/*.js'] = ['coverage'] -module.exports = function setKarmaConfig(config) { - config.set({ - basePath: '', - frameworks: ['mocha', 'chai'], - files: [ - 'src/**/*.js', - 'test/stub/**/*.js', - 'test/unit/**/*.js', - ], - exclude: [ - 'src/app.js', - ], - reporters: ['progress', 'coverage'], - preprocessors: preprocessors, - coverageReporter: { - reporters: [ - {type: 'lcov', dir: 'coverage/', subdir: '.'}, - {type: 'json', dir: 'coverage/', subdir: '.'}, - {type: 'text-summary'}, - ], - }, - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: ['Chrome'], - singleRun: true, - concurrency: Infinity - }) -} diff --git a/package.json b/package.json index 4f5b9af..62128bb 100644 --- a/package.json +++ b/package.json @@ -1,27 +1,14 @@ { "private": true, "dependencies": { - "todomvc-app-css": "2.0.4", - "todomvc-common": "1.0.2" + "todomvc-app-css": "2.0.6" }, "devDependencies": { - "babel-eslint": "6.0.4", - "chai": "3.5.0", - "cpy-cli": "1.0.0", - "eslint": "2.9.0", - "eslint-config-kentcdodds": "6.2.1", - "ghooks": "1.2.1", + "eslint": "3.1.1", + "eslint-config-kentcdodds": "^8.1.3", + "ghooks": "1.3.2", "http-server": "0.9.0", - "istanbul": "0.4.3", - "karma": "0.13.22", - "karma-chai": "0.1.0", - "karma-chrome-launcher": "1.0.1", - "karma-coverage": "1.0.0", - "karma-mocha": "1.0.1", - "mocha": "2.5.3", - "npm-run-all": "1.8.0", - "opt-cli": "1.4.2", - "rimraf": "2.5.2" + "opt-cli": "1.5.1" }, "config": { "ghooks": { @@ -29,12 +16,8 @@ } }, "scripts": { - "test": "karma start", - "check-coverage": "istanbul check-coverage --statements 22 --branches 5 --functions 0 --lines 22", - "watch:test": "npm test -- --auto-watch --no-single-run", - "validate": "npm-run-all --parallel lint test --serial check-coverage", - "start": "http-server", - "lint": "eslint .", - "setup": "npm install && npm run validate" + "validate": "npm run lint", + "start": "http-server --silent -c-1", + "lint": "eslint ." } } diff --git a/src/app.js b/src/app.js index da65a07..4549b15 100644 --- a/src/app.js +++ b/src/app.js @@ -1,5 +1,5 @@ -/* global app, $on */ -(function() { +/* global app, log */ +(function(window) { 'use strict' /** @@ -15,11 +15,14 @@ this.controller = new app.Controller(this.model, this.view) } - function setView() { + function onLoad() { var todo = new Todo('todos-vanillajs') todo.controller.setView(document.location.hash) + log('view set') } - $on(window, 'load', setView) - $on(window, 'hashchange', setView) -})() + + // Export to window + window.app = window.app || {} + window.app.onLoad = onLoad +})(window) diff --git a/src/bootstrap.js b/src/bootstrap.js new file mode 100644 index 0000000..e11a041 --- /dev/null +++ b/src/bootstrap.js @@ -0,0 +1,7 @@ +/* global app, $on */ +(function(window) { + 'use strict' + + $on(window, 'load', app.onLoad) + $on(window, 'hashchange', app.onLoad) +})(window) diff --git a/src/helpers.js b/src/helpers.js index d5a9865..61c9e4f 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -6,10 +6,18 @@ window.qs = function(selector, scope) { return (scope || document).querySelector(selector) } + window.qsa = function(selector, scope) { return (scope || document).querySelectorAll(selector) } + + window.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) { target.addEventListener(type, callback, !!useCapture) @@ -46,6 +54,28 @@ return window.$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) { + const index = array.indexOf(thing) + if (index === -1) { + return array + } + array.splice(index, 1) + } + + // 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) { + if (size <= str.length) { + return str + } else { + return Array(size - str.length + 1).join(padWith || '0') + str + } + } + // Allow for looping on nodes by chaining: // qsa('.foo').forEach(function () {}) NodeList.prototype.forEach = Array.prototype.forEach diff --git a/test/stub/model.js b/test/stub/model.js deleted file mode 100644 index 327f25a..0000000 --- a/test/stub/model.js +++ /dev/null @@ -1,8 +0,0 @@ -(function(window) { - 'use strict' - window.stubs = window.stubs || {} - window.stubs.getModelStub = function getModelStub() { - return { - } - } -})(window) diff --git a/test/stub/view.js b/test/stub/view.js deleted file mode 100644 index 510c12a..0000000 --- a/test/stub/view.js +++ /dev/null @@ -1,9 +0,0 @@ -(function(window) { - 'use strict' - window.stubs = window.stubs || {} - window.stubs.getViewStub = function getViewStub() { - return { - bind: function() {} - } - } -})(window) diff --git a/test/unit/controller.js b/test/unit/controller.js deleted file mode 100644 index 1eb5d15..0000000 --- a/test/unit/controller.js +++ /dev/null @@ -1,17 +0,0 @@ -'use strict' -var Controller, getModelStub, getViewStub - -describe('controller', function() { - beforeEach(function() { - Controller = window.app.Controller - getModelStub = window.stubs.getModelStub - getViewStub = window.stubs.getViewStub - }) - - it('can be created', function() { - var view = getViewStub() - var model = getModelStub() - var controller = new Controller(model, view) - expect(controller).to.exist - }) -})