Refactor dev workflow

.eslintignore

@@ -1,2 +0,0 @@
-dist
-docs

CONTRIBUTING.md

@@ -67,10 +67,10 @@ not want to merge into the project.
 
 Development commands:
 
-* `npm start` – start the dev server and develop against live examples
+* `npm run build` – build the library
+* `npm run dev` – start the dev server and develop against live examples
 * `npm run lint` – run the linter
-* `npm run specs` – run the unit tests
-* `npm run build` – generate a build
+* `npm run specs:watch` – run and watch the unit tests
 
 Please follow this process for submitting a patch:
 

config/constants.js

@@ -0,0 +1,9 @@
+var path = require('path')
+
+var ROOT = path.join(__dirname, '..')
+
+module.exports = {
+  DIST_DIRECTORY: path.join(ROOT, 'dist'),
+  SRC_DIRECTORY: path.join(ROOT, 'src'),
+  ROOT_DIRECTORY: ROOT
+}

config/karma.config.js

@@ -1,10 +1,10 @@
 var assign = require('object-assign')
-var path = require('path')
-var webpackConfig = require('./webpack-base.config.js')
+var constants = require('./constants')
+var webpackConfig = require('./webpack.config.base')
 
 module.exports = function (config) {
   config.set({
-    basePath: path.resolve(__dirname, '..'),
+    basePath: constants.ROOT_DIRECTORY,
     browsers: [ process.env.TRAVIS ? 'Firefox' : 'Chrome' ],
     browserNoActivityTimeout: 60000,
     client: {
@@ -15,7 +15,7 @@ module.exports = function (config) {
       useIframe: true
     },
     files: [
-      'src/specs.bundle.js'
+      'src/specs.context.js'
     ],
     frameworks: [
       'mocha'
@@ -28,7 +28,7 @@ module.exports = function (config) {
       'karma-webpack'
     ],
     preprocessors: {
-      'src/specs.bundle.js': [ 'webpack', 'sourcemap' ]
+      'src/specs.context.js': [ 'webpack', 'sourcemap' ]
     },
     reporters: [ 'dots' ],
     singleRun: true,

config/webpack-base.config.js

@@ -1,23 +0,0 @@
-var autoprefixer = require('autoprefixer-core')
-
-module.exports = {
-  module: {
-    loaders: [
-      {
-        test: /\.css$/,
-        loader: [
-          'style-loader',
-          'css-loader?module&localIdentName=[hash:base64:5]',
-          '!postcss-loader'
-        ].join('!')
-      },
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  },
-  postcss: [ autoprefixer ]
-}

config/webpack.config.base.js

@@ -0,0 +1,47 @@
+var autoprefixer = require('autoprefixer-core')
+var webpack = require('webpack')
+
+var DedupePlugin = webpack.optimize.DedupePlugin
+var OccurenceOrderPlugin = webpack.optimize.OccurenceOrderPlugin
+var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
+
+var plugins = [
+  new DedupePlugin(),
+  new OccurenceOrderPlugin()
+]
+
+if (process.env.NODE_ENV === 'production') {
+  plugins.push(
+    new UglifyJsPlugin({
+      compress: {
+        dead_code: true,
+        drop_console: true,
+        screw_ie8: true,
+        warnings: true
+      }
+    })
+  )
+}
+
+module.exports = {
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        loader: [
+          'style-loader',
+          'css-loader?module&localIdentName=[hash:base64:5]',
+          '!postcss-loader'
+        ].join('!')
+      },
+      {
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        query: { cacheDirectory: true }
+      }
+    ]
+  },
+  plugins: plugins,
+  postcss: [ autoprefixer ]
+}

config/webpack.config.example.js

@@ -0,0 +1,17 @@
+var assign = require('object-assign')
+var base = require('./webpack.config.base')
+var constants = require('./constants')
+var path = require('path')
+
+module.exports = assign({}, base, {
+  devServer: {
+    contentBase: constants.SRC_DIRECTORY
+  },
+  entry: {
+    example: path.join(constants.SRC_DIRECTORY, 'example')
+  },
+  output: {
+    filename: 'example.js',
+    path: constants.DIST_DIRECTORY
+  }
+})

config/webpack.config.js

@@ -1,34 +0,0 @@
-var assign = require('object-assign')
-var base = require('./webpack-base.config.js')
-var webpack = require('webpack')
-var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
-
-var plugins = []
-if (process.env.NODE_ENV === 'production') {
-  plugins.push(
-    new UglifyJsPlugin({
-      compress: {
-        dead_code: true,
-        drop_console: true,
-        screw_ie8: true,
-        warnings: true
-      }
-    })
-  )
-}
-
-module.exports = assign({}, base, {
-  entry: {
-    main: './src/index'
-  },
-  externals: [{
-    react: true
-  }],
-  output: {
-    filename: 'react-native-web.js',
-    library: 'ReactNativeWeb',
-    libraryTarget: 'commonjs2',
-    path: './dist'
-  },
-  plugins: plugins
-})

config/webpack.config.publish.js

@@ -0,0 +1,18 @@
+var assign = require('object-assign')
+var base = require('./webpack.config.base')
+var constants = require('./constants')
+
+module.exports = assign({}, base, {
+  entry: {
+    main: constants.SRC_DIRECTORY
+  },
+  externals: [{
+    react: true
+  }],
+  output: {
+    filename: 'react-native-web.js',
+    library: 'ReactNativeWeb',
+    libraryTarget: 'commonjs2',
+    path: constants.DIST_DIRECTORY
+  }
+})

example/index.html

@@ -1,5 +0,0 @@
-<!DOCTYPE html>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<div id="react-root"></div>
-<script src="../dist/example.js"></script>

example/webpack.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  entry: {
-    example: './example.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: { cacheDirectory: true }
-      }
-    ]
-  },
-  output: {
-    filename: 'example.js',
-    path: '../dist'
-  }
-}

package.json

@@ -7,13 +7,12 @@
     "dist"
   ],
   "scripts": {
+    "build": "rm -rf ./dist && webpack --config config/webpack.config.publish.js --sort-assets-by --progress",
+    "dev": "webpack-dev-server --config config/webpack.config.example.js --inline --colors --quiet",
+    "lint": "eslint config src",
     "prepublish": "npm run build",
-    "build": "rm -rf ./dist && webpack --config config/webpack.config.js --sort-assets-by --progress",
-    "example": "cd example && webpack --config webpack.config.js",
-    "lint": "eslint .",
     "specs": "NODE_ENV=test karma start config/karma.config.js",
     "specs:watch": "npm run specs -- --no-single-run",
-    "start": "webpack-dev-server --config config/webpack.config.js --inline --hot --colors --quiet",
     "test": "npm run specs && npm run lint"
   },
   "dependencies": {

src/example.js

@@ -1,4 +1,4 @@
-import React, { Image, Swipeable, Text, TextInput, Touchable, View } from '../dist/react-native-web'
+import React, { Image, Swipeable, Text, TextInput, Touchable, View } from '.'
 
 const { Component, PropTypes } = React
 

src/index.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>React Native for Web</title>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="description" content="The core React Native components adapted and expanded upon for the web">
+<div id="react-root"></div>
+<script src="/example.js"></script>