breaking(vanilla): proxy API

docs/src/pages/docs/vanilla.mdx

@@ -65,16 +65,16 @@ const dragInstance = new Draggable(document.querySelector('#drag'), {
 });
 
 // Update the specific options. Will be merged with the existing options.
-dragInstance.updateOptions({
-  axis: 'y',
-});
+dragInstance.options.axis = 'y';
 
 // Completely overrides existing options, in this case, the `grid` property is removed
 dragInstance.options = {
   axis: 'y',
 };
 ```
 
+> NOTE: dragInstance.options is internally a Proxy, allowing the nice `.options[PROPERTY] = VALUE` syntax. If you wish to read the raw value, use `dragInstance.optionsJSON`.
+
 Using via CDN
 
 For users who prefer not to install the package and instead use it directly in their projects via a CDN, you can include `@neodrag/vanilla` directly in your HTML files. This is particularly useful for quick prototyping or projects where you want to avoid a build step. Here’s how to include it using different CDNs:
@@ -84,23 +84,26 @@ Using Unpkg
 Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
 
 ```html
-<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"></script>
 ```
 
 Using jsDelivr
 
 Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"></script>
 ```
 
 Usage with CDN
 
 After including the library via a CDN, `@neodrag/vanilla` will be available as a global variable `NeoDrag`. Here’s how you can use it to make an element draggable:
 
 ```html
-<div id="drag">Drag me!</div> <script>   var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
+<div id="drag">Drag me!</div>
+<script>
+  var dragInstance = new NeoDrag.Draggable(document.getElementById('drag'));
+</script>
 ```
 
 This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.

packages/vanilla/README.md

@@ -83,16 +83,16 @@ const dragInstance = new Draggable(document.querySelector('#drag'), {
 });
 
 // Update the specific options. Will be merged with the existing options.
-dragInstance.update({
-	axis: 'y',
-});
+dragInstance.options.axis = 'y';
 
 // Completely overrides existing options, in this case, the `grid` property is removed
 dragInstance.options = {
 	axis: 'y',
 };
 ```
 
+> NOTE: dragInstance.options is internally a Proxy, allowing the nice `.options[PROPERTY] = VALUE` syntax. If you wish to read the raw value, use `dragInstance.optionsJSON`.
+
 Using via CDN
 
 For users who prefer not to install the package and instead use it directly in their projects via a CDN, you can include `@neodrag/vanilla` directly in your HTML files. This is particularly useful for quick prototyping or projects where you want to avoid a build step. Here’s how to include it using different CDNs:
@@ -102,23 +102,26 @@ Using Unpkg
 Include the library in your HTML using the following `<script>` tag. This will load the latest version of `@neodrag/vanilla` directly from unpkg:
 
 ```html
-<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+<script src="https://unpkg.com/@neodrag/vanilla@latest/dist/umd/index.js"></script>
 ```
 
 Using jsDelivr
 
 Alternatively, you can use jsDelivr as a CDN to load `@neodrag/vanilla`. Include the following line in your HTML:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"> </script>
+<script src="https://cdn.jsdelivr.net/npm/@neodrag/vanilla@latest/dist/umd/index.js"></script>
 ```
 
 Usage with CDN
 
 After including the library via a CDN, `@neodrag/vanilla` will be available as a global variable `NeoDrag`. Here’s how you can use it to make an element draggable:
 
 ```html
-<div id="drag">Drag me!</div> <script>   var dragInstance = new NeoDrag.Draggable(document.getElementById('drag')); </script>
+<div id="drag">Drag me!</div>
+<script>
+	var dragInstance = new NeoDrag.Draggable(document.getElementById('drag'));
+</script>
 ```
 
 This method allows you to use `@neodrag/vanilla` without any build tools or npm installations, directly in your browser.

packages/vanilla/demo/src/main.ts

@@ -17,12 +17,12 @@ const dragInstance = new Draggable(draggableEl, {
 	},
 });
 
-xSlider.addEventListener('input', (e: Event) => {
-	position.x = +e.target.value;
-	dragInstance.updateOptions({ position });
+xSlider.addEventListener('input', (e) => {
+	position.x = +e.target!.value;
+	dragInstance.options.position = position;
 });
 
 ySlider.addEventListener('input', (e: Event) => {
-	position.y = +e.target.value;
-	dragInstance.updateOptions({ position });
+	position.y = +e.target!.value;
+	dragInstance.options.position = position;
 });

packages/vanilla/src/index.ts

@@ -1,30 +1,45 @@
 import { draggable, type DragOptions } from '@neodrag/core';
 
 export class Draggable {
-	private _drag_instance: ReturnType<typeof draggable>;
-	private _options: DragOptions = {};
-
-	constructor(
-		public node: HTMLElement,
-		options: DragOptions = {},
-	) {
-		this._drag_instance = draggable(node, (this._options = options));
-	}
+	#instance: ReturnType<typeof draggable>;
+	#raw_options: DragOptions = {};
 
-	public updateOptions(options: DragOptions) {
-		this._drag_instance.update(Object.assign(this._options, options));
+	constructor(node: HTMLElement, options: DragOptions = {}) {
+		this.#instance = draggable(node, (this.#raw_options = options));
 	}
 
-	set options(options: DragOptions) {
-		this._drag_instance.update((this._options = options));
+	/**
+	 * Options Proxy Creator
+	 */
+	#create_proxy = (options: DragOptions) => {
+		return new Proxy(options, {
+			set: (target, property, value) => {
+				Reflect.set(target, property, value);
+				this.#instance?.update(this.#raw_options); // Update confetti instance when options change
+				return true;
+			},
+		});
+	};
+
+	/** @deprecated Directly set individual options via `dragInstance.options.grid = [1, 3]`. Will be removed in v3 */
+	updateOptions(options: DragOptions) {
+		this.#instance.update(Object.assign(this.#raw_options, options));
 	}
 
 	get options() {
-		return this._options;
+		return this.#create_proxy(this.#raw_options); // Initialize options with a proxy
+	}
+
+	get optionsJSON() {
+		return JSON.parse(JSON.stringify(this.#raw_options));
+	}
+
+	set options(value: DragOptions) {
+		this.#instance?.update((this.#raw_options = value)); // Update confetti instance on setting new options
 	}
 
-	public destroy() {
-		this._drag_instance.destroy();
+	destroy() {
+		this.#instance.destroy();
 	}
 }