@dhmk/dom-utils
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    @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`

    Keywords

    Install

    npm i @dhmk/dom-utils

    DownloadsWeekly Downloads

    3

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    14.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • dhmk083