Merge pull request FormidableLabs#22 from FormidableLabs/use-builder

Use Builder

.babelrc

@@ -0,0 +1,4 @@
+{
+  "stage": 0,
+  "nonStandard": true
+}

.builderrc

@@ -0,0 +1,3 @@
+---
+archetypes:
+  - builder-react-component

.gitignore

@@ -32,4 +32,4 @@ node_modules
 bower_components
 .tmp
 lib
-npm-debug.log
+npm-debug.log*

.npmignore

@@ -12,7 +12,7 @@ ehthumbs.db
 Desktop.ini
 $RECYCLE.BIN/
 .tmp
-npm-debug.log
+npm-debug.log*
 
 # Code / build
 coverage

.travis.yml

@@ -1,8 +1,10 @@
 language: node_js
 
 node_js:
-  - 0.10
-  - 0.12
+  - "0.10"
+  - "0.12"
+  - "4.2"
+  - "5.0"
 
 # Use container-based Travis infrastructure.
 sudo: false
@@ -11,15 +13,23 @@ branches:
   only:
     - master
 
+env:
+  matrix:
+    - NPM_3=true
+    - NPM_3=false
+
 before_install:
   # GUI for real browsers.
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
 
+  # Potentially update to npm 3
+  - 'if [ "$NPM_3" = true ]; then npm install -g npm@3; else true; fi'
+
 script:
-  - npm run check-ci
+  - npm --version
+  - node_modules/.bin/builder run check-ci
 
   # Prune deps to just production and ensure we can still build
   - npm prune --production
-  - npm install --production
-  - npm run build
+  - node_modules/.bin/builder run build

DEVELOPMENT.md

@@ -1,13 +1,26 @@
 Development
 ===========
 
+We use [builder][] and `npm` to control all aspects of development and
+publishing.
+
+As a preliminary matter, please update your shell to include
+`./node_modules/.bin` in `PATH` like:
+
+```sh
+export PATH="${PATH}:./node_modules/.bin"
+```
+
+So you can type `builder` instead of `./node_modules/.bin/builder` for all
+commands.
+
 ## Build
 
 Build for production use (NPM, bower, etc) and create `dist` UMD bundles
 (min'ed, non-min'ed)
 
 ```
-$ npm run build
+$ builder run build
 ```
 
 Note that `dist/` files are only updated and committed on **tagged releases**.
@@ -20,9 +33,9 @@ and launching a browser pointed to the demo page.
 
 Run the `demo` application with watched rebuilds:
 
-```
-$ npm run dev       # dev test/app server (OR)
-$ npm run open-dev  # dev servers _and a browser window opens!_
+```sh
+$ builder run dev       # dev test/app server (OR)
+$ builder run open-dev  # dev servers _and a browser window opens!_
 ```
 
 From there you can see:
@@ -77,21 +90,21 @@ size.
 
 During development, you are expected to be running either:
 
-```
-$ npm run dev
+```sh
+$ builder run dev
 ```
 
 to build the lib and test files. With these running, you can run the faster
 
-```
-$ npm run check-dev
+```sh
+$ builder run check-dev
 ```
 
 Command. It is comprised of:
 
-```
-$ npm run lint
-$ npm run test-dev
+```sh
+$ builder run lint
+$ builder run test-dev
 ```
 
 Note that the tests here are not instrumented for code coverage and are thus
@@ -102,20 +115,20 @@ more development / debugging friendly.
 CI doesn't have source / test file watchers, so has to _build_ the test files
 via the commands:
 
-```
-$ npm run check     # PhantomJS only
-$ npm run check-cov # (OR) PhantomJS w/ coverage
-$ npm run check-ci  # (OR) PhantomJS,Firefox + coverage - available on Travis.
+```sh
+$ builder run check     # PhantomJS only
+$ builder run check-cov # (OR) PhantomJS w/ coverage
+$ builder run check-ci  # (OR) PhantomJS,Firefox + coverage - available on Travis.
 ```
 
 Which is currently comprised of:
 
-```
-$ npm run lint      # AND ...
+```sh
+$ builder run lint  # AND ...
 
-$ npm run test      # PhantomJS only
-$ npm run test-cov  # (OR) PhantomJS w/ coverage
-$ npm run test-ci   # (OR) PhantomJS,Firefox + coverage
+$ builder run test      # PhantomJS only
+$ builder run test-cov  # (OR) PhantomJS w/ coverage
+$ builder run test-ci   # (OR) PhantomJS,Firefox + coverage
 ```
 
 Note that `(test|check)-(cov|ci)` run code coverage and thus the
@@ -125,7 +138,7 @@ test code may be harder to debug because it is instrumented.
 
 The client tests rely on webpack dev server to create and serve the bundle
 of the app/test code at: http://127.0.0.1:3001/assets/main.js which is done
-with the task `npm run server-test` (part of `npm dev`).
+with the task `builder run server-test` (part of `npm dev`).
 
 #### Code Coverage
 
@@ -143,15 +156,15 @@ coverage/
 **IMPORTANT - NPM**: To correctly run `preversion` your first step is to make
 sure that you have a very modern `npm` binary:
 
-```
+```sh
 $ npm install -g npm
 ```
 
 Built files in `dist/` should **not** be committeed during development or PRs.
 Instead we _only_ build and commit them for published, tagged releases. So
 the basic workflow is:
 
-```
+```sh
 # Make sure you have a clean, up-to-date `master`
 $ git pull
 $ git status # (should be no changes)
@@ -186,3 +199,5 @@ please review:
 * [`npm publish`](https://docs.npmjs.com/cli/publish): Uploads to NPM.
     * **NOTE**: We don't _build_ in `prepublish` because of the
       [`npm install` runs `npm prepublish` bug](https://github.com/npm/npm/issues/3059)
+
+[builder]: https://github.com/FormidableLabs/builder

demo/app.jsx

@@ -38,7 +38,8 @@ class App extends React.Component {
             color: this.state.color,
             br: this.state.br,
             rotate: this.state.rotate
-          }}>
+          }}
+        >
           {(data) => {
             return (
               <div style={
@@ -56,8 +57,9 @@ class App extends React.Component {
                   alignItems: "center",
                   display: "flex",
                   fontSize: 40,
-                  transform: "rotate(" + data.rotate + "deg)"
-                }}>
+                  transform: `rotate(${data.rotate}deg)`
+                }}
+              >
                 <div style={{textAlign: "center", width: "100%"}}>Test</div>
               </div>
             );

demo/index.html

@@ -2,26 +2,54 @@
 <html>
 <head>
   <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv-printshiv.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.js"></script>
   <![endif]-->
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <title>Demo</title>
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <style type="text/css">
+    * {
+      box-sizing: border-box;
+    }
+    .tile {
+      display: block;
+      float: left;
+      width: 100px;
+      height: 100px;
+      margin: 20px;
+    }
+    .tile img {
+      display: block;
+      width: 100px;
+      height: 100px;
+    }
+    .demo {
+      width: 80%;
+      margin: auto;
+      position: relative;
+    }
+  </style>
 </head>
 <body>
   <!--[if lt IE 8]>
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
   <![endif]-->
-  <div id="content">
-    <h1>If you can see this, something is broken (or JS is not enabled)!!.</h1>
-  </div>
-  <script type="text-javascript" src="http://localhost:3000/webpack-dev-server.js"></script>
-  <script type="text/javascript" src="assets/main.js"></script>
+  <div id="content"></div>
   <!--[if lt IE 9]>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-shim.min.js"></script>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.7/es5-sham.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-shim.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.1.15/es5-sham.min.js"></script>
   <![endif]-->
+  <script src="http://localhost:3000/webpack-dev-server.js"></script>
+  <script src="assets/main.js"></script>
+  <script>
+    // Sanity-check the component loaded...
+    setTimeout(function () {
+      var content = document.querySelector("#content");
+      content.innerHTML = content.innerHTML ||
+        "If you can see this, something is broken (or JS is not enabled)!";
+    }, 500);
+  </script>
 </body>
 </html>