Uppy

11 flashcards · Other · by lakesare

1. What's companion?

   Express server that can be plugged in existing express application. It's not a TUS server, it's just used for direct uploads from user's url to server, avoiding browser - As of now, Companion is integrated to work with: Google Drive Dropbox Instagram Remote URLs Amazon S3 The Provider plugins help you connect to your accounts with remote file providers such as Dropbox, Google Drive, Instagram and remote URLs (importing a file by pasting a direct link to it). Because this requires server-to-serv…

2. What will lerna run test do?

   It will run: npm run test in every package. To run a script in a particular package you can use lerna run test --scope=@walnut/common (@walnut/common name is taken from /packages/common/package.json .name field)

3. How to order selectors?

   All selectors are sorted alphabetically and by type. HTML elements go above classes and IDs in a file. Rules are sorted alphabetically.

4. What's a monorepo?

   When there are multiple packages in one app.

5. How is /packages/@uppy/informer used? class Informer extends Plugin{}

   uppy.info('hello world', 'info', 5000) or uppy.info('Error uploading img.jpg', 'error', 5000)

6. When is Dashboard's install() method called? const Uppy = require('@uppy/core') const XHRUpload = require('@uppy/xhr-upload') const Dashboard = require('@uppy/dashboard') // And their styles (for UI plugins) require('@uppy/core/dist/style.css') require('@uppy/dashboard/dist/style.css') const uppy = Uppy() .use(Dashboard, { trigger: '#select-files' }) .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })

   On .use(). use (Plugin, opts) { if (typeof Plugin !== 'function') { let msg = `Expected a plugin class, but got ${Plugin === null ? 'null' : typeof Plugin}.` + ' Please verify that the plugin was imported and spelled correctly.' throw new TypeError(msg) } // Instantiate const plugin = new Plugin(this, opts) const pluginId = plugin.id this.plugins[plugin.type] = this.plugins[plugin.type] || [] if (!pluginId) { throw new Error('Your plugin must have an id') } if (!plugin.type) { throw new Error('…

7. What's the path from Uppy().use(PluginClass, opts) to preact.render(DashboardUI, targetElement)?

   class Uppy{ use() { const plugin = new PluginClass(this, opts) plugin.install() } } class Dashboard extends Plugin{ install() { this.mount(target, this). } } class Plugin{ mount() { preact.render(this.render(this.uppy.getState()), targetElement) } } Dashboard defines this.render(state).

8. What is the signature of Preact.render()?

   render(component, containerNode, [replaceNode]) Render a Preact component into the containerNode DOM node. Returns a reference to the rendered DOM node. import { render } from 'preact'; // These examples show how render() behaves in a page with the following markup: // <div id="container"> // <h1>My App</h1> // </div> const container = document.getElementById('container'); render(MyComponent, container); // Append MyComponent to container // // <div id="container"> // <h1>My App</h1> // <MyComp…

9. When is it necessary to use import { h } from 'preact' ?

   When you write a jsx syntax like render() { return <div id="abc">Hello World</div> } Behind the screen it will be converted to render() { return h('div', { id: 'abc' }, 'Hello World') } So, when it is necessary to import h? Every time you use a jsx syntax. Because it is not part of the JavaScript spec, it have to be converted to the equivalent syntax. Which in preact using h or in react using React.createElement.

10. Where is preact.render(MyComponent, $('#here')) located?

    Inside Plugin's mount() method. Plugin{ mount(){ preact.render(this.render(this.uppy.getState()), targetElement) } }

11. What's inside of Uppy#use(PluginClass, opts) method?

    const plugin = new PluginClass(this, opts) plugin.install()