data-joint
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.4 • Public • Published

    data-joint

    NPM package Build Size Dependencies

    Library to perform data joins with any type of JavaScript objects. Useful in digest cycles where it's important to minimize changes to a view for performance reasons, such as DOM manipulation. The module binds data points to objects via hidden attributes, and performs diffing comparisons across multiple iterations to ensure objects are not created or removed unnecessarily, thus keeping view changes to a minimum.

    Quick start

    import dataJoint from 'data-joint';
    

    or

    const dataJoint = require('data-joint');
    

    or even

    <script src="//unpkg.com/data-joint"></script>
    

    then

    const myData = [{ id: 0, val: 2 }, { id: 1, val: 4 }, { id: 2, val: 7 }];
    const myView = new Set();
    
    dataJoint(myData, [...myView], 
        obj => myView.add(obj), // append obj
        obj => myView.delete(obj), // remove obj
        {
            createObj: () => ({}),
            updateObj: (obj, d) => { obj.double = d.val * 2 },
            exitObj: obj => { obj.double = 0 },
            idAccessor: d => d.id
        }
    );
    

    API reference

    Syntax

    dataJoint(data, existingObjs, appendObjFn, removeObjFn, [{options}]);

    Arguments

    data: An array of data points. Each point should be an object that supports attribute binding.

    existingObjs: An array of view objects to join the data with.

    appendObjFn: The method to add a new object to the view. The object is passed as single argument: obj => { ... }.

    removeObjFn: The method to remove an existing object from the view. The object is passed as single argument: obj => { ... }.

    Options

    An optional configuration object supporting the additional arguments:

    Option Description Default
    createObj The method to create an entering view object for a new data point that does not have a corresponding object. The data point is passed as single argument: d => { ... }. The method should return a new object. d => ({})
    updateObj The method to update an existing bound object with new data. The object and the data point are passed as arguments: (obj, d) => { ... }. This method is also called for entering objects after createObj. (obj, d) => {}
    exitObj The method to handle exiting objects which no longer have a corresponding data point. The unbound object is passed as single argument: obj => { ... }. This method is called prior to removing it from the view via removeObjectFn. obj => {}
    objBindAttr The attribute name used to bind data points to view objects. Each data point passed through the digest will be added this attribute, and it will be used for diffing across multiple iterations. __obj
    dataBindAttr The attribute name used to bind view objects to data points. Each object maintained by the digest will be added this attribute, and it will be used for diffing across multiple iterations. __data
    idAccessor A data point accessor function to extract the point unique identifier. This is used for comparing data points across multiple iterations. If no idAccessor is supplied, the data point object reference will be used instead for comparisons. The data point is passed as single argument: d => {...}. The method should return a unique identifier. undefined
    purge A boolean value. If set to true it will bypass the data diffing, resulting in all the existingObjs being marked for removal and new objects created for the all the items in the input data. false

    Install

    npm i data-joint

    DownloadsWeekly Downloads

    7,343

    Version

    1.2.4

    License

    MIT

    Unpacked Size

    78.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • vasturiano