feat: introduce default dataSource object or array

introduce default datasource object or array

src/array-context-element.spec.ts

@@ -150,7 +150,6 @@ test('It should update the data when click event triggered',(done) => {
             case 'SET_COMPLETE' : {
                 data[STATE_PROPERTY] = 'complete';
                 return [...context];
-
             }
         }
         return context;
@@ -211,4 +210,41 @@ test('It should toggle when user change the data',(done)=>{
         done();
     });
 
-})
+});
+
+test('it should provide a default array if there is no object assigned to it',(done) => {
+    const contextElement = createArrayContextElement(`<div>
+    <div watch="nama" content.enabled.watch="enabled" content.disabled.watch="disabled" class="divToWatch"></div>
+    <button click.action="TOGGLE_STATE" >Click</button>
+</div>`);
+    contextElement.reducer = (array,action) => {
+        const d = action.data;
+        d.nama = 'Name';
+        d.enabled = 'enabled';
+        d.disabled = 'disabled';
+        d._state = d._state === 'enabled' ? 'disabled' : 'enabled';
+        return [...array.slice(0,action.index),{...d},...array.slice(action.index+1,array.length)];
+    };
+    contextElement.setAttribute('data.key','id');
+    contextElement.data = [{id:'1'},{id:'2'}];
+    contextElement.onMounted(() => {
+        const myButtons = Array.from(contextElement.getElementsByTagName('button'));
+        const divsToWatch = Array.from(contextElement.querySelectorAll('.divToWatch'));
+        expect(divsToWatch.length).toBe(contextElement.data.length);
+        // first click
+        myButtons.forEach(b => b.click());
+
+        divsToWatch.forEach((div) => {
+            expect(div.innerHTML).toBe('enabled');
+        });
+
+
+        // second click
+        myButtons.forEach(b => b.click());
+        divsToWatch.forEach((div) => {
+            expect(div.innerHTML).toBe('disabled');
+        });
+        expect(divsToWatch.length).toBe(contextElement.data.length);
+        done();
+    });
+});

src/array-context-element.ts

@@ -45,6 +45,7 @@ export class ArrayContextElement<Item> extends ContextElement<Item[], Item> {
         };
         this.renderers = new Map<string, Renderer>();
         this.dataKeyPicker = defaultDataKeyPicker;
+        this.dataSource = [];
     }
 
     /**

src/context-element.spec.ts

@@ -3,6 +3,7 @@ import './index';
 import * as faker from 'faker';
 import uuid from "./libs/uuid";
 import {Action} from "./types";
+import {create} from "domain";
 
 /**
  *
@@ -110,3 +111,27 @@ test('It should perform update only against the node leaf',(done) => {
     });
 
 });
+
+test('it should provide a default object if there is no object assigned to it',(done) => {
+    const contextElement = createContextElement(`<div>
+    <div watch="nama" content.enabled.watch="nama_panjang" content.disabled.watch="nama_pendek" id="divToWatch"></div>
+    <button click.action="TOGGLE_STATE" id="myButton">Click</button>
+</div>`);
+    contextElement.reducer = (data,action) => {
+        data.nama = 'Okay';
+        data.nama_panjang = 'Okay Deh';
+        data.nama_pendek = 'Deh';
+        data._state = data?._state === 'enabled' ? 'disabled' : 'enabled';
+        return {...data}
+    };
+
+    contextElement.onMounted(() => {
+        const myButton = document.getElementById('myButton');
+        const divToWatch = document.getElementById('divToWatch');
+        myButton.click();
+        expect(divToWatch.innerHTML).toBe('Okay Deh');
+        myButton.click();
+        expect(divToWatch.innerHTML).toBe('Deh');
+        done();
+    });
+});

src/context-element.ts

@@ -40,6 +40,8 @@ export class ContextElement<Context, Item> extends HTMLElement {
         this.template = null;
         this.renderer = null;
         this.reducer = null;
+        // this is a data source
+        this.dataSource = {} as Context;
     }
 
     /**