Property 'onswipe' does not exist on type 'HTMLProps<HTMLDivElement>'

[pzuraq]

Getting this error in a SvelteKit/TypeScript project with the following usage:

<div
    use:swipe={{ timeframe: 300, minSwipeDistance: 60, touchAction: 'pan-y' }}
    on:swipe={(e) => rotateCarousel(e.detail.direction === 'right' ? 'left' : 'right')}
  >

I had to add this to my global.d.ts to fix it:

declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onswipe?: (event: CustomEvent<DndEvent> & { target: EventTarget & T }) => void;
  }
}

Is there a better way to do this? If not, should this be documented?

[Rezi]

Hi Chris, you are right. I have added JSX definitions of actions to let the language tools recognise a return type. Unfortunately the language tools read the types for templates from global TS types. And regular npm package cannot expose global types (for a good reason). I added these definitions anyway and exposed them as global from the package. The only thing needed now is to reexpose them from your project (as only the top package can really tell what is global) Once you install svelte-gestures. 1.3.7, you can remove your addition from global.d.ts and replace it with /// <reference types="svelte-gestures" /> just beware that this line of code must be very first in your global.d.ts file. Or straight after similar line :) It contains types for all of the gestures. Now when I get it working I'll add it to the documentation as well

Thanks for reporting ;)

Rezi

[pzuraq]

Sounds good, thanks for the quick response!