meta: fix React linter rules (#5317)

.eslintrc.js

@@ -182,6 +182,10 @@ module.exports = {
             name: 'JSX',
             message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
           },
+          {
+            name: 'React',
+            message: 'Import the value instead of relying on global.React.',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },
@@ -207,52 +211,7 @@ module.exports = {
         'private/dev/*.js',
         'private/release/*.js',
         'private/remark-lint-uppy/*.js',
-
-        // Packages that have switched to ESM sources:
-        'packages/@uppy/audio/src/**/*.js',
-        'packages/@uppy/aws-s3-multipart/src/**/*.js',
-        'packages/@uppy/aws-s3/src/**/*.js',
-        'packages/@uppy/box/src/**/*.js',
-        'packages/@uppy/companion-client/src/**/*.js',
-        'packages/@uppy/compressor/src/**/*.js',
-        'packages/@uppy/core/src/**/*.js',
-        'packages/@uppy/dashboard/src/**/*.js',
-        'packages/@uppy/drag-drop/src/**/*.js',
-        'packages/@uppy/drop-target/src/**/*.js',
-        'packages/@uppy/dropbox/src/**/*.js',
-        'packages/@uppy/facebook/src/**/*.js',
-        'packages/@uppy/file-input/src/**/*.js',
-        'packages/@uppy/form/src/**/*.js',
-        'packages/@uppy/golden-retriever/src/**/*.js',
-        'packages/@uppy/google-drive/src/**/*.js',
-        'packages/@uppy/google-photos/src/**/*.js',
-        'packages/@uppy/image-editor/src/**/*.js',
-        'packages/@uppy/informer/src/**/*.js',
-        'packages/@uppy/instagram/src/**/*.js',
-        'packages/@uppy/locales/src/**/*.js',
-        'packages/@uppy/locales/template.js',
-        'packages/@uppy/onedrive/src/**/*.js',
-        'packages/@uppy/progress-bar/src/**/*.js',
-        'packages/@uppy/provider-views/src/**/*.js',
-        'packages/@uppy/react/src/**/*.js',
-        'packages/@uppy/redux-dev-tools/src/**/*.js',
-        'packages/@uppy/remote-sources/src/**/*.js',
-        'packages/@uppy/screen-capture/src/**/*.js',
-        'packages/@uppy/status-bar/src/**/*.js',
-        'packages/@uppy/store-default/src/**/*.js',
-        'packages/@uppy/store-redux/src/**/*.js',
-        'packages/@uppy/svelte/rollup.config.js',
-        'packages/@uppy/svelte/src/**/*.js',
-        'packages/@uppy/thumbnail-generator/src/**/*.js',
-        'packages/@uppy/transloadit/src/**/*.js',
-        'packages/@uppy/tus/src/**/*.js',
-        'packages/@uppy/unsplash/src/**/*.js',
-        'packages/@uppy/url/src/**/*.js',
-        'packages/@uppy/utils/src/**/*.js',
-        'packages/@uppy/vue/src/**/*.js',
-        'packages/@uppy/webcam/src/**/*.js',
-        'packages/@uppy/xhr-upload/src/**/*.js',
-        'packages/@uppy/zoom/src/**/*.js',
+        'packages/@uppy/!(companion|react-native)/**/*.js',
       ],
       parser: 'espree',
       parserOptions: {
@@ -287,6 +246,14 @@ module.exports = {
             name: 'require',
             message: 'Use import instead',
           },
+          {
+            name: 'JSX',
+            message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
+          },
+          {
+            name: 'React',
+            message: 'Import the value instead of relying on global.React.',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },

e2e/cypress/integration/dashboard-tus.spec.ts

@@ -1,7 +1,7 @@
 import {
   runRemoteUrlImageUploadTest,
   runRemoteUnsplashUploadTest,
-} from './reusable-tests'
+} from './reusable-tests.ts'
 
 // NOTE: we have to use different files to upload per test
 // because we are uploading to https://tusd.tusdemo.net,

e2e/cypress/integration/dashboard-xhr.spec.ts

@@ -2,7 +2,7 @@ import {
   interceptCompanionUrlMetaRequest,
   runRemoteUrlImageUploadTest,
   runRemoteUnsplashUploadTest,
-} from './reusable-tests'
+} from './reusable-tests.ts'
 
 describe('Dashboard with XHR', () => {
   beforeEach(() => {

e2e/cypress/support/commands.ts

@@ -25,6 +25,6 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 //
 
-import { createFakeFile } from './createFakeFile'
+import { createFakeFile } from './createFakeFile.ts'
 
 Cypress.Commands.add('createFakeFile', createFakeFile)

e2e/cypress/support/e2e.ts

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands.ts'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

packages/@uppy/compressor/src/index.test.ts

@@ -16,8 +16,8 @@ CompressorPlugin.prototype.compress = async (blob: File) => {
   }
 }
 
-// eslint-disable-next-line no-restricted-globals
 const sampleImage = fs.readFileSync(
+  // eslint-disable-next-line no-restricted-globals
   path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'),
 )
 

packages/@uppy/core/src/Uppy.test.ts

@@ -24,8 +24,8 @@ import InvalidPluginWithoutType from './mocks/invalidPluginWithoutType.ts'
 import DeepFrozenStore from '../../../../e2e/cypress/fixtures/DeepFrozenStore.mjs'
 import type { State } from './Uppy.ts'
 
-// eslint-disable-next-line no-restricted-globals
 const sampleImage = fs.readFileSync(
+  // eslint-disable-next-line no-restricted-globals
   path.join(__dirname, '../../../../e2e/cypress/fixtures/images/image.jpg'),
 )
 

packages/@uppy/core/src/types.test.ts

@@ -1,8 +1,8 @@
 import { expectTypeOf, test } from 'vitest'
 
 import type { Body, InternalMetadata, Meta } from '@uppy/utils/lib/UppyFile'
-import Uppy, { type UnknownPlugin } from './Uppy'
-import UIPlugin, { type UIPluginOptions } from './UIPlugin'
+import Uppy, { type UnknownPlugin } from './Uppy.ts'
+import UIPlugin, { type UIPluginOptions } from './UIPlugin.ts'
 
 interface Opts extends UIPluginOptions {
   foo: string

packages/@uppy/react/README.md

@@ -16,7 +16,8 @@ a versatile file encoding service.
 
 <!-- eslint-disable react/state-in-constructor -->
 
-```js
+```jsx
+/** @jsx React */
 import React from 'react'
 import Uppy from '@uppy/core'
 import { DashboardModal } from '@uppy/react'
@@ -27,10 +28,11 @@ class Example extends React.Component {
   state = { open: false }
 
   render() {
+    const { open } = this.state
     return (
       <DashboardModal
         uppy={uppy}
-        open={this.state.open}
+        open={open}
         onRequestClose={this.handleClose}
       />
     )

packages/@uppy/react/src/Dashboard.ts

@@ -1,4 +1,5 @@
 import { createElement as h, Component } from 'react'
+import type React from 'react'
 import type { UnknownPlugin, Uppy } from '@uppy/core'
 import DashboardPlugin from '@uppy/dashboard'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'

packages/@uppy/react/src/DashboardModal.ts

@@ -1,4 +1,5 @@
 import { createElement as h, Component } from 'react'
+import type React from 'react'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
 import type { Uppy } from '@uppy/core'

packages/@uppy/react/src/useUppyEvent.test.ts

@@ -5,7 +5,7 @@ import { renderHook, act } from '@testing-library/react'
 
 import Uppy from '@uppy/core'
 import type { Meta, UppyFile } from '@uppy/utils/lib/UppyFile'
-import { useUppyEvent } from '.'
+import { useUppyEvent } from './index.ts'
 
 describe('useUppyEvent', () => {
   it('should return and update value with the correct type', () => {

packages/@uppy/react/types/CommonTypes.d.ts

@@ -1,11 +0,0 @@
-import type { Uppy } from '@uppy/core'
-
-// Helper to exclude a key
-export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
-
-// If I use the helper it doesn't work, I think because 'target' is not a `keyof T` while
-// the generic T is unknown, so will just use the expansion here
-type OmitTarget<T> = Pick<T, Exclude<keyof T, 'target'>>
-
-export type WithBaseUppyProps<T> = T & { uppy: Uppy }
-export type ToUppyProps<T> = WithBaseUppyProps<OmitTarget<T>>

packages/@uppy/react/types/Dashboard.d.ts

@@ -1,26 +0,0 @@
-import * as React from 'react'
-import type { DashboardOptions } from '@uppy/dashboard'
-import type { Omit, WithBaseUppyProps } from './CommonTypes.js'
-
-// This type is mapped into `DashboardProps` below so IntelliSense doesn't display this big mess of nested types
-type DashboardPropsInner = Omit<
-  WithBaseUppyProps<DashboardOptions>,
-  // Remove the modal-only props
-  | 'animateOpenClose'
-  | 'browserBackButtonClose'
-  | 'inline'
-  | 'onRequestCloseModal'
-  | 'trigger'
-> &
-  React.BaseHTMLAttributes<HTMLDivElement>
-
-export type DashboardProps = {
-  [K in keyof DashboardPropsInner]: DashboardPropsInner[K]
-}
-
-/**
- * React Component that renders a Dashboard for an Uppy instance. This component
- * renders the Dashboard inline so you can put it anywhere you want.
- */
-declare const DashboardComponent: React.ComponentType<DashboardProps>
-export default DashboardComponent

packages/@uppy/react/types/DashboardModal.d.ts

@@ -1,24 +0,0 @@
-import type { DashboardOptions } from '@uppy/dashboard'
-import type { Omit, ToUppyProps } from './CommonTypes.js'
-
-// This type is mapped into `DashboardModalProps` below so IntelliSense doesn't display this big mess of nested types
-type DashboardModalPropsInner = {
-  open?: boolean
-  onRequestClose?: VoidFunction
-} & Omit<
-  ToUppyProps<DashboardOptions>,
-  // Remove the inline-only and force-overridden props
-  'inline' | 'onRequestCloseModal'
-> &
-  React.BaseHTMLAttributes<HTMLDivElement>
-
-export type DashboardModalProps = {
-  [K in keyof DashboardModalPropsInner]: DashboardModalPropsInner[K]
-}
-
-/**
- * React Component that renders a Dashboard for an Uppy instance. This component
- * renders the Dashboard inline so you can put it anywhere you want.
- */
-declare const DashboardModal: React.ComponentType<DashboardModalProps>
-export default DashboardModal

packages/@uppy/react/types/DragDrop.d.ts

@@ -1,12 +0,0 @@
-import type { DragDropOptions } from '@uppy/drag-drop'
-import type { ToUppyProps } from './CommonTypes.js'
-
-export type DragDropProps = ToUppyProps<DragDropOptions> &
-  React.BaseHTMLAttributes<HTMLDivElement>
-
-/**
- * React component that renders an area in which files can be dropped to be
- * uploaded.
- */
-declare const DragDropComponent: React.ComponentType<DragDropProps>
-export default DragDropComponent

packages/@uppy/react/types/FileInput.d.ts

@@ -1,11 +0,0 @@
-import type { FileInputOptions } from '@uppy/file-input'
-import type { ToUppyProps } from './CommonTypes.js'
-
-export type FileInputProps = ToUppyProps<FileInputOptions>
-
-/**
- * React component that renders an area in which files can be dropped to be
- * uploaded.
- */
-declare const FileInputComponent: React.ComponentType<FileInputProps>
-export default FileInputComponent

packages/@uppy/react/types/ProgressBar.d.ts

@@ -1,11 +0,0 @@
-import type { ProgressBarOptions } from '@uppy/progress-bar'
-import type { ToUppyProps } from './CommonTypes.js'
-
-export type ProgressBarProps = ToUppyProps<ProgressBarOptions> &
-  React.BaseHTMLAttributes<HTMLDivElement>
-
-/**
- * React component that renders a progress bar at the top of the page.
- */
-declare const ProgressBarComponent: React.ComponentType<ProgressBarProps>
-export default ProgressBarComponent

packages/@uppy/react/types/StatusBar.d.ts

@@ -1,12 +0,0 @@
-import type { StatusBarOptions } from '@uppy/status-bar'
-import type { ToUppyProps } from './CommonTypes.js'
-
-export type StatusBarProps = ToUppyProps<StatusBarOptions> &
-  React.BaseHTMLAttributes<HTMLDivElement>
-
-/**
- * React component that renders a status bar containing upload progress and speed,
- * processing progress and pause/resume/cancel controls.
- */
-declare const StatusBarComponent: React.ComponentType<StatusBarProps>
-export default StatusBarComponent

packages/@uppy/react/types/useUppy.d.ts

@@ -1,8 +0,0 @@
-import type Uppy from '@uppy/core'
-
-/**
- * @deprecated Initialize Uppy outside of the component.
- */
-declare function useUppy(factory: () => Uppy): Uppy
-
-export default useUppy

packages/@uppy/vue/src/dashboard-modal.ts

@@ -2,7 +2,7 @@ import { defineComponent, ref, watch, h, type PropType } from 'vue'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import { Uppy } from '@uppy/core'
 import type { Meta, Body } from '../../utils/src/UppyFile.js'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 type DashboardModalOptions<M extends Meta, B extends Body> = Omit<
   DashboardOptions<M, B> & { inline: false },

packages/@uppy/vue/src/dashboard.ts

@@ -2,7 +2,7 @@ import { defineComponent, ref, h, type PropType } from 'vue'
 import DashboardPlugin, { type DashboardOptions } from '@uppy/dashboard'
 import type { Uppy } from '@uppy/core'
 import type { Meta, Body } from '../../utils/src/UppyFile.js'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 type DashboardInlineOptions<M extends Meta, B extends Body> = Omit<
   DashboardOptions<M, B> & { inline: true },

packages/@uppy/vue/src/drag-drop.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import DragDropPlugin, { type DragDropOptions } from '@uppy/drag-drop'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'DragDrop',

packages/@uppy/vue/src/file-input.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import FileInputPlugin, { type FileInputOptions } from '@uppy/file-input'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'FileInput',

packages/@uppy/vue/src/progress-bar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import ProgressBarPlugin, { type ProgressBarOptions } from '@uppy/progress-bar'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'ProgressBar',

packages/@uppy/vue/src/status-bar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, ref, h, type PropType } from 'vue'
 import StatusBarPlugin, { type StatusBarOptions } from '@uppy/status-bar'
 import { Uppy } from '@uppy/core'
-import useUppy from './useUppy'
+import useUppy from './useUppy.ts'
 
 export default defineComponent({
   name: 'StatusBar',