Updates example and docs.

.gitignore

@@ -12,8 +12,6 @@ npm-debug.log
 coverage
 
 # Build output
-umd
-commonjs
 build
 
 # Flow

README.md

@@ -22,15 +22,15 @@ export default sizeMe()(MyComponent)
 
 * Responsive Components!
 * Easy to use.
+* Monitor Width OR Height OR Position (or all of them).
 * Extensive browser support.
 * Supports any Component type, i.e. stateless/class.
-* 7.67KB gzipped standalone, even smaller if bundled with your assets.
+* 8.85KB gzipped.
 
 ## TOCs
 
  - [Intro](https://github.com/ctrlplusb/react-sizeme#intro)
  - [Demo](https://github.com/ctrlplusb/react-sizeme#live-demo)
- - [Quick Example](https://github.com/ctrlplusb/react-sizeme#quick-example)
  - [Usage and API Details](https://github.com/ctrlplusb/react-sizeme#usage-and-api-details)
  - [`react-component-queries`: a highly recommended abstraction](https://github.com/ctrlplusb/react-sizeme#react-component-queries-a-highly-recommended-abstraction)
  - [On the First Render of your Component](https://github.com/ctrlplusb/react-sizeme#on-the-first-render-of-your-component)
@@ -43,11 +43,7 @@ export default sizeMe()(MyComponent)
 
 Give your Components the ability to have render logic based on their height/width/position. Responsive design on the Component level.  This allows you to create highly reusable components that don't care about where they will be rendered.
 
-## Demo
-
-It really does work! Look:
-
-https://react-sizeme-example-anpinwkzyc.now.sh
+Check out a working demo here: https://react-sizeme.now.sh
 
 ## Usage and API Details
 

examples/web/devServer.js

@@ -0,0 +1,25 @@
+import express from 'express'
+import webpack from 'webpack'
+import devMiddleware from 'webpack-dev-middleware'
+import hotMiddleware from 'webpack-hot-middleware'
+import config from './tools/webpack/config.babel'
+
+const port = process.env.PORT || 1337
+const app = express()
+const compiler = webpack(config)
+app.use(
+  devMiddleware(compiler, {
+    quiet: true,
+    noInfo: true,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+    },
+    // Ensure that the public path is taken from the compiler webpack config
+    // as it will have been created as an absolute path to avoid conflicts
+    // with an node servers.
+    publicPath: compiler.options.output.publicPath,
+  }),
+)
+app.use(hotMiddleware(compiler))
+
+app.listen(port, () => console.log(`Example running on port ${port}...`))

examples/web/package.json

@@ -1,30 +1,30 @@
 {
-  "name": "my-library-example",
+  "name": "react-sizeme-example",
   "version": "1.0.0",
-  "description": "An example of my-library",
-  "main": "index.js",
+  "description": "An example of react-sizeme",
   "scripts": {
+    "build": "NODE_ENV=production webpack --config ./tools/webpack/config.babel.js",
     "start": "babel-node server.js"
   },
   "author": "",
   "license": "MIT",
   "devDependencies": {},
   "dependencies": {
     "app-root-dir": "^1.0.2",
-    "babel-cli": "^6.18.0",
-    "babel-core": "^6.21.0",
-    "babel-loader": "^6.2.10",
-    "babel-preset-latest": "^6.16.0",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-3": "^6.17.0",
-    "babel-register": "^6.18.0",
-    "express": "^4.14.0",
-    "html-webpack-plugin": "^2.26.0",
+    "babel-cli": "6.24.0",
+    "babel-core": "6.24.0",
+    "babel-loader": "6.4.1",
+    "babel-preset-latest": "6.24.0",
+    "babel-preset-react": "6.23.0",
+    "babel-preset-stage-3": "6.22.0",
+    "babel-register": "6.24.0",
+    "express": "4.15.2",
+    "html-webpack-plugin": "2.28.0",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
-    "react-sizeme": "file:../../",
-    "webpack": "^2.2.0-rc.3",
-    "webpack-dev-middleware": "^1.9.0",
-    "webpack-hot-middleware": "^2.15.0"
+    "react-sizeme": "https://github.com/ctrlplusb/react-sizeme",
+    "webpack": "2.3.2",
+    "webpack-dev-middleware": "1.10.1",
+    "webpack-hot-middleware": "2.17.1"
   }
 }

examples/web/server.js

@@ -1,25 +1,9 @@
 import express from 'express'
-import webpack from 'webpack'
-import devMiddleware from 'webpack-dev-middleware'
-import hotMiddleware from 'webpack-hot-middleware'
-import config from './tools/webpack/config'
+import path from 'path'
 
 const port = process.env.PORT || 1337
 const app = express()
-const compiler = webpack(config)
-app.use(
-  devMiddleware(compiler, {
-    quiet: true,
-    noInfo: true,
-    headers: {
-      'Access-Control-Allow-Origin': '*',
-    },
-    // Ensure that the public path is taken from the compiler webpack config
-    // as it will have been created as an absolute path to avoid conflicts
-    // with an node servers.
-    publicPath: compiler.options.output.publicPath,
-  }),
-)
-app.use(hotMiddleware(compiler))
+
+app.use(express.static(path.resolve('./build')))
 
 app.listen(port, () => console.log(`Example running on port ${port}...`))

examples/web/tools/webpack/config.babel.js

@@ -0,0 +1,65 @@
+import { resolve as resolvePath } from 'path'
+import webpack from 'webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import appRootDir from 'app-root-dir'
+import pkg from '../../package.json'
+
+const config = {
+  entry: {
+    index: resolvePath(appRootDir.get(), './src/index.js'),
+  },
+  output: {
+    path: resolvePath(appRootDir.get(), './build'),
+    filename: `${pkg.name}.js`,
+    publicPath: '/',
+  },
+  target: 'web',
+  plugins: [
+    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(
+        process.env.NODE_ENV || 'development',
+      ),
+    }),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: resolvePath(__dirname, './html.js'),
+      inject: true,
+      // We can pass custom data to the template...
+      custom: {
+        name: pkg.name,
+        description: pkg.description,
+      },
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolvePath(appRootDir.get(), './src')],
+      },
+    ],
+  },
+}
+
+if (process.env.NODE_ENV === 'production') {
+  config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      sourceMap: false,
+      compress: {
+        screw_ie8: true,
+        warnings: false,
+      },
+      mangle: {
+        screw_ie8: true,
+      },
+      output: {
+        comments: false,
+        screw_ie8: true,
+      },
+    }),
+  )
+}
+
+module.exports = config