Use rollup for build system (2/2)

Ref #79

Author: paularmstrong

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
     "react",
-    "es2015"
+    "env"
   ],
   "plugins": [
     "transform-class-properties",

package.json

@@ -3,6 +3,8 @@
   "version": "0.4.1",
   "description": "Bringing the i18n functionality of Globalize, backed by CLDR, to React",
   "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
   "files": [
     "dist/",
     "examples/",
@@ -13,7 +15,8 @@
   "scripts": {
     "build": "rollup -c",
     "lint": "eslint rollup.config.js src test",
-    "test": "mocha test"
+    "test": "mocha test",
+    "prepublish": "build"
   },
   "keywords": [
     "react",
@@ -37,11 +40,11 @@
     "react": "^0.13 || ^0.14 || ^15.0.0"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
+    "babel-cli": "^6.26.0",
     "babel-eslint": "^8.0.1",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015-rollup": "^3.0.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.7.2",
     "chai": "^4.1.2",

rollup.config.js

@@ -3,29 +3,30 @@ import resolve from "rollup-plugin-node-resolve";
 import pkg from "./package.json";
 
 export default [
-    // browser-friendly UMD build
     {
         input: "src/index.js",
         external: [
             "react",
             "globalize",
-            "prop-types",
+            "globalize/*"
         ],
         globals: {
             react: "React",
-            globalize: "Globalize",
-            "prop-types": "PropTypes",
+            globalize: "Globalize"
         },
         output: [
             { file: pkg.browser, format: "umd", name: "react-globalize" },
             { file: pkg.main, format: "cjs" },
-            { file: pkg.module, format: "es" },
+            { file: pkg.module, format: "es" }
         ],
         plugins: [
             resolve(),
             babel({
-                exclude: "node_modules/**",
-            }),
-        ],
-    },
+                babelrc: false,
+                presets: [ "react", [ "env", { modules: false } ] ],
+                plugins: [ "transform-class-properties", "transform-object-rest-spread" ],
+                exclude: "node_modules/**"
+            })
+        ]
+    }
 ];

src/currency.js

@@ -1,5 +1,4 @@
 import React from "react";
 import generator from "./generator";
-import "globalize/currency";
 
 export default generator("formatCurrency", ["value", "currency", "options"]);

src/date.js

@@ -1,5 +1,4 @@
 import React from "react";
 import generator from "./generator";
-import "globalize/date";
 
 export default generator("formatDate", ["value", "options"]);

src/generator.js

@@ -1,3 +1,4 @@
+import reactCreateClass from "./react-create-class";
 import React from "react";
 import Globalize from "globalize";
 
@@ -22,18 +23,15 @@ function generator(fn, localPropNames, options) {
     };
     var globalizePropNames = commonPropNames.concat(localPropNames);
 
-    return class extends React.Component {
-        //static displayName = Fn;
-
-        componentWillMount() {
+    return reactCreateClass({
+        displayName: Fn,
+        componentWillMount: function() {
             this.setup(this.props);
-        }
-
-        componentWillReceiveProps(nextProps) {
+        },
+        componentWillReceiveProps: function(nextProps) {
             this.setup(nextProps);
-        }
-
-        setup(props) {
+        },
+        setup: function(props) {
             this.globalize = props.locale ? Globalize(props.locale) : Globalize;
             this.domProps = Object.keys(props).filter(omit(globalizePropNames)).reduce(function(memo, propKey) {
                 memo[propKey] = props[propKey];
@@ -48,12 +46,11 @@ function generator(fn, localPropNames, options) {
             beforeFormat.call(this, props);
             var formattedValue = this.globalize[fn].apply(this.globalize, this.globalizePropValues);
             this.value = afterFormat.call(this, formattedValue);
-        }
-
-        render() {
+        },
+        render: function() {
             return React.DOM.span(this.domProps, this.value);
         }
-    };
+    });
 }
 
 export default generator;

src/message.js

@@ -1,8 +1,6 @@
 import Globalize from "globalize";
 import React from "react";
 import generator from "./generator";
-import "globalize/message";
-import "globalize/plural";
 
 function messageSetup(globalize, props, globalizePropValues) {
     var defaultMessage;

src/number.js

@@ -1,5 +1,4 @@
 import React from "react";
 import generator from "./generator";
-import "globalize/number";
 
 export default generator("formatNumber", ["value", "options"]);

src/relative-time.js

@@ -1,5 +1,4 @@
 import React from "react";
 import generator from "./generator";
-import "globalize/relative-time";
 
 export default generator("formatRelativeTime", ["value", "unit", "options"]);

test/formatCurrency.spec.js

@@ -1,5 +1,5 @@
 /*global expect React shallow Globalize*/
-import FormatCurrency from "../dist/currency";
+import FormatCurrency from "../src/currency";
 
 describe("formatCurrency Component", () => {
     it("renders as a <span>", () => {