feat(intersect): ambient types for extended attributes

Author: Quang Phan

.changeset/fuzzy-phones-end.md

@@ -0,0 +1,5 @@
+---
+"@svelte-put/intersect": patch
+---
+
+provide ambient typings for custom events

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

@@ -22,10 +22,6 @@ declare namespace svelte.JSX {
     ) => void;
     // on:movableend
     onmovableend?: (event: CustomEvent<import('@svelte-put/movable').MovableEventDetails>) => void;
-    // on:intersect
-    onintersect?: (event: CustomEvent<import('@svelte-put/intersect').IntersectDetail>) => void;
-    // on:intersectonce
-    onintersectonce?: (event: CustomEvent<import('@svelte-put/intersect').IntersectDetail>) => void;
     // on:toc
     ontoc?: (event: CustomEvent<import('@svelte-put/toc').TocEventDetails>) => void;
   }

packages/actions/clickoutside/README.md

@@ -56,7 +56,7 @@ 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
+Ambient types for custom events should be available automatically where `clickoutside` is imported.
 
 <details open>
   <summary> show / hide </summary>

packages/actions/intersect/README.md

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

packages/actions/intersect/src/index.ts

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

packages/actions/intersect/src/intersect.ts

@@ -1,27 +1,12 @@
-/**
- * svelte action parameters to config behavior of `movable`
- * @public
- *
- * @remarks
- *
- * parameters for `intersect` extends {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver | IntersectionObserverInit }
- * (second parameter passed to IntersectionObserver constructor)
- */
-export interface IntersectParameters extends IntersectionObserverInit {
-  /** whether to activate the action. Default to `true` */
-  enabled?: boolean;
-}
+import { IntersectAttributes, IntersectDetail, IntersectParameters } from './intersect.types';
 
-/**
- * `detail` payload for `intersect` and `intersectonce` CustomEvent
- * @public
- * ```
- */
-export interface IntersectDetail {
-  /** the IntersectionObserver itself */
-  readonly observer: IntersectionObserver;
-  /** list of IntersectionObserverEntry passed from IntersectionObserver callback */
-  readonly entries: IntersectionObserverEntry[];
+// 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 IntersectAttributes {}
+  }
 }
 
 /**

packages/actions/intersect/src/intersect.types.ts

@@ -0,0 +1,51 @@
+/**
+ * Additional attributes extended from `svelte-put/intersect`
+ * @public
+ *
+ * @remarks
+ * The ambient types for these extended attributes should be available automatically
+ * whenever `svelte-put/intersect` is imported.
+ *
+ * ```html
+ * <script lang="ts">
+ *   import { intersect } from '@svelte-put/intersect';
+ * </script>
+ *
+ * <!-- on:intersect, on:intersectonce should be typed -->
+ * <div
+ *   use:intersect
+ *   on:intersect
+ *   on:intersectonce
+ * />
+ * ```
+ */
+export interface IntersectAttributes {
+  onintersect?: (event: CustomEvent<IntersectDetail>) => void; // on:intersect
+  onintersectonce?: (event: CustomEvent<IntersectDetail>) => void; // on:intersectonce
+}
+
+/**
+ * svelte action parameters to config behavior of `movable`
+ * @public
+ *
+ * @remarks
+ *
+ * parameters for `intersect` extends {@link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver | IntersectionObserverInit }
+ * (second parameter passed to IntersectionObserver constructor)
+ */
+export interface IntersectParameters extends IntersectionObserverInit {
+  /** whether to activate the action. Default to `true` */
+  enabled?: boolean;
+}
+
+/**
+ * `detail` payload for `intersect` and `intersectonce` CustomEvent
+ * @public
+ * ```
+ */
+export interface IntersectDetail {
+  /** the IntersectionObserver itself */
+  readonly observer: IntersectionObserver;
+  /** list of IntersectionObserverEntry passed from IntersectionObserver callback */
+  readonly entries: IntersectionObserverEntry[];
+}