feat: Add domRect to events, Ship types (#36)

* Add domRect to events Ship types * Code reduction
PuruVJ · Jan 26, 2022 · d0a0713 · d0a0713
1 parent c543bbc
commit d0a0713
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 32 deletions.
diff --git a/.babelrc b/.babelrc
diff --git a/.prettierignore b/.prettierignore
diff --git a/LICENSE.txt b/LICENSE.txt
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Puru Vijay
+Copyright (c) 2022 Puru Vijay
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -385,17 +385,7 @@ If you're a TypeScript user, read on below 👇
 
 # TypeScript
 
-The events above are custom events, and hence, not recognized by the TypeScript compiler, so your editor will basically yell at you and say these events do not exist. For that, you need to create a `types.d.ts` file in the `source` folder of your project and the code below to it 👇
-
-```ts
-export declare namespace svelte.JSX {
-	interface HTMLAttributes<T> {
-		'onsvelte-drag:start'?: (e: CustomEvent<{ offsetX: number; offsetY: number }>) => void;
-		'onsvelte-drag:end'?: (e: CustomEvent<{ offsetX: number; offsetY: number }>) => void;
-		'onsvelte-drag'?: (e: CustomEvent<{ offsetX: number; offsetY: number }>) => void;
-	}
-}
-```
+This library ships with proper TypeScript typings, for the best Developer Experience, whether authoring JS or TS.
 
 ## Types Exported from package
 

diff --git a/src/draggable.d.ts b/src/draggable.d.ts
@@ -1,7 +1,13 @@
 export declare namespace svelte.JSX {
 	interface HTMLAttributes {
-		'onsvelte-drag:start'?: (e: CustomEvent<null>) => void;
-		'onsvelte-drag:end'?: (e: CustomEvent<null>) => void;
-		'onsvelte-drag'?: (e: CustomEvent<{ offsetX: number; offsetY: number }>) => void;
+		'onsvelte-drag:start'?: (
+			e: CustomEvent<{ offsetX: number; offsetY: number; domRect: DOMRect }>
+		) => void;
+		'onsvelte-drag:end'?: (
+			e: CustomEvent<{ offsetX: number; offsetY: number; domRect: DOMRect }>
+		) => void;
+		'onsvelte-drag'?: (
+			e: CustomEvent<{ offsetX: number; offsetY: number; domRect: DOMRect }>
+		) => void;
 	}
 }
diff --git a/src/index.ts b/src/index.ts
@@ -263,17 +263,17 @@ export type DragOptions = {
 	/**
 	 * Fires when dragging start
 	 */
-	onDragStart?: (data: { offsetX: number; offsetY: number }) => void;
+	onDragStart?: (data: { offsetX: number; offsetY: number; domRect: DOMRect }) => void;
 
 	/**
 	 * Fires when dragging is going on
 	 */
-	onDrag?: (data: { offsetX: number; offsetY: number }) => void;
+	onDrag?: (data: { offsetX: number; offsetY: number; domRect: DOMRect }) => void;
 
 	/**
 	 * Fires when dragging ends
 	 */
-	onDragEnd?: (data: { offsetX: number; offsetY: number }) => void;
+	onDragEnd?: (data: { offsetX: number; offsetY: number; domRect: DOMRect }) => void;
 };
 
 const DEFAULT_CLASS = {
@@ -282,8 +282,6 @@ const DEFAULT_CLASS = {
 	DRAGGED: 'svelte-draggable-dragged',
 };
 
-let needForRAF = true;
-
 export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 	let {
 		bounds,
@@ -338,22 +336,27 @@ export const draggable = (node: HTMLElement, options: DragOptions = {}) => {
 
 	let isControlled = !!position;
 
-	function fireSvelteDragStartEvent(node: HTMLElement) {
-		const data = { offsetX: translateX, offsetY: translateY };
+	const getEventData = () => ({
+		offsetX: translateX,
+		offsetY: translateY,
+		domRect: node.getBoundingClientRect(),
+	});
 
+	function fireSvelteDragStartEvent(node: HTMLElement) {
+		const data = getEventData();
 		node.dispatchEvent(new CustomEvent('svelte-drag:start', { detail: data }));
 		onDragStart?.(data);
 	}
 
 	function fireSvelteDragStopEvent(node: HTMLElement) {
-		const data = { offsetX: translateX, offsetY: translateY };
+		const data = getEventData();
 
 		node.dispatchEvent(new CustomEvent('svelte-drag:end', { detail: data }));
 		onDragEnd?.(data);
 	}
 
 	function fireSvelteDragEvent(node: HTMLElement, translateX: number, translateY: number) {
-		const data = { offsetX: translateX, offsetY: translateY };
+		const data = getEventData();
 
 		node.dispatchEvent(new CustomEvent('svelte-drag', { detail: data }));
 		onDrag?.(data);
@@ -634,8 +637,6 @@ function computeBoundRect(bounds: string | Partial<DragBoundsCoords>, rootNode:
 }
 
 function setTranslate(xPos: number, yPos: number, el: HTMLElement, gpuAcceleration: boolean) {
-	needForRAF = true; // rAF now consumes the movement instruction so a new one can come
-
 	el.style.transform = gpuAcceleration
 		? `translate3d(${+xPos}px, ${+yPos}px, 0)`
 		: `translate(${+xPos}px, ${+yPos}px)`;

diff --git a/tsup.config.ts b/tsup.config.ts
@@ -1,9 +1,12 @@
 import { defineConfig } from 'tsup';
+import { readFileSync } from 'node:fs';
+
+const banner = readFileSync('./src/draggable.d.ts', 'utf8');
 
 export default defineConfig({
 	sourcemap: true,
 	clean: true,
-	dts: true,
+	dts: { banner },
 	format: ['esm', 'cjs'],
 	external: [],
 	entryPoints: ['src/index.ts'],