`, apply event listeners on it, set it to `display: contents`, but it would add an extra DOM element, and sometimes, that alone can make a huge difference!
-
-So to not add a wrapper myself, I would need to write here in docs to pass only one root element, and give an error when I detect multiple. or I'd need to enforce passing the ref of the element into the component using `bind:this`, like this 👇
-
-```svelte
-
-
-
-
- Hello
-
-
-```
-
-You'd have to bind the element ref which you want to make a draggable, and pass it to the component.
-
-This is doable, but it adds an unnecessary amount of API layer, and the code isn't idiomatic and elegant, not to mention how much extra code I would have to add as the library author.
-
-Not to mention, it would require much more work to make it SSR compliant, which makes no sense, cuz the server isn't dragging elements around, so why need to SSR it in the first place ¯\\\_(ツ)\_/¯. I would have to add `browser` checks everywhere to make it work, which is less than ideal.
-
-On the other hand, as an action, this gives ultimate control to both the user and me.
-
-```svelte
-
- Hello
-
-```
-
-This is extremely simple, elegant and expressive. By applying the action, you are specifying which element you want to be draggable, without any extra overhead. It just works!! And Actions aren't run in SSR, so your app will server render without errors caused from this library, and will spare me the gruelling task of adding browser checks everywhere!! It's a win win for everyone!! 🙂
-
-# Contributing
-
-Feel free to open an issue with a bug or feature request.
-
-If you wish to make a PR fixing something, please open an issue about it first!
-
-## Help needed 🛑
-
-This library lacks something very important: **Automated Tests!**
-
-I'll be straight about this: I don't know how to write tests. I've tried, but not been able to.
+
Read the docs
-So I need your help. If you wish to contribute and can add tests here, it would be great for everyone using this! 🙂
+## Credits
-Specifications here: [#7](https://github.com/PuruVJ/neodrag/issues/7)
+Inspired from the amazing [react-draggable](https://github.com/react-grid-layout/react-draggable) library, and implements a similar API, but 3x smaller.
# License
diff --git a/packages/svelte/demo/package.json b/packages/svelte/demo/package.json
index 323c9f55..8fd6a245 100644
--- a/packages/svelte/demo/package.json
+++ b/packages/svelte/demo/package.json
@@ -8,11 +8,11 @@
"preview": "vite preview"
},
"devDependencies": {
- "@sveltejs/kit": "1.0.1",
+ "@sveltejs/kit": "1.0.7",
"svelte": "^3.55.0",
"svelte-preprocess": "^5.0.0",
"typescript": "^4.9.4",
- "vite": "^4.0.3"
+ "vite": "^4.0.4"
},
"dependencies": {
"@neodrag/svelte": "workspace:*"
diff --git a/packages/svelte/demo/src/routes/2/+page.svelte b/packages/svelte/demo/src/routes/2/+page.svelte
new file mode 100644
index 00000000..d9840be9
--- /dev/null
+++ b/packages/svelte/demo/src/routes/2/+page.svelte
@@ -0,0 +1,19 @@
+
+
+
{
+ rootNode.style.translate = `${offsetX}px ${offsetY}px 0`;
+ },
+ }}
+>
+ Hello
+
+
+
+
Handle 1
+
Handle 2
+
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dd30ead2..0631d278 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@neodrag/svelte",
- "version": "2.0.0-next.0",
+ "version": "2.0.0",
"description": "Svelte Action to add dragging to your apps 😉",
"main": "./dist/index.js",
"module": "./dist/index.js",
@@ -12,8 +12,12 @@
"sideEffects": false,
"exports": {
".": {
- "import": "./dist/index.js",
- "module": "./dist/index.js"
+ "types": "./dist/index.d.ts",
+ "import": {
+ "production": "./dist/min/index.js",
+ "development": "./dist/index.js"
+ },
+ "default": "./dist/min/index.js"
},
"./package.json": "./package.json"
},
@@ -46,7 +50,8 @@
"url": "https://github.com/PuruVJ/neodrag/issues"
},
"devDependencies": {
- "@neodrag/core": "workspace:*"
+ "@neodrag/core": "workspace:*",
+ "@neodrag/tsup-config": "workspace:*"
},
- "homepage": "https://github.com/PuruVJ/neodrag/tree/main/packages/svelte#readme"
+ "homepage": "https://neodrag.dev/docs/svelte"
}
diff --git a/packages/svelte/tsup.config.ts b/packages/svelte/tsup.config.ts
index 798a4832..4950a180 100644
--- a/packages/svelte/tsup.config.ts
+++ b/packages/svelte/tsup.config.ts
@@ -1,10 +1,3 @@
-import { defineConfig } from 'ttsup';
+import { coreConfig } from '@neodrag/tsup-config';
-export default defineConfig({
- entry: ['./src/index.ts'],
- minify: 'terser',
- format: 'esm',
- dts: { resolve: true },
- clean: true,
- sourcemap: true,
-});
+export default coreConfig({});
diff --git a/packages/vanilla/CHANGELOG.md b/packages/vanilla/CHANGELOG.md
index 7b90a1fd..25e1424b 100644
--- a/packages/vanilla/CHANGELOG.md
+++ b/packages/vanilla/CHANGELOG.md
@@ -1,20 +1,22 @@
# @neodrag/vanilla
-## 2.0.0-next.0
+## 2.0.0
-### Major Changes
+### Patch Changes
-- [#60](https://github.com/PuruVJ/neodrag/pull/60) [`f2d1130`](https://github.com/PuruVJ/neodrag/commit/f2d113052954b055fda7516919e4113bbde849d4) Thanks [@PuruVJ](https://github.com/PuruVJ)! - Event data provides the root node
+- [#95](https://github.com/PuruVJ/neodrag/pull/95) [`3c10f6ae`](https://github.com/PuruVJ/neodrag/commit/3c10f6ae377c3e9fc9fea963ea99204a4649806c) Thanks [@PuruVJ](https://github.com/PuruVJ)! - Add `legacyTranslate` option, remove memoization code, align to browser's RAF throttling
- ```js
- {
- onDrag: ({ node }) => {
- console.log(node);
- };
- }
- ```
+- [#97](https://github.com/PuruVJ/neodrag/pull/97) [`9e5c4647`](https://github.com/PuruVJ/neodrag/commit/9e5c46477c7781bc75a57944983434a0c8ceff77) Thanks [@PuruVJ](https://github.com/PuruVJ)! - New output formats
-### Patch Changes
+- [`da98e910`](https://github.com/PuruVJ/neodrag/commit/da98e910469d63e53e2462e74196bad3b90ea053) Thanks [@PuruVJ](https://github.com/PuruVJ)! - Expose rootNode and currentNode from events. Remove node and domRect
+
+- [#99](https://github.com/PuruVJ/neodrag/pull/99) [`a1572bce`](https://github.com/PuruVJ/neodrag/commit/a1572bce5186051a5114dd580017a49fc2b3c7fc) Thanks [@PuruVJ](https://github.com/PuruVJ)! - Add transform function
+
+- [`8dd0d88f`](https://github.com/PuruVJ/neodrag/commit/8dd0d88ff0458c0bd6d20e3649371fdf732c9ebb) Thanks [@PuruVJ](https://github.com/PuruVJ)! - Add recomputeBounds option
+
+- [`ca8cde25`](https://github.com/PuruVJ/neodrag/commit/ca8cde252e555cc50a0919a295d01ec340207f8e) Thanks [@PuruVJ](https://github.com/PuruVJ)! Expose rootNode and currentNode from events. Remove node and domRect
+
+- [`2ea2bad4`](https://github.com/PuruVJ/neodrag/commit/2ea2bad4f16e798fb0ecb55f8554efcd2e50ca26) Thanks [@PuruVJ](https://github.com/PuruVJ)! Fix ouble click issue
- Fix behavior when snap provided as 0
diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md
index 2b1f68ea..2e16b9e4 100644
--- a/packages/vanilla/README.md
+++ b/packages/vanilla/README.md
@@ -1,19 +1,31 @@
-# @neodrag/vanilla
+
+
+
-A lightweight vanilla JS(plain JS) library to make your elements draggable.
+
+@neodrag/vanilla
+
-Inspired from the amazing [react-draggable](https://github.com/react-grid-layout/react-draggable) library, and implements a similar API, but 3x smaller.
+
+One draggable to rule em all
+
+
+
A lightweight vanillaJS library to make your elements draggable.
+
+
+ 
+
+
+
Getting Started
# Features
-- 🤏 Tiny - Only 2.02KB min+brotli.
+- 🤏 Tiny - Only 1.79KB min+brotli.
- 🐇 Simple - Quite simple to use, and effectively no-config required!
- 🧙♀️ Elegant - Single class, very easy to use.
- 🗃️ Highly customizable - Offers tons of options that you can modify to get different behavior.
- ⚛️ Reactive - Change options passed to it on the fly, it will **just work 🙂**
-
-
# Installing
```bash
@@ -50,7 +62,7 @@ const dragInstance = new Draggable(document.querySelector('#drag'), {
Defining options elsewhere with typescript
```tsx
-import { Draggable } from '@neodrag/vanilla';
+import { type Draggable } from '@neodrag/vanilla';
const options: DragOptions = {
axis: 'y',
@@ -81,447 +93,11 @@ dragInstance.options = {
};
```
-# Options
-
-There are tons of options available for this package. All of them are already documented within the code itself, so you'll never have to leave the code editor.
-
-## axis
-
-**type**: `'both' | 'x' | 'y' | 'none'`
-
-**Default Value**: `'both'`
-
-Axis on which the element can be dragged on. Valid values: `both`, `x`, `y`, `none`.
-
-- `both` - Element can move in any direction
-- `x` - Only horizontal movement possible
-- `y` - Only vertical movement possible
-- `none` - No movement at all
-
-**Examples**:
-
-```tsx
-// Drag only in x direction
-new Draggable(el, { axis: 'x' });
-```
-
-## bounds
-
-**type**: `HTMLElement | 'parent' | string | { top?: number; right?: number; bottom?: number; left?: number }`
-
-**Default Value**: `undefined`
-
-Optionally limit the drag area
-
-`parent`: Limit to parent
-
-Or, you can specify any selector and it will be bound to that.
-
-**Note**: This library doesn't check whether the selector is bigger than the node element.
-You yourself will have to make sure of that, or it may lead to unexpected behavior.
-
-Or, finally, you can pass an object of type `{ top: number; right: number; bottom: number; left: number }`.
-These mimic the css `top`, `right`, `bottom` and `left`, in the sense that `bottom` starts from the bottom of the window, and `right` from right of window.
-If any of these properties are unspecified, they are assumed to be `0`.
-
-**Examples**:
-
-Bound to any element
-
-```ts
-new Draggable(el, { bounds: document.querySelector('.some-element') });
-```
-
-Bound to parent
-
-```ts
-new Draggable(el, { bounds: 'parent' });
-```
-
-Bound to body
-
-```ts
-new Draggable(el, { bounds: 'body' });
-```
-
-Bound to an ancestor selector somewhere in page
-
-```tsx
-new Draggable(el, { bounds: '.way-up-in-the-dom' });
-```
-
-Manually through coordinates. Empty object means bound to the `window`.
-
-**NOTE**: It isn't strictly empty object. If you omit any property from this object, it will be assumed as `0`.
-
-```ts
-new Draggable(el, { bounds: {} });
-```
-
-Bound only to top and bottom, and unbounded horizontally in practice by setting bounds way beyond the screen.
-
-```ts
-new Draggable(el, { bounds: { top: 0, bottom: 0, left: -1000, right: -1000 } });
-```
-
-## gpuAcceleration
-
-**type**: `boolean`
-
-**Default value**: `true`
-
-If true, uses `translate3d` instead of `translate` to move the element around, and the hardware acceleration kicks in.
-
-`true` by default, but can be set to `false` if [blurry text issue](https://developpaper.com/question/why-does-the-use-of-css3-translate3d-result-in-blurred-display/) occurs.
-
-Example 👇
-
-```ts
-new Draggable(el, { gpuAcceleration: false });
-```
-
-## applyUserSelectHack
-
-**type**: `boolean`
-
-**Default value**: `true`
-
-Applies `user-select: none` on `
