|
@@ -1,19 +1,22 @@
|
|
|
# Transloadit JavaScript SDK architecture
|
|
|
|
|
|
-### Core
|
|
|
-1. The core function `thansloadit` accepts `options` and exposes methods like `.use` for adding plugins and `.set` for setting options.
|
|
|
+## Core
|
|
|
+
|
|
|
+1. The core function `transloadit` accepts `options` and exposes methods like `.use` for adding plugins and `.set` for setting options.
|
|
|
2. Each plugin is then called by the `use` with given `options` as an argument.
|
|
|
-3. The result is passed from the plugin to ```prepareMedia``` for some final processing
|
|
|
-4. Then the processed files go into ```upload``` which uploads everything to Transloadit servers, using `tus`.
|
|
|
+3. The result is passed from the plugin to `prepareMedia` for some final processing
|
|
|
+4. Then the processed files go into `upload` which uploads everything to Transloadit servers, using `tus`.
|
|
|
+
|
|
|
+## Plugins
|
|
|
|
|
|
-### Plugins
|
|
|
1. Plugins should be registered like this:
|
|
|
```javascript
|
|
|
transloadit.use(dragndrop, {
|
|
|
selector: '.drop'
|
|
|
});
|
|
|
```
|
|
|
-```dragndrop``` here is function that we pass as an argument.
|
|
|
+
|
|
|
+`dragndrop` here is function that we pass as an argument.
|
|
|
*For reference, see [Markdown-It](https://github.com/markdown-it/markdown-it/blob/master/lib/index.js#L459).*
|
|
|
|
|
|
2. Settings and handlers should be chainable and set like this:
|
|
@@ -27,7 +30,7 @@ transloadit
|
|
|
.on('error', handleError);
|
|
|
```
|
|
|
|
|
|
-3. In ```transloadit-js``` everything is a plugin: a `Modal` dialog, `Drag & Drop`, `Instagram`. We borrow general approach from the new Babel and PostCSS — almost barebones by default, 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.
|
|
|
+3. In `transloadit-js` everything is a plugin: a `Modal` dialog, `Drag & Drop`, `Instagram`. We borrow general approach from the new Babel and PostCSS — almost barebones by default, 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. Presets should exist with basic plugins like `Modal` & `Drag & Drop`. This should let people who just want to get it working as quickly as possible get started in seconds:
|
|
|
```javascript
|
|
@@ -36,7 +39,7 @@ transloadit
|
|
|
.use(transloaditBasic, {some: 'config'})
|
|
|
```
|
|
|
|
|
|
- *See [```es2015-preset```](https://babeljs.io/docs/plugins/preset-es2015/) for Babel and [```PreCSS```](https://github.com/jonathantneal/precss#plugins) for PostCSS.*
|
|
|
+ *See [`es2015-preset`](https://babeljs.io/docs/plugins/preset-es2015/) for Babel and [`PreCSS`](https://github.com/jonathantneal/precss#plugins) for PostCSS.*
|
|
|
|
|
|
or just make it a code sample for easy copy/pasting and future customizations (no need to change the main function call, just add/remove lines to modify behaviour):
|
|
|
```javascript
|
|
@@ -46,11 +49,12 @@ transloadit
|
|
|
.use(dragdrop, {target: transloaditModal})
|
|
|
```
|
|
|
|
|
|
-5. Users should be able to set themes and style settings in config: ```.use(myTheme)```.
|
|
|
+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.
|
|
|
|
|
|
-### Usage
|
|
|
+## Usage
|
|
|
+
|
|
|
```javascript
|
|
|
import transloadit from 'transloadit';
|
|
|
import dragndrop from 'transloadit-dragndrop';
|
|
@@ -73,7 +77,8 @@ transloadit
|
|
|
.on('done', handleResult);
|
|
|
```
|
|
|
|
|
|
-### References & Inspiration
|
|
|
+## References & Inspiration
|
|
|
+
|
|
|
1. PostCSS
|
|
|
2. Markdown-It
|
|
|
3. Babel
|