feat(clickoutside): ambient types for extended attributes

Author: Quang Phan

.changeset/nervous-timers-refuse.md

@@ -0,0 +1,5 @@
+---
+"@svelte-put/clickoutside": patch
+---
+
+provide automatic ambient types for extended attributes

apps/svelte-kit/src/app.d.ts

@@ -15,21 +15,7 @@ declare namespace App {
 }
 
 declare namespace svelte.JSX {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  type EventHandler<E = Event, T = HTMLElement> = (event: E & { target: EventTarget & T }) => any;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
-  type CustomEventHandler<T, D = any> = EventHandler<CustomEvent<D>, T>;
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unused-vars
-  type HTMLAttrs<T> = {
-    [key in keyof EventList as `on${key}`]?: CustomEventHandler<T, EventList[key]>;
-  };
-
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars
-  interface HTMLAttributes<T> {
-    // on:clickoutside
-    onclickoutside?: (event: CustomEvent<MouseEvent>) => void;
+  export interface HTMLAttributes {
     // on:movablestart
     onmovablestart?: (
       event: CustomEvent<import('@svelte-put/movable').MovableEventDetails>,
@@ -44,5 +30,3 @@ declare namespace svelte.JSX {
     ontoc?: (event: CustomEvent<import('@svelte-put/toc').TocEventDetails>) => void;
   }
 }
-
-declare module '*.svelte';

packages/actions/clickoutside/README.md

@@ -56,6 +56,27 @@ See [examples here](https://github.com/vnphanquang/svelte-put/blob/main/packages
 
 ### Typescript support
 
+Ambient types for `on:clickoutside` should be available automatically when `clickoutside` is imported
+
+<details open>
+  <summary> show / hide </summary>
+
+```html
+ <script lang="ts">
+    import { clickoutside } from '@svelte-put/clickoutside';
+ </script>
+
+ <!-- on:clickoutside should be typed -->
+ <div
+   use:clickoutside
+   on:clickoutside
+ />
+```
+
+</details>
+
+If the above is not working, fall back to this:
+
 <details open>
   <summary> app.d.ts: show / hide </summary>
 

packages/actions/clickoutside/src/clickoutside.ts

@@ -1,24 +1,12 @@
-/**
- * Limit to which the click event will trigger `clickoutside`
- * @public
- *
- * @remarks
- * Currently only the parent option is supported
- */
-export interface ClickOutsideLimit {
-  /** Click event beyond the `boundingRect` of this parent node will not trigger `clickoutside` */
-  parent: HTMLElement;
-}
+import { ClickOutsideAttributes, ClickOutsideParameters } from './clickoutside.types';
 
-/**
- * svelte action parameters to config behavior of `clickoutside`
- * @public
- */
-export interface ClickOutsideParameters {
-  /** whether to activate the action. Default to `true` */
-  enabled: boolean;
-  /** limit to which the click event will trigger `clickoutside` */
-  limit?: ClickOutsideLimit;
+// ambient typing
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  export namespace svelte.JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    export interface HTMLAttributes extends ClickOutsideAttributes {}
+  }
 }
 
 /**

packages/actions/clickoutside/src/clickoutside.types.ts

@@ -0,0 +1,46 @@
+/**
+ * Additional attributes extended from `svelte-put/clickoutside`
+ * @public
+ *
+ * @remarks
+ * The ambient types for these extended attributes should be available automatically
+ * whenever `svelte-put/clickoutside` is imported.
+ *
+ * ```html
+ * <script lang="ts">
+ *   import { clickoutside } from '@svelte-put/clickoutside';
+ * </script>
+ *
+ * <!-- on:clickoutside should be typed -->
+ * <div
+ *   use:clickoutside
+ *   on:clickoutside
+ * />
+ * ```
+ */
+export interface ClickOutsideAttributes {
+  onclickoutside?: (event: CustomEvent<MouseEvent>) => void; // on:clickoutside
+}
+
+/**
+ * Limit to which the click event will trigger `clickoutside`
+ * @public
+ *
+ * @remarks
+ * Currently only the parent option is supported
+ */
+export interface ClickOutsideLimit {
+  /** Click event beyond the `boundingRect` of this parent node will not trigger `clickoutside` */
+  parent: HTMLElement;
+}
+
+/**
+ * svelte action parameters to config behavior of `clickoutside`
+ * @public
+ */
+export interface ClickOutsideParameters {
+  /** whether to activate the action. Default to `true` */
+  enabled: boolean;
+  /** limit to which the click event will trigger `clickoutside` */
+  limit?: ClickOutsideLimit;
+}

packages/actions/clickoutside/src/index.ts

@@ -7,3 +7,4 @@
  */
 
 export * from './clickoutside';
+export * from './clickoutside.types';