refactor(types): update typescript config and add/updare typescript defs

Author: dysfunc

.lintstagedrc

@@ -1,5 +1,6 @@
 {
-  "./src/**/*.{test.js,js,json,svelte}": [
+  "./src/**/*.{test.js,ts,json,svelte}": [
+    "svelte-check --tsconfig ./tsconfig.json",
     "eslint -c ./.eslintrc.json --fix",
     "prettier --write"
   ]

.prettierrc.json

@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 80,
   "trailingComma": "none",
   "tabWidth": 2,
   "semi": true,

src/tooltip.svelte.d.ts renamed to src/action-tooltip.d.ts

@@ -1,6 +1,6 @@
-import type { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 
-export interface ComponentProps {
+export interface TooltipActionProps {
   /**
    * The action to trigger the tooltip
    * @default 'hover'
@@ -19,12 +19,6 @@ export interface ComponentProps {
    */
   animation?: string;
 
-  /**
-   * The animation's delay of the tooltip.
-   * @default 200
-   */
-  delay?: number;
-
   /**
    * Whether to show the arrow of the tooltip.
    * @default true
@@ -43,6 +37,19 @@ export interface ComponentProps {
    */
   content?: string;
 
+  /**
+   * The animation's delay of the tooltip.
+   * @default 200
+   */
+  delay?: number;
+
+  /**
+   * Whether to hide the tooltip when clicking outside.
+   * Only works when action is set to 'click'.
+   * @default false
+   */
+  hideOnClickOutside?: boolean;
+
   /**
    * The maximum width of the tooltip.
    * @default 200
@@ -67,15 +74,27 @@ export interface ComponentProps {
    */
   style?: undefined;
 
+  /**
+   * The target element to bind the tooltip to.
+   * @default null
+   */
+  targetElement?: HTMLElement | null;
+
   /**
    * The theme of the tooltip.
    * @default ''
    */
   theme?: string;
 }
 
-export default class Component extends SvelteComponentTyped<
-  ComponentProps,
-  Record<string, any>,
-  { default: {} }
+export interface TooltipActionEvents {}
+
+export interface TooltipActionSlots {
+  default: {};
+}
+
+export default class TooltipAction extends SvelteComponent<
+  TooltipActionProps,
+  TooltipActionEvents,
+  TooltipActionSlots
 > {}

src/action.d.ts

@@ -0,0 +1,14 @@
+import Tooltip from './action/action-tooltip.svelte';
+
+interface TooltipProps {
+  [key: string]: any;
+}
+
+interface TooltipActions {
+  destroy(): void;
+}
+
+export function tooltip(
+  element: HTMLElement,
+  props: TooltipProps
+): TooltipActions;

src/helpers.d.ts

@@ -0,0 +1,29 @@
+export declare function formatVariableKey(str: string): string;
+
+export declare function getMinWidth(
+  element: HTMLElement,
+  maxWidth: number
+): number;
+
+export declare function isElementInViewport(
+  element: HTMLElement,
+  container?: HTMLElement | null,
+  position?: string
+): boolean;
+
+interface TooltipCoords {
+  top: number;
+  left: number;
+}
+
+export declare function computeTooltipPosition(
+  containerRef: HTMLElement | null,
+  tooltipRef: HTMLElement | null,
+  position: string,
+  coords: TooltipCoords
+): TooltipCoords;
+
+export declare function onClickOutside(
+  node: HTMLElement,
+  callback: () => void
+): { destroy: () => void };

src/action-tooltip.svelte.d.ts renamed to src/tooltip.d.ts

@@ -1,6 +1,6 @@
-import type { SvelteComponentTyped } from 'svelte';
+import { SvelteComponent } from 'svelte';
 
-export interface ComponentProps {
+export interface TooltipProps {
   /**
    * The action to trigger the tooltip
    * @default 'hover'
@@ -19,12 +19,6 @@ export interface ComponentProps {
    */
   animation?: string;
 
-  /**
-   * The animation's delay of the tooltip.
-   * @default 200
-   */
-  delay?: number;
-
   /**
    * Whether to show the arrow of the tooltip.
    * @default true
@@ -43,6 +37,19 @@ export interface ComponentProps {
    */
   content?: string;
 
+  /**
+   * The animation's delay of the tooltip.
+   * @default 200
+   */
+  delay?: number;
+
+  /**
+   * Whether to hide the tooltip when clicking outside.
+   * Only works when action is set to 'click'.
+   * @default false
+   */
+  hideOnClickOutside?: boolean;
+
   /**
    * The maximum width of the tooltip.
    * @default 200
@@ -67,21 +74,21 @@ export interface ComponentProps {
    */
   style?: undefined;
 
-  /**
-   * The target element to bind the tooltip to.
-   * @default null
-   */
-  targetElement?: HTMLElement | null,
-
   /**
    * The theme of the tooltip.
    * @default ''
    */
   theme?: string;
 }
 
-export default class Component extends SvelteComponentTyped<
-  ComponentProps,
-  Record<string, any>,
-  { default: {} }
+export interface TooltipEvents {}
+
+export interface TooltipSlots {
+  default: {};
+}
+
+export default class Tooltip extends SvelteComponent<
+  TooltipProps,
+  TooltipEvents,
+  TooltipSlots
 > {}

svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+  preprocess: vitePreprocess()
+};

tsconfig.json

@@ -1,18 +1,16 @@
 {
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["node_modules/*", "src/**/*.js", "src/**/*.test.js"],
   "compilerOptions": {
+    "baseUrl": ".",
+    "moduleResolution": "node",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "ignoreDeprecations": "5.0",
     "importsNotUsedAsValues": "error",
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "moduleResolution": "node",
+    "sourceMap": true,
     "strict": true,
-    "types": ["svelte"],
-    "paths": {
-      "@svelte-plugins/tooltips": ["./src"],
-      "@svelte-plugins/tooltips/*": ["./src/*"]
-    }
-  },
-  "include": ["src"]
+    "types": ["svelte"]
+  }
 }