From 225a065befb62b88235d863fb3ab94e5f92480d8 Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 3 Jan 2023 21:40:12 +0000 Subject: [PATCH 1/5] chore: replace @ts-ignore with @ts-expect-error --- example-web/src/App.tsx | 2 +- example-web/src/Examples.tsx | 4 ++-- example-web/src/Props.tsx | 4 ++-- package/src/RNCSliderNativeComponent.ts | 2 +- package/src/RNCSliderNativeComponent.web.tsx | 9 ++++----- package/src/Slider.tsx | 2 +- 6 files changed, 11 insertions(+), 12 deletions(-) diff --git a/example-web/src/App.tsx b/example-web/src/App.tsx index a096bec4..b2e60164 100644 --- a/example-web/src/App.tsx +++ b/example-web/src/App.tsx @@ -5,7 +5,7 @@ import { ScrollView, Platform, StyleSheet, -// @ts-ignore +// @ts-expect-error } from 'react-native'; import {examples, Props as ExamplesTabProperties} from './Examples'; diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx index 7a8ed1ce..dd7ccbcd 100644 --- a/example-web/src/Examples.tsx +++ b/example-web/src/Examples.tsx @@ -1,7 +1,7 @@ import React, {useState} from 'react'; -// @ts-ignore +// @ts-expect-error import {Text, View, StyleSheet} from 'react-native'; -// @ts-ignore +// @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; export interface Props { diff --git a/example-web/src/Props.tsx b/example-web/src/Props.tsx index 04ac35ad..3dee1a3a 100644 --- a/example-web/src/Props.tsx +++ b/example-web/src/Props.tsx @@ -1,7 +1,7 @@ import React, {useState} from 'react'; -// @ts-ignore +// @ts-expect-error import {Text, View, StyleSheet} from 'react-native'; -// @ts-ignore +// @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; export interface Props { diff --git a/package/src/RNCSliderNativeComponent.ts b/package/src/RNCSliderNativeComponent.ts index bd00338a..e6d6c17f 100644 --- a/package/src/RNCSliderNativeComponent.ts +++ b/package/src/RNCSliderNativeComponent.ts @@ -1,6 +1,6 @@ import type {ColorValue, HostComponent, ViewProps} from 'react-native'; import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -//@ts-ignore +//@ts-expect-error import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; import type { Float, diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index a454ef51..28c526a3 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -1,4 +1,4 @@ -//@ts-ignore +//@ts-expect-error import ReactDOM from 'react-dom'; import React, {RefObject, useCallback} from 'react'; import { @@ -11,7 +11,7 @@ import { LayoutChangeEvent, Image, } from 'react-native'; -//@ts-ignore +//@ts-expect-error import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; type Event = Readonly<{ @@ -149,11 +149,11 @@ const RCTSliderWebComponent = React.forwardRef( hasBeenResized.current = true; }; React.useEffect(() => { - //@ts-ignore + //@ts-expect-error window.addEventListener('resize', onResize); return () => { - //@ts-ignore + //@ts-expect-error window.removeEventListener('resize', onResize); }; }, []); @@ -211,7 +211,6 @@ const RCTSliderWebComponent = React.forwardRef( }, [maximumValue, minimumValue, step]); const updateContainerPositionX = () => { - //@ts-ignore const positionX = ReactDOM.findDOMNode( (containerRef as RefObject).current, ).getBoundingClientRect()?.x; diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index e66c72f5..49de2dff 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -11,7 +11,7 @@ import { StyleProp, } from 'react-native'; import RCTSliderNativeComponent from './index'; -//@ts-ignore +//@ts-expect-error import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; import type {Ref} from 'react'; From 972006aa80472db6cc63fae264e659d163c8aadd Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 3 Jan 2023 21:49:28 +0000 Subject: [PATCH 2/5] chore: add react-native types --- example-web/package-lock.json | 17 +++++++++++++++++ example-web/package.json | 1 + example-web/src/App.tsx | 1 - example-web/src/Examples.tsx | 1 - example-web/src/Props.tsx | 1 - package/src/RNCSliderNativeComponent.ts | 11 +++++------ package/src/RNCSliderNativeComponent.web.tsx | 6 +++--- package/src/Slider.tsx | 11 +++++------ 8 files changed, 31 insertions(+), 18 deletions(-) diff --git a/example-web/package-lock.json b/example-web/package-lock.json index 94254ebe..cb841a90 100644 --- a/example-web/package-lock.json +++ b/example-web/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^16.18.9", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-native": "^0.69.16", "react": "^18.2.0", "react-dom": "^18.2.0", "react-native-web": "^0.18.10", @@ -3890,6 +3891,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-native": { + "version": "0.69.16", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.16.tgz", + "integrity": "sha512-wNaFnc3fyl33OcoZxRpamb9LN6B4bBkvQS/SswJLLM+h6y7SpsKmAIwKAxFAdttr+DZj9pVMwTIn6XA4Bto3KQ==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -19630,6 +19639,14 @@ "@types/react": "*" } }, + "@types/react-native": { + "version": "0.69.16", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.16.tgz", + "integrity": "sha512-wNaFnc3fyl33OcoZxRpamb9LN6B4bBkvQS/SswJLLM+h6y7SpsKmAIwKAxFAdttr+DZj9pVMwTIn6XA4Bto3KQ==", + "requires": { + "@types/react": "*" + } + }, "@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", diff --git a/example-web/package.json b/example-web/package.json index 31198794..28d8a91f 100644 --- a/example-web/package.json +++ b/example-web/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.18.9", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-native": "^0.69.16", "react": "^18.2.0", "react-dom": "^18.2.0", "react-native-web": "^0.18.10", diff --git a/example-web/src/App.tsx b/example-web/src/App.tsx index b2e60164..aee082cb 100644 --- a/example-web/src/App.tsx +++ b/example-web/src/App.tsx @@ -5,7 +5,6 @@ import { ScrollView, Platform, StyleSheet, -// @ts-expect-error } from 'react-native'; import {examples, Props as ExamplesTabProperties} from './Examples'; diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx index dd7ccbcd..cd96631a 100644 --- a/example-web/src/Examples.tsx +++ b/example-web/src/Examples.tsx @@ -1,5 +1,4 @@ import React, {useState} from 'react'; -// @ts-expect-error import {Text, View, StyleSheet} from 'react-native'; // @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; diff --git a/example-web/src/Props.tsx b/example-web/src/Props.tsx index 3dee1a3a..a7f94e28 100644 --- a/example-web/src/Props.tsx +++ b/example-web/src/Props.tsx @@ -1,5 +1,4 @@ import React, {useState} from 'react'; -// @ts-expect-error import {Text, View, StyleSheet} from 'react-native'; // @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; diff --git a/package/src/RNCSliderNativeComponent.ts b/package/src/RNCSliderNativeComponent.ts index e6d6c17f..3789bc2e 100644 --- a/package/src/RNCSliderNativeComponent.ts +++ b/package/src/RNCSliderNativeComponent.ts @@ -1,7 +1,6 @@ import type {ColorValue, HostComponent, ViewProps} from 'react-native'; import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent'; -//@ts-expect-error -import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; +import type {ImageSourcePropType} from 'react-native'; import type { Float, WithDefault, @@ -21,10 +20,10 @@ export interface NativeProps extends ViewProps { inverted?: WithDefault; vertical?: WithDefault; tapToSeek?: WithDefault; - maximumTrackImage?: ImageSource; + maximumTrackImage?: ImageSourcePropType; maximumTrackTintColor?: ColorValue; maximumValue?: Float; - minimumTrackImage?: ImageSource; + minimumTrackImage?: ImageSourcePropType; minimumTrackTintColor?: ColorValue; minimumValue?: Float; onChange?: BubblingEventHandler; @@ -33,9 +32,9 @@ export interface NativeProps extends ViewProps { onRNCSliderValueChange?: BubblingEventHandler; step?: Float; testID?: string; - thumbImage?: ImageSource; + thumbImage?: ImageSourcePropType; thumbTintColor?: ColorValue; - trackImage?: ImageSource; + trackImage?: ImageSourcePropType; value?: Float; lowerLimit?: Float; upperLimit?: Float; diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index 28c526a3..bddb278b 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -11,8 +11,8 @@ import { LayoutChangeEvent, Image, } from 'react-native'; -//@ts-expect-error -import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; + +import type {ImageSourcePropType} from 'react-native'; type Event = Readonly<{ nativeEvent: { @@ -34,7 +34,7 @@ export interface Props { disabled: boolean; trackHeight: number; thumbSize: number; - thumbImage?: ImageSource; + thumbImage?: ImageSourcePropType; onRNCSliderSlidingStart: (event: Event) => void; onRNCSliderSlidingComplete: (event: Event) => void; onRNCSliderValueChange: (event: Event) => void; diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index 49de2dff..dde20b21 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -11,8 +11,7 @@ import { StyleProp, } from 'react-native'; import RCTSliderNativeComponent from './index'; -//@ts-expect-error -import type {ImageSource} from 'react-native/Libraries/Image/ImageSource'; +import type {ImageSourcePropType} from 'react-native'; import type {Ref} from 'react'; @@ -42,19 +41,19 @@ type IOSProps = Readonly<{ * Assigns a single image for the track. Only static images are supported. * The center pixel of the image will be stretched to fill the track. */ - trackImage?: ImageSource; + trackImage?: ImageSourcePropType; /** * Assigns a minimum track image. Only static images are supported. The * rightmost pixel of the image will be stretched to fill the track. */ - minimumTrackImage?: ImageSource; + minimumTrackImage?: ImageSourcePropType; /** * Assigns a maximum track image. Only static images are supported. The * leftmost pixel of the image will be stretched to fill the track. */ - maximumTrackImage?: ImageSource; + maximumTrackImage?: ImageSourcePropType; /** * Permits tapping on the slider track to set the thumb position. @@ -163,7 +162,7 @@ type Props = ViewProps & /** * Sets an image for the thumb. Only static images are supported. */ - thumbImage?: ImageSource; + thumbImage?: ImageSourcePropType; /** * If true the slider will be inverted. From 23197defbc0ee96b57adbdd9d438c37107b201b2 Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 3 Jan 2023 22:02:10 +0000 Subject: [PATCH 3/5] chore: fix react-dom type errors --- example/package-lock.json | 8 +++- package/package-lock.json | 45 +++++++++++++++++++- package/package.json | 4 +- package/src/RNCSliderNativeComponent.web.tsx | 13 +++--- 4 files changed, 61 insertions(+), 9 deletions(-) diff --git a/example/package-lock.json b/example/package-lock.json index 6b8fa1cd..6dc2566d 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -49,6 +49,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "2.0.0", "@types/jest": "^28.1.8", + "@types/react-dom": "18.0.x", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^26.6.3", @@ -60,7 +61,8 @@ "flow-bin": "^0.163.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.70.3", - "react": "^18.0.0", + "react": "18.0.0", + "react-dom": "18.0.0", "react-native": "^0.69.1", "react-native-windows": "^0.69.1", "react-test-renderer": "^18.0.0", @@ -20591,6 +20593,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "2.0.0", "@types/jest": "^28.1.8", + "@types/react-dom": "18.0.x", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^26.6.3", @@ -20602,7 +20605,8 @@ "flow-bin": "^0.163.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.70.3", - "react": "^18.0.0", + "react": "18.0.0", + "react-dom": "18.0.0", "react-native": "^0.69.1", "react-native-windows": "^0.69.1", "react-test-renderer": "^18.0.0", diff --git a/package/package-lock.json b/package/package-lock.json index f4bbaf74..93a49e33 100644 --- a/package/package-lock.json +++ b/package/package-lock.json @@ -16,6 +16,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "2.0.0", "@types/jest": "^28.1.8", + "@types/react-dom": "18.0.x", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^26.6.3", @@ -27,7 +28,8 @@ "flow-bin": "^0.163.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.70.3", - "react": "^18.0.0", + "react": "18.0.0", + "react-dom": "18.0.0", "react-native": "^0.69.1", "react-native-windows": "^0.69.1", "react-test-renderer": "^18.0.0", @@ -6479,6 +6481,15 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz", + "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-native": { "version": "0.69.5", "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.5.tgz", @@ -16084,6 +16095,19 @@ "ws": "^7" } }, + "node_modules/react-dom": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "dev": true, + "dependencies": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + }, + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -23913,6 +23937,15 @@ "csstype": "^3.0.2" } }, + "@types/react-dom": { + "version": "18.0.10", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz", + "integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-native": { "version": "0.69.5", "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.69.5.tgz", @@ -31228,6 +31261,16 @@ "ws": "^7" } }, + "react-dom": { + "version": "18.0.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0.tgz", + "integrity": "sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==", + "dev": true, + "requires": { + "loose-envify": "^1.1.0", + "scheduler": "^0.21.0" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package/package.json b/package/package.json index 9281e320..16e0ee2c 100644 --- a/package/package.json +++ b/package/package.json @@ -29,6 +29,7 @@ "@babel/runtime": "^7.12.5", "@react-native-community/eslint-config": "2.0.0", "@types/jest": "^28.1.8", + "@types/react-dom": "18.0.x", "@types/react-native": "^0.69.5", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^26.6.3", @@ -40,7 +41,8 @@ "flow-bin": "^0.163.0", "jest": "^26.6.3", "metro-react-native-babel-preset": "^0.70.3", - "react": "^18.0.0", + "react": "18.0.0", + "react-dom": "18.0.0", "react-native": "^0.69.1", "react-native-windows": "^0.69.1", "react-test-renderer": "^18.0.0", diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index bddb278b..1dc8517a 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -1,4 +1,5 @@ -//@ts-expect-error +/// + import ReactDOM from 'react-dom'; import React, {RefObject, useCallback} from 'react'; import { @@ -149,11 +150,9 @@ const RCTSliderWebComponent = React.forwardRef( hasBeenResized.current = true; }; React.useEffect(() => { - //@ts-expect-error window.addEventListener('resize', onResize); return () => { - //@ts-expect-error window.removeEventListener('resize', onResize); }; }, []); @@ -211,9 +210,13 @@ const RCTSliderWebComponent = React.forwardRef( }, [maximumValue, minimumValue, step]); const updateContainerPositionX = () => { - const positionX = ReactDOM.findDOMNode( + const element = ReactDOM.findDOMNode( + // TODO: Unsafe casting of a forwarded ref (containerRef as RefObject).current, - ).getBoundingClientRect()?.x; + // findDOMNode is not generic and always includes Text as a possible type. + // Here we know the ref is always an Element. + ) as unknown as Element | null; + const positionX = element?.getBoundingClientRect()?.x; containerPositionX.current = positionX ?? 0; }; From ebf8813e9484a1ae28e5fc7975b73b29f0949642 Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 3 Jan 2023 22:04:24 +0000 Subject: [PATCH 4/5] chore: typecheck imports of slider in example-web --- example-web/src/Examples.tsx | 1 - example-web/src/Props.tsx | 1 - example-web/tsconfig.json | 5 ++++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx index cd96631a..b80419e5 100644 --- a/example-web/src/Examples.tsx +++ b/example-web/src/Examples.tsx @@ -1,6 +1,5 @@ import React, {useState} from 'react'; import {Text, View, StyleSheet} from 'react-native'; -// @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; export interface Props { diff --git a/example-web/src/Props.tsx b/example-web/src/Props.tsx index a7f94e28..b9d487d6 100644 --- a/example-web/src/Props.tsx +++ b/example-web/src/Props.tsx @@ -1,6 +1,5 @@ import React, {useState} from 'react'; import {Text, View, StyleSheet} from 'react-native'; -// @ts-expect-error import Slider, {SliderProps} from '@react-native-community/slider'; export interface Props { diff --git a/example-web/tsconfig.json b/example-web/tsconfig.json index a273b0cf..f0ee422f 100644 --- a/example-web/tsconfig.json +++ b/example-web/tsconfig.json @@ -18,7 +18,10 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "paths": { + "@react-native-community/slider": ["../package"] + } }, "include": [ "src" From a5148a08e9296bc1f973368a1c81515a4cb90add Mon Sep 17 00:00:00 2001 From: Moti Zilberman Date: Tue, 3 Jan 2023 22:05:39 +0000 Subject: [PATCH 5/5] chore: fix a usage of `any` in web implementation --- package/src/RNCSliderNativeComponent.web.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index 1dc8517a..b2ee82b4 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -11,6 +11,7 @@ import { GestureResponderEvent, LayoutChangeEvent, Image, + AccessibilityActionEvent, } from 'react-native'; import type {ImageSourcePropType} from 'react-native'; @@ -255,7 +256,7 @@ const RCTSliderWebComponent = React.forwardRef( updateValue(newValue); }; - const accessibilityActions = (event: any) => { + const accessibilityActions = (event: AccessibilityActionEvent) => { const tenth = (maximumValue - minimumValue) / 10; switch (event.nativeEvent.actionName) { case 'increment':