Merge pull request #18 from ThrivingKings/building-better-builds

Building better builds
ThrivingKings · Apr 22, 2017 · cc65d78 · cc65d78
2 parents 280b086 + 0a60a03
commit cc65d78
Show file tree

Hide file tree

Showing 17 changed files with 566 additions and 301 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,8 @@
 .DS_Store
 node_modules
 /packages/*/lib
+/packages/*/dist
+/browser/packages
 *.log
 /packages/packageBrowser
 _book/
diff --git a/browser/index.html b/browser/index.html
@@ -9,5 +9,5 @@
 
 <body>
   <div class="example-browser"></div>
-  <script src="/packageBrowser/lib/packageBrowser.min.js"></script>
+  <script src="/packageBrowser/lib/packageBrowser.js"></script>
 </body>
diff --git a/browser/index.js b/browser/index.js
@@ -9,10 +9,10 @@ const examples = req.keys().map(function(key){
 
 // Add script for each example
 examples.map(example => {
-  const { name, examples } = example
+  const { name } = example
 
   const script = document.createElement('script')
-  script.src = `${name}/lib/${name}.min.js`
+  script.src = `packages/${name}/dist/index.js`
   document.head.appendChild(script)
 })
 

diff --git a/build.js b/build.js
@@ -0,0 +1,75 @@
+'use strict';
+
+const rimraf = require('rimraf');
+const rollup = require('rollup').rollup;
+const babel = require('rollup-plugin-babel');
+const resolve = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+const uglify = require('rollup-plugin-uglify');
+
+const packages = [
+  'animate',
+  'animo',
+  'countdown',
+  'rotate'
+];
+
+console.info('building');
+packages.forEach(pkg => {
+  rimraf(`./packages/${pkg}/lib`, () => {
+    rollup({
+      entry: `./packages/${pkg}/src/index.js`,
+      plugins: [
+        babel({
+          exclude: 'node_modules/**',
+          presets: ['es2015-rollup', 'stage-0'],
+          plugins: []
+        })
+      ]
+    }).then(transpile => {
+      console.info(`writing transpiled package: ${pkg}`);
+      transpile.write({
+        format: 'es',
+        moduleName: pkg,
+        dest: `./packages/${pkg}/lib/index.js`
+      });
+      bundle(pkg);
+    }).catch(err => {
+      console.warn(err);
+      process.exit(1);
+    });
+  });
+
+  const bundle = pkg => {
+    rimraf(`./packages/${pkg}/dist`, () => {
+      rollup({
+        entry: `./packages/${pkg}/src/index.js`,
+        plugins: [
+          babel({
+            exclude: 'node_modules/**',
+            externalHelpers: false,
+            runtimeHelpers: true,
+            presets: [
+              'es2015-rollup',
+              'stage-0'
+            ],
+            plugins: ['transform-runtime']
+          }),
+          commonjs(),
+          resolve({ jsnext: true, main: true }),
+          uglify()
+        ]
+      }).then(bundle => {
+        console.info(`writing bundled package: ${pkg}`);
+        bundle.write({
+          format: 'iife',
+          moduleName: pkg,
+          dest: `./packages/${pkg}/dist/index.js`
+        });
+      }).catch(err => {
+        console.warn(err);
+        process.exit(1);
+      })
+    });
+  }
+});
diff --git a/docs/contributing/development.md b/docs/contributing/development.md
@@ -25,13 +25,15 @@ All plugins should live in the `packages` subdirectory and should follow this si
 -- package.json
 -- README.md
 ```
-Then, add your package to the webpack build process
-```json
-entry: {
-  animo: "./packages/animo/src/",
-  funkyjazzpackage: "./packages/funkyjazzpackage/src/",
-  /* ... */
-}
+Then, add your package to the `./build.js` script
+```js
+const packages = [
+  'animate',
+  'animo',
+  'countdown',
+  'rotate',
+  'funkyjazzpackage'
+]
 ```
 
 ### Package browser

diff --git a/package.json b/package.json
@@ -7,9 +7,12 @@
     "babel-core": "6.9.1",
     "babel-eslint": "6.0.4",
     "babel-loader": "6.2.4",
+    "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-runtime": "6.9.0",
     "babel-polyfill": "6.9.1",
     "babel-preset-es2015": "6.9.0",
+    "babel-preset-es2015-rollup": "^3.0.0",
+    "babel-preset-latest": "^6.24.1",
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-0": "6.5.0",
     "babel-runtime": "6.9.2",
@@ -25,14 +28,21 @@
     "mocha": "2.5.3",
     "react": "15.2.0",
     "react-dom": "15.2.0",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.41.6",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^8.0.2",
+    "rollup-plugin-minify": "^1.0.3",
+    "rollup-plugin-node-resolve": "^3.0.0",
+    "rollup-plugin-uglify": "^1.0.1",
     "webpack": "1.13.1",
     "webpack-dev-server": "1.14.1"
   },
   "scripts": {
     "lint": "eslint packages/**/src/*.js",
     "test": "yarn lint && karma start --single-run",
-    "start": "webpack -w & webpack-dev-server --content-base browser/",
-    "build": "yarn test && webpack -p",
+    "start": "node build.js && rimraf browser/packages && cp -R packages browser/ && webpack-dev-server --content-base browser/",
+    "build": "yarn test && node build.js",
     "docs:build": "gitbook build && cp CNAME _book",
     "docs:deploy": "yarn docs:build && gh-pages -d _book -b gh-pages"
   },

diff --git a/packages/animate/package.json b/packages/animate/package.json
@@ -9,12 +9,10 @@
     "animate"
   ],
   "files": [
-    "lib"
+    "lib",
+    "dist"
   ],
-  "main": "./lib/animate.min.js",
+  "main": "./dist/index.js",
   "author": "Daniel Raftery",
-  "license": "MIT",
-  "dependencies": {
-    "animo-core": "^1.0.0"
-  }
+  "license": "MIT"
 }
diff --git a/packages/animate/src/index.js b/packages/animate/src/index.js
@@ -1,4 +1,4 @@
-import animo from 'animo-core'
+import animo from '../../animo/src/index'
 
 const animate = (el, options) => {
   const defaultProps = {
@@ -29,4 +29,4 @@ const animate = (el, options) => {
   })
 }
 
-module.exports = animate
+export default animate
diff --git a/packages/animo/package.json b/packages/animo/package.json
@@ -7,12 +7,10 @@
     "animo", "animo-core"
   ],
   "files": [
-    "lib"
+    "lib",
+    "dist"
   ],
-  "main": "./lib/animo.min.js",
+  "main": "./dist/index.js",
   "author": "Daniel Raftery",
-  "license": "MIT",
-  "dependencies": {
-    "lodash.iselement": "4.0.0"
-  }
+  "license": "MIT"
 }
diff --git a/packages/animo/src/index.js b/packages/animo/src/index.js
@@ -1,9 +1,3 @@
-import isElement from 'lodash.iselement'
-
-if (!global._babelPolyfill) {
-  require('babel-polyfill')
-}
-
 const VENDOR_TRANSFORMS = [
   'mozTransform',
   'msTransform',
@@ -65,7 +59,7 @@ const animo = (element, options = {}) => {
   }
 
   return new Promise ((resolve, reject) => {
-    if (!isElement(element)) {
+    if (!element) {
       return reject('could not find element')
     }
 
@@ -130,12 +124,10 @@ const animo = (element, options = {}) => {
       })
     }
 
-    (async function() {
-      await performOnMount()
-      animationStep()
-    }())
+    performOnMount()
+      .then(animationStep)
 
   })
 }
 
-module.exports = animo
+export default animo
diff --git a/packages/countdown/package.json b/packages/countdown/package.json
@@ -9,12 +9,10 @@
     "countdown"
   ],
   "files": [
-    "lib"
+    "lib",
+    "dist"
   ],
-  "main": "./lib/countdown.min.js",
+  "main": "./dist/index.js",
   "author": "Daniel Raftery",
-  "license": "MIT",
-  "dependencies": {
-    "animo-core": "^1.0.0"
-  }
+  "license": "MIT"
 }
diff --git a/packages/countdown/src/index.js b/packages/countdown/src/index.js
@@ -1,4 +1,4 @@
-import animo from 'animo-core'
+import animo from '../../animo/src/index'
 
 const countdown = (el, options) => {
   const defaultProps = {
@@ -28,15 +28,14 @@ const countdown = (el, options) => {
         backgroundColor: props.color,
         height: '100%'
       })
-
+      element.transition('transform 1s linear')
       element.transform(`translate3d(${percent(state.elapsed)}%, 0, 0)`)
     },
     onIteration: element => {
       state.elapsed++
       element.transform(`translate3d(${percent(state.elapsed)}%, 0, 0)`)
-      element.transition('transform 1s linear')
     }
   })
 }
 
-module.exports = countdown
+export default countdown
diff --git a/packages/rotate/package.json b/packages/rotate/package.json
@@ -9,12 +9,10 @@
     "rotation"
   ],
   "files": [
-    "lib"
+    "lib",
+    "dist"
   ],
-  "main": "./lib/rotate.min.js",
+  "main": "./dist/index.js",
   "author": "Daniel Raftery",
-  "license": "MIT",
-  "dependencies": {
-    "animo-core": "^1.0.0"
-  }
+  "license": "MIT"
 }
diff --git a/packages/rotate/src/index.js b/packages/rotate/src/index.js
@@ -1,4 +1,4 @@
-import animo from 'animo-core'
+import animo from '../../animo/src/index'
 
 const rotate = (el, options) => {
   const defaultProps = {
@@ -23,12 +23,14 @@ const rotate = (el, options) => {
         element.reset()
       }
     },
+    onMount: function(element) {
+      element.transition(`transform ${interval}ms ${timing}`)
+    },
     onIteration: function(element) {
       state.currentDeg = state.currentDeg + deg
       element.transform(`rotate(${state.currentDeg}deg)`)
-      element.transition(`transform ${interval}ms ${timing}`)
     }
   })
 }
 
-module.exports = rotate
+export default rotate
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,15 +1,10 @@
 module.exports = {
   entry: {
-    animo: "./packages/animo/src/",
-    animate: "./packages/animate/src/",
-    countdown: "./packages/countdown/src/",
-    rotate: "./packages/rotate/src/",
-    // Package browser
     packageBrowser: "./browser/"
   },
   output: {
     path: __dirname + "/packages",
-    filename: "[name]/lib/[name].min.js",
+    filename: "[name]/lib/[name].js",
     library: "[name]",
     libraryTarget: "umd"
   },
@@ -18,7 +13,10 @@ module.exports = {
       {
         test: /\.js$/,
         exclude: /(node_modules)/,
-        loader: 'babel'
+        loader: 'babel',
+        query: {
+          presets: ['es2015', 'react', 'stage-0']
+        }
       }
     ]
   }