Merge pull request #45 from transloadit/hexodrivenexamples

Hexo driven examples

.gitignore

@@ -12,6 +12,4 @@ website/node_modules/
 website/public/
 website/.deploy*/
 website/src/_drafts
-website/src/examples/**/static/js/app.js
-
 website/themes/uppy/source/js/uppy.js

package.json

@@ -15,11 +15,12 @@
     "test:phantom": "zuul test/spec/upload.js --phantom",
     "test": "bin/test",
     "watch:css": "nodemon -e src/scss -x \"npm run build:css\"",
-    "watch:examples": "cd website && node watch-examples.js",
+    "watch:examples": "cd website && node build-examples.js watch",
     "watch:js": "nodemon --watch src -e js --ignore src/scss -x \"npm run build:lib\"",
+    "web:clean": "cd website && ./node_modules/.bin/hexo clean",
     "web:build": "cd website && node update.js && ./node_modules/.bin/hexo generate",
     "web:deploy": "npm run web:install && npm run web:build && ./bin/web-deploy",
-    "web:install": "cd website && npm install",
+    "web:install": "cd website && rm -rf node_modules/hexo-uppyexamplebuilder && npm install",
     "web:preview": "cd website && ./node_modules/.bin/hexo server --debug",
     "web": "npm run web:install && npm run web:build && npm run web:preview"
   },

website/_config.yml

@@ -132,14 +132,3 @@ postcss:
     autoprefixer:
       browsers:
         - 'last 2 versions'
-
-
-# Deployment
-## Docs: https://hexo.io/docs/deployment.html
-# deploy:
-#   type: git
-#   branch: gh-pages
-#   repository: git@github.com:transloadit/uppy.git
-
-skip_render:
-  - 'examples/**/*.js'

website/watch-examples.js → website/build-examples.js

@@ -1,10 +1,16 @@
 /**
- * watch-examples.js
+ * build-examples.js
  * --------
- * Searches for each example's `src/js/app.js` file.
- * Creates a new watchify instance for each `app.js`.
+ * Searches for each example's `js/app.es6` file.
+ * Creates a new watchify instance for each `app.es6`.
  * Changes to Uppy's source will trigger rebundling.
  *
+ * Run as:
+ *
+ * build-examples.js        # to build all examples one-off
+ * build-examples.js watch  # to keep rebuilding examples with an internal watchify
+ * build-examples.js <path> # to build just one example app.es6
+ *
  * Note:
  * Since each example is dependent on Uppy's source,
  * changing one source file causes the 'file changed'
@@ -16,46 +22,60 @@
 var createStream = require('fs').createWriteStream;
 var glob = require('multi-glob').glob;
 var chalk = require('chalk');
+var path = require('path');
+var mkdirp = require('mkdirp');
 var notifier = require('node-notifier');
 var babelify = require('babelify');
 var browserify = require('browserify');
 var watchify = require('watchify');
 
-var src = 'src/js/app.js';
-var dest = 'static/js/app.js';
+var webRoot = __dirname;
+var uppyRoot = path.dirname(webRoot);
+
+var srcPattern = webRoot + '/src/examples/**/js/app.es6';
+var dstPattern = webRoot + '/public/examples/**/js/app.js';
 
-var pattern = 'src/examples/**/' + src;
+var watchifyEnabled = process.argv[2] === 'watch';
+var browserifyPlugins = [];
+if (watchifyEnabled) {
+  browserifyPlugins.push(watchify);
+}
+
+// Instead of 'watch', build-examples.js can also take a path as cli argument.
+// In this case we'll only bundle the specified path/pattern
+if (!watchifyEnabled && process.argv[2]) {
+  srcPattern = process.argv[2];
+}
 
-// Find each app.js file with glob.
-// 'website/' glob is for when calling `node website/watch-examples.js` from root.
-glob([pattern, 'website/' + pattern], function(err, files) {
+// Find each app.es6 file with glob.
+glob(srcPattern, function(err, files) {
   if (err) throw new Error(err);
 
-  console.log('--> Watching examples..');
-  console.log('--> Pre-building ' + files.length + ' files..')
+  if (watchifyEnabled) {
+    console.log('--> Watching examples..');
+  }
 
   var muted = [];
 
   // Create a new watchify instance for each file.
   files.forEach(function(file) {
-    var watcher = browserify(file, {
-      cache: {},
+    var browseFy = browserify(file, {
+      cache       : {},
       packageCache: {},
-      plugin: [watchify]
+      plugin      : browserifyPlugins
     })
-      // Aliasing for using `require('uppy')`, etc.
-      .require('../src/index.js', { expose: 'uppy' })
-      .require('../src/core/index.js', { expose: 'uppy/core' })
-      .require('../src/plugins/index.js', { expose: 'uppy/plugins' })
+
+    // Aliasing for using `require('uppy')`, etc.
+    browseFy
+      .require(uppyRoot + '/src/index.js', { expose: 'uppy' })
+      .require(uppyRoot + '/src/core/index.js', { expose: 'uppy/core' })
+      .require(uppyRoot + '/src/plugins/index.js', { expose: 'uppy/plugins' })
       .transform(babelify);
 
     // Listeners for changes, errors, and completion.
-    watcher
+    browseFy
       .on('update', bundle)
       .on('error', onError)
-      .on('log', function(msg) {
-        console.info(chalk.green('✓ done:'), chalk.green(file), chalk.gray.dim('(' + msg + ')'));
-      })
       .on('file', function(file, id, parent) {
         // When file completes, unmute it.
         muted = muted.filter(function(mutedId) {
@@ -81,11 +101,18 @@ glob([pattern, 'website/' + pattern], function(err, files) {
         }
       });
 
-      var output = file.replace(src, dest);
-      var bundle = watcher.bundle()
-      .on('error', onError)
+      var exampleName = path.basename(path.dirname(path.dirname(file)));
+      var output      = dstPattern.replace('**', exampleName);
+      var parentDir   = path.dirname(output);
+
+      mkdirp.sync(parentDir);
+
+      console.info(chalk.green('✓ building:'), chalk.green(path.relative(process.cwd(), output)));
+
+      var bundle = browseFy.bundle()
+        .on('error', onError)
+
       bundle.pipe(createStream(output));
-      bundle.pipe(createStream(output.replace('src', 'public')));
     }
   });
 });

website/package.json

@@ -9,6 +9,7 @@
     "autoprefixer": "^6.1.2",
     "hexo": "^3.1.1",
     "hexo-browsersync": "^0.2.0",
+    "hexo-uppyexamplebuilder": "file:./private_modules/hexo-uppyexamplebuilder",
     "hexo-deployer-git": "0.0.4",
     "hexo-generator-archive": "^0.1.2",
     "hexo-generator-category": "^0.1.2",
@@ -21,6 +22,7 @@
     "hexo-server": "^0.1.2",
     "hexo-tag-emojis": "^2.0.0",
     "hexo-util": "^0.2.1",
+    "mkdirp": "^0.5.1",
     "postcss-svg": "^1.0.4"
   },
   "devDependencies": {

website/private_modules/hexo-uppyexamplebuilder/index.js

@@ -0,0 +1,30 @@
+// We listen for hexo changes on *.es6 extensions.
+// We tell it to just copy the original to public/**/*.es6
+// We fire our own build-examples.js and tell it which example to build -
+// that script then writes the public/**/*.js files.
+var exec             = require('child_process').exec;
+var path             = require('path');
+var webRoot          = path.dirname(path.dirname(__dirname));
+var uppyRoot         = path.dirname(webRoot);
+var browserifyScript = webRoot + '/build-examples.js'
+
+hexo.extend.renderer.register('es6', 'es6', function(data, options, callback) {
+  if (!data || !data.path) {
+    return callback(null);
+  }
+
+  if (!data.path.match(/\/examples\//)) {
+    callback(null, data.text);
+  }
+
+  var cmd = 'node ' + browserifyScript + ' ' + data.path + ' --colors';
+  // hexo.log.i('hexo-uppyexamplebuilder: change detected in examples. running: ' + cmd);
+  exec(cmd, function(err, stdout, stderr) {
+    if (err) {
+      return callback(err);
+    }
+
+    hexo.log.i('hexo-uppyexamplebuilder: ' + stdout.trim());
+    callback(null, data.text);
+  });
+});

website/private_modules/hexo-uppyexamplebuilder/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "hexo-uppyexamplebuilder",
+  "version": "0.0.1",
+  "private": true,
+  "main": "index"
+}

website/src/examples/cdn.ejs

@@ -13,8 +13,8 @@ CDN
 This example showcases sourcing an UMD dist build straight from a CDN.
 </p>
 
-<% include cdn/src/html/app.html %>
-<script src="cdn/static/js/app.js"></script>
+<% include cdn/html/app.html %>
+<script src="cdn/js/app.js"></script>
 
 <hr />
 
@@ -22,10 +22,10 @@ This example showcases sourcing an UMD dist build straight from a CDN.
   On this page we're using the following HTML snippet:
 </p>
 
-{% include_code lang:html cdn/src/html/app.html %}
+{% include_code lang:html cdn/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
 
-{% include_code lang:js cdn/src/js/app.js %}
+{% include_code lang:js cdn/js/app.es6 %}

website/src/examples/dragdrop.ejs

@@ -12,9 +12,9 @@ Drag & Drop
 Here you'll see a demo of how you might set up Drag and Drop with Uppy:
 </p>
 
-<link rel="stylesheet" href="dragdrop/src/css/app.css">
-<% include dragdrop/src/html/app.html %>
-<script src="dragdrop/static/js/app.js"></script>
+<link rel="stylesheet" href="dragdrop/css/app.css">
+<% include dragdrop/html/app.html %>
+<script src="dragdrop/js/app.js"></script>
 
 <hr />
 
@@ -22,16 +22,16 @@ Here you'll see a demo of how you might set up Drag and Drop with Uppy:
   On this page we're using the following HTML snippet:
 </p>
 
-{% include_code lang:html dragdrop/src/html/app.html %}
+{% include_code lang:html dragdrop/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
 
-{% include_code lang:js dragdrop/src/js/app.js %}
+{% include_code lang:js dragdrop/js/app.es6 %}
 
 <p>
   And the following CSS:
 </p>
 
-{% include_code lang:css dragdrop/src/css/app.css %}
+{% include_code lang:css dragdrop/css/app.css %}

website/src/examples/dragdrop/src/html/app.html → website/src/examples/dragdrop/html/app.html

@@ -1,5 +1,5 @@
 <!-- Basic Uppy styles -->
-<link rel="stylesheet" href="dragdrop/static/css/uppy.css">
+<link rel="stylesheet" href="dragdrop/css/uppy.css">
 
 <form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
   <svg class="UppyDragDrop-puppy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 125" enable-background="new 0 0 100 100"><path d="M16.582 21.3L-.085 62.713l32.94 13.295zM99.915 62.714L66.975 76.01 83.25 21.3zM50.917 68.117L62.443 56.59H37.386l11.527 11.526v5.905l-3.063 3.32 1.474 1.36 2.59-2.807 2.59 2.807 1.475-1.358-3.063-3.32zM66.976 41.415c-3.972 0-7.193-3.22-7.193-7.193 0-3.973 3.222-7.193 7.193-7.193 3.974 0 7.193 3.22 7.193 7.192 0 3.973-3.22 7.193-7.194 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.6-1.337-1.338-1.337zM32.854 41.415c-3.973 0-7.193-3.22-7.193-7.193 0-3.973 3.22-7.193 7.194-7.193 3.973 0 7.192 3.22 7.192 7.192 0 3.973-3.22 7.193-7.192 7.193m2.506-11.732c-.738 0-1.337.6-1.337 1.337s.6 1.336 1.337 1.336 1.337-.598 1.337-1.336-.598-1.337-1.337-1.337z"/></svg>

website/src/examples/dropbox.ejs

@@ -12,9 +12,9 @@ Dropbox
 Here you'll see a demo of how you might set up Dropbox with Uppy:
 </p>
 
-<link rel="stylesheet" href="dropbox/src/css/app.css">
-<% include dropbox/src/html/app.html %>
-<script src="dropbox/static/js/app.js"></script>
+<link rel="stylesheet" href="dropbox/css/app.css">
+<% include dropbox/html/app.html %>
+<script src="dropbox/js/app.js"></script>
 
 <hr />
 
@@ -22,16 +22,16 @@ Here you'll see a demo of how you might set up Dropbox with Uppy:
   On this page we're using the following HTML snippet:
 </p>
 
-{% include_code lang:html dropbox/src/html/app.html %}
+{% include_code lang:html dropbox/html/app.html %}
 
 <p>
   Along with this JavaScript:
 </p>
 
-{% include_code lang:js dropbox/src/js/app.js %}
+{% include_code lang:js dropbox/js/app.es6 %}
 
 <p>
   And the following CSS:
 </p>
 
-{% include_code lang:css dropbox/src/css/app.css %}
+{% include_code lang:css dropbox/css/app.css %}

website/src/guide/contributing.md

@@ -137,9 +137,3 @@ For local previews on http://127.0.0.1:4000 type:
 ```bash
 npm run web
 ```
-
-This will start Hexo and rebuilds the site as you save. If you also want to work on examples / Uppy itself you then open a second tab in which you type:
-
-```bash
-npm run watch:examples
-```