Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add Vue and Svelte target #512

Open
wants to merge 24 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
05f61e1
feat: add Svelte target
wobsoriano Jun 29, 2022
aaa1c85
chore: update deps
dbismut Jul 2, 2022
fbfc5e1
chore: fix versions
dbismut Jul 2, 2022
b20de9d
ci: changeset
dbismut Jul 2, 2022
cae986d
demo: add svelte demo
dbismut Jul 2, 2022
e7f20a7
feat: add vue target
wobsoriano Aug 5, 2022
32c18c4
demo: add vue
dbismut Aug 28, 2022
e059b1f
chore: toast update
dbismut Aug 28, 2022
19946d0
ts: swap NonNullable<State[Key]>['event'] with UIEvent
dbismut Aug 28, 2022
cd776f8
Update package.json
dbismut Aug 28, 2022
e63651d
fix: rollback ts to 4.7.4 inside lock file
dbismut Aug 28, 2022
562bc51
ts: enable strictNullChecks
dbismut Aug 28, 2022
1893719
chore: remove vue from package dev dependency and put it in workspace
dbismut Aug 28, 2022
c92d259
Merge branch 'main' into pr/wobsoriano/512
dbismut Aug 28, 2022
0f97c17
ts: trying stuff to fix types
dbismut Aug 28, 2022
cb3f1a8
fix: versions for new package
dbismut Aug 28, 2022
dd7d7c5
Merge branch 'main' into pr/512
dbismut Aug 30, 2022
159c0d8
fix: various fixes to update from main
dbismut Aug 30, 2022
a3a8e1e
chore: merge `import from '../types'` statements
dbismut Sep 9, 2022
2f5cab4
feat: add normalizeProp function which defaults to React style props …
dbismut Sep 9, 2022
22255d2
feat: remove the need for normalizing props in Vue package
dbismut Sep 9, 2022
a5bc721
fix: add support for customizing native props
dbismut Sep 12, 2022
fe412cd
Merge branch 'main' into pr/512
dbismut Feb 21, 2023
5d022fa
chore: update deps
dbismut Feb 22, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: add vue target
  • Loading branch information
wobsoriano committed Aug 5, 2022
commit e7f20a74292e0575cc82511185c07ab0b04a6892
11 changes: 11 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,17 @@
"import": "{ drag }",
"path": "packages/svelte/dist/use-gesture-svelte.esm.js",
"limit": "7 KB"
},
{
"name": "@use-gesture/vue",
"path": "packages/vue/dist/use-gesture-svelte.esm.js",
"limit": "9 KB"
},
{
"name": "@use-gesture/vue -- tree-shaking",
"import": "{ drag }",
"path": "packages/vue/dist/use-gesture-vue.esm.js",
"limit": "7 KB"
}
],
"jest": {
Expand Down
46 changes: 46 additions & 0 deletions packages/vue/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
{
"name": "@use-gesture/vue",
"version": "10.2.15",
"description": "Vue target for @use-gesture",
"keywords": [
"vue",
"hook",
"gesture",
"mouse",
"trackpad",
"touch",
"drag",
"pinch",
"rotate",
"scale",
"zoom",
"scroll",
"wheel"
],
"license": "MIT",
"sideEffects": false,
"main": "dist/use-gesture-vue.cjs.js",
"module": "dist/use-gesture-vue.esm.js",
"repository": {
"type": "git",
"url": "git+https://github.com/pmndrs/use-gesture.git",
"directory": "packages/vue"
},
"bugs": {
"url": "https://github.com/pmndrs/use-gesture/issues"
},
"author": "Robert Soriano (https://github.com/wobsoriano)",
"contributors": [
"David Bismut (https://github.com/dbismut)"
],
"homepage": "https://use-gesture.netlify.app",
"peerDependencies": {
"vue": ">=3.2.0"
},
"dependencies": {
"@use-gesture/core": "10.2.16"
},
"devDependencies": {
"vue": "^3.2.37"
}
}
16 changes: 16 additions & 0 deletions packages/vue/src/createUseGesture.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { parseMergedHandlers } from '@use-gesture/core'
import { registerAction } from '@use-gesture/core/actions'
import type { Action, GestureHandlers, UserGestureConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

export function createUseGesture(actions: Action[]) {
actions.forEach(registerAction)

return function useGesture<Config extends UserGestureConfig = UserGestureConfig>(
_handlers: GestureHandlers,
_config?: Config
) {
const { handlers, nativeHandlers, config } = parseMergedHandlers(_handlers, _config || {})
return useRecognizers<Config>(handlers, config, undefined, nativeHandlers)
}
}
14 changes: 14 additions & 0 deletions packages/vue/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export { normalizeProps } from './useRecognizers'

export { useDrag } from './useDrag'
export { usePinch } from './usePinch'
export { useWheel } from './useWheel'
export { useScroll } from './useScroll'
export { useMove } from './useMove'
export { useHover } from './useHover'
export { useGesture } from './useGesture'
export { createUseGesture } from './createUseGesture'

export * from '@use-gesture/core/utils'
export * from '@use-gesture/core/actions'
export * from '@use-gesture/core/types'
17 changes: 17 additions & 0 deletions packages/vue/src/useDrag.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { dragAction, registerAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserDragConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

/**
* Drag composable.
*
* @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
*/
export function useDrag<EventType = EventTypes['drag'], Config extends UserDragConfig = UserDragConfig>(
handler: Handler<'drag', EventType>,
config?: Config
) {
registerAction(dragAction)
return useRecognizers({ drag: handler }, config || {}, 'drag')
}
19 changes: 19 additions & 0 deletions packages/vue/src/useGesture.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { dragAction, hoverAction, moveAction, pinchAction, scrollAction, wheelAction } from '@use-gesture/core/actions'
import type { AnyHandlerEventTypes, EventTypes, GestureHandlers, UserGestureConfig } from '@use-gesture/core/types'
import { createUseGesture } from './createUseGesture'

/**
* @public
*
* The most complete gesture composable, allowing support for multiple gestures.
*
* @param {GestureHandlers} handlers - an object with on[Gesture] keys containg gesture handlers
* @param {UseGestureConfig} config - the full config object
*/
export function useGesture<
HandlerTypes extends AnyHandlerEventTypes = EventTypes,
Config extends UserGestureConfig = UserGestureConfig
>(handlers: GestureHandlers<HandlerTypes>, config?: Config) {
const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction])
return hook(handlers, config || ({} as Config))
}
17 changes: 17 additions & 0 deletions packages/vue/src/useHover.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { hoverAction, registerAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserHoverConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

/**
* Hover composable.
*
* @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
*/
export function useHover<EventType = EventTypes['hover'], Config extends UserHoverConfig = UserHoverConfig>(
handler: Handler<'hover', EventType>,
config?: Config
) {
registerAction(hoverAction)
return useRecognizers({ hover: handler }, config || {}, 'hover')
}
17 changes: 17 additions & 0 deletions packages/vue/src/useMove.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { moveAction, registerAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserMoveConfig } from '@use-gesture/core/types'
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
*/
export function useMove<EventType = EventTypes['move'], Config extends UserMoveConfig = UserMoveConfig>(
handler: Handler<'move', EventType>,
config?: Config
) {
registerAction(moveAction)
return useRecognizers({ move: handler }, config || {}, 'move')
}
17 changes: 17 additions & 0 deletions packages/vue/src/usePinch.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { pinchAction, registerAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserPinchConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

/**
* Pinch composable.
*
* @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
*/
export function usePinch<EventType = EventTypes['pinch'], Config extends UserPinchConfig = UserPinchConfig>(
handler: Handler<'pinch', EventType>,
config?: Config
) {
registerAction(pinchAction)
return useRecognizers({ pinch: handler }, config || {}, 'pinch')
}
76 changes: 76 additions & 0 deletions packages/vue/src/useRecognizers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Controller } from '@use-gesture/core'
import type { DOMHandlers, GenericOptions, GestureKey, InternalHandlers, NativeHandlers } from '@use-gesture/core/types'
import { watchEffect } from 'vue'
import type { Events as VueEvents } from 'vue'

type Dict = Record<string, any>

const eventMap: Dict = {
onKeyDown: 'onKeydown',
onKeyup: 'onKeyup',
onPointerCancel: 'onPointercancel',
onPointerDown: 'onPointerdown',
onPointerMove: 'onPointermove',
onPointerEnter: 'onPointerenter',
onPointerLeave: 'onPointerleave',
onPointerUp: 'onPointerup',
onWheel: 'onWheel',
onScroll: 'onScroll'
}

function toVueProp(prop: string) {
if (prop in eventMap) return eventMap[prop]

return prop
}

export const normalizeProps = (props: Dict = {}) => {
const normalized: Dict = {}
for (const key in props) normalized[toVueProp(key)] = props[key]

return normalized
}

type CombinedEventHandlers = VueEvents & DOMHandlers

type HookReturnType<Config extends GenericOptions> = Config['target'] extends object
? void
: (...args: any[]) => CombinedEventHandlers

/**
* Utility hook called by all gesture hooks and that will be responsible for
* the internals.
*
* @param {InternalHandlers} handlers
* @param {GenericOptions} config
* @param {GestureKey} gestureKey
* @param {NativeHandler} nativeHandlers
* @returns nothing when config.target is set, a binding function when not.
*/
export function useRecognizers<Config extends GenericOptions>(
handlers: InternalHandlers,
config: Config | {} = {},
gestureKey?: GestureKey,
nativeHandlers?: NativeHandlers
): HookReturnType<Config> {
const ctrl = new Controller(handlers)
ctrl.applyHandlers(handlers, nativeHandlers)
ctrl.applyConfig(config, gestureKey)

watchEffect((onInvalidate) => {
const cleanFn = ctrl.clean.bind(ctrl)
const effectFn = ctrl.effect.bind(ctrl)

onInvalidate(() => {
cleanFn()
effectFn()
})
})

// When target is undefined we return the bind function of the controller which
// returns prop handlers.
// @ts-expect-error: Internal
if (config.target === undefined) return ctrl.bind.bind(ctrl) as any

return undefined as any
}
17 changes: 17 additions & 0 deletions packages/vue/src/useScroll.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { registerAction, scrollAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserScrollConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

/**
* Scroll composable.
*
* @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
*/
export function useScroll<EventType = EventTypes['scroll'], Config extends UserScrollConfig = UserScrollConfig>(
handler: Handler<'scroll', EventType>,
config?: Config
) {
registerAction(scrollAction)
return useRecognizers({ scroll: handler }, config || {}, 'scroll')
}
17 changes: 17 additions & 0 deletions packages/vue/src/useWheel.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { registerAction, wheelAction } from '@use-gesture/core/actions'
import type { EventTypes, Handler, UserWheelConfig } from '@use-gesture/core/types'
import { useRecognizers } from './useRecognizers'

/**
* Wheel composable.
*
* @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
*/
export function useWheel<EventType = EventTypes['wheel'], Config extends UserWheelConfig = UserWheelConfig>(
handler: Handler<'wheel', EventType>,
config?: Config
) {
registerAction(wheelAction)
return useRecognizers({ wheel: handler }, config || {}, 'wheel')
}
Loading