Skip to content

fix: svelte gesture dep usage #365

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.

Sign up for GitHub

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

Closed
sosweetham wants to merge 2 commits into from
Closed

fix: svelte gesture dep usage #365

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c0230c4
fix: svelte gesture dep usage
sosweetham Oct 14, 2025
64ebfcb
fix: update lockfile
sosweetham Oct 14, 2025
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
2 changes: 0 additions & 2 deletions platforms/pictique/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,7 @@
"vite": "^6.2.6"
},
"dependencies": {
"-": "^0.0.1",
"@sveltejs/adapter-node": "^5.2.12",
"D": "^1.0.0",
"axios": "^1.6.7",
"moment": "^2.30.1",
"svelte-qrcode": "^1.0.1",
Expand Down
26 changes: 14 additions & 12 deletions platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
import { CupertinoPane } from 'cupertino-pane';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils';
import { swipe } from 'svelte-gestures';
import type { SwipeCustomEvent } from 'svelte-gestures';
import { useSwipe, type GestureCustomEvent, type SwipeCustomEvent } from 'svelte-gestures';
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove unused type imports.

GestureCustomEvent and SwipeCustomEvent are imported but not referenced anywhere in the code.

Apply this diff to remove the unused imports:

-	import { useSwipe, type GestureCustomEvent, type SwipeCustomEvent } from 'svelte-gestures';
+	import { useSwipe } from 'svelte-gestures';
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { useSwipe, type GestureCustomEvent, type SwipeCustomEvent } from 'svelte-gestures';
import { useSwipe } from 'svelte-gestures';
🤖 Prompt for AI Agents 
In platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte around line 6, the
import currently brings in unused type symbols GestureCustomEvent and
SwipeCustomEvent; remove those unused type imports so the line only imports
useSwipe (and any other actually used exports) to eliminate dead imports and
TypeScript lint warnings.


interface IDrawerProps extends HTMLAttributes<HTMLDivElement> {
drawer?: CupertinoPane;
Expand All @@ -19,11 +18,9 @@
if (drawer) drawer.destroy({ animate: true });
}

const handleDrawerSwipe = (event: SwipeCustomEvent) => {
if (event.detail.direction === ('down' as string)) {
drawer?.destroy({ animate: true });
}
};
function downSwipeHandler() {
drawer?.destroy({ animate: true });
}

onMount(() => {
if (!drawerElement) return;
Expand All @@ -48,11 +45,16 @@
<div
bind:this={drawerElement}
{...restProps}
use:swipe={() => ({
timeframe: 300,
minSwipeDistance: 60
})}
onswipe={handleDrawerSwipe}
{...useSwipe(
() => {},
() => ({
timeframe: 300,
minSwipeDistance: 60
}),
{
onswipedown: downSwipeHandler
}
)}
Comment on lines +48 to +57
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Verify the useSwipe API usage pattern.

The useSwipe call has an empty first parameter () => {} and wraps the configuration in a function. Confirm this matches the svelte-gestures API documentation for correct usage.

Please search the web to verify the correct useSwipe API signature:

🌐 Web query:

svelte-gestures useSwipe API documentation and usage examples

💡 Result:

Summary — useSwipe (svelte-gestures)

  • Import:
    import { useSwipe, type SwipeCustomEvent, type GestureCustomEvent } from 'svelte-gestures'. [1][2]

  • Hook signature / usage pattern:
    Spread the action result onto an element: {...useSwipe(handler, () => (options))}. The first arg is your event handler (receives a SwipeCustomEvent); second is a function that returns options. Example below. [1]

  • Events & detail payload:

    • Main event: "swipe" — event.detail contains at least: direction (string: 'left'|'right'|'up'|'down'), pointerType, target (HTMLElement). There are also per-phase events like swipeup / swiperight / swipedown / swipeleft and gesture-phase events with names like swipeup, swipedown, swipemove that carry GestureCustomEvent payload (includes native pointer event, pointersCount, x, y, target). [2][1]

  • Common options (examples shown in README):

    • timeframe: number (ms) — window in which movement counts as swipe.
    • minSwipeDistance (or minSwipe): number (px) — minimum distance required to trigger swipe.
    • touchAction: CSS touch-action to set on the element (e.g. 'none').
      (Options are passed via the options function you give to useSwipe.) [1][2]

Minimal example

<script lang="ts"> import { useSwipe, type SwipeCustomEvent } from 'svelte-gestures'; let dir: string | null = null; function handler(e: SwipeCustomEvent) { dir = e.detail.direction; // e.detail.pointerType, e.detail.target available } </script>
({ timeframe: 300, minSwipeDistance: 50, touchAction: 'none' }))}>
swipe direction: {dir}

References

  • svelte-gestures usage & useSwipe example (README / package docs). [1]
  • svelte-gestures npm page (API events, options notes). [2]

[1] svelte-gestures README / docs (usage example).
[2] svelte-gestures — npm package page (API events & options).

Remove unsupported third argument from useSwipe
In platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte (lines 48–57), call useSwipe(handler, () => options) only; move onswipedown={downSwipeHandler} into the element’s markup (e.g. <div on:swipedown={downSwipeHandler} {...useSwipe(...)}>).

🤖 Prompt for AI Agents 
In platforms/pictique/src/lib/fragments/Drawer/Drawer.svelte around lines 48–57
the call to useSwipe incorrectly passes a third argument for onswipedown
(unsupported); change the invocation to useSwipe(() => {}, () => ({ timeframe:
300, minSwipeDistance: 60 })) and remove the third argument, then attach the
downSwipeHandler directly on the element that spreads useSwipe (e.g. add
on:swipedown={downSwipeHandler} to the wrapper div or the element receiving the
swipe directives) so the handler is invoked via Svelte event binding.

class={cn(restProps.class)}
>
<div class="h-[100%] overflow-y-scroll">
Expand Down
17 changes: 0 additions & 17 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading