meta: fix React linter rules

.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/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',