Support for svelte 5?

[baseplate-admin]

Hi i have a code that looks like this:

<div use:swipe on:swipe={()=>{}}></div>

It raises this error:

Using on:swipe to listen to the swipe event is is deprecated. Use the event attribute onswipe instead.

If i do this:

<div onswipe={()=>{}}></div>

It shows this error

Object literal may only specify known properties, and '"onswipe"' does not exist in type 'Omit<HTMLAttributes<HTMLDivElement>, keyof HTMLAttributes<any>> & HTMLAttributes<any>'.

[Rezi]

Hi, thank you for the report. I am aware of this issue. It is very likely to be an issue in version 5, but since it has not been officially released yet, I prefer not to modify it until it is finalized. Who knows, maybe it will be released tomorrow! Once it is officially released, I promise to address it. Until then, you'll have to manage with the deprecation warning. Let's keep the issue opened

[baseplate-admin]

Hi,

As of today, this package is no longer usable with svelte 5.

C:/Programming/coreproject-v4-ui/src/routes/anime/+page.svelte:118:3 Mixing old (on:swipe) and new syntaxes for event handling is not allowed. Use only the onswipe syntax.

I think it is time to move this issue.

Linked PR:

• https://github.com/sveltejs/svelte/pull/11295
• https://github.com/sveltejs/svelte/issues/11262
• https://github.com/sveltejs/svelte/pull/11335

[Rezi]

Svelte 5 is not supported in svelte-gestures 5

[baseplate-admin]

Hey @Rezi,

https://github.com/Rezi/svelte-gestures?tab=readme-ov-file#language-tools-types-installation-optional

This section is not valid anymore. There's no global.d.ts file in src directory at the time of writing.

[PatrickG]

@baseplate-admin Putting it in in src/app.d.ts should work as well. The .d.ts file name does not really matter

[baseplate-admin]

@baseplate-admin Putting it in in src/app.d.ts should work as well.

Hi, i am aware of this. But i think updating it in the README.md is better.

---

As for support with svelte v5, i get this error

[madeleineostoja]

Also erroring out for me using svelte 5, I don't see how it can support on{gesture} props on a native element, wouldn't we need to pass event callbacks to the action directly?

[Rezi]

The way how global namespace is declared has changed over time. Unfortunately without notice to developers. And it was quite difficult to find what need to be changed. New version of svelte-gestures (5.0.3) now use the new way and it should finally support the new syntax as well. However I still see that some older svelte5 projects, generated like 1year ago does not support the new global namespace integration, and I was not able to find what need to be adjusted in the project to make it running. Upgrade to newer 5.0.0-next. does not help. The issue seems to be in some missing setting in some of the tsconfigs of the svelte project, but I was not able to find what need to be changed. When you generate new svelte5 or even svelte 4.2 the new svelte-gestures 5.0.3 should work as expected. (no need to reference svelte-gesture types in any of yours d.ts files )

[madeleineostoja]

How does svelte gesture register custom on{gesture} callbacks on native elements? That’s not just a typings thing right?

[Rezi]

At the very end there is an example of a custom gesture and how to use it. You just need to add extra global typing in order to your app understands those custom attribute event type. If you use svelte-kit, there is an app.d.ts in your src folder. It looks like this by default:

// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
    namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface PageState {}
        // interface Platform {}
    }
}

export {};

You need to modify it like this:

declare global {
    namespace App {
        // interface Error {}
        // interface Locals {}
        // interface PageData {}
        // interface PageState {}
        // interface Platform {}
    }

    namespace svelteHTML {
        interface HTMLAttributes {
            ondoubletap?: (event: CustomEvent<{ x: number; y: number }>) => void;
            'on:doubletap'?: (event: CustomEvent<{ x: number; y: number }>) => void;
        }
    }
}

export {};