@uppy/provider-views: refactor to ESM (#3715)

* @uppy/provider-views: refactor to ESM

* fix ESM to CJS transforms

`export {default as whatever} from 'whatever'` was not transformed correctly

.eslintrc.js

@@ -212,6 +212,7 @@ module.exports = {
         'packages/@uppy/locales/template.js',
         'packages/@uppy/onedrive/src/**/*.js',
         'packages/@uppy/progress-bar/src/**/*.js',
+        'packages/@uppy/provider-views/src/**/*.js',
         'packages/@uppy/screen-capture/src/**/*.js',
         'packages/@uppy/status-bar/src/**/*.js',
         'packages/@uppy/svelte/src/**/*.js',

bin/build-lib.js

@@ -63,9 +63,9 @@ async function isTypeModule (file) {
 }
 
 // eslint-disable-next-line no-shadow
-function transformExportDeclarations (path) {
+function ExportAllDeclaration (path) {
   const { value } = path.node.source
-  if (value.endsWith('.jsx') && value.startsWith('./')) {
+  if (value.endsWith('.jsx') && (value.startsWith('./') || value.startsWith('../'))) {
     // Rewrite .jsx imports to .js:
     path.node.source.value = value.slice(0, -1) // eslint-disable-line no-param-reassign
   }
@@ -110,7 +110,7 @@ async function buildLib () {
         // eslint-disable-next-line no-shadow
         ImportDeclaration (path) {
           let { value } = path.node.source
-          if (value.endsWith('.jsx') && value.startsWith('./')) {
+          if (value.endsWith('.jsx') && (value.startsWith('./') || value.startsWith('../'))) {
             // Rewrite .jsx imports to .js:
             value = path.node.source.value = value.slice(0, -1) // eslint-disable-line no-param-reassign,no-multi-assign
           }
@@ -173,10 +173,40 @@ async function buildLib () {
             )
           }
         },
-        ExportAllDeclaration: transformExportDeclarations,
+        ExportAllDeclaration,
         // eslint-disable-next-line no-shadow,consistent-return
         ExportNamedDeclaration (path) {
-          if (path.node.source != null) return transformExportDeclarations(path)
+          if (path.node.source != null) {
+            if (path.node.specifiers.length !== 1 || path.node.specifiers[0].local.name !== 'default') throw new Error('unsupported export named declaration')
+
+            if (path.node.specifiers[0].exported.name === 'default') return ExportAllDeclaration(path)
+
+            let { value } = path.node.source
+            if (value.endsWith('.jsx') && (value.startsWith('./') || value.startsWith('../'))) {
+              // Rewrite .jsx imports to .js:
+              value = path.node.source.value = value.slice(0, -1) // eslint-disable-line no-param-reassign,no-multi-assign
+            }
+
+            let requireCall = t.callExpression(t.identifier('require'), [
+              t.stringLiteral(value),
+            ])
+            if (esPackagesThatNeedSpecialTreatmentForRollupInterop.includes(value)) {
+              requireCall = t.logicalExpression('||', t.memberExpression(requireCall, t.identifier('default')), requireCall)
+            }
+
+            const { exported } = path.node.specifiers[0]
+            path.insertBefore(
+              t.variableDeclaration('const', [
+                t.variableDeclarator(
+                  exported,
+                  requireCall,
+                ),
+              ]),
+            )
+            path.replaceWith(
+              t.exportNamedDeclaration(null, [t.exportSpecifier(exported, exported)]),
+            )
+          }
         },
         // eslint-disable-next-line no-shadow
         ExportDefaultDeclaration (path) {

packages/@uppy/provider-views/package.json

@@ -6,6 +6,7 @@
   "main": "lib/index.js",
   "style": "dist/style.min.css",
   "types": "types/index.d.ts",
+  "type": "module",
   "keywords": [
     "file uploader",
     "uppy"

packages/@uppy/provider-views/src/Breadcrumbs.js → packages/@uppy/provider-views/src/Breadcrumbs.jsx

@@ -1,4 +1,4 @@
-const { h, Fragment } = require('preact')
+import { h, Fragment } from 'preact'
 
 const Breadcrumb = (props) => {
   const { getFolder, title, isLast } = props
@@ -17,7 +17,7 @@ const Breadcrumb = (props) => {
   )
 }
 
-module.exports = (props) => {
+export default (props) => {
   const { getFolder, title, breadcrumbsIcon, directories } = props
 
   return (

packages/@uppy/provider-views/src/Browser.js → packages/@uppy/provider-views/src/Browser.jsx

@@ -1,11 +1,12 @@
-const { h } = require('preact')
-const classNames = require('classnames')
+import { h } from 'preact'
 
-const remoteFileObjToLocal = require('@uppy/utils/lib/remoteFileObjToLocal')
+import classNames from 'classnames'
 
-const Filter = require('./Filter')
-const FooterActions = require('./FooterActions')
-const Item = require('./Item/index')
+import remoteFileObjToLocal from '@uppy/utils/lib/remoteFileObjToLocal'
+
+import Filter from './Filter.jsx'
+import FooterActions from './FooterActions.jsx'
+import Item from './Item/index.jsx'
 
 const VIRTUAL_SHARED_DIR = 'shared-with-me'
 
@@ -65,7 +66,7 @@ function Browser (props) {
         if (!folders.length && !files.length) {
           return (
             <div className="uppy-Provider-empty">
-              {props.i18n('noFilesFound')}
+              {i18n('noFilesFound')}
             </div>
           )
         }
@@ -136,4 +137,4 @@ function Browser (props) {
   )
 }
 
-module.exports = Browser
+export default Browser

packages/@uppy/provider-views/src/CloseWrapper.js

@@ -1,6 +1,6 @@
-const { Component, toChildArray } = require('preact')
+import { Component, toChildArray } from 'preact'
 
-module.exports = class CloseWrapper extends Component {
+export default class CloseWrapper extends Component {
   componentWillUnmount () {
     const { onUnmount } = this.props
     onUnmount()

packages/@uppy/provider-views/src/Filter.js → packages/@uppy/provider-views/src/Filter.jsx

@@ -1,11 +1,12 @@
-const { h, Component } = require('preact')
+import { h, Component } from 'preact'
 
-module.exports = class Filter extends Component {
+export default class Filter extends Component {
   constructor (props) {
     super(props)
     this.preventEnterPress = this.preventEnterPress.bind(this)
   }
 
+  // eslint-disable-next-line class-methods-use-this
   preventEnterPress (ev) {
     if (ev.keyCode === 13) {
       ev.stopPropagation()
@@ -14,29 +15,30 @@ module.exports = class Filter extends Component {
   }
 
   render () {
+    const { i18n, filterInput, filterQuery } = this.props
     return (
       <div className="uppy-ProviderBrowser-filter">
         <input
           className="uppy-u-reset uppy-ProviderBrowser-filterInput"
           type="text"
-          placeholder={this.props.i18n('filter')}
-          aria-label={this.props.i18n('filter')}
+          placeholder={i18n('filter')}
+          aria-label={i18n('filter')}
           onKeyUp={this.preventEnterPress}
           onKeyDown={this.preventEnterPress}
           onKeyPress={this.preventEnterPress}
-          onInput={(e) => this.props.filterQuery(e)}
-          value={this.props.filterInput}
+          onInput={(e) => filterQuery(e)}
+          value={filterInput}
         />
         <svg aria-hidden="true" focusable="false" className="uppy-c-icon uppy-ProviderBrowser-filterIcon" width="12" height="12" viewBox="0 0 12 12">
           <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
         </svg>
-        {this.props.filterInput && (
+        {filterInput && (
           <button
             className="uppy-u-reset uppy-ProviderBrowser-filterClose"
             type="button"
-            aria-label={this.props.i18n('resetFilter')}
-            title={this.props.i18n('resetFilter')}
-            onClick={this.props.filterQuery}
+            aria-label={i18n('resetFilter')}
+            title={i18n('resetFilter')}
+            onClick={filterQuery}
           >
             <svg aria-hidden="true" focusable="false" className="uppy-c-icon" viewBox="0 0 19 19">
               <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />

packages/@uppy/provider-views/src/FooterActions.js → packages/@uppy/provider-views/src/FooterActions.jsx

@@ -1,15 +1,15 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
-module.exports = (props) => {
+export default ({ cancel, done, i18n, selected }) => {
   return (
     <div className="uppy-ProviderBrowser-footer">
-      <button className="uppy-u-reset uppy-c-btn uppy-c-btn-primary" onClick={props.done} type="button">
-        {props.i18n('selectX', {
-          smart_count: props.selected,
+      <button className="uppy-u-reset uppy-c-btn uppy-c-btn-primary" onClick={done} type="button">
+        {i18n('selectX', {
+          smart_count: selected,
         })}
       </button>
-      <button className="uppy-u-reset uppy-c-btn uppy-c-btn-link" onClick={props.cancel} type="button">
-        {props.i18n('cancel')}
+      <button className="uppy-u-reset uppy-c-btn uppy-c-btn-link" onClick={cancel} type="button">
+        {i18n('cancel')}
       </button>
     </div>
   )

packages/@uppy/provider-views/src/Item/components/GridLi.js → packages/@uppy/provider-views/src/Item/components/GridLi.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 function GridListItem (props) {
   const {
@@ -48,4 +48,4 @@ function GridListItem (props) {
   )
 }
 
-module.exports = GridListItem
+export default GridListItem

packages/@uppy/provider-views/src/Item/components/ItemIcon.js → packages/@uppy/provider-views/src/Item/components/ItemIcon.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 function FileIcon () {
   return (
@@ -25,17 +25,20 @@ function VideoIcon () {
   )
 }
 
-module.exports = (props) => {
-  if (props.itemIconString === null) return
+export default (props) => {
+  const { itemIconString } = props
+  if (itemIconString === null) return undefined
 
-  switch (props.itemIconString) {
+  switch (itemIconString) {
     case 'file':
       return <FileIcon />
     case 'folder':
       return <FolderIcon />
     case 'video':
       return <VideoIcon />
-    default:
-      return <img src={props.itemIconString} alt={props.alt} />
+    default: {
+      const { alt } = props
+      return <img src={itemIconString} alt={alt} />
+    }
   }
 }

packages/@uppy/provider-views/src/Item/components/ListLi.js → packages/@uppy/provider-views/src/Item/components/ListLi.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 // if folder:
 //   + checkbox (selects all files from folder)
@@ -73,4 +73,4 @@ function ListItem (props) {
   )
 }
 
-module.exports = ListItem
+export default ListItem

packages/@uppy/provider-views/src/Item/index.js → packages/@uppy/provider-views/src/Item/index.jsx

@@ -1,26 +1,28 @@
-const { h } = require('preact')
-const classNames = require('classnames')
-const ItemIcon = require('./components/ItemIcon')
-const GridListItem = require('./components/GridLi')
-const ListItem = require('./components/ListLi')
+import { h } from 'preact'
 
-module.exports = (props) => {
-  const { author } = props
-  const itemIconString = props.getItemIcon()
+import classNames from 'classnames'
+import ItemIcon from './components/ItemIcon.jsx'
+import GridListItem from './components/GridLi.jsx'
+import ListItem from './components/ListLi.jsx'
+
+export default (props) => {
+  const { author, getItemIcon, isChecked, isDisabled, viewType } = props
+  const itemIconString = getItemIcon()
 
   const className = classNames(
     'uppy-ProviderBrowserItem',
-    { 'uppy-ProviderBrowserItem--selected': props.isChecked },
-    { 'uppy-ProviderBrowserItem--disabled': props.isDisabled },
+    { 'uppy-ProviderBrowserItem--selected': isChecked },
+    { 'uppy-ProviderBrowserItem--disabled': isDisabled },
     { 'uppy-ProviderBrowserItem--noPreview': itemIconString === 'video' },
   )
 
   const itemIconEl = <ItemIcon itemIconString={itemIconString} />
 
-  switch (props.viewType) {
+  switch (viewType) {
     case 'grid':
       return (
         <GridListItem
+          // eslint-disable-next-line react/jsx-props-no-spreading
           {...props}
           className={className}
           itemIconEl={itemIconEl}
@@ -28,10 +30,12 @@ module.exports = (props) => {
       )
     case 'list':
       return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
         <ListItem {...props} className={className} itemIconEl={itemIconEl} />
       )
     case 'unsplash':
       return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
         <GridListItem {...props} className={className} itemIconEl={itemIconEl}>
           <a
             href={`${author.url}?utm_source=Companion&utm_medium=referral`}
@@ -44,6 +48,6 @@ module.exports = (props) => {
         </GridListItem>
       )
     default:
-      throw new Error(`There is no such type ${props.viewType}`)
+      throw new Error(`There is no such type ${viewType}`)
   }
 }

packages/@uppy/provider-views/src/Loader.js

@@ -1,9 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return (
-    <div className="uppy-Provider-loading">
-      <span>{props.i18n('loading')}</span>
-    </div>
-  )
-}

packages/@uppy/provider-views/src/Loader.jsx

@@ -0,0 +1,9 @@
+import { h } from 'preact'
+
+export default ({ i18n }) => {
+  return (
+    <div className="uppy-Provider-loading">
+      <span>{i18n('loading')}</span>
+    </div>
+  )
+}

packages/@uppy/provider-views/src/ProviderView/AuthView.js → packages/@uppy/provider-views/src/ProviderView/AuthView.jsx

@@ -1,4 +1,4 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 function GoogleIcon () {
   return (
@@ -80,4 +80,4 @@ function AuthView (props) {
   )
 }
 
-module.exports = AuthView
+export default AuthView

packages/@uppy/provider-views/src/ProviderView/Header.js → packages/@uppy/provider-views/src/ProviderView/Header.jsx

@@ -1,7 +1,7 @@
-const User = require('./User')
-const Breadcrumbs = require('../Breadcrumbs')
+import User from './User.jsx'
+import Breadcrumbs from '../Breadcrumbs.jsx'
 
-module.exports = (props) => {
+export default (props) => {
   const components = []
   if (props.showBreadcrumbs) {
     components.push(Breadcrumbs({

packages/@uppy/provider-views/src/ProviderView/ProviderView.js → packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx

@@ -1,21 +1,38 @@
-const { h } = require('preact')
-const AuthView = require('./AuthView')
-const Header = require('./Header')
-const Browser = require('../Browser')
-const LoaderView = require('../Loader')
-const CloseWrapper = require('../CloseWrapper')
-const View = require('../View')
+import { h } from 'preact'
+
+import AuthView from './AuthView.jsx'
+import Header from './Header.jsx'
+import Browser from '../Browser.jsx'
+import LoaderView from '../Loader.jsx'
+import CloseWrapper from '../CloseWrapper.js'
+import View from '../View.js'
+
+import packageJson from '../../package.json'
 
 function getOrigin () {
   // eslint-disable-next-line no-restricted-globals
   return location.origin
 }
 
+function getRegex (value) {
+  if (typeof value === 'string') {
+    return new RegExp(`^${value}$`)
+  } if (value instanceof RegExp) {
+    return value
+  }
+  return undefined
+}
+function isOriginAllowed (origin, allowedOrigin) {
+  const patterns = Array.isArray(allowedOrigin) ? allowedOrigin.map(getRegex) : [getRegex(allowedOrigin)]
+  return patterns
+    .some((pattern) => pattern?.test(origin) || pattern?.test(`${origin}/`)) // allowing for trailing '/'
+}
+
 /**
  * Class to easily generate generic views for Provider plugins
  */
-module.exports = class ProviderView extends View {
-  static VERSION = require('../../package.json').version
+export default class ProviderView extends View {
+  static VERSION = packageJson.version
 
   /**
    * @param {object} plugin instance of the plugin
@@ -59,6 +76,7 @@ module.exports = class ProviderView extends View {
     })
   }
 
+  // eslint-disable-next-line class-methods-use-this
   tearDown () {
     // Nothing.
   }
@@ -156,8 +174,7 @@ module.exports = class ProviderView extends View {
    */
   addFolder (folder) {
     const folderId = this.providerFileToId(folder)
-    const state = this.plugin.getPluginState()
-    const folders = { ...state.selectedFolders }
+    const folders = { ...this.plugin.getPluginState().selectedFolders }
 
     if (folderId in folders && folders[folderId].loading) {
       return
@@ -210,8 +227,7 @@ module.exports = class ProviderView extends View {
 
       this.plugin.uppy.info(message)
     }).catch((e) => {
-      const state = this.plugin.getPluginState()
-      const selectedFolders = { ...state.selectedFolders }
+      const selectedFolders = { ...this.plugin.getPluginState().selectedFolders }
       delete selectedFolders[folderId]
       this.plugin.setPluginState({ selectedFolders })
       this.handleError(e)
@@ -227,7 +243,7 @@ module.exports = class ProviderView extends View {
 
     const authWindow = window.open(link, '_blank')
     const handleToken = (e) => {
-      if (!this.#isOriginAllowed(e.origin, this.plugin.opts.companionAllowedHosts) || e.source !== authWindow) {
+      if (!isOriginAllowed(e.origin, this.plugin.opts.companionAllowedHosts) || e.source !== authWindow) {
         this.plugin.uppy.log(`rejecting event from ${e.origin} vs allowed pattern ${this.plugin.opts.companionAllowedHosts}`)
         return
       }
@@ -257,21 +273,6 @@ module.exports = class ProviderView extends View {
     window.addEventListener('message', handleToken)
   }
 
-  #isOriginAllowed (origin, allowedOrigin) {
-    const getRegex = (value) => {
-      if (typeof value === 'string') {
-        return new RegExp(`^${value}$`)
-      } if (value instanceof RegExp) {
-        return value
-      }
-    }
-
-    const patterns = Array.isArray(allowedOrigin) ? allowedOrigin.map(getRegex) : [getRegex(allowedOrigin)]
-    return patterns
-      .filter((pattern) => pattern != null) // loose comparison to catch undefined
-      .some((pattern) => pattern.test(origin) || pattern.test(`${origin}/`)) // allowing for trailing '/'
-  }
-
   async handleScroll (event) {
     const path = this.nextPagePath || null
 
@@ -291,26 +292,21 @@ module.exports = class ProviderView extends View {
     }
   }
 
-  listAllFiles (path, files = null) {
-    files = files || []
-    return new Promise((resolve, reject) => {
-      this.provider.list(path).then((res) => {
-        res.items.forEach((item) => {
-          if (!item.isFolder) {
-            files.push(item)
-          } else {
-            this.addFolder(item)
-          }
-        })
-        const moreFiles = res.nextPagePath || null
-        if (moreFiles) {
-          return this.listAllFiles(moreFiles, files)
-            .then((files) => resolve(files))
-            .catch(e => reject(e))
-        }
-        return resolve(files)
-      }).catch(e => reject(e))
+  async listAllFiles (path, files = null) {
+    files = files || [] // eslint-disable-line no-param-reassign
+    const res = await this.provider.list(path)
+    res.items.forEach((item) => {
+      if (!item.isFolder) {
+        files.push(item)
+      } else {
+        this.addFolder(item)
+      }
     })
+    const moreFiles = res.nextPagePath
+    if (moreFiles) {
+      return this.listAllFiles(moreFiles, files)
+    }
+    return files
   }
 
   donePicking () {
@@ -401,6 +397,7 @@ module.exports = class ProviderView extends View {
 
     return (
       <CloseWrapper onUnmount={this.clearSelection}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <Browser {...browserProps} />
       </CloseWrapper>
     )

packages/@uppy/provider-views/src/ProviderView/User.js

@@ -1,10 +0,0 @@
-const { h } = require('preact')
-
-module.exports = (props) => {
-  return ([
-    <span className="uppy-ProviderBrowser-user" key="username">{props.username}</span>,
-    <button type="button" onClick={props.logout} className="uppy-u-reset uppy-ProviderBrowser-userLogout" key="logout">
-      {props.i18n('logOut')}
-    </button>,
-  ])
-}

packages/@uppy/provider-views/src/ProviderView/User.jsx

@@ -0,0 +1,10 @@
+import { h } from 'preact'
+
+export default ({ i18n, logout, username }) => {
+  return ([
+    <span className="uppy-ProviderBrowser-user" key="username">{username}</span>,
+    <button type="button" onClick={logout} className="uppy-u-reset uppy-ProviderBrowser-userLogout" key="logout">
+      {i18n('logOut')}
+    </button>,
+  ])
+}

packages/@uppy/provider-views/src/ProviderView/index.js

@@ -1 +1 @@
-module.exports = require('./ProviderView')
+export { default } from './ProviderView.jsx'

packages/@uppy/provider-views/src/SearchProviderView/Header.js → packages/@uppy/provider-views/src/SearchProviderView/Header.jsx

@@ -1,8 +1,8 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
 const SUBMIT_KEY = 13
 
-module.exports = (props) => {
+export default (props) => {
   const { searchTerm, i18n, search } = props
 
   const handleKeyPress = (ev) => {

packages/@uppy/provider-views/src/SearchProviderView/InputView.js → packages/@uppy/provider-views/src/SearchProviderView/InputView.jsx

@@ -1,26 +1,25 @@
-const { h } = require('preact')
+import { h } from 'preact'
 
-module.exports = (props) => {
+export default ({ i18n, search }) => {
   let input
+  const validateAndSearch = () => {
+    if (input.value) {
+      search(input.value)
+    }
+  }
   const handleKeyPress = (ev) => {
     if (ev.keyCode === 13) {
       validateAndSearch()
     }
   }
 
-  const validateAndSearch = () => {
-    if (input.value) {
-      props.search(input.value)
-    }
-  }
-
   return (
     <div className="uppy-SearchProvider">
       <input
         className="uppy-u-reset uppy-c-textInput uppy-SearchProvider-input"
         type="search"
-        aria-label={props.i18n('enterTextToSearch')}
-        placeholder={props.i18n('enterTextToSearch')}
+        aria-label={i18n('enterTextToSearch')}
+        placeholder={i18n('enterTextToSearch')}
         onKeyUp={handleKeyPress}
         ref={(input_) => { input = input_ }}
         data-uppy-super-focusable
@@ -30,7 +29,7 @@ module.exports = (props) => {
         type="button"
         onClick={validateAndSearch}
       >
-        {props.i18n('searchImages')}
+        {i18n('searchImages')}
       </button>
     </div>
   )

packages/@uppy/provider-views/src/SearchProviderView/SearchProviderView.js → packages/@uppy/provider-views/src/SearchProviderView/SearchProviderView.jsx

@@ -1,16 +1,19 @@
-const { h } = require('preact')
-const SearchInput = require('./InputView')
-const Browser = require('../Browser')
-const LoaderView = require('../Loader')
-const Header = require('./Header')
-const CloseWrapper = require('../CloseWrapper')
-const View = require('../View')
+import { h } from 'preact'
+
+import SearchInput from './InputView.jsx'
+import Browser from '../Browser.jsx'
+import LoaderView from '../Loader.jsx'
+import Header from './Header.jsx'
+import CloseWrapper from '../CloseWrapper.js'
+import View from '../View.js'
+
+import packageJson from '../../package.json'
 
 /**
  * Class to easily generate generic views for Provider plugins
  */
-module.exports = class SearchProviderView extends View {
-  static VERSION = require('../../package.json').version
+export default class SearchProviderView extends View {
+  static VERSION = packageJson.version
 
   /**
    * @param {object} plugin instance of the plugin
@@ -52,6 +55,7 @@ module.exports = class SearchProviderView extends View {
     })
   }
 
+  // eslint-disable-next-line class-methods-use-this
   tearDown () {
     // Nothing.
   }
@@ -79,7 +83,7 @@ module.exports = class SearchProviderView extends View {
     const { searchTerm } = this.plugin.getPluginState()
     if (query && query === searchTerm) {
       // no need to search again as this is the same as the previous search
-      return
+      return undefined
     }
 
     return this.sharedHandler.loaderWrapper(
@@ -181,6 +185,7 @@ module.exports = class SearchProviderView extends View {
 
     return (
       <CloseWrapper onUnmount={this.clearSelection}>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
         <Browser {...browserProps} />
       </CloseWrapper>
     )

packages/@uppy/provider-views/src/SearchProviderView/index.js

@@ -1 +1 @@
-module.exports = require('./SearchProviderView')
+export { default } from './SearchProviderView.jsx'

packages/@uppy/provider-views/src/SharedHandler.js

@@ -1,6 +1,6 @@
-const remoteFileObjToLocal = require('@uppy/utils/lib/remoteFileObjToLocal')
+import remoteFileObjToLocal from '@uppy/utils/lib/remoteFileObjToLocal'
 
-module.exports = class SharedHandler {
+export default class SharedHandler {
   constructor (plugin) {
     this.plugin = plugin
     this.filterItems = this.filterItems.bind(this)

packages/@uppy/provider-views/src/View.js

@@ -1,12 +1,12 @@
-const getFileType = require('@uppy/utils/lib/getFileType')
-const isPreviewSupported = require('@uppy/utils/lib/isPreviewSupported')
-const generateFileID = require('@uppy/utils/lib/generateFileID')
+import getFileType from '@uppy/utils/lib/getFileType'
+import isPreviewSupported from '@uppy/utils/lib/isPreviewSupported'
+import generateFileID from '@uppy/utils/lib/generateFileID'
 
 // TODO: now that we have a shared `View` class,
 // `SharedHandler` could be cleaned up and moved into here
-const SharedHandler = require('./SharedHandler')
+import SharedHandler from './SharedHandler.js'
 
-module.exports = class View {
+export default class View {
   constructor (plugin, opts) {
     this.plugin = plugin
     this.provider = opts.provider

packages/@uppy/provider-views/src/index.js

@@ -1,7 +1,2 @@
-const ProviderViews = require('./ProviderView')
-const SearchProviderViews = require('./SearchProviderView')
-
-module.exports = {
-  ProviderViews,
-  SearchProviderViews,
-}
+export { default as ProviderViews } from './ProviderView/index.js'
+export { default as SearchProviderViews } from './SearchProviderView/index.js'