perf(Library): Version 1 release ready.

Wrote a whole bunch of tests and fixed a lot of issues that I found. I believe v1 of the library is ready for release. BREAKING CHANGE: v1 release.
ctrlplusb · Apr 14, 2016 · ae72f83 · ae72f83
1 parent 173acb4
commit ae72f83
Show file tree

Hide file tree

Showing 17 changed files with 471 additions and 218 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,14 @@
 {
   "presets": ["es2015", "stage-1", "react"],
-  "plugins": ["lodash"],
   "ignore": [
     "/node_modules/"
-  ]
+  ],
+  "env": {
+    "test": {
+      "plugins": ["rewire"]
+    },
+    "production": {
+      "plugins": ["lodash"]
+    }
+  }
 }
diff --git a/example/.babelrc b/example/.babelrc
diff --git a/example/devServer/index.js → example/index.js b/example/devServer/index.js → example/index.js
@@ -1,2 +1,2 @@
 require(`babel-register`);
-require(`./devServer`);
+require(`./server`);
diff --git a/example/lib/sizeme-example.js b/example/lib/sizeme-example.js
diff --git a/example/package.json b/example/package.json
diff --git a/example/public/index.html b/example/public/index.html
@@ -44,11 +44,13 @@
 
 <body>
   <div class="header">
-    <p align='center'>
+    <p style='text-align: center;'>
       <img src='https://raw.githubusercontent.com/ctrlplusb/react-sizeme/master/assets/logo.png' width='350'/>
     </p>
 
-    <p align='center'>Resize your browser window to see it in action.</p>
+    <p style='text-align: center; margin-top: 20px;'>
+      Resize your browser window to see it in action.
+    </p>
   </div>
 
   <div id="app"></div>

diff --git a/example/devServer/devServer.js → example/server.js b/example/devServer/devServer.js → example/server.js
@@ -1,7 +1,7 @@
 import path from 'path';
 import express from 'express';
 import webpack from 'webpack';
-import config from '../webpack.config.babel';
+import config from './webpack.config.babel';
 
 const server = express();
 const compiler = webpack(config);
@@ -14,7 +14,7 @@ server.use(require(`webpack-dev-middleware`)(compiler, {
 server.use(require(`webpack-hot-middleware`)(compiler));
 
 server.get(`*`, (req, res) => {
-  res.sendFile(path.resolve(__dirname, `../public/index.html`));
+  res.sendFile(path.resolve(__dirname, `./public/index.html`));
 });
 
 server.listen(3002, `localhost`, (err) => {

diff --git a/example/server/index.js b/example/server/index.js
diff --git a/example/src/MySizeAwareComponent.js b/example/src/MySizeAwareComponent.js
@@ -9,11 +9,10 @@ if (process.env.NODE_ENV === `development`) {
   SizeMe = require(`react-sizeme`).default;
 }
 
-const baseStyle = {
-  height: `100px`,
-  margin: `10px`,
+const rootStyle = {
   fontWeight: `bold`,
-  position: `relative`
+  position: `relative`,
+  textAlign: `center`
 };
 
 const spanStyle = {
@@ -26,8 +25,11 @@ const spanStyle = {
 
 function MyComponent({ size: { width, height }, style }) {
   return (
-    <div style={merge({}, baseStyle, style)}>
-      <span style={spanStyle}>{width}x{height}</span>
+    <div style={merge({}, rootStyle, style)}>
+      <span style={spanStyle}>
+        {Math.round(width)}x{Math.round(height)}<br />
+      <span style={{ fontWeight: `normal`, fontStyle: `italic` }}>(rounded)</span>
+      </span>
     </div>
   );
 }

diff --git a/example/src/index.js b/example/src/index.js
@@ -2,24 +2,34 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import MySizeAwareComponent from './MySizeAwareComponent.js';
 
-const container = document.getElementById(`app`);
+function App() {
+  return (
+    <div style={{ width: `100%`, height: `100%` }}>
+      <MySizeAwareComponent
+        style={{ height: `100px`, backgroundColor: `rgb(139, 155, 244)` }}
+      />
+      <MySizeAwareComponent
+        style={{ height: `100px`, backgroundColor: `rgb(145, 252, 141)` }}
+      />
 
-ReactDOM.render((
-  <div style={{ width: `100%`, height: `100%` }}>
-    <MySizeAwareComponent style={{ backgroundColor: `rgb(139, 155, 244)` }} />
-    <MySizeAwareComponent style={{ backgroundColor: `rgb(145, 252, 141)` }} />
+      <div className="clearfix">
+        <div style={{ float: `left`, width: `60%` }}>
+          <MySizeAwareComponent
+            style={{ height: `500px`, backgroundColor: `rgb(112, 209, 207)` }}
+          />
+        </div>
 
-    <div className="clearfix">
-      <div style={{ float: `left`, width: `60%` }}>
-        <MySizeAwareComponent style={{ height: `500px`, backgroundColor: `rgb(112, 209, 207)` }} />
-      </div>
-
-      <div style={{ float: `left`, width: `40%` }}>
-        <MySizeAwareComponent style={{ height: `245px`, backgroundColor: `rgb(29, 165, 154)` }} />
-        <MySizeAwareComponent style={{ height: `245px`, backgroundColor: `rgb(252, 181, 193)` }} />
+        <div style={{ float: `left`, width: `40%` }}>
+          <MySizeAwareComponent
+            style={{ height: `250px`, backgroundColor: `rgb(29, 165, 154)` }}
+          />
+          <MySizeAwareComponent
+            style={{ height: `250px`, backgroundColor: `rgb(252, 181, 193)` }}
+          />
+        </div>
       </div>
     </div>
+  );
+}
 
-
-  </div>
-), container);
+ReactDOM.render(<App />, document.getElementById(`app`));
diff --git a/example/webpack.config.babel.js b/example/webpack.config.babel.js
@@ -3,6 +3,7 @@ import path from 'path';
 
 const config = {
   entry: [
+    `webpack-hot-middleware/client`,
     path.resolve(__dirname, `./src/index.js`)
   ],
   module: {
@@ -20,7 +21,8 @@ const config = {
   },
   output: {
     path: path.resolve(__dirname, `./lib`),
-    filename: `sizeme-example.js`
+    filename: `sizeme-example.js`,
+    publicPath: `/assets/`
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
@@ -32,23 +34,4 @@ const config = {
   ]
 };
 
-if (process.env.NODE_ENV === `development`) {
-  config.entry.push(`webpack-hot-middleware/client`);
-  config.output.publicPath = `/assets/`;
-}
-
-if (process.env.NODE_ENV === `production`) {
-  config.plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: {
-        pure_getters: true,
-        unsafe: true,
-        unsafe_comps: true,
-        screw_ie8: true,
-        warnings: false
-      }
-    })
-  );
-}
-
 export default config;
diff --git a/lib/react-sizeme.js b/lib/react-sizeme.js
diff --git a/package.json b/package.json
@@ -7,11 +7,12 @@
     "prebuild": "rm -rf lib && mkdir lib",
     "build": "NODE_ENV=production webpack",
     "commit": "git-cz",
-    "test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js \"test/**/*.test.js\"",
-    "test:coverage": "babel-node $(npm bin)/isparta cover $(npm bin)/_mocha -- -R spec --require ./test/setup.js",
+    "test": "NODE_ENV=test mocha --compilers js:babel-register --recursive --require ./test/setup.js \"test/**/*.test.js\"",
+    "test:coverage": "NODE_ENV=test babel-node $(npm bin)/isparta cover $(npm bin)/_mocha -- -R spec --require ./test/setup.js",
     "report-coverage": "cat ./coverage/lcov.info | $(npm bin)/codecov",
     "lint": "eslint src",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "example": "NODE_ENV=development node ./example"
   },
   "repository": {
     "type": "git",
@@ -36,6 +37,7 @@
     "babel-eslint": "6.0.2",
     "babel-loader": "6.2.4",
     "babel-plugin-lodash": "2.2.2",
+    "babel-plugin-rewire": "1.0.0-rc-2",
     "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
     "babel-preset-stage-1": "6.5.0",
@@ -66,7 +68,9 @@
     "sinon": "1.17.3",
     "sinon-chai": "2.8.0",
     "stats-webpack-plugin": "0.3.1",
-    "webpack": "1.12.15"
+    "webpack": "1.12.15",
+    "webpack-dev-middleware": "1.6.1",
+    "webpack-hot-middleware": "2.10.0"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",
@@ -79,5 +83,9 @@
     "ghooks": {
       "pre-commit": "npm run test"
     }
+  },
+  "dependencies": {
+    "compression": "1.6.1",
+    "express": "4.13.4"
   }
 }