react: Rewrite example with `budo`

examples/react-example/App.js

@@ -4,6 +4,8 @@ const Uppy = require('uppy/lib/core')
 const Tus10 = require('uppy/lib/plugins/Tus10')
 const GoogleDrive = require('uppy/lib/plugins/GoogleDrive')
 const DashboardPlugin = require('uppy/lib/plugins/Dashboard')
+const DragDropPlugin = require('uppy/lib/plugins/DragDrop')
+const ProgressBarPlugin = require('uppy/lib/plugins/ProgressBar')
 const { Dashboard, DashboardModal, DragDrop, ProgressBar } = require('uppy/lib/uppy-react')
 
 module.exports = class App extends React.Component {
@@ -21,11 +23,22 @@ module.exports = class App extends React.Component {
   componentWillMount () {
     this.uppy = new Uppy({ autoProceed: false })
       .use(Tus10, { endpoint: 'https://master.tus.io/files' })
+      .use(DashboardPlugin, { inline: true })
+      .use(DragDropPlugin, {
+        locale: {
+          strings: {
+            chooseFile: 'Boop a file',
+            orDragDrop: 'or yoink it here'
+          }
+        }
+      })
+      .use(ProgressBarPlugin)
       .use(GoogleDrive, { target: DashboardPlugin, host: 'https://server.uppy.io' })
       .run()
 
     this.uppy2 = new Uppy({ autoProceed: false })
       .use(Tus10, { endpoint: 'https://master.tus.io/files' })
+      .use(DashboardPlugin)
       .run()
   }
 
@@ -76,15 +89,7 @@ module.exports = class App extends React.Component {
         </div>
 
         <h2>Drag Drop Area</h2>
-        <DragDrop
-          uppy={this.uppy}
-          locale={{
-            strings: {
-              chooseFile: 'Boop a file',
-              orDragDrop: 'or yoink it here'
-            }
-          }}
-        />
+        <DragDrop uppy={this.uppy} />
 
         <h2>Progress Bar</h2>
         <ProgressBar uppy={this.uppy} />

examples/react-example/aliasify.js

@@ -0,0 +1,7 @@
+const path = require('path')
+
+module.exports = {
+  replacements: {
+    '^uppy/lib/(.*?)$': path.join(__dirname, '../../src/$1')
+  }
+}

examples/react-example/package.json

@@ -2,18 +2,17 @@
   "private": true,
   "name": "uppy-react-example",
   "scripts": {
-    "start": "node ./serve.js"
-  },
-  "devDependencies": {
-    "aliasify": "^2.1.0",
-    "babelify": "^7.3.0",
-    "browserify": "^14.4.0",
-    "fs-write-stream-atomic": "^1.0.10"
+    "start": "budo main.js:bundle.js -- -r react:react -r react-dom:react-dom -t babelify -g aliasify"
   },
+  "aliasify": "./aliasify.js",
   "dependencies": {
     "babel-preset-react": "^6.24.1",
-    "ecstatic": "^2.2.1",
     "react": "^15.6.1",
     "react-dom": "^15.6.1"
+  },
+  "devDependencies": {
+    "aliasify": "^2.1.0",
+    "babelify": "^7.3.0",
+    "budo": "^10.0.4"
   }
 }

examples/react-example/serve.js

@@ -1,49 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const http = require('http')
-const ecstatic = require('ecstatic')
-const createWriteStream = require('fs-write-stream-atomic')
-const browserify = require('browserify')
-const watchify = require('watchify')
-const aliasify = require('aliasify')
-const babelify = require('babelify')
-
-const port = process.env.PORT || 8080
-
-const b = browserify({
-  cache: {},
-  packageCache: {},
-  debug: true,
-  entries: path.join(__dirname, './main.js')
-})
-
-b.plugin(watchify)
-
-b.transform(babelify)
-b.transform(aliasify, {
-  global: true,
-  replacements: {
-    '^uppy/lib/(.*?)$': path.join(__dirname, '../../src/$1'),
-    '^react$': require.resolve('react'),
-    '^react-dom$': require.resolve('react-dom')
-  }
-})
-
-function bundle () {
-  return b.bundle()
-    .pipe(createWriteStream(path.join(__dirname, './bundle.js')))
-}
-
-b.on('log', console.log)
-b.on('update', bundle)
-b.on('error', console.error)
-
-bundle()
-
-fs.createReadStream(path.join(__dirname, '../../dist/uppy.min.css'))
-  .pipe(fs.createWriteStream(path.join(__dirname, './uppy.min.css')))
-
-const server = http.createServer(ecstatic({ root: __dirname }))
-server.listen(port, () => {
-  console.log(`Listening on port ${port}`)
-})