Merge pull request #14 from buildo/13-lodash_and_classnames_should

#13: lodash and classnames should be deps, not devDeps (closes #13)

examples/webpack.base.js → examples/webpack.base.babel.js

@@ -1,13 +1,12 @@
-var path = require('path');
-var webpack = require('webpack');
+import path from 'path';
 
-var paths = {
+export const paths = {
   SRC: path.resolve(__dirname, '../src'),
-  EXAMPLES: path.resolve(__dirname, '.')
+  EXAMPLES: path.resolve(__dirname, '.'),
+  ENTRY: path.resolve(__dirname, './examples.js')
 };
 
-module.exports = {
-
+export default {
   output: {
     path: paths.EXAMPLES,
     filename: 'bundle.js'
@@ -31,5 +30,4 @@ module.exports = {
       }
     ]
   }
-
-};
+};

examples/webpack.config.babel.js

@@ -0,0 +1,26 @@
+import webpack from 'webpack';
+import webpackBase, { paths } from './webpack.base.babel.js';
+
+export default {
+  ...webpackBase,
+
+  entry: [
+    'webpack/hot/dev-server',
+    paths.ENTRY
+  ],
+
+  devtool: 'source-map',
+
+  devServer: {
+    contentBase: paths.EXAMPLES,
+    hot: true,
+    inline: true,
+    port: '8080'
+  },
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('development')
+    })
+  ]
+};

examples/webpack.config.build.babel.js

@@ -0,0 +1,20 @@
+import webpack from 'webpack';
+import webpackBase, { paths } from './webpack.base.babel.js';
+
+export default {
+  ...webpackBase,
+
+  entry: paths.ENTRY,
+
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify('production')
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    })
+  ]
+
+};

package.json

@@ -9,8 +9,8 @@
     "lint": "eslint src examples/examples.js",
     "preversion": "npm run lint && npm run test && npm run build-examples",
     "prepublish": "npm run build",
-    "build-examples": "npm run clean && webpack --config examples/webpack.config.build.js --progress",
-    "start": "webpack-dev-server --config examples/webpack.config.js --progress --hot --inline",
+    "build-examples": "npm run clean && webpack --config examples/webpack.config.build.babel.js --progress",
+    "start": "webpack-dev-server --config examples/webpack.config.babel.js --progress --hot --inline",
     "clean": "rm -f examples/bundle.js examples/bundle.js.map",
     "release-version": "smooth-release"
   },
@@ -32,12 +32,13 @@
     "url": "https://github.com/buildo/react-placeholder/issues"
   },
   "homepage": "https://github.com/buildo/react-placeholder",
-  "dependencies": {},
+  "dependencies": {
+    "lodash.omit": "^4.5.0"
+  },
   "devDependencies": {
     "babel": "^5.8.12",
     "babel-eslint": "^7.0.0",
     "babel-loader": "^5.3.2",
-    "classnames": "^2.2.5",
     "eslint": "^3.7.1",
     "eslint-config-buildo": "buildo/eslint-config",
     "eslint-loader": "^1.1.1",
@@ -49,7 +50,6 @@
     "karma-coverage": "^0.3.1",
     "karma-mocha": "^0.1.10",
     "karma-webpack": "^1.5.1",
-    "lodash": "^3.9.3",
     "mocha": "^2.2.5",
     "react": "^15",
     "react-dom": "^15",

src/ReactPlaceholder.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import omit from 'lodash/object/omit';
+import omit from 'lodash.omit';
 import placeholders from './placeholders';
 
 export default class ReactPlaceholder extends React.Component {

src/placeholders/MediaBlock.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 import TextBlock from './TextBlock';
 import RoundShape from './RoundShape';
 
@@ -16,7 +15,7 @@ export default class MediaBlock extends React.Component {
   render() {
     const { className, style, color, rows } = this.props;
     return (
-      <div className={cx('media-block', className)} style={{ ...style, display: 'flex' }}>
+      <div className={`media-block ${className}`} style={{ ...style, display: 'flex' }}>
         <RoundShape
           color={color}
           style={{ minHeight: 55, width: 55, minWidth: 55, marginRight: 10 }}

src/placeholders/RectShape.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 
 export default class RectShape extends React.Component {
 
@@ -20,7 +19,7 @@ export default class RectShape extends React.Component {
     };
 
     return (
-      <div className={cx('rect-shape', className)} style={{ ...defaultStyle, ...style }}/>
+      <div className={`rect-shape ${className}`} style={{ ...defaultStyle, ...style }}/>
     );
   }
 

src/placeholders/RoundShape.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 
 export default class RoundShape extends React.Component {
 
@@ -20,7 +19,7 @@ export default class RoundShape extends React.Component {
     };
 
     return (
-      <div className={cx('round-shape', className)} style={{ ...defaultStyles, ...style }}/>
+      <div className={`round-shape ${className}`} style={{ ...defaultStyles, ...style }}/>
     );
   }
 

src/placeholders/TextBlock.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 import TextRow from './TextRow';
 
 const widths = [97, 100, 94, 90, 98, 95, 98, 40];
@@ -43,7 +42,7 @@ export default class TextBlock extends React.Component {
     const { style, className } = this.props;
 
     return (
-      <div className={cx('text-block', className)} style={{ ...style, width: '100%' }}>
+      <div className={`text-block ${className}`} style={{ ...style, width: '100%' }}>
         {this.getRows()}
       </div>
     );

src/placeholders/TextRow.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import cx from 'classnames';
 
 export default class TextRow extends React.Component {
 
@@ -30,7 +29,7 @@ export default class TextRow extends React.Component {
 
     return (
       <div
-        className={cx('text-row', className)}
+        className={`text-row ${className}`}
         style={{ ...defaultStyles, ...style }}
       />
     );