chore(package): update to webpack 2

config.js

@@ -1,8 +1,8 @@
 const path = require('path')
-const yargs = require('yargs')
-
-const { argv } = yargs
 
+// ------------------------------------
+// Environment vars
+// ------------------------------------
 const env = process.env.NODE_ENV || 'development'
 const __DEV__ = env === 'development'
 const __STAGING__ = env === 'staging'
@@ -18,12 +18,10 @@ let config = {
   path_base: __dirname,
   dir_src: 'src',
   dir_dist: 'dist',
-  dir_docs_root: 'docs',
-  dir_docs_src: 'docs/app',
+  dir_dll: 'dll',
   dir_docs_dist: 'docs/build',
+  dir_docs_src: 'docs/app',
   dir_umd_dist: 'dist/umd',
-  dir_server: 'server',
-  dir_test: 'test',
 }
 
 // ------------------------------------
@@ -35,10 +33,10 @@ const paths = {
   base,
   src: base.bind(null, config.dir_src),
   dist: base.bind(null, config.dir_dist),
-  test: base.bind(null, config.dir_test),
+  dll: base.bind(null, config.dir_dll),
   docsDist: base.bind(null, config.dir_docs_dist),
-  umdDist: base.bind(null, config.dir_umd_dist),
   docsSrc: base.bind(null, config.dir_docs_src),
+  umdDist: base.bind(null, config.dir_umd_dist),
 }
 
 config = Object.assign({}, config, {
@@ -53,30 +51,23 @@ config = Object.assign({}, config, {
   // ----------------------------------
   // Compiler Configuration
   // ----------------------------------
-  compiler_devtool: __DEV__ && 'cheap-source-map'
-  || __TEST__ && 'cheap-source-map'
-  || __STAGING__ && 'source-map',
+  compiler_devtool: (__DEV__ || __TEST__) && 'cheap-source-map' || __STAGING__ && 'source-map',
+  compiler_globals: {
+    process: {
+      env: {
+        NODE_ENV: JSON.stringify(env),
+      },
+    },
+    __DEV__,
+    __STAGING__,
+    __PATH_SEP__: JSON.stringify(path.sep),
+    __TEST__,
+    __PROD__,
+  },
   compiler_hash_type: __PROD__ ? 'chunkhash' : 'hash',
-  compiler_inline_manifest: false,
   compiler_fail_on_warning: __TEST__ || __PROD__,
-  compiler_lint: argv.lint !== false,
-  compiler_quiet: false,
   compiler_output_path: paths.base(config.dir_docs_dist),
   compiler_public_path: __PROD__ ? '//cdn.rawgit.com/Semantic-Org/Semantic-UI-React/gh-pages/' : '/',
-  compiler_vendor: [
-    'babel-standalone',
-    'brace',
-    'brace/ext/language_tools',
-    'brace/mode/jsx',
-    'brace/mode/html',
-    'brace/theme/tomorrow',
-    'classnames',
-    'copy-to-clipboard',
-    'faker',
-    'react',
-    'react-ace',
-    'react-dom',
-  ],
   compiler_stats: {
     hash: false,            // the hash of the compilation
     version: false,         // webpack version info
@@ -95,19 +86,20 @@ config = Object.assign({}, config, {
     chunksSort: '',         // (string) sort the chunks by that field
     assetsSort: '',         // (string) sort the assets by that field
   },
-  compiler_globals: {
-    process: {
-      env: {
-        NODE_ENV: JSON.stringify(env),
-      },
-    },
-    __DEV__,
-    __DEBUG__: !!argv.debug,
-    __STAGING__,
-    __PATH_SEP__: JSON.stringify(path.sep),
-    __TEST__,
-    __PROD__,
-  },
+  compiler_vendor: [
+    'babel-standalone',
+    'brace',
+    'brace/ext/language_tools',
+    'brace/mode/jsx',
+    'brace/mode/html',
+    'brace/theme/tomorrow',
+    'classnames',
+    'copy-to-clipboard',
+    'faker',
+    'react',
+    'react-ace',
+    'react-dom',
+  ],
 })
 
 module.exports = config

docs/.eslintrc

@@ -1,7 +1,6 @@
 {
   "globals": {
     "__DEV__": false,
-    "__DEBUG__": false,
     "__STAGING__": false,
     "__TEST__": false,
     "__PATH_SEP__": false,

docs/app/Components/ComponentDoc/ComponentExample.js

@@ -146,7 +146,7 @@ class ComponentExample extends Component {
   getOriginalSourceCode = () => {
     const { examplePath } = this.props
 
-    if (!this.sourceCode) this.sourceCode = require(`!raw!docs/app/Examples/${examplePath}`)
+    if (!this.sourceCode) this.sourceCode = require(`!raw-loader!../../Examples/${examplePath}`)
 
     return this.sourceCode
   }

docs/app/Components/ExternalExampleLayout.js

@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.css'
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
 

docs/app/Components/Layout.js

@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.css'
 import AnchorJS from 'anchor-js'
 import React, { Component, PropTypes } from 'react'
 

docs/app/Components/Root.js

@@ -1,4 +1,3 @@
-import 'semantic-ui-css/semantic.css'
 import _ from 'lodash/fp'
 import React, { Component, PropTypes } from 'react'
 

karma.conf.js

@@ -1,68 +1,55 @@
-const { argv } = require('yargs')
 const config = require('./config')
 const webpackConfig = require('./webpack.config')
 
-module.exports = (karmaConfig) => {
-  karmaConfig.set({
-    basePath: process.cwd(),
-    browsers: ['PhantomJS'],
-    singleRun: !argv.watch,
-    reporters: ['mocha', 'coverage'],
-    files: [
-      './test/tests.bundle.js',
-    ],
-    formatError(msg) {
-      let haveSeenStack = false
-      return msg
-        .split('\n')
-        .reduce((list, line) => {
-          // filter out node_modules
-          if (/~/.test(line)) return list
+const formatError = (msg) => {
+  // filter out empty lines and node_modules
+  if (!msg.trim() || /~/.test(msg)) return ''
 
-          // indent the error beneath the it() message
-          let newLine = '  ' + line
+  // indent the error beneath the it() message
+  let newLine = '  ' + msg
 
-          if (newLine.includes('webpack:///')) {
-            if (haveSeenStack === false) {
-              const indent = newLine.slice(0, newLine.search(/\S/))
-              newLine = `\n${indent}Stack:\n${newLine}`
-              haveSeenStack = true
-            }
+  if (newLine.includes('webpack:///')) {
+    // remove webpack:///
+    newLine = newLine.replace('webpack:///', '')
 
-            // remove webpack:///
-            newLine = newLine.replace('webpack:///', '')
+    // remove bundle location, showing only the source location
+    newLine = newLine.slice(0, newLine.indexOf(' <- '))
+  }
 
-            // remove bundle location, showing only the source location
-            newLine = newLine.slice(0, newLine.indexOf(' <- '))
-          }
+  return newLine + '\n'
+}
 
-          return list.concat(newLine)
-        }, [])
-        .join('\n')
+module.exports = (karmaConfig) => {
+  karmaConfig.set({
+    basePath: process.cwd(),
+    browsers: ['PhantomJS'],
+    client: {
+      mocha: {
+        reporter: 'html',   // change Karma's debug.html to mocha web reporter
+        ui: 'bdd',
+      },
     },
-    frameworks: [
-      'phantomjs-shim',
-      'mocha',
-    ],
     coverageReporter: {
       reporters: [
         { type: 'lcov', dir: 'coverage', subdir: '.' },
         { type: 'text-summary' },
       ],
       includeAllSources: true,
     },
+    files: [
+      './test/tests.bundle.js',
+    ],
+    formatError,
+    frameworks: ['phantomjs-shim', 'mocha'],
+    reporters: ['mocha', 'coverage'],
+    singleRun: true,
     preprocessors: {
       // do not include 'coverage' preprocessor for karma-coverage
       // code is already instrumented by babel-plugin-__coverage__
-      '**/*.bundle.js': ['webpack'],
-    },
-    client: {
-      mocha: {
-        reporter: 'html',   // change Karma's debug.html to mocha web reporter
-        ui: 'bdd',
-      },
+      './test/tests.bundle.js': ['webpack'],
     },
     webpack: {
+      entry: './test/tests.bundle.js',
       devtool: config.compiler_devtool,
       module: webpackConfig.module,
       plugins: webpackConfig.plugins,

package.json

@@ -27,7 +27,6 @@
     "deploy:docs": "gh-pages -d docs/build -m 'deploy docs [ci skip]'",
     "lint": "cross-env NODE_ENV=production eslint .",
     "lint:fix": "npm run lint -- --fix",
-    "lint:watch": "watch 'npm run lint --silent' docs gulp src test",
     "prerelease": "npm run lint && npm run tsd:lint && npm test && cross-env NODE_ENV=production npm run build",
     "postrelease": "NODE_ENV=production npm run deploy:docs",
     "release:major": "npm run prerelease && ta-script npm/release.sh major && npm run prerelease",
@@ -37,7 +36,7 @@
     "start:local-modules": "npm run docs -- --local-modules",
     "pretest": "npm run build:dll",
     "test": "cross-env NODE_ENV=test karma start",
-    "test:watch": "npm run test --silent -- --watch",
+    "test:watch": "npm run test --silent -- --no-single-run",
     "tsd": "gulp tsd",
     "tsd:lint": "tslint './src/**/*.d.ts'",
     "tsd:lint:fix": "npm run -s tsd:lint -- --fix"
@@ -79,7 +78,6 @@
     "connect-history-api-fallback": "^1.2.0",
     "copy-to-clipboard": "^3.0.5",
     "cross-env": "^4.0.0",
-    "css-loader": "^0.27.1",
     "del": "^2.2.2",
     "dirty-chai": "^1.2.2",
     "doctoc": "^1.2.0",
@@ -90,15 +88,14 @@
     "eslint-plugin-jsx-a11y": "^3.0.1",
     "express": "^4.13.4",
     "faker": "^3.0.1",
-    "file-loader": "^0.11.1",
     "gh-pages": "^0.12.0",
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-html-replace": "^1.6.2",
     "gulp-load-plugins": "^1.2.2",
     "gulp-plumber": "^1.0.1",
     "gulp-util": "^3.0.6",
     "html-webpack-plugin": "^2.24.0",
-    "imports-loader": "^0.7.0",
+    "imports-loader": "^0.7.1",
     "js-beautify": "^1.6.8",
     "json-loader": "^0.5.3",
     "karma": "^1.4.0",
@@ -123,22 +120,18 @@
     "react-router-dom": "^4.0.0",
     "require-dir": "^0.3.0",
     "rimraf": "^2.5.2",
-    "sass-loader": "^4.0.2",
     "semantic-ui-css": "^2.2.2",
     "simulant": "^0.2.2",
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
-    "style-loader": "^0.14.0",
     "ta-scripts": "^2.5.2",
     "through2": "^2.0.2",
     "tslint": "^5.0.0",
     "tslint-config-typings": "^0.3.1",
     "typescript": "^2.1.5",
-    "watch": "^1.0.1",
-    "webpack": "^1.12.14",
-    "webpack-dev-middleware": "^1.5.1",
-    "webpack-hot-middleware": "^2.15.0",
-    "yargs": "^7.0.2"
+    "webpack": "^2.3.2",
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.1"
   },
   "peerDependencies": {
     "react": ">=0.14.0 <= 15",

test/specs/lib/isBrowser-test.js

@@ -7,12 +7,12 @@ describe('isBrowser', () => {
   })
 
   it('should return false when there is no document', () => {
-    require('imports?document=>undefined!src/lib/isBrowser').default.should.be.false()
-    require('imports?document=>null!src/lib/isBrowser').default.should.be.false()
+    require('imports-loader?document=>undefined!src/lib/isBrowser').default.should.be.false()
+    require('imports-loader?document=>null!src/lib/isBrowser').default.should.be.false()
   })
 
   it('should return false when there is no window', () => {
-    require('imports?window=>undefined!src/lib/isBrowser').default.should.be.false()
-    require('imports?window=>null!src/lib/isBrowser').default.should.be.false()
+    require('imports-loader?window=>undefined!src/lib/isBrowser').default.should.be.false()
+    require('imports-loader?window=>null!src/lib/isBrowser').default.should.be.false()
   })
 })