Merge pull request #8 from cjdev/umd

Add UMD build

Author: nicolasfont

.gitignore

@@ -1,3 +1,4 @@
-/node_modules
+/dist
 /lib
+/node_modules
 npm-debug.log

package.json

@@ -2,19 +2,23 @@
   "name": "@cjdev/visual-stack",
   "version": "0.7.6",
   "files": [
+    "dist",
     "lib",
     "src"
   ],
+  "main": "lib/index.js",
   "scripts": {
-    "build": "gulp build",
-    "clean": "rimraf lib",
+    "build": "gulp build && npm run dist",
+    "dist": "npm run dist:umd && npm run dist:min",
+    "dist:umd": "NODE_ENV=dev webpack src/index.js dist/visual-stack.js",
+    "dist:min": "NODE_ENV=production webpack src/index.js dist/visual-stack.min.js",
+    "clean": "rimraf lib && rimraf dist",
     "lint": "eslint src test",
     "prepublish": "npm run clean && npm run lint && npm run build && npm run test",
     "test": "mocha --compilers js:babel-register,css:./test/utils/css-null-compiler --recursive test/components",
     "watch": "gulp watch"
   },
   "peerDependencies": {
-    "css-loader": ">=0.23.1",
     "react": ">=0.14.7"
   },
   "dependencies": {
@@ -25,15 +29,17 @@
   "devDependencies": {
     "babel-cli": "^6.6.4",
     "babel-core": "^6.6.4",
+    "babel-loader": "^6.2.5",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.6.4",
     "babel-plugin-transform-object-rest-spread": "^6.6.4",
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-register": "^6.7.2",
-    "css-loader": ">=0.23.1",
+    "css-loader": "^0.25.0",
     "enzyme": "^2.1.0",
     "eslint": "^2.2.0",
     "eslint-plugin-react": "^4.1.0",
+    "extract-text-webpack-plugin": "^1.0.1",
     "gulp": "^3.9.1",
     "gulp-babel": "^6.1.2",
     "gulp-filter": "^4.0.0",
@@ -43,6 +49,9 @@
     "react": "^0.14.7",
     "react-addons-test-utils": "^0.14.7",
     "react-dom": "^0.14.7",
-    "rimraf": "^2.5.2"
+    "rimraf": "^2.5.2",
+    "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
+    "webpack": "^1.13.2"
   }
 }

src/components/Form.js

@@ -26,12 +26,12 @@ export const Legend = ({ children, ...otherProps }) =>
   <legend {...otherProps}>{children}</legend>;
 
 export const Form = ({ children, vertical, ...otherProps }) =>
-  <form className={vertical ? "form-vertical" : "form-horizontal"} {...otherProps}>{children}</form>;
+  <form className={vertical ? 'form-vertical' : 'form-horizontal'} {...otherProps}>{children}</form>;
 
 export const FormGroup = ({ children, error, label, required, vertical }) =>
   <div className={`form-group ${error ? 'has-error' : ''}`}>
     {label ? <Label vertical={vertical} className={!vertical ? 'col-sm-3' : ''} required={required}>{label}</Label>
-           : <div className={!vertical ? "col-sm-3" : ''} />}
+           : <div className={!vertical ? 'col-sm-3' : ''} />}
     <div className={!vertical ? 'col-sm-5' : ''}>
       {children}
     </div>

src/components/Sidebar.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React, { PropTypes } from 'react';
 import './Sidebar.css';
 
-export const NavItem = ({ label, grouped = false, expanded = false, linkTo }) => {
+export const NavItem = ({ label, grouped = false, expanded = false /* , linkTo */ }) => {
   const classes = classNames({
     indent: grouped,
     collapse: grouped && !expanded,

src/index.js

@@ -0,0 +1,29 @@
+import './global';
+
+// modules that do not need qualification. i.e., the components
+// they export can be scoped to VisualStack.<component>
+export * from './components/Button';
+export * from './components/Spinner';
+
+// modules that need scoping. i.e. the components they
+// export need to be scoped to VisualStack.<module>.<component>
+import * as BlankSlate from './components/BlankSlate';
+import * as Form from './components/Form';
+import * as List from './components/List';
+import * as MenuBar from './components/MenuBar';
+import * as Modal from './components/Modal';
+import * as PageHeader from './components/PageHeader';
+import * as Panel from './components/Panel';
+import * as Sidebar from './components/Sidebar';
+
+export {
+  BlankSlate,
+  Form,
+  List,
+  MenuBar,
+  Modal,
+  PageHeader,
+  Panel,
+  Sidebar,
+};
+

webpack.config.js

@@ -0,0 +1,52 @@
+var path = require('path');
+var webpack = require('webpack');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
+var env = process.env.NODE_ENV;
+var cssFileName = env === 'production' ? 'visual-stack.min.css' : 'visual-stack.css';
+
+var config = {
+  module: {
+    loaders: [
+      { test: /\.js$/, loaders: ['babel-loader'], exclude: /node_modules/ },
+      { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
+      { test: /\.png$|\.svg$/, loaders: ['url-loader'] },
+      { test: /\.eot$|\.ttf$|\.woff(2)?/, loaders: ['url-loader'] }
+    ]
+  },
+  output: {
+    library: 'VisualStack',
+    libraryTarget: 'umd'
+  },
+  externals: {
+    'react': 'React',
+    'react-dom': 'ReactDOM'
+  },
+
+  // quiet the log output from the ExtractTextPlugin
+  stats: { children: false },
+
+  plugins: [
+    new ExtractTextPlugin(cssFileName),
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(env)
+    })
+  ]
+};
+
+if (env === 'production') {
+  config.plugins.push(
+    new webpack.optimize.UglifyJsPlugin({
+      compressor: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      },
+      sourceMap: false,
+    })
+  );
+}
+
+module.exports = config;
+