From 00e7d667a727455b5ccdfc07e8383837b2c81107 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 9 Jul 2024 13:17:22 +0200 Subject: [PATCH] meta: fix React linter rules --- .eslintrc.js | 59 ++++--------------- e2e/cypress/integration/dashboard-tus.spec.ts | 2 +- e2e/cypress/integration/dashboard-xhr.spec.ts | 2 +- e2e/cypress/support/commands.ts | 2 +- e2e/cypress/support/e2e.ts | 2 +- packages/@uppy/compressor/src/index.test.ts | 2 +- packages/@uppy/core/src/Uppy.test.ts | 2 +- packages/@uppy/core/src/types.test.ts | 4 +- packages/@uppy/react/README.md | 6 +- packages/@uppy/react/src/Dashboard.ts | 1 + packages/@uppy/react/src/DashboardModal.ts | 1 + packages/@uppy/react/src/useUppyEvent.test.ts | 2 +- packages/@uppy/react/types/CommonTypes.d.ts | 11 ---- packages/@uppy/react/types/Dashboard.d.ts | 26 -------- .../@uppy/react/types/DashboardModal.d.ts | 24 -------- packages/@uppy/react/types/DragDrop.d.ts | 12 ---- packages/@uppy/react/types/FileInput.d.ts | 11 ---- packages/@uppy/react/types/ProgressBar.d.ts | 11 ---- packages/@uppy/react/types/StatusBar.d.ts | 12 ---- packages/@uppy/react/types/useUppy.d.ts | 8 --- packages/@uppy/vue/src/dashboard-modal.ts | 2 +- packages/@uppy/vue/src/dashboard.ts | 2 +- packages/@uppy/vue/src/drag-drop.ts | 2 +- packages/@uppy/vue/src/file-input.ts | 2 +- packages/@uppy/vue/src/progress-bar.ts | 2 +- packages/@uppy/vue/src/status-bar.ts | 2 +- 26 files changed, 34 insertions(+), 178 deletions(-) delete mode 100644 packages/@uppy/react/types/CommonTypes.d.ts delete mode 100644 packages/@uppy/react/types/Dashboard.d.ts delete mode 100644 packages/@uppy/react/types/DashboardModal.d.ts delete mode 100644 packages/@uppy/react/types/DragDrop.d.ts delete mode 100644 packages/@uppy/react/types/FileInput.d.ts delete mode 100644 packages/@uppy/react/types/ProgressBar.d.ts delete mode 100644 packages/@uppy/react/types/StatusBar.d.ts delete mode 100644 packages/@uppy/react/types/useUppy.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index c830d463f4..d181afdbd2 100644 --- a/.eslintrc.js +++ b/.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'], }, diff --git a/e2e/cypress/integration/dashboard-tus.spec.ts b/e2e/cypress/integration/dashboard-tus.spec.ts index 8432b969c7..3e11cb58c3 100644 --- a/e2e/cypress/integration/dashboard-tus.spec.ts +++ b/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, diff --git a/e2e/cypress/integration/dashboard-xhr.spec.ts b/e2e/cypress/integration/dashboard-xhr.spec.ts index f1e6fffd98..4a093c517a 100644 --- a/e2e/cypress/integration/dashboard-xhr.spec.ts +++ b/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(() => { diff --git a/e2e/cypress/support/commands.ts b/e2e/cypress/support/commands.ts index 2bf214d22f..986d5df168 100644 --- a/e2e/cypress/support/commands.ts +++ b/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) diff --git a/e2e/cypress/support/e2e.ts b/e2e/cypress/support/e2e.ts index a848280213..97dc4e009c 100644 --- a/e2e/cypress/support/e2e.ts +++ b/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') diff --git a/packages/@uppy/compressor/src/index.test.ts b/packages/@uppy/compressor/src/index.test.ts index 9d49370e4f..9eff543c13 100644 --- a/packages/@uppy/compressor/src/index.test.ts +++ b/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'), ) diff --git a/packages/@uppy/core/src/Uppy.test.ts b/packages/@uppy/core/src/Uppy.test.ts index 2ffe203223..0a27e16e52 100644 --- a/packages/@uppy/core/src/Uppy.test.ts +++ b/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'), ) diff --git a/packages/@uppy/core/src/types.test.ts b/packages/@uppy/core/src/types.test.ts index 232c3c230e..1a03591d02 100644 --- a/packages/@uppy/core/src/types.test.ts +++ b/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 diff --git a/packages/@uppy/react/README.md b/packages/@uppy/react/README.md index d04c33dea4..7817cd437d 100644 --- a/packages/@uppy/react/README.md +++ b/packages/@uppy/react/README.md @@ -16,7 +16,8 @@ a versatile file encoding service. -```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 ( ) diff --git a/packages/@uppy/react/src/Dashboard.ts b/packages/@uppy/react/src/Dashboard.ts index 6a7173c382..c4769b0f6a 100644 --- a/packages/@uppy/react/src/Dashboard.ts +++ b/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' diff --git a/packages/@uppy/react/src/DashboardModal.ts b/packages/@uppy/react/src/DashboardModal.ts index c6d1a9938d..00c744406c 100644 --- a/packages/@uppy/react/src/DashboardModal.ts +++ b/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' diff --git a/packages/@uppy/react/src/useUppyEvent.test.ts b/packages/@uppy/react/src/useUppyEvent.test.ts index 9dd45454bc..44656c1e0b 100644 --- a/packages/@uppy/react/src/useUppyEvent.test.ts +++ b/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', () => { diff --git a/packages/@uppy/react/types/CommonTypes.d.ts b/packages/@uppy/react/types/CommonTypes.d.ts deleted file mode 100644 index 43f72a5571..0000000000 --- a/packages/@uppy/react/types/CommonTypes.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { Uppy } from '@uppy/core' - -// Helper to exclude a key -export type Omit = Pick> - -// If I use the helper it doesn't work, I think because 'target' is not a `keyof T` while -// the generic T is unknown, so will just use the expansion here -type OmitTarget = Pick> - -export type WithBaseUppyProps = T & { uppy: Uppy } -export type ToUppyProps = WithBaseUppyProps> diff --git a/packages/@uppy/react/types/Dashboard.d.ts b/packages/@uppy/react/types/Dashboard.d.ts deleted file mode 100644 index 4af363c368..0000000000 --- a/packages/@uppy/react/types/Dashboard.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react' -import type { DashboardOptions } from '@uppy/dashboard' -import type { Omit, WithBaseUppyProps } from './CommonTypes.js' - -// This type is mapped into `DashboardProps` below so IntelliSense doesn't display this big mess of nested types -type DashboardPropsInner = Omit< - WithBaseUppyProps, - // Remove the modal-only props - | 'animateOpenClose' - | 'browserBackButtonClose' - | 'inline' - | 'onRequestCloseModal' - | 'trigger' -> & - React.BaseHTMLAttributes - -export type DashboardProps = { - [K in keyof DashboardPropsInner]: DashboardPropsInner[K] -} - -/** - * React Component that renders a Dashboard for an Uppy instance. This component - * renders the Dashboard inline so you can put it anywhere you want. - */ -declare const DashboardComponent: React.ComponentType -export default DashboardComponent diff --git a/packages/@uppy/react/types/DashboardModal.d.ts b/packages/@uppy/react/types/DashboardModal.d.ts deleted file mode 100644 index 9ef7617076..0000000000 --- a/packages/@uppy/react/types/DashboardModal.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { DashboardOptions } from '@uppy/dashboard' -import type { Omit, ToUppyProps } from './CommonTypes.js' - -// This type is mapped into `DashboardModalProps` below so IntelliSense doesn't display this big mess of nested types -type DashboardModalPropsInner = { - open?: boolean - onRequestClose?: VoidFunction -} & Omit< - ToUppyProps, - // Remove the inline-only and force-overridden props - 'inline' | 'onRequestCloseModal' -> & - React.BaseHTMLAttributes - -export type DashboardModalProps = { - [K in keyof DashboardModalPropsInner]: DashboardModalPropsInner[K] -} - -/** - * React Component that renders a Dashboard for an Uppy instance. This component - * renders the Dashboard inline so you can put it anywhere you want. - */ -declare const DashboardModal: React.ComponentType -export default DashboardModal diff --git a/packages/@uppy/react/types/DragDrop.d.ts b/packages/@uppy/react/types/DragDrop.d.ts deleted file mode 100644 index c127152b83..0000000000 --- a/packages/@uppy/react/types/DragDrop.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { DragDropOptions } from '@uppy/drag-drop' -import type { ToUppyProps } from './CommonTypes.js' - -export type DragDropProps = ToUppyProps & - React.BaseHTMLAttributes - -/** - * React component that renders an area in which files can be dropped to be - * uploaded. - */ -declare const DragDropComponent: React.ComponentType -export default DragDropComponent diff --git a/packages/@uppy/react/types/FileInput.d.ts b/packages/@uppy/react/types/FileInput.d.ts deleted file mode 100644 index adbc796ba3..0000000000 --- a/packages/@uppy/react/types/FileInput.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { FileInputOptions } from '@uppy/file-input' -import type { ToUppyProps } from './CommonTypes.js' - -export type FileInputProps = ToUppyProps - -/** - * React component that renders an area in which files can be dropped to be - * uploaded. - */ -declare const FileInputComponent: React.ComponentType -export default FileInputComponent diff --git a/packages/@uppy/react/types/ProgressBar.d.ts b/packages/@uppy/react/types/ProgressBar.d.ts deleted file mode 100644 index fe1a9baa3a..0000000000 --- a/packages/@uppy/react/types/ProgressBar.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type { ProgressBarOptions } from '@uppy/progress-bar' -import type { ToUppyProps } from './CommonTypes.js' - -export type ProgressBarProps = ToUppyProps & - React.BaseHTMLAttributes - -/** - * React component that renders a progress bar at the top of the page. - */ -declare const ProgressBarComponent: React.ComponentType -export default ProgressBarComponent diff --git a/packages/@uppy/react/types/StatusBar.d.ts b/packages/@uppy/react/types/StatusBar.d.ts deleted file mode 100644 index 0bbe4d562e..0000000000 --- a/packages/@uppy/react/types/StatusBar.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { StatusBarOptions } from '@uppy/status-bar' -import type { ToUppyProps } from './CommonTypes.js' - -export type StatusBarProps = ToUppyProps & - React.BaseHTMLAttributes - -/** - * React component that renders a status bar containing upload progress and speed, - * processing progress and pause/resume/cancel controls. - */ -declare const StatusBarComponent: React.ComponentType -export default StatusBarComponent diff --git a/packages/@uppy/react/types/useUppy.d.ts b/packages/@uppy/react/types/useUppy.d.ts deleted file mode 100644 index 6c6e1f2136..0000000000 --- a/packages/@uppy/react/types/useUppy.d.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type Uppy from '@uppy/core' - -/** - * @deprecated Initialize Uppy outside of the component. - */ -declare function useUppy(factory: () => Uppy): Uppy - -export default useUppy diff --git a/packages/@uppy/vue/src/dashboard-modal.ts b/packages/@uppy/vue/src/dashboard-modal.ts index f2626019d3..75a1912aba 100644 --- a/packages/@uppy/vue/src/dashboard-modal.ts +++ b/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 = Omit< DashboardOptions & { inline: false }, diff --git a/packages/@uppy/vue/src/dashboard.ts b/packages/@uppy/vue/src/dashboard.ts index 056456b598..7590628dac 100644 --- a/packages/@uppy/vue/src/dashboard.ts +++ b/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 = Omit< DashboardOptions & { inline: true }, diff --git a/packages/@uppy/vue/src/drag-drop.ts b/packages/@uppy/vue/src/drag-drop.ts index 971840cf62..4c51f1a27d 100644 --- a/packages/@uppy/vue/src/drag-drop.ts +++ b/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', diff --git a/packages/@uppy/vue/src/file-input.ts b/packages/@uppy/vue/src/file-input.ts index 8d334b821d..007ee11357 100644 --- a/packages/@uppy/vue/src/file-input.ts +++ b/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', diff --git a/packages/@uppy/vue/src/progress-bar.ts b/packages/@uppy/vue/src/progress-bar.ts index b9df4e6f79..dc919e07b3 100644 --- a/packages/@uppy/vue/src/progress-bar.ts +++ b/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', diff --git a/packages/@uppy/vue/src/status-bar.ts b/packages/@uppy/vue/src/status-bar.ts index 3af62ff9d8..305b27a2b1 100644 --- a/packages/@uppy/vue/src/status-bar.ts +++ b/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',