fix(types): update TypeScript definitions for Svelte 4 compatibility

metonym · May 15, 2024 · f308d9e · f308d9e
1 parent 3cc2c78
commit f308d9e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/src/Pincode.svelte.d.ts b/src/Pincode.svelte.d.ts
@@ -1,9 +1,11 @@
-/// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
 export type Code = string[];
 
-export interface PincodeProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+type RestProps = SvelteHTMLElements["div"];
+
+export interface PincodeProps extends RestProps {
   /**
    * @default []
    */
@@ -29,6 +31,8 @@ export interface PincodeProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNa
    * @default false
    */
   selectTextOnFocus?: boolean;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class Pincode extends SvelteComponentTyped<
@@ -39,7 +43,9 @@ export default class Pincode extends SvelteComponentTyped<
   },
   { default: {} }
 > {
-  focusFirstInput?: () => void;
-  focusNextEmptyInput?: () => void;
-  focusLastInput?: () => void;
+  focusFirstInput: () => void;
+
+  focusNextEmptyInput: () => void;
+
+  focusLastInput: () => void;
 }
diff --git a/src/PincodeInput.svelte.d.ts b/src/PincodeInput.svelte.d.ts
@@ -1,7 +1,9 @@
-/// <reference types="svelte" />
-import { SvelteComponentTyped } from "svelte";
+import type { SvelteComponentTyped } from "svelte";
+import type { SvelteHTMLElements } from "svelte/elements";
 
-export interface PincodeInputProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
+type RestProps = SvelteHTMLElements["input"];
+
+export interface PincodeInputProps extends RestProps {
   /**
    * @default ""
    */
@@ -16,10 +18,16 @@ export interface PincodeInputProps extends svelte.JSX.HTMLAttributes<HTMLElement
    * @default null
    */
   ref?: null | HTMLInputElement;
+
+  [key: `data-${string}`]: any;
 }
 
 export default class PincodeInput extends SvelteComponentTyped<
   PincodeInputProps,
-  { focus: WindowEventMap["focus"]; blur: WindowEventMap["blur"]; keydown: WindowEventMap["keydown"] },
+  {
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    keydown: WindowEventMap["keydown"];
+  },
   {}
 > {}
diff --git a/test/Pincode.test.svelte b/test/Pincode.test.svelte
@@ -17,9 +17,9 @@
   $: error = complete && !success;
 
   onMount(() => {
-    ref.focusFirstInput?.();
-    ref.focusNextEmptyInput?.();
-    ref.focusLastInput?.();
+    ref.focusFirstInput();
+    ref.focusNextEmptyInput();
+    ref.focusLastInput();
   });
 </script>