chore: remove action ambient typing in favor of new typing helper - s…

…veltejs/svelte#7805
vnphanquang · Dec 30, 2022 · 64283e1 · 64283e1
1 parent ba28b3b
commit 64283e1
Show file tree

Hide file tree

Showing 37 changed files with 183 additions and 287 deletions.
diff --git a/.changeset/hungry-taxis-develop.md b/.changeset/hungry-taxis-develop.md
@@ -0,0 +1,9 @@
+---
+'@svelte-put/clickoutside': minor
+'@svelte-put/dragscroll': minor
+'@svelte-put/intersect': minor
+'@svelte-put/movable': minor
+'@svelte-put/shortcut': minor
+---
+
+deprecate global ambient typing in favor of the [new action typings helper](https://github.com/sveltejs/svelte/pull/7805/files)
diff --git a/packages/actions/clickoutside/api/clickoutside.api.md b/packages/actions/clickoutside/api/clickoutside.api.md
@@ -3,19 +3,19 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+import type { Action } from 'svelte/action';
+
 // @public
-export function clickoutside(
-  node: HTMLElement,
-  parameters?: Partial<ClickOutsideParameters>,
-): {
-  update(update: ClickOutsideParameters): void;
-  destroy(): void;
-};
+export const clickoutside: Action<
+  HTMLElement,
+  Partial<ClickOutsideParameters>,
+  ClickOutsideAttributes
+>;
 
 // @public
 export interface ClickOutsideAttributes {
   // (undocumented)
-  onclickoutside?: (event: CustomEvent<Event>) => void;
+  'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => void;
 }
 
 // @public

diff --git a/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md b/packages/actions/clickoutside/api/docs/clickoutside.clickoutside.md
@@ -2,33 +2,16 @@
 
 [Home](./index.md) &gt; [@svelte-put/clickoutside](./clickoutside.md) &gt; [clickoutside](./clickoutside.clickoutside.md)
 
-## clickoutside() function
+## clickoutside variable
 
 Dispatch a `clickoutside` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node
 
 <b>Signature:</b>
 
 ```typescript
-export declare function clickoutside(
-  node: HTMLElement,
-  parameters?: Partial<ClickOutsideParameters>,
-): {
-  update(update: ClickOutsideParameters): void;
-  destroy(): void;
-};
+clickoutside: Action<HTMLElement, Partial<ClickOutsideParameters>, ClickOutsideAttributes>;
 ```
 
-## Parameters
-
-| Parameter  | Type                                                                                      | Description                                                                           |
-| ---------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| node       | HTMLElement                                                                               | node outside of which <code>click</code> event will trigger <code>clickoutside</code> |
-| parameters | Partial&lt;[ClickOutsideParameters](./clickoutside.clickoutsideparameters.md)<!-- -->&gt; | <i>(Optional)</i> instructions for <code>clickoutside</code> behavior                 |
-
-<b>Returns:</b>
-
-{ update(update: [ClickOutsideParameters](./clickoutside.clickoutsideparameters.md)<!-- -->): void; destroy(): void; }
-
 ## Remarks
 
 As with any svelte action, `clickoutside` should be use with element and not component.

diff --git a/....clickoutsideattributes.onclickoutside.md → ...ickoutsideattributes._on_clickoutside_.md b/....clickoutsideattributes.onclickoutside.md → ...ickoutsideattributes._on_clickoutside_.md
@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@svelte-put/clickoutside](./clickoutside.md) &gt; [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) &gt; [onclickoutside](./clickoutside.clickoutsideattributes.onclickoutside.md)
+[Home](./index.md) &gt; [@svelte-put/clickoutside](./clickoutside.md) &gt; [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) &gt; ["on:clickoutside"](./clickoutside.clickoutsideattributes._on_clickoutside_.md)
 
-## ClickOutsideAttributes.onclickoutside property
+## ClickOutsideAttributes."on:clickoutside" property
 
 <b>Signature:</b>
 
 ```typescript
-onclickoutside?: (event: CustomEvent<Event>) => void;
+'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => void;
 ```
diff --git a/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md b/packages/actions/clickoutside/api/docs/clickoutside.clickoutsideattributes.md
@@ -27,6 +27,6 @@ The ambient types for these extended attributes should be available automaticall
 
 ## Properties
 
-| Property                                                                   | Modifiers | Type                                         | Description       |
-| -------------------------------------------------------------------------- | --------- | -------------------------------------------- | ----------------- |
-| [onclickoutside?](./clickoutside.clickoutsideattributes.onclickoutside.md) |           | (event: CustomEvent&lt;Event&gt;) =&gt; void | <i>(Optional)</i> |
+| Property                                                                         | Modifiers | Type                                              | Description       |
+| -------------------------------------------------------------------------------- | --------- | ------------------------------------------------- | ----------------- |
+| ["on:clickoutside"?](./clickoutside.clickoutsideattributes._on_clickoutside_.md) |           | (event: CustomEvent&lt;MouseEvent&gt;) =&gt; void | <i>(Optional)</i> |
diff --git a/packages/actions/clickoutside/api/docs/clickoutside.md b/packages/actions/clickoutside/api/docs/clickoutside.md
@@ -6,16 +6,16 @@
 
 `use:clickoutside` - svelte action that emits the `clickoutside` event when the user clicks outside of a node.
 
-## Functions
-
-| Function                                                         | Description                                                                                                                               |
-| ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| [clickoutside(node, parameters)](./clickoutside.clickoutside.md) | Dispatch a <code>clickoutside</code> [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node |
-
 ## Interfaces
 
 | Interface                                                          | Description                                                              |
 | ------------------------------------------------------------------ | ------------------------------------------------------------------------ |
 | [ClickOutsideAttributes](./clickoutside.clickoutsideattributes.md) | Additional attributes extended from <code>svelte-put/clickoutside</code> |
 | [ClickOutsideLimit](./clickoutside.clickoutsidelimit.md)           | Limit to which the click event will trigger <code>clickoutside</code>    |
 | [ClickOutsideParameters](./clickoutside.clickoutsideparameters.md) | svelte action parameters to config behavior of <code>clickoutside</code> |
+
+## Variables
+
+| Variable                                       | Description                                                                                                                               |
+| ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| [clickoutside](./clickoutside.clickoutside.md) | Dispatch a <code>clickoutside</code> [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) on click outside of node |
diff --git a/packages/actions/clickoutside/src/clickoutside.ts b/packages/actions/clickoutside/src/clickoutside.ts
@@ -1,13 +1,7 @@
-import { ClickOutsideAttributes, ClickOutsideParameters } from './clickoutside.types';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Action, ActionReturn } from 'svelte/action';
 
-// ambient typing
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  export namespace svelteHTML {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface HTMLAttributes extends ClickOutsideAttributes {}
-  }
-}
+import { ClickOutsideAttributes, ClickOutsideParameters } from './clickoutside.types';
 
 /**
  * Dispatch a `clickoutside` {@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent | CustomEvent } on click outside of node
@@ -63,12 +57,13 @@ declare global {
  *
  * @param node - node outside of which `click` event will trigger `clickoutside`
  * @param parameters - instructions for `clickoutside` behavior
- * @returns
+ * @returns svelte {@link ActionReturn}
  */
-export function clickoutside(
-  node: HTMLElement,
-  parameters: Partial<ClickOutsideParameters> = { enabled: true },
-) {
+export const clickoutside: Action<
+  HTMLElement,
+  Partial<ClickOutsideParameters>,
+  ClickOutsideAttributes
+> = function (node, parameters = { enabled: true }) {
   let { enabled, eventType, nodeForEvent, options, capture } = resolveParameters(parameters);
   const handle = (event: Event) => {
     if (node && !node.contains(event.target as Node) && !event.defaultPrevented) {
@@ -81,7 +76,7 @@ export function clickoutside(
   }
 
   return {
-    update(update: ClickOutsideParameters) {
+    update(update) {
       nodeForEvent.removeEventListener(eventType, handle, capture);
       ({ enabled, eventType, nodeForEvent, options, capture } = resolveParameters(update));
       if (enabled) nodeForEvent.addEventListener(eventType, handle, options);
@@ -90,7 +85,7 @@ export function clickoutside(
       nodeForEvent.removeEventListener(eventType, handle, capture);
     },
   };
-}
+};
 
 /** @internal */
 export function resolveParameters(parameters: Partial<ClickOutsideParameters>) {

diff --git a/packages/actions/clickoutside/src/clickoutside.types.ts b/packages/actions/clickoutside/src/clickoutside.types.ts
@@ -19,7 +19,7 @@
  * ```
  */
 export interface ClickOutsideAttributes {
-  'on:clickoutside'?: (event: CustomEvent<Event>) => void;
+  'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => void;
 }
 
 /**

diff --git a/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md b/packages/actions/dragscroll/api/docs/dragscroll.dragscroll.md
@@ -2,29 +2,12 @@
 
 [Home](./index.md) &gt; [@svelte-put/dragscroll](./dragscroll.md) &gt; [dragscroll](./dragscroll.dragscroll.md)
 
-## dragscroll() function
+## dragscroll variable
 
 svelte action `use:dragscroll` for adding 'drag-to-scroll' behavior
 
 <b>Signature:</b>
 
 ```typescript
-export declare function dragscroll(
-  node: HTMLElement,
-  parameters?: Partial<DragScrollParameters>,
-): {
-  update(update?: Partial<DragScrollParameters>): void;
-  destroy(): void;
-};
+dragscroll: Action<HTMLElement, Partial<DragScrollParameters>>;
 ```
-
-## Parameters
-
-| Parameter  | Type                                                                                | Description                                                    |
-| ---------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------- |
-| node       | HTMLElement                                                                         | node to apply the action                                       |
-| parameters | Partial&lt;[DragScrollParameters](./dragscroll.dragscrollparameters.md)<!-- -->&gt; | <i>(Optional)</i> instructions for customizing action behavior |
-
-<b>Returns:</b>
-
-{ update(update?: Partial&lt;[DragScrollParameters](./dragscroll.dragscrollparameters.md)<!-- -->&gt;): void; destroy(): void; }
diff --git a/packages/actions/dragscroll/api/docs/dragscroll.md b/packages/actions/dragscroll/api/docs/dragscroll.md
@@ -6,14 +6,14 @@
 
 svelte action `use:dragscroll` for drag-to-scroll behavior
 
-## Functions
-
-| Function                                                   | Description                                                                    |
-| ---------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| [dragscroll(node, parameters)](./dragscroll.dragscroll.md) | svelte action <code>use:dragscroll</code> for adding 'drag-to-scroll' behavior |
-
 ## Interfaces
 
 | Interface                                                    | Description                                                 |
 | ------------------------------------------------------------ | ----------------------------------------------------------- |
 | [DragScrollParameters](./dragscroll.dragscrollparameters.md) | instruction for how <code>use:dragscroll</code> will behave |
+
+## Variables
+
+| Variable                                 | Description                                                                    |
+| ---------------------------------------- | ------------------------------------------------------------------------------ |
+| [dragscroll](./dragscroll.dragscroll.md) | svelte action <code>use:dragscroll</code> for adding 'drag-to-scroll' behavior |
diff --git a/packages/actions/dragscroll/api/dragscroll.api.md b/packages/actions/dragscroll/api/dragscroll.api.md
@@ -3,14 +3,10 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+import type { Action } from 'svelte/action';
+
 // @public
-export function dragscroll(
-  node: HTMLElement,
-  parameters?: Partial<DragScrollParameters>,
-): {
-  update(update?: Partial<DragScrollParameters>): void;
-  destroy(): void;
-};
+export const dragscroll: Action<HTMLElement, Partial<DragScrollParameters>>;
 
 // @public
 export interface DragScrollParameters {

diff --git a/packages/actions/dragscroll/src/dragscroll.action.ts b/packages/actions/dragscroll/src/dragscroll.action.ts
@@ -1,3 +1,6 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type { Action, ActionReturn } from 'svelte/action';
+
 import type { DragScrollParameters } from './dragscroll.types';
 
 /**
@@ -27,9 +30,12 @@ function resolveParameters(parameters: Partial<DragScrollParameters> = {}) {
  *
  * @param node - node to apply the action
  * @param parameters - instructions for customizing action behavior
- * @returns
+ * @returns svelte {@link ActionReturn}
  */
-export function dragscroll(node: HTMLElement, parameters: Partial<DragScrollParameters> = {}) {
+export const dragscroll: Action<HTMLElement, Partial<DragScrollParameters>> = function (
+  node,
+  parameters = {},
+) {
   let isDown = false;
   let startX: number;
   let startY: number;
@@ -97,7 +103,7 @@ export function dragscroll(node: HTMLElement, parameters: Partial<DragScrollPara
   }
 
   return {
-    update(update: Partial<DragScrollParameters> = {}) {
+    update(update = {}) {
       removeEvents();
       ({ enabled, axes, events, cursor } = resolveParameters(update));
       changeCursor();
@@ -107,4 +113,4 @@ export function dragscroll(node: HTMLElement, parameters: Partial<DragScrollPara
       removeEvents();
     },
   };
-}
+};
diff --git a/packages/actions/intersect/api/docs/intersect.intersect.md b/packages/actions/intersect/api/docs/intersect.intersect.md
@@ -2,35 +2,16 @@
 
 [Home](./index.md) &gt; [@svelte-put/intersect](./intersect.md) &gt; [intersect](./intersect.intersect.md)
 
-## intersect() function
+## intersect variable
 
 Create an IntersectionObserver that observers the node
 
 <b>Signature:</b>
 
 ```typescript
-export declare function intersect(
-  node: HTMLElement,
-  parameters?: IntersectParameters,
-): {
-  update(update: IntersectParameters): void;
-  destroy(): void;
-};
+intersect: Action<HTMLElement, IntersectParameters, IntersectAttributes>;
 ```
 
-## Parameters
-
-| Parameter  | Type                                                      | Description                                |
-| ---------- | --------------------------------------------------------- | ------------------------------------------ |
-| node       | HTMLElement                                               | HTMLElement to observe                     |
-| parameters | [IntersectParameters](./intersect.intersectparameters.md) | <i>(Optional)</i> svelte action parameters |
-
-<b>Returns:</b>
-
-{ update(update: [IntersectParameters](./intersect.intersectparameters.md)<!-- -->): void; destroy(): void; }
-
-svelte action interface
-
 ## Remarks
 
 As with any svelte action, `intersect` should be use with element and not component.

diff --git a/...ersect.intersectattributes.onintersect.md → ...ect.intersectattributes._on_intersect_.md b/...ersect.intersectattributes.onintersect.md → ...ect.intersectattributes._on_intersect_.md
@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@svelte-put/intersect](./intersect.md) &gt; [IntersectAttributes](./intersect.intersectattributes.md) &gt; [onintersect](./intersect.intersectattributes.onintersect.md)
+[Home](./index.md) &gt; [@svelte-put/intersect](./intersect.md) &gt; [IntersectAttributes](./intersect.intersectattributes.md) &gt; ["on:intersect"](./intersect.intersectattributes._on_intersect_.md)
 
-## IntersectAttributes.onintersect property
+## IntersectAttributes."on:intersect" property
 
 <b>Signature:</b>
 
 ```typescript
-onintersect?: (event: CustomEvent<IntersectDetail>) => void;
+'on:intersect'?: (event: CustomEvent<IntersectDetail>) => void;
 ```
diff --git a/...ct.intersectattributes.onintersectonce.md → ...intersectattributes._on_intersectonce_.md b/...ct.intersectattributes.onintersectonce.md → ...intersectattributes._on_intersectonce_.md
@@ -1,11 +1,11 @@
 <!-- Do not edit this file. It is automatically generated by API Documenter. -->
 
-[Home](./index.md) &gt; [@svelte-put/intersect](./intersect.md) &gt; [IntersectAttributes](./intersect.intersectattributes.md) &gt; [onintersectonce](./intersect.intersectattributes.onintersectonce.md)
+[Home](./index.md) &gt; [@svelte-put/intersect](./intersect.md) &gt; [IntersectAttributes](./intersect.intersectattributes.md) &gt; ["on:intersectonce"](./intersect.intersectattributes._on_intersectonce_.md)
 
-## IntersectAttributes.onintersectonce property
+## IntersectAttributes."on:intersectonce" property
 
 <b>Signature:</b>
 
 ```typescript
-onintersectonce?: (event: CustomEvent<IntersectDetail>) => void;
+'on:intersectonce'?: (event: CustomEvent<IntersectDetail>) => void;
 ```
diff --git a/packages/actions/intersect/api/docs/intersect.intersectattributes.md b/packages/actions/intersect/api/docs/intersect.intersectattributes.md
@@ -27,7 +27,7 @@ The ambient types for these extended attributes should be available automaticall
 
 ## Properties
 
-| Property                                                               | Modifiers | Type                                                                                             | Description       |
-| ---------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------ | ----------------- |
-| [onintersect?](./intersect.intersectattributes.onintersect.md)         |           | (event: CustomEvent&lt;[IntersectDetail](./intersect.intersectdetail.md)<!-- -->&gt;) =&gt; void | <i>(Optional)</i> |
-| [onintersectonce?](./intersect.intersectattributes.onintersectonce.md) |           | (event: CustomEvent&lt;[IntersectDetail](./intersect.intersectdetail.md)<!-- -->&gt;) =&gt; void | <i>(Optional)</i> |
+| Property                                                                     | Modifiers | Type                                                                                             | Description       |
+| ---------------------------------------------------------------------------- | --------- | ------------------------------------------------------------------------------------------------ | ----------------- |
+| ["on:intersect"?](./intersect.intersectattributes._on_intersect_.md)         |           | (event: CustomEvent&lt;[IntersectDetail](./intersect.intersectdetail.md)<!-- -->&gt;) =&gt; void | <i>(Optional)</i> |
+| ["on:intersectonce"?](./intersect.intersectattributes._on_intersectonce_.md) |           | (event: CustomEvent&lt;[IntersectDetail](./intersect.intersectdetail.md)<!-- -->&gt;) =&gt; void | <i>(Optional)</i> |
diff --git a/packages/actions/intersect/api/docs/intersect.md b/packages/actions/intersect/api/docs/intersect.md
@@ -6,16 +6,16 @@
 
 svelte action - `use:intersect` svelte action that wraps IntersectionObserver
 
-## Functions
-
-| Function                                                | Description                                            |
-| ------------------------------------------------------- | ------------------------------------------------------ |
-| [intersect(node, parameters)](./intersect.intersect.md) | Create an IntersectionObserver that observers the node |
-
 ## Interfaces
 
 | Interface                                                 | Description                                                                                       |
 | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
 | [IntersectAttributes](./intersect.intersectattributes.md) | Additional attributes extended from <code>svelte-put/intersect</code>                             |
 | [IntersectDetail](./intersect.intersectdetail.md)         | <code>detail</code> payload for <code>intersect</code> and <code>intersectonce</code> CustomEvent |
 | [IntersectParameters](./intersect.intersectparameters.md) | svelte action parameters to config behavior of <code>movable</code>                               |
+
+## Variables
+
+| Variable                              | Description                                            |
+| ------------------------------------- | ------------------------------------------------------ |
+| [intersect](./intersect.intersect.md) | Create an IntersectionObserver that observers the node |