Fix config types (#487)

* chore: removes patch package

* types: fix config types not being inferred

Author: dbismut

.changeset/pretty-turtles-walk.md

@@ -0,0 +1,7 @@
+---
+'@use-gesture/react': patch
+'@use-gesture/vanilla': patch
+'@use-gesture/core': patch
+---
+
+Fix config types

demo/package.json

@@ -3,7 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "postinstall": "patch-package",
     "dev": "vite --port 4000 --host",
     "build": "vite build",
     "serve": "vite preview"

demo/src/sandboxes/gesture-simplest/src/App.tsx

@@ -6,16 +6,13 @@ import styles from './styles.module.css'
 
 export default function App() {
   const [style, api] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
-  const bind = useDrag(
-    ({ active, offset: [x, y] }) => {
-      api.start({
-        x: active ? x : 0,
-        y: active ? y : 0,
-        scale: active ? 1.2 : 1
-      })
-    },
-    { bounds: { left: -30 } }
-  )
+  const bind = useDrag(({ active, offset: [x, y] }) => {
+    api.start({
+      x: active ? x : 0,
+      y: active ? y : 0,
+      scale: active ? 1.2 : 1
+    })
+  })
 
   return (
     <div className="flex fill center">

package.json

@@ -99,7 +99,6 @@
     "eslint-plugin-testing-library": "^5.3.1",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "patch-package": "^6.4.7",
     "pnpm": "^6.32.6",
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.6.2",

packages/react/src/createUseGesture.ts

@@ -8,9 +8,9 @@ export function createUseGesture(actions: Action[]) {
 
   return function useGesture<Config extends UserGestureConfig = UserGestureConfig>(
     _handlers: GestureHandlers,
-    _config: Config | {} = {}
+    _config?: Config
   ) {
-    const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config)
+    const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config || {})
     return useRecognizers<Config>(handlers, config, undefined, nativeHandlers)
   }
 }

packages/react/src/useDrag.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Drag hook.
  *
  * @param {Handler<'drag'>} handler - the function fired every time the drag gesture updates
- * @param {UserDragConfig} [config={}] - the config object including generic options and drag options
+ * @param {UserDragConfig} config - the config object including generic options and drag options
  */
 export function useDrag<EventType = EventTypes['drag'], Config extends UserDragConfig = UserDragConfig>(
   handler: Handler<'drag', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(dragAction)
-  return useRecognizers({ drag: handler }, config, 'drag')
+  return useRecognizers({ drag: handler }, config || {}, 'drag')
 }

packages/react/src/useGesture.ts

@@ -8,12 +8,12 @@ import { createUseGesture } from './createUseGesture'
  * The most complete gesture hook, allowing support for multiple gestures.
  *
  * @param {GestureHandlers} handlers - an object with on[Gesture] keys containg gesture handlers
- * @param {UseGestureConfig} [config={}] - the full config object
+ * @param {UseGestureConfig} config - the full config object
  */
 export function useGesture<
   HandlerTypes extends AnyHandlerEventTypes = EventTypes,
   Config extends UserGestureConfig = UserGestureConfig
->(handlers: GestureHandlers<HandlerTypes>, config: Config | {} = {}) {
+>(handlers: GestureHandlers<HandlerTypes>, config?: Config) {
   const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction])
-  return hook(handlers, config)
+  return hook(handlers, config || ({} as Config))
 }

packages/react/src/useHover.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Hover hook.
  *
  * @param {Handler<'hover'>} handler - the function fired every time the hover gesture updates
- * @param {UserHoverConfig} [config={}] - the config object including generic options and hover options
+ * @param {UserHoverConfig} config - the config object including generic options and hover options
  */
 export function useHover<EventType = EventTypes['hover'], Config extends UserHoverConfig = UserHoverConfig>(
   handler: Handler<'hover', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(hoverAction)
-  return useRecognizers({ hover: handler }, config, 'hover')
+  return useRecognizers({ hover: handler }, config || {}, 'hover')
 }

packages/react/src/useMove.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Move hook.
  *
  * @param {Handler<'move'>} handler - the function fired every time the move gesture updates
- * @param {UserMoveConfig} [config={}] - the config object including generic options and move options
+ * @param {UserMoveConfig} config - the config object including generic options and move options
  */
 export function useMove<EventType = EventTypes['move'], Config extends UserMoveConfig = UserMoveConfig>(
   handler: Handler<'move', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(moveAction)
-  return useRecognizers({ move: handler }, config, 'move')
+  return useRecognizers({ move: handler }, config || {}, 'move')
 }

packages/react/src/usePinch.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Pinch hook.
  *
  * @param {Handler<'pinch'>} handler - the function fired every time the pinch gesture updates
- * @param {UserPinchConfig} [config={}] - the config object including generic options and pinch options
+ * @param {UserPinchConfig} config - the config object including generic options and pinch options
  */
 export function usePinch<EventType = EventTypes['pinch'], Config extends UserPinchConfig = UserPinchConfig>(
   handler: Handler<'pinch', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(pinchAction)
-  return useRecognizers({ pinch: handler }, config, 'pinch')
+  return useRecognizers({ pinch: handler }, config || {}, 'pinch')
 }

packages/react/src/useScroll.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Scroll hook.
  *
  * @param {Handler<'scroll'>} handler - the function fired every time the scroll gesture updates
- * @param {UserScrollConfig} [config={}] - the config object including generic options and scroll options
+ * @param {UserScrollConfig} config - the config object including generic options and scroll options
  */
 export function useScroll<EventType = EventTypes['scroll'], Config extends UserScrollConfig = UserScrollConfig>(
   handler: Handler<'scroll', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(scrollAction)
-  return useRecognizers({ scroll: handler }, config, 'scroll')
+  return useRecognizers({ scroll: handler }, config || {}, 'scroll')
 }

packages/react/src/useWheel.ts

@@ -6,12 +6,12 @@ import { useRecognizers } from './useRecognizers'
  * Wheel hook.
  *
  * @param {Handler<'wheel'>} handler - the function fired every time the wheel gesture updates
- * @param {UserWheelConfig} [config={}] - the config object including generic options and wheel options
+ * @param {UserWheelConfig} config - the config object including generic options and wheel options
  */
 export function useWheel<EventType = EventTypes['wheel'], Config extends UserWheelConfig = UserWheelConfig>(
   handler: Handler<'wheel', EventType>,
-  config: Config | {} = {}
+  config?: Config
 ) {
   registerAction(wheelAction)
-  return useRecognizers({ wheel: handler }, config, 'wheel')
+  return useRecognizers({ wheel: handler }, config || {}, 'wheel')
 }

packages/vanilla/src/DragGesture.ts

@@ -15,8 +15,8 @@ export interface DragGesture extends Recognizer {}
 export const DragGesture: DragGestureConstructor = function <EventType = EventTypes['drag']>(
   target: EventTarget,
   handler: Handler<'drag', EventType>,
-  config: UserDragConfig | {} = {}
+  config?: UserDragConfig
 ) {
   registerAction(dragAction)
-  return new Recognizer(target, { drag: handler }, config, 'drag')
+  return new Recognizer(target, { drag: handler }, config || {}, 'drag')
 } as any

packages/vanilla/src/Gesture.ts

@@ -16,8 +16,8 @@ export interface Gesture extends Recognizer {}
 export const Gesture: GestureConstructor = function <HandlerTypes extends AnyHandlerEventTypes = EventTypes>(
   target: EventTarget,
   handlers: GestureHandlers<HandlerTypes>,
-  config: UserGestureConfig | {} = {}
+  config?: UserGestureConfig
 ) {
   const gestureFunction = createGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction])
-  return gestureFunction(target, handlers, config)
+  return gestureFunction(target, handlers, config || ({} as UserGestureConfig))
 } as any

packages/vanilla/src/HoverGesture.ts

@@ -15,8 +15,8 @@ export interface HoverGesture extends Recognizer {}
 export const HoverGesture: HoverGestureConstructor = function <EventType = EventTypes['hover']>(
   target: EventTarget,
   handler: Handler<'hover', EventType>,
-  config: UserHoverConfig | {} = {}
+  config?: UserHoverConfig
 ) {
   registerAction(hoverAction)
-  return new Recognizer(target, { hover: handler }, config, 'hover')
+  return new Recognizer(target, { hover: handler }, config || {}, 'hover')
 } as any

packages/vanilla/src/MoveGesture.ts

@@ -15,8 +15,8 @@ export interface MoveGesture extends Recognizer {}
 export const MoveGesture: MoveGestureConstructor = function <EventType = EventTypes['move']>(
   target: EventTarget,
   handler: Handler<'move', EventType>,
-  config: UserMoveConfig | {} = {}
+  config?: UserMoveConfig
 ) {
   registerAction(moveAction)
-  return new Recognizer(target, { move: handler }, config, 'move')
+  return new Recognizer(target, { move: handler }, config || {}, 'move')
 } as any

packages/vanilla/src/PinchGesture.ts

@@ -15,8 +15,8 @@ export interface PinchGesture extends Recognizer {}
 export const PinchGesture: PinchGestureConstructor = function <EventType = EventTypes['pinch']>(
   target: EventTarget,
   handler: Handler<'pinch', EventType>,
-  config: UserPinchConfig | {} = {}
+  config?: UserPinchConfig
 ) {
   registerAction(pinchAction)
-  return new Recognizer(target, { pinch: handler }, config, 'pinch')
+  return new Recognizer(target, { pinch: handler }, config || {}, 'pinch')
 } as any

packages/vanilla/src/ScrollGesture.ts

@@ -15,8 +15,8 @@ export interface ScrollGesture extends Recognizer {}
 export const ScrollGesture: ScrollGestureConstructor = function <EventType = EventTypes['scroll']>(
   target: EventTarget,
   handler: Handler<'scroll', EventType>,
-  config: UserScrollConfig | {} = {}
+  config?: UserScrollConfig
 ) {
   registerAction(scrollAction)
-  return new Recognizer(target, { scroll: handler }, config, 'scroll')
+  return new Recognizer(target, { scroll: handler }, config || {}, 'scroll')
 } as any

packages/vanilla/src/WheelGesture.ts

@@ -15,8 +15,8 @@ export interface WheelGesture extends Recognizer {}
 export const WheelGesture: WheelGestureConstructor = function <EventType = EventTypes['wheel']>(
   target: EventTarget,
   handler: Handler<'wheel', EventType>,
-  config: UserWheelConfig | {} = {}
+  config?: UserWheelConfig
 ) {
   registerAction(wheelAction)
-  return new Recognizer(target, { wheel: handler }, config, 'wheel')
+  return new Recognizer(target, { wheel: handler }, config || {}, 'wheel')
 } as any

packages/vanilla/src/createGesture.ts

@@ -6,8 +6,8 @@ import { Recognizer } from './Recognizer'
 export function createGesture(actions: Action[]) {
   actions.forEach(registerAction)
 
-  return function (target: EventTarget, _handlers: GestureHandlers, _config: UserGestureConfig | {} = {}) {
-    const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config)
+  return function (target: EventTarget, _handlers: GestureHandlers, _config?: UserGestureConfig) {
+    const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config || {})
     return new Recognizer(target, handlers, config, undefined, nativeHandlers)
   }
 }