fix: Update README

Author: frankpagan

src/binding.js

@@ -0,0 +1,55 @@
+import observer from "@cocreate/observer"
+import form from "@cocreate/form"
+import action from "@cocreate/action"
+
+/**
+ * CoCreate-observer
+ * https://ws.cocreate.app/docs/observer
+ * Observes dom for new elements of a component and intializes it
+ * Components should support init per element and init all on page load
+ * flow example: observer.init(selector => callback=> initCroppieElement) // inits new element only
+ */
+ 
+observer.init({ 
+  name: 'CoCreateBoilerplateInit',
+  observe: ['subtree', 'childList'],
+  include: '.boilerplate',
+  callback: function(mutation) {
+    // console.log(mutation)
+    CoCreateBiolerplate.initElement(mutation.target)
+  }  
+})
+
+
+
+
+/**
+ * CoCreate-form
+ * https://ws.cocreate.app/docs/form
+ * flow example: form.init(selector => callback=> croppieSavefunc) /// for each
+ */
+ 
+form.init({
+	name: 'CoCreateBoilerplate',
+	selector: ".boilerplate",
+	callback: function(el) {
+		CoCreateBoilerplate.save(el);
+	}
+});
+
+
+
+/**
+ * CoCreate-action
+ * https://ws.cocreate.app/docs/action
+ * flow example: action.init(selector => callback=> croppieSavefunc => saveCompleteEvent)
+ *
+ */
+ 
+action.init({
+	action: "saveBoilerplate",
+	endEvent: "savedBoilerplate",
+	callback: (btn, data) => {
+		CoCreateBoilerplate.__saveBoilerplate(btn)
+	},
+})

src/crdt.js

@@ -1,7 +1,6 @@
 //CRDT Implementatiom
 import crdt from "@cocreate/crdt"
 import crud from "@cocreate/crud-client"
-import util from "@cocreate/utils"
 
 // CRDT Implementaion
 const {collection, document_id, name} = crud.GetAttr()
@@ -12,43 +11,23 @@ crdt.insertText({ collection, document_id, name, value, position })
 crdt.deleteText({ collection, document_id, name, position, length })
 crdt.replaceText({ collection, document_id, name, value })
 
-//. crdt listen and binding
+//. crdt change event
 /**
- * event: {
- *	detail: [{
- *		retain, //. position for insert and delete case
- *		insert, //. insert string
- *		delete, //. delete length
-	}]
+ *  event: {
+ *    detail: [{
+ *      collection: '',
+ *      document_id '',
+ *      name: '',
+ *      retain, //. position for insert and delete case
+ *		  insert, //. insert string
+ *		  delete, //. delete length
+ *    }]
  * }
  * 
  * ex:	{insert: "testing", retain: 8}
  *			{delete: 10, reatin: 7}
  */
 
-// example of binding the input to sync with crdt and maintain cursour positions
-input_element.addEventListener('cocreate-crdt-update', function(event) {
-  var info = event.detail;
-
-  var pos = 0;
-  var flag = true;
-
-  info.forEach(item => {
-    if (item.retain) {
-      flag = true;
-      pos = item.retain;
-    }
-    
-    if (item.insert || item.delete) {
-      if (flag == false) pos = 0;
-      flag = false;
-      if (item.insert) {
-        //. element's insert process 
-        // self.updateChangeData(this, item.insert, pos, pos)
-      } else if (item.delete) {
-        //. element's delete process
-        // self.updateChangeData(this, "", pos, pos + item.delete);
-      }
-    }
-  })
+element.addEventListener('cocreate-crdt-update', function(event) {
+  var info = event.detail; // details conatain collection document_id and name... use this to find your element
 })

src/crud.js

@@ -1,10 +1,10 @@
 // Crud implementation
-import observer from "@cocreate/observer"
 import crud from "@cocreate/crud-client"
-import form from "@cocreate/form"
 
 
-crud.listen('createDocuemnt' )
+crud.listen('createDocument', function(data) { doSomething })
+crud.listen('updateDocument', function(data) { doSomething })
+crud.listen('deleteDocument', function(data) { doSomething })
 
 // CRUD Implementation
 const el = document.querySelector('xxx') // el is dom element  
@@ -19,4 +19,4 @@ let async = await crud.listenAsync(event)
 
 crud.updateDocument({collection, document_id, name, element: "unique string"}) // {namespace, room, broadcast, broadcat_sender, async, event, delete_fields ...}
 crud.deleteDocument({collection, document_id, element: "unique string"}) // {namespace, room, broadcast, broadcat_sender, async, event, ...}
-crud.readDocumentList({collection, element: "unique string"}) //  {operator: {fetch, filter, order, search, startIndex}, is_collection, async, event, ...}
+crud.readDocumentList({collection, element: "unique string"}) // {operator: {fetch, filter, order, search, startIndex}, is_collection, async, event, ...}

src/list.js

@@ -1,6 +1,5 @@
 //Read list Implementation
-import observer from '@cocreate/observer'
-import ccfilter from '@cocreate/filter'
+import filter from '@cocreate/filter'
 import crud from '@cocreate/crud-client';
 import logic from '@cocreate/logic';
 import render from '@cocreate/render';
@@ -9,7 +8,7 @@ import render from '@cocreate/render';
 const {fetch_collection, is_collection_fetch, fetch_count} = crud.GetFetchAttr(el) //namespace, room, broadcast, broadcat_sender, 
 
 
-var filter = CoCreateFilter.setFilter(
+var filters = CoCreateFilter.setFilter(
 	el, 
 	attrName, /* default value = data-template_id*/ 
 	type, /* default value = template*/