feat: server rendered list property mapping (#40)

* add a test for the maybeTransformData method invocation upon instantiation

* make the data argument optional so property mapping can work on server rendered lists as well

* update one of the server rendered samples to utilise property mapping

Author: Hesam Bahrami

dev/server-rendered-list.html

@@ -15,6 +15,9 @@ <h1>A server-rendered list</h1>
 
   <p>The main goal is to create a tree-like list of nested items. You should be able to achieve that by simply dragging and dropping the items using your mouse. Touch screens are not supported yet! 😐</p>
 
+  <input type="checkbox" id="property-mapping" onchange="updateList()">
+  <label for="property-mapping">Use property mapping (affects the list data structure logged to the console after each drag and drop)</label>
+
   <ul id="draggable">
     <li data-id="1">Topic 1</li>
     <li data-id="2">Topic 2</li>
@@ -34,19 +37,28 @@ <h1>A server-rendered list</h1>
 </div>
 
 <!-- Scripts -->
-<script src="../dist/nested-sort.umd.min.js"></script>
+<script src="../dist/nested-sort.umd.js"></script>
 <script>
-  (function() {
-    new NestedSort({
+  function updateList() {
+    if (window.ns) window.ns.destroy()
+
+    const usePropertyMapping = document.getElementById('property-mapping').checked
+    window.ns = new NestedSort({
       actions: {
         onDrop: function (data) {
-          console.log(data)
+          console.log(`data ${usePropertyMapping ? 'with' : 'without'} property mapping`, data)
         }
       },
+      propertyMap: usePropertyMapping ? {
+        id: 'item_id',
+        order: 'position',
+      } : undefined,
       el: '#draggable',
       droppingEdge: 5
     })
-  })()
+  }
+
+  updateList()
 </script>
 </body>
 </html>

src/data-engine.js

@@ -1,7 +1,7 @@
 class DataEngine {
   /**
    * @constructor
-   * @param {object[]} data
+   * @param {object[]} [data]
    * @param {object} [propertyMap={}]
    */
   constructor({ data, propertyMap = {} }) {
@@ -14,7 +14,7 @@ class DataEngine {
   }
 
   maybeTransformData() {
-    if (!Object.keys(this.propertyMap).length) return
+    if (!Object.keys(this.propertyMap).length || !Array.isArray(this.data)) return
 
     const getItemPropProxyName = this.getItemPropProxyName.bind(this)
 

test/data-engine.test.js

@@ -56,6 +56,22 @@ describe('DataEngine class', () => {
       expect((new DataEngine(dataEngineConfig)).sortedData).toEqual([])
       expect((new DataEngine(dataEngineConfig)).sortedDataDomArray).toEqual([])
     })
+
+    it('should invoke the maybeTransformData method', () => {
+      jest.spyOn(DataEngine.prototype, 'maybeTransformData')
+      const de = new DataEngine({})
+      expect(de.maybeTransformData).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not throw an error if only the propertyMap options is defined', () => {
+      jest.spyOn(DataEngine.prototype, 'maybeTransformData')
+      const de = new DataEngine({
+        propertyMap: {
+          id: 'item_id',
+        }
+      })
+      expect(de.maybeTransformData).toHaveBeenCalledTimes(1)
+    })
   })
 
   describe('sortListItems method', () => {