unsortable 0.0.1

package/lib/index.js

@@ -0,0 +1,202 @@
+import { DragDropManager, Draggable, Droppable } from '@dnd-kit/dom'
+import { getNearestParentElementFromMap, hasValue, move, toArrayAccessors, toItemAccessor } from './utils'
+
+/**
+ * @typedef {Object} UnsortableOptions
+ * @property {boolean} [autoAttach=true] - Whether to automatically attach the Unsortable instance to the drag manager.
+ * @property {import('@dnd-kit/dom').DragDropManagerInput} [managerOptions={}] - Options for the DragDropManager instance.
+ * @property {import('@dnd-kit/dom').DragDropManager} [manager=undefined] - An instance of DragDropManager to use. If not provided, a new instance will be created.
+ */
+
+/**
+ * @type {UnsortableOptions}
+ */
+const defaultOptions = {
+  autoAttach: true,
+}
+
+const containerMap = new WeakMap()
+const itemMap = new WeakMap()
+
+export class Unsortable {
+  /**
+   * @param {UnsortableOptions=} options - Configuration options for Unsortable.
+   */
+  constructor(options) {
+    this.options = { ...defaultOptions, ...options }
+    this.manager = options?.manager || new DragDropManager(options?.managerOptions)
+    this.addDraggable = this.addDraggable.bind(this)
+    this.addDroppable = this.addDroppable.bind(this)
+    this.addHandle = this.addHandle.bind(this)
+    this._onDragOver = this._onDragOver.bind(this)
+
+    if (this.options.autoAttach) this.attach()
+  }
+
+  attach() {
+    console.debug('Unsortable: attaching to drag manager')
+    this.manager.monitor.addEventListener('dragover', this._onDragOver)
+  }
+
+  destroy() {
+    console.debug('Unsortable: destroying')
+    this.manager.destroy()
+  }
+
+  _onDragOver(event) {
+    if (!event.operation.target) return
+    console.debug('Unsortable: drag over event', event)
+    event.operation.source.element['style'].display = 'block'
+
+    if (event.operation.target.data.isContainer) return this.handleMove(event)
+    else return this.handleSort(event)
+  }
+
+  handleMove(event) {
+    console.debug('Unsortable: handling move', event, this.manager)
+    const source = getNearestParentElementFromMap(event.operation.source.element, containerMap)
+
+    const sourceItem = event.operation.source.data.item()
+    const sourceItems = source.items.get()
+    const setSourceItems = source.items.set
+
+    const targetItems = event.operation.target.data.items.get()
+    const setTargetItems = event.operation.target.data.items.set
+
+    const isAlreadyInTargetItems = targetItems.includes(sourceItem)
+    if (isAlreadyInTargetItems) return
+
+    // update the source items
+    setSourceItems(sourceItems.filter((item) => item !== sourceItem))
+    setTargetItems([...targetItems, sourceItem])
+  }
+
+  handleSort(event) {
+    console.debug('Unsortable: handling sort', event)
+    const source = getNearestParentElementFromMap(event.operation.source.element, containerMap)
+    const target = getNearestParentElementFromMap(event.operation.target.element, containerMap)
+
+    const sourceItem = event.operation.source.data.item()
+    const sourceItems = source.items.get()
+    const targetItem = event.operation.target.data.item()
+    const targetItems = target.items.get()
+
+    if (sourceItem === targetItem) {
+      console.debug('Unsortable: source item is the same as target item, no action taken')
+      return
+    }
+    const isSameList = sourceItems === targetItems
+
+    const oldIndex = sourceItems.indexOf(sourceItem)
+    const newIndex = targetItems.indexOf(targetItem)
+
+    console.debug('Unsortable: oldIndex', oldIndex, 'newIndex', newIndex)
+
+    if (isSameList) {
+      source.items.set([...move([...sourceItems], oldIndex, newIndex)])
+      return
+    }
+
+    // If the items are in different lists, we need to remove the item from the old list and add it to the new list
+    // check we're not moving the item into its own child
+    if (newIndex !== -1 && !hasValue(sourceItem, targetItems)) {
+      source.items.set(sourceItems.filter((item) => item !== sourceItem))
+      const _targetItems = [...targetItems]
+      _targetItems.splice(newIndex, 0, sourceItem)
+      target.items.set(_targetItems)
+    }
+  }
+
+  /**
+   * Adds a draggable element to the Unsortable instance.
+   * @template T
+   * @param {HTMLElement} element
+   * @param {Object} options
+   * @param {import('@dnd-kit/dom').DraggableInput['type']=} [options.type] - The type of the draggable element.
+   * @param {import('@dnd-kit/dom').DroppableInput['accept']=} [options.accept] - The accepted types for the droppable element.
+   * @param {import('@dnd-kit/dom').DraggableInput=} options.draggableOptions - Options for the Draggable instance.
+   * @param {import('@dnd-kit/dom').DroppableInput=} options.droppableOptions - Options for the Droppable instance.
+   * @param {T | (()=>T) } options.item - An accessor for the item associated with the draggable.
+   */
+  addDraggable(element, options) {
+    options.item = toItemAccessor(options.item)
+
+    console.debug('unsortable: draggable options', options)
+    const draggable = new Draggable(
+      {
+        type: options.type,
+        ...options?.draggableOptions,
+        id: options.item(),
+        element,
+        data: { ...options, ...options?.draggableOptions?.data, isContainer: false },
+      },
+      this.manager,
+    )
+
+    const droppable = new Droppable(
+      {
+        accept: options.accept || options.type,
+        ...options?.droppableOptions,
+        id: options.item(),
+        element,
+        data: { ...options, ...options?.droppableOptions?.data, isContainer: false },
+      },
+      this.manager,
+    )
+
+    itemMap.set(element, { ...options, draggable, droppable })
+
+    return {
+      draggable,
+      droppable,
+      options,
+      destroy() {
+        draggable.destroy()
+        droppable.destroy()
+      },
+    }
+  }
+
+  /**
+   * Adds a draggable element to the Unsortable instance.
+   * @template {any[]} T
+   * @param {HTMLElement} element
+   * @param {Object} options
+   * @param {import('@dnd-kit/dom').DroppableInput['accept']=} [options.accept] - The accepted types for the droppable element.
+   * @param {import('@dnd-kit/dom').DroppableInput=} options.droppableOptions - Options for the Droppable instance.
+   * @param {T | (() => T) | { set: ((T) => void), get: (() => T)}  } options.items - An accessor for the items associated with the droppable.
+   * @param {(T) => void=} [options.setItems] - A function to set the items in the droppable.
+   */
+  addDroppable(element, options) {
+    options.items = toArrayAccessors(options.items)
+    options.items.set = options.setItems || options.items.set
+
+    const droppable = new Droppable(
+      {
+        ...options?.droppableOptions,
+        id: options.items.get(),
+        element,
+        accept: options.accept,
+        data: { ...options, ...options?.droppableOptions?.data, isContainer: true },
+      },
+      this.manager,
+    )
+
+    containerMap.set(element, options)
+
+    return {
+      droppable,
+      options,
+      destroy() {
+        droppable.destroy()
+      },
+    }
+  }
+
+  addHandle(element) {
+    requestAnimationFrame(() => {
+      const nearest = getNearestParentElementFromMap(element, itemMap)
+      nearest.draggable.handle = element
+    })
+  }
+}

package/lib/utils.js

@@ -0,0 +1,51 @@
+/**
+ * Moves an element within an array from one index to another.
+ *
+ * @template {any[]} T
+ * @param {T} arr - The array to modify.
+ * @param {number} from - The index of the element to move.
+ * @param {number} to - The index to move the element to.
+ * @returns {T} The modified array with the element moved.
+ */
+export const move = (arr, from, to) => {
+  arr.splice(to, 0, arr.splice(from, 1)[0])
+  return arr
+}
+
+/**
+ * Checks if a target value exists within an object or its nested structures.
+ *
+ * @param {any} obj - The object to search within.
+ * @param {any} target - The value to search for.
+ * @returns {boolean} True if the target value is found, otherwise false.
+ */
+export const hasValue = (obj, target) => {
+  if (obj === target) return true
+  if (Array.isArray(obj)) return obj.some((v) => hasValue(v, target))
+  if (obj && typeof obj === 'object') return Object.values(obj).some((v) => hasValue(v, target))
+  return false
+}
+
+export const getNearestParentElementFromMap = (element, map) => {
+  let parent = element.parentElement
+  while (parent) {
+    if (map.has(parent)) {
+      return map.get(parent)
+    }
+    parent = parent.parentElement
+  }
+  return null
+}
+
+export const toArrayAccessors = (arr) => {
+  const mappedArr = Array.isArray(arr)
+    ? { get: () => arr, set: (items) => arr.splice(0, items.length, ...items) }
+    : typeof arr === 'function'
+    ? { get: arr, set: (items) => arr().splice(0, items.length, ...items)  }
+    : arr
+  return mappedArr
+}
+
+export function toItemAccessor(item) {
+  return typeof item === 'function' ? item : () => item
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "unsortable",
+  "version": "0.0.1",
+  "description": "Headless drag-and-drop library for nested sorting using state instead of DOM mutations.",
+  "main": "lib/index.js",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./svelte": "./svelte/index.js",
+    "./vue": "./vue/index.js"
+  },
+  "keywords": [
+    "drag-and-drop",
+    "sortable",
+    "nested",
+    "headless",
+    "state-driven",
+    "reactive",
+    "sort",
+    "reorder",
+    "javascript",
+    "library",
+    "UI logic",
+    "Svelte",
+    "SvelteKit",
+    "agnostic",
+    "vanilla js"
+  ],
+  "author": "jakobrosenberg@gmail.com",
+  "license": "ISC",
+  "dependencies": {
+    "@dnd-kit/dom": "^0.1.18"
+  },
+  "optionalDependencies": {
+    "svelte": "^5.0.0",
+    "vue": "^3.0.0"
+  },
+  "release-it": {
+    "git": false,
+    "plugins": {
+      "release-it-pnpm": {}
+    }
+  },
+  "scripts": {
+    "release": "release-it",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/svelte/index.js

@@ -0,0 +1,12 @@
+import { Unsortable } from '../lib'
+import { onDestroy } from 'svelte'
+
+class UnsortableSvelte extends Unsortable {
+  /** @param {ConstructorParameters<typeof Unsortable>[0]=} options */
+  constructor(options) {
+    super(options)
+    onDestroy(() => this.destroy())
+  }
+}
+
+export { UnsortableSvelte as Unsortable }

package/vue/index.js

@@ -0,0 +1,26 @@
+import { Unsortable } from '../lib'
+import { onUnmounted } from 'vue'
+
+/**
+ * @typedef {Object} UnsortableVueOptions
+ * @property {boolean} [autoAttach=true] - Whether to automatically attach the Unsortable instance to the drag manager.
+ */
+
+/**
+ * @type {UnsortableVueOptions}
+ */
+const defaultOptions = {
+  autoAttach: true,
+}
+
+class UnsortableSvelte extends Unsortable {
+  /**
+   * @param {UnsortableVueOptions=} options - Configuration options for Unsortable.
+   */
+  constructor(options) {
+    super({ ...defaultOptions, ...options })
+    onUnmounted(() => this.destroy())
+  }
+}
+
+export { UnsortableSvelte as Unsortable }