example: fix custom-provider example (#3854)

.eslintrc.js

@@ -122,7 +122,7 @@ module.exports = {
     'jsdoc/check-examples': 'off', // cannot yet be supported for ESLint 8, see https://github.com/eslint/eslint/issues/14745
     'jsdoc/check-param-names': ['warn'],
     'jsdoc/check-syntax': ['warn'],
-    'jsdoc/check-tag-names': 'error',
+    'jsdoc/check-tag-names': ['error', { jsxTags: true }],
     'jsdoc/check-types': 'error',
     'jsdoc/newline-after-description': 'error',
     'jsdoc/valid-types': 'error',
@@ -191,6 +191,7 @@ module.exports = {
         'e2e/clients/**/*.js',
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
+        'examples/custom-provider/client/*.js',
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',
@@ -249,6 +250,8 @@ module.exports = {
       },
       rules: {
         'import/named': 'off', // Disabled because that rule tries and fails to parse JSX dependencies.
+        'import/no-named-as-default': 'off', // Disabled because that rule tries and fails to parse JSX dependencies.
+        'import/no-named-as-default-member': 'off', // Disabled because that rule tries and fails to parse JSX dependencies.
         'no-restricted-globals': [
           'error',
           {
@@ -358,7 +361,8 @@ module.exports = {
       files: [
         'bin/**.js',
         'bin/**.mjs',
-        'examples/**/*.js',
+        'examples/**/*.config.js',
+        'examples/**/*.cjs',
         'packages/@uppy/companion/test/**/*.js',
         'test/**/*.js',
         'test/**/*.ts',

examples/custom-provider/README.md

@@ -0,0 +1,25 @@
+# Uppy + Companion + Custom Provider Example
+
+This example uses @uppy/companion with a dummy custom provider.
+This serves as an illustration on how integrating custom providers would work
+
+## Run it
+
+**Note**: this example is using `fetch`, which is only available on Node.js 18+.
+
+First, you want to set up your environment variable. You can copy the content of
+`.env.example` and save it in a file named `.env`. You can modify in there all
+the information needed for the app to work that should not be committed
+(Google keys, Unsplash keys, etc.).
+
+```sh
+[ -f .env ] || cp .env.example .env
+```
+
+To run the example, from the root directory of this repo, run the following commands:
+
+```sh
+corepack yarn install
+corepack yarn build
+corepack yarn workspace @uppy-example/custom-provider start
+```

examples/custom-provider/client/MyCustomProvider.js → examples/custom-provider/client/MyCustomProvider.jsx

@@ -1,9 +1,13 @@
-const { UIPlugin } = require('@uppy/core')
-const { Provider } = require('@uppy/companion-client')
-const { ProviderViews } = require('@uppy/provider-views')
-const { h } = require('preact')
+/** @jsx h */
 
-module.exports = class MyCustomProvider extends UIPlugin {
+import { UIPlugin } from '@uppy/core'
+import { Provider } from '@uppy/companion-client'
+import { ProviderViews } from '@uppy/provider-views'
+import { h } from 'preact'
+
+const defaultOptions = {}
+
+export default class MyCustomProvider extends UIPlugin {
   constructor (uppy, opts) {
     super(uppy, opts)
     this.type = 'acquirer'
@@ -28,15 +32,14 @@ module.exports = class MyCustomProvider extends UIPlugin {
         pluginNameMyUnsplash: 'MyUnsplash',
       },
     }
+
+    // merge default options with the ones set by user
+    this.opts = { ...defaultOptions, ...opts }
+
     this.i18nInit()
-    this.title = this.i18n('MyUnsplash')
+    this.title = this.i18n('pluginNameMyUnsplash')
 
     this.files = []
-    this.onFirstRender = this.onFirstRender.bind(this)
-    this.render = this.render.bind(this)
-
-    // merge default options with the ones set by user
-    this.opts = { ...opts }
   }
 
   install () {

examples/custom-provider/client/main.js

@@ -1,8 +1,11 @@
-const Uppy = require('@uppy/core')
-const GoogleDrive = require('@uppy/google-drive')
-const Tus = require('@uppy/tus')
-const Dashboard = require('@uppy/dashboard')
-const MyCustomProvider = require('./MyCustomProvider')
+import Uppy from '@uppy/core'
+import GoogleDrive from '@uppy/google-drive'
+import Tus from '@uppy/tus'
+import Dashboard from '@uppy/dashboard'
+import MyCustomProvider from './MyCustomProvider.jsx'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
 
 const uppy = new Uppy({
   debug: true,

examples/custom-provider/index.html

@@ -4,9 +4,8 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Uppy Custom provider Example</title>
-    <link href="uppy.min.css" rel="stylesheet">
   </head>
   <body>
-    <script src="bundle.js"></script>
+    <script src="./client/main.js" type="module"></script>
   </body>
 </html>

examples/custom-provider/package.json

@@ -1,28 +1,32 @@
 {
   "name": "@uppy-example/custom-provider",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.2.2",
     "@uppy/companion-client": "workspace:*",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
     "@uppy/google-drive": "workspace:*",
     "@uppy/provider-views": "workspace:*",
     "@uppy/tus": "workspace:*",
-    "babelify": "^10.0.0",
+    "preact": "^10.5.13"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@uppy/companion": "workspace:*",
     "body-parser": "^1.18.2",
-    "budo": "^11.3.2",
+    "dotenv": "^16.0.1",
     "express": "^4.16.2",
     "express-session": "^1.15.6",
     "npm-run-all": "^4.1.2",
-    "preact": "^10.5.13",
-    "request": "2.88.2"
+    "vite": "^2.7.1"
   },
   "private": true,
   "scripts": {
-    "copy": "cp ../../packages/uppy/dist/uppy.min.css .",
-    "start": "npm-run-all --serial copy --parallel start:*",
-    "start:client": "budo client/main.js:bundle.js -- -t babelify",
-    "start:server": "node server/index.js"
+    "start": "npm-run-all --parallel start:server start:client",
+    "start:client": "vite",
+    "start:server": "node server/index.cjs"
   }
 }

examples/custom-provider/server/CustomProvider.cjs

@@ -0,0 +1,85 @@
+const { Readable } = require('node:stream')
+
+const BASE_URL = 'https://api.unsplash.com'
+
+function adaptData (res) {
+  const data = {
+    username: null,
+    items: [],
+    nextPagePath: null,
+  }
+
+  const items = res
+  items.forEach((item) => {
+    const isFolder = !!item.published_at
+    data.items.push({
+      isFolder,
+      icon: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb,
+      name: item.title || item.description,
+      mimeType: isFolder ? null : 'image/jpeg',
+      id: item.id,
+      thumbnail: isFolder ? item.cover_photo.urls.thumb : item.urls.thumb,
+      requestPath: item.id,
+      modifiedDate: item.updated_at,
+      size: null,
+    })
+  })
+
+  return data
+}
+
+/**
+ * an example of a custom provider module. It implements @uppy/companion's Provider interface
+ */
+class MyCustomProvider {
+  static version = 2
+
+  authProvider = 'myunsplash'
+
+  // eslint-disable-next-line class-methods-use-this
+  async list ({ token, directory }) {
+    const path = directory ? `/${directory}/photos` : ''
+
+    const resp = await fetch(`${BASE_URL}/collections${path}`, {
+      headers:{
+        Authorization: `Bearer ${token}`,
+      },
+    })
+    if (!resp.ok) {
+      throw new Error(`Errornous HTTP response (${resp.status} ${resp.statusText})`)
+    }
+    return adaptData(await resp.json())
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async download ({ id, token }) {
+    const resp = await fetch(`${BASE_URL}/photos/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+
+    if (!resp.ok) {
+      throw new Error(`Errornous HTTP response (${resp.status} ${resp.statusText})`)
+    }
+    return { stream: Readable.fromWeb(resp.body) }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  async size ({ id, token }) {
+    const resp = await fetch(`${BASE_URL}/photos/${id}`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    })
+
+    if (!resp.ok) {
+      throw new Error(`Errornous HTTP response (${resp.status} ${resp.statusText})`)
+    }
+
+    const { size } = await resp.json()
+    return size
+  }
+}
+
+module.exports = MyCustomProvider