Resolving conflict

.travis.yml

@@ -3,12 +3,25 @@ language: node_js
 node_js:
   - 4.2.2
 
+addons:
+  apt:
+    packages:
+    - g++-4.8
+
 script:
   - "npm run-script build"
   - "npm run-script build:examples"
 
-after_script:
-  - "echo 'Tested :)'"
+# Automatically deploy website onto gh-pages (if master and not PR)
+after_success:
+  - git config --global user.name 'Uppy Bot'
+  - git config --global user.email 'uppybot@uppyjs.io'
+  - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && make website-deploy ghpages_url=${GHPAGES_URL}
+
+env:
+  global:
+    # travis encrypt GHPAGES_URL=https://secret_access_token@github.com/transloadit/uppy.git
+    secure: "Z+Twmk8/yo4FbeHqk3TcLVK4fR+KUoevrUxkRM6SLckVeCwlFnoD1kQ4JTVHuS2LbW9r2T4VJ/SC6yDtdjqMRvD/ZtPw//vMw9mKyBEMZN4uxOhmHp4hltkBErqeHbZpgd4eSwSVrqDwliK27Q42wIs+Rjilc3UXqddWEmmw/VuxGR3SRpACILqe2Fqm/g73iX/7PNNASuXwmWi6Vf5ZeBQTGiCfPETblBa4WSCrPpsBv5flUEGNM9uFoXXqjAC2TyZrS4yiFGxJNf5/UPp9xipr+RhoEp8NX2GP0W2jDDfUTHFGfcUyF2lluVJKpkHjYQYrYBknjTFcQHL+aE7GWU7f6kh4g3i6e9qktVFV7yNPPokxuvVG+AxExVhZHK3wBTh2ZWs5vjcd0u5w+IV9+v+d/CZWl/zGRcHDILt2eUW9KZwoGtgrcaPnlVtYPCRBXPpsoD+lE3uOuGGGS/V5lmhBnCLexj+2rzztyb8zhQgZB2rLKF1zQ5JiBE+z0ykjHtZWMECE7r4H8K4hoaeOlIG9suPSgwQgl5HFniFUBzHWXqdsOA/tAwGAtdYSlSNAPrkiMYqXjb+1Je2uhYnfV2roBolufLmgYjmDkpVtaY968Zi3qSYTDX7gkx4NEdkiZDLJK8iXXF5RlcHHaUlno+4ytvcNMpf6V9EpTVeLaIs="
 
 deploy:
   acl              : public_read

ARCHITECTURE.md

@@ -1,70 +0,0 @@
-# Uppy File Uploader Architecture
-
-*Work in progress, API not stable. Last update: 2015-12-03*
-
-## The Gist
-
-``` javascript
-import Uppy from './src/core';
-import { DragDrop, Tus10 } from './src/plugins';
-
-const uppy = new Uppy({wait: false});
-const files = uppy
-  .use(DragDrop, {selector: '#upload-target'})
-  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
-  .run();
-```
-
-## Core
-
-1. Core class `Uppy` accepts global object `options`, and exposes methods like `.use` for adding plugins and `.set` for setting options.
-2. We create a new instance of `Uppy` and call `.use` methods on that, passing the plugins and their options.
-3. Plugins have types: `presetter`, `selecter` and `uploader` (more types could be added in the future). When `use` is called, each plugin’s `run` method is added to an array of corresponding types, `methods`.
-4. Ok, here is the tricky part. Core’s method `run` iterates over plugin types in a waterfall manner — each `runTypes`  runs its `method`s in parallel and returns an array of results (files) to the next plugin type in the waterfall:
-
-![waterfall of parallels](uppy-core-plugins-architecture.jpg)
-
-## Plugins
-
-1. Plugins are registered like this:
-```javascript
-uppy
-  .use(DragDrop, {selector: '#upload-target'})
-  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
-```
-
-Internally, plugins extend from a `UppyPlugin` class, see that for details.
-
-
-2. Settings and handlers are chainable, set like this:
-```javascript
-uppy
-  .set({ wait: true })
-  .use(transloaditModal, {some: 'config'})
-  .use(dragdrop, {target: transloaditModal})
-  .use(instagram, {some: 'config'})
-  .on('progress', handleProgress)
-  .on('error', handleError);
-```
-
-3. In `Uppy` everything is a plugin: a `Modal` dialog, `Drag & Drop`, `Instagram`. We borrow general approach from the new Babel and PostCSS — each chunk of functionality exists as separate plugin — easier to pick and choose exactly what you need to get a lightweight solution for production, while also easier to develop and avoid merge conflicts.
-
-4. There will be a simplified version that includes all the necessary plugins and sane defaults.
-```javascript
-uppyDist
-  .set({ wait: true })
-  .run();
-```
-
-5. Users should be able to set themes and style settings in config: `.use(myTheme)`.
-
-6. Would be cool if you could use whatever drag & drop library you wanted (DropZone) with our wrapper.
-
-## References & Inspiration
-
-1. [PostCSS](https://github.com/postcss/postcss/blob/master/lib/postcss.es6#L19)
-2. [Markdown-It](https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L459)
-3. [Babel](babeljs.io)
-4. [Lodash](https://lodash.com/)
-5. [Vue.js](http://vuejs.org/guide/plugins.html#Using_a_Plugin)
-6. [Tus.js](https://github.com/tus/tus-js-client)

CONTRIBUTING.md

@@ -1,25 +1,31 @@
 # Contributing Guidelines
 
 ## CSS Guidelines
+
 The CSS standards followed in this project closely resemble those from [Medium's CSS Guidelines](https://gist.github.com/fat/a47b882eb5f84293c4ed). If it's not mentioned here, follow their guidelines.
 
 ### Naming Conventions
+
 This project uses naming conventions adopted from the SUIT CSS framework. 
 [Read about them here](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md).
 
 To quickly summarize:
 
 #### Utilities
+
 Syntax: u-[sm-|md-|lg-]<utilityName>
-```
+
+```css
 .u-utilityName
 .u-floatLeft
 .u-lg-col6
 ```
 
 #### Components
+
 Syntax: [<namespace>-]<ComponentName>[-descendentName][--modifierName]
-```
+
+```css
 .twt-Button /* Namespaced component */
 .MyComponent /* Components pascal cased */
 .Button--default /* Modified button style */
@@ -34,35 +40,38 @@ Syntax: [<namespace>-]<ComponentName>[-descendentName][--modifierName]
 ```
 
 ### SASS
-This project uses SASS, with some limitations on nesting.  One-level deep nesting is allowed, but nesting may not extend a selector by using the `&` operator.  For example:
 
-```
-  /* BAD */
-  .Button {
-    &--disabled {
-      ...
-    }
-  }
+This project uses SASS, with some limitations on nesting.  One-level deep nesting is allowed, but nesting may not extend a selector by using the `&` operator.  For example:
 
-  /* GOOD */
-  .Button {
+```sass
+/* BAD */
+.Button {
+  &--disabled {
     ...
   }
+}
 
-  .Button--disabled {
-    ...
-  }
+/* GOOD */
+.Button {
+  ...
+}
+
+.Button--disabled {
+  ...
+}
 ```
 
 ### Mobile-first Responsive Approach
+
 Style to the mobile breakpoint with your selectors, then use `min-width` media queries to add any styles to the tablet or desktop breakpoints.
 
 ### Selector, Rule Ordering
+
 - All selectors are sorted alphabetically and by type.
 - HTML elements go above classes and IDs in a file.
 - Rules are sorted alphabetically.
 
-```
+```sass
 /* BAD */
 .wrapper {
   width: 940px;
@@ -91,4 +100,4 @@ h1 {
 .wrapper {
   margin: auto;
   width: 940px;
-}
+}

Makefile

@@ -1,11 +1,7 @@
 SHELL          := /usr/bin/env bash
 ghpages_repo   := "transloadit/uppy"
 ghpages_branch := "gh-pages"
-
-.PHONY: pull
-pull:
-	@echo "--> Running pull.."
-	@git pull
+ghpages_url    := "git@github.com:$(ghpages_repo).git"
 
 .PHONY: website-install
 website-install:
@@ -13,17 +9,18 @@ website-install:
 	@cd website && npm install
 
 .PHONY: website-build
-website-build:
+website-build: website-install
 	@echo "--> Building site.."
+	@cd website && node update.js
 	@cd website && ./node_modules/.bin/hexo generate
 
 .PHONY: website-preview
-website-preview: website-install website-build
+website-preview: website-build
 	@echo "--> Running preview.."
 	@cd website && ./node_modules/.bin/hexo server
 
 .PHONY: website-deploy
-website-deploy: pull website-build
+website-deploy: website-build
 	@echo "--> Deploying to GitHub pages.."
 	@mkdir -p /tmp/deploy-$(ghpages_repo)
 
@@ -46,8 +43,8 @@ website-deploy: pull website-build
 
 	@cd /tmp/deploy-$(ghpages_repo) \
 	  && git init && git checkout -B $(ghpages_branch) && git add --all . \
-	  && git commit -nm "Update $(ghpages_repo) _site by $${USER}" \
-	  && (git remote add origin git@github.com:$(ghpages_repo).git || true)  \
+	  && git commit -nm "Update $(ghpages_repo) website by $${USER}" \
+	  && (git remote add origin $(ghpages_url)|| true)  \
 	  && git push origin $(ghpages_branch):refs/heads/$(ghpages_branch) --force
 
 	@rm -rf /tmp/deploy-$(ghpages_repo)

README.md

@@ -2,19 +2,6 @@
 
 A work in progress - nothing to see here.
 
-## Design Goals
- 
- - Support for IE10+?? (decide what our entry level IE is, it's okay to have a cut-off if that results in a more focused higher quality codebase. older browsers will need to opt for our jquery-sdk)
- - Lightweight / easy on dependencies
- - tus.io enabled
- - ES6
- - Robust (retries / resumes for *all the things*), avoid showing 'weird errors'
- - Themable UI with a beautiful default
- - Compatible with React (Native)
- - Should work great on mobile
- - Small core, modular plugin architecture for everything: (modal / dragdrop / themes/ webcam / google drive / dropbox / etc)
- - Offering sugared shortcuts for novice users (presets)
-
 Check [open issues](https://github.com/transloadit/uppy/milestones/Minimum%20Viable%20Product) for our Minimum Viable Product. 
 
 ## Uppy Development
@@ -38,23 +25,22 @@ directory using a simple static http server.
 
 ## Website Development
 
-We keep the [uppyjs.io](http://uppyjs.io) website in `./website` for now so it's very easy to keep docs & code in sync as we're still 
-iterating at high velocity.
+We keep the [uppyjs.io](http://uppyjs.io) website in `./website` for so it's easy to keep docs & code in sync as we're still iterating at high velocity. For those reading this and screaming murder, [HashiCorp does this](https://github.com/hashicorp/terraform/tree/master/website) for all their projects, and it working well for them on a scale vastly more impressive than ours.
+
+The site is built with [Hexo](http://hexo.io/), and Travis automatically deploys this onto GitHub Pages (it overwrites the [`gh-pages`](https://github.com/transloadit/uppy/tree/gh-pages) branch at every deploy).
 
-This site is built with [hexo](http://hexo.io/). And deployed onto GitHub pages (`gh-pages` branch is of the `uppy` repo is overrwitten at every deploy. Site content is written in Markdown format located in `./website/src`. Pull requests welcome!
+Content is written in Markdown and located in `./website/src`. Pull requests welcome!
   
-The website is currently a clone of Yuxi Evan You's [Vue.js](http://vuejs.org/) website ([view license](website/LICENSE)) - just so we can hit the ground rolling in terms of setting up Haxo etc. Obviously as soon as possible, we should start rolling out our own layout & content.
+> The website is currently a clone of Yuxi Evan You's [Vue.js](http://vuejs.org/) website ([view license](website/LICENSE)) - just so we can hit the ground rolling in terms of setting up Haxo etc. Obviously as soon as possible, we should start rolling out our own layout & content.
 
-For local previews on `localhost:4000` type:
+`./website/update.js` is called during website builds to inject the Uppy versions & filesizes into the documentation. `website` in an independent folder and so it cannot rely on anything from the root project, without `update.js` explicitly making it available (copying).
 
-```bash
-make website-preview
-```
+It's recommended to exclude `./website/public/` from your editor if you want efficient searches.
 
-To deploy your work type
+For local previews on `http://127.0.0.1:4000` type:
 
 ```bash
-make website-deploy
+make website-preview
 ```
 
 ## FAQ

website/_config.yml

@@ -3,12 +3,20 @@
 ## Source: https://github.com/tommy351/hexo/
 
 # Site
-title: Uppy.js
-subtitle:
-description: "Almost as cute as a puppy"
+title: Uppy
+subtitle: "Almost as cute as a puppy"
+logo_large: /images/cute-puppy-2.png
+logo_medium: /images/dog-172.png
+logo_icon: /images/emojis/dog.png
+description: >
+  Uppy is (going to be) an uploader written in ES6 JavaScript with a plugin-based architecture, making
+  it very extensible. Out of the box it supports tapping into Dropbox, Instagram, Local files. It
+  has support for resumable file uploads via tus.io, and adding encoding backends.
+  Uppy is brought to you by the people behind Transloadit and as such has first class
+  support for adding their uploading and encoding backend, but this is opt-in.
 author: Transloadit
-email:
-language:
+email: uppybot@uppyjs.io
+language: English
 
 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uppyjs.io",
-  "version": "0.12.4",
+  "version": "0.0.1",
   "private": true,
   "hexo": {
     "version": "3.1.1"

website/src/_data/design_goals.yml

@@ -0,0 +1,10 @@
+ - "Support for IE10+?? (decide what our entry level IE is, it's okay to have a cut-off if that results in a more focused higher quality codebase. older browsers will need to opt for our jquery-sdk)"
+ - "Lightweight / easy on dependencies"
+ - "tus.io enabled"
+ - "ES6"
+ - "Robust (retries / resumes for all the things), avoid showing 'weird errors'"
+ - "Themable UI with a beautiful default"
+ - "Compatible with React (Native)"
+ - "Works great on mobile"
+ - "Small core, modular plugin architecture for everything: (modal / dragdrop / themes/ webcam / google drive / dropbox / etc)"
+ - "Offering sugared shortcuts for novice users (presets)"

website/src/_data/features.yml

@@ -0,0 +1,18 @@
+- title      : Simple
+  icon       : simple
+  description: You can support complex workflows by refering to existing presets in just a few lines of code.
+- title      : Presets
+  icon       : powerful
+  description: Resumable file uploads. Is there any other way? Thanks to tus.io.
+- title      : Plugins
+  icon       : composable
+  description: Every feature in Puppy is available as a plugin. It's easy to use some, none, or roll your own.
+- title      : Compact
+  icon       : compact
+  description: ~10kb min+gzip, no dependencies.
+- title      : Fast
+  icon       : fast
+  description: Parallel uploading and handling of files
+- title      : Package Ready
+  icon       : module
+  description: Install via NPM our include directly form our CDN!

website/src/_data/plugins.yml

@@ -0,0 +1,6 @@
+dragdrop:
+  title      : Drag & Drop
+  official   : true
+  type       : selecter
+  url        : https://github.com/transloadit/uppy/blob/master/src/plugins/DragDrop.js
+  description: The official Drag & Drop plugin for Uppy.

website/src/_posts/hello-world.md

@@ -1,7 +1,13 @@
 ---
-title: Hello world
-date: 2014-12-08 15:02:14
+title: Hello, world
+date: 2015-11-27 15:02:14
 tags:
 ---
 
-Hi
+Hello, world! We're building a new open source javascript file uploader with integrations for ALL THE THINGS.
+
+It's nowhere near finished yet, but that also means it's not to late to get involved and help steer this project
+
+into a direction of your liking!
+
+Shoot us a [tweet](https://twitter.com/uppyjs) if you're interested!

website/src/api/generated-api-docs.md

@@ -0,0 +1,27 @@
+---
+type: api
+order: 1
+title: "Generated API Docs"
+---
+
+## Core
+
+### constructor
+
+### use
+
+### bla
+
+### bla
+
+## Dropbox Plugin
+
+### constructor
+
+### use
+
+### bla
+
+### bla
+
+This should be generated.

website/src/api/index.md

@@ -1,2152 +1,76 @@
 ---
 type: api
+order: 0
+title: "Architecture"
 ---
 
-## Global Config
+# Uppy File Uploader Architecture
 
-`Uppy.config` is an object containing Uppy's global configurations. You can modify its properties listed below before bootstrapping your application:
+*Work in progress, API not stable. Last update: 2015-12-03*
 
-### debug
+## The Gist
 
-- **Type:** `Boolean`
+``` javascript
+import Uppy from './src/core';
+import { DragDrop, Tus10 } from './src/plugins';
 
-- **Default:** `false`
+const uppy = new Uppy({wait: false});
+const files = uppy
+  .use(DragDrop, {selector: '#upload-target'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+  .run();
+```
 
-- **Usage:**
+## Core
 
-  ``` js
-  Uppy.config.debug = true
-  ```
+1. Core class `Uppy` accepts global object `options`, and exposes methods like `.use` for adding plugins and `.set` for setting options.
+2. We create a new instance of `Uppy` and call `.use` methods on that, passing the plugins and their options.
+3. Plugins have types: `presetter`, `selecter` and `uploader` (more types could be added in the future). When `use` is called, each plugin’s `run` method is added to an array of corresponding types, `methods`.
+4. Ok, here is the tricky part. Core’s method `run` iterates over plugin types in a waterfall manner — each `runTypes`  runs its `method`s in parallel and returns an array of results (files) to the next plugin type in the waterfall:
 
-  When in debug mode, Uppy will:
+![waterfall of parallels](uppy-core-plugins-architecture.jpg)
 
-  1. Print stack traces for all warnings.
+## Plugins
 
-  2. Make all anchor nodes visible in the DOM as Comment nodes. This makes it easier to inspect the structure of the rendered result.
+1. Plugins are registered like this:
+```javascript
+uppy
+  .use(DragDrop, {selector: '#upload-target'})
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
+```
 
-  <p class="tip">Debug mode is only available in development build.</p>
+Internally, plugins extend from a `UppyPlugin` class, see that for details.
 
-### delimiters
 
-- **Type:** `Array<String>`
+2. Settings and handlers are chainable, set like this:
+```javascript
+uppy
+  .set({ wait: true })
+  .use(transloaditModal, {some: 'config'})
+  .use(dragdrop, {target: transloaditModal})
+  .use(instagram, {some: 'config'})
+  .on('progress', handleProgress)
+  .on('error', handleError);
+```
 
-- **Default:** `{% raw %}["{{", "}}"]{% endraw %}`
+3. In `Uppy` everything is a plugin: a `Modal` dialog, `Drag & Drop`, `Instagram`. We borrow general approach from the new Babel and PostCSS — each chunk of functionality exists as separate plugin — easier to pick and choose exactly what you need to get a lightweight solution for production, while also easier to develop and avoid merge conflicts.
 
-- **Usage:**
+4. There will be a simplified version that includes all the necessary plugins and sane defaults.
+```javascript
+uppyDist
+  .set({ wait: true })
+  .run();
+```
 
-  ``` js
-  // ES6 template string style
-  Uppy.config.delimiters = ['${', '}']
-  ```
+5. Users should be able to set themes and style settings in config: `.use(myTheme)`.
 
-  Change the plain text interpolation delimiters.
+6. Would be cool if you could use whatever drag & drop library you wanted (DropZone) with our wrapper.
 
-### unsafeDelimiters
+## References & Inspiration
 
-- **Type:** `Array<String>`
-
-- **Default:** `{% raw %}["{{{", "}}}"]{% endraw %}`
-
-- **Usage:**
-
-  ``` js
-  // make it look more dangerous
-  Uppy.config.unsafeDelimiters = ['{!!', '!!}']
-  ```
-
-  Change the raw HTML interpolation delimiters.
-
-### silent
-
-- **Type:** `Boolean`
-
-- **Default:** `false`
-
-- **Usage:**
-
-  ``` js
-  Uppy.config.silent = true
-  ```
-
-  Suppress all Uppy.js logs and warnings.
-
-### async
-
-- **Type:** `Boolean`
-
-- **Default:** `true`
-
-- **Usage:**
-
-  ``` js
-  Uppy.config.async = false
-  ```
-
-  When async mode is off, Uppy will perform all DOM updates synchronously upon detecting data change. This may help with debugging in some scenarios, but could also cause degraded performance and affect the order in which watcher callbacks are called. **`async: false` is not recommended in production.**
-
-### convertAllProperties
-
-- **Type:** `Boolean`
-
-- **Default:** `false`
-
-- **Usage:**
-  
-  ``` js
-  Uppy.config.convertAllProperties = true
-  ```
-
-  (Added in 1.0.8) Turning this option on will enable Uppy to convert and observe objects that already contain getters/setters defined with `Object.defineProperty`. This is off by default because there is a small performance cost and this is not a commonly-needed feature.
-
-## Global API
-
-### Uppy.extend( options )
-
-- **Arguments:**
-  - `{Object} options`
-
-- **Usage:**
-
-  Create a "subclass" of the base Uppy constructor. The argument should be an object containing component options.
-
-  The special cases to note here are `el` and `data` options - they must be functions when used with `Uppy.extend()`.
-
-  ``` html
-  <div id="mount-point"></div>
-  ```
-
-  ``` js
-  // create reusable constructor
-  var Profile = Uppy.extend({
-    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>'
-  })
-  // create an instance of Profile
-  var profile = new Profile({
-    data: {
-      firstName: 'Walter',
-      lastName: 'White',
-      alias: 'Heisenberg'
-    }  
-  })
-  // mount it on an element
-  profile.$mount('#mount-point')
-  ```
-
-  Will result in:
-
-  ``` html
-  <p>Walter White aka Heisenberg</p>
-  ```
-
-- **See also:** [Components](/guide/components.html)
-
-### Uppy.nextTick( callback )
-
-- **Arguments:**
-  - `{Functon} callback`
-
-- **Usage:**
-
-  Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update.
-
-  ``` js
-  // modify data
-  vm.msg = 'Hello'
-  // DOM not updated yet
-  Uppy.nextTick(function () {
-    // DOM updated
-  })
-  ```
-
-- **See also:** [Async Update Queue](/guide/reactivity.html#Async_Update_Queue)
-
-### Uppy.set( object, key, value )
-
-- **Arguments:**
-  - `{Object} object`
-  - `{String} key`
-  - `{*} value`
-
-- **Usage:**
-
-  Set a property on an object. If the object is reactive, ensure the property is created as a reactive property and trigger view updates. This is primarily used to get around the limitation that Uppy cannot detect property additions.
-
-- **See also:** [Reactivity in Depth](/guide/reactivity.html)
-
-### Uppy.delete( object, key )
-
-- **Arguments:**
-  - `{Object} object`
-  - `{String} key`
-
-- **Usage:**
-
-  Delete a property on an object. If the object is reactive, ensure the deletion triggers view updates. This is primarily used to get around the limitation that Uppy cannot detect property deletions, but you should rarely need to use it.
-
-- **See also:** [Reactivity in Depth](/guide/reactivity.html)
-
-### Uppy.directive( id, [definition] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{Function | Object} [definition]`
-
-- **Usage:**
-  
-  Register or retrieve a global directive.
-
-  ``` js
-  // register
-  Uppy.directive('my-directive', {
-    bind: function () {},
-    update: function () {},
-    unbind: function () {}
-  })
-
-  // register (simple function directive)
-  Uppy.directive('my-directive', function () {
-    // this will be called as `update`
-  })
-
-  // getter, return the directive definition if registered
-  var myDirective = Uppy.directive('my-directive')
-  ```
-
-- **See also:** [Custom Directives](/guide/custom-directive.html)
-
-### Uppy.elementDirective( id, [definition] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{Object} [definition]`
-
-- **Usage:**
-
-  Register or retrieve a global element directive.
-
-  ``` js
-  // register
-  Uppy.elementDirective('my-element', {
-    bind: function () {},
-    // element directives do not use `update`
-    unbind: function () {}
-  })
-
-  // getter, return the directive definition if registered
-  var myDirective = Uppy.elementDirective('my-element')
-  ```
-
-- **See also:** [Element Directives](/guide/custom-directive.html#Element_Directives)
-
-### Uppy.filter( id, [definition] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{Function | Object} [definition]`
-
-- **Usage:**
-
-  Register or retrieve a global filter.
-
-  ``` js
-  // register
-  Uppy.filter('my-filter', function (value) {
-    // return processed value
-  })
-
-  // two way filter
-  Uppy.filter('my-filter', {
-    read: function () {},
-    write: function () {}
-  })
-
-  // getter, return the filter if registered
-  var myFilter = Uppy.filter('my-filter')
-  ```
-
-- **See also:** [Custom Filter](/guide/custom-filter.html)
-
-### Uppy.component( id, [definition] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{Function | Object} [definition]`
-
-- **Usage:**
-
-  Register or retrieve a global component.
-
-  ``` js
-  // register an extended constructor
-  Uppy.component('my-component', Uppy.extend({ /* ... */}))
-
-  // register an options object (automatically call Uppy.extend)
-  Uppy.component('my-component', { /* ... */ })
-
-  // retrive a registered component (always return constructor)
-  var MyComponent = Uppy.component('my-component')
-  ```
-
-- **See also:** [Components](/guide/components.html).
-
-### Uppy.transition( id, [hooks] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{Object} [hooks]`
-
-- **Usage:**
-
-  Register or retrieve a global transition hooks object.
-
-  ``` js
-  // register
-  Uppy.transition('fade', {
-    enter: function () {},
-    leave: function () {}
-  })
-
-  // retrieve registered hooks
-  var fadeTransition = Uppy.transition('fade')
-  ```
-
-- **See also:** [Transitions](/guide/transitions.html).
-
-### Uppy.partial( id, [partial] )
-
-- **Arguments:**
-  - `{String} id`
-  - `{String} [partial]`
-
-- **Usage:**
-
-  Register or retrieve a global template partial string.
-
-  ``` js
-  // register
-  Uppy.partial('my-partial', '<div>Hi</div>')
-
-  // retrieve registered partial
-  var myPartial = Uppy.partial('my-partial')
-  ```
-
-- **See also:** [Special Elements - &lt;partial&gt;](#partial).
-
-### Uppy.use( plugin, [options] )
-
-- **Arguments:**
-  - `{Object | Function} plugin`
-  - `{Object} [options]`
-
-- **Usage:**
-
-  Install a Uppy.js plugin. If the plugin is an Object, it must expose an `install` method. If it is a function itself, it will be treated as the install method. The install method will be called with Uppy as the argument.
-
-- **See also:** [Plugins](/guide/plugins.html).
-
-### Uppy.mixin( mixin )
-
-- **Arguments:**
-  - `{Object} mixin`
-
-- **Usage:**
-
-  Apply a mixin globally, which affects every Uppy instance created afterwards. This can be used by plugin authors to inject custom behavior into components. **Not recommended in application code**.
-
-- **See also:** [Global Mixins](/guide/mixins.html#Global_Mixin)
-
-## Options / Data
-
-### data
-
-- **Type:** `Object | Function`
-
-- **Restriction:** Only accepts `Function` when used in `Uppy.extend()`.
-
-- **Details:**
-
-  The data object for the Uppy instance. Uppy.js will recursively convert its properties into getter/setters to make it "reactive". **The object must be plain**: native objects, existing getter/setters and prototype properties are ignored. It is not recommended to observe complex objects.
-
-  Once the instance is created, the original data object can be accessed as `vm.$data`. The Uppy instance also proxies all the properties found on the data object.
-
-  Properties that start with `_` or `$` will **not** be proxied on the Uppy instance because they may conflict with Uppy's internal properties and API methods. You will have to access them as `vm.$data._property`.
-
-  If required, a deep clone of the original object can be obtained by passing `vm.$data` through `JSON.parse(JSON.stringify(...))`.
-
-- **Example:**
-
-  ``` js
-  var data = { a: 1 }
-
-  // direct instance creation
-  var vm = new Uppy({
-    data: data
-  })
-  vm.a // -> 1
-  vm.$data === data // -> true
-
-  // must use function when in Uppy.extend()
-  var Component = Uppy.extend({
-    data: function () {
-      return { a: 1 }
-    }
-  })
-  ```
-
-- **See also:** [Reactivity in Depth](/guide/reactivity.html).
-
-### props
-
-- **Type:** `Array | Object`
-
-- **Details:**
-
-  A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values.
-
-- **Example:**
-
-  ``` js
-  // simple syntax
-  Uppy.component('props-demo-simple', {
-    props: ['size', 'myMessage']
-  })
-
-  // object syntax with validation
-  Uppy.component('props-demo-advanced', {
-    props: {
-      // just type check
-      size: Number,
-      // type check plus other validations
-      name: {
-        type: String,
-        required: true
-      }
-    }
-  })
-  ```
-
-- **See also:** [Props](/guide/components.html#Props)
-
-### computed
-
-- **Type:** `Object`
-
-- **Details:**
-
-  Computed properties to be mixed into the Uppy instance. All getters and setters have their `this` context automatically bound to the Uppy instance.
-
-- **Example:**
-
-  ```js
-  var vm = new Uppy({
-    data: { a: 1 },
-    computed: {
-      // get only, just need a function
-      aDouble: function () {
-        return this.a * 2
-      },
-      // both get and set
-      aPlus: {
-        get: function () {
-          return this.a + 1
-        },
-        set: function (v) {
-          this.a = v - 1
-        }
-      }
-    }
-  })
-  vm.aPlus   // -> 2
-  vm.aPlus = 3
-  vm.a       // -> 2
-  vm.aDouble // -> 4
-  ```
-
-- **See also:**
-  - [Computed Properties](/guide/computed.html)
-  - [Reactivity in Depth: Inside Computed Properties](/guide/reactivity.html#Inside_Computed_Properties)
-
-### methods
-
-- **Type:** `Object`
-
-- **Details:**
-
-  Methods to be mixed into the Uppy instance. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their `this` context automatically bound to the Uppy instance.
-
-- **Example:**
-
-  ```js
-  var vm = new Uppy({
-    data: { a: 1 },
-    methods: {
-      plus: function () {
-        this.a++
-      }
-    }
-  })
-  vm.plus()
-  vm.a // 2
-  ```
-
-- **See also:** [Methods and Event Handling](/guide/events.html)
-
-### watch
-
-- **Type:** `Object`
-
-- **Details:**
-
-  An object where keys are expressions to watch and values are the corresponding callbacks. The value can also be a string of a method name, or an Object that contains additional options. The Uppy instance will call `$watch()` for each entry in the object at instantiation.
-
-- **Example:**
-
-  ``` js
-  var vm = new Uppy({
-    data: {
-      a: 1
-    },
-    watch: {
-      'a': function (val, oldVal) {
-        console.log('new: %s, old: %s', val, oldVal)
-      },
-      // string method name
-      'b': 'someMethod',
-      // deep watcher
-      'c': {
-        handler: function (val, oldVal) { /* ... */ },
-        deep: true
-      }
-    }
-  })
-  vm.a = 2 // -> new: 2, old: 1
-  ```
-
-- **See also:** [Instance Methods - vm.$watch](#vm-watch)
-
-## Options / DOM
-
-### el
-
-- **Type:** `String | HTMLElement | Function`
-
-- **Restriction:** only accepts type `Function` when used in `Uppy.extend()`.
-
-- **Details:**
-
-  Provide the Uppy instance an existing DOM element to mount on. It can be a CSS selector string, an actual HTMLElement, or a function that returns an HTMLElement. Note that the provided element merely serves as a mounting point; it will be replaced if a template is also provided, unless `replace` is set to false. The resolved element will be accessible as `vm.$el`.
-
-  When used in `Uppy.extend`, a function must be provided so each instance gets a separately created element.
-
-  If this option is available at instantiation, the instance will immediately enter compilation; otherwise, the user will have to explicitly call `vm.$mount()` to manually start the compilation.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### template
-
-- **Type:** `String`
-
-- **Details:**
-
-  A string template to be used as the markup for the Uppy instance. By default, the template will **replace** the mounted element. When the `replace` option is set to `false`, the template will be inserted into the mounted element instead. In both cases, any existing markup inside the mounted element will be ignored, unless content distribution slots are present in the template.
-
-  If the string starts with `#` it will be used as a querySelector and use the selected element's innerHTML as the template string. This allows the use of the common `<script type="x-template">` trick to include templates.
-
-  Note that under certain situations, for example when the template contains more than one top-level element, or contains only plain text, the instance will become a fragment instance - i.e. one that manages a list of nodes rather than a single node. Non flow-control directives on the mount point for fragment instances are ignored.
-
-- **See also:**
-  - [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-  - [Content Distribution](/guide/components.html#Content_Distribution_with_Slots)
-  - [Fragment Instance](/guide/components.html#Fragment_Instance)
-
-### replace
-
-- **Type:** `Boolean`  
-
-- **Default:** `true`
-
-- **Restriction:** only respected if the **template** option is also present.
-
-- **Details:**
-
-  Determines whether to replace the element being mounted on with the template. If set to `false`, the template will overwrite the element's inner content without replacing the element itself.
-
-- **Example**:
-
-  ``` html
-  <div id="replace"></div>
-  ```
-
-  ``` js
-  new Uppy({
-    el: '#replace',
-    template: '<p>replaced</p>'
-  })
-  ```
-
-  Will result in:
-
-  ``` html
-  <p>replaced</p>
-  ```
-
-  In comparison, when `replace` is set to `false`:
-
-  ``` html
-  <div id="insert"></div>
-  ```
-
-  ``` js
-  new Uppy({
-    el: '#insert',
-    replace: false,
-    template: '<p>inserted</p>'
-  })
-  ```
-
-  Will result in:
-
-  ``` html
-  <div id="insert">
-    <p>inserted</p>
-  </div>
-  ```
-
-## Options / Lifecycle Hooks
-
-### created
-
-- **Type:** `Function`
-
-- **Details:**
-  
-  Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, DOM compilation has not been started, and the `$el` property will not be available yet.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### beforeCompile
-
-- **Type:** `Function`
-
-- **Details:**
-  
-  Called right before the compilation starts.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### compiled
-
-- **Type:** `Function`
-
-- **Details:**
-
-  Called after the compilation is finished. At this stage all directives have been linked so data changes will trigger DOM updates. However, `$el` is not guaranteed to have been inserted into the document yet.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### ready
-
-- **Type:** `Function`
-
-- **Details:**
-
-  Called after compilation **and** the `$el` is **inserted into the document for the first time**, i.e. right after the first `attached` hook. Note this insertion must be executed via Uppy (with methods like `vm.$appendTo()` or as a result of a directive update) to trigger the `ready` hook.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### attached
-
-- **Type:** `Function`
-
-- **Details:**
-  
-  Called when `vm.$el` is attached to DOM by a directive or a VM instance method such as `$appendTo()`. Direct manipulation of `vm.$el` will **not** trigger this hook.
-
-### detached
-
-- **Type:** `Function`
-
-- **Details:**
-  
-  Called when `vm.$el` is removed from the DOM by a directive or a VM instance method. Direct manipulation of `vm.$el` will **not** trigger this hook.
-
-### beforeDestroy
-
-- **Type:** `Function`
-
-- **Details:**
-  
-  Called right before a Uppy instance is destroyed. At this stage the instance is still fully functional.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### destroyed
-
-- **Type:** `Function`
-
-- **Details:**
-
-  Called after a Uppy instance has been destroyed. When this hook is called, all bindings and directives of the Uppy instance have been unbound and all child Uppy instances have also been destroyed.
-
-  Note if there is a leaving transition, the `destroyed` hook is called **after** the transition has finished.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-## Options / Assets
-
-### directives
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of directives to be made available to the Uppy instance.
-
-- **See also:**
-  - [Custom Directives](/guide/custom-directive.html)
-  - [Assets Naming Convention](/guide/components.html#Assets_Naming_Convention)
-
-### elementDirectives
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of element directives to be made available to the Uppy instance.
-
-- **See also:**
-  - [Element Directives](/guide/custom-directive.html#Element_Directives)
-  - [Assets Naming Convention](/guide/components.html#Assets_Naming_Convention)
-
-### filters
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of filters to be made available to the Uppy instance.
-
-- **See also:**
-  - [Custom Filters](/guide/custom-filter.html)
-  - [Assets Naming Convention](/guide/components.html#Assets_Naming_Convention)
-
-### components
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of components to be made available to the Uppy instance.
-
-- **See also:**
-  - [Components](/guide/components.html)
-
-### transitions
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of transitions to be made available to the Uppy instance.
-
-- **See also:**
-  - [Transitions](/guide/transitions.html)
-
-### partials
-
-- **Type:** `Object`
-
-- **Details:**
-
-  A hash of partial strings to be made available to the Uppy instance.
-
-- **See also:**
-  - [Special Elements - partial](#partial)
-
-## Options / Misc
-
-### parent
-
-- **Type:** `Uppy instance`
-
-- **Details:**
-
-  Specify the parent instance for the instance to be created. Establishes a parent-child relationship between the two. The parent will be accessible as `this.$parent` for the child, and the child will be pushed into the parent's `$children` array.
-
-- **See also:** [Parent-Child Communication](/guide/components.html#Parent-Child_Communication)
-
-### events
-
-- **Type:** `Object`
-
-- **Details:**
-
-  An object where keys are events to listen for and values are the corresponding callbacks. Note these are Uppy events rather than DOM events. The value can also be a string of a method name. The Uppy instance will call `$on()` for each entry in the object at instantiation.
-
-- **Example:**
-
-  ``` js
-  var vm = new Uppy({
-    events: {
-      'hook:created': function () {
-        console.log('created!')
-      },
-      greeting: function (msg) {
-        console.log(msg)
-      },
-      // can also use a string for methods
-      bye: 'sayGoodbye'
-    },
-    methods: {
-      sayGoodbye: function () {
-        console.log('goodbye!')
-      }
-    }
-  }) // -> created!
-  vm.$emit('greeting', 'hi!') // -> hi!
-  vm.$emit('bye')             // -> goodbye!
-  ```
-
-- **See also:**
-  - [Instance Methods - Events](#Instance_Methods_/_Events)
-  - [Parent-Child Communication](/guide/components.html#Parent-Child_Communication)
-
-### mixins
-
-- **Type:** `Array`
-
-- **Details:**
-
-  The `mixins` option accepts an array of mixin objects. These mixin objects can contain instance options just like normal instance objects, and they will be merged against the eventual options using the same option merging logic in `Uppy.extend()`. e.g. If your mixin contains a created hook and the component itself also has one, both functions will be called.
-
-  Mixin hooks are called in the order they are provided, and called before the component's own hooks.
-
-- **Example:**
-
-  ``` js
-  var mixin = {
-    created: function () { console.log(1) }
-  }
-  var vm = new Uppy({
-    created: function () { console.log(2) },
-    mixins: [mixin]
-  })
-  // -> 1
-  // -> 2
-  ```
-
-- **See also:** [Mixins](/guide/mixins.html)
-
-### name
-
-- **Type:** `String`
-
-- **Restriction:** only respected when used in `Uppy.extend()`.
-
-- **Details:**
-
-  Allow the component to recursively invoke itself in its template. Note that when a component is registered globally with `Uppy.component()`, the global ID is automatically set as its name.
-
-  Another benefit of specifying a `name` option is console inspection. When inspecting an extended Uppy component in the console, the default constructor name is `VueComponent`, which isn't very informative. By passing in an optional `name` option to `Uppy.extend()`, you will get a better inspection output so that you know which component you are looking at. The string will be camelized and used as the component's constructor name.
-
-- **Example:**
-
-  ``` js
-  var Ctor = Uppy.extend({
-    name: 'stack-overflow',
-    template:
-      '<div>' +
-        // recursively invoke self
-        '<stack-overflow></stack-overflow>' +
-      '</div>'
-  })
-
-  // this will actually result in a max stack size exceeded
-  // error, but let's assume it works...
-  var vm = new Ctor()
-
-  console.log(vm) // -> StackOverflow {$el: null, ...}
-  ```
-
-## Instance Properties
-
-### vm.$data
-
-- **Type:** `Object`
-
-- **Details:**
-
-  The data object that the Uppy instance is observing. You can swap it with a new object. The Uppy instance proxies access to the properties on its data object.
-
-### vm.$el
-
-- **Type:** `HTMLElement`
-
-- **Read only**
-
-- **Details:**
-
-  The DOM element that the Uppy instance is managing. Note that for [Fragment Instances](/guide/components.html#Fragment_Instance), `vm.$el` will return an anchor node that indicates the starting position of the fragment.
-
-### vm.$options
-
-- **Type:** `Object`
-
-- **Read only**
-
-- **Details:**
-
-  The instantiation options used for the current Uppy instance. This is useful when you want to include custom properties in the options:
-
-  ``` js
-  new Uppy({
-    customOption: 'foo',
-    created: function () {
-      console.log(this.$options.customOption) // -> 'foo'
-    }
-  })
-  ```
-
-### vm.$parent
-
-- **Type:** `Uppy instance`
-
-- **Read only**
-
-- **Details:**
-
-  The parent instance, if the current instance has one.
-
-### vm.$root
-
-- **Type:** `Uppy instance`
-
-- **Read only**
-
-- **Details:**
-
-  The root Uppy instance of the current component tree. If the current instance has no parents this value will be itself.
-
-### vm.$children
-
-- **Type:** `Array<Uppy instance>`
-
-- **Read only**
-
-- **Details:**
-
-  The direct child components of the current instance.
-
-### vm.$refs
-
-- **Type:** `Object`
-
-- **Read only**
-
-- **Details:**
-
-  An object that holds child components that have `v-ref` registered.
-
-- **See also:**
-  - [Child Component Refs](/guide/components.html#Child_Component_Refs)
-  - [v-ref](#v-ref).
-
-### vm.$els
-
-- **Type:** `Object`
-
-- **Read only**
-
-- **Details:**
-
-  An object that holds DOM elements that have `v-el` registered.
-
-- **See also:** [v-el](#v-el).
-
-## Instance Methods / Data
-
-### vm.$watch( expOrFn, callback, [options] )
-
-- **Arguments:**
-  - `{String|Function} expOrFn`
-  - `{Function} callback`
-  - `{Object} [options]`
-    - `{Boolean} deep`
-    - `{Boolean} immediate`
-
-- **Returns:** `{Function} unwatch`
-
-- **Usage:**
-
-  Watch an expression or a computed function on the Uppy instance for changes. The callback gets called with the new value and the old value. The expression can be a single keypath or any valid binding expressions.
-
-- **Example:**
-
-  ``` js
-  // keypath
-  vm.$watch('a.b.c', function (newVal, oldVal) {
-    // do something
-  })
-
-  // expression
-  vm.$watch('a + b', function (newVal, oldVal) {
-    // do something
-  })
-
-  // function
-  vm.$watch(
-    function () {
-      return this.a + this.b
-    },
-    function (newVal, oldVal) {
-      // do something
-    }
-  )
-  ```
-
-  `vm.$watch` returns an unwatch function that stops firing the callback:
-
-  ``` js
-  var unwatch = vm.$watch('a', cb)
-  // later, teardown the watcher
-  unwatch()
-  ```
-
-- **Option: deep**
-
-  To also detect nested value changes inside Objects, you need to pass in `deep: true` in the options argument. Note that you don't need to do so to listen for Array mutations.
-
-  ``` js
-  vm.$watch('someObject', callback, {
-    deep: true
-  })
-  vm.someObject.nestedValue = 123
-  // callback is fired
-  ```
-
-- **Option: immediate**
-
-  Passing in `immediate: true` in the option will trigger the callback immediately with the current value of the expression:
-
-  ``` js
-  vm.$watch('a', callback, {
-    immediate: true
-  })
-  // callback is fired immediately with current value of `a`
-  ```
-
-### vm.$get( expression )
-
-- **Arguments:**
-  - `{String} expression`
-
-- **Usage:**
-
-  Retrieve a value from the Uppy instance given an expression. Expressions that throw errors will be suppressed and return `undefined`.
-
-- **Example:**
-
-  ``` js
-  var vm = new Uppy({
-    data: {
-      a: {
-        b: 1
-      }
-    }
-  })
-  vm.$get('a.b') // -> 1
-  vm.$get('a.b + 1') // -> 2
-  ```
-
-### vm.$set( keypath, value )
-
-- **Arguments:**
-  - `{String} keypath`
-  - `{*} value`
-
-- **Usage:**
-
-  Set a data value on the Uppy instance given a valid keypath. In most cases you should prefer setting properties using plain object syntax, e.g. `vm.a.b = 123`. This method is only needed in two scenarios:
-
-  1. When you have a keypath string and want to dynamically set the value using that keypath.
-
-  2. When you want to set a property that doesn't exist.
-
-  If the path doesn't exist it will be recursively created and made reactive. If a new root-level reactive property is created due to a `$set` call, the Uppy instance will be forced into a "digest cycle", during which all its watchers are re-evaluated.
-
-- **Example:**
-
-  ``` js
-  var vm = new Uppy({
-    data: {
-      a: {
-        b: 1
-      }
-    }
-  })
-  
-  // set an existing path
-  vm.$set('a.b', 2)
-  vm.a.b // -> 2
-
-  // set a non-existent path, will force digest
-  vm.$set('c', 3)
-  vm.c // ->
-  ```
-
-- **See also:** [Reactivity in Depth](/guide/reactivity.html)
-
-### vm.$delete( key )
-
-- **Arguments:**
-  - `{String} key`
-
-- **Usage:**
-
-  Delete a root level property on the Uppy instance (and also its `$data`). Forces a digest cycle. Not recommended.
-
-### vm.$eval( expression )
-
-- **Arguments:**
-  - `{String} expression`
-
-- **Usage:**
-
-  Evaluate a valid binding expression on the current instance. The expression can also contain filters.
-
-- **Example:**
-
-  ``` js
-  // assuming vm.msg = 'hello'
-  vm.$eval('msg | uppercase') // -> 'HELLO'
-  ```
-
-### vm.$interpolate( templateString )
-
-- **Arguments:**
-  - `{String} templateString`
-
-- **Usage:**
-
-  Evaluate a piece of template string containing mustache interpolations. Note that this method simply performs string interpolation; attribute directives are ignored.
-
-- **Example:**
-
-  ``` js
-  // assuming vm.msg = 'hello'
-  vm.$interpolate('{{msg}} world!') // -> 'hello world!'
-  ```
-
-### vm.$log( [keypath] )
-
-- **Arguments:**
-  - `{String} [keypath]`
-
-- **Usage:**
-
-  Log the current instance data as a plain object, which is more inspection-friendly than a bunch of getter/setters. Also accepts an optional key.
-
-  ``` js
-  vm.$log() // logs entire ViewModel data
-  vm.$log('item') // logs vm.item
-  ```
-
-## Instance Methods / Events
-
-### vm.$on( event, callback )
-
-- **Arguments:**
-  - `{String} event`
-  - `{Function} callback`
-
-- **Usage:**
-
-  Listen for a custom event on the current vm. Events can be triggered by `vm.$emit`, `vm.$dispatch` or `vm.$broadcast`. The callback will receive all the additional arguments passed into these event-triggering methods.
-
-- **Example:**
-
-  ``` js
-  vm.$on('test', function (msg) {
-    console.log(msg)
-  })
-  vm.$emit('test', 'hi')
-  // -> "hi"
-  ```
-
-### vm.$once( event, callback )
-
-- **Arguments:**
-  - `{String} event`
-  - `{Function} callback`
-
-- **Usage:**
-
-  Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.
-
-### vm.$off( [event, callback] )
-
-- **Arguments:**
-  - `{String} [event]`
-  - `{Function} [callback]`
-
-- **Usage:**
-
-  Remove event listener(s).
-
-  - If no arguments are provided, remove all event listeners;
-
-  - If only the event is provided, remove all listeners for that event;
-
-  - If both event and callback are given, remove the listener for that specific callback only.
-
-### vm.$emit( event, [...args] )
-
-- **Arguments:**
-  - `{String} event`
-  - `[...args]`
-
-  Trigger an event on the current instance. Any additional arguments will be passed into the listener's callback function.
-
-### vm.$dispatch( event, [...args] )
-
-- **Arguments:**
-  - `{String} event`
-  - `[...args]`
-
-- **Usage:**
-
-  Dispatch an event, first triggering it on the instance itself, and then propagates upward along the parent chain. The propagation stops when it triggers a parent event listener, unless that listener returns `true`. Any additional arguments will be passed into the listener's callback function.
-
-- **Example:**
-
-  ``` js
-  // create a parent chain
-  var parent = new Uppy()
-  var child1 = new Uppy({ parent: parent })
-  var child2 = new Uppy({ parent: child1 })
-
-  parent.$on('test', function () {
-    console.log('parent notified')
-  })
-  child1.$on('test', function () {
-    console.log('child1 notified')
-  })
-  child2.$on('test', function () {
-    console.log('child2 notified')
-  })
-
-  child2.$dispatch('test')
-  // -> "child2 notified"
-  // -> "child1 notified"
-  // parent is NOT notified, because child1 didn't return
-  // true in its callback
-  ```
-
-- **See also:** [Parent-Child Communication](/guide/components.html#Parent-Child_Communication)
-
-### vm.$broadcast( event, [...args] )
-
-- **Arguments:**
-  - `{String} event`
-  - `[...args]`
-
-- **Usage:**
-
-  Broadcast an event that propagates downward to all descendants of the current instance. Since the descendants expand into multiple sub-trees, the event propagation will follow many different "paths". The propagation for each path will stop when a listener callback is fired along that path, unless the callback returns `true`.
-
-- **Example:**
-
-  ``` js
-  var parent = new Uppy()
-  // child1 and child2 are siblings
-  var child1 = new Uppy({ parent: parent })
-  var child2 = new Uppy({ parent: parent })
-  // child3 is nested under child2
-  var child3 = new Uppy({ parent: child2 })
-
-  child1.$on('test', function () {
-    console.log('child1 notified')
-  })
-  child2.$on('test', function () {
-    console.log('child2 notified')
-  })
-  child3.$on('test', function () {
-    console.log('child3 notified')
-  })
-
-  parent.$broadcast('test')
-  // -> "child1 notified"
-  // -> "child2 notified"
-  // child3 is NOT notified, because child2 didn't return
-  // true in its callback
-  ```
-
-## Instance Methods / DOM
-
-### vm.$appendTo( elementOrSelector, [callback] )
-
-- **Arguments:**
-  - `{Element|String} elementOrSelector`
-  - `{Function} [callback]`
-
-- **Returns:** `vm` - the instance itself
-
-- **Usage:**
-
-  Append the Uppy instance's DOM element or fragment to target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).
-
-### vm.$before( elementOrSelector, [callback] )
-
-- **Arguments:**
-  - `{Element|String} elementOrSelector`
-  - `{Function} [callback]`
-
-- **Returns:** `vm` - the instance itself
-
-- **Usage:**
-
-  Insert the Uppy instance's DOM element or fragment before target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).
-
-### vm.$after( elementOrSelector, [callback] )
-
-- **Arguments:**
-  - `{Element|String} elementOrSelector`
-  - `{Function} [callback]`
-
-- **Returns:** `vm` - the instance itself
-
-- **Usage:**
-
-  Insert the Uppy instance's DOM element or fragment after target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).
-
-### vm.$remove( [callback] )
-
-- **Arguments:**
-  - `{Function} [callback]`
-
-- **Returns:** `vm` - the instance itself
-
-- **Usage:**
-  
-  Remove the Uppy instance's DOM element or fragment from the DOM. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).
-
-### vm.$nextTick( callback )
-
-- **Arguments:**
-  - `{Function} [callback]`
-
-- **Usage:**
-
-  Defer the callback to be executed after the next DOM update cycle. Use it immediately after you've changed some data to wait for the DOM update. This is the same as the global `Uppy.nextTick`, except that the callback's `this` context is automatically bound to the instance calling this method.
-
-- **Example:**
-
-  ``` js
-  new Uppy({
-    // ...
-    methods: {
-      // ...
-      example: function () {
-        // modify data
-        this.message = 'changed'
-        // DOM is not updated yet
-        this.$nextTick(function () {
-          // DOM is now updated
-          // `this` is bound to the current instance
-          this.doSomethingElse()
-        })
-      }
-    }
-  })
-  ```
-
-- **See also:**
-  - [Uppy.nextTick](#Uppy-nextTick)
-  - [Async Update Queue](/guide/reactivity.html#Async_Update_Queue)
-
-## Instance Methods / Lifecycle
-
-### vm.$mount( [elementOrSelector] )
-
-- **Arguments:**
-  - `{Element|String} [elementOrSelector]`
-
-- **Returns:** `vm` - the instance itself
-
-- **Usage:**
-
-  If a Uppy instance didn't receive the `el` option at instantiation, it will be in "unmounted" state, without an associated DOM element or fragment. `vm.$mount()` can be used to manually start the mounting/compilation of an unmounted Uppy instance.
-
-  If no argument is provided, the template will be created as an out-of-document fragment, and you will have to use other DOM instance methods to insert it into the document yourself. If `replace` option is set to `false`, then an empty `<div>` will be automatically created as the wrapper element.
-
-  Calling `$mount()` on an already mounted instance will have no effect. The method returns the instance itself so you can chain other instance methods after it.
-
-- **Example:**
-
-  ``` js
-  var MyComponent = Uppy.extend({
-    template: '<div>Hello!</div>'
-  })
-  
-  // create and mount to #app (will replace #app)
-  new MyComponent().$mount('#app')
-
-  // the above is the same as:
-  new MyComponent({ el: '#app' })
-
-  // or, compile off-document and append afterwards:
-  new MyComponent().$mount().$appendTo('#container')
-  ```
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-### vm.$destroy( [remove] )
-
-- **Arguments:**
-  - `{Boolean} [remove] - default: false`
-
-- **Usage:**
-
-  Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners and, if the `remove` argument is true, remove its associated DOM element or fragment from the DOM.
-
-  Triggers the `beforeDestroy` and `destroyed` hooks.
-
-- **See also:** [Lifecycle Diagram](/guide/instance.html#Lifecycle_Diagram)
-
-## Directives
-
-### v-text
-
-- **Expects:** `String`
-
-- **Details:**
-
-  Updates the element's `textContent`.
-
-  Internally, `{% raw %}{{ Mustache }}{% endraw %}` interpolations are also compiled as a `v-text` directive on a textNode. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content).
-
-- **Example:**
-
-  ``` html
-  <span v-text="msg"></span>
-  <!-- same as -->
-  <span>{{msg}}</span>
-  ```
-
-### v-html
-
-- **Expects:** `String`
-
-- **Details:**
-
-  Updates the element's `innerHTML`. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [partials](#partial).
-
-  Internally, `{% raw %}{{{ Mustache }}}{% endraw %}` interpolations are also compiled as a `v-html` directive using anchor nodes. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content).
-
-  <p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use `v-html` on trusted content and **never** on user-provided content.</p>
-
-- **Example:**
-
-  ``` html
-  <div v-html="html"></div>
-  <!-- same as -->
-  <div>{{{html}}}</div>
-  ```
-
-### v-if
-
-- **Expects:** `*`
-
-- **Usage:**
-
-  Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a `<template>` element, its content will be extracted as the conditional block.
-
-- **See also:** [Conditional Rendering](/guide/conditional.html)
-
-### v-show
-
-- **Expects:** `*`
-
-- **Usage:**
-
-  Toggle's the element's `display` CSS property based on the truthy-ness of the expression value. Triggers transitions if present.
-
-- **See also:** [Conditional Rendering - v-show](/guide/conditional.html#v-show)
-
-### v-else
-
-- **Does not expect expression**
-
-- **Restriction:** previous sibling element must have `v-if` or `v-show`.
-
-- **Usage:**
-
-  Denote the "else block" for `v-if` and `v-show`.
-
-  ``` html
-  <div v-if="Math.random() > 0.5">
-    Sorry
-  </div>
-  <div v-else>
-    Not sorry
-  </div>
-  ```
-
-- **See also:** [Conditional Rendering - v-else](/guide/conditional.html#v-else)
-
-### v-for
-
-- **Expects:** `Array | Object | Number | String`
-
-- **Param Attributes:**
-  - [`track-by`](/guide/list.html#track-by)
-  - [`stagger`](/guide/transitions.html#Staggering_Transitions)
-  - [`enter-stagger`](/guide/transitions.html#Staggering_Transitions)
-  - [`leave-stagger`](/guide/transitions.html#Staggering_Transitions)
-
-- **Usage:**
-
-  Render the element or template block multiple times based on the source data. The expression must use the special syntax to provide an alias for the current element being iterated on:
-
-  ``` html
-  <div v-for="item in items">
-    {{ item.text }}
-  </div>
-  ```
-
-  Alternatively, you can also specify an alias for the index (or the key if used on an Object):
-
-  ``` html
-  <div v-for="(index, item) in items"></div>
-  <div v-for="(key, val) in object"></div>
-  ```
-
-  The detailed usage for `v-for` is explained in the guide section linked below.
-
-- **See also:** [List Rendering](/guide/list.html).
-
-### v-on
-
-- **Shorthand:** `@`
-
-- **Expects:** `Function | Inline Statement`
-
-- **Argument:** `event (required)`
-
-- **Modifiers:**
-  - `.stop` - call `event.stopPropagation()`.
-  - `.prevent` - call `event.preventDefault()`.
-  - `.{keyCode | keyAlias}` - only trigger handler on certain keys.
-
-- **Usage:**
-
-  Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method name or an inline statement, or simply omitted when there are modifiers present.
-
-  When used on a normal element, it listens to **native DOM events** only. When used on a custom element component, it also listens to **custom events** emitted on that child component.
-
-- **Example:**
-
-  ``` html
-  <!-- method handler -->
-  <button v-on:click="doThis"></button>
-
-  <!-- inline statement -->
-  <button v-on:click="doThat('hello')"></button>
-
-  <!-- shorthand -->
-  <button @click="doThis"></button>
-
-  <!-- stop propagation -->
-  <button @click.stop="doThis"></button>
-
-  <!-- prevent default -->
-  <button @click.prevent="doThis"></button>
-
-  <!-- prevent default without expression -->
-  <form @submit.prevent></form>
-
-  <!-- chain modifiers -->
-  <button @click.stop.prevent="doThis"></button>
-
-  <!-- key modifier using keyAlias -->
-  <input @keyup.enter="onEnter">
-
-  <!-- key modifier using keyCode -->
-  <input @keyup.13="onEnter">
-  ```
-
-  Listening to custom events on a child component (the handler is called when "my-event" is emitted on the child):
-
-  ``` html
-  <my-component @my-event="handleThis"></my-component>
-  ```
-
-- **See also:** [Methods and Event Handling](/guide/events.html)
-
-### v-bind
-
-- **Shorthand:** `:`
-
-- **Expects:** `* (with argument) | Object (without argument)`
-
-- **Argument:** `attrOrProp (optional)`
-
-- **Modifiers:**
-  - `.sync` - make the binding two-way. Only respected for prop bindings.
-  - `.once` - make the binding one-time. Only respected for prop bindings.
-
-- **Usage:**
-
-  Dynamically bind one or more attributes, or a component prop to an expression.
-
-  When used to bind the `class` or `style` attribute, it supports additional value types such as Array or Objects. See linked guide section below for more details.
-
-  When used for prop binding, the prop must be properly declared in the child component. Prop bindings can specify a different binding type using one of the modifiers.
-
-  When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode `class` and `style` does not support Array or Objects.
-
-- **Example:**
-
-  ``` html
-  <!-- bind an attribute -->
-  <img v-bind:src="imageSrc">
-
-  <!-- shorthand -->
-  <img :src="imageSrc">
-
-  <!-- class binding -->
-  <div :class="{ red: isRed }"></div>
-  <div :class="[classA, classB]"></div>
-
-  <!-- style binding -->
-  <div :style="{ fontSize: size + 'px' }"></div>
-  <div :style="[styleObjectA, styleObjectB]"></div>
-
-  <!-- binding an object of attributes -->
-  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
-
-  <!-- prop binding. "prop" must be declared in my-component. -->
-  <my-component :prop="someThing"></my-component>
-
-  <!-- two-way prop binding -->
-  <my-component :prop.sync="someThing"></my-component>
-
-  <!-- one-time prop binding -->
-  <my-component :prop.once="someThing"></my-component>
-  ```
-
-- **See also:**
-  - [Class and Style Bindings](/guide/class-and-style.html)
-  - [Component Props](/guide/components.html#Props)
-
-### v-model
-
-- **Expects:** varies based on input type
-
-- **Limited to:**
-  - `<input>`
-  - `<select>`
-  - `<textarea>`
-
-- **Param Attributes:**
-  - [`lazy`](/guide/forms.html#lazy)
-  - [`number`](/guide/forms.html#number)
-  - [`debounce`](/guide/forms.html#debounce)
-
-- **Usage:**
-
-  Create a two-way binding on a form input element. For detailed usage, see guide section linked below.
-
-- **See also:** [Form Input Bindings](/guide/forms.html)
-
-### v-ref
-
-- **Does not expect expression**
-
-- **Limited to:** child components
-
-- **Argument:** `id (required)`
-
-- **Usage:**
-
-  Register a reference to a child component on its parent for direct access. Does not expect an expression. Must provide an argument as the id to register with. The component instance will be accessible on its parent's `$refs` object.
-
-  When used on a component together with `v-for`, the registered value will be an Array containing all the child component instances corresponding to the Array they are bound to. If the data source for `v-for` is an Object, the registered value will be an Object containing key-instance pairs mirroring the source Object.
-
-- **Note:**
-
-  Because HTML is case-insensitive, camelCase usage like `v-ref:someRef` will be converted to all lowercase. You can use `v-ref:some-ref` which properly sets `this.$refs.someRef`.
-
-- **Example:**
-
-  ``` html
-  <comp v-ref:child></comp>
-  <comp v-ref:some-child></comp>
-  ```
-
-  ``` js
-  // access from parent:
-  this.$refs.child
-  this.$refs.someChild
-  ```
-
-  With `v-for`:
-
-  ``` html
-  <comp v-ref:list v-for="item in list"></comp>
-  ```
-
-  ``` js
-  // this will be an array in parent
-  this.$refs.list
-  ```
-
-- **See also:** [Child Component Refs](/guide/components.html#Child_Component_Refs)
-
-### v-el
-
-- **Does not expect expression**
-
-- **Argument:** `id (required)`
-
-- **Usage:**
-  
-  Register a reference to a DOM element on its owner Uppy instance's `$els` object for easier access.
-
-- **Note:**
-
-  Because HTML is case-insensitive, camelCase usage like `v-el:someEl` will be converted to all lowercase. You can use `v-el:some-el` which properly sets `this.$els.someEl`.
-
-- **Example:**
-
-  ``` html
-  <span v-el:msg>hello</span>
-  <span v-el:other-msg>world</span>
-  ```
-  ``` js
-  this.$els.msg.textContent // -> "hello"
-  this.$els.otherMsg.textContent // -> "world"
-  ```
-
-### v-pre
-
-- **Does not expect expression**
-
-- **Usage**
-
-  Skip compilation for this element and all its children. You can use this for displaying raw mustache tags. Skipping large numbers of nodes with no directives on them can also speed up compilation.
-
-- **Example:**
-
-  ``` html
-  <span v-pre>{{ this will not be compiled }}</span>
-  ```
-
-### v-cloak
-
-- **Does not expect expression**
-
-- **Usage:**
-
-  This directive will remain on the element until the associated Uppy instance finishes compilation. Combined with CSS rules such as `[v-cloak] { display: none }`, this directive can be used to hide un-compiled mustache bindings until the Uppy instance is ready.
-
-- **Example:**
-
-  ``` css
-  [v-cloak] {
-    display: none;
-  }
-  ```
-
-  ``` html
-  <div v-cloak>
-    {{ message }}
-  </div>
-  ```
-
-  The `<div>` will not be visible until the compilation is done.
-
-## Special Elements
-
-### component
-
-- **Attributes:**
-  - `is`
-
-- **Usage:**
-
-  Alternative syntax for invoking components. Primarily used for dynamic components with the `is` attribute:
-
-  ``` html
-  <!-- a dynamic component controlled by -->
-  <!-- the `componentId` property on the vm -->
-  <component :is="componentId"></component>
-  ```
-
-- **See also:** [Dynamic Components](/guide/components.html#Dynamic_Components)
-
-### slot
-
-- **Attributes:**
-  - `name`
-
-- **Usage:**
-
-  `<slot>` elements serve as content distribution outlets in component templates. The slot element itself will be replaced.
-
-  A slot with the `name` attribute is called a named slot. A named slot will distribute content with a `slot` attribute that matches its name.
-
-  For detailed usage, see the guide section linked below.
-
-- **See also:** [Content Distribution with Slots](/guide/components.html#Content_Distribution_with_Slots)
-
-### partial
-
-- **Attributes:**
-  - `name`
-
-- **Usage:**
-
-  `<partial>` elements serve as outlets for registered template partials. Partial contents are also compiled by Uppy when inserted. The `<partial>` element itself will be replaced. It requires a `name` attribute which will be used to resolve the partial's content.
-
-- **Example:**
-
-  ``` js
-  // registering a partial
-  Uppy.partial('my-partial', '<p>This is a partial! {{msg}}</p>')
-  ```
-
-  ``` html
-  <!-- a static partial -->
-  <partial name="my-partial"></partial>
-
-  <!-- a dynamic partial -->
-  <!-- renders partial with id === vm.partialId -->
-  <partial v-bind:name="partialId"></partial>
-
-  <!-- dynamic partial using v-bind shorthand -->
-  <partial :name="partialId"></partial>
-  ```
-
-## Filters
-
-### capitalize
-
-- **Example:**
-
-  ``` html
-  {{ msg | capitalize }}
-  ```
-
-  *'abc' => 'Abc'*
-
-### uppercase
-
-- **Example:**
-
-  ``` html
-  {{ msg | uppercase }}
-  ```
-
-  *'abc' => 'ABC'*
-
-### lowercase
-
-- **Example:**
-
-  ``` html
-  {{ msg | lowercase }}
-  ```
-
-  *'ABC' => 'abc'*
-
-### currency
-
-- **Arguments:**
-  - `{String} [symbol] - default: '$'`
-
-- **Example:**
-
-  ``` html
-  {{ amount | currency }}
-  ```
-
-  *12345 => $12,345.00*
-
-  Use a different symbol:
-
-  ``` html
-  {{ amount | currency '£' }}
-  ```
-
-  *12345 => £12,345.00*
-
-### pluralize
-
-- **Arguments:**
-  - `{String} single, [double, triple, ...]`
-
-- **Usage:**
-
-  Pluralizes the argument based on the filtered value. When there is exactly one argument, plural forms simply add an "s" at the end. When there are more than one argument, the arguments will be used as array of strings corresponding to the single, double, triple ... forms of the word to be pluralized. When the number to be pluralized exceeds the length of the arguments, it will use the last entry in the array.
-
-- **Example:**
-
-  ``` html
-  {{count}} {{count | pluralize 'item'}}
-  ```
-
-  *1 => '1 item'*  
-  *2 => '2 items'*
-
-  ``` html
-  {{date}}{{date | pluralize 'st' 'nd' 'rd' 'th'}}
-  ```
-
-  Will result in:
-
-  *1 => '1st'*  
-  *2 => '2nd'*
-  *3 => '3rd'*
-  *4 => '4th'*
-  *5 => '5th'*
-
-### json
-
-- **Arguments:**
-  - `{Number} [indent] - default: 2`
-
-- **Usage:**
-  
-  Output the result of calling `JSON.stringify()` on the value instead of outputting the `toString()` value (e.g. `[object Object]`).
-
-- **Example:**
-
-  Print an object with 4-space indent:
-
-  ``` html
-  <pre>{{ nestedObject | json 4 }}</pre>
-  ```
-
-### debounce
-
-- **Limited to:** directives that expect `Function` values, e.g. `v-on`
-
-- **Arguments:**
-  - `{Number} [wait] - default: 300`
-
-- **Usage:**
-
-  Wrap the handler to debounce it for `x` milliseconds, where `x` is the argument. Default wait time is 300ms. A debounced handler will be delayed until at least `x` ms has passed after the call moment; if the handler is called again before the delay period, the delay period is reset to `x` ms.
-
-- **Example:**
-
-  ``` html
-  <input @keyup="onKeyup | debounce 500">
-  ```
-
-### limitBy
-
-- **Limited to:** directives that expect `Array` values, e.g. `v-for`
-
-- **Arguments:**
-  - `{Number} limit`
-  - `{Number} [offset]`
-
-- **Usage:**
-
-  Limit the array to the first N items, as specified by the argument. An optional second argument can be provided to set a starting offset.
-
-  ``` html
-  <!-- only display first 10 items -->
-  <div v-for="item in items | limitBy 10"></div>
-
-  <!-- display items 5 to 15 -->
-  <div v-for="item in items | limitBy 10 5"></div>
-  ```
-
-### filterBy
-
-- **Limited to:** directives that expect `Array` values, e.g. `v-for`
-
-- **Arguments:**
-  - `{String | Function} targetStringOrFunction`
-  - `"in" (optional delimiter)`
-  - `{String} [...searchKeys]`
-
-- **Usage:**
-
-  Return a filtered version of the source Array. The first argument can either be a string or a function.
-
-  When the first argument is a string, it will be used as the target string to search for in each element of the Array:
-
-  ``` html
-  <div v-for="item in items | filterBy 'hello'">
-  ```
-
-  In the above example, only items that contain the target string `"hello"` will be displayed.
-
-  If the item is an object, the filter will recursively search every nested property of the object for the target string. To narrow down the search scope, additional search keys can be specified:
-
-  ``` html
-  <div v-for="user in users | filterBy 'Jack' in 'name'">
-  ```
-
-  In the above example, the filter will only search for `"Jack"` in the `name` field of each user object. **It is a good idea to always limit the search scope for better performance.**
-
-  The examples above are using static arguments - we can, of course, use dynamic arguments as target string or search keys. Combined with `v-model` we can easily implement type-ahead filtering:
-
-  ``` html
-  <div id="filter-by-example">
-    <input v-model="name">
-    <ul>
-      <li v-for="user in users | filterBy name in 'name'">
-        {{ user.name }}
-      </li>
-    </ul>
-  </div>
-  ```
-
-  ``` js
-  new Uppy({
-    el: '#filter-by-example',
-    data: {
-      name: '',
-      users: [
-        { name: 'Bruce' },
-        { name: 'Chuck' },
-        { name: 'Jackie' }
-      ]
-    }
-  })
-  ```
-
-  {% raw %}
-  <div id="filter-by-example" class="demo">
-    <input v-model="name">
-    <ul>
-      <li v-for="user in users | filterBy name in 'name'">
-        {{ user.name }}
-      </li>
-    </ul>
-  </div>
-  <script>
-  new Uppy({
-    el: '#filter-by-example',
-    data: {
-      name: '',
-      users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
-    }
-  })
-  </script>
-  {% endraw %}
-
-- **Additional Examples:**
-
-  Multiple search keys:
-
-  ``` html
-  <li v-for="user in users | filterBy searchText in 'name' 'phone'"></li>
-  ```
-
-  Multiple search keys with a dynamic Array argument:
-
-  ``` html
-  <!-- fields = ['fieldA', 'fieldB'] -->
-  <div v-for="user in users | filterBy searchText in fields">
-  ```
-
-  Use a custom filter function:
-
-  ``` html
-  <div v-for="user in users | filterBy myCustomFilterFunction">
-  ```
-
-### orderBy
-
-- **Limited to:** directives that expect `Array` values, e.g. `v-for`
-
-- **Arguments:**
-  - `{String} sortKey`
-  - `{String} [order] - default: 1`
-
-- **Usage:**
-
-  Return a sorted version of the source Array. The `sortKey` is the key to use for the sorting. The optional `order` argument specifies whether the result should be in ascending (`order >= 0`) or descending (`order < 0`) order.
-
-  For arrays of primitive values, any truthy `sortKey` will work.
-
-- **Example:**
-
-  Sort users by name:
-
-  ``` html
-  <ul>
-    <li v-for="user in users | orderBy 'name'">
-      {{ user.name }}
-    </li>
-  </ul>
-  ```
-
-  In descending order:
-
-  ``` html
-  <ul>
-    <li v-for="user in users | orderBy 'name' -1">
-      {{ user.name }}
-    </li>
-  </ul>
-  ```
-
-  Sort primitive values:
-
-  ``` html
-  <ul>
-    <li v-for="n in numbers | orderBy true">
-      {{ n }}
-    </li>
-  </ul>
-  ```
-
-  Dynamic sort order:
-
-  ``` html
-  <div id="orderby-example">
-    <button @click="order = order * -1">Reverse Sort Order</button>
-    <ul>
-      <li v-for="user in users | orderBy 'name' order">
-        {{ user.name }}
-      </li>
-    </ul>
-  </div>
-  ```
-
-  ``` js
-  new Uppy({
-    el: '#orderby-example',
-    data: {
-      order: 1,
-      users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
-    }
-  })
-  ```
-
-  {% raw %}
-  <div id="orderby-example" class="demo">
-    <button @click="order = order * -1">Reverse Sort Order</button>
-    <ul>
-      <li v-for="user in users | orderBy 'name' order">
-        {{ user.name }}
-      </li>
-    </ul>
-  </div>
-  <script>
-  new Uppy({
-    el: '#orderby-example',
-    data: {
-      order: 1,
-      users: [{ name: 'Bruce' }, { name: 'Chuck' }, { name: 'Jackie' }]
-    }
-  })
-  </script>
-  {% endraw %}
+1. [PostCSS](https://github.com/postcss/postcss/blob/master/lib/postcss.es6#L19)
+2. [Markdown-It](https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L459)
+3. [Babel](babeljs.io)
+4. [Lodash](https://lodash.com/)
+5. [Vue.js](http://vuejs.org/guide/plugins.html#Using_a_Plugin)
+6. [Tus.js](https://github.com/tus/tus-js-client)

website/src/examples/commits.md

@@ -1,9 +0,0 @@
----
-title: GitHub Commits
-type: examples
-order: 1
----
-
-> This example fetches latest Uppy.js commits data from GitHub's API and displays them as a list. You can switch between the master and dev branches.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/vaj48u3h/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/dropbox.md

@@ -0,0 +1,9 @@
+---
+title: Dropbox
+type: examples
+order: 1
+---
+
+> This shows Dropbox integration in action
+
+Dropbox example here

website/src/examples/elastic-header.md

@@ -1,7 +0,0 @@
----
-title: Elastic Header
-type: examples
-order: 7
----
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/2eg8kbyk/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/firebase.md

@@ -1,9 +0,0 @@
----
-title: Firebase + Validation
-type: examples
-order: 2
----
-
-> This example uses [Firebase](https://www.firebase.com/) as the data persistence backend and syncs between clients in real time (you can try opening it in multiple browser tabs). In addition, it performs instant validation using computed properties and triggers CSS transitions when adding/removing items.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/2d3htmpr/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/grid-component.md

@@ -1,9 +0,0 @@
----
-title: Grid Component
-type: examples
-order: 3
----
-
-> This is an example of creating a reusable grid component and using it with external data.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/m7sgaron/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/hackernews.md

@@ -1,13 +0,0 @@
----
-title: HackerNews Clone
-type: examples
-order: 10
----
-
-> This is a HackerNews clone built upon HN's official Firebase API, and using Webpack + uppy-loader for the build setup.
-
-<div style="max-width:600px">
-  <a href="http://transloadit.github.io/uppy-hackernews" target="_blank"><img style="width:100%" src="/images/hn.png"></a>
-</div>
-
-> [[Source](https://github.com/transloadit/uppy-hackernews)]

website/src/examples/index.md

@@ -1,9 +1,9 @@
 ---
-title: Markdown Editor
+title: Playground
 type: examples
 order: 0
 ---
 
-> Dead simple Markdown editor.
+> Playground
 
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/oe7axeab/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+Playground example here

website/src/examples/modal.md

@@ -1,9 +0,0 @@
----
-title: Modal Component
-type: examples
-order: 6
----
-
-> Features used: component, prop passing, content insertion, transitions.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/msx42stu/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/select2.md

@@ -1,9 +0,0 @@
----
-title: Custom Directive
-type: examples
-order: 8
----
-
-> In this example we are integrating a 3rd party jQuery plugin (select2) by wrapping it inside a custom directive.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/157m67zu/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/svg.md

@@ -1,9 +0,0 @@
----
-title: SVG Graph
-type: examples
-order: 5
----
-
-> This example showcases a combination of custom component, computed property, two-way binding and SVG support.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/tfpcsxgf/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/examples/todomvc.md

@@ -1,11 +0,0 @@
----
-title: TodoMVC
-type: examples
-order: 9
----
-
-> This is a fully spec-compliant TodoMVC implementation in under 120 effective lines of JavaScript (excluding comments and blank lines).
-
-<iframe width="100%" height="500" src="todomvc/index.html" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-> [[Source](https://github.com/transloadit/uppy/tree/dev/examples/todomvc)]

website/src/examples/tree-view.md

@@ -1,9 +0,0 @@
----
-title: Tree View
-type: examples
-order: 4
----
-
-> Example of a simple tree view implementation showcasing recursive usage of components.
-
-<iframe width="100%" height="500" src="http://jsfiddle.net/yyx990803/u4n1m04q/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/guide/application.md

@@ -1,219 +0,0 @@
----
-title: Building Large-Scale Apps
-type: guide
-order: 18
----
-
-The Uppy.js core library is designed to be focused and flexible - it's just a view layer library that doesn't enforce any application-level architecture. While this can be great for integrating with existing projects, it could be a challenge for those with less experience to build larger scale applications from scratch.
-
-The Uppy.js ecosystem provides a set of tools, libraries on how to build large SPAs with Uppy. This part is where we start get a bit "framework"-ish, but it's really just an opinionated list of recommendations; you still get to pick what to use for each part of the stack.
-
-## Modularization
-
-For large projects it's necessary to utilize a modularized build system to better organize your code. The recommended approach of doing so is by writing your source code in CommonJS or ES6 modules and bundle them using [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/).
-
-Webpack and Browserify are more than just module bundlers, though. They both provide source transform APIs that allow you to transform your source code with other pre-processors. For example, you can write your code with future ES2015/2016 syntax using [babel-loader](https://github.com/babel/babel-loader) or [babelify](https://github.com/babel/babelify).
-
-If you've never used them before, I highly recommend going through a few tutorials to get familiar with the concept of module bundlers, and start writing JavaScript using the latest ECMAScript features.
-
-## Single File Components
-
-In a typical Uppy.js project we will be dividing our interface into many small components, and it would be nice to have each component encapsulate its CSS styles, template and JavaScript definition in the same place. As mentioned above, when using Webpack or Browserify, with proper source transforms we can write our components like this:
-
-<img src="/images/uppy-component.png">
-
-If you are into pre-processors, you can even do this:
-
-<img src="/images/uppy-component-with-pre-processors.png">
-
-You can build these single-file Uppy components with Webpack + [uppy-loader](https://github.com/transloadit/uppy-loader) or Browserify + [vueify](https://github.com/transloadit/vueify). It is recommended to use the Webpack setup because Webpack's loader API enables better file dependency tracking / caching and some advanced features that are not feasible with Browserify transforms.
-
-You can find examples of the build setups on GitHub:
-
-- [Webpack + uppy-loader](https://github.com/transloadit/uppy-loader-example)
-- [Browserify + vueify](https://github.com/transloadit/vueify-example)
-
-## Routing
-
-For Single Page Applications, it is recommended to use the [official uppy-router library](https://github.com/transloadit/uppy-router), which is currently in technical preview. For more details, please refer to uppy-router's [documentation](http://transloadit.github.io/uppy-router/).
-
-If you just need some very simple routing logic, you can also implement it by manually listening on `hashchange` and utilizing a dynamic component:
-
-**Example:**
-
-``` html
-<div id="app">
-  <component :is="currentView"></component>
-</div>
-```
-
-``` js
-Uppy.component('home', { /* ... */ })
-Uppy.component('page1', { /* ... */ })
-var app = new Uppy({
-  el: '#app',
-  data: {
-    currentView: 'home'
-  }
-})
-// Switching pages in your route handler:
-app.currentView = 'page1'
-```
-
-With this mechanism it's also very easy to leverage external routing libraries such as [Page.js](https://github.com/visionmedia/page.js) or [Director](https://github.com/flatiron/director).
-
-## Communication with Server
-
-All Uppy instances can have their raw `$data` directly serialized with `JSON.stringify()` with no additional effort. The community has contributed the [uppy-resource](https://github.com/transloadit/uppy-resource) plugin, which provides an easy way to work with RESTful APIs. You can also use any Ajax library you like, e.g. `$.ajax` or [SuperAgent](https://github.com/visionmedia/superagent). Uppy.js also plays nicely with no-backend services such as Firebase and Parse.
-
-## State Management
-
-In large applications, state management often becomes complex due to multiple pieces of state scattered across many components and the interactions between them. It is often overlooked that the source of truth in Uppy.js applications is the raw data object - a Uppy instances simply proxies access to it. Therefore, if you have a piece of state that should be shared by multiple instances, you should avoid duplicating it and share it by identity:
-
-``` js
-var sourceOfTruth = {}
-
-var vmA = new Uppy({
-  data: sourceOfTruth
-})
-
-var vmB = new Uppy({
-  data: sourceOfTruth
-})
-```
-
-Now whenever `sourceOfTruth` is mutated, both `vmA` and `vmB` will update their views automatically. Extending this idea further, we would arrive at the **store pattern**:
-
-``` js
-var store = {
-  state: {
-    message: 'Hello!'
-  },
-  actionA: function () {
-    this.state.message = 'action A triggered'
-  },
-  actionB: function () {
-    this.state.message = 'action B triggered'
-  }
-}
-
-var vmA = new Uppy({
-  data: {
-    privateState: {},
-    sharedState: store.state
-  }
-})
-
-var vmB = new Uppy({
-  data: {
-    privateState: {},
-    sharedState: store.state
-  }
-})
-```
-
-Notice we are putting all actions that mutate the store's state inside the store itself. This type of centralized state management makes it easier to understand what type of mutations could happen to the state, and how are they triggered. Each component can still own and manage its private state.
-
-![State Management](/images/state.png)
-
-One thing to take note is that you should never replace the original state object in your actions - the components and the store need to share reference to the same object in order for the mutations to be observed.
-
-If we enforce a convention where components are never allowed to directly mutate state that belongs to a store, but should instead dispatch events that notify the store to perform actions, we've essentially arrived at the [Flux](https://facebook.github.io/flux/) architecture. The benefits of this convention is we can record all state mutations happening to the store, and on top of that we can implement advanced debugging helpers such as mutation logs, snapshots, history re-rolls etc.
-
-The Flux architecture is commonly used in React applications. Turns out the core idea behind Flux can be quite simply achieved in Uppy.js, thanks to the unobtrusive reactivity system. Do note what we demonstrated here is just an example to introduce the concept - you may not need it at all for simple scenarios, and you should adapt the pattern to fit the real needs of your application.
-
-## Unit Testing
-
-Anything compatible with a module-based build system works. A recommendation is using the [Karma](http://karma-runner.github.io/0.12/index.html) test runner. It has a lot of community plugins, including support for [Webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation.
-
-In terms of code structure for testing, the best practice is to export raw options / functions in your component modules. Consider this example:
-
-``` js
-// my-component.js
-module.exports = {
-  template: '<span>{{msg}}</span>',
-  data: function () {
-    return {
-      msg: 'hello!'
-    }
-  }
-  created: function () {
-    console.log('my-component created!')
-  }
-}
-```
-
-You can use that file in your entry module like this:
-
-``` js
-// main.js
-var Uppy = require('uppy')
-var app = new Uppy({
-  el: '#app',
-  data: { /* ... */ },
-  components: {
-    'my-component': require('./my-component')
-  }
-})
-```
-
-And you can test that module like this:
-
-``` js
-// Some Jasmine 2.0 tests
-describe('my-component', function () {
-  // require source module
-  var myComponent = require('../src/my-component')
-  it('should have a created hook', function () {
-    expect(typeof myComponent.created).toBe('function')
-  })
-  it('should set correct default data', function () {
-    expect(typeof myComponent.data).toBe('function')
-    var defaultData = myComponent.data()
-    expect(defaultData.msg).toBe('hello!')
-  })
-})
-```
-
-<p class="tip">Since Uppy.js directives perform updates asynchronously, when you are asserting DOM state after changing the data, you will have to do so in a `Uppy.nextTick` callback.</p>
-
-## Deploying for Production
-
-The minified standalone build of Uppy.js has already stripped out all the warnings for you for a smaller file size, but when you are using tools like Browserify or Webpack to build Uppy.js applications, you will need some additional configuration to achieve this.
-
-### Webpack
-
-Use Webpack's [DefinePlugin](http://webpack.github.io/docs/list-of-plugins.html#defineplugin) to indicate a production environment, so that warning blocks can be automatically dropped by UglifyJS during minification. Example config:
-
-``` js
-var webpack = require('webpack')
-
-module.exports = {
-  // ...
-  plugins: [
-    // ...
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"'
-      }
-    }),
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false
-      }
-    })
-  ]
-}
-```
-
-### Browserify
-
-Just run your bundling command with `NODE_ENV` set to `"production"`. Uppy automatically applies [envify](https://github.com/hughsk/envify) transform to itself and makes warning blocks unreachable. For example:
-
-``` bash
-NODE_ENV=production browserify -e main.js | uglifyjs -c -m > build.js
-```
-
-## An App Example
-
-The [Uppy.js Hackernews Clone](https://github.com/transloadit/uppy-hackernews) is an example application that uses Webpack + uppy-loader for code organization, uppy-router for routing, and HackerNews' official Firebase API as the backend. It's by no means a big application, but it demonstrates the combined usage of the concepts discussed on this page.

website/src/guide/class-and-style.md

@@ -1,121 +0,0 @@
----
-title: Class and Style Bindings
-type: guide
-order: 6
----
-
-A common need for data binding is manipulating an element's class list and its inline styles. Since they are both attributes, we can use `v-bind` to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Uppy.js provides special enhancements when `v-bind` is used for `class` and `style`. In addition to Strings, the expressions can also evaluate to Objects or Arrays.
-
-## Binding HTML Classes
-
-<p class="tip">Although you can use mustache interpolations such as `{% raw %}class="{{ className }}"{% endraw %}` to bind the class, it is not recommended to mix that style with `v-bind:class`. Use one or the other!</p>
-
-### Object Syntax
-
-We can pass an Object to `v-bind:class` to dynamically toggle classes. Note the `v-bind:class` directive can co-exist with the plain `class` attribute:
-
-``` html
-<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
-```
-``` js
-data: {
-  isA: true,
-  isB: false
-}
-```
-
-Which will render:
-
-``` html
-<div class="static class-a"></div>
-```
-
-When `isA` and `isB` changes, the class list will be updated accordingly. For example, if `isB` becomes `true`, the class list will become `"class-a class-b"`.
-
-And you can directly bind to an object in data as well:
-
-``` html
-<div v-bind:class="classObject"></div>
-```
-``` js
-data: {
-  classObject: {
-    'class-a': true,
-    'class-b': false
-  }
-}
-```
-
-This will render the same result. As you may have noticed, we can also bind to a [computed property](computed.html) that returns an Object. This is a common and powerful pattern.
-
-### Array Syntax
-
-We can pass an Array to `v-bind:class` to apply a list of classes:
-
-``` html
-<div v-bind:class="[classA, classB]">
-```
-``` js
-data: {
-  classA: 'class-a',
-  classB: 'class-b'
-}
-```
-
-Which will render:
-
-``` html
-<div class="class-a class-b"></div>
-```
-
-If you would like to also toggle a class in the list conditionally, you can do it with a ternary expression:
-
-``` html
-<div v-bind:class="[classA, isB ? classB : '']">
-```
-
-This will always apply `classA`, but will only apply `classB` when `isB` is `true`.
-
-## Binding Inline Styles
-
-### Object Syntax
-
-The Object syntax for `v-bind:style` is pretty straightforward - it looks almost like CSS, except it's a JavaScript object. You can use either camelCase or kebab-case for the CSS property names:
-
-``` html
-<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
-```
-``` js
-data: {
-  activeColor: 'red',
-  fontSize: 30
-}
-```
-
-It is often a good idea to bind to a style object directly so that the template is cleaner:
-
-``` html
-<div v-bind:style="styleObject"></div>
-```
-``` js
-data: {
-  styleObject: {
-    color: 'red',
-    fontSize: '13px'
-  }
-}
-```
-
-Again, the Object syntax is often used in conjunction with computed properties that return Objects.
-
-### Array Syntax
-
-The Array syntax for `v-bind:style` allows you to apply multiple style objects to the same element:
-
-``` html
-<div v-bind:style="[styleObjectA, styleObjectB]">
-```
-
-### Auto-prefixing
-
-When you use a CSS property that requires vendor prefixes in `v-bind:style`, for example `transform`, Uppy.js will automatically detect and add appropriate prefixes to the applied styles.

website/src/guide/comparison.md

@@ -1,73 +0,0 @@
----
-title: Comparison with Other Frameworks
-type: guide
-order: 19
----
-
-## Angular
-
-There are a few reasons to use Uppy over Angular, although they might not apply for everyone:
-
-- Uppy.js is much simpler than Angular, both in terms of API and design. You can learn almost everything about it really fast and get productive.
-
-- Uppy.js is a more flexible, less opinionated solution. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It's only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. It gives you bigger room to mix and match with other libraries, but you are also responsible for making more architectural decisions. For example, Uppy.js' core doesn't come with routing or ajax functionalities by default, and usually assumes you are building the application using an external module bundler. This is probably the most important distinction.
-
-- Uppy.js has better performance and is much, much easier to optimize, because it doesn't use dirty checking. Angular gets slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Also, the digest cycle may have to run multiple times to "stabilize" if some watcher triggers another update. Angular users often have to resort to esoteric techniques to get around the digest cycle, and in some situations there's simply no way to optimize a scope with a large amount of watchers. Uppy.js doesn't suffer from this at all because it uses a transparent dependency-tracking observing system with async queueing - all changes trigger independently unless they have explicit dependency relationships. The only optimization hint you'll ever need is the `track-by` param on `v-for` lists.
-
-- Uppy.js has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while Components stand for a self-contained unit that has its own view and data logic. In Angular there's a lot of confusion between the two.
-
-Interestingly, quite a few Angular 1 issues that are non-existent in Uppy are also addressed by the design decisions in Angular 2.
-
-## React
-
-React and Uppy.js do share a similarity in that they both provide reactive & composable View components. There are, of course, many differences as well.
-
-First, the internal implementation is fundamentally different. React's rendering leverages the Virtual DOM - an in-memory representation of what the actual DOM should look like. When the state changes, React does a full re-render of the Virtual DOM, diffs it, and then patches the real DOM.
-
-The virtual-DOM approach provides a functional way to describe your view at any point of time, which is really nice. Because it doesn't use observables and re-renders the entire app on every update, the view is by definition guaranteed to be in sync with the data. It also opens up possibilities to isomorphic JavaScript applications.
-
-Instead of a Virtual DOM, Uppy.js uses the actual DOM as the template and keeps references to actual nodes for data bindings. This limits Uppy.js to environments where DOM is present. However, contrary to the common misconception that Virtual-DOM makes React faster than anything else, Uppy.js actually out-performs React when it comes to hot updates, and requires almost no hand-tuned optimization. With React, you need to implement `shouldComponentUpdate` everywhere or use immutable data structures to achieve fully optimized re-renders.
-
-API-wise, one issue with React (or JSX) is that the render function often involves a lot of logic, and ends up looking more like a piece of program (which in fact it is) rather than a visual representation of the interface. For some developers this is a bonus, but for designer/developer hybrids like me, having a template makes it much easier to think visually about the design and CSS. JSX mixed with JavaScript logic breaks that visual model I need to map the code to the design. In contrast, Uppy.js pays the cost of a lightweight data-binding DSL so that we have a visually scannable template and with logic encapsulated into directives and filters.
-
-Another issue with React is that because DOM updates are completely delegated to the Virtual DOM, it's a bit tricky when you actually **want** to control the DOM yourself (although theoretically you can, you'd be essentially working against the library when you do that). For applications that needs ad-hoc custom DOM manipulations, especially animations with complex timing requirements, this can become a pretty annoying restriction. On this front, Uppy.js allows for more flexibility and there are [multiple FWA/Awwwards winning sites](https://github.com/transloadit/uppy/wiki/Projects-Using-Uppy.js#interactive-experiences) built with Uppy.js.
-
-Some additional notes:
-
-- The React team has very ambitious goals in making React a platform-agnostic UI development paradigm, while Uppy is focused on providing a pragmatic solution for the web.
-
-- React, due to its functional nature, plays very well with functional programming patterns. However it also introduces a higher learning barrier for junior developers and beginners. Uppy is much easier to pick up and get productive with in this regard.
-
-- For large applications, the React community has been doing a lot of innovation in terms of state management solutions, e.g. Flux/Redux. Uppy itself doesn't really address that problem (same for React core), but the state management patterns can be easily adopted for a similar architecture. I've seen users use Redux with Uppy, and engineers at Optimizely have been using NuclearJS (their Flux dialect) with Uppy as well.
-
-- The trend in React development is pushing you to put everything in JavaScript, including your CSS. There has been many CSS-in-JS solutions out there but all more or less have its own problems. And most importantly, it deviates from the standard CSS authoring experience and makes it very awkward to leverage existing work in the CSS community. Uppy's [single file components](http://uppyjs.io/guide/application.html#Single_File_Components) gives you component-encapsulated CSS while still allowing you to use your pre-processors of choice.
-
-## Ember
-
-Ember is a full-featured framework that is designed to be highly opinionated. It provides a lot of established conventions, and once you are familiar enough with them, it can make you very productive. However, it also means the learning curve is high and the flexibility suffers. It's a trade-off when you try to pick between an opinionated framework and a library with a loosely coupled set of tools that work together. The latter gives you more freedom but also requires you to make more architectural decisions.
-
-That said, it would probably make a better comparison between Uppy.js core and Ember's templating and object model layer:
-
-- Uppy provides unobtrusive reactivity on plain JavaScript objects, and fully automatic computed properties. In Ember you need to wrap everything in Ember Objects and manually declare dependencies for computed properties.
-
-- Uppy's template syntax harnesses the full power of JavaScript expressions, while Handlebars' expression and helper syntax is quite limited in comparison.
-
-- Performance wise, Uppy outperforms Ember by a fair margin, even after the latest Glimmer engine update in Ember 2.0. Uppy automatically batches updates, while in Ember you need to manually manage run loops in performance-critical situations.
-
-## Polymer
-
-Polymer is yet another Google-sponsored project and in fact was a source of inspiration for Uppy.js as well. Uppy.js' components can be loosely compared to Polymer's custom elements, and both provide a very similar development style. The biggest difference is that Polymer is built upon the latest Web Components features, and requires non-trivial polyfills to work (with degraded performance) in browsers that don't support those features natively. In contrast, Uppy.js works without any dependencies down to IE9.
-
-Also, in Polymer 1.0 the team has really made its data-binding system very limited in order to compensate for the performance. For example, the only expressions supported in Polymer templates are the boolean negation and single method calls. Its computed property implementation is also not very flexible.
-
-Finally, when deploying to production, Polymer elements need to be bundled via a Polymer-specific tool called vulcanizer. In comparison, single file Uppy components can leverage everything the Webpack ecosystem has to offer, and thus you can easily use ES6 and any CSS pre-processors you want in your Uppy components.
-
-## Riot
-
-Riot 2.0 provides a similar component-based development model (which is called a "tag" in Riot), with a minimal and beautifully designed API. I think Riot and Uppy share a lot in design philosophies. However, despite being a bit heavier than Riot, Uppy does offer some significant advantages over Riot:
-
-- True conditional rendering (Riot renders all if branches and simply show/hide them)
-- A far-more powerful router (Riot’s routing API is just way too minimal)
-- More mature tooling support (see webpack + uppy-loader)
-- Transition effect system (Riot has none)
-- Better performance. (Riot in fact uses dirty checking rather than a virtual-dom, and thus suffers from the same performance issues with Angular.)

website/src/guide/components.md

@@ -1,899 +0,0 @@
----
-title: Components
-type: guide
-order: 12
----
-
-## Using Components
-
-### Registration
-
-We've learned in the previous sections that we can create a component constructor using `Uppy.extend()`:
-
-``` js
-var MyComponent = Uppy.extend({
-  // options...
-})
-```
-
-To use this constructor as a component, you need to **register** it with `Uppy.component(tag, constructor)`:
-
-``` js
-// Globally register the component with tag: my-component
-Uppy.component('my-component', MyComponent)
-```
-
-Once registered, the component can now be used in a parent instance's template as a custom element, `<my-component>`. Make sure the component is registered **before** you instantiate your root Uppy instance. Here's the full example:
-
-``` html
-<div id="example">
-  <my-component></my-component>
-</div>
-```
-
-``` js
-// define
-var MyComponent = Uppy.extend({
-  template: '<div>A custom component!</div>'
-})
-
-// register
-Uppy.component('my-component', MyComponent)
-
-// create a root instance
-new Uppy({
-  el: '#example'
-})
-```
-
-Which will render:
-
-``` html
-<div id="example">
-  <div>A custom component!</div>
-</div>
-```
-
-{% raw %}
-<div id="example" class="demo">
-  <my-component></my-component>
-</div>
-<script>
-Uppy.component('my-component', {
-  template: '<div>A custom component!</div>'
-})
-new Uppy({ el: '#example' })
-</script>
-{% endraw %}
-
-Note the component's template **replaces** the custom element, which only serves as a **mounting point**. This behavior can be configured using the `replace` instance option.
-
-### Local Registration
-
-You don't have to register every component globally. You can make a component available only in the scope of another component by registering it with the `components` instance option:
-
-``` js
-var Child = Uppy.extend({ /* ... */ })
-
-var Parent = Uppy.extend({
-  template: '...',
-  components: {
-    // <my-component> will only be available in Parent's template
-    'my-component': Child
-  }
-})
-```
-
-The same encapsulation applies for other assets types such as directives, filters and transitions.
-
-### Registration Sugar
-
-To make things easier, you can directly pass in the options object instead of an actual constructor to `Uppy.component()` and the `component` option. Uppy.js will automatically call `Uppy.extend()` for you under the hood:
-
-``` js
-// extend and register in one step
-Uppy.component('my-component', {
-  template: '<div>A custom component!</div>'
-})
-
-// also works for local registration
-var Parent = Uppy.extend({
-  components: {
-    'my-component': {
-      template: '<div>A custom component!</div>'
-    }
-  }
-})
-```
-
-### Component Option Caveats
-
-Most of the options that can be passed into the Uppy constructor can be used in `Uppy.extend()`, with two special cases: `data` and `el`. Imagine we simply pass an object as `data` to `Uppy.extend()`:
-
-``` js
-var data = { a: 1 }
-var MyComponent = Uppy.extend({
-  data: data
-})
-```
-
-The problem with this is that the same `data` object will be shared across all instances of `MyComponent`! This is most likely not what we want, so we should use a function that returns a fresh object as the `data` option:
-
-``` js
-var MyComponent = Uppy.extend({
-  data: function () {
-    return { a: 1 }
-  }
-})
-```
-
-The `el` option also requires a function value when used in `Uppy.extend()`, for exactly the same reason.
-
-### `is` attribute
-
-Some HTML elements, for example `<table>`, has restrictions on what elements can appear inside it. Custom elements that are not in the whitelist will be hoisted out and thus not render properly. In such cases you should use the `is` special attribute to indicate a custom element:
-
-``` html
-<table>
-  <tr is="my-component"></tr>
-</table>
-```
-
-## Props
-
-### Passing Data with Props
-
-Every component instance has its own **isolated scope**. This means you cannot (and should not) directly reference parent data in a child component's template. Data can be passed down to child components using **props**.
-
-A "prop" is a field on a component's data that is expected to be passed down from its parent component. A child component needs to explicitly declare the props it expects to receive using the [`props` option](/api/#props):
-
-``` js
-Uppy.component('child', {
-  // declare the props
-  props: ['msg'],
-  // the prop can be used inside templates, and will also
-  // be set as `this.msg`
-  template: '<span>{{ msg }}</span>'
-})
-```
-
-Then, we can pass a plain string to it like so:
-
-``` html
-<child msg="hello!"></child>
-```
-
-**Result:**
-
-{% raw %}
-<div id="prop-example-1" class="demo">
-  <child msg="hello!"></child>
-</div>
-<script>
-new Uppy({
-  el: '#prop-example-1',
-  components: {
-    child: {
-      props: ['msg'],
-      template: '<span>{{ msg }}</span>'
-    }
-  }
-})
-</script>
-{% endraw %}
-
-### camelCase vs. kebab-case
-
-HTML attributes are case-insensitive. When using camelCased prop names as attributes, you need to use their kebab-case (hyphen-delimited) equivalents:
-
-``` js
-Uppy.component('child', {
-  // camelCase in JavaScript
-  props: ['myMessage'],
-  template: '<span>{{ myMessage }}</span>'
-})
-```
-
-``` html
-<!-- kebab-case in HTML -->
-<child my-message="hello!"></child>
-```
-
-### Dynamic Props
-
-Similar to binding a normal attribute to an expression, we can also use `v-bind` for dynamically binding props to data on the parent. Whenever the data is updated in the parent, it will also flow down to the child:
-
-``` html
-<div>
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
-</div>
-```
-
-It is often simpler to use the shorthand syntax for `v-bind`:
-
-``` html
-<child :my-message="parentMsg"></child>
-```
-
-**Result:**
-
-{% raw %}
-<div id="demo-2" class="demo">
-  <input v-model="parentMsg">
-  <br>
-  <child v-bind:my-message="parentMsg"></child>
-</div>
-<script>
-new Uppy({
-  el: '#demo-2',
-  data: {
-    parentMsg: 'Message from parent'
-  },
-  components: {
-    child: {
-      props: ['myMessage'],
-      template: '<span>{{myMessage}}</span>'
-    }
-  }
-})
-</script>
-{% endraw %}
-
-### Literal vs. Dynamic
-
-A common mistake beginners tend to make is attempting to pass down a number using the literal syntax:
-
-``` html
-<!-- this passes down a plain string "1" -->
-<comp some-prop="1"></comp>
-```
-
-However, since this is a literal prop, its value is passed down a the plain string `"1"`, instead of an actual number. If we want to pass down an actual JavaScript number, we need to use the dynamic syntax to make its value be evaluated as a JavaScript expression:
-
-``` html
-<!-- this passes down an actual number -->
-<comp :some-prop="1"></comp>
-```
-
-### Prop Binding Types
-
-By default, all props form a **one-way-down** binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This default is meant to prevent child components from accidentally mutating the parent's state, which can make your app's data flow harder to reason about. However, it is also possible to explicitly enforce a two-way or a one-time binding with the `.sync` and `.once` **binding type modifiers**:
-
-Compare the syntax:
-
-``` html
-<!-- default, one-way-down binding -->
-<child :msg="parentMsg"></child>
-
-<!-- explicit two-way binding -->
-<child :msg.sync="parentMsg"></child>
-
-<!-- explicit one-time binding -->
-<child :msg.once="parentMsg"></child>
-```
-
-The two-way binding will sync the change of child's `msg` property back to the parent's `parentMsg` property. The one-time binding, once set up, will not sync future changes between the parent and the child.
-
-<p class="tip">Note that if the prop being passed down is an Object or an Array, it is passed by reference. Mutating the Object or Array itself inside the child **will** affect parent state, regardless of the binding type you are using.</p>
-
-### Prop Validation
-
-It is possible for a component to specify the requirements for the props it is receiving. This is useful when you are authoring a component that is intended to be used by others, as these prop validation requirements essentially constitute your component's API, and ensure your users are using your component correctly. Instead of defining the props as an array of strings, you can use the object hash format that contain validation requirements:
-
-``` js
-Uppy.component('example', {
-  props: {
-    // basic type check (`null` means accept any type)
-    propA: Number,
-    // a required string
-    propB: {
-      type: String,
-      required: true
-    },
-    // a number with default value
-    propC: {
-      type: Number,
-      default: 100
-    },
-    // object/array defaults should be returned from a
-    // factory function
-    propD: {
-      type: Object,
-      default: function () {
-        return { msg: 'hello' }
-      }
-    },
-    // indicate this prop expects a two-way binding. will
-    // raise a warning if binding type does not match.
-    propE: {
-      twoWay: true
-    },
-    // custom validator function
-    propF: {
-      validator: function (value) {
-        return value > 10
-      }
-    }
-  }
-})
-```
-
-The `type` can be one of the following native constructors:
-
-- String
-- Number
-- Boolean
-- Function
-- Object
-- Array
-
-In addition, `type` can also be a custom constructor function and the assertion will be made with an `instanceof` check.
-
-When a prop validation fails, Uppy will refuse to set the value on the child component, and throw a warning if using the development build.
-
-## Parent-Child Communication
-
-### Parent Chain
-
-A child component holds access to its parent component as `this.$parent`. A root Uppy instance will be available to all of its descendants as `this.$root`. Each parent component has an array, `this.$children`, which contains all its child components.
-
-Although it's possible to access any instance the parent chain, you should avoid directly relying on parent data in a child component and prefer passing data down explicitly using props. In addition, it is a very bad idea to mutate parent state from a child component, because:
-
-1. It makes the parent and child tightly coupled;
-
-2. It makes the parent state much harder to reason about when looking at it alone, because its state may be modified by any child! Ideally, only a component itself should be allowed to modify its own state.
-
-### Custom Events
-
-All Uppy instances implement a custom event interface that facilitates communication within a component tree. This event system is independent from the native DOM events and works differently.
-
-Each Uppy instance is an event emitter that can:
-
-- Listen to events using `$on()`;
-
-- Trigger events on self using `$emit()`;
-
-- Dispatch an event that propagates upward along the parent chain using `$dispatch()`;
-
-- Broadcast an event that propagates downward to all descendants using `$broadcast()`.
-
-<p class="tip">Unlike DOM events, Uppy events will automatically stop propagation after triggering callbacks for the first time along a propagation path, unless the callback explicitly returns `true`.</p>
-
-A simple example:
-
-``` html
-<!-- template for child -->
-<template id="child-template">
-  <input v-model="msg">
-  <button v-on:click="notify">Dispatch Event</button>
-</template>
-
-<!-- template for parent -->
-<div id="events-example">
-  <p>Messages: {{ messages | json }}</p>
-  <child></child>
-</div>
-```
-
-``` js
-// register child, which dispatches an event with
-// the current message
-Uppy.component('child', {
-  template: '#child-template',
-  data: function () {
-    return { msg: 'hello' }
-  },
-  methods: {
-    notify: function () {
-      if (this.msg.trim()) {
-        this.$dispatch('child-msg', this.msg)
-        this.msg = ''
-      }
-    }
-  }
-})
-
-// bootstrap parent, which pushes message into an array
-// when receiving the event
-var parent = new Uppy({
-  el: '#events-example',
-  data: {
-    messages: []
-  },
-  // the `events` option simply calls `$on` for you
-  // when the instance is created
-  events: {
-    'child-msg': function (msg) {
-      // `this` in event callbacks are automatically bound
-      // to the instance that registered it
-      this.messages.push(msg)
-    }
-  }
-})
-```
-
-{% raw %}
-<template id="child-template">
-  <input v-model="msg">
-  <button v-on:click="notify">Dispatch Event</button>
-</template>
-
-<div id="events-example" class="demo">
-  <p>Messages: {{ messages | json }}</p>
-  <child></child>
-</div>
-<script>
-Uppy.component('child', {
-  template: '#child-template',
-  data: function () {
-    return { msg: 'hello' }
-  },
-  methods: {
-    notify: function () {
-      if (this.msg.trim()) {
-        this.$dispatch('child-msg', this.msg)
-        this.msg = ''
-      }
-    }
-  }
-})
-
-var parent = new Uppy({
-  el: '#events-example',
-  data: {
-    messages: []
-  },
-  events: {
-    'child-msg': function (msg) {
-      this.messages.push(msg)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-### v-on for Custom Events
-
-The example above is pretty nice, but when we are looking at the parent's code, it's not so obvious where the `"child-msg"` event comes from. It would be better if we can declare the event handler in the template, right where the child component is used. To make this possible, `v-on` can be used to listen for custom events when used on a child component:
-
-``` html
-<child v-on:child-msg="handleIt"></child>
-```
-
-This makes things very clear: when the child triggers the `"child-msg"` event, the parent's `handleIt` method will be called. Any code that affects the parent's state will be inside the `handleIt` parent method; the child is only concerned with triggering the event.
-
-### Child Component Refs
-
-Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using `v-ref`. For example:
-
-``` html
-<div id="parent">
-  <user-profile v-ref:profile></user-profile>
-</div>
-```
-
-``` js
-var parent = new Uppy({ el: '#parent' })
-// access child component instance
-var child = parent.$refs.profile
-```
-
-When `v-ref` is used together with `v-for`, the ref you get will be an Array or an Object containing the child components mirroring the data source.
-
-## Content Distribution with Slots
-
-When using components, it is often desired to compose them like this:
-
-``` html
-<app>
-  <app-header></app-header>
-  <app-footer></app-footer>
-</app>
-```
-
-There are two things to note here:
-
-1. The `<app>` component does not know what content may be present inside its mount target. It is decided by whatever parent component that is using `<app>`.
-
-2. The `<app>` component very likely has its own template.
-
-To make the composition work, we need a way to interweave the parent "content" and the component's own template. This is a process called **content distribution** (or "transclusion" if you are familiar with Angular). Uppy.js implements a content distribution API that is modeled after with the current [Web Components spec draft](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md), using the special `<slot>` element to serve as distribution outlets for the original content.
-
-### Compilation Scope
-
-Before we dig into the API, let's first clarify which scope the contents are compiled in. Imagine a template like this:
-
-``` html
-<child>
-  {{ msg }}
-</child>
-```
-
-Should the `msg` be bound to the parent's data or the child data? The answer is parent. A simple rule of thumb for component scope is:
-
-> Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.
-
-A common mistake is trying to bind a directive to a child property/method in the parent template:
-
-``` html
-<!-- does NOT work -->
-<child v-show="someChildProperty"></child>
-```
-
-Assuming `someChildProperty` is a property on the child component, the example above would not work as intended. The parent's template should not be aware of the state of a child component.
-
-If you need to bind child-scope directives on a component root node, you should do so in the child component's own template:
-
-``` js
-Uppy.component('child-component', {
-  // this does work, because we are in the right scope
-  template: '<div v-show="someChildProperty">Child</div>',
-  data: function () {
-    return {
-      someChildProperty: true
-    }
-  }
-})
-```
-
-Similarly, distributed content will be compiled in the parent scope.
-
-### Single Slot
-
-Parent content will be **discarded** unless the child component template contains at least one `<slot>` outlet. When there is only one slot with no attributes, the entire content fragment will be inserted at its position in the DOM, replacing the slot itself.
-
-Anything originally inside the `<slot>` tags is considered **fallback content**. Fallback content is compiled in the child scope and will only be displayed if the hosting element is empty and has no content to be inserted.
-
-Suppose we have a component with the following template:
-
-``` html
-<div>
-  <h1>This is my component!</h1>
-  <slot>
-    This will only be displayed if there is no content
-    to be distributed.
-  </slot>
-</div>
-```
-
-Parent markup that uses the component:
-
-``` html
-<my-component>
-  <p>This is some original content</p>
-  <p>This is some more original content</p>
-</my-component>
-```
-
-The rendered result will be:
-
-``` html
-<div>
-  <h1>This is my component!</h1>
-  <p>This is some original content</p>
-  <p>This is some more original content</p>
-</div>
-```
-
-### Named Slots
-
-`<slot>` elements have a special attribute, `name`, which can be used to further customize how content should be distributed. You can have multiple slots with different names. A named slot will match any element that has a corresponding `slot` attribute in the content fragment.
-
-There can still be one unnamed slot, which is the **default slot** that serves as a catch-all outlet for any unmatched content. If there is no default slot, unmatched content will be discarded.
-
-For example, suppose we have a `multi-insertion` component with the following template:
-
-``` html
-<div>
-  <slot name="one"></slot>
-  <slot></slot>
-  <slot name="two"></slot>
-</div>
-```
-
-Parent markup:
-
-``` html
-<multi-insertion>
-  <p slot="one">One</p>
-  <p slot="two">Two</p>
-  <p>Default A</p>
-</multi-insertion>
-```
-
-The rendered result will be:
-
-``` html
-<div>
-  <p slot="one">One</p>
-  <p>Default A</p>
-  <p slot="two">Two</p>
-</div>
-```
-
-The content distribution API is a very useful mechanism when designing components that are meant to be composed together.
-
-## Dynamic Components
-
-You can use the same mount point and dynamically switch between multiple components by using the reserved `<component>` element and dynamically bind to its `is` attribute:
-
-``` js
-new Uppy({
-  el: 'body',
-  data: {
-    currentView: 'home'
-  },
-  components: {
-    home: { /* ... */ },
-    posts: { /* ... */ },
-    archive: { /* ... */ }
-  }
-})
-```
-
-``` html
-<component :is="currentView">
-  <!-- component changes when vm.currentview changes! -->
-</component>
-```
-
-If you want to keep the switched-out components alive so that you can preserve its state or avoid re-rendering, you can add a `keep-alive` directive param:
-
-``` html
-<component :is="currentView" keep-alive>
-  <!-- inactive components will be cached! -->
-</component>
-```
-
-### `activate` Hook
-
-When switching components, the incoming component might need to perform some asynchronous operation before it should be swapped in. To control the timing of component swapping, implement the `activate` hook on the incoming component:
-
-``` js
-Uppy.component('activate-example', {
-  activate: function (done) {
-    var self = this
-    loadDataAsync(function (data) {
-      self.someData = data
-      done()
-    })
-  }
-})
-```
-
-Note the `activate` hook is only respected during dynamic component swapping or the initial render for static components - it does not affect manual insertions with instance methods.
-
-### `transition-mode`
-
-The `transition-mode` param attribute allows you to specify how the transition between two dynamic components should be executed.
-
-By default, the transitions for incoming and outgoing components happen simultaneously. This attribute allows you to configure two other modes:
-
-- `in-out`: New component transitions in first, current component transitions out after incoming transition has finished.
-
-- `out-in`: Current component transitions out first, new component transitions in after outgoing transition has finished.
-
-**Example**
-
-``` html
-<!-- fade out first, then fade in -->
-<component
-  :is="view"
-  transition="fade"
-  transition-mode="out-in">
-</component>
-```
-
-``` css
-.fade-transition {
-  transition: opacity .3s ease;
-}
-.fade-enter, .fade-leave {
-  opacity: 0;
-}
-```
-
-{% raw %}
-<div id="transition-mode-demo" class="demo">
-  <input v-model="view" type="radio" value="v-a" id="a" name="view"><label for="a">A</label>
-  <input v-model="view" type="radio" value="v-b" id="b" name="view"><label for="b">B</label>
-  <component
-    :is="view"
-    transition="fade"
-    transition-mode="out-in">
-  </component>
-</div>
-<style>
-  .fade-transition {
-    transition: opacity .3s ease;
-  }
-  .fade-enter, .fade-leave {
-    opacity: 0;
-  }
-</style>
-<script>
-new Uppy({
-  el: '#transition-mode-demo',
-  data: {
-    view: 'v-a'
-  },
-  components: {
-    'v-a': {
-      template: '<div>Component A</div>'
-    },
-    'v-b': {
-      template: '<div>Component B</div>'
-    }
-  }
-})
-</script>
-{% endraw %}
-
-## Misc
-
-### Components and v-for
-
-You can directly use `v-for` on the custom component, like any normal element:
-
-``` html
-<my-component v-for="item in items"></my-component>
-```
-
-However, this won't pass any data to the component, because components have isolated scopes of their own. In order to pass the iterated data into the component, we should also use props:
-
-``` html
-<my-component
-  v-for="item in items"
-  :item="item"
-  :index="$index">
-</my-component>
-```
-
-The reason for not automatically injecting `item` into the component is because that makes the component tightly coupled to how `v-for` works. Being explicit about where its data comes from makes the component reusable in other situations.
-
-### Authoring Reusable Components
-
-When authoring components, it is good to keep in mind whether you intend to reuse this component somewhere else later. It is OK for one-off components to have some tight coupling with each other, but reusable components should define a clean public interface.
-
-The API for a Uppy.js component essentially comes in three parts - props, events and slots:
-
-- **Props** allow the external environment to feed data to the component;
-
-- **Events** allow the component to trigger actions in the external environment;
-
-- **Slots** allow the external environment to insert content into the component's view structure.
-
-With the dedicated shorthand syntax for `v-bind` and `v-on`, the intents can be clearly and succinctly conveyed in the template:
-
-``` html
-<my-component
-  :foo="baz"
-  :bar="qux"
-  @event-a="doThis"
-  @event-b="doThat">
-  <!-- content -->
-  <img slot="icon" src="...">
-  <p slot="main-text">Hello!</p>
-</my-component>
-```
-
-### Async Components
-
-In large applications, we may need to divide the app into smaller chunks, and only load a component from the server when it is actually needed. To make that easier, Uppy.js allows you to define your component as a factory function that asynchronously resolves your component definition. Uppy.js will only trigger the factory function when the component actually needs to be rendered, and will cache the result for future re-renders. For example:
-
-``` js
-Uppy.component('async-example', function (resolve, reject) {
-  setTimeout(function () {
-    resolve({
-      template: '<div>I am async!</div>'
-    })
-  }, 1000)
-})
-```
-
-The factory function receives a `resolve` callback, which should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed. The `setTimeout` here is simply for demonstration; How to retrieve the component is entirely up to you. One recommended approach is to use async components together with [Webpack's code-splitting feature](http://webpack.github.io/docs/code-splitting.html):
-
-``` js
-Uppy.component('async-webpack-example', function (resolve) {
-  // this special require syntax will instruct webpack to
-  // automatically split your built code into bundles which
-  // are automatically loaded over ajax requests.
-  require(['./my-async-component'], resolve)
-})
-```
-
-### Assets Naming Convention
-
-Some assets, such as components and directives, appear in templates in the form of HTML attributes or HTML custom tags. Since HTML attribute names and tag names are **case-insensitive**, we often need to name our assets using kebab-case instead of camelCase, which can be a bit inconvenient.
-
-Uppy.js actually supports naming your assets using camelCase or PascalCase, and automatically resolves them as kebab-case in templates (similar to the name conversion for props):
-
-``` js
-// in a component definition
-components: {
-  // register using camelCase
-  myComponent: { /*... */ }
-}
-```
-
-``` html
-<!-- use dash case in templates -->
-<my-component></my-component>
-```
-
-This works nicely with [ES6 object literal shorthand](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_6):
-
-``` js
-// PascalCase
-import TextBox from './components/text-box';
-import DropdownMenu from './components/dropdown-menu';
-
-export default {
-  components: {
-    // use in templates as <text-box> and <dropdown-menu>
-    TextBox,
-    DropdownMenu
-  }
-}
-```
-
-### Recursive Component
-
-Components can recursively invoke itself in its own template, however, it can only do so when it has the `name` option:
-
-``` js
-var StackOverflow = Uppy.extend({
-  name: 'stack-overflow',
-  template:
-    '<div>' +
-      // recursively invoke self
-      '<stack-overflow></stack-overflow>' +
-    '</div>'
-})
-```
-
-A component like the above will result in a "max stack size exceeded" error, so make sure recursive invocation is conditional. When you register a component globally using `Uppy.component()`, the global ID is automatically set as the component's `name` option.
-
-### Fragment Instance
-
-When you use the `template` option, the content of the template will replace the element the Uppy instance is mounted on. It is therefore recommended to always include a single root-level element in templates.
-
-There are a few conditions that will turn a Uppy instance into a **fragment instance**:
-
-1. Template contains multiple top-level elements.
-2. Template contains only plain text.
-3. Template contains only another component.
-4. Template contains only an element directive, e.g. `<partial>` or uppy-router's `<router-view>`.
-5. Template root node has a flow-control directive, e.g. `v-if` or `v-for`.
-
-The reason is that all of the above cause the instance to have an unknown number of top-level elements, so it has to manage its DOM content as a fragment. A fragment instance will still render the content correctly. However, it will **not** have a root node, and its `$el` will point to an "anchor node", which is an empty Text node (or a Comment node in debug mode).
-
-What's more important though, is that **non-flow-control directives, non-prop attributes and transitions on the component element will be ignored**, because there is no root element to bind them to:
-
-``` html
-<!-- doesn't work due to no root element -->
-<example v-show="ok" transition="fade"></example>
-
-<!-- props work -->
-<example :prop="someData"></example>
-
-<!-- flow control works, but without transitions -->
-<example v-if="ok"></example>
-```
-
-There are, of course, valid use cases for fragment instances, but it is in general a good idea to give your component template a single, plain root element. It ensures directives and attributes on the component element to be properly transferred, and also results in slightly better performance.
-
-### Inline Template
-
-When the `inline-template` special attribute is present on a child component, the component will use its inner content as its template, rather than treating it as distributed content. This allows more flexible template-authoring.
-
-``` html
-<my-component inline-template>
-  <p>These are compiled as the component's own template</p>
-  <p>Not parent's transclusion content.</p>
-</my-component>
-```
-
-However, `inline-template` makes the scope of your templates harder to reason about, and makes the component's template compilation un-cachable. As a best practice, prefer defining templates inside the component using the `template` option.

website/src/guide/computed.md

@@ -1,135 +0,0 @@
----
-title: Computed Properties
-type: guide
-order: 5
----
-
-In-template expressions are very convenient, but they are really meant for simple operations only. Templates are meant to describe the structure of your view. Putting too much logic into your templates can make them bloated and hard to maintain. This is why Uppy.js limits binding expressions to one expression only. For any logic that requires more than one expression, you should use a **computed property**.
-
-### Basic Example
-
-``` html
-<div id="example">
-  a={{ a }}, b={{ b }}
-</div>
-```
-
-``` js
-var vm = new Uppy({
-  el: '#example',
-  data: {
-    a: 1
-  },
-  computed: {
-    // a computed getter
-    b: function () {
-      // `this` points to the vm instance
-      return this.a + 1
-    }
-  }
-})
-```
-
-Result:
-
-{% raw %}
-<div id="example" class="demo">
-  a={{ a }}, b={{ b }}
-</div>
-<script>
-var vm = new Uppy({
-  el: '#example',
-  data: {
-    a: 1
-  },
-  computed: {
-    b: function () {
-      return this.a + 1
-    }
-  }
-})
-</script>
-{% endraw %}
-
-Here we have declared a computed property `b`. The function we provided will be used as the getter function for the property `vm.b`:
-
-``` js
-console.log(vm.b) // -> 2
-vm.a = 2
-console.log(vm.b) // -> 3
-```
-
-You can open the console and play with the example vm yourself. The value of `vm.b` is always dependent on the value of `vm.a`.
-
-You can data-bind to computed properties in templates just like a normal property. Uppy is aware that `vm.b` depends on `vm.a`, so it will update any bindings that depends on `vm.b` when `vm.a` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function is pure and has no side effects, which makes it easy to test and reason about.
-
-### Computed Property vs. $watch
-
-Uppy.js does provide an API method called `$watch` that allows you to observe data changes on a Uppy instance. When you have some data that needs to change based on some other data, it is tempting to use `$watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `$watch` callback. Consider this example:
-
-``` html
-<div id="demo">{{fullName}}</div>
-```
-
-``` js
-var vm = new Uppy({
-  data: {
-    firstName: 'Foo',
-    lastName: 'Bar',
-    fullName: 'Foo Bar'
-  }
-})
-
-vm.$watch('firstName', function (val) {
-  this.fullName = val + ' ' + this.lastName
-})
-
-vm.$watch('lastName', function (val) {
-  this.fullName = this.firstName + ' ' + val
-})
-```
-
-The above code is imperative and repetitive. Compare it with a computed property version:
-
-``` js
-var vm = new Uppy({
-  data: {
-    firstName: 'Foo',
-    lastName: 'Bar'
-  },
-  computed: {
-    fullName: function () {
-      return this.firstName + ' ' + this.lastName
-    }
-  }
-})
-```
-
-Much better, isn't it?
-
-### Computed Setter
-
-Computed properties are by default getter-only, but you can also provide a setter when you need it:
-
-``` js
-// ...
-computed: {
-  fullName: {
-    // getter
-    get: function () {
-      return this.firstName + ' ' + this.lastName
-    },
-    // setter
-    set: function (newValue) {
-      var names = newValue.split(' ')
-      this.firstName = names[0]
-      this.lastName = names[names.length - 1]
-    }
-  }
-}
-// ...
-```
-
-Now when you call `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly.
-
-The technical details behind how computed properties are updated are [discussed in another section](reactivity.html#Inside_Computed_Properties) dedicated to the reactivity system.

website/src/guide/conditional.md

@@ -1,78 +0,0 @@
----
-title: Conditional Rendering
-type: guide
-order: 7
----
-
-## v-if
-
-In string templates, for example Handlebars, we would write a conditional block like this:
-
-``` html
-<!-- Handlebars template -->
-{{#if ok}}
-  <h1>Yes</h1>
-{{/if}}
-```
-
-In Uppy.js, we use the `v-if` directive to achieve the same:
-
-``` html
-<h1 v-if="ok">Yes</h1>
-```
-
-It is also possible to add an "else" block with `v-else`:
-
-``` html
-<h1 v-if="ok">Yes</h1>
-<h1 v-else>No</h1>
-```
-
-## Template v-if
-
-Because `v-if` is a directive, it has to be attached to a single element. But what if we want to toggle more than one element? In this case we can use `v-if` on a `<template>` element, which serves as an invisible wrapper. The final rendered result will not include the `<template>` element.
-
-``` html
-<template v-if="ok">
-  <h1>Title</h1>
-  <p>Paragraph 1</p>
-  <p>Paragraph 2</p>
-</template>
-```
-
-## v-show
-
-Another option for conditionally displaying an element is the `v-show` directive. The usage is largely the same:
-
-``` html
-<h1 v-show="ok">Hello!</h1>
-```
-
-The difference is that an element with `v-show` will always be rendered and remain in the DOM; `v-show` simply toggles the `display` CSS property of the element.
-
-Note that `v-show` doesn't support the `<template>` syntax.
-
-## v-else
-
-You can use the `v-else` directive to indicate an "else block" for `v-if` or `v-show`:
-
-``` html
-<div v-if="Math.random() > 0.5">
-  Sorry
-</div>
-<div v-else>
-  Not sorry
-</div>
-```
-
-The `v-else` element must following immediately after the `v-if` or `v-show` element - otherwise it will not be recognized.
-
-## v-if vs. v-show
-
-When a `v-if` block is toggled, Uppy.js will have to perform a partial compilation/teardown process, because the template content inside `v-if` can also contain data bindings or child components. `v-if` is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.
-
-`v-if` is also **lazy**: if the condition is false on initial render, it will not do anything - partial compilation won't start until the condition becomes true for the first time (and the compilation is subsequently cached).
-
-In comparison, `v-show` is much simpler - the element is always compiled and preserved, with just simple CSS-based toggling.
-
-Generally speaking, `v-if` has higher toggle costs while `v-show` has higher initial render costs. So prefer `v-show` if you need to toggle something very often, and prefer `v-if` if the condition is unlikely to change at runtime.

website/src/guide/custom-directive.md

@@ -1,282 +0,0 @@
----
-title: Custom Directives
-type: guide
-order: 14
----
-
-## Basics
-
-In addition to the default set of directives shipped in core, Uppy.js also allows you to register custom directives. Custom directives provide a mechanism for mapping data changes to arbitrary DOM behavior.
-
-You can register a global custom directive with the `Uppy.directive(id, definition)` method, passing in a **directive id** followed by a **definition object**. You can also register a local custom directive by including it in a component's `directives` option.
-
-### Hook Functions
-
-A definition object can provide several hook functions (all optional):
-
-- **bind**: called only once, when the directive is first bound to the element.
-
-- **update**: called for the first time immediately after `bind` with the initial value, then again whenever the binding value changes. The new value and the previous value are provided as the argument.
-
-- **unbind**: called only once, when the directive is unbound from the element.
-
-**Example**
-
-``` js
-Uppy.directive('my-directive', {
-  bind: function () {
-    // do preparation work
-    // e.g. add event listeners or expensive stuff
-    // that needs to be run only once
-  },
-  update: function (newValue, oldValue) {
-    // do something based on the updated value
-    // this will also be called for the initial value
-  },
-  unbind: function () {
-    // do clean up work
-    // e.g. remove event listeners added in bind()
-  }
-})
-```
-
-Once registered, you can use it in Uppy.js templates like this (remember to add the `v-` prefix):
-
-``` html
-<div v-my-directive="someValue"></div>
-```
-
-When you only need the `update` function, you can pass in a single function instead of the definition object:
-
-``` js
-Uppy.directive('my-directive', function (value) {
-  // this function will be used as update()
-})
-```
-
-### Directive Instance Properties
-
-All the hook functions will be copied into the actual **directive object**, which you can access inside these functions as their `this` context. The directive object exposes some useful properties:
-
-- **el**: the element the directive is bound to.
-- **vm**: the context ViewModel that owns this directive.
-- **expression**: the expression of the binding, excluding arguments and filters.
-- **arg**: the argument, if present.
-- **name**: the name of the directive, without the prefix.
-- **modifiers**: an object containing modifiers, if any.
-- **descriptor**: an object that contains the parsing result of the entire directive.
-- **params**: an object containing param attributes. [Explained below](#params).
-
-<p class="tip">You should treat all these properties as read-only and never modify them. You can attach custom properties to the directive object too, but be careful not to accidentally overwrite existing internal ones.</p>
-
-An example of a custom directive using some of these properties:
-
-``` html
-<div id="demo" v-demo:hello.a.b="msg"></div>
-```
-
-``` js
-Uppy.directive('demo', {
-  bind: function () {
-    console.log('demo bound!')
-  },
-  update: function (value) {
-    this.el.innerHTML =
-      'name - '       + this.name + '<br>' +
-      'expression - ' + this.expression + '<br>' +
-      'argument - '   + this.arg + '<br>' +
-      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
-      'value - '      + value
-  }
-})
-var demo = new Uppy({
-  el: '#demo',
-  data: {
-    msg: 'hello!'
-  }
-})
-```
-
-**Result**
-
-<div id="demo" v-demo:hello.a.b="msg"></div>
-<script>
-Uppy.directive('demo', {
-  bind: function () {
-    console.log('demo bound!')
-  },
-  update: function (value) {
-    this.el.innerHTML =
-      'name - ' + this.name + '<br>' +
-      'expression - ' + this.expression + '<br>' +
-      'argument - ' + this.arg + '<br>' +
-      'modifiers - '  + JSON.stringify(this.modifiers) + '<br>' +
-      'value - ' + value
-  }
-})
-var demo = new Uppy({
-  el: '#demo',
-  data: {
-    msg: 'hello!'
-  }
-})
-</script>
-
-### Object Literals
-
-If your directive needs multiple values, you can also pass in a JavaScript object literal. Remember, directives can take any valid JavaScript expression:
-
-``` html
-<div v-demo="{ color: 'white', text: 'hello!' }"></div>
-```
-
-``` js
-Uppy.directive('demo', function (value) {
-  console.log(value.color) // "white"
-  console.log(value.text) // "hello!"
-})
-```
-
-### Literal Modifier
-
-When a directive is used with the literal modifier, its attribute value will be interpreted as a plain string and passed directly into the `update` method. The `update` method will also be called only once, because a plain string cannot be reactive.
-
-``` html
-<div v-demo.literal="foo bar baz">
-```
-``` js
-Uppy.directive('demo', function (value) {
-  console.log(value) // "foo bar baz"
-})
-```
-
-### Element Directives
-
-In some cases, we may want our directive to be used in the form of a custom element rather than as an attribute. This is very similar to Angular's notion of "E" mode directives. Element directives provide a lighter-weight alternative to full-blown components (which are explained later in the guide). You can register a custom element directive like so:
-
-``` js
-Uppy.elementDirective('my-directive', {
-  // same API as normal directives
-  bind: function () {
-    // manipulate this.el...
-  }
-})
-```
-
-Then, instead of:
-
-``` html
-<div v-my-directive></div>
-```
-
-We can write:
-
-``` html
-<my-directive></my-directive>
-```
-
-Element directives cannot accept arguments or expressions, but it can read the element's attributes to determine its behavior.
-
-A big difference from normal directives is that element directives are **terminal**, which means once Uppy encounters an element directive, it will completely skip that element - only the element directive itself will be able to manipulate that element and its children.
-
-## Advanced Options
-
-### params
-
-Custom directive can provide a `params` array, and the Uppy compiler will automatically extract these attributes on the element that the directive is bound to. Example:
-
-``` html
-<div v-example a="hi"></div>
-```
-``` js
-Uppy.directive('example', {
-  params: ['a'],
-  bind: function () {
-    console.log(this.params.a) // -> "hi"
-  }
-})
-```
-
-This API also supports dynamic attributes. The `this.params[key]` value is automatically kept up-to-date. In addition, you can specify a callback when the value has changed:
-
-``` html
-<div v-example v-bind:a="someValue"></div>
-```
-``` js
-Uppy.directive('example', {
-  params: ['a'],
-  paramWatchers: {
-    a: function (val, oldVal) {
-      console.log('a changed!')
-    }
-  }
-})
-```
-
-### deep
-
-If your custom directive is expected to be used on an Object, and it needs to trigger `update` when a nested property inside the object changes, you need to pass in `deep: true` in your directive definition.
-
-``` html
-<div v-my-directive="obj"></div>
-```
-
-``` js
-Uppy.directive('my-directive', {
-  deep: true,
-  update: function (obj) {
-    // will be called when nested properties in `obj`
-    // changes.
-  }
-})
-```
-
-### twoWay
-
-If your directive expects to write data back to the Uppy instance, you need to pass in `twoWay: true`. This option allows the use of `this.set(value)` inside the directive:
-
-``` js
-Uppy.directive('example', {
-  twoWay: true,
-  bind: function () {
-    this.handler = function () {
-      // set data back to the vm.
-      // If the directive is bound as v-example="a.b.c",
-      // this will attempt to set `vm.a.b.c` with the
-      // given value.
-      this.set(this.el.value)
-    }.bind(this)
-    this.el.addEventListener('input', this.handler)
-  },
-  unbind: function () {
-    this.el.removeEventListener('input', this.handler)
-  }
-})
-```
-
-### acceptStatement
-
-Passing in `acceptStatement:true` enables your custom directive to accept inline statements like `v-on` does:
-
-``` html
-<div v-my-directive="a++"></div>
-```
-
-``` js
-Uppy.directive('my-directive', {
-  acceptStatement: true,
-  update: function (fn) {
-    // the passed in value is a function which when called,
-    // will execute the "a++" statement in the owner vm's
-    // scope.
-  }
-})
-```
-
-Use this wisely though, because in general you want to avoid side-effects in your templates.
-
-### priority
-
-You can optionally provide a priority number for your directive (defaults to 1000). A directive with a higher priority will be processed earlier than other directives on the same element. Directives with the same priority will be processed in the order they appear in the element's attribute list, although that order is not guaranteed to be consistent in different browsers.
-
-You can checkout the priorities for some built-in directives in the [API reference](/api/#Directives). Additionally, flow control directives `v-if` and `v-for` always have the highest priority in the compilation process.

website/src/guide/custom-filter.md

@@ -1,101 +0,0 @@
----
-title: Custom Filters
-type: guide
-order: 15
----
-
-## Basics
-
-Similar to custom directives, you can register a custom filter with the global `Uppy.filter()` method, passing in a **filterID** and a **filter function**. The filter function takes a value as the argument and returns the transformed value:
-
-``` js
-Uppy.filter('reverse', function (value) {
-  return value.split('').reverse().join('')
-})
-```
-
-``` html
-<!-- 'abc' => 'cba' -->
-<span v-text="message | reverse"></span>
-```
-
-The filter function also receives any inline arguments:
-
-``` js
-Uppy.filter('wrap', function (value, begin, end) {
-  return begin + value + end
-})
-```
-
-``` html
-<!-- 'hello' => 'before hello after' -->
-<span v-text="message | wrap 'before' 'after'"></span>
-```
-
-## Two-way Filters
-
-Up till now we have used filters to transform values coming from the model and before displaying them in the view. But it is also possible to define a filter that transforms the value before it is written back to the model from the view (input elements):
-
-``` js
-Uppy.filter('currencyDisplay', {
-  // model -> view
-  // formats the value when updating the input element.
-  read: function(val) {
-    return '$'+val.toFixed(2)
-  },
-  // view -> model
-  // formats the value when writing to the data.
-  write: function(val, oldVal) {
-    var number = +val.replace(/[^\d.]/g, '')
-    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
-  }
-})
-```
-
-Demo:
-
-{% raw %}
-<div id="two-way-filter-demo" class="demo">
-  <input type="text" v-model="money | currencyDisplay">
-  <p>Model value: {{money}}</p>
-</div>
-<script>
-new Uppy({
-  el: '#two-way-filter-demo',
-  data: {
-    money: 123.45
-  },
-  filters: {
-    currencyDisplay: {
-      read: function(val) {
-        return '$'+val.toFixed(2)
-      },
-      write: function(val, oldVal) {
-        var number = +val.replace(/[^\d.]/g, '')
-        return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
-      }
-    }
-  }
-})
-</script>
-{% endraw %}
-
-## Dynamic Arguments
-
-If a filter argument is not enclosed by quotes, it will be evaluated dynamically in the current vm's data context. In addition, the filter function is always invoked using the current vm as its `this` context. For example:
-
-``` html
-<input v-model="userInput">
-<span>{{msg | concat userInput}}</span>
-```
-
-``` js
-Uppy.filter('concat', function (value, input) {
-  // here `input` === `this.userInput`
-  return value + input
-})
-```
-
-For this simple example above, you can achieve the same result with just an expression, but for more complicated procedures that need more than one statement, you need to put them either in a computed property or a custom filter.
-
-The built-in `filterBy` and `orderBy` filters are both filters that perform non-trivial work on the Array being passed in and relies on the current state of the owner Uppy instance.

website/src/guide/events.md

@@ -1,183 +0,0 @@
----
-title: Methods and Event Handling
-type: guide
-order: 9
----
-
-## Method Handler
-
-We can then use the `v-on` directive to listen to DOM events:
-
-``` html
-<div id="example">
-  <button v-on:click="greet">Greet</button>
-</div>
-```
-
-We are binding a click event listener to a method named `greet`. Here's how to define that method in our Uppy instance:
-
-``` js
-var vm = new Uppy({
-  el: '#example',
-  data: {
-    name: 'Uppy.js'
-  },
-  // define methods under the `methods` object
-  methods: {
-    greet: function (event) {
-      // `this` inside methods point to the Uppy instance
-      alert('Hello ' + this.name + '!')
-      // `event` is the native DOM event
-      alert(event.target.tagName)
-    }
-  }
-})
-
-// you can invoke methods in JavaScript too
-vm.greet() // -> 'Hello Uppy.js!'
-```
-
-Test it yourself:
-
-{% raw %}
-<div id="example" class="demo">
-  <button v-on:click="greet">Greet</button>
-</div>
-<script>
-var vm = new Uppy({
-  el: '#example',
-  data: {
-    name: 'Uppy.js'
-  },
-  // define methods under the `methods` object
-  methods: {
-    greet: function (event) {
-      // `this` inside methods point to the vm
-      alert('Hello ' + this.name + '!')
-      // `event` is the native DOM event
-      alert(event.target.tagName)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-## Inline Statement Handler
-
-Instead of binding directly to a method name, we can also use an inline JavaScript statement:
-
-``` html
-<div id="example-2">
-  <button v-on:click="say('hi')">Say Hi</button>
-  <button v-on:click="say('what')">Say What</button>
-</div>
-```
-``` js
-new Uppy({
-  el: '#example-2',
-  methods: {
-    say: function (msg) {
-      alert(msg)
-    }
-  }
-})
-```
-
-Result:
-{% raw %}
-<div id="example-2" class="demo">
-  <button v-on:click="say('hi')">Say Hi</button>
-  <button v-on:click="say('what')">Say What</button>
-</div>
-<script>
-new Uppy({
-  el: '#example-2',
-  methods: {
-    say: function (msg) {
-      alert(msg)
-    }
-  }
-})
-</script>
-{% endraw %}
-
-Similar to the restrictions on inline expressions, event handlers are restricted to **one statement only**.
-
-Sometimes we also need to access the original DOM event in an inline statement handler. You can pass it into a method using the special `$event` variable:
-
-``` html
-<button v-on:click="say('hello!', $event)">Submit</button>
-```
-
-``` js
-// ...
-methods: {
-  say: function (msg, event) {
-    // now we have access to the native event
-    event.preventDefault()
-  }
-}
-```
-
-## Event Modifiers
-
-It is a very common need to call `event.preventDefault()` or `event.stopPropagation()` inside event handlers. Although we can do this easily inside methods, it would be better if the methods can be purely about data logic rather than having to deal with DOM event details.
-
-To address this problem, Uppy.js provides two **event modifiers** for `v-on`: `.prevent` and `.stop`. Recall that modifiers are directive postfixes denoted by a dot:
-
-``` html
-<!-- the click event's propagation will be stopped -->
-<a v-on:click.stop="doThis"></a>
-
-<!-- the submit event will no longer reload the page -->
-<form v-on:submit.prevent="onSubmit"></form>
-
-<!-- modifiers can be chained -->
-<a v-on:click.stop.prevent="doThat">
-
-<!-- just the modifier -->
-<form v-on:submit.prevent></form>
-```
-
-## Key Modifiers
-
-When listening for keyboard events, we often need to check for common key codes. Uppy.js also allows adding key modifiers for `v-on` when listening for key events:
-
-``` html
-<!-- only call vm.submit() when the keyCode is 13 -->
-<input v-on:keyup.13="submit">
-```
-
-Remembering all the keyCodes is a hassle, so Uppy.js provides aliases for most commonly used keys:
-
-``` html
-<!-- same as above -->
-<input v-on:keyup.enter="submit">
-
-<!-- also works for shorthand -->
-<input @keyup.enter="submit">
-```
-
-Here's the full list of key modifier aliases:
-
-- enter
-- tab
-- delete
-- esc
-- space
-- up
-- down
-- left
-- right
-
-In addition, single letter key aliases are also supported in 1.0.8+.
-
-## Why Listeners in HTML?
-
-You might be concerned that this whole event listening approach violates the good old rules about "separation of concern". Rest assured - since all Uppy.js handler functions and expressions are strictly bound to the ViewModel that's handling the current View, it won't cause any maintenance difficulty. In fact, there are several benefits in using `v-on`:
-
-1. It makes it easier to locate the handler function implementations within your JS code by simply skimming the HTML template.
-
-2. Since you don't have to manually attach event listeners in JS, your ViewModel code can be pure logic and DOM-free. This makes it easier to test.
-
-3. When a ViewModel is destroyed, all event listeners are automatically removed. You don't need to worry about cleaning it up yourself.

website/src/guide/forms.md

@@ -1,332 +0,0 @@
----
-title: Form Input Bindings
-type: guide
-order: 10
----
-
-## Basics Usage
-
-You can use the `v-model` directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, `v-model` is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
-
-### Text
-
-``` html
-<span>Message is: {{ message }}</span>
-<br>
-<input type="text" v-model="message" placeholder="edit me">
-```
-
-{% raw %}
-<div id="example-1" class="demo">
-  <span>Message is: {{ message }}</span><br>
-  <input type="text" v-model="message" placeholder="edit me">
-</div>
-<script>
-new Uppy({
-  el: '#example-1',
-  data: {
-    message: ''
-  }
-})
-</script>
-{% endraw %}
-
-### Checkbox
-
-Single checkbox, boolean value:
-
-``` html
-<input type="checkbox" id="checkbox" v-model="checked">
-<label for="checkbox">{{ checked }}</label>
-```
-{% raw %}
-<div id="example-2" class="demo">
-  <input type="checkbox" id="checkbox" v-model="checked">
-  <label for="checkbox">{{ checked }}</label>
-</div>
-<script>
-new Uppy({
-  el: '#example-2',
-  data: {
-    checked: false
-  }
-})
-</script>
-{% endraw %}
-
-Mutiple checkboxes, bound to the same Array:
-
-``` html
-<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
-<label for="jack">Jack</label>
-<input type="checkbox" id="john" value="John" v-model="checkedNames">
-<label for="john">John</label>
-<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
-<label for="mike">Mike</label>
-<br>
-<span>Checked names: {{ checkedNames | json }}</span>
-```
-{% raw %}
-<div id="example-3" class="demo">
-  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
-  <label for="jack">Jack</label>
-  <input type="checkbox" id="john" value="John" v-model="checkedNames">
-  <label for="john">John</label>
-  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
-  <label for="mike">Mike</label>
-  <br>
-  <span>Checked names: {{ checkedNames | json }}</span>
-</div>
-<script>
-new Uppy({
-  el: '#example-3',
-  data: {
-    checkedNames: []
-  }
-})
-</script>
-{% endraw %}
-
-### Radio
-
-
-``` html
-<input type="radio" id="one" value="One" v-model="picked">
-<label for="one">One</label>
-<br>
-<input type="radio" id="two" value="Two" v-model="picked">
-<label for="two">Two</label>
-<br>
-<span>Picked: {{ picked }}</span>
-```
-{% raw %}
-<div id="example-4" class="demo">
-  <input type="radio" id="one" value="One" v-model="picked">
-  <label for="one">One</label>
-  <br>
-  <input type="radio" id="two" value="Two" v-model="picked">
-  <label for="two">Two</label>
-  <br>
-  <span>Picked: {{ picked }}</span>
-</div>
-<script>
-new Uppy({
-  el: '#example-4',
-  data: {
-    picked: ''
-  }
-})
-</script>
-{% endraw %}
-
-### Select
-
-Single select:
-
-``` html
-<select v-model="selected">
-  <option selected>A</option>
-  <option>B</option>
-  <option>C</option>
-</select>
-<span>Selected: {{ selected }}</span>
-```
-{% raw %}
-<div id="example-5" class="demo">
-  <select v-model="selected">
-    <option selected>A</option>
-    <option>B</option>
-    <option>C</option>
-  </select>
-  <span>Selected: {{ selected }}</span>
-</div>
-<script>
-new Uppy({
-  el: '#example-5',
-  data: {
-    selected: null
-  }
-})
-</script>
-{% endraw %}
-
-Multiple select (bound to Array):
-
-``` html
-<select v-model="selected" multiple>
-  <option selected>A</option>
-  <option>B</option>
-  <option>C</option>
-</select>
-<br>
-<span>Selected: {{ selected | json }}</span>
-```
-{% raw %}
-<div id="example-6" class="demo">
-  <select v-model="selected" multiple style="width: 50px">
-    <option selected>A</option>
-    <option>B</option>
-    <option>C</option>
-  </select>
-  <br>
-  <span>Selected: {{ selected | json }}</span>
-</div>
-<script>
-new Uppy({
-  el: '#example-6',
-  data: {
-    selected: []
-  }
-})
-</script>
-{% endraw %}
-
-Dynamic options rendered with `v-for`:
-
-``` html
-<select v-model="selected">
-  <option v-for="option in options" v-bind:value="option.value">
-    {{ option.text }}
-  </option>
-</select>
-<span>Selected: {{ selected }}</span>
-```
-``` js
-new Uppy({
-  el: '...',
-  data: {
-    selected: 'A',
-    options: [
-      { text: 'One', value: 'A' },
-      { text: 'Two', value: 'B' },
-      { text: 'Three', value: 'C' }
-    ]
-  }
-})
-```
-{% raw %}
-<div id="example-7" class="demo">
-  <select v-model="selected">
-    <option v-for="option in options" v-bind:value="option.value">
-      {{ option.text }}
-    </option>
-  </select>
-  <span>Selected: {{ selected }}</span>
-</div>
-<script>
-new Uppy({
-  el: '#example-7',
-  data: {
-    selected: 'A',
-    options: [
-      { text: 'One', value: 'A' },
-      { text: 'Two', value: 'B' },
-      { text: 'Three', value: 'C' }
-    ]
-  }
-})
-</script>
-{% endraw %}
-
-## Value Bindings
-
-For radio, checkbox and select options, the `v-model` binding values are usually static strings (or booleans for checkbox):
-
-``` html
-<!-- `picked` is a string "a" when checked -->
-<input type="radio" v-model="picked" value="a">
-
-<!-- `toggle` is either true or false -->
-<input type="checkbox" v-model="toggle">
-
-<!-- `selected` is a string "abc" when selected -->
-<select v-model="selected">
-  <option value="abc">ABC</option>
-</select>
-```
-
-But sometimes we may want to bind the value to a dynamic property on the Uppy instance. We can use `v-bind` to achieve that. In addition, using `v-bind` allows us to bind the input value to non-string values.
-
-### Checkbox
-
-``` html
-<input
-  type="checkbox"
-  v-model="toggle"
-  v-bind:true-value="a"
-  v-bind:false-value="b">
-```
-
-``` js
-// when checked:
-vm.toggle === vm.a
-// when unchecked:
-vm.toggle === vm.b
-```
-
-### Radio
-
-``` html
-<input type="radio" v-model="pick" v-bind:value="a">
-```
-
-``` js
-// when checked:
-vm.pick === vm.a
-```
-
-### Select Options
-
-``` html
-<select v-model="selected">
-  <!-- inline object literal -->
-  <option v-bind:value="{ number: 123 }">123</option>
-</select>
-```
-
-``` js
-// when selected:
-typeof vm.selected // -> 'object'
-vm.selected.number // -> 123
-```
-
-## Param Attributes
-
-### lazy
-
-By default, `v-model` syncs the input with the data after each `input` event. You can add a `lazy` attribute to change the behavior to sync after `change` events:
-
-``` html
-<!-- synced after "change" instead of "input" -->
-<input v-model="msg" lazy>
-```
-
-### number
-
-If you want user input to be automatically persisted as numbers, you can add a `number` attribute to your `v-model` managed inputs:
-
-``` html
-<input v-model="age" number>
-```
-
-### debounce
-
-The `debounce` param allows you to set a minimum delay after each keystroke before the input's value is synced to the model. This can be useful when you are performing expensive operations on each update, for example making an Ajax request for type-ahead autocompletion.
-
-``` html
-<input v-model="msg" debounce="500">
-```
- {% raw %}
-<div id="debounce-demo" class="demo">
-  {{ msg }}<br>
-  <input v-model="msg" debounce="500">
-</div>
-<script>
-new Uppy({
-  el:'#debounce-demo',
-  data: { msg: 'edit me' }
-})
-</script>
-{% endraw %}
-
-Note that the `debounce` param does not debounce the user's input events: it debounces the "write" operation to the underlying data. Therefore you should use `vm.$watch()` to react to data changes when using `debounce`. For debouncing real DOM events you should use the [debounce filter](/api/#debounce).

website/src/guide/index.md

@@ -6,7 +6,7 @@ order: 1
 
 Let's start with a quick tour of Uppy's data binding features. If you are more interested in a high-level overview first, check out this [blog post](http://transloadit.com/blog/2015/10/25/transloadit-re-introduction/).
 
-The easiest way to try out Uppy.js is using the [JSFiddle Hello World example](https://jsfiddle.net/yyx990803/okv0rgrk/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page.
+The easiest way to try out Uppy is using the [JSFiddle Hello World example](https://jsfiddle.net/yyx990803/okv0rgrk/). Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the [Installation](/guide/installation.html) page.
 
 ### Hello World
 
@@ -19,7 +19,7 @@ The easiest way to try out Uppy.js is using the [JSFiddle Hello World example](h
 new Uppy({
   el: '#app',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   }
 })
 ```
@@ -31,7 +31,7 @@ new Uppy({
 new Uppy({
   el: '#app',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   }
 })
 </script>
@@ -49,7 +49,7 @@ new Uppy({
 new Uppy({
   el: '#app',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   }
 })
 ```
@@ -62,7 +62,7 @@ new Uppy({
 new Uppy({
   el: '#app2',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   }
 })
 </script>
@@ -85,7 +85,7 @@ new Uppy({
   data: {
     todos: [
       { text: 'Learn JavaScript' },
-      { text: 'Learn Uppy.js' },
+      { text: 'Learn Uppy' },
       { text: 'Build Something Awesome' }
     ]
   }
@@ -105,7 +105,7 @@ new Uppy({
   data: {
     todos: [
       { text: 'Learn JavaScript' },
-      { text: 'Learn Uppy.js' },
+      { text: 'Learn Uppy' },
       { text: 'Build Something Awesome' }
     ]
   }
@@ -125,7 +125,7 @@ new Uppy({
 new Uppy({
   el: '#app',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   },
   methods: {
     reverseMessage: function () {
@@ -143,7 +143,7 @@ new Uppy({
 new Uppy({
   el: '#app4',
   data: {
-    message: 'Hello Uppy.js!'
+    message: 'Hello Uppy!'
   },
   methods: {
     reverseMessage: function () {
@@ -225,4 +225,4 @@ new Uppy({
 </script>
 {% endraw %}
 
-I hope this gives you a basic idea of how Uppy.js works. I'm sure you also have many questions now - read along, and we will cover them in the rest of the guide.
+I hope this gives you a basic idea of how Uppy works. I'm sure you also have many questions now - read along, and we will cover them in the rest of the guide.

website/src/guide/installation.md

@@ -2,27 +2,27 @@
 title: Installation
 type: guide
 order: 0
-vue_version: 1.0.10
-dev_size: "240.69"
-min_size: "68.54"
-gz_size: "23.46"
+uppy_version: 0.0.1
+dev_size: "16.62"
+min_size: "undefined"
+gz_size: "undefined"
 ---
 
-> **Compatibility Note:** Uppy.js does not support IE8 and below.
+> **Compatibility Note:** Uppy does not support IE8 and below.
 
 ## Standalone
 
 Simply download and include with a script tag. `Uppy` will be registered as a global variable. **Pro tip: don't use the minified version during development. you will miss out all the nice warnings for common mistakes.**
 
 <div id="downloads">
-<a class="button" href="/js/Uppy.js" download>Development Version</a><span class="light info">With full warnings and debug mode</span>
+<a class="button" href="/js/uppy.js" download>Development Version</a><span class="light info">With full warnings and debug mode</span>
 
 <a class="button" href="/js/uppy.min.js" download>Production Version</a><span class="light info">Warnings stripped, {{gz_size}}kb min+gzip</span>
 </div>
 
 ### CDN
 
-Available on [jsdelivr](//cdn.jsdelivr.net/uppy/{{vue_version}}/uppy.min.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/uppy/{{vue_version}}/uppy.min.js) (takes some time to sync so the latest version might not be available yet).
+Available on [assets.transloadt.com](//assets.transloadt.com/uppy/{{uppy_version}}/uppy.min.js) or [cdnjs](//cdnjs.cloudflare.com/ajax/libs/uppy/{{uppy_version}}/uppy.min.js) (takes some time to sync so the latest version might not be available yet).
 
 ### CSP-compliant build
 
@@ -30,7 +30,7 @@ Some environments, such as Google Chrome Apps, enforces Content Security Policy
 
 ## NPM
 
-NPM is the recommended installation method when building large scale apps with Uppy.js. It pairs nicely with a CommonJS module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). Uppy.js also provides accompanying tools for authoring [Single File Components](application.html#Single_File_Components).
+NPM is the recommended installation method when building large scale apps with Uppy. It pairs nicely with a CommonJS module bundler such as [Webpack](http://webpack.github.io/) or [Browserify](http://browserify.org/). Uppy also provides accompanying tools for authoring [Single File Components](application.html#Single_File_Components).
 
 ``` bash
 # latest stable
@@ -40,14 +40,3 @@ $ npm install uppy@csp
 # dev build (directly from GitHub):
 $ npm install transloadit/uppy#dev
 ```
-
-## Bower
-
-``` bash
-# latest stable
-$ bower install uppy
-```
-
-## AMD Module Loaders
-
-The standalone downloads or versions installed via Bower are wrapped with UMD so they can be used directly as an AMD module.

website/src/guide/instance.md

@@ -1,101 +0,0 @@
----
-title: The Uppy Instance
-type: guide
-order: 3
----
-
-## Constructor
-
-Every Uppy.js app is bootstrapped by creating a **root Uppy instance** with the `Uppy` constructor function:
-
-``` js
-var vm = new Uppy({
-  // options
-})
-```
-
-A Uppy instance is essentially a **ViewModel** as defined in the [MVVM pattern](https://en.wikipedia.org/wiki/Model_View_ViewModel), hence the variable name `vm` you will see throughout the docs.
-
-When you instantiate a Uppy instance, you need to pass in an **options object** which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more. The full list of options can be found in the API reference.
-
-The `Uppy` constructor can be extended to create reusable **component constructors** with pre-defined options:
-
-``` js
-var MyComponent = Uppy.extend({
-  // extension options
-})
-
-// all instances of `MyComponent` are created with
-// the pre-defined extension options
-var myComponentInstance = new MyComponent()
-```
-
-Although you can create extended instances imperatively, in most cases you will be registering a component constructor as a custom element and composing them in templates declaratively. We will talk about the component system in details later. For now, you just need to know that all Uppy.js components are essentially extended Uppy instances.
-
-## Properties and Methods
-
-Each Uppy instance **proxies** all the properties found in its `data` object:
-
-``` js
-var data = { a: 1 }
-var vm = new Uppy({
-  data: data
-})
-
-vm.a === data.a // -> true
-
-// setting the property also affects original data
-vm.a = 2
-data.a // -> 2
-
-// ... and vice-versa
-data.a = 3
-vm.a // -> 3
-```
-
-It should be noted that only these proxied properties are **reactive**. If you attach a new property to the instance after it has been created, it will not trigger any view updates. We will discuss the reactivity system in details later.
-
-In addition to data properties, Uppy instances expose a number of useful instance properties and methods. These properties and methods are prefixed with `$` to differentiate from proxied data properties. For example:
-
-``` js
-var data = { a: 1 }
-var vm = new Uppy({
-  el: '#example',
-  data: data
-})
-
-vm.$data === data // -> true
-vm.$el === document.getElementById('example') // -> true
-
-// $watch is an instance method
-vm.$watch('a', function (newVal, oldVal) {
-  // this callback will be called when `vm.a` changes
-})
-```
-
-Consult the API reference for the full list of instance properties and methods.
-
-## Instance Lifecycle
-
-Each Uppy instance goes through a series of initialization steps when it is created - for example, it needs to set up data observation, compile the template, and create the necessary data bindings. Along the way, it will also invoke some **lifecycle hooks**, which give us the opportunity to execute custom logic. For example, the `created` hook is called after the instance is created:
-
-``` js
-var vm = new Uppy({
-  data: {
-    a: 1
-  },
-  created: function () {
-    // `this` points to the vm instance
-    console.log('a is: ' + this.a)
-  }
-})
-// -> "a is: 1"
-```
-
-There are also other hooks which will be called at different stages of the instance's lifecycle, for example `compiled`, `ready` and `destroyed`. All lifecycle hooks are called with their `this` context pointing to the Uppy instance invoking it. Some users may have been wondering where does the concept of "controllers" live in the Uppy.js world, and the answer is: there are no controllers in Uppy.js. Your custom logic for a component would be split among these lifecycle hooks.
-
-## Lifecycle Diagram
-
-Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but this diagram will be helpful in the future.
-
-![Lifecycle](/images/lifecycle.png)

website/src/guide/list.md

@@ -1,305 +0,0 @@
----
-title: List Rendering
-type: guide
-order: 8
----
-
-## v-for
-
-We can use the `v-for` directive to render a list of items based on an Array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data Array and `item` is an **alias** for the Array element being iterated on:
-
-**Example:**
-
-``` html
-<ul id="example-1">
-  <li v-for="item in items">
-    {{ item.message }}
-  </li>
-</ul>
-```
-
-``` js
-var example1 = new Uppy({
-  el: '#example-1',
-  data: {
-    items: [
-      { message: 'Foo' },
-      { message: 'Bar' }
-    ]
-  }
-})
-```
-
-**Result:**
-
-{% raw %}
-<ul id="example-1" class="demo">
-  <li v-for="item in items">
-    {{item.message}}
-  </li>
-</ul>
-<script>
-var example1 = new Uppy({
-  el: '#example-1',
-  data: {
-    items: [
-      { message: 'Foo' },
-      { message: 'Bar' }
-    ]
-  },
-  watch: {
-    items: function () {
-      smoothScroll.animateScroll(null, '#example-1')
-    }
-  }
-})
-</script>
-{% endraw %}
-
-Inside `v-for` blocks we have full access to parent scope properties, plus a special variable `$index` which, as you probably have guessed, is the Array index for the current item:
-
-``` html
-<ul id="example-2">
-  <li v-for="item in items">
-    {{ parentMessage }} - {{ $index }} - {{ item.message }}
-  </li>
-</ul>
-```
-
-``` js
-var example2 = new Uppy({
-  el: '#example-2',
-  data: {
-    parentMessage: 'Parent',
-    items: [
-      { message: 'Foo' },
-      { message: 'Bar' }
-    ]
-  }
-})
-```
-
-**Result:**
-
-{% raw%}
-<ul id="example-2" class="demo">
-  <li v-for="item in items">
-    {{ parentMessage }} - {{ $index }} - {{ item.message }}
-  </li>
-</ul>
-<script>
-var example2 = new Uppy({
-  el: '#example-2',
-  data: {
-    parentMessage: 'Parent',
-    items: [
-      { message: 'Foo' },
-      { message: 'Bar' }
-    ]
-  },
-  watch: {
-    items: function () {
-      smoothScroll.animateScroll(null, '#example-2')
-    }
-  }
-})
-</script>
-{% endraw %}
-
-Alternatively, you can also specify an alias for the index (or the key if `v-for` is used on an Object):
-
-``` html
-<div v-for="(index, item) in items">
-  {{ index }} {{ item.message }}
-</div>
-```
-
-## Template v-for
-
-Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
-
-``` html
-<ul>
-  <template v-for="item in items">
-    <li>{{ item.msg }}</li>
-    <li class="divider"></li>
-  </template>
-</ul>
-```
-
-## Array Change Detection
-
-### Mutation Methods
-
-Uppy.js wraps an observed Array's mutation methods so they will also trigger View updates. The wrapped methods are:
-
-- `push()`
-- `pop()`
-- `shift()`
-- `unshift()`
-- `splice()`
-- `sort()`
-- `reverse()`
-
-You can open the console and play with the previous examples' `items` array by calling its mutation methods. For example: `example1.items.push({ message: 'Baz' })`.
-
-### Replacing an Array
-
-Mutation methods, as the name suggests, mutate the original Array they are called on. In comparison, there are also non-mutating methods, e.g. `filter()`, `concat()` and `slice()`, which do not mutate the original Array but **always return a new Array**. When working with non-mutating methods, you can just replace the old Array with the new one:
-
-``` js
-example1.items = example1.items.filter(function (item) {
-  return item.message.match(/Foo/)
-})
-```
-
-You might think this will cause Uppy.js to throw away the existing DOM and re-render the entire list - luckily that is not the case. Uppy.js implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
-
-### track-by
-
-In some cases, you might need to replace the Array with completely new objects - e.g. ones created from an API call. Since by default `v-for` determines the reusability of existing scopes and DOM elements by tracking the identity of its data object, this could cause the entire list to be re-rendered. However, if each of your data objects has a unique id property, then you can use a `track-by` special attribute to give Uppy.js a hint so that it can reuse existing instances as much as possible.
-
-For example, if your data looks like this:
-
-``` js
-{
-  items: [
-    { _uid: '88f869d', ... },
-    { _uid: '7496c10', ... }
-  ]
-}
-```
-
-Then you can give the hint like this:
-
-``` html
-<div v-for="item in items" track-by="_uid">
-  <!-- content -->
-</div>
-```
-
-Later on, when you replace the `items` array and Uppy.js encounters a new object with `_uid: '88f869d'`, it knows it can reuse the existing scope and DOM elements associated with the same `_uid`.
-
-### track-by $index
-
-If you don't have a unique key to track by, you can also use `track-by="$index"`, which will force `v-for` into in-place update mode: fragments are no longer moved around, they simply get flushed with the new value at the corresponding index. This mode can also handle duplicate values in the source array.
-
-This can make Array replacement extremely efficient, but it comes at a trade-off. Because DOM nodes are no longer moved to reflect the change in order, temporary state like DOM input values and component private state can become out of sync. So, be careful when using `track-by="$index"` if the `v-for` block contains form input elements or child components.
-
-### Caveats
-
-Due to limitations of JavaScript, Uppy.js **cannot** detect the following changes to an Array:
-
-1. When you directly set an item with the index, e.g. `vm.items[0] = {}`;
-2. When you modify the length of the Array, e.g. `vm.items.length = 0`.
-
-To deal with caveat (1), Uppy.js augments observed Arrays with a `$set()` method:
-
-``` js
-// same as `example1.items[0] = ...` but triggers view update
-example1.items.$set(0, { childMsg: 'Changed!'})
-```
-
-To deal with caveat (2), just replace `items` with an empty array instead.
-
-In addition to `$set()`, Uppy.js also augments Arrays with a convenience method `$remove()`, which searches for and removes an item from target Array by calling `splice()` internally. So instead of:
-
-``` js
-var index = this.items.indexOf(item)
-if (index !== -1) {
-  this.items.splice(index, 1)
-}
-```
-
-You can just do:
-
-``` js
-this.items.$remove(item)
-```
-
-## Object v-for
-
-You can also use `v-for` to iterate through the properties of an Object. In addition to `$index`, each scope will have access to another special property `$key`.
-
-``` html
-<ul id="repeat-object" class="demo">
-  <li v-for="value in object">
-    {{ $key }} : {{ value }}
-  </li>
-</ul>
-```
-
-``` js
-new Uppy({
-  el: '#repeat-object',
-  data: {
-    object: {
-      FirstName: 'John',
-      LastName: 'Doe',
-      Age: 30
-    }
-  }
-})
-```
-
-**Result:**
-
-{% raw %}
-<ul id="repeat-object" class="demo">
-  <li v-for="value in object">
-    {{ $key }} : {{ value }}
-  </li>
-</ul>
-<script>
-new Uppy({
-  el: '#repeat-object',
-  data: {
-    object: {
-      FirstName: 'John',
-      LastName: 'Doe',
-      Age: 30
-    }
-  }
-})
-</script>
-{% endraw %}
-
-You can also provide an alias for the key:
-
-``` html
-<div v-for="(key, val) in object">
-  {{ key }} {{ val }}
-</div>
-```
-
-<p class="tip">When iterating over an Object, the order is based on the key enumeration order of `Object.keys()`, which is **not** guaranteed to be consistent in all JavaScript engine implementations.</p>
-
-## Range v-for
-
-`v-for` can also take an integer Number. In this case it will repeat the template that many times.
-
-``` html
-<div>
-  <span v-for="n in 10">{{ n }} </span>
-</div>
-```
-
-Result:
-
-{% raw %}
-<div id="range" class="demo">
-  <span v-for="n in 10">{{ n }} </span>
-</div>
-<script>
-new Uppy({ el: '#range' })
-</script>
-{% endraw %}
-
-## Displaying Filtered/Sorted Results
-
-Sometimes we only need to display a filtered or sorted version of the Array without actually mutating or resetting the original data. There are two options to achieve this:
-
-1. Create a computed property that returns the filtered or sorted Array;
-2. Use the built-in `filterBy` and `orderBy` filters.
-
-A computed property would give you finer-grained control and more flexibility since it's full JavaScript; but the filters can be more convenient for common use cases. For detailed usage of the Array filters, check out their [documentation](/api/#filterBy).

website/src/guide/mixins.md

@@ -1,125 +0,0 @@
----
-title: Mixins
-type: guide
-order: 16
----
-
-## Basics
-
-Mixins are a flexible way to distribute reusable functionalities for Uppy components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
-
-Example:
-
-``` js
-// define a mixin object
-var myMixin = {
-  created: function () {
-    this.hello()
-  },
-  methods: {
-    hello: function () {
-      console.log('hello from mixin!')
-    }
-  }
-}
-
-// define a component that uses this mixin
-var Component = Uppy.extend({
-  mixins: [myMixin]
-})
-
-var component = new Component() // -> "hello from mixin!"
-```
-
-## Option Merging
-
-When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called **before** the component's own hooks:
-
-``` js
-var mixin = {
-  created: function () {
-    console.log('mixin hook called')
-  }
-}
-
-new Uppy({
-  mixins: [mixin],
-  created: function () {
-    console.log('component hook called')
-  }
-})
-
-// -> "mixin hook called"
-// -> "component hook called"
-```
-
-Options that expect object values, for example `methods`, `components` and `directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects:
-
-``` js
-var mixin = {
-  methods: {
-    foo: function () {
-      console.log('foo')
-    },
-    conflicting: function () {
-      console.log('from mixin')
-    }
-  }
-}
-
-var vm = new Uppy({
-  mixins: [mixin],
-  methods: {
-    bar: function () {
-      console.log('bar')
-    },
-    conflicting: function () {
-      console.log('from self')
-    }
-  }
-})
-
-vm.foo() // -> "foo"
-vm.bar() // -> "bar"
-vm.conflicting() // -> "from self"
-```
-
-Note that the same merge strategies are used in `Uppy.extend()`.
-
-## Global Mixin
-
-You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect **every** Uppy instance created afterwards. When used properly, this can be used to inject processing logic for custom options:
-
-``` js
-// inject a handler for `myOption` custom option
-Uppy.mixin({
-  created: function () {
-    var myOption = this.$options.myOption
-    if (myOption) {
-      console.log(myOption)
-    }
-  }
-})
-
-new Uppy({
-  myOption: 'hello!'
-})
-// -> "hello!"
-```
-
-## Custom Option Merge Strategies
-
-When custom options are merged, they use the default strategy, which simply overwrites the existing value. If you want a custom option to be merged using custom logic, you need to attach a function to `Uppy.config.optionMergeStrategies`:
-
-``` js
-Uppy.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
-  // return mergedVal
-}
-```
-
-For most object-based options, you can simply use the same strategy used by `methods`:
-
-``` js
-var strategies = Uppy.config.optionMergeStrategies
-strategies.myOption = strategies.methods
-```

website/src/guide/overview.md

@@ -4,118 +4,8 @@ type: guide
 order: 2
 ---
 
-Uppy.js (pronounced /vjuː/, like **view**) is a library for building interactive web interfaces. The goal of Uppy.js is to provide the benefits of **reactive data binding** and **composable view components** with an API that is as simple as possible.
-
-Uppy.js itself is not a full-blown framework - it is focused on the view layer only. It is therefore very easy to pick up and to integrate with other libraries or existing projects. On the other hand, when used in combination with proper tooling and supporting libraries, Uppy.js is also perfectly capable of powering sophisticated Single-Page Applications.
-
-If you are an experienced frontend developer and want to know how Uppy.js compares to other libraries/frameworks, check out the [Comparison with Other Frameworks](comparison.html); if you are more interested about how Uppy.js approaches larger-scale applications, check out the section on [Building Larger-Scale Applications](application.html).
-
-## Reactive Data Binding
-
-At the core of Uppy.js is a reactive data-binding system that makes it extremely simple to keep your data and the DOM in sync. When using jQuery to manually manipulate the DOM, the code we write is often imperative, repetitive and error-prone. Uppy.js embraces the concept of **data-driven view**. In plain words, it means we use special syntax in our normal HTML templates to "bind" the DOM to the underlying data. Once the bindings are created, the DOM will then be kept in sync with the data. Whenever you modify the data, the DOM updates accordingly. As a result, most of our application logic is now directly manipulating data, rather than messing around with DOM updates. This makes our code easier to write, easier to reason about and easier to maintain.
-
-![MVVM](/images/mvvm.png)
-
-For the simplest possible example:
-
-``` html
-<!-- this is our View -->
-<div id="example-1">
-  Hello {{ name }}!
-</div>
-```
-
-``` js
-// this is our Model
-var exampleData = {
-  name: 'Uppy.js'
-}
-
-// create a Uppy instance, or, a "ViewModel"
-// which links the View and the Model
-var exampleVM = new Uppy({
-  el: '#example-1',
-  data: exampleData
-})
-```
-
-Result:
-{% raw %}
-<div id="example-1" class="demo">Hello {{ name }}!</div>
-<script>
-var exampleData = {
-  name: 'Uppy.js'
-}
-var exampleVM = new Uppy({
-  el: '#example-1',
-  data: exampleData
-})
-</script>
-{% endraw %}
-
-This looks pretty similar to just rendering a template, but Uppy.js has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Just open up your browser developer console and modify `exampleData.name`. You should see the rendered example above update accordingly.
-
-Note that we didn't have to write any DOM-manipulating code: the HTML template, enhanced with the bindings, is a declarative mapping of the underlying data state, which is in turn just plain JavaScript objects. Our view is entirely data-driven.
-
-Let's look at a second example:
-
-``` html
-<div id="example-2">
-  <p v-if="greeting">Hello!</p>
-</div>
-```
-
-``` js
-var exampleVM2 = new Uppy({
-  el: '#example-2',
-  data: {
-    greeting: true
-  }
-})
-```
-
-{% raw %}
-<div id="example-2" class="demo">
-  <span v-if="greeting">Hello!</span>
-</div>
-<script>
-var exampleVM2 = new Uppy({
-  el: '#example-2',
-  data: {
-    greeting: true
-  }
-})
-</script>
-{% endraw %}
-
-Here we are encountering something new. The `v-if` attribute you are seeing are called **Directives**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Uppy.js, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Go ahead and set `exampleVM2.greeting` to `false` in the console. You should see the "Hello!" message disappear.
-
-This second example demonstrates that not only can we bind DOM text to the data, we can also bind the **structure** of the DOM to the data. Moreover, Uppy.js also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/removed by Uppy.
-
-There are quite a few other directives, each with its own special functionality. For example the `v-for` directive for displaying items in an Array, or the `v-bind` directive for binding HTML attributes. We will discuss the full data-binding syntax with more details later.
-
-## Component System
-
-The Component System is another important concept in Uppy.js, because it's an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:
-
-![Component Tree](/images/components.png)
-
-In fact, a typical large application built with Uppy.js would form exactly what is on the right - a tree of components. We will talk a lot more about components later in the guide, but here's an (imaginary) example of what an app's template would look like with components:
-
-``` html
-<div id="app">
-  <app-nav></app-nav>
-  <app-view>
-    <app-sidebar></app-sidebar>
-    <app-content></app-content>
-  </app-view>
-</div>
-```
-
-You may have noticed that Uppy.js components are very similar to **Custom Elements**, which is part of the [Web Components Spec](http://www.w3.org/wiki/WebComponents/). In fact, Uppy.js' component syntax is loosely modeled after the spec. For example, Uppy components implement the [Slot API](https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Slots-Proposal.md) and the `is` special attribute. However, there are a few key differences:
-
-1. The Web Components Spec is still very much a work in progress, and is not natively implemented in every browser. In comparison, Uppy.js components don't require any polyfills and works consistently in all supported browsers (IE9 and above). When needed, Uppy.js components can also be wrapped inside a native custom element.
-
-2. Uppy.js components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and dynamic component switching with transition effects.
-
-The component system is the foundation for building large apps with Uppy.js. In addition, the Uppy.js ecosystem also provides advanced tooling and various supporting libraries that can be put together to create a more "framework" like system.
+Uppy is (going to be) an uploader written in ES6 JavaScript with a plugin-based architecture, making
+it very extensible. Out of the box it supports tapping into Dropbox, Instagram, Local files. It
+has support for resumable file uploads via tus.io, and adding encoding backends.
+Uppy is brought to you by the people behind Transloadit and as such has first class
+support for adding their uploading and encoding backend, but this is opt-in.

website/src/guide/plugins.md

@@ -4,8 +4,6 @@ type: guide
 order: 17
 ---
 
-
-
 ## Writing a Plugin
 
 Plugins usually add global-level functionality to Uppy. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write:
@@ -18,7 +16,7 @@ Plugins usually add global-level functionality to Uppy. There is no strictly def
 
 4. A library that provides an API of its own, while at the same time injecting some combination of the above. e.g. [uppy-router](https://github.com/transloadit/uppy-router)
 
-A Uppy.js plugin should expose an `install` method. The method will be called with the `Uppy` constructor as the first argument, along with possible options:
+A Uppy plugin should expose an `install` method. The method will be called with the `Uppy` constructor as the first argument, along with possible options:
 
 ``` js
 MyPlugin.install = function (Uppy, options) {
@@ -46,31 +44,21 @@ You can optionally pass in some options:
 Uppy.use(MyPlugin, { someOption: true })
 ```
 
-Some plugins such as `uppy-router` automatically calls `Uppy.use()` if `Uppy` is available as a global variable. However in a module environment you always need to call `Uppy.use()` explicitly:
+You always need to call `Uppy.use()` explicitly:
 
 ``` js
 // When using CommonJS via Browserify or Webpack
 var Uppy = require('uppy')
-var VueRouter = require('uppy-router')
+var DragDrop = require('uppy-dragdrop')
 
 // Don't forget to call this
-Uppy.use(VueRouter)
+Uppy.use(DragDrop)
 ```
 
 ## Existing Plugins & Tools
 
-- [uppy-router](https://github.com/transloadit/uppy-router): The official router for Uppy.js. Deeply integrated with Uppy.js core to make building Single Page Applications a breeze.
-
-- [uppy-resource](https://github.com/transloadit/uppy-resource): A plugin that provides services for making web requests and handle responses using a XMLHttpRequest or JSONP.
-
-- [uppy-async-data](https://github.com/transloadit/uppy-async-data): Async data loading plugin.
-
-- [uppy-validator](https://github.com/transloadit/uppy-validator): A plugin for form validations.
-
-- [uppy-devtools](https://github.com/transloadit/uppy-devtools): A Chrome devtools extension for debugging Uppy.js applications.
-
-- [uppy-touch](https://github.com/transloadit/uppy-touch): Add touch-gesture directives using Hammer.js. (outdated)
-
-- [uppy-element](https://github.com/transloadit/uppy-element): Register Custom Elements with Uppy.js.
-
-- [List of User Contributed Tools](https://github.com/transloadit/uppy/wiki/User-Contributed-Components-&-Tools)
+<ul>
+{% for plugin in site.data.plugins %}
+  <a href="{{ plugin.url }}">{{ loop.key }}</a>
+{% endfor %}
+</ul>

website/src/guide/reactivity.md

@@ -1,171 +0,0 @@
----
-title: Reactivity in Depth
-type: guide
-order: 13
----
-
-We've covered most of the basics - now it's time to take a deep dive! One of Uppy.js' most distinct features is the unobtrusive reactive system - models are just plain JavaScript objects, modify it and the view updates. It makes state management very simple and intuitive, but it's also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Uppy.js' reactivity system.
-
-## How Changes Are Tracked
-
-When you pass a plain JavaScript object to a Uppy instance as its `data` option, Uppy.js will walk through all of its properties and convert them to getter/setters using [Object.defineProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty). This is an ES5-only and un-shimmable feature, which is why Uppy.js doesn't support IE8 and below.
-
-The getter/setters are invisible to the user, but under the hood they enable Uppy.js to perform dependency-tracking and change-notification when properties are accessed or modified. One caveat is that browser consoles format getter/setters differently when converted data objects are logged, so make sure to use the `vm.$log()` instance method for more inspection-friendly output.
-
-For every directive / data binding in the template, there will be a corresponding **watcher** object, which records any properties "touched" during its evaluation as dependencies. Later on when a dependency's setter is called, it triggers the watcher to re-evaluate, and in turn causes its associated directive to perform DOM updates.
-
-![data](/images/data.png)
-
-## Change Detection Caveats
-
-Due to the limitation of ES5, Uppy.js **cannot detect property addition or deletion**. Since Uppy.js performs the getter/setter conversion process during instance initialization, a property must be present in the `data` object in order for Uppy.js to convert it and make it reactive. For example:
-
-``` js
-var data = { a: 1 }
-var vm = new Uppy({
-  data: data
-})
-// `vm.a` and `data.a` are now reactive
-
-vm.b = 2
-// `vm.b` is NOT reactive
-
-data.b = 2
-// `data.b` is NOT reactive
-```
-
-However, there are ways to **add a property and make it reactive** after an instance has been created.
-
-For Uppy instances, you can use the `$set(path, value)` instance method:
-
-``` js
-vm.$set('b', 2)
-// `vm.b` and `data.b` are now reactive
-```
-
-For plain data objects, you can use the global `Uppy.set(object, key, value)` method:
-
-``` js
-Uppy.set(data, 'c', 3)
-// `vm.c` and `data.c` are now reactive
-```
-
-There are also a few Array-related caveats, which were [discussed earlier in the list rendering section](/guide/list.html#Caveats).
-
-## Initialize Your Data
-
-Although Uppy.js provides the API to dynamically add reactive properties on the fly, it is recommended to declare all reactive properties upfront in the `data` option.
-
-Instead of this:
-
-``` js
-var vm = new Uppy({
-  template: '<div>{{msg}}</div>'
-})
-// add `msg` later
-vm.$set('msg', 'Hello!')
-```
-
-Prefer this:
-
-``` js
-var vm = new Uppy({
-  data: {
-    // declare msg with an empty value
-    msg: ''
-  },
-  template: '<div>{{msg}}</div>'
-})
-// set `msg` later
-vm.msg = 'Hello!'
-```
-
-There are two reasons behind this pattern:
-
-1. The `data` object is like the schema for your component's state. Declaring all reactive properties upfront makes the component code easier to understand and reason about.
-
-2. Adding a top level reactive property on a Uppy instance will force all the watchers in its scope to re-evaluate, because it didn't exist before and no watcher could have tracked it as a dependency. The performance is usually acceptable (essentially the same as Angular's dirty checking), but can be avoided when you initialize the data properly.
-
-## Async Update Queue
-
-By default, Uppy.js performs DOM updates **asynchronously**. Whenever a data change is observed, Uppy will open a queue and buffer all the data changes that happens in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. Then, in the next event loop "tick", Uppy flushes the queue and performs only the necessary DOM updates. Internally Uppy uses `MutationObserver` if available for the asynchronous queuing and falls back to `setTimeout(fn, 0)`.
-
-For example, when you set `vm.someData = 'new value'`, the DOM will not update immediately. It will update in the next "tick", when the queue is flushed. Most of the time we don't need to care about this, but it can be tricky when you want to do something that depends on the post-update DOM state. Although Uppy.js generally encourages developers to think in a "data-driven" fashion and avoid touching the DOM directly, sometimes it might be necessary to get your hands dirty. In order to wait until Uppy.js has finished updating the DOM after a data change, you can use `Uppy.nextTick(callback)` immediately after the data is changed. The callback will be called after the DOM has been updated. For example:
-
-``` html
-<div id="example">{{msg}}</div>
-```
-
-``` js
-var vm = new Uppy({
-  el: '#example',
-  data: {
-    msg: '123'
-  }
-})
-vm.msg = 'new message' // change data
-vm.$el.textContent === 'new message' // false
-Uppy.nextTick(function () {
-  vm.$el.textContent === 'new message' // true
-})
-```
-
-There is also the `vm.$nextTick()` instance method, which is especially handy inside components, because it doesn't need global `Uppy` and its callback's `this` context will be automatically bound to the current Uppy instance:
-
-``` js
-Uppy.component('example', {
-  template: '<span>{{msg}}</span>',
-  data: function () {
-    return {
-      msg: 'not updated'
-    }
-  },
-  methods: {
-    updateMessage: function () {
-      this.msg = 'updated'
-      console.log(this.$el.textContent) // => 'not updated'
-      this.$nextTick(function () {
-        console.log(this.$el.textContent) // => 'updated'
-      })
-    }
-  }
-})
-```
-
-## Inside Computed Properties
-
-It should be noted that Uppy.js computed properties are **not** simple getters. Each computed property keeps track of its own reactive dependencies. When a computed property is evaluated, Uppy.js updates its dependency list and caches the result value. The cached value is only invalidated when one of the tracked dependencies have changed. Therefore, as long as the dependencies did not change, accessing the computed property will directly return the cached value instead of calling the getter.
-
-Why do we need caching? Imagine we have an expensive computed property **A**, which requires looping through a huge Array and doing a lot of computations. Then, we may have other computed properties that in turn depend on **A**. Without caching, we would be calling **A**’s getter many more times than necessary!
-
-Because of computed property caching, the getter function is not always called when you access a computed property. Consider the following example:
-
-``` js
-var vm = new Uppy({
-  data: {
-    msg: 'hi'
-  },
-  computed: {
-    example: function () {
-      return Date.now() + this.msg
-    }
-  }
-})
-```
-
-The computed property `example` has only one dependency: `vm.msg`. `Date.now()` is **not** a reactive dependency, because it has nothing to do with Uppy's data observation system. Therefore, when you programmatically access `vm.example`, you will find the timestamp to remain the same unless `vm.msg` triggers a re-evaluation.
-
-In some use cases you may want to preserve the simple getter-like behavior, where every time you access `vm.example` it simply calls the getter again. You can do that by turning off caching for a specific computed property:
-
-``` js
-computed: {
-  example: {
-    cache: false,
-    get: function () {
-      return Date.now() + this.msg
-    }
-  }
-}
-```
-
-Now, every time you access `vm.example`, the timestamp will be up-to-date. **However, note this only affects programmatic access inside JavaScript; data-bindings are still dependency-driven.** When you bind to a computed property in the template as `{% raw %}{{example}}{% endraw %}`, the DOM will only be updated when a reactive dependency has changed.

website/src/guide/syntax.md

@@ -1,172 +0,0 @@
----
-title: Data Binding Syntax
-type: guide
-order: 4
----
-
-Uppy.js uses a DOM-based templating implementation. This means that all Uppy.js templates are essentially valid, parsable HTML enhanced with some special attributes. Keep that in mind, since this makes Uppy templates fundamentally different from string-based templates.
-
-## Interpolations
-
-### Text
-
-The most basic form of data binding is text interpolation using the "Mustache" syntax (double curly braces):
-
-``` html
-<span>Message: {{ msg }}</span>
-```
-
-The mustache tag will be replaced with the value of the `msg` property on the corresponding data object. It will also be updated whenever the data object's `msg` property changes.
-
-You can also perform one-time interpolations that do not update on data change:
-
-``` html
-<span>This will never change: {{* msg }}</span>
-```
-
-### Raw HTML
-
-The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches:
-
-``` html
-<div>{{{ raw_html }}}</div>
-```
-
-The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use [partials](/api/#partial).
-
-<p class="tip">Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to [XSS attacks](https://en.wikipedia.org/wiki/Cross-site_scripting). Only use HTML interpolation on trusted content and **never** on user-provided content.</p>
-
-### Attributes
-
-Mustaches can also be used inside HTML attributes:
-
-``` html
-<div id="item-{{ id }}"></div>
-```
-
-Note that attribute interpolations are disallowed in Uppy.js directives and special attributes. Don't worry, Uppy.js will raise warnings for you when mustaches are used in wrong places.
-
-## Binding Expressions
-
-The text we put inside mustache tags are called **binding expressions**. In Uppy.js, a binding expression consists of a single JavaScript expression optionally followed by one or more filters.
-
-### JavaScript Expressions
-
-So far we've only been binding to simple property keys in our templates. But Uppy.js actually supports the full power of JavaScript expressions inside data bindings:
-
-``` html
-{{ number + 1 }}
-
-{{ ok ? 'YES' : 'NO' }}
-
-{{ message.split('').reverse().join('') }}
-```
-
-These expressions will be evaluated in the data scope of the owner Uppy instance. One restriction is that each binding can only contain **one single expression**, so the following will **NOT** work:
-
-``` html
-<!-- this is a statement, not an expression: -->
-{{ var a = 1 }}
-
-<!-- flow control won't work either, use ternary expressions -->
-{{ if (ok) { return message } }}
-```
-
-### Filters
-
-Uppy.js allows you to append optional "filters" to the end of an expression, denoted by the "pipe" symbol:
-
-``` html
-{{ message | capitalize }}
-```
-
-Here we are "piping" the value of the `message` expression through the built-in `capitalize` filter, which is in fact just a JavaScript function that returns the capitalized value. Uppy.js provides a number of built-in filters, and we will talk about how to write your own filters later.
-
-Note that the pipe syntax is not part of JavaScript syntax, therefore you cannot mix filters inside expressions; you can only append them at the end of an expression.
-
-Filters can be chained:
-
-``` html
-{{ message | filterA | filterB }}
-```
-
-Filters can also take arguments:
-
-``` html
-{{ message | filterA 'arg1' arg2 }}
-```
-
-The filter function always receives the expression's value as the first argument. Quoted arguments are interpreted as plain string, while un-quoted ones will be evaluated as expressions. Here, the plain string `'arg1'` will be passed into the filter as the second argument, and the value of expression `arg2` will be evaluated and passed in as the third argument.
-
-## Directives
-
-Directives are special attributes with the `v-` prefix. Directive attribute values are expected to be **binding expressions**, so the rules about JavaScript expressions and filters mentioned above apply here as well. A directive's job is to reactively apply special behavior to the DOM when the value of its expression changes. Let's review the example we've seen in the introduction:
-
-``` html
-<p v-if="greeting">Hello!</p>
-```
-
-Here, the `v-if` directive would remove/insert the `<p>` element based on the truthiness of the value of the expression `greeting`.
-
-### Arguments
-
-Some directives can take an "argument", denoted by a colon after the directive name. For example, the `v-bind` directive is used to reactively update an HTML attribute:
-
-``` html
-<a v-bind:href="url"></a>
-```
-
-Here `href` is the argument, which tells the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`. You may have noticed this achieves the same result as an attribute interpolation using `{% raw %}href="{{url}}"{% endraw %}`: that is correct, and in fact, attribute interpolations are translated into `v-bind` bindings internally.
-
-Another example is the `v-on` directive, which listens to DOM events:
-
-``` html
-<a v-on:click="doSomething">
-```
-
-Here the argument is the event name to listen to. We will talk about event handling in more details too.
-
-### Modifiers
-
-Modifiers are special postfixes denoted by a dot, which indicates that a directive should be bound in some special way. For example, the `.literal` modifier tells the directive to interpret its attribute value as a literal string rather than an expression:
-
-``` html
-<a v-bind:href.literal="/a/b/c"></a>
-```
-
-Of course, this seems pointless because we can just do `href="/a/b/c"` instead of using a directive. The example here is just for demonstrating the syntax. We will see more practical uses of modifiers later.
-
-## Shorthands
-
-The `v-` prefix serves as a visual cue for identifying Uppy-specific attributes in your templates. This is useful when you are using Uppy.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the `v-` prefix becomes less important when you are building an SPA where Uppy.js manages every template. Therefore, Uppy.js provides special shorthands for two of the most often used directives, `v-bind` and `v-on`:
-
-### `v-bind` Shorthand
-
-``` html
-<!-- full syntax -->
-<a v-bind:href="url"></a>
-
-<!-- shorthand -->
-<a :href="url"></a>
-
-or
-
-<!-- full syntax -->
-<button v-bind:disabled="someDynamicCondition">Button</button>
-
-<!-- shorthand -->
-<button :disabled="someDynamicCondition">Button</button>
-```
-
-
-### `v-on` Shorthand
-
-``` html
-<!-- full syntax -->
-<a v-on:click="doSomething"></a>
-
-<!-- shorthand -->
-<a @click="doSomething"></a>
-```
-
-They may look a bit different from "valid" HTML, but all Uppy.js supported browsers can parse it correctly, and they do not appear in the final rendered markup. The shorthand syntax is totally optional, but you will likely appreciate it when you learn more about its usage later.

website/src/guide/transitions.md

@@ -1,382 +0,0 @@
----
-title: Transitions
-type: guide
-order: 11
----
-
-With Uppy.js' transition system you can apply automatic transition effects when elements are inserted into or removed from the DOM. Uppy.js will automatically add/remove CSS classes at appropriate times to trigger CSS transitions or animations for you, and you can also provide JavaScript hook functions to perform custom DOM manipulations during the transition.
-
-To apply transition effects, you need to use the special `transition` attribute on the target element:
-
-``` html
-<div v-if="show" transition="my-transition"></div>
-```
-
-The `transition` attribute can be used together with:
-
-- `v-if`
-- `v-show`
-- `v-for` (triggered for insertion and removal only)
-- Dynamic components (introduced in the [next section](components.html#Dynamic_Components))
-- On a component root node, and triggered via Uppy instance DOM methods, e.g. `vm.$appendTo(el)`.
-
-When an element with transition is inserted or removed, Uppy will:
-
-1. Try to find a JavaScript transition hooks object registered either through `Uppy.transition(id, hooks)` or passed in with the `transitions` option, using the id `"my-transition"`. If it finds it, it will call the appropriate hooks at different stages of the transition.
-
-2. Automatically sniff whether the target element has CSS transitions or CSS animations applied, and add/remove the CSS classes at the appropriate times.
-
-3. If no JavaScript hooks are provided and no CSS transitions/animations are detected, the DOM operation (insertion/removal) is executed immediately on next frame.
-
-## CSS Transitions
-
-### Example
-
-A typical CSS transition looks like this:
-
-``` html
-<div v-if="show" transition="expand">hello</div>
-```
-
-You also need to define CSS rules for `.expand-transition`, `.expand-enter` and `.expand-leave` classes:
-
-``` css
-/* always present */
-.expand-transition {
-  transition: all .3s ease;
-  height: 30px;
-  padding: 10px;
-  background-color: #eee;
-  overflow: hidden;
-}
-
-/* .expand-enter defines the starting state for entering */
-/* .expand-leave defines the ending state for leaving */
-.expand-enter, .expand-leave {
-  height: 0;
-  padding: 0 10px;
-  opacity: 0;
-}
-```
-
-In addition, you can provide JavaScript hooks:
-
-``` js
-Uppy.transition('expand', {
-
-  beforeEnter: function (el) {
-    el.textContent = 'beforeEnter'
-  },
-  enter: function (el) {
-    el.textContent = 'enter'
-  },
-  afterEnter: function (el) {
-    el.textContent = 'afterEnter'
-  },
-  enterCancelled: function (el) {
-    // handle cancellation
-  },
-
-  beforeLeave: function (el) {
-    el.textContent = 'beforeLeave'
-  },
-  leave: function (el) {
-    el.textContent = 'leave'
-  },
-  afterLeave: function (el) {
-    el.textContent = 'afterLeave'
-  },
-  leaveCancelled: function (el) {
-    // handle cancellation
-  }
-})
-```
-
-{% raw %}
-<div id="demo">
-  <div v-if="show" transition="expand">hello</div>
-  <button @click="show = !show">Toggle</button>
-</div>
-
-<style>
-.expand-transition {
-  transition: all .3s ease;
-  height: 30px;
-  padding: 10px;
-  background-color: #eee;
-  overflow: hidden;
-}
-.expand-enter, .expand-leave {
-  height: 0;
-  padding: 0 10px;
-  opacity: 0;
-}
-</style>
-
-<script>
-new Uppy({
-  el: '#demo',
-  data: {
-    show: true,
-    transitionState: 'Idle'
-  },
-  transitions: {
-    expand: {
-      beforeEnter: function (el) {
-        el.textContent = 'beforeEnter'
-      },
-      enter: function (el) {
-        el.textContent = 'enter'
-      },
-      afterEnter: function (el) {
-        el.textContent = 'afterEnter'
-      },
-      beforeLeave: function (el) {
-        el.textContent = 'beforeLeave'
-      },
-      leave: function (el) {
-        el.textContent = 'leave'
-      },
-      afterLeave: function (el) {
-        el.textContent = 'afterLeave'
-      }
-    }
-  }
-})
-</script>
-{% endraw %}
-
-### Transition CSS Classes
-
-The classes being added and toggled are based on the value of the `transition` attribute. In the case of `transition="fade"`, three CSS classes are involved:
-
-1. The class `.fade-transition` will be always present on the element.
-
-2. `.fade-enter` defines the starting state of an entering transition. It is applied for a single frame and then immediately removed.
-
-3. `.fade-leave` defines the ending state of a leaving transition. It is applied when the leaving transition starts and removed when the transition finishes.
-
-If the `transition` attribute has no value, the classes will default to `.v-transition`, `.v-enter` and `.v-leave`.
-
-### Transition Flow Details
-
-When the `show` property changes, Uppy.js will insert or remove the `<div>` element accordingly, and apply transition classes as specified below:
-
-- When `show` becomes false, Uppy.js will:
-  1. Call `beforeLeave` hook;
-  2. Apply `v-leave` class to the element to trigger the transition;
-  3. Call `leave` hook;
-  4. Wait for the transition to finish; (listening to a `transitionend` event)
-  5. Remove the element from the DOM and remove `v-leave` class;
-  6. Call `afterLeave` hook.
-
-- When `show` becomes true, Uppy.js will:
-  1. Call `beforeEnter` hook;
-  2. Apply `v-enter` class to the element;
-  3. Insert it into the DOM;
-  4. Call `enter` hook;
-  5. Force a CSS layout so `v-enter` is actually applied, then remove the `v-enter` class to trigger a transition back to the element's original state;
-  6. Wait for the transition to finish;
-  7. Call `afterEnter` hook.
-
-In addition, if you remove an element when its enter transition is in progress, the `enterCancelled` hook will be called to give you the opportunity to clean up changes or timers created in `enter`. Vice-versa for leaving transitions.
-
-All of the above hook functions are called with their `this` contexts set to the associated Uppy instances. If the element is the root node of a Uppy instance, that instance will be used as the context. Otherwise, the context will be the owner instance of the transition directive.
-
-Finally, the `enter` and `leave` can optionally take a second callback argument. When you do so, you are indicating that you want to explicitly control when the transition should end, so instead of waiting for the CSS `transitionend` event, Uppy.js will expect you to eventually call the callback to finish the transition. For example:
-
-``` js
-enter: function (el) {
-  // no second argument, transition end
-  // determined by CSS transitionend event
-}
-```
-
-vs.
-
-``` js
-enter: function (el, done) {
-  // with the second argument, the transition
-  // will only end when `done` is called.
-}
-```
-
-<p class="tip">When multiple elements are being transitioned together, Uppy.js batches them and only applies one forced layout.</p>
-
-### CSS Animations
-
-CSS animations are applied in the same way with CSS transitions, the difference being that `v-enter` is not removed immediately after the element is inserted, but on an `animationend` event.
-
-Example: (omitting prefixed CSS rules here)
-
-``` html
-<span v-show="show" transition="bounce">Look at me!</span>
-```
-
-``` css
-.bounce-enter {
-  animation: bounce-in .5s;
-}
-.bounce-leave {
-  animation: bounce-out .5s;
-}
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes bounce-out {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.5);
-  }
-  100% {
-    transform: scale(0);
-  }
-}
-```
-
-{% raw %}
-<div id="anim" class="demo">
-  <span v-show="show" transition="bounce">Look at me!</span>
-  <br>
-  <button @click="show = !show">Toggle</button>
-</div>
-
-<style>
-  .bounce-enter {
-    -webkit-animation: bounce-in .5s;
-    animation: bounce-in .5s;
-  }
-  .bounce-leave {
-    -webkit-animation: bounce-out .5s;
-    animation: bounce-out .5s;
-  }
-  @keyframes bounce-in {
-    0% {
-      transform: scale(0);
-      -webkit-transform: scale(0);
-    }
-    50% {
-      transform: scale(1.5);
-      -webkit-transform: scale(1.5);
-    }
-    100% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-    }
-  }
-  @keyframes bounce-out {
-    0% {
-      transform: scale(1);
-      -webkit-transform: scale(1);
-    }
-    50% {
-      transform: scale(1.5);
-      -webkit-transform: scale(1.5);
-    }
-    100% {
-      transform: scale(0);
-      -webkit-transform: scale(0);
-    }
-  }
-  @-webkit-keyframes bounce-in {
-    0% {
-      -webkit-transform: scale(0);
-    }
-    50% {
-      -webkit-transform: scale(1.5);
-    }
-    100% {
-      -webkit-transform: scale(1);
-    }
-  }
-  @-webkit-keyframes bounce-out {
-    0% {
-      -webkit-transform: scale(1);
-    }
-    50% {
-      -webkit-transform: scale(1.5);
-    }
-    100% {
-      -webkit-transform: scale(0);
-    }
-  }
-</style>
-
-<script>
-new Uppy({
-  el: '#anim',
-  data: { show: true }
-})
-</script>
-{% endraw %}
-
-## JavaScript Transitions
-
-You can also use just the JavaScript hooks without defining any CSS rules. When using JavaScript only transitions, **the `done` callbacks are required for the `enter` and `leave` hooks**, otherwise they will be called synchronously and the transition will finish immediately.
-
-It's also a good idea to explicitly declare `css: false` for your JavaScript transitions so that Uppy.js can skip the CSS detection. This also prevents cascaded CSS rules from accidentally interfering with the transition.
-
-The following example registers a custom JavaScript transition using jQuery:
-
-``` js
-Uppy.transition('fade', {
-  css: false,
-  enter: function (el, done) {
-    // element is already inserted into the DOM
-    // call done when animation finishes.
-    $(el)
-      .css('opacity', 0)
-      .animate({ opacity: 1 }, 1000, done)
-  },
-  enterCancelled: function (el) {
-    $(el).stop()
-  },
-  leave: function (el, done) {
-    // same as enter
-    $(el).animate({ opacity: 0 }, 1000, done)
-  },
-  leaveCancelled: function (el) {
-    $(el).stop()
-  }
-})
-```
-
-Then you can use it with the `transition` attribute, same deal:
-
-``` html
-<p transition="fade"></p>
-```
-
-## Staggering Transitions
-
-It's possible to create staggering transitions when using `transition` with `v-for`. You can do this either by adding a `stagger`, `enter-stagger` or `leave-stagger` attribute to your transitioned element:
-
-``` html
-<div v-for="list" transition stagger="100"></div>
-```
-
-Or, you can provide a `stagger`, `enterStagger` or `leaveStagger` hook for finer-grained control:
-
-``` js
-Uppy.transition('stagger', {
-  stagger: function (index) {
-    // increase delay by 50ms for each transitioned item,
-    // but limit max delay to 300ms
-    return Math.min(300, index * 50)
-  }
-})
-```
-
-Example:
-
-<iframe width="100%" height="200" style="margin-left:10px" src="http://jsfiddle.net/yyx990803/mvo99bse/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

website/src/index.md

@@ -1,2 +1,5 @@
 index: true
 ---
+
+
+bla bla

website/src/perf/index.md

@@ -1,15 +0,0 @@
----
-title: Performance Comparisons
----
-
-## TodoMVC Benchmark
-
-> *Last Updated: 2014-10-12*
-
-Looking for the TodoMVC Benchmark? It's been removed because after discussion with some other framework authors we have agreed that:
-
-1. The original intention of these benchmarks were for comparing Browser performance rather than that of frameworks. The "synchrorously trigger an action xxx times" test routine doesn't reflect meaningful real world user actions.
-
-2. Due to internal implementation differences, frameworks that uses async rendering (e.g. Uppy, Om, Mercury) gains the advantage by skipping part of the calculations that happened in the same event loop. The real world user experience doesn't demonstrate such dramatic difference.
-
-3. Overall this benchmark suite gave rise to more controversy than constructive insights, so it's been removed and I'd be happy to replace it with a more meaningful way to measure front-end performance.

website/themes/uppy/_config.yml

@@ -1,3 +1,3 @@
-google_analytics: UA-46852172-1
+google_analytics: UA-63083-12
 root_domain: uppyjs.io
-vue_version: 1.0.10
+uppy_version: 0.0.1

website/themes/uppy/layout/index.ejs

@@ -8,32 +8,29 @@
       <%- partial('partials/community_dropdown') %>
     </ul>
     <div id="logo-wrap">
-      <img id="logo" width="200" height="200" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
-      <h1>Uppy.js</h1>
+      <img id="logo" width="200" class="emoji dog" title="puppy" src="<%- config.logo_large %>">
+      <h1><%- config.title %></h1>
     </div>
     <p class="desc">
       <strong>
-        Uppy - Almost as cute as a <img width="24" height="24" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
+        <%- config.subtitle %> <img align="absmiddle" width="18" height="18" class="emoji dog" title="puppy" src="/images/emojis/dog.png">
       </strong>
       <br />
       <br />
-
-      Hey there stranger! We just copied the wonderful <a href="http://vuejs.org">Vue.js</a> website (we included its MIT license and attribution with our sources) to push our
-        boilerplate out. We'll iterate and make this place our own - but there really is nothing to see here yet other than ~plagiarism : )
-
+      <%- config.description %>
     </p>
     <p class="buttons">
-      <a href="/guide/installation.html" class="button">Install v<%- theme.vue_version %></a>
+      <a href="/guide/installation.html" class="button">Install v<%- theme.uppy_version %></a>
     </p>
     <ul id="social">
-      <li><a href="https://twitter.com/transloadit" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @transloadit</a></li>
+      <li><a href="https://twitter.com/uppyjs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @uppyjs</a></li>
       <li><iframe src="http://ghbtns.com/github-btn.html?user=transloadit&repo=uppy&type=watch&count=true"
     allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
-      <li id="donate">
-        <span class="wrapper">
-          <img src="/images/paypal.png">
-          <a href="https://www.paypal.me/transloadit" target="_blank">Donate</a>
-        </span>
+
+      <li id="buildbadge">
+       <span class="wrapper">
+         <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
+       </span>
       </li>
     </ul>
   </div>
@@ -66,7 +63,7 @@
 </pre></td><td class="code"><pre><span class="keyword">var</span> demo = <span class="keyword">new</span> Uppy({
   el: <span class="string">'#demo'</span>,
   data: {
-    message: <span class="string">'Hello Uppy.js!'</span>
+    message: <span class="string">'Hello Uppy!'</span>
   }
 })
 </pre></td></tr></tbody></table></figure>
@@ -83,7 +80,7 @@
     var demo = new Uppy({
       el: '#demo',
       data: {
-        message: 'Hello Uppy.js!'
+        message: 'Hello Uppy!'
       }
     })
     </script>
@@ -91,46 +88,29 @@
 </div>
 <div id="features">
   <div class="feats">
-    <div class="feat">
-      <h2><span class="icon simple"></span>Simple</h2>
-      <p>Write some HTML, grab some JSON, create a Uppy instance, that's it.</p>
-    </div>
-    <div class="feat">
-      <h2><span class="icon powerful"></span>Reactive</h2>
-      <p>Expressions & computed properties with transparent dependency tracking.</p>
-    </div>
-    <div class="feat">
-      <h2><span class="icon composable"></span>Components</h2>
-      <p>Compose your application with decoupled, reusable components.</p>
-    </div>
-    <div class="feat">
-      <h2><span class="icon compact"></span>Compact</h2>
-      <p>~24kb min+gzip, no dependency.</p>
-    </div>
-    <div class="feat">
-      <h2><span class="icon fast"></span>Fast</h2>
-      <p>Precise and efficient async batch DOM updates.</p>
-    </div>
-    <div class="feat">
-      <h2><span class="icon module"></span>Package Ready</h2>
-      <p>Install via NPM or Bower - leverage your favorite eco system!</p>
-    </div>
+    <% for (var k in site.data.features) { var v = site.data.features[k]; %>
+      <div class="feat">
+        <h2><span class="icon <%- v.icon %>"></span><%- v.title %></h2>
+        <p> <%- v.description %></p>
+      </div>
+    <% } %>
   </div>
 </div>
-<div id="why">
-  <h2>You should try it out if you like:</h2>
+<div id="design_goals">
+  <h2>Design Goals:</h2>
   <ul>
-    <li>Extendable Data bindings</li>
-    <li>Plain JS object models</li>
-    <li>API that simply makes sense</li>
-    <li>Build UI by composing components</li>
-    <li>Mix &amp; matching small libraries</li>
+    <% for (var k in site.data.design_goals) { var v = site.data.design_goals[k]; %>
+    <li>
+      <%- v %>
+    </li>
+    <% } %>
   </ul>
 </div>
 <div id="footer">
   <a class="start" href="/guide/index.html">Get Started</a>
   <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
-  <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="http://transloadit.com" target="_blank">Transloadit</a></p>
+  <p>This site borrows heavily from Evan You's excellent <a href="https://github.com/vuejs/vuejs.org">Vue.js</a> (<a href="https://github.com/transloadit/uppy/blob/master/website/VUEORG_LICENSE">LICENSE</a>)</p>
+  <p>Copyright (c) <%- date(Date.now(), 'YYYY') %> <a href="https://transloadit.com" target="_blank">Transloadit</a></p>
 </div>
 
 <!-- Twitter follow button script -->

website/themes/uppy/layout/layout.ejs

@@ -2,19 +2,19 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title><%- page.title ? page.title + ' - ' : '' %>Uppy.js</title>
+        <title><%- page.title ? page.title + ' - ' : '' %><%- config.title %></title>
         <meta charset="utf-8">
-        <meta name="description" content="Uppy.js file uploading - Almost as cute as a puppy">
+        <meta name="description" content="<%- config.title %> - <%- config.subtitle %>">
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
         <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
-        <link href='http://fonts.googleapis.com/css?family=Dosis:300,500&text=Uppy.js' rel='stylesheet' type='text/css'>
-        <link rel="icon" href="/images/logo.png" type="image/x-icon">
+        <link href='http://fonts.googleapis.com/css?family=Dosis:300,500&text=Uppy' rel='stylesheet' type='text/css'>
+        <link rel="icon" href="<%- config.logo_icon %>" type="image/x-icon">
         <script>
             window.PAGE_TYPE = "<%- page.type %>"
         </script>
         <%- css(isIndex ? 'css/index' : 'css/page') %>
         <%- partial('partials/ga') %>
-        <script src="/js/Uppy.js"></script>
+        <script src="/js/vue.js"></script>
     </head>
     <body>
         <div id="mobile-bar">
@@ -39,7 +39,7 @@
         <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
         <script>
             document.addEventListener('DOMContentLoaded', function() {
-                FastClick.attach(document.body);
+              FastClick.attach(document.body);
             }, false);
         </script>
     </body>

website/themes/uppy/layout/page.ejs

@@ -3,9 +3,6 @@
 <% } %>
 <div class="content <%- page.type ? page.type + ' with-sidebar' : '' %>">
     <h1><%- page.title %><%- page.type === 'examples' ? ' Example' : '' %></h1>
-    <div id="ad">
-        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=transloadit" id="_carbonads_js"></script>
-    </div>
     <%- page.content %>
     <% if (page.type === 'guide') { %>
       <div class="guide-links">
@@ -17,5 +14,5 @@
         <% }) %>
       </div>
     <% } %>
-    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/transloadit/uppyjs.io" target="_blank">Fork this site on Github</a>!</div>
+    <div class="footer">Caught a mistake or want to contribute to the documentation? <a href="https://github.com/transloadit/uppy" target="_blank">Fork this site on Github</a>!</div>
 </div>

website/themes/uppy/layout/partials/blog.ejs

@@ -4,7 +4,7 @@
   </ul>
 </div>
 <div class="content blog">
-<h1 style="text-align: center; margin-bottom:.5em">The Uppy.js Blog</h1>
+<h1 style="text-align: center; margin-bottom:.5em">The <%- config.title %> Blog</h1>
 <% site.posts.sort('date', -1).each(function (post) { %>
     <div class="post">
         <h2><a href="/<%- post.path %>"><%- post.title %></a></h2>

website/themes/uppy/layout/partials/community_dropdown.ejs

@@ -2,8 +2,7 @@
   <a class="nav-link">Community</a><span class="arrow"></span>
   <ul class="nav-dropdown">
     <li><a href="https://github.com/transloadit/uppy" class="nav-link" target="_blank">GitHub</a></li>
-    <li><a href="http://forum.uppyjs.io" class="nav-link" target="_blank">Forum</a></li>
     <li><a href="https://gitter.im/transloadit/uppy" class="nav-link" target="_blank">Chat</a></li>
-    <li><a href="https://twitter.com/transloadit" class="nav-link" target="_blank">Twitter</a></li>
+    <li><a href="https://twitter.com/uppyjs" class="nav-link" target="_blank">Twitter</a></li>
   </ul>
 </li>

website/themes/uppy/layout/partials/header.ejs

@@ -1,9 +1,9 @@
 <div id="header">
     <a id="logo" href="/">
-        <img src="/images/logo.png">
-        <span>Uppy.js</span>
+        <img src="<%- config.logo_medium %>">
+        <span><%- config.title %></span>
     </a>
     <ul id="nav">
         <%- partial('partials/main_menu') %>
     </ul>
-</div>
+</div>

website/themes/uppy/layout/partials/sidebar.ejs

@@ -4,24 +4,18 @@
     </ul>
     <div class="list">
         <h2>
-            <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
-            <select class="version-select">
-                <option selected>1.0</option>
-                <option>0.12</option>
-                <option>0.11</option>
-            </select>
+          <%- type === 'api' ? 'API' : (type.charAt(0).toUpperCase() + type.slice(1)) %>
         </h2>
         <ul class="menu-root">
-            <% type !== 'api' && site.pages.find({type: type}).sort('order').each(function (p) { %>
+            <% site.pages.find({type: type}).sort('order').each(function (p) { %>
                 <li>
                     <a href="/<%- p.path %>" class="sidebar-link<%- page.title === p.title ? ' current' : '' %><%- p.is_new ? ' new' : '' %>"><%- p.title %></a>
                 </li>
             <% }) %>
         </ul>
-        <div id="donate">
+        <div id="buildbadge">
             <span class="wrapper" style="width: 110px">
-              <img src="/images/paypal.png">
-              <a href="https://www.paypal.me/transloadit" target="_blank">Buy Me Coffee</a>
+              <a href="https://travis-ci.org/transloadit/uppy"><img src="https://travis-ci.org/transloadit/uppy.svg" alt="Build Status"></a>
             </span>
         </div>
     </div>

website/themes/uppy/layout/post.ejs

@@ -15,9 +15,6 @@
 </div>
 <div class="content blog post">
     <h1><%- page.title %></h1>
-    <div id="ad">
-        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=transloadit" id="_carbonads_js"></script>
-    </div>
     <h4><%- page.date.format('MMM D[,] YYYY') %></h4>
     <%- page.content %>
 </div>

website/themes/uppy/source/css/_blog.styl

@@ -8,7 +8,7 @@
         a
             color $dark
             &:hover
-                border-bottom 2px solid $green
+                border-bottom 2px solid $primary
     h4
         color $light
         margin 1.2em 0

website/themes/uppy/source/css/_common.styl

@@ -45,13 +45,13 @@ a.button
     font-family $code-font
     font-weight 700
     color #fff
-    background-color lighten($green, 8%)
-    border-bottom 2px solid darken($green, 12%)
+    background-color lighten($primary, 8%)
+    border-bottom 2px solid darken($primary, 12%)
     padding 12px 14px
     border-radius 4px
     transition all .15s ease
     &:hover
-        background-color lighten($green, 15%)
+        background-color lighten($primary, 15%)
         -webkit-transform translate(0, -2px)
         transform translate(0, -2px)
 
@@ -102,25 +102,6 @@ a.button
     padding 0 60px 30px
     overflow-x hidden
 
-#ad
-    width 130px
-    position fixed
-    z-index 99
-    bottom 10px
-    right 10px
-    padding 10px
-    background-color #fff
-    border-radius 3px
-    font-size 13px
-    .carbon-img, .carbon-text
-        display block
-        margin-bottom 6px
-        font-weight normal
-        color $medium
-    .carbon-poweredby
-        color #aaa
-        font-weight normal
-
 #nav
     .nav-link
         cursor pointer
@@ -152,7 +133,7 @@ a.button
             display block
             padding 0 30px 0 20px
             &:hover
-                color $green
+                color $primary
     .arrow
         display inline-block
         vertical-align middle
@@ -164,34 +145,3 @@ a.button
         border-left 4px solid transparent
         border-right 4px solid transparent
         border-top 5px solid #ccc
-
-#donate
-    height 24px
-    .wrapper
-        vertical-align top
-        height 20px
-        border 1px solid #d4d4d4
-        display inline-block
-        box-sizing border-box
-        line-height 16px
-        border-radius 3px
-        cursor pointer
-        background-image linear-gradient(to bottom,#fcfcfc 0,#eee 100%)
-        position relative
-        width 72px
-        &:hover
-            border-color #ccc
-            background-image linear-gradient(to bottom,#eee 0,#ddd 100%)
-        img
-            width 14px
-            height 14px
-            position absolute
-            top 3px
-            left 5px
-        a
-            font 700 11px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif
-            color #333333
-            text-shadow 0 1px 0 #fff
-            position absolute
-            top 2px
-            left 24px

website/themes/uppy/source/css/_settings.styl

@@ -8,12 +8,15 @@ $body-font-size = 15px
 $code-font-size = .8em
 
 // colors
-$dark   = #2c3e50
-$medium = #34495e
-$light  = #7f8c8d
-$green  = #42b983
-$border = #dddddd
-$codebg = #f8f8f8
-$red = #ff6666
+$blue     = #01A5E1
+$dark     = #2c3e50
+$medium   = #34495e
+$light    = #7f8c8d
+$green    = #42b983
+$border   = #dddddd
+$codebg   = #f8f8f8
+$red      = #ff6666
+$darkgray = #34393A
+$primary  = $blue
 
 $radius = 2px

website/themes/uppy/source/css/index.styl

@@ -36,7 +36,7 @@ html, body
     &:first-child
         margin-left 0
     &:hover, &.current
-        border-bottom 3px solid $green
+        border-bottom 3px solid $primary
 
 #logo
     display block
@@ -78,7 +78,7 @@ html, body
         left 0
         padding 1.5em 0
         img
-            width 20px  
+            width 20px
     a.button
         width 280px
         margin .5em
@@ -137,7 +137,7 @@ html, body
             font-family $body-font
             &:focus
                 outline none
-                border-color $green
+                border-color $primary
 
 #features
     padding 3em 0
@@ -168,7 +168,7 @@ html, body
             padding-left 52px
             margin .4em 0
         a
-            color $green
+            color $primary
             font-weight 600
     .icon
         display inline-block
@@ -191,9 +191,9 @@ html, body
         &.module
             background-position -200px 0
 
-#why
+#design_goals
     padding 4em 0
-    background-color $green
+    background-color $primary
     color #fff
     h2
         margin-top 0
@@ -203,7 +203,7 @@ html, body
     ul
         line-height 1.8em
         font-size 1.15em
-        width 320px
+        width 640px
         margin 0 auto
         padding 0
         list-style-type none
@@ -222,7 +222,7 @@ html, body
     text-align center
     color #fff
     padding 4em 0
-    background-color #7f8c8d
+    background-color $darkgray
     .avatar
         width 100px
         border-radius 100%
@@ -251,7 +251,7 @@ html, body
 #main
     display none
 
-#donate
+#buildbadge
     margin-left -2px !important
 
 @media screen and (max-width: 480px)
@@ -302,16 +302,12 @@ html, body
         font-size 14px
         margin .8em 0
         width 250px
-    #why
+    #design_goals
         ul
             width 280px
             font-size 1.1em
         h2
             font-size 1.4em
-    #ad
-        position static
-        .carbon-img, .carbon-text, .carbon-poweredby
-            display inline-bloc
 
 @media screen and (max-width: 860px)
     #features, #hero

website/themes/uppy/source/css/page.styl

@@ -30,7 +30,7 @@ $header-height = 40px
 .nav-link
     padding-bottom 3px
     &:hover, &.current
-        border-bottom 3px solid $green
+        border-bottom 3px solid $primary
 
 #search-query
     height 30px
@@ -45,7 +45,7 @@ $header-height = 40px
     background #fff url(/images/search.png) 8px 5px no-repeat
     background-size 20px
     &:focus
-        border-color $green
+        border-color $primary
 
 #logo
     display inline-block
@@ -82,7 +82,7 @@ $header-height = 40px
         position absolute
         width 30px
         height 30px
-        background url(../images/logo.png) center center no-repeat
+        background url(../images/cute-puppy-2.png) center center no-repeat
         top 5px
         left 50%
         margin-left -15px
@@ -121,7 +121,7 @@ $header-height = 40px
         color $light
         &.current
             font-weight 600
-            color $green
+            color $primary
         &.new
             &:after
                 content "NEW"
@@ -129,7 +129,7 @@ $header-height = 40px
                 font-size 10px
                 font-weight 600
                 color #fff
-                background-color $green
+                background-color $primary
                 line-height 14px
                 padding 0 4px
                 border-radius 3px
@@ -138,11 +138,11 @@ $header-height = 40px
                 position relative
                 top -1px
         &:hover
-            border-bottom 2px solid $green
+            border-bottom 2px solid $primary
     .section-link
         &.active
             font-weight bold
-            color $green
+            color $primary
     .main-menu
         margin-bottom 20px
         display none
@@ -188,7 +188,7 @@ $header-height = 40px
         position relative
         &:before
             content "#"
-            color $green
+            color $primary
             position absolute
             left -0.7em
             top -2px
@@ -201,12 +201,12 @@ $header-height = 40px
     ul, ol
         padding-left 1.5em
     a
-        color $green
+        color $primary
         font-weight 600
     blockquote
         margin 2em 0
         padding-left 20px
-        border-left 4px solid $green
+        border-left 4px solid $primary
         p
             font-weight 600
             margin-left 0
@@ -255,27 +255,8 @@ $header-height = 40px
 @media screen and (max-width: 1200px)
     .content.with-sidebar
         margin-left 280px
-    #ad
-        z-index 8
-        position relative
-        width auto
-        height 100px
-        padding 0
-        bottom 0
-        right 0
-        margin 30px 0 35px
-        .carbon-wrap, .carbon-img, .carbon-text, .carbon-poweredby
-            display inline-block
-            vertical-align top
-        .carbon-text
-            width 130px
-            margin-left 15px
-        .carbon-poweredby
-            position absolute
-            bottom 0
-            left 145px
 
-#donate
+#buildbadge
     margin-top 15px
 
 @media screen and (max-width: 560px)
@@ -299,7 +280,7 @@ $header-height = 40px
     .nav-link
         padding-bottom 1px
         &:hover, &.current
-            border-bottom 2px solid $green
+            border-bottom 2px solid $primary
     #search-query
         width 200px
         margin-bottom 10px

website/themes/uppy/source/js/common.js

@@ -26,7 +26,7 @@
   if (currentPageAnchor || isAPI) {
     var allLinks = []
     var sectionContainer
-    if (isAPI) {
+    if (false && isAPI) {
       sectionContainer = document.querySelector('.menu-root')
     } else {
       sectionContainer = document.createElement('ul')
@@ -161,7 +161,7 @@
   }
 
   // Search with SwiftType
-  
+
   (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
   (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
   e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);

website/themes/uppy/source/js/uppy.js → website/themes/uppy/source/js/vue.js

@@ -1,5 +1,5 @@
 /*!
- * Uppy.js v1.0.10
+ * Uppy.js v0.0.1
  * (c) 2015 Transloadit
  * Released under the MIT License.
  */
@@ -1575,7 +1575,7 @@
 
   strats.data = function (parentVal, childVal, vm) {
     if (!vm) {
-      // in a Uppy.extend merge, both should be functions
+      // in an Uppy.extend merge, both should be functions
       if (!childVal) {
         return parentVal;
       }
@@ -4446,7 +4446,7 @@
   }
 
   /**
-   * Call attach hook for a Uppy instance.
+   * Call attach hook for an Uppy instance.
    *
    * @param {Uppy} child
    */
@@ -4472,7 +4472,7 @@
   }
 
   /**
-   * Call detach hook for a Uppy instance.
+   * Call detach hook for an Uppy instance.
    *
    * @param {Uppy} child
    */
@@ -9274,7 +9274,7 @@
     partial: partial
   };
 
-  Uppy.version = '1.0.10';
+  Uppy.version = '0.0.1';
 
   /**
    * Uppy and every constructor that extends Uppy has an

website/update.js

@@ -1,30 +1,32 @@
-var fs = require('fs')
-var version = require('../uppy/package.json').version
+var fs            = require('fs')
+var version       = require('../package.json').version
 var themeconfPath = 'themes/uppy/_config.yml'
-var installPath = 'src/guide/installation.md'
-var themeconfig = fs.readFileSync(themeconfPath, 'utf-8')
-var installation = fs.readFileSync(installPath, 'utf-8')
+var installPath   = 'src/guide/installation.md'
+var themeconfig   = fs.readFileSync(themeconfPath, 'utf-8')
+var installation  = fs.readFileSync(installPath, 'utf-8')
+
+// fs.writeFileSync('themes/uppy/layout/partials/DESIGNGOALS.md', fs.readFileSync('../DESIGNGOALS.md', 'utf-8'));
 
 fs.writeFileSync(
   themeconfPath,
-  themeconfig.replace(/vue_version: .*/, 'vue_version: ' + version)
+  themeconfig.replace(/uppy_version: .*/, 'uppy_version: ' + version)
 )
 
 var sizes = {
-  dev: 'Uppy.js',
-  min: 'uppy.min.js',
-  gz: 'uppy.min.js.gz'
+  // min: 'uppy.min.js',
+  // gz: 'uppy.min.js.gz',
+  dev: './uppy.js'
 }
 
 for (var file in sizes) {
-  var filesize = fs.statSync('../uppy/dist/' + sizes[file], 'utf-8').size
+  var filesize = fs.statSync('../dist/' + sizes[file], 'utf-8').size
   sizes[file] = (filesize / 1024).toFixed(2)
 }
 
 fs.writeFileSync(
   installPath,
   installation
-    .replace(/vue_version: .*/, 'vue_version: ' + version)
+    .replace(/uppy_version: .*/, 'uppy_version: ' + version)
     .replace(/(\w+)_size:.*/g, function (m, p1) {
       return p1 + '_size: "' + sizes[p1] + '"'
     })