@uppy/react: remove useUppy & reintroduce useUppyState

bin/build-lib.js

@@ -10,7 +10,7 @@ const { mkdir, stat, writeFile } = fs.promises
 const PACKAGE_JSON_IMPORT = /^\..*\/package.json$/
 const SOURCE = 'packages/{*,@uppy/*}/src/**/*.{js,ts}?(x)'
 // Files not to build (such as tests)
-const IGNORE = /\.test\.[jt]s$|__mocks__|svelte|angular|companion\//
+const IGNORE = /\.test\.jsx?$|\.test\.tsx?$|__mocks__|svelte|angular|companion\//;
 // Files that should trigger a rebuild of everything on change
 const META_FILES = [
   'babel.config.js',

docs/framework-integrations/react.mdx

@@ -61,9 +61,6 @@ The following components are exported from `@uppy/react`:
 - `<ProgressBar />` renders [`@uppy/progress-bar`](/docs/progress-bar)
 - `<StatusBar />` renders [`@uppy/status-bar`](/docs/status-bar)
 
-{/* prettier-ignore */}
-{/* Commented out until the hook is live
-
 ### Hooks
 
 `useUppyState(uppy, selector)`
@@ -86,12 +83,10 @@ const metaFields = useUppyState(
 ```
 
 You can see all the values you can access on the
-[`State`](https://github.com/transloadit/uppy/blob/main/packages/%40uppy/core/types/index.d.ts#L190)
+[`State`](https://github.com/transloadit/uppy/blob/c45407d099d87e25cecaf03c5d9ce59c582ca0dc/packages/%40uppy/core/src/Uppy.ts#L155-L181)
 type. If you are accessing plugin state, you would have to look at the types of
 the plugin.
 
-\*/}
-
 ## Examples
 
 ### Example: basic component

e2e/clients/react/App.jsx

@@ -10,24 +10,35 @@ import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
 import '@uppy/drag-drop/dist/style.css'
 
-export default function App () {
-  const RemoteSourcesOptions = {
-    companionUrl: 'http://companion.uppy.io',
-    sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
-  }
-  const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, { ...RemoteSourcesOptions })
-  const uppyModal = new Uppy({ id: 'modal' })
-  const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
+const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, {
+  companionUrl: 'http://companion.uppy.io',
+  sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
+})
+const uppyModal = new Uppy({ id: 'modal' })
+const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
+
+export default function App() {
   const [open, setOpen] = useState(false)
+  // TODO: Parcel is having a bad time resolving React inside @uppy/react for some reason.
+  // We are using Parcel in an odd way and I don't think there is an easy fix.
+  // const files = useUppyState(uppyDashboard, (state) => state.files)
 
   // drag-drop has no visual output so we test it via the uppy instance
   window.uppy = uppyDragDrop
 
   return (
-    <div style={{ maxWidth: '30em', margin: '5em 0', display: 'grid', gridGap: '2em' }}>
+    <div
+      style={{
+        maxWidth: '30em',
+        margin: '5em 0',
+        display: 'grid',
+        gridGap: '2em',
+      }}
+    >
       <button type="button" id="open" onClick={() => setOpen(!open)}>
         Open Modal
       </button>
+      {/* <p>Dashboard file count: {Object.keys(files).length}</p> */}
 
       <Dashboard id="dashboard" uppy={uppyDashboard} />
       <DashboardModal id="modal" open={open} uppy={uppyModal} />

package.json

@@ -168,7 +168,7 @@
   },
   "resolutions": {
     "@types/eslint@^7.2.13": "^8.2.0",
-    "@types/react": "^17",
+    "@types/react": "^18",
     "@types/webpack-dev-server": "^4",
     "@vitest/utils": "patch:@vitest/utils@npm%3A1.2.1#./.yarn/patches/@vitest-utils-npm-1.2.1-3028846845.patch",
     "p-queue": "patch:p-queue@npm%3A7.4.1#./.yarn/patches/p-queue-npm-7.4.1-e0cf0a6f17.patch",

packages/@uppy/react/package.json

@@ -21,11 +21,16 @@
     "url": "git+https://github.com/transloadit/uppy.git"
   },
   "dependencies": {
-    "@uppy/utils": "workspace:^"
+    "@uppy/utils": "workspace:^",
+    "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
     "@types/react": "^18.0.8",
-    "react": "^18.1.0"
+    "@types/use-sync-external-store": "^0.0.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "peerDependencies": {
     "@uppy/core": "workspace:^",
@@ -34,7 +39,7 @@
     "@uppy/file-input": "workspace:^",
     "@uppy/progress-bar": "workspace:^",
     "@uppy/status-bar": "workspace:^",
-    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+    "react": "^18.0.0"
   },
   "peerDependenciesMeta": {
     "@uppy/dashboard": {

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

@@ -4,4 +4,4 @@ export { default as DragDrop } from './DragDrop.ts'
 export { default as ProgressBar } from './ProgressBar.ts'
 export { default as StatusBar } from './StatusBar.ts'
 export { default as FileInput } from './FileInput.ts'
-export { default as useUppy } from './useUppy.ts'
+export { default as useUppyState } from './useUppyState.ts'

packages/@uppy/react/src/useUppyState.test.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react/react-in-jsx-scope */
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react'
+import { describe, expect, expectTypeOf, it } from 'vitest'
+import { renderHook, render, act } from '@testing-library/react'
+import Uppy from '@uppy/core'
+
+import useUppyState from './useUppyState.ts'
+
+describe('useUppyState', () => {
+  it('should return and update value with the correct type', () => {
+    const uppy = new Uppy()
+    const { result, rerender } = renderHook(() =>
+      useUppyState(uppy, (state) => state.totalProgress),
+    )
+    expectTypeOf(result.current).toEqualTypeOf<number>()
+    expect(result.current).toBe(0)
+    act(() => uppy.setState({ totalProgress: 50 }))
+    rerender()
+    expect(result.current).toBe(50)
+    rerender()
+    expect(result.current).toBe(50)
+  })
+
+  it('does not re-render unnecessarily', () => {
+    const uppy = new Uppy()
+    let renderCount = 0
+
+    const Component = React.memo((props: { uppy: Uppy<any, any> }) => {
+      const files = useUppyState(props.uppy, (state) =>
+        Object.values(state.files),
+      )
+      renderCount++
+      return <div>{files.length}</div>
+    })
+
+    const { rerender } = render(<Component uppy={uppy} />)
+    expect(renderCount).toBe(1)
+    // Re-render without updating Uppy's state
+    rerender(<Component uppy={uppy} />)
+    // It should have been memoized
+    expect(renderCount).toBe(1)
+    act(() => uppy.addFile({ name: 'file', data: new Blob() }))
+    expect(renderCount).toBe(2)
+  })
+})

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

@@ -0,0 +1,23 @@
+import type { Uppy, State } from '@uppy/core'
+import type { Body, Meta } from '@uppy/utils/lib/UppyFile'
+import { useMemo, useCallback } from 'react'
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector'
+
+export default function useUppyState<
+  M extends Meta = Meta,
+  B extends Body = Body,
+  T = any,
+>(uppy: Uppy<M, B>, selector: (state: State<M, B>) => T): T {
+  const subscribe = useMemo(
+    () => uppy.store.subscribe.bind(uppy.store),
+    [uppy.store],
+  )
+  const getSnapshot = useCallback(() => uppy.store.getState(), [uppy.store])
+
+  return useSyncExternalStoreWithSelector(
+    subscribe,
+    getSnapshot,
+    null,
+    selector,
+  )
+}

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

@@ -3,6 +3,8 @@
   "compilerOptions": {
     "noImplicitAny": false,
     "outDir": "./lib",
+    "jsxImportSource": "react",
+    "jsx": "react-jsx",
     "paths": {
       "@uppy/utils/lib/*": ["../utils/src/*"],
       "@uppy/core": ["../core/src/index.js"],
@@ -23,7 +25,7 @@
     "skipLibCheck": true
   },
   "include": ["./src/**/*.*"],
-  "exclude": ["./src/**/*.test.ts"],
+  "exclude": ["./src/**/*.test.tsx"],
   "references": [
     {
       "path": "../utils/tsconfig.build.json"

packages/@uppy/react/tsconfig.json

@@ -3,6 +3,8 @@
   "compilerOptions": {
     "emitDeclarationOnly": false,
     "noEmit": true,
+    "jsxImportSource": "react",
+    "jsx": "react-jsx",
     "paths": {
       "@uppy/utils/lib/*": ["../utils/src/*"],
       "@uppy/core": ["../core/src/index.js"],