feat: add Vue and Svelte target

.changeset/silver-beds-sell.md

@@ -0,0 +1,5 @@
+---
+'@use-gesture/svelte': patch
+---
+
+New package.

demo/package.json

@@ -10,28 +10,38 @@
   "dependencies": {
     "@leva-ui/plugin-spring": "*",
     "@react-spring/web": "^9.4.5",
-    "@react-three/drei": "^9.8.1",
-    "@react-three/fiber": "^8.0.15",
+    "@react-three/drei": "^9.14.3",
+    "@react-three/fiber": "^8.0.27",
     "@use-gesture/react": "*",
+    "@use-gesture/svelte": "*",
     "@use-gesture/vanilla": "*",
+    "@use-gesture/vue": "*",
     "leva": "*",
     "lodash-move": "^1.1.1",
     "lodash.clamp": "^4.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-use-measure": "^2.1.1",
     "screenlog": "^0.3.0",
-    "three": "^0.140.2",
+    "svelte": "^3.49.0",
+    "svelte-adapter": "^0.5.0",
+    "three": "^0.143.0",
+    "veaury": "^2.2.10",
+    "vue": "^3.2.37",
+    "vue-use-spring": "^0.1.1",
     "wouter": "^2.7.4"
   },
   "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "1.0.2",
     "@types/lodash.clamp": "^4.0.7",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
     "@types/three": "^0.140.0",
     "@vitejs/plugin-react": "^1.3.2",
+    "@vitejs/plugin-vue": "^3.0.3",
     "typescript": "^4.8.4",
     "typescript-plugin-css-modules": "^4.1.1",
-    "vite": "^4.0.3"
+    "vite": "^4.0.3",
+    "vue-tsc": "^0.40.2"
   }
 }

demo/src/App.jsx

@@ -9,6 +9,8 @@ import DragTarget from './sandboxes/gesture-drag-target/src/App'
 import Nested from './sandboxes/gesture-nested/src/App'
 import DragVanilla from './sandboxes/gesture-drag-vanilla/src/App'
 import GestureVanilla from './sandboxes/gesture-vanilla/src/App'
+import GestureSvelte from './sandboxes/gesture-svelte/src/App'
+import GestureVue from './sandboxes/gesture-vue/src/App'
 import Move from './sandboxes/gesture-move/src/App'
 import Pinch from './sandboxes/gesture-pinch/src/App'
 import PinchMultiple from './sandboxes/gesture-pinch-multiple/src/App'
@@ -34,6 +36,8 @@ const links = {
   'gesture-nested': Nested,
   'gesture-drag-vanilla': DragVanilla,
   'gesture-vanilla': GestureVanilla,
+  'gesture-svelte': GestureSvelte,
+  'gesture-vue': GestureVue,
   'gesture-move': Move,
   'gesture-pinch': Pinch,
   'gesture-pinch-multiple': PinchMultiple,

demo/src/sandboxes/gesture-svelte/src/App.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import toReact from 'svelte-adapter/react'
+import SvelteApp from './SvelteApp.svelte'
+
+const SvelteInReact = toReact(SvelteApp, {}, 'div')
+
+export default function App() {
+  return (
+    <div className="flex fill center">
+      <SvelteInReact />
+    </div>
+  )
+}

demo/src/sandboxes/gesture-svelte/src/SvelteApp.svelte

@@ -0,0 +1,46 @@
+<script lang="js">
+  import { spring } from 'svelte/motion'
+  import { drag } from '@use-gesture/svelte'
+
+  let coords = spring({ x: 0, y: 0, scale: 1 })
+  function handler({ detail }) {
+    const {
+      active,
+      movement: [mx, my]
+    } = detail
+    coords.set({
+      x: active ? mx : 0,
+      y: active ? my : 0,
+      scale: active ? 1.2 : 1
+    })
+  }
+</script>
+
+<div class="flex fill center">
+  <div
+    class="drag"
+    use:drag
+    on:drag={handler}
+    tabindex="-1"
+    style:transform="translate3d({$coords.x}px, {$coords.y}px, 0) scale({$coords.scale})"
+  />
+</div>
+
+<style>
+  .drag {
+    position: absolute;
+    height: 80px;
+    width: 80px;
+    border-radius: 8px;
+    background-color: hotpink;
+    cursor: grab;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    font-size: 10px;
+  }
+  .drag:focus {
+    border: 2px solid red;
+    cursor: grabbing;
+  }
+</style>

demo/src/sandboxes/gesture-svelte/src/index.css

@@ -0,0 +1,32 @@
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  background-color: #ecede7;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.flex.fill {
+  height: 100%;
+}
+
+.flex.center {
+  justify-content: center;
+}

demo/src/sandboxes/gesture-vue/src/App.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { applyVueInReact } from 'veaury'
+import VueApp from './VueApp.vue'
+
+const VueInReact = applyVueInReact(VueApp)
+
+export default function App() {
+  return (
+    <div className="flex fill center">
+      <VueInReact />
+    </div>
+  )
+}

demo/src/sandboxes/gesture-vue/src/VueApp.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useSpring } from 'vue-use-spring'
+import { useGesture } from '@use-gesture/vue'
+
+const position = useSpring({ x: 0, y: 0 })
+
+const bind = useGesture({
+  onDrag: ({ down, movement: [mx, my] }) => {
+    position.x = down ? mx : 0
+    position.y = down ? my : 0
+  },
+  onClick: () => console.log('click')
+})
+</script>
+
+<template>
+  <div
+    className="drag"
+    v-on="bind()"
+    :style="{
+      touchAction: 'none',
+      transform: `translate(${position.x}px, ${position.y}px)`
+    }"
+  />
+</template>
+
+<style>
+.drag {
+  position: absolute;
+  height: 80px;
+  width: 80px;
+  border-radius: 8px;
+  background-color: hotpink;
+  cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+  font-size: 10px;
+}
+.drag:focus {
+  border: 2px solid red;
+  cursor: grabbing;
+}
+</style>

demo/src/sandboxes/gesture-vue/src/index.css

@@ -0,0 +1,32 @@
+html,
+body,
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  min-height: 100vh;
+  margin: 0;
+  background-color: #ecede7;
+}
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.flex.fill {
+  height: 100%;
+}
+
+.flex.center {
+  justify-content: center;
+}

demo/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client"],
     "allowJs": true,
     "skipLibCheck": false,
     "esModuleInterop": false,
@@ -11,11 +10,13 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "node",
+    "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "useDefineForClassFields": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "preserve",
+    "sourceMap": true,
     "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
   "include": ["./src"]

demo/vite.config.js

@@ -1,7 +1,9 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import vue from '@vitejs/plugin-vue'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react(), vue(), svelte()]
 })

documentation/package.json

@@ -12,8 +12,8 @@
     "@reach/tabs": "^0.16.4",
     "@react-spring/three": "^9.4.5",
     "@react-spring/web": "^9.4.5",
-    "@react-three/drei": "^9.8.1",
-    "@react-three/fiber": "^8.0.15",
+    "@react-three/drei": "^9.14.3",
+    "@react-three/fiber": "^8.0.27",
     "@use-gesture/react": "*",
     "@use-gesture/vanilla": "*",
     "animejs": "^3.2.1",
@@ -22,14 +22,14 @@
     "gatsby-plugin-google-analytics": "^4.24.0",
     "gatsby-plugin-pnpm": "^1.2.10",
     "lethargy": "^1.0.9",
-    "leva": "^0.9.25",
+    "leva": "^0.9.30",
     "mdx-observable": "^0.2.0",
     "parse-numeric-range": "^1.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-player": "^2.10.0",
-    "react-toastify": "^8.1.0",
+    "react-toastify": "^9.0.8",
     "smooth-doc": "^8.0.1",
-    "three": "^0.140.2"
+    "three": "^0.143.0"
   }
 }

documentation/pages/HeroSandbox/index.js

@@ -9,7 +9,7 @@ import { tweaks } from './data'
 import 'react-toastify/dist/ReactToastify.css'
 import * as styles from './hero.module.css'
 
-toast.configure({ position: 'bottom-right', pauseOnHover: false, draggable: false })
+const toastConfig = { position: toast.POSITION.BOTTOM_RIGHT, pauseOnHover: false, draggable: false }
 
 const _config = {
   stiff: { tension: 200, friction: 20 },
@@ -78,9 +78,9 @@ export default function Hero({ carbonAd }) {
   const bind = useGesture(
     {
       onDrag: ({ hovering, tap, swipe: [swipeX, swipeY], active, movement: [mx, my], offset: [x, y] }) => {
-        if (tap) toast('Tap!')
-        if (swipeX) toast(`Swipe ${swipeX > 0 ? 'Right' : 'Left'}`)
-        if (swipeY) toast(`Swipe ${swipeY > 0 ? 'Bottom' : 'Top'}`)
+        if (tap) toast('Tap!', toastConfig)
+        if (swipeX) toast(`Swipe ${swipeX > 0 ? 'Right' : 'Left'}`, toastConfig)
+        if (swipeY) toast(`Swipe ${swipeY > 0 ? 'Bottom' : 'Top'}`, toastConfig)
         document.body.classList.toggle('dragged', active)
 
         if (active) {