Architecture — state, actions, dispatcher, core

[arturi]

So, me and Harry discussed the future of Uppy (and our geenration) and how state/actions/render should work, and came up with the following rough plan:

1. We decouple all the rendering from plugins, html will live in spearate components, which will receive googleDriveRender (state, send), like in Choo: https://github.com/yoshuawuyts/choo/blob/master/examples/title/client.js#L21

(We should figure out if we want state or specific props, seems like Choo is doing state and that might be simpler, but component probably don’t need the whole app state, so maybe props object is better).

2. All actions should be done through dispatcher or bus, however we call it. So plugins extend core’s built-in actions like uppy:add-file and dashboard:open-modal. GoogleDrive adds actions like googledrive:fetch-folder and MetaData listens to uppy:add-file to add metadata to that file, and ProgressBar listens to uppy:file-progress and updates total progress and stuff like that.

Most things should be done with actions. Smaller components that render html should not know anything about core or methods, they receive data in props and send back actions, like so: <input type="text" oninput=${(e) => send('uppy:update-meta', e.target.value)}>.

3. Plugins need access to state with getState and setState, as well as dispatcher to register and emit events. Plugins probably don’t need access to the whole core and we should look into limiting them to those arguments: plugin(opts, getState, setState, dispatcher). But sometimes plugins need i18n and log which are currently in core. Should we pass that too, or should we look into decoupling them into separate modules?

4. After this refactor is finished we’ll have a go on using some smallest Uppy plugin with React, trying to provide custom React rendering method and finding a way to call React.render() when Uppy’s state updates. We’ll also study Choo some more and try to borrow from it. And we’ll also study https://github.com/zerocho/react-filepicker and https://github.com/nosir/cleave.js/tree/master/src and other projects that have both “normal” and React components.