Skip to content

Commit a521a17

Browse files
dbismutSteveoKr
dbismut
and
SteveoKr
authoredJun 23, 2022
Remove react types from core (#508)
* types: remove React.ReactRef dep * types: remove React types dependency in core package * Update packages/core/src/types/handlers.ts Co-authored-by: Steve <46493039+SteveoKr@users.noreply.github.com> Co-authored-by: Steve <46493039+SteveoKr@users.noreply.github.com>
·
@use-gesture/vanilla@10.3.1@use-gesture/core@10.2.16
1 parent 160b456 commit a521a17

File tree

8 files changed

+216
-20
lines changed

8 files changed

+216
-20
lines changed
 

Diff for: ‎.changeset/swift-gifts-march.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@use-gesture/core': patch
3+
'@use-gesture/react': patch
4+
---
5+
6+
types: remove React types dependency on core package

Diff for: ‎packages/core/src/engines/DragEngine.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,7 @@ export class DragEngine extends CoordinatesEngine<'drag'> {
376376
}
377377
}
378378

379-
function persistEvent(event: React.PointerEvent | PointerEvent) {
379+
function persistEvent(event: PointerEvent) {
380+
// @ts-ignore
380381
'persist' in event && typeof event.persist === 'function' && event.persist()
381382
}

Diff for: ‎packages/core/src/types/config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export type PinchConfig = GestureOptions<'pinch'> & {
123123
modifierKey?: ModifierKey
124124
}
125125

126-
export type DragBounds = Bounds | HTMLElement | React.RefObject<HTMLElement>
126+
export type DragBounds = Bounds | HTMLElement | { current: HTMLElement | null }
127127

128128
type MoveAndHoverMouseOnly = {
129129
/**

Diff for: ‎packages/core/src/types/handlers.ts

+3-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FullGestureState, State, EventTypes } from './state'
22
import { GestureKey } from './config'
3+
import { DOMHandlers, EventHandler } from './utils'
34

45
export type Handler<Key extends GestureKey, EventType = EventTypes[Key]> = (
56
state: Omit<FullGestureState<Key>, 'event'> & { event: EventType }
@@ -28,16 +29,9 @@ export type UserHandlers<T extends AnyHandlerEventTypes = EventTypes> = {
2829
onHover: Handler<'hover', check<T, 'hover'>>
2930
}
3031

31-
export type ReactDOMAttributes = Omit<
32-
React.DOMAttributes<EventTarget>,
33-
'children' | 'dangerouslySetInnerHTML' | keyof UserHandlers
34-
>
35-
36-
type NativeHandlersKeys = keyof ReactDOMAttributes
32+
type NativeHandlersKeys = keyof Omit<DOMHandlers, keyof UserHandlers>
3733

38-
type GetEventType<Key extends NativeHandlersKeys> = ReactDOMAttributes[Key] extends
39-
| React.EventHandler<infer EventType>
40-
| undefined
34+
type GetEventType<Key extends NativeHandlersKeys> = DOMHandlers[Key] extends EventHandler<infer EventType> | undefined
4135
? EventType
4236
: UIEvent
4337

Diff for: ‎packages/core/src/types/utils.ts

+195-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,198 @@
11
export type Vector2 = [number, number]
22
export type WebKitGestureEvent = PointerEvent & { scale: number; rotation: number }
3-
export type Target = EventTarget | React.RefObject<EventTarget>
3+
export type Target = EventTarget | { current: EventTarget | null }
44
export type PointerType = 'mouse' | 'touch' | 'pen'
5+
6+
// rip off from React types
7+
8+
export type EventHandler<E extends Event = Event> = (event: E) => void
9+
10+
export interface DOMHandlers {
11+
// Clipboard Events
12+
onCopy?: EventHandler<ClipboardEvent>
13+
onCopyCapture?: EventHandler<ClipboardEvent>
14+
onCut?: EventHandler<ClipboardEvent>
15+
onCutCapture?: EventHandler<ClipboardEvent>
16+
onPaste?: EventHandler<ClipboardEvent>
17+
onPasteCapture?: EventHandler<ClipboardEvent>
18+
19+
// Composition Events
20+
onCompositionEnd?: EventHandler<CompositionEvent>
21+
onCompositionEndCapture?: EventHandler<CompositionEvent>
22+
onCompositionStart?: EventHandler<CompositionEvent>
23+
onCompositionStartCapture?: EventHandler<CompositionEvent>
24+
onCompositionUpdate?: EventHandler<CompositionEvent>
25+
onCompositionUpdateCapture?: EventHandler<CompositionEvent>
26+
27+
// Focus Events
28+
onFocus?: EventHandler<FocusEvent>
29+
onFocusCapture?: EventHandler<FocusEvent>
30+
onBlur?: EventHandler<FocusEvent>
31+
onBlurCapture?: EventHandler<FocusEvent>
32+
33+
// Form Events
34+
onChange?: EventHandler<FormDataEvent>
35+
onChangeCapture?: EventHandler<FormDataEvent>
36+
onBeforeInput?: EventHandler<FormDataEvent>
37+
onBeforeInputCapture?: EventHandler<FormDataEvent>
38+
onInput?: EventHandler<FormDataEvent>
39+
onInputCapture?: EventHandler<FormDataEvent>
40+
onReset?: EventHandler<FormDataEvent>
41+
onResetCapture?: EventHandler<FormDataEvent>
42+
onSubmit?: EventHandler<FormDataEvent>
43+
onSubmitCapture?: EventHandler<FormDataEvent>
44+
onInvalid?: EventHandler<FormDataEvent>
45+
onInvalidCapture?: EventHandler<FormDataEvent>
46+
47+
// Image Events
48+
onLoad?: EventHandler
49+
onLoadCapture?: EventHandler
50+
onError?: EventHandler // also a Media Event
51+
onErrorCapture?: EventHandler // also a Media Event
52+
53+
// Keyboard Events
54+
onKeyDown?: EventHandler<KeyboardEvent>
55+
onKeyDownCapture?: EventHandler<KeyboardEvent>
56+
onKeyUp?: EventHandler<KeyboardEvent>
57+
onKeyUpCapture?: EventHandler<KeyboardEvent>
58+
59+
// Media Events
60+
onAbort?: EventHandler
61+
onAbortCapture?: EventHandler
62+
onCanPlay?: EventHandler
63+
onCanPlayCapture?: EventHandler
64+
onCanPlayThrough?: EventHandler
65+
onCanPlayThroughCapture?: EventHandler
66+
onDurationChange?: EventHandler
67+
onDurationChangeCapture?: EventHandler
68+
onEmptied?: EventHandler
69+
onEmptiedCapture?: EventHandler
70+
onEncrypted?: EventHandler
71+
onEncryptedCapture?: EventHandler
72+
onEnded?: EventHandler
73+
onEndedCapture?: EventHandler
74+
onLoadedData?: EventHandler
75+
onLoadedDataCapture?: EventHandler
76+
onLoadedMetadata?: EventHandler
77+
onLoadedMetadataCapture?: EventHandler
78+
onLoadStart?: EventHandler
79+
onLoadStartCapture?: EventHandler
80+
onPause?: EventHandler
81+
onPauseCapture?: EventHandler
82+
onPlay?: EventHandler
83+
onPlayCapture?: EventHandler
84+
onPlaying?: EventHandler
85+
onPlayingCapture?: EventHandler
86+
onProgress?: EventHandler
87+
onProgressCapture?: EventHandler
88+
onRateChange?: EventHandler
89+
onRateChangeCapture?: EventHandler
90+
onSeeked?: EventHandler
91+
onSeekedCapture?: EventHandler
92+
onSeeking?: EventHandler
93+
onSeekingCapture?: EventHandler
94+
onStalled?: EventHandler
95+
onStalledCapture?: EventHandler
96+
onSuspend?: EventHandler
97+
onSuspendCapture?: EventHandler
98+
onTimeUpdate?: EventHandler
99+
onTimeUpdateCapture?: EventHandler
100+
onVolumeChange?: EventHandler
101+
onVolumeChangeCapture?: EventHandler
102+
onWaiting?: EventHandler
103+
onWaitingCapture?: EventHandler
104+
105+
// MouseEvents
106+
onAuxClick?: EventHandler<MouseEvent>
107+
onAuxClickCapture?: EventHandler<MouseEvent>
108+
onClick?: EventHandler<MouseEvent>
109+
onClickCapture?: EventHandler<MouseEvent>
110+
onContextMenu?: EventHandler<MouseEvent>
111+
onContextMenuCapture?: EventHandler<MouseEvent>
112+
onDoubleClick?: EventHandler<MouseEvent>
113+
onDoubleClickCapture?: EventHandler<MouseEvent>
114+
onDrag?: EventHandler<DragEvent>
115+
onDragCapture?: EventHandler<DragEvent>
116+
onDragEnd?: EventHandler<DragEvent>
117+
onDragEndCapture?: EventHandler<DragEvent>
118+
onDragEnter?: EventHandler<DragEvent>
119+
onDragEnterCapture?: EventHandler<DragEvent>
120+
onDragExit?: EventHandler<DragEvent>
121+
onDragExitCapture?: EventHandler<DragEvent>
122+
onDragLeave?: EventHandler<DragEvent>
123+
onDragLeaveCapture?: EventHandler<DragEvent>
124+
onDragOver?: EventHandler<DragEvent>
125+
onDragOverCapture?: EventHandler<DragEvent>
126+
onDragStart?: EventHandler<DragEvent>
127+
onDragStartCapture?: EventHandler<DragEvent>
128+
onDrop?: EventHandler<DragEvent>
129+
onDropCapture?: EventHandler<DragEvent>
130+
onMouseDown?: EventHandler<MouseEvent>
131+
onMouseDownCapture?: EventHandler<MouseEvent>
132+
onMouseEnter?: EventHandler<MouseEvent>
133+
onMouseLeave?: EventHandler<MouseEvent>
134+
onMouseMove?: EventHandler<MouseEvent>
135+
onMouseMoveCapture?: EventHandler<MouseEvent>
136+
onMouseOut?: EventHandler<MouseEvent>
137+
onMouseOutCapture?: EventHandler<MouseEvent>
138+
onMouseOver?: EventHandler<MouseEvent>
139+
onMouseOverCapture?: EventHandler<MouseEvent>
140+
onMouseUp?: EventHandler<MouseEvent>
141+
onMouseUpCapture?: EventHandler<MouseEvent>
142+
143+
// Selection Events
144+
onSelect?: EventHandler
145+
onSelectCapture?: EventHandler
146+
147+
// Touch Events
148+
onTouchCancel?: EventHandler<TouchEvent>
149+
onTouchCancelCapture?: EventHandler<TouchEvent>
150+
onTouchEnd?: EventHandler<TouchEvent>
151+
onTouchEndCapture?: EventHandler<TouchEvent>
152+
onTouchMove?: EventHandler<TouchEvent>
153+
onTouchMoveCapture?: EventHandler<TouchEvent>
154+
onTouchStart?: EventHandler<TouchEvent>
155+
onTouchStartCapture?: EventHandler<TouchEvent>
156+
157+
// Pointer Events
158+
onPointerDown?: EventHandler<PointerEvent>
159+
onPointerDownCapture?: EventHandler<PointerEvent>
160+
onPointerMove?: EventHandler<PointerEvent>
161+
onPointerMoveCapture?: EventHandler<PointerEvent>
162+
onPointerUp?: EventHandler<PointerEvent>
163+
onPointerUpCapture?: EventHandler<PointerEvent>
164+
onPointerCancel?: EventHandler<PointerEvent>
165+
onPointerCancelCapture?: EventHandler<PointerEvent>
166+
onPointerEnter?: EventHandler<PointerEvent>
167+
onPointerEnterCapture?: EventHandler<PointerEvent>
168+
onPointerLeave?: EventHandler<PointerEvent>
169+
onPointerLeaveCapture?: EventHandler<PointerEvent>
170+
onPointerOver?: EventHandler<PointerEvent>
171+
onPointerOverCapture?: EventHandler<PointerEvent>
172+
onPointerOut?: EventHandler<PointerEvent>
173+
onPointerOutCapture?: EventHandler<PointerEvent>
174+
onGotPointerCapture?: EventHandler<PointerEvent>
175+
onGotPointerCaptureCapture?: EventHandler<PointerEvent>
176+
onLostPointerCapture?: EventHandler<PointerEvent>
177+
onLostPointerCaptureCapture?: EventHandler<PointerEvent>
178+
179+
// UI Events
180+
onScroll?: EventHandler<UIEvent>
181+
onScrollCapture?: EventHandler<UIEvent>
182+
183+
// Wheel Events
184+
onWheel?: EventHandler<WheelEvent>
185+
onWheelCapture?: EventHandler<WheelEvent>
186+
187+
// Animation Events
188+
onAnimationStart?: EventHandler<AnimationEvent>
189+
onAnimationStartCapture?: EventHandler<AnimationEvent>
190+
onAnimationEnd?: EventHandler<AnimationEvent>
191+
onAnimationEndCapture?: EventHandler<AnimationEvent>
192+
onAnimationIteration?: EventHandler<AnimationEvent>
193+
onAnimationIterationCapture?: EventHandler<AnimationEvent>
194+
195+
// Transition Events
196+
onTransitionEnd?: EventHandler<TransitionEvent>
197+
onTransitionEndCapture?: EventHandler<TransitionEvent>
198+
}

Diff for: ‎packages/react/src/types.test.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33

44
import { useRef } from 'react'
55
import { expectType } from 'tsd'
6-
import { ReactDOMAttributes, useDrag, useGesture } from '.'
6+
import { useDrag, useGesture } from '.'
7+
import { ReactDOMAttributes } from './types'
78

89
/* Checks that gesture hooks return event props handlers */
910
expectType<(...args: any[]) => ReactDOMAttributes>(useDrag(() => {}))

Diff for: ‎packages/react/src/types.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { DOMHandlers } from '@use-gesture/core/types'
2+
3+
export type ReactDOMAttributes = {
4+
[Key in keyof DOMHandlers]: React.DOMAttributes<EventTarget>[Key]
5+
}

Diff for: ‎packages/react/src/useRecognizers.ts

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
/* eslint-disable react-hooks/exhaustive-deps */
22
import React from 'react'
33
import { Controller } from '@use-gesture/core'
4-
import {
5-
GenericOptions,
6-
GestureKey,
7-
InternalHandlers,
8-
NativeHandlers,
9-
ReactDOMAttributes
10-
} from '@use-gesture/core/types'
4+
import { GenericOptions, GestureKey, InternalHandlers, NativeHandlers } from '@use-gesture/core/types'
5+
import { ReactDOMAttributes } from './types'
116

127
type HookReturnType<Config extends GenericOptions> = Config['target'] extends object
138
? void

0 commit comments

Comments
 (0)
Please sign in to comment.