Skip to content

Commit

Permalink
@uppy/react: remove useUppy & reintroduce useUppyState (#5059)
Browse files Browse the repository at this point in the history
  • Loading branch information
Murderlon authored Apr 17, 2024
1 parent 6f761ff commit 915a563
Show file tree
Hide file tree
Showing 12 changed files with 282 additions and 84 deletions.
2 changes: 1 addition & 1 deletion bin/build-lib.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
7 changes: 1 addition & 6 deletions docs/framework-integrations/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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)`
Expand All @@ -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
Expand Down
29 changes: 20 additions & 9 deletions e2e/clients/react/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 8 additions & 3 deletions packages/@uppy/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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:^",
Expand All @@ -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": {
Expand Down
2 changes: 1 addition & 1 deletion packages/@uppy/react/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
36 changes: 0 additions & 36 deletions packages/@uppy/react/src/useUppy.ts

This file was deleted.

46 changes: 46 additions & 0 deletions packages/@uppy/react/src/useUppyState.test.tsx
Original file line number Diff line number Diff line change
@@ -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)
})
})
23 changes: 23 additions & 0 deletions packages/@uppy/react/src/useUppyState.ts
Original file line number Diff line number Diff line change
@@ -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,
)
}
4 changes: 3 additions & 1 deletion packages/@uppy/react/tsconfig.build.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand All @@ -23,7 +25,7 @@
"skipLibCheck": true
},
"include": ["./src/**/*.*"],
"exclude": ["./src/**/*.test.ts"],
"exclude": ["./src/**/*.test.tsx"],
"references": [
{
"path": "../utils/tsconfig.build.json"
Expand Down
2 changes: 2 additions & 0 deletions packages/@uppy/react/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
Expand Down
Loading

0 comments on commit 915a563

Please sign in to comment.