Remove JSX global type everywhere

.eslintrc.js

@@ -175,6 +175,10 @@ module.exports = {
             name: 'require',
             message: 'Use import instead',
           },
+          {
+            name: 'JSX',
+            message: 'Use h.JSX.Element, ComponentChild, or ComponentChildren from Preact',
+          },
         ],
         'import/extensions': ['error', 'ignorePackages'],
       },
@@ -479,7 +483,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/@uppy/*/src/**/*.ts', 'packages/@uppy/*/src/**/*.tsx'],
+      files: ['packages/@uppy/*/src/**/*.ts'],
       excludedFiles: ['packages/@uppy/**/*.test.ts', 'packages/@uppy/core/src/mocks/*.ts'],
       rules: {
         '@typescript-eslint/explicit-module-boundary-types': 'error',

packages/@uppy/audio/src/Audio.tsx

@@ -348,7 +348,7 @@ export default class Audio<M extends Meta, B extends Body> extends UIPlugin<
     })
   }
 
-  render(): JSX.Element {
+  render() {
     if (!this.#audioActive) {
       this.#start()
     }

packages/@uppy/audio/src/AudioSourceSelect.tsx

@@ -10,7 +10,7 @@ export default ({
   currentDeviceId,
   audioSources,
   onChangeSource,
-}: AudioSourceSelectProps): JSX.Element => {
+}: AudioSourceSelectProps) => {
   return (
     <div className="uppy-Audio-videoSource">
       <select

packages/@uppy/audio/src/DiscardButton.tsx

@@ -6,7 +6,7 @@ interface DiscardButtonProps {
   i18n: I18n
 }
 
-function DiscardButton({ onDiscard, i18n }: DiscardButtonProps): JSX.Element {
+function DiscardButton({ onDiscard, i18n }: DiscardButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button"

packages/@uppy/audio/src/PermissionsScreen.tsx

@@ -2,12 +2,12 @@ import type { I18n } from '@uppy/utils/lib/Translator'
 import { h } from 'preact'
 
 interface PermissionsScreenProps {
-  icon: () => JSX.Element | null
+  icon: () => h.JSX.Element | null
   hasAudio: boolean
   i18n: I18n
 }
 
-export default (props: PermissionsScreenProps): JSX.Element => {
+export default (props: PermissionsScreenProps) => {
   const { icon, hasAudio, i18n } = props
   return (
     <div className="uppy-Audio-permissons">

packages/@uppy/audio/src/RecordButton.tsx

@@ -13,7 +13,7 @@ export default function RecordButton({
   onStartRecording,
   onStopRecording,
   i18n,
-}: RecordButtonProps): JSX.Element {
+}: RecordButtonProps) {
   if (recording) {
     return (
       <button

packages/@uppy/audio/src/RecordingLength.tsx

@@ -10,7 +10,7 @@ interface RecordingLengthProps {
 export default function RecordingLength({
   recordingLengthSeconds,
   i18n,
-}: RecordingLengthProps): JSX.Element {
+}: RecordingLengthProps) {
   const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds)
 
   return (

packages/@uppy/audio/src/RecordingScreen.tsx

@@ -26,9 +26,7 @@ interface RecordingScreenProps extends AudioSourceSelectProps {
   recordingLengthSeconds: number
 }
 
-export default function RecordingScreen(
-  props: RecordingScreenProps,
-): JSX.Element {
+export default function RecordingScreen(props: RecordingScreenProps) {
   const {
     stream,
     recordedAudio,

packages/@uppy/audio/src/SubmitButton.tsx

@@ -6,7 +6,7 @@ interface SubmitButtonProps {
   i18n: I18n
 }
 
-function SubmitButton({ onSubmit, i18n }: SubmitButtonProps): JSX.Element {
+function SubmitButton({ onSubmit, i18n }: SubmitButtonProps) {
   return (
     <button
       className="uppy-u-reset uppy-c-btn uppy-Audio-button uppy-Audio-button--submit"

packages/@uppy/box/src/Box.tsx

@@ -25,7 +25,7 @@ export default class Box<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

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

@@ -1,6 +1,7 @@
 /* eslint-disable max-classes-per-file */
 /* global AggregateError */
 
+import type { h } from 'preact'
 import Translator from '@uppy/utils/lib/Translator'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore untyped
@@ -95,7 +96,7 @@ export type UnknownProviderPlugin<
   onFirstRender: () => void
   title: string
   files: UppyFile<M, B>[]
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
   provider: CompanionClientProvider
   storage: {
     getItem: (key: string) => Promise<string | null>
@@ -131,7 +132,7 @@ export type UnknownSearchProviderPlugin<
 > = UnknownPlugin<M, B, UnknownSearchProviderPluginState> & {
   onFirstRender: () => void
   title: string
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
   provider: CompanionClientSearchProvider
 }
 

packages/@uppy/dashboard/src/Dashboard.tsx

@@ -1149,7 +1149,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
       .map(this.#attachRenderFunctionToTarget)
   })
 
-  render = (state: State<M, B>): JSX.Element => {
+  render = (state: State<M, B>) => {
     const pluginState = this.getPluginState()
     const { files, capabilities, allowNewUpload } = state
     const {

packages/@uppy/dashboard/src/components/Dashboard.tsx

@@ -25,7 +25,7 @@ const HEIGHT_MD = 330
 
 type $TSFixMe = any
 
-export default function Dashboard(props: $TSFixMe): JSX.Element {
+export default function Dashboard(props: $TSFixMe) {
   const isNoFiles = props.totalFileCount === 0
   const isSingleFile = props.totalFileCount === 1
   const isSizeMD = props.containerWidth > WIDTH_MD

packages/@uppy/dashboard/src/components/EditorPanel.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 
 type $TSFixMe = any
 
-function EditorPanel(props: $TSFixMe): JSX.Element {
+function EditorPanel(props: $TSFixMe) {
   const file = props.files[props.fileCardFor]
 
   const handleCancel = () => {

packages/@uppy/dashboard/src/components/FileCard/RenderMetaFields.tsx

@@ -2,7 +2,7 @@ import { h } from 'preact'
 
 type $TSFixMe = any
 
-export default function RenderMetaFields(props: $TSFixMe): JSX.Element {
+export default function RenderMetaFields(props: $TSFixMe) {
   const {
     computedMetaFields,
     requiredMetaFields,

packages/@uppy/dashboard/src/components/FileCard/index.tsx

@@ -9,7 +9,7 @@ import RenderMetaFields from './RenderMetaFields.tsx'
 
 type $TSFixMe = any
 
-export default function FileCard(props: $TSFixMe): JSX.Element {
+export default function FileCard(props: $TSFixMe) {
   const {
     files,
     fileCardFor,

packages/@uppy/dashboard/src/components/FileItem/MetaErrorMessage.tsx

@@ -8,7 +8,7 @@ const metaFieldIdToName = (metaFieldId: $TSFixMe, metaFields: $TSFixMe) => {
   return field[0].name
 }
 
-export default function MetaErrorMessage(props: $TSFixMe): JSX.Element {
+export default function MetaErrorMessage(props: $TSFixMe) {
   const { file, toggleFileCard, i18n, metaFields } = props
   const { missingRequiredMetaFields } = file
   if (!missingRequiredMetaFields?.length) {

packages/@uppy/dashboard/src/components/FileList.tsx

@@ -49,7 +49,7 @@ export default function FileList({
   toggleAddFilesPanel,
   containerWidth,
   containerHeight,
-}: $TSFixMe): JSX.Element {
+}: $TSFixMe) {
   // It's not great that this is hardcoded!
   // It's ESPECIALLY not great that this is checking against `itemsPerRow`!
   const rowHeight =

packages/@uppy/dashboard/src/components/FilePreview.tsx

@@ -3,7 +3,7 @@ import getFileTypeIcon from '../utils/getFileTypeIcon.tsx'
 
 type $TSFixMe = any
 
-export default function FilePreview(props: $TSFixMe): JSX.Element {
+export default function FilePreview(props: $TSFixMe) {
   const { file } = props
 
   if (file.preview) {

packages/@uppy/dashboard/src/components/PickerPanelContent.tsx

@@ -11,7 +11,7 @@ function PickerPanelContent({
   i18n,
   state,
   uppy,
-}: $TSFixMe): JSX.Element {
+}: $TSFixMe) {
   return (
     <div
       className={classNames('uppy-DashboardContent-panel', className)}

packages/@uppy/dashboard/src/components/PickerPanelTopBar.tsx

@@ -94,7 +94,7 @@ function UploadStatus({
   }
 }
 
-function PanelTopBar(props: $TSFixMe): JSX.Element {
+function PanelTopBar(props: $TSFixMe) {
   const {
     i18n,
     isAllComplete,

packages/@uppy/dashboard/src/components/Slide.tsx

@@ -19,11 +19,7 @@ const duration = 250
  * but it should be simple to extend this for any type of single-element
  * transition by setting the CSS name and duration as props.
  */
-function Slide({
-  children,
-}: {
-  children: ComponentChildren
-}): JSX.Element | null {
+function Slide({ children }: { children: ComponentChildren }) {
   const [cachedChildren, setCachedChildren] = useState<VNode<{
     className?: string
   }> | null>(null)

packages/@uppy/dropbox/src/Dropbox.tsx

@@ -25,7 +25,7 @@ export default class Dropbox<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/facebook/src/Facebook.tsx

@@ -25,7 +25,7 @@ export default class Facebook<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/file-input/src/FileInput.tsx

@@ -94,7 +94,7 @@ export default class FileInput<M extends Meta, B extends Body> extends UIPlugin<
       overflow: 'hidden',
       position: 'absolute',
       zIndex: -1,
-    } satisfies JSX.IntrinsicElements['input']['style']
+    } satisfies h.JSX.IntrinsicElements['input']['style']
 
     const { restrictions } = this.uppy.opts
     const accept =

packages/@uppy/google-drive/src/GoogleDrive.tsx

@@ -24,7 +24,7 @@ export default class GoogleDrive<
 > extends UIPlugin<GoogleDriveOptions, M, B, UnknownProviderPluginState> {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/image-editor/src/Editor.tsx

@@ -141,7 +141,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     this.cropper.scale(scaleFactorX, scaleFactor)
   }
 
-  renderGranularRotate(): JSX.Element {
+  renderGranularRotate() {
     const { i18n } = this.props
     const { angleGranular } = this.state
 
@@ -166,7 +166,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderRevert(): JSX.Element {
+  renderRevert() {
     const { i18n, opts } = this.props
 
     return (
@@ -198,7 +198,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderRotate(): JSX.Element {
+  renderRotate() {
     const { i18n } = this.props
 
     return (
@@ -224,7 +224,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderFlip(): JSX.Element {
+  renderFlip() {
     const { i18n } = this.props
 
     return (
@@ -252,7 +252,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderZoomIn(): JSX.Element {
+  renderZoomIn() {
     const { i18n } = this.props
 
     return (
@@ -279,7 +279,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderZoomOut(): JSX.Element {
+  renderZoomOut() {
     const { i18n } = this.props
 
     return (
@@ -305,7 +305,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropSquare(): JSX.Element {
+  renderCropSquare() {
     const { i18n } = this.props
 
     return (
@@ -331,7 +331,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropWidescreen(): JSX.Element {
+  renderCropWidescreen() {
     const { i18n } = this.props
 
     return (
@@ -357,7 +357,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  renderCropWidescreenVertical(): JSX.Element {
+  renderCropWidescreenVertical() {
     const { i18n } = this.props
 
     return (
@@ -383,7 +383,7 @@ export default class Editor<M extends Meta, B extends Body> extends Component<
     )
   }
 
-  render(): JSX.Element {
+  render() {
     const { currentImage, opts } = this.props
     const { actions } = opts
     const imageURL = URL.createObjectURL(currentImage.data)

packages/@uppy/image-editor/src/ImageEditor.tsx

@@ -218,7 +218,7 @@ export default class ImageEditor<
     this.unmount()
   }
 
-  render(): JSX.Element | null {
+  render() {
     const { currentImage } = this.getPluginState()
 
     if (currentImage === null || currentImage.isRemote) {

packages/@uppy/instagram/src/Instagram.tsx

@@ -25,7 +25,7 @@ export default class Instagram<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>
 

packages/@uppy/onedrive/src/OneDrive.tsx

@@ -25,7 +25,7 @@ export default class OneDrive<M extends Meta, B extends Body> extends UIPlugin<
 > {
   static VERSION = packageJson.version
 
-  icon: () => JSX.Element
+  icon: () => h.JSX.Element
 
   provider: Provider<M, B>