@dhmk/dom-utils

@dhmk/dom-utils

A collection of DOM related utils.

list<T>(parent: Element, childFactory: (data: T, index: number) => Child, getKey?: (data: T) => Key): (newData: T[]) => void

type Child<T> = {
  node: Element;
  update?: (data: T, index: number) => void;
  dispose?: () => void;
  insert?: (parent: Element, node: Element, ref: Element | null) => void;
  remove?: (node: Element) => void;
};

const defaultKey = (x) => ("id" in x ? x.id : x);

Syncs data list with DOM elements.

Usage:

const sync = list(document.getElementById("items"), (data) => {
  const node = document.createElement('div')
  // ...set up node

  return {
    node, // required

    // optional:

    update(newData, index) {} // called when a data item with the same key is updated
    dispose() {} // called when a new data list doesn't contain an item with the key
    insert(parent, node, refNode) {} // customize node insertion; default: parent.insertBefore(node, refNode)
    remove(node) {} // customize node deletion; default: node.remove()
  }
})

sync([1, 2, 3]) // inserts nodes
sync([3, 1]) // moves `3` and deletes `2`