svelte-dnd-action 0.9.38 → 0.9.40

package/README.md

@@ -252,9 +252,11 @@ setDebugMode(true);
 
 ### Typescript
 
-If you are using Typescript, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
+#### Setup (Optional)
 
-#### Svelte 3 or below
+TypeScript support has been added since version 0.9.40 and you do not need to set up any custom typings. However, in case you are using some older version or face some types issue, you will need to add the following block to your `global.d.ts` (at least until [this svelte issue](https://github.com/sveltejs/language-tools/issues/431) is resolved):
+
+##### Svelte 3 or below
 
 ```typescript
 declare type Item = import("svelte-dnd-action").Item;
@@ -267,7 +269,7 @@ declare namespace svelte.JSX {
 }
 ```
 
-#### Svelte 4:
+##### Svelte 4:
 
 ```typescript
 declare type Item = import("svelte-dnd-action").Item;
@@ -281,6 +283,22 @@ declare namespace svelteHTML {
 ```
 
 You may need to edit `tsconfig.json` to include `global.d.ts` if it doesn't already: "include": ["src/**/*", "global.d.ts"].
+
+> Note: If you are using Sveltekit you should use `svelte.config.js` to modify the generated `tsconfig.json` rather than adding the `include` element to the root `tsconfig.json`. Adding `include` to the root file will cause issues because it will [override](https://www.typescriptlang.org/tsconfig#extends) the `include` array defined in `.svelte-kit/tsconfig.json`. Example:
+>
+> ```javascript
+> const config = {
+>     kit: {
+>         typescript: {
+>             config(config) {
+>                 // This path is relative to the ".svelte-kit" folder
+>                 config.include.push("../global.d.ts");
+>             }
+>         }
+>     }
+> };
+> ```
+
 Then you will be able to use the library with type safety as follows (Typescript gurus out there, improvements are welcome :smile:):
 
 ```html

package/dist/index.d.ts

@@ -1,14 +1,18 @@
+import type {ActionReturn} from "svelte/action";
+
 /**
  * A custom action to turn any container to a dnd zone and all of its direct children to draggables
  * Supports mouse, touch and keyboard interactions.
  * Dispatches two events that the container is expected to react to by modifying its list of items,
  * which will then feed back in to this action via the update function
  */
-export declare function dndzone(
+export declare function dndzone<T extends Item>(node: HTMLElement, options: Options<T>): ActionReturn<Options<T>, DndZoneAttributes<T>>;
+
+export declare function dndzone<T extends Item>(
     node: HTMLElement,
-    options: Options
+    options: Options<T>
 ): {
-    update: (newOptions: Options) => void;
+    update: (newOptions: Options<T>) => void;
     destroy: () => void;
 };
 
@@ -19,8 +23,8 @@ export type TransformDraggedElementFunction = (
 ) => void;
 
 export declare type Item = Record<string, any>;
-export interface Options {
-    items: Item[]; // the list of items that was used to generate the children of the given node
+export interface Options<T extends Item = Item> {
+    items: T[]; // the list of items that was used to generate the children of the given node
     type?: string; // the type of the dnd zone. children dragged from here can only be dropped in other zones of the same type, defaults to a base type
     flipDurationMs?: number; // if the list animated using flip (recommended), specifies the flip duration such that everything syncs with it without conflict
     dragDisabled?: boolean;
@@ -35,6 +39,13 @@ export interface Options {
     centreDraggedOnCursor?: boolean;
 }
 
+export interface DndZoneAttributes<T> {
+    "on:consider"?: (e: CustomEvent<DndEvent<T>>) => void;
+    "on:finalize"?: (e: CustomEvent<DndEvent<T>>) => void;
+    onconsider?: (e: CustomEvent<DndEvent<T>>) => void;
+    onfinalize?: (e: CustomEvent<DndEvent<T>>) => void;
+}
+
 /**
  * Will make the screen reader alert the provided text to the user
  */

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "svelte-dnd-action",
     "description": "*An awesome drag and drop library for Svelte 3 and 4 (not using the browser's built-in dnd, thanks god): Rich animations, nested containers, touch support and more *",
-    "version": "0.9.38",
+    "version": "0.9.40",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/isaacHagoel/svelte-dnd-action.git"