Remove preact/compat (#5935)

We drag it in unneccesarily in the bundle and it can cause JSX clashes
in React apps with `"jsx": "preserve"` in their `tsconfig.json`
(https://github.com/preactjs/preact/issues/4908)

- Remove `@types/react` from companion (unused)
- Fix tsconfig's for @uppy/utils (build was fine, but editor diagnostics
weren't)

.changeset/new-ghosts-open.md

@@ -0,0 +1,14 @@
+---
+"@uppy/provider-views": patch
+"@uppy/components": patch
+"@uppy/companion": patch
+"@uppy/dashboard": patch
+"@uppy/drag-drop": patch
+"@uppy/svelte": patch
+"@uppy/react": patch
+"@uppy/utils": patch
+"@uppy/core": patch
+"@uppy/vue": patch
+---
+
+Remove preact/compat imports in favor of preact, preventing JSX type issues in certain setups.

packages/@uppy/companion/package.json

@@ -89,7 +89,6 @@
     "@types/morgan": "1.7.37",
     "@types/ms": "0.7.31",
     "@types/node": "^20.19.0",
-    "@types/react": "^18.0.0",
     "@types/request": "2.48.8",
     "@types/webpack": "^5.28.0",
     "@types/ws": "8.5.3",

packages/@uppy/components/migrate.mjs

@@ -29,13 +29,13 @@ const SVELTE_DIR = path.join(
 const REACT_TEMPLATE = `\
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-import { useEffect, useRef, useContext, createElement as h } from 'react'
 import {
   %%ComponentName%% as %%PreactComponentName%%,
   type %%PropsTypeName%%,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function %%ComponentName%%(props: Omit<%%PropsTypeName%%, 'ctx'>) {
@@ -66,8 +66,7 @@ import {
   %%ComponentName%% as %%PreactComponentName%%,
   type %%PropsTypeName%%,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { useUppyContext } from '../useUppyContext.js'
 
@@ -121,8 +120,7 @@ const SVELTE_TEMPLATE = `\
     type %%PropsTypeName%%,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<%%PropsTypeName%%, 'ctx'> = $props()

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

@@ -1,6 +1,6 @@
 import type { Body, Meta } from '@uppy/utils'
 import { findDOMElement, getTextDirection } from '@uppy/utils'
-import { render } from 'preact/compat'
+import { render } from 'preact'
 import type { PluginOpts } from './BasePlugin.js'
 import BasePlugin from './BasePlugin.js'
 import type { State } from './Uppy.js'

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

@@ -15,8 +15,7 @@ import ThumbnailGenerator from '@uppy/thumbnail-generator'
 import type { LocaleStrings } from '@uppy/utils'
 import { findAllDOMElements, getDroppedFiles, toArray } from '@uppy/utils'
 import { nanoid } from 'nanoid/non-secure'
-import type { ComponentChild, VNode } from 'preact'
-import type { TargetedEvent } from 'preact/compat'
+import type { ComponentChild, h, VNode } from 'preact'
 import packageJson from '../package.json' with { type: 'json' }
 import DashboardUI from './components/Dashboard.js'
 import locale from './locale.js'
@@ -771,7 +770,7 @@ export default class Dashboard<M extends Meta, B extends Body> extends UIPlugin<
   }
 
   private handleInputChange = (
-    event: TargetedEvent<HTMLInputElement, Event>,
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
   ) => {
     event.preventDefault()
     const files = toArray(event.currentTarget.files || [])

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

@@ -1,13 +1,14 @@
 import type { I18n, Translator } from '@uppy/utils'
-import { Component, type ComponentChild, Fragment } from 'preact'
-import type { TargetedEvent } from 'preact/compat'
+import { Component, type ComponentChild, Fragment, type h } from 'preact'
 import type { DashboardState, TargetWithRender } from '../Dashboard.js'
 
 interface AddFilesProps {
   i18n: I18n
   i18nArray: Translator['translateArray']
   acquirers: TargetWithRender[]
-  handleInputChange: (event: TargetedEvent<HTMLInputElement, Event>) => void
+  handleInputChange: (
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => void
   maxNumberOfFiles: number | null
   allowedFileTypes: string[] | null
   showNativePhotoCameraButton: boolean
@@ -47,7 +48,7 @@ class AddFiles extends Component<AddFilesProps> {
   }
 
   private onFileInputChange = (
-    event: TargetedEvent<HTMLInputElement, Event>,
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
   ) => {
     this.props.handleInputChange(event)
 

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

@@ -10,7 +10,7 @@ import type {
 import type { I18n, Translator } from '@uppy/utils'
 import { isDragDropSupported } from '@uppy/utils'
 import classNames from 'classnames'
-import type { TargetedEvent } from 'preact/compat'
+import type { h } from 'preact'
 import type { DashboardState, TargetWithRender } from '../Dashboard.js'
 import AddFiles from './AddFiles.js'
 import AddFilesPanel from './AddFilesPanel.js'
@@ -70,7 +70,9 @@ type DashboardUIProps<M extends Meta, B extends Body> = {
   id: string
   closeModal: () => void
   handleClickOutside: () => void
-  handleInputChange: (event: TargetedEvent<HTMLInputElement, Event>) => void
+  handleInputChange: (
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => void
   handlePaste: (event: ClipboardEvent) => void
   inline: boolean
   showPanel: (id: string) => void

packages/@uppy/drag-drop/src/DragDrop.tsx

@@ -8,8 +8,7 @@ import type {
 import { UIPlugin } from '@uppy/core'
 import type { LocaleStrings } from '@uppy/utils'
 import { getDroppedFiles, isDragDropSupported, toArray } from '@uppy/utils'
-import type { ComponentChild } from 'preact'
-import type { TargetedEvent } from 'preact/compat'
+import type { ComponentChild, h } from 'preact'
 import packageJson from '../package.json' with { type: 'json' }
 import locale from './locale.js'
 
@@ -81,7 +80,9 @@ export default class DragDrop<M extends Meta, B extends Body> extends UIPlugin<
     }
   }
 
-  private onInputChange = (event: TargetedEvent<HTMLInputElement, Event>) => {
+  private onInputChange = (
+    event: h.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
     const files = toArray(event.currentTarget.files || [])
     if (files.length > 0) {
       this.uppy.log('[DragDrop] Files selected through input')

packages/@uppy/provider-views/src/SearchInput.tsx

@@ -1,5 +1,4 @@
 import { nanoid } from 'nanoid/non-secure'
-import type { ChangeEvent } from 'preact/compat'
 import { useCallback, useEffect, useState } from 'preact/hooks'
 
 type Props = {
@@ -33,7 +32,7 @@ function SearchInput({
   buttonLabel = '',
   buttonCSSClassName = '',
 }: Props) {
-  const onInput = (e: ChangeEvent) => {
+  const onInput = (e: Event) => {
     setSearchString((e.target as HTMLInputElement).value)
   }
 

packages/@uppy/react/src/headless/generated/Dropzone.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   type DropzoneProps,
   Dropzone as PreactDropzone,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function Dropzone(props: Omit<DropzoneProps, 'ctx'>) {

packages/@uppy/react/src/headless/generated/FilesGrid.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   type FilesGridProps,
   FilesGrid as PreactFilesGrid,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function FilesGrid(props: Omit<FilesGridProps, 'ctx'>) {

packages/@uppy/react/src/headless/generated/FilesList.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   type FilesListProps,
   FilesList as PreactFilesList,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function FilesList(props: Omit<FilesListProps, 'ctx'>) {

packages/@uppy/react/src/headless/generated/ProviderIcon.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   ProviderIcon as PreactProviderIcon,
   type ProviderIconProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function ProviderIcon(props: Omit<ProviderIconProps, 'ctx'>) {

packages/@uppy/react/src/headless/generated/Thumbnail.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   Thumbnail as PreactThumbnail,
   type ThumbnailProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function Thumbnail(props: Omit<ThumbnailProps, 'ctx'>) {

packages/@uppy/react/src/headless/generated/UploadButton.tsx

@@ -1,13 +1,12 @@
 // This file was generated by build-components.mjs
 // ANY EDITS WILL BE OVERWRITTEN!
-
 import {
   UploadButton as PreactUploadButton,
   type UploadButtonProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
-import { useContext, useEffect, useRef } from 'react'
+import { h as preactH, render as preactRender } from 'preact'
+// biome-ignore lint/correctness/noUnusedImports: it's needed
+import { createElement as h, useContext, useEffect, useRef } from 'react'
 import { UppyContext } from '../UppyContextProvider.js'
 
 export default function UploadButton(props: Omit<UploadButtonProps, 'ctx'>) {

packages/@uppy/svelte/src/lib/components/headless/generated/Dropzone.svelte

@@ -7,8 +7,7 @@
     type DropzoneProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<DropzoneProps, 'ctx'> = $props()

packages/@uppy/svelte/src/lib/components/headless/generated/FilesGrid.svelte

@@ -7,8 +7,7 @@
     type FilesGridProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<FilesGridProps, 'ctx'> = $props()

packages/@uppy/svelte/src/lib/components/headless/generated/FilesList.svelte

@@ -7,8 +7,7 @@
     type FilesListProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<FilesListProps, 'ctx'> = $props()

packages/@uppy/svelte/src/lib/components/headless/generated/ProviderIcon.svelte

@@ -7,8 +7,7 @@
     type ProviderIconProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<ProviderIconProps, 'ctx'> = $props()

packages/@uppy/svelte/src/lib/components/headless/generated/Thumbnail.svelte

@@ -7,8 +7,7 @@
     type ThumbnailProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<ThumbnailProps, 'ctx'> = $props()

packages/@uppy/svelte/src/lib/components/headless/generated/UploadButton.svelte

@@ -7,8 +7,7 @@
     type UploadButtonProps,
     type UppyContext,
   } from '@uppy/components'
-  import { h as preactH } from 'preact'
-  import { render as preactRender } from 'preact/compat'
+  import { h as preactH, render as preactRender } from 'preact'
   import { UppyContextKey } from '../UppyContextProvider.svelte'
 
   const props: Omit<UploadButtonProps, 'ctx'> = $props()

packages/@uppy/utils/src/VirtualList.tsx

@@ -26,7 +26,7 @@
  * - Tweaked styles for Uppy's Dashboard use case
  */
 
-import type { HTMLAttributes, ReactNode } from 'preact/compat'
+import type { ComponentChild, h } from 'preact'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 
 const STYLE_INNER = {
@@ -63,9 +63,9 @@ export default function VirtualList<T>({
   data: T[]
   rowHeight: number
   padding?: number // last visible + overscan row index + padding to allow keyboard focus to travel past the visible area
-  renderRow: (item: T) => ReactNode
+  renderRow: (item: T) => ComponentChild
   overscanCount?: number
-} & HTMLAttributes<HTMLDivElement>) {
+} & h.JSX.HTMLAttributes<HTMLDivElement>) {
   const scrollerRef = useRef<HTMLDivElement>(null)
 
   const [offset, setOffset] = useState(0)

packages/@uppy/utils/tsconfig.build.json

@@ -5,7 +5,6 @@
     "rootDir": "./src",
     "allowJs": true
   },
-  "include": ["./src/**/*.*"],
-  "exclude": ["./src/**/*.test.ts", "./src/**/*.test.js"],
-  "references": []
+  "include": ["./src"],
+  "exclude": ["./src/**/*.test.{js,ts}"]
 }

packages/@uppy/utils/tsconfig.json

@@ -5,6 +5,5 @@
     "emitDeclarationOnly": false,
     "noEmit": true
   },
-  "include": ["src/**/*.{js,jsx,ts,tsx}"],
-  "references": []
+  "include": ["./src"]
 }

packages/@uppy/vue/src/headless/generated/Dropzone.ts

@@ -5,8 +5,7 @@ import {
   type DropzoneProps,
   Dropzone as PreactDropzone,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

packages/@uppy/vue/src/headless/generated/FilesGrid.ts

@@ -5,8 +5,7 @@ import {
   type FilesGridProps,
   FilesGrid as PreactFilesGrid,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

packages/@uppy/vue/src/headless/generated/FilesList.ts

@@ -5,8 +5,7 @@ import {
   type FilesListProps,
   FilesList as PreactFilesList,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

packages/@uppy/vue/src/headless/generated/ProviderIcon.ts

@@ -5,8 +5,7 @@ import {
   ProviderIcon as PreactProviderIcon,
   type ProviderIconProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

packages/@uppy/vue/src/headless/generated/Thumbnail.ts

@@ -5,8 +5,7 @@ import {
   Thumbnail as PreactThumbnail,
   type ThumbnailProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

packages/@uppy/vue/src/headless/generated/UploadButton.ts

@@ -5,8 +5,7 @@ import {
   UploadButton as PreactUploadButton,
   type UploadButtonProps,
 } from '@uppy/components'
-import { h as preactH } from 'preact'
-import { render as preactRender } from 'preact/compat'
+import { h as preactH, render as preactRender } from 'preact'
 import { shallowEqualObjects } from 'shallow-equal'
 import { defineComponent, h, onMounted, ref, watch } from 'vue'
 import { useUppyContext } from '../useUppyContext.js'

yarn.lock

@@ -8717,7 +8717,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.0.0, @types/react@npm:^18.0.8":
+"@types/react@npm:^18.0.8":
   version: 18.3.23
   resolution: "@types/react@npm:18.3.23"
   dependencies:
@@ -9152,7 +9152,6 @@ __metadata:
     "@types/morgan": "npm:1.7.37"
     "@types/ms": "npm:0.7.31"
     "@types/node": "npm:^20.19.0"
-    "@types/react": "npm:^18.0.0"
     "@types/request": "npm:2.48.8"
     "@types/webpack": "npm:^5.28.0"
     "@types/ws": "npm:8.5.3"