From 367a003e3cab70521c8ebf1c105dadf8f6233faa Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Wed, 18 Jan 2023 16:48:14 -0800 Subject: [PATCH] deps: Migrate to @react-native-clipboard/clipboard `Clipboard` in RN core has been deprecated for a while, and in RN's v0.71 doc they finally mark it "removed": https://reactnative.dev/docs/clipboard We've reportedly (#4502) been getting console warnings that we should use @react-native-community/clipboard instead of the RN-core module. Do basically that, except we use its new name, @react-native-clipboard/clipboard; see react-native-clipboard/clipboard#87 Supersedes: #4502 Co-authored-by: rajprakash00 --- .eslintrc.yaml | 6 ++++- ios/Podfile.lock | 6 +++++ jest/jestSetup.js | 6 +++++ package.json | 1 + src/RootErrorBoundary.js | 3 ++- src/action-sheets/index.js | 3 ++- src/webview/handleOutboundEvents.js | 3 ++- tools/tsflower | 4 ++++ .../clipboard/dist/Clipboard.js.flow | 24 +++++++++++++++++++ .../clipboard/dist/NativeClipboard.js.flow | 10 ++++++++ .../clipboard/dist/index.js.flow | 6 +++++ .../clipboard/dist/useClipboard.js.flow | 4 ++++ .../clipboard/index.js.flow | 4 ++++ yarn.lock | 5 ++++ 14 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 types/@react-native-clipboard/clipboard/dist/Clipboard.js.flow create mode 100644 types/@react-native-clipboard/clipboard/dist/NativeClipboard.js.flow create mode 100644 types/@react-native-clipboard/clipboard/dist/index.js.flow create mode 100644 types/@react-native-clipboard/clipboard/dist/useClipboard.js.flow create mode 100644 types/@react-native-clipboard/clipboard/index.js.flow diff --git a/.eslintrc.yaml b/.eslintrc.yaml index c75ed6e15fc..86c7a9e5dd8 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -280,7 +280,11 @@ rules: - devDependencies: ['**/__tests__/**/*.js', tools/**] no-restricted-imports: - error - - patterns: + - paths: + - name: 'react-native' + importNames: ['Clipboard'] + message: 'Use Clipboard from @react-native-clipboard/clipboard instead.' + patterns: - group: ['**/__tests__/**'] - group: ['/react-redux'] message: 'Use our own src/react-redux.js instead.' diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 20d5030aa69..0f1d1decdd2 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -398,6 +398,8 @@ PODS: - React-Core - RNCAsyncStorage (1.17.11): - React-Core + - RNCClipboard (1.11.1): + - React-Core - RNCMaskedView (0.1.11): - React - RNCPushNotificationIOS (1.10.1): @@ -529,6 +531,7 @@ DEPENDENCIES: - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - rn-fetch-blob (from `../node_modules/rn-fetch-blob`) - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)" + - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)" - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" - "RNCPushNotificationIOS (from `../node_modules/@react-native-community/push-notification-ios`)" - RNDeviceInfo (from `../node_modules/react-native-device-info`) @@ -664,6 +667,8 @@ EXTERNAL SOURCES: :path: "../node_modules/rn-fetch-blob" RNCAsyncStorage: :path: "../node_modules/@react-native-async-storage/async-storage" + RNCClipboard: + :path: "../node_modules/@react-native-clipboard/clipboard" RNCMaskedView: :path: "../node_modules/@react-native-community/masked-view" RNCPushNotificationIOS: @@ -749,6 +754,7 @@ SPEC CHECKSUMS: ReactCommon: 149e2c0acab9bac61378da0db5b2880a1b5ff59b rn-fetch-blob: f525a73a78df9ed5d35e67ea65e79d53c15255bc RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60 + RNCClipboard: 2834e1c4af68697089cdd455ee4a4cdd198fa7dd RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489 RNCPushNotificationIOS: 87b8d16d3ede4532745e05b03c42cff33a36cc45 RNDeviceInfo: aad3c663b25752a52bf8fce93f2354001dd185aa diff --git a/jest/jestSetup.js b/jest/jestSetup.js index 97973dd9182..6305afdb246 100644 --- a/jest/jestSetup.js +++ b/jest/jestSetup.js @@ -5,6 +5,8 @@ import { polyfillGlobal } from 'react-native/Libraries/Utilities/PolyfillFunctio import { URL, URLSearchParams } from 'react-native-url-polyfill'; // $FlowIgnore[untyped-import] - this is not anywhere near critical import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock'; +// $FlowIgnore[untyped-import] +import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock'; import { assertUsingFakeTimers } from '../src/__tests__/lib/fakeTimers'; @@ -102,6 +104,10 @@ jest.mock('react-native-reanimated', () => { jest.mock('@react-native-async-storage/async-storage', () => mockAsyncStorage); +// As instructed at +// https://github.com/react-native-clipboard/clipboard/tree/v1.11.1#mocking-clipboard +jest.mock('@react-native-clipboard/clipboard', () => mockClipboard); + // We don't try to actually exercise this module in tests; we just test // some code in the same module as other code that imports it. Unmocked, // it complains of missing native modules. diff --git a/package.json b/package.json index 378409332c2..b33c04b9c56 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@expo/react-native-action-sheet": "^3.8.0", "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-camera-roll/camera-roll": "^5.0.4", + "@react-native-clipboard/clipboard": "^1.11.1", "@react-native-community/masked-view": "^0.1.10", "@react-native-community/netinfo": "6.0.0", "@react-native-community/push-notification-ios": "^1.5.0", diff --git a/src/RootErrorBoundary.js b/src/RootErrorBoundary.js index 8f541b46998..f2e3c93e55e 100644 --- a/src/RootErrorBoundary.js +++ b/src/RootErrorBoundary.js @@ -1,7 +1,8 @@ /* @flow strict-local */ import React from 'react'; import type { Node } from 'react'; -import { View, Text, Clipboard, TextInput, ScrollView, Button, Platform } from 'react-native'; +import { View, Text, TextInput, ScrollView, Button, Platform } from 'react-native'; +import Clipboard from '@react-native-clipboard/clipboard'; import Toast from 'react-native-simple-toast'; import * as logging from './utils/logging'; diff --git a/src/action-sheets/index.js b/src/action-sheets/index.js index 592b6e25215..a514dce907b 100644 --- a/src/action-sheets/index.js +++ b/src/action-sheets/index.js @@ -1,5 +1,6 @@ /* @flow strict-local */ -import { Clipboard, Share, Alert } from 'react-native'; +import { Share, Alert } from 'react-native'; +import Clipboard from '@react-native-clipboard/clipboard'; import invariant from 'invariant'; import * as resolved_topic from '@zulip/shared/js/resolved_topic'; diff --git a/src/webview/handleOutboundEvents.js b/src/webview/handleOutboundEvents.js index c4f00cf0b64..0288ca02200 100644 --- a/src/webview/handleOutboundEvents.js +++ b/src/webview/handleOutboundEvents.js @@ -1,5 +1,6 @@ /* @flow strict-local */ -import { Clipboard, Alert } from 'react-native'; +import { Alert } from 'react-native'; +import Clipboard from '@react-native-clipboard/clipboard'; import * as api from '../api'; import config from '../config'; diff --git a/tools/tsflower b/tools/tsflower index ce41a67024d..b34b5983677 100755 --- a/tools/tsflower +++ b/tools/tsflower @@ -147,6 +147,10 @@ run_only() # TODO get list of packages from data... better yet, make it # one tsflower command, reading a TsFlower config file + package=@react-native-clipboard/clipboard + run_on_package "${package}" + format_dir "${rootdir}"/types/"${package}" + package=react-native-document-picker run_on_package "${package}" format_dir "${rootdir}"/types/"${package}" diff --git a/types/@react-native-clipboard/clipboard/dist/Clipboard.js.flow b/types/@react-native-clipboard/clipboard/dist/Clipboard.js.flow new file mode 100644 index 00000000000..421d11418e0 --- /dev/null +++ b/types/@react-native-clipboard/clipboard/dist/Clipboard.js.flow @@ -0,0 +1,24 @@ +/* @flow + * @generated by TsFlower + */ +import type { EmitterSubscription as $tsflower_subst$RN$EmitterSubscription } from 'tsflower/subst/react-native'; +import 'react-native'; + +declare export var Clipboard: { + getString(): Promise, + getStrings(): Promise, + getImagePNG(): Promise, + getImageJPG(): Promise, + setImage(content: string): void, + getImage(): Promise, + setString(content: string): void, + setStrings(content: string[]): void, + hasString(): any, + hasImage(): any, + hasURL(): any, + hasNumber(): any, + hasWebURL(): any, + addListener(callback: () => void): $tsflower_subst$RN$EmitterSubscription, + removeAllListeners(): void, + ... +}; diff --git a/types/@react-native-clipboard/clipboard/dist/NativeClipboard.js.flow b/types/@react-native-clipboard/clipboard/dist/NativeClipboard.js.flow new file mode 100644 index 00000000000..b2852c83fb6 --- /dev/null +++ b/types/@react-native-clipboard/clipboard/dist/NativeClipboard.js.flow @@ -0,0 +1,10 @@ +/* @flow + * @generated by TsFlower + */ +import type { EmitterSubscription as $tsflower_subst$RN$EmitterSubscription } from 'tsflower/subst/react-native'; +import 'react-native'; +declare var _default: any; +export default _default; +declare var addListener: (callback: () => void) => $tsflower_subst$RN$EmitterSubscription; +declare var removeAllListeners: () => void; +export { addListener, removeAllListeners }; diff --git a/types/@react-native-clipboard/clipboard/dist/index.js.flow b/types/@react-native-clipboard/clipboard/dist/index.js.flow new file mode 100644 index 00000000000..0e5d7ee4c67 --- /dev/null +++ b/types/@react-native-clipboard/clipboard/dist/index.js.flow @@ -0,0 +1,6 @@ +/* @flow + * @generated by TsFlower + */ +import { Clipboard } from './Clipboard'; +export { useClipboard } from './useClipboard'; +export default Clipboard; diff --git a/types/@react-native-clipboard/clipboard/dist/useClipboard.js.flow b/types/@react-native-clipboard/clipboard/dist/useClipboard.js.flow new file mode 100644 index 00000000000..e22886fc272 --- /dev/null +++ b/types/@react-native-clipboard/clipboard/dist/useClipboard.js.flow @@ -0,0 +1,4 @@ +/* @flow + * @generated by TsFlower + */ +declare export var useClipboard: () => [string, (content: string) => void]; diff --git a/types/@react-native-clipboard/clipboard/index.js.flow b/types/@react-native-clipboard/clipboard/index.js.flow new file mode 100644 index 00000000000..7d3378ba54c --- /dev/null +++ b/types/@react-native-clipboard/clipboard/index.js.flow @@ -0,0 +1,4 @@ +/* @flow + * @generated + */ +export * from './dist/index.js.flow'; diff --git a/yarn.lock b/yarn.lock index 180770d6442..1a26838fe4c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2021,6 +2021,11 @@ resolved "https://registry.yarnpkg.com/@react-native-camera-roll/camera-roll/-/camera-roll-5.0.4.tgz#341b8275363ee496b796fa58cb592697798d39e5" integrity sha512-3kBRgW3VfmLQmQm70gPUVDu8rPSZymoPc9vmeiPLMKBqtWaqPNuPX0jQ6mZ8AEtYbBdoWC360Q4YYPalXv37zA== +"@react-native-clipboard/clipboard@^1.11.1": + version "1.11.1" + resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz#d3a9e685ce2383b1e92b89a334896c5575cc103d" + integrity sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q== + "@react-native-community/cli-debugger-ui@^7.0.3": version "7.0.3" resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-7.0.3.tgz#3eeeacc5a43513cbcae56e5e965d77726361bcb4"