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

Conversation

wobsoriano
Copy link

@wobsoriano wobsoriano commented Jun 29, 2022

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
Copy link

changeset-bot bot commented Jun 29, 2022

🦋 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
Copy link

codesandbox-ci bot commented Jun 29, 2022

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
Copy link
Collaborator

dbismut commented Jul 1, 2022

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

David

@dbismut
Copy link
Collaborator

dbismut commented Jul 2, 2022

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
Copy link
Author

wobsoriano commented Jul 2, 2022

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
Copy link
Collaborator

dbismut commented Jul 16, 2022

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

@wobsoriano
Copy link
Author

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

@wobsoriano
Copy link
Author

wobsoriano commented Jul 28, 2022

Demo when running pnpm demo:dev:

removed video

@dbismut
Copy link
Collaborator

dbismut commented Aug 3, 2022

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

@wobsoriano
Copy link
Author

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

@dbismut
Copy link
Collaborator

dbismut commented Aug 3, 2022

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
Copy link
Author

wobsoriano commented Aug 3, 2022

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

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

@dbismut
Copy link
Collaborator

dbismut commented Aug 4, 2022

❤️ 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
Copy link
Author

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
Copy link
Collaborator

dbismut commented Aug 4, 2022

Let's do this one :) thanks!

@wobsoriano
Copy link
Author

wobsoriano commented Aug 5, 2022

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
Copy link
Collaborator

dbismut commented Aug 24, 2022

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

This now throws an error, I'm not sure why, it was working fine before
deps: update
@dbismut

This comment was marked as resolved.

@dbismut

This comment was marked as resolved.

@dbismut
Copy link
Collaborator

dbismut commented Aug 28, 2022

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

@wobsoriano
Copy link
Author

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'
}

@wobsoriano wobsoriano changed the title feat: add Svelte target feat: add Vue/Svelte target Aug 30, 2022
@wobsoriano wobsoriano changed the title feat: add Vue/Svelte target feat: add Vue and Svelte target Aug 30, 2022
@dbismut
Copy link
Collaborator

dbismut commented Sep 13, 2022

@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
Copy link
Author

wobsoriano commented Sep 24, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants