uNmAnNeR / imaskjs

vanilla javascript input mask
https://imask.js.org
MIT License
4.85k stars 248 forks source link

Svelte plugin on:accept on:complete not recognized #1052

Open GimpMaster opened 1 week ago

GimpMaster commented 1 week ago

Describe the bug I'm using svelte with svelte-check and eslint rules. The example svelte plugin shows this

<input {value} use:imask={options} on:accept={accept} on:complete={complete}

However the standard input doesn't actually have on:accept and gives an error of the following:

Object literal may only specify known properties, and '"on:accept"' does not exist in type 'Omit<HTMLInputAttributes, keyof HTMLAttributes> & HTMLAttributes'.ts(2353)

To Reproduce Create a svelte 4.2.18 project and try to use this plugin

Expected behavior Since the input is a true html input I think the best solution is to add createEventDispatchers(). However with svelte 5 right around the corner maybe its jsut call backs

Environment:

GimpMaster commented 1 week ago

I dove a little deeper. It seems like it would be good to update the use:action for svelte to include a return type as described here

https://stackoverflow.com/questions/75374136/how-to-add-types-to-custom-events-in-svelte-actions-and-use-directive

Such as

export function imask(node: HTMLFormElement, { schema }: SubmitConfig): ActionReturn<SubmitConfig, Attributes> {
  ...
}

And then you can define Attributes that adds on the custom events like this

interface Attributes {
    'on:accept': (e: CustomEvent) => void;
    'on:complete': (e: CustomEvent) => void;
}

A work around I found is to modify the app.d.ts and basically allow for ALL html elements to have this custom event like this

app.d.ts

// 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 {}
    }
    namespace svelteHTML { // <--- add this
        interface HTMLAttributes {
            'on:accept'?: (event: CustomEvent) => void;
            'on:complete'?: (event: CustomEvent) => void;
        }
    }
}

export {};

With this change I don't get any errors in typescript or eslint or svelte-check. Still the proposed solution would be better IMHO.