feat: add Vue and Svelte target

[wobsoriano]

Initial PR that adds Svelte target package. It can be used together with Svelte's built-in spring function:

<script lang="ts">
  import { spring } from 'svelte/motion'
  import { drag } from '@use-gesture/svelte'

  let coords = spring({ x: 0, y: 0 });

  function handler({ detail }) {
    const {
      active,
      movement: [mx, my]
    } = detail

    coords.set({
      x: active ? mx : 0,
      y: active ? my : 0
    })
  }
</script>

<div
  use:drag
  on:drag={handler}
  style:transform="translate({$coords.x}px, {$coords.y}px)"
/>

I have no experience with changesets so I just copy-pasted some configs in package.json

[changeset-bot]

🦋 Changeset detected

Latest commit: 5d022fa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@use-gesture/svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5d022fa:

Sandbox	Source
gesture-drag	Configuration
gesture-drag-target	Configuration
gesture-nested	Configuration
gesture-drag-vanilla	Configuration
gesture-move	Configuration
gesture-pinch	Configuration
gesture-multiple-pinch	Configuration
gesture-three	Configuration
gesture-card-zoom	Configuration
gesture-viewpager	Configuration

[dbismut]

Thanks! I'll have a look over the week-end :)

David

[dbismut]

Hey @wobsoriano, thanks a lot for this! I haven't looked through all the details but I guess exporting type GestureEvent is mandatory?

I've managed to integrate a svelte demo inside the main demo package using https://github.com/pngwn/svelte-adapter. You can try this locally and let me know if all of this works!

[wobsoriano]

Hi @dbismut !

but I guess exporting type GestureEvent is mandatory?

Yeah according to the doc, we need to create .d.ts to extend HTMLAttributes. What I did for now in this package is to export svelte-gesture/globals:

{
  "compilerOptions": {
    "types": ["svelte-gesture/globals"]
  }
}

I've managed to integrate a svelte demo inside the main demo package using https://github.com/pngwn/svelte-adapter. You can try this locally and let me know if all of this works!

I'll play around and update you!

[dbismut]

Hey @wobsoriano did you have the chance to look at this? Thanks!

[wobsoriano]

Hey @dbismut , sorry just now. Yes, I was able to test it locally and it works as expected!

[wobsoriano]

Demo when running pnpm demo:dev:

removed video

[dbismut]

@wobsoriano sorry I'm late on this. All good then right? Not sure if the screen recording is supposed to show an error 😅

[wobsoriano]

All good @dbismut ! Screen recording is just to show my local dev haha - it works

[dbismut]

Oh right :D Cool. While we're at it, we might as well release bindings for Vue. Let's see how easy that is. We were supposed to do this with @koca at some point, shouldn't be too hard.

[wobsoriano]

I have a working port of Vue as well https://github.com/wobsoriano/vuse-gesture

… and Solid https://github.com/wobsoriano/solid-gesture

[dbismut]

❤️ how hard would it be to port both? Not sure about Solid but I think I could embed Vue in the demo the same way I did for Svelte.

I would need to refactor some of the docs to make the docs either framework agnostic or find a way to have all APIs available.

[wobsoriano]

I already have a working port of Vue and can PR it. Do you want me to create a new PR or use this one?

[dbismut]

Let's do this one :) thanks!

[wobsoriano]

Added vue target @dbismut . Sample usage:

<script setup>
import { useSpring } from 'vue-use-spring'
import { normalizeProps, useDrag } from '@use-gesture/vue'

const position = useSpring({ x: 0, y: 0 })

const bind = useDrag(({ down, movement: [mx, my] }) => {
  position.x = down ? mx : 0
  position.y = down ? my : 0
})
</script>

<template>
  <div
    id="box"
    v-bind="normalizeProps(bind())"
    :style="{
      touchAction: 'none',
      transform: `translate(${position.x}px, ${position.y}px)`,
    }"
  />
</template>

[dbismut]

Hey @wobsoriano sorry I'm a bit drowning with work atm. Just a quick question, do we have to use normalizeProps with Vue?

[dbismut]

About normalizeProps, I'll try to integrate a way to have this inside core.

[wobsoriano]

Hey @wobsoriano sorry I'm a bit drowning with work atm. Just a quick question, do we have to use normalizeProps with Vue?

Yeah we have to, or integrate it internally because of this

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

[dbismut]

@wobsoriano I've added a way to pass normalize function to the gesture controller to make this cleaner for the end user.
I don't know much about Vue, but it looks like it has a "v:on" bind function for events, that accepts handlers in the form of { mousedown: doStuff() }.

<script setup>
import { useSpring } from 'vue-use-spring'
import { useDrag } from '@use-gesture/vue'

const position = useSpring({ x: 0, y: 0 })

const bind = useDrag(({ down, movement: [mx, my] }) => {
  position.x = down ? mx : 0
  position.y = down ? my : 0
})
</script>

<template>
  <div
    id="box"
    v-on="bind()"
    :style="{
      touchAction: 'none',
      transform: `translate(${position.x}px, ${position.y}px)`,
    }"
  />
</template>

[wobsoriano]

Looks good to me @dbismut. I forgot about the v-on bind function! That looks clean.