chore: Port code to TypeScript

Author: vincent-zelty

package-lock.json

@@ -11,8 +11,13 @@
 		"action",
 		"javascript"
 	],
-	"repository": "https://github.com/untemps/svelte-use-tooltip.git",
-	"bugs": "https://github.com/untemps/svelte-use-tooltip/issues",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/untemps/svelte-use-tooltip.git"
+	},
+	"bugs": {
+		"url": "https://github.com/untemps/svelte-use-tooltip/issues"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
@@ -26,6 +31,7 @@
 	],
 	"exports": {
 		".": {
+			"types": "./dist/types/index.d.ts",
 			"svelte": "./dist/index.js"
 		}
 	},
@@ -44,6 +50,7 @@
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
 		"@testing-library/svelte": "^5.2.6",
+		"@types/node": "^22.10.1",
 		"@vitest/coverage-v8": "^2.1.6",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
@@ -55,8 +62,9 @@
 		"publint": "^0.2.0",
 		"semantic-release": "^24.2.0",
 		"svelte": "^5.0.0",
-		"typescript": "^5.3.2",
+		"typescript": "^5.7.2",
 		"vite": "^5.0.11",
+		"vite-plugin-dts": "^4.3.0",
 		"vitest": "^2.0.4"
 	},
 	"dependencies": {

package.json

@@ -1,34 +1,50 @@
 import { DOMObserver } from '@untemps/dom-observer';
 import { standby } from '@untemps/utils/async/standby';
 
+interface ContentAction {
+	eventType: string;
+	callback?: (...args: any[]) => void;
+	callbackParams?: any[];
+	closeOnCallback?: boolean;
+}
+
+interface ContentActions {
+	[key: string]: ContentAction;
+}
+
+interface EventListener {
+	trigger: HTMLElement;
+	eventType: string;
+	listener: (event: Event) => void;
+}
+
 class Tooltip {
-	static #instances = [];
-
-	#tooltip = null;
-
-	#target = null;
-	#content = null;
-	#contentSelector = null;
-	#contentActions = null;
-	#containerClassName = null;
-	#position = null;
-	#animated = false;
-	#animationEnterClassName = null;
-	#animationLeaveClassName = null;
-	#enterDelay = 0;
-	#leaveDelay = 0;
-	#onEnter = null;
-	#onLeave = null;
-	#offset = 10;
-
-	#observer = null;
-	#events = [];
-	#delay = null;
-	#transitioning = false;
-
-	#boundEnterHandler = null;
-	#boundLeaveHandler = null;
-	#boundWindowChangeHandler = null;
+	static #instances: Tooltip[] = [];
+
+	#tooltip: HTMLDivElement | null = null;
+	#target: HTMLElement;
+	#content: string | null;
+	#contentSelector: string | null;
+	#contentActions: ContentActions | null;
+	#containerClassName: string | null;
+	#position: 'top' | 'bottom' | 'left' | 'right';
+	#animated: boolean;
+	#animationEnterClassName: string;
+	#animationLeaveClassName: string;
+	#enterDelay: number;
+	#leaveDelay: number;
+	#onEnter: (() => void) | null;
+	#onLeave: (() => void) | null;
+	#offset: number;
+
+	#observer: typeof DOMObserver | null;
+	#events: EventListener[] = [];
+	#delay: NodeJS.Timeout | null = null;
+	#transitioning: boolean = false;
+
+	#boundEnterHandler: ((e: Event) => void) | null = null;
+	#boundLeaveHandler: ((e: Event) => void) | null = null;
+	#boundWindowChangeHandler: ((e: Event) => void) | null = null;
 
 	static destroy() {
 		Tooltip.#instances.forEach((instance) => {

src/lib/Tooltip.js renamed to src/lib/Tooltip.ts

@@ -1 +1,2 @@
 export { default as useTooltip } from './useTooltip';
+export type { TooltipOptions } from './types';

src/lib/index.js renamed to src/lib/index.ts

@@ -0,0 +1,23 @@
+export interface TooltipOptions {
+  content?: string;
+  contentSelector?: string;
+  contentActions?: {
+    [key: string]: {
+      eventType: string;
+      callback?: (...args: any[]) => void;
+      callbackParams?: any[];
+      closeOnCallback?: boolean;
+    };
+  };
+  containerClassName?: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  animated?: boolean;
+  animationEnterClassName?: string;
+  animationLeaveClassName?: string;
+  enterDelay?: number;
+  leaveDelay?: number;
+  onEnter?: () => void;
+  onLeave?: () => void;
+  offset?: number;
+  disabled?: boolean;
+}

src/lib/types/index.ts

@@ -0,0 +1,47 @@
+import Tooltip from './Tooltip';
+import type { TooltipOptions } from './types';
+
+import './useTooltip.css';
+
+const useTooltip = (node: HTMLElement, options: TooltipOptions) => {
+	const tooltip = new Tooltip(
+		node,
+		options.content,
+		options.contentSelector,
+		options.contentActions,
+		options.containerClassName,
+		options.position,
+		options.animated,
+		options.animationEnterClassName,
+		options.animationLeaveClassName,
+		options.enterDelay,
+		options.leaveDelay,
+		options.onEnter,
+		options.onLeave,
+		options.offset,
+		options.disabled
+	);
+
+	return {
+		update: (newOptions: TooltipOptions) =>
+			tooltip.update(
+				newOptions.content,
+				newOptions.contentSelector,
+				newOptions.contentActions,
+				newOptions.containerClassName,
+				newOptions.position,
+				newOptions.animated,
+				newOptions.animationEnterClassName,
+				newOptions.animationLeaveClassName,
+				newOptions.enterDelay,
+				newOptions.leaveDelay,
+				newOptions.onEnter,
+				newOptions.onLeave,
+				newOptions.offset,
+				newOptions.disabled
+			),
+		destroy: () => tooltip.destroy()
+	};
+};
+
+export default useTooltip;

src/lib/useTooltip.js

@@ -0,0 +1,7 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"declaration": true,
+		"declarationDir": "./dist/types"
+	}
+}