Add example

Didier Franc · Didier Franc · commit ee40c564f75d · 2017-08-07T12:31:15.000+02:00
diff --git a/README.md b/README.md
@@ -36,7 +36,7 @@ import Async from 'react-code-splitting'
 
 import Login from './Login'
 const Home = () => <Async load={import('./Home')} />
-const LostPassword = (props) => <Async load={import('./LostPassword')} componentProps={props}/>
+const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/>
 
 const App = ({ user }) => (
   <Body>
@@ -47,7 +47,7 @@ const App = ({ user }) => (
 )
 ```
 
-You can view this snippets in context [here](https://github.com/didierfranc/redux-react-starter/blob/master/src/components/App.js#L11) !
+You can view this snippets in context [here](https://github.com/didierfranc/redux-react-starter/blob/master/src/components/App.js#L12) !
 
 ## More
 
diff --git a/dist/react-code-splitting.min.js b/dist/react-code-splitting.min.js
diff --git a/dist/react-code-splitting.min.js.map b/dist/react-code-splitting.min.js.map
diff --git a/example/App/Fat.js b/example/App/Fat.js
@@ -0,0 +1,3 @@
+import React from 'react'
+
+export default () => <h1>{"I'm fat"}</h1>
diff --git a/example/App/index.js b/example/App/index.js
@@ -0,0 +1,27 @@
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import Async from '../../dist/react-code-splitting.min'
+
+
+const Fat = () => <Async load={import('./Fat')} />
+
+class App extends Component {
+  state = {
+    load: false
+  }
+  render() {
+    return (
+      <div>
+        <button
+          onClick={() => this.setState({ load: true })}
+        >
+          Load my fat component
+        </button>
+        {this.state.load && <Fat />}
+      </div>
+    )
+  }
+}
+
+
+render(<App />, document.querySelector('react'))
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>react-code-splitting</title>
+  </head>
+  <body>
+    <react />
+    <script src="bundle.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,31 @@
+const { resolve } = require('path')
+const webpack = require('webpack')
+
+module.exports = {
+  entry: [
+    resolve(__dirname, './App'),
+  ],
+  output: {
+    filename: 'bundle.js',
+    path: resolve(__dirname),
+    publicPath: '/',
+  },
+  context: resolve(__dirname),
+  devtool: 'inline-source-map',
+  devServer: {
+    host: '0.0.0.0',
+    contentBase: resolve(__dirname),
+    publicPath: '/',
+    historyApiFallback: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        include: [resolve(__dirname, '../src'), resolve(__dirname)],
+        use: 'babel-loader',
+      },
+    ],
+  },
+  performance: { hints: false },
+}
diff --git a/package.json b/package.json
@@ -1,24 +1,28 @@
 {
   "name": "react-code-splitting",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Code splitting won't be a nightmare anymore",
   "main": "./dist/react-code-splitting.min.js",
   "repository": "https://github.com/didierfranc/react-code-splitting",
   "author": "Didier Franc",
   "license": "MIT",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack",
+    "start": "webpack-dev-server --open --config example/webpack.config.js"
   },
   "devDependencies": {
     "babel-cli": "^6.23.0",
     "babel-core": "^6.22.1",
     "babel-loader": "^7.1.1",
     "babel-preset-es2015": "^6.22.0",
     "babel-preset-react": "^6.22.0",
-    "babel-preset-stage-0": "^6.22.0"
+    "babel-preset-stage-0": "^6.22.0",
+    "webpack": "^3.4.1",
+    "webpack-dev-server": "^2.6.1"
   },
   "dependencies": {
     "prop-types": "^15.5.8",
-    "webpack": "^3.4.1"
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -37,5 +37,6 @@ module.exports = {
   externals: [
     'react',
     'react-dom',
+    'prop-types'
   ]
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import React from 'react'`
	`2`	`+`
	`3`	`+export default () => <h1>{"I'm fat"}</h1>`
Original file line number	Diff line number	Diff line change
`@@ -37,5 +37,6 @@ module.exports = {`
`37`	`37`	`externals: [`
`38`	`38`	`'react',`
`39`	`39`	`'react-dom',`
	`40`	`+ 'prop-types'`
`40`	`41`	`]`
`41`	`42`	`}`