Chores: Update examples, RHL 3 & babel 6 (#59)

* chore(exampels): rm deprecated babel-plugin-react-hot

* chore(examples): RHL 3

* chore(examples): update react-transform-catch-errors

Babel 6 support

* chore: move to babel 6

* chore(examples): add READMEs

* chore(test): babel-cli for travis

Author: davidnpma

.babelrc

@@ -1,6 +1,5 @@
 {
-  "stage": 0,
-  "loose": "all",
+  "presets": ["es2015", "stage-0", "react"],
   "plugins": [
     "rewire"
   ]

.travis.yml

@@ -9,6 +9,7 @@ node_js:
   - iojs
 before_install:
   - npm i -g npm@^2.0.0
+  - npm i -g babel-cli
 before_script:
   - npm prune
 after_success:

examples/README.md

@@ -0,0 +1,9 @@
+# Examples
+At the time of this writing, we are in a bit of a limbo. `react-hot-loader` [version 3](https://github.com/gaearon/react-hot-loader/pull/240) is about to be released, but (possibly among other things) is waiting on [ErrorBoundaries in react](https://github.com/facebook/react/pull/6020), which is likely to land in the next react release.
+
+Because of this, the examples have been updated to reflect the current state of deprecation and anticipation:
+* The [`react-hot-loader` example](react-hot-loader/) features the upcoming version 3 (currently 3.0.0-beta.2), but does not yet support error catching and rendering on updates, only on initial mount. This is the future, but it's not quite here.
+* The [`react-transform-catch-errors` example](react-transform-catch-errors/) shows how to catch and render errors with the deprecated `react-transform-catch-errors` plugin. This is the way of the past, but it works today.
+
+## For the futurists
+If check out the [PR, which brings ErrorBoundaries to react](https://github.com/facebook/react/pull/6020), and build react from source, you can use the RHL 3 example __with hot reloading error capture__ today.

examples/babel-plugin-react-hot/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "env": {
+    "development": {
+      "plugins": ["react-hot-loader/babel"]
+    }
+  }
+}

examples/babel-plugin-react-hot/components/App.js

@@ -0,0 +1,2 @@
+# react-hot-loader example
+react-hot-loader 3 ([PR](https://github.com/gaearon/react-hot-loader/pull/240)) is coming soon. This examples shows how to use `redbox-react` with this upcoming version of RHL. Once [ErrorBoundaries](https://github.com/facebook/react/pull/6020) land in `react`, this approach will also work for capturing and rendering errors on updates (= when hot reloading). For now, this only works on initial mount.

examples/babel-plugin-react-hot/error-catcher.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {render} from 'react-dom'
+import {AppContainer} from 'react-hot-loader'
+import App from './components/App'
+import Redbox from 'redbox-react'
+
+const root = document.getElementById('root')
+render(<AppContainer errorReporter={Redbox}><App /></AppContainer>, root)
+
+if (module.hot) {
+  module.hot.accept('./components/App', () => {
+    const NextApp = require('./components/App').default
+    render(
+      <AppContainer errorReporter={Redbox}>
+        <NextApp />
+      </AppContainer>,
+      root
+    )
+  })
+}

examples/babel-plugin-react-hot/index.html

@@ -19,15 +19,17 @@
   },
   "homepage": "https://github.com/library-boilerplate-author/library-boilerplate",
   "dependencies": {
-    "react": "^0.13.3"
+    "react": "^15.0.0",
+    "react-dom": "^15.1.0"
   },
   "devDependencies": {
-    "babel-core": "^5.6.18",
-    "babel-loader": "^5.1.4",
-    "node-libs-browser": "^0.5.2",
-    "react-hot-loader": "davidpfahler/react-hot-loader#error-reporter",
-    "webpack": "^1.9.11",
-    "webpack-dev-server": "^1.9.0",
-    "webpack-error-notification": "^0.1.4"
+    "babel-core": "^6.9.0",
+    "babel-loader": "^6.2.4",
+    "babel-preset-es2015": "^6.3.3",
+    "babel-preset-react": "^6.5.0",
+    "babel-preset-stage-0": "^6.3.13",
+    "react-hot-loader": "^3.0.0-beta.2",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.14.1"
   }
 }

examples/babel-plugin-react-hot/index.js

@@ -1,29 +1,22 @@
 var path = require('path')
 var webpack = require('webpack')
-var WebpackErrorNotificationPlugin = require('webpack-error-notification')
 
 module.exports = {
   devtool: 'eval',
   entry: [
     'webpack-dev-server/client?http://localhost:3000',
     'webpack/hot/only-dev-server',
+    'react-hot-loader/patch',
     './index'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/static/'
+    publicPath: '/static/',
+    devtoolModuleFilenameTemplate: '/[absolute-resource-path]'
   },
   plugins: [
-    new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
-    new WebpackErrorNotificationPlugin(),
-    new webpack.DefinePlugin({
-      __CLIENT__: true,
-      __SERVER__: false,
-      __DEV__: true,
-      __DEVTOOLS__: true  // <-- Toggle redux-devtools
-    })
+    new webpack.HotModuleReplacementPlugin()
   ],
   resolve: {
     alias: {
@@ -34,16 +27,13 @@ module.exports = {
   module: {
     loaders: [{
       test: /\.js$/,
-      loaders: ['react-hot?errorReporter=redbox-react', 'babel'],
+      loaders: ['babel'],
       exclude: /node_modules/,
       include: __dirname
     }, {
       test: /\.js$/,
       loaders: ['babel'],
       include: path.join(__dirname, '..', '..', 'src')
-    }, {
-      test: /\.css?$/,
-      loader: 'style-loader!css-loader?sourceMap&modules&localIdentName=[path][name]---[local]---[hash:base64:5]'
     }]
   }
 }

examples/babel-plugin-react-hot/package.json

@@ -1,22 +1,21 @@
 {
-  "stage": 0,
+  "presets": ["es2015", "stage-0", "react"],
   "env": {
     "development": {
-      "plugins": ["react-transform"],
-      "extra": {
-        "react-transform": [{
-          "target": "react-transform-hmr",
-          "imports": ["react"],
-          "locals": ["module"]
-        }, {
-          "target": "react-transform-catch-errors",
-          "imports": [
-            "react",
-            "redbox-react",
-            "./reporterOptions"
-          ]
-        }]
-      }
+      "plugins": [
+        [
+          "react-transform", {
+            "transforms": [{
+              "transform": "react-transform-catch-errors",
+              "imports": [
+                "react",
+                "redbox-react",
+                "../reporterOptions.js"
+              ]
+            }]
+          }
+        ]
+      ]
     }
   }
 }

examples/babel-plugin-react-hot/webpack.config.js

@@ -0,0 +1,2 @@
+# react-transform-catch-errors example
+[react-transform-catch](https://github.com/gaearon/react-transform-catch-errors) errors is deprectated, but for now, this examples shows you how to use `redbox-react` with it.

examples/react-hot-loader-example/index.js

@@ -1,5 +1,6 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import App from './components/App'
 
 const root = document.getElementById('root')
-React.render(<App />, root)
+ReactDOM.render(<App />, root)

examples/react-hot-loader/.babelrc

@@ -8,19 +8,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "react": "^0.13.3"
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^15.1.0"
   },
   "devDependencies": {
-    "babel-core": "^5.4.7",
-    "babel-eslint": "^3.1.9",
-    "babel-loader": "^5.1.2",
-    "babel-plugin-react-transform": "^1.0.1",
-    "eslint": "^1.3.1",
-    "eslint-plugin-react": "^2.3.0",
+    "babel-cli": "^6.3.17",
+    "babel-core": "^6.3.21",
+    "babel-loader": "^6.0.0",
+    "babel-plugin-react-transform": "^2.0.2",
+    "babel-preset-es2015": "^6.3.3",
+    "babel-preset-stage-0": "^6.3.13",
     "express": "^4.13.3",
-    "react-transform-catch-errors": "^1.0.0",
-    "react-transform-hmr": "^1.0.0",
-    "redbox-react": "^1.0.1",
+    "react-transform-catch-errors": "^1.0.2",
     "rimraf": "^2.4.3",
     "webpack": "^1.9.6",
     "webpack-dev-middleware": "^1.2.0",

examples/react-hot-loader/README.md

@@ -1,17 +1,18 @@
-var path = require('path');
-var webpack = require('webpack');
+var path = require('path')
+var webpack = require('webpack')
 
 module.exports = {
-  devtool: 'eval',
   entry: [
     'webpack-hot-middleware/client',
     './index'
   ],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: 'bundle.js',
-    publicPath: '/static/'
+    publicPath: '/static/',
+    devtoolModuleFilenameTemplate: '/[absolute-resource-path]'
   },
+  devtool: 'eval',
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin()
@@ -31,7 +32,8 @@ module.exports = {
     }, {
       test: /\.js$/,
       loaders: ['babel'],
+      exclude: /node_modules/,
       include: path.join(__dirname, '..', '..', 'src')
     }]
   }
-};
+}