Merge branch 'FEM/02.2-add-webpack'

# Conflicts:
#	karma.conf.js
#	package.json
#	src/app.js
#	src/bootstrap.js
#	src/controller.test.js
#	src/index.html
#	webpack.config.babel.js

karma.conf.js

@@ -1,38 +1,18 @@
-process.env.BABEL_ENV = 'test'
 const webpackEnv = {test: true}
 const webpackConfig = require('./webpack.config.babel')(webpackEnv)
-
-const testGlob = 'src/**/*.test.js'
-const srcGlob = 'src/**/!(*.test|*.stub).js'
+const fileGlob = 'src/**/*.test.js'
 
 module.exports = config => {
   config.set({
     basePath: '',
     frameworks: ['mocha', 'chai'],
-    files: [testGlob, srcGlob],
-    exclude: ['src/bootstrap.js'],
+    files: [fileGlob],
     preprocessors: {
-      [testGlob]: ['webpack'],
-      [srcGlob]: ['webpack'],
+      [fileGlob]: ['webpack']
     },
     webpack: webpackConfig,
     webpackMiddleware: {noInfo: true},
-    reporters: ['progress', 'coverage'],
-    coverageReporter: {
-      check: {
-        global: {
-          statements: 11,
-          branches: 0,
-          functions: 0,
-          lines: 11,
-        },
-      },
-      reporters: [
-        {type: 'lcov', dir: 'coverage/', subdir: '.'},
-        {type: 'json', dir: 'coverage/', subdir: '.'},
-        {type: 'text-summary'},
-      ],
-    },
+    reporters: ['progress'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -10,39 +10,36 @@
   },
   "devDependencies": {
     "babel-core": "6.13.2",
-    "babel-loader": "6.2.4",
+    "babel-loader": "^7.1.4",
     "babel-plugin-__coverage__": "11.0.0",
     "babel-preset-es2015": "6.13.2",
     "babel-preset-es2016": "6.11.3",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
     "chai": "3.5.0",
-    "cpy-cli": "1.0.1",
     "css-loader": "0.23.1",
     "eslint": "3.2.2",
     "eslint-config-kentcdodds": "^9.0.0",
-    "extract-text-webpack-plugin": "2.0.0-beta.3",
+    "extract-text-webpack-plugin": "^3.0.2",
     "ghooks": "1.3.2",
     "html-webpack-plugin": "2.22.0",
     "http-server": "0.9.0",
-    "inline-manifest-webpack-plugin": "3.0.1",
+    "inline-manifest-webpack-plugin": "^4.0.2",
     "karma": "1.1.2",
     "karma-chai": "0.1.0",
     "karma-chrome-launcher": "1.0.1",
-    "karma-coverage": "1.1.1",
     "karma-mocha": "1.1.1",
-    "karma-webpack": "1.7.0",
+    "karma-webpack": "^2.0.13",
     "mocha": "3.0.1",
     "npm-run-all": "2.3.0",
     "offline-plugin": "3.4.2",
     "opt-cli": "1.5.1",
-    "progress-bar-webpack-plugin": "1.9.0",
+    "progress-bar-webpack-plugin": "^1.11.0",
     "rimraf": "2.5.4",
     "style-loader": "0.13.1",
-    "surge": "0.18.0",
-    "webpack": "2.1.0-beta.20",
+    "webpack": "^3.12.0",
     "webpack-config-utils": "2.0.0",
-    "webpack-dev-server": "2.1.0-beta.0",
+    "webpack-dev-server": "^2.11.1",
     "webpack-validator": "2.2.7"
   },
   "config": {
@@ -58,8 +55,7 @@
     "postbuild": "cpy favicon.ico dist",
     "prebuild:dev": "rimraf dist",
     "build:dev": "webpack --env.dev",
-    "postbuild:dev": "cpy favicon.ico dist",
-    "start": "http-server dist",
+    "start": "http-server",
     "dev": "webpack-dev-server --env.dev --hot",
     "debug": "node-nightly --inspect --debug-brk node_modules/.bin/webpack --env.debug",
     "debug:dev": "npm run debug -- --env.dev",
@@ -67,10 +63,6 @@
     "test": "karma start",
     "watch:test": "npm test -- --auto-watch --no-single-run",
     "validate": "npm-run-all --parallel lint build test",
-    "lint": "eslint .",
-    "setup": "npm install && npm run validate",
-    "setup:fem": "git checkout FEM/07.1-deploy-surge && npm install && npm run validate && rimraf dist coverage && git checkout FEM/00-original-project",
-    "setup:workshop": "git checkout workshop/07-coverage && npm install && npm run validate && rimraf dist coverage && git checkout workshop/00-original-project",
-    "setup:egghead": "git checkout prelesson/polyfill-promises && npm install && mkdir dist && npm run validate"
+    "lint": "eslint ."
   }
 }

src/app.js

@@ -1,5 +1,11 @@
-import 'todomvc-app-css/index.css'
-import './app.css'
+require('todomvc-app-css/index.css')
+
+var View = require('./view')
+var helpers = require('./helpers')
+var Controller = require('./controller')
+var Model = require('./model')
+var Store = require('./store')
+var Template = require('./template')
 
 import {$on} from './helpers'
 import {updateTodo} from './todo'

src/bootstrap.js

@@ -1,7 +1,6 @@
 /* eslint no-console:0 */
-import {install as offlineInstall} from 'offline-plugin/runtime'
-import {onLoad} from './app'
-import {$on} from './helpers'
+var app = require('./app')
+var helpers = require('./helpers')
 
 // this is only relevant when using `hot` mode with webpack
 // special thanks to Eric Clemmons: https://github.com/ericclemmons/webpack-hot-server-example
@@ -12,7 +11,7 @@ if (module.hot) {
   })
   if (reloading) {
     console.log('🔁  HMR Reloading.')
-    onLoad()
+    app.onLoad()
   } else {
     console.info('✅  HMR Enabled.')
     bootstrap()
@@ -23,9 +22,6 @@ if (module.hot) {
 }
 
 function bootstrap() {
-  $on(window, 'load', onLoad)
-  $on(window, 'hashchange', onLoad)
-  if (process.env.NODE_ENV === 'production') {
-    offlineInstall()
-  }
+  helpers.$on(window, 'load', app.onLoad)
+  helpers.$on(window, 'hashchange', app.onLoad)
 }

src/controller.test.js

@@ -1,4 +1,4 @@
-import Controller from './controller'
+var Controller = require('./controller')
 
 describe('controller', () => {
   it('exists', () => {

src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>VanillaJS • TodoMVC</title>
-    <%=htmlWebpackPlugin.files.webpackManifest%>
+    <script src="dist/bundle.js"></script>
   </head>
   <body>
     <section class="todoapp">

webpack.config.babel.js

@@ -22,17 +22,11 @@ module.exports = env => {
       path: resolve('dist'),
       pathinfo: ifNotProd(),
     },
-    devtool: ifProd('source-map', 'eval'),
+    devtool: ifProd('source-map-loader', 'eval'),
     module: {
       loaders: [
-        {test: /\.js$/, loaders: ['babel'], exclude: /node_modules/},
-        {
-          test: /\.css$/,
-          loader: ExtractTextPlugin.extract({
-            fallbackLoader: 'style',
-            loader: 'css',
-          })
-        },
+        {test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/},
+        {test: /\.css$/, loaders: ['style-loader', 'css-loader']},
       ],
     },
     plugins: removeEmpty([