dataflux 1.15.2 → 1.17.0

package/README.md

@@ -254,6 +254,70 @@ function MyComponent() {
 }
 ```
 
+### Example 7 - React props and observability
+
+If you pass an object as a prop to a React component, the component will not refresh if the object changes.
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    store.findAll("book", "books", this, ({price}) => price < 20);
+  }
+
+  render(){
+    const {books} = this.state;
+
+    return books.map(book =>
+            <BookView
+                    // key={book.getFingerprint()}
+                    book={book}
+            />);
+  }
+}
+
+class BookView extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  
+  render(){
+    const {book} = this.props;
+
+    return <div>book.price</div>;
+  }
+}
+
+
+
+```
+If you now do `books[0].set("price", 18)`, the BookView object will not update the price. You could address this by adding a `key={book.getFingerprint()}` prop. However, this approach forces the mounting of the component at every object change.
+
+A better approach is to use the method `didUpdate()` inside `componentDidUpdate` to check if any of the objects in the props changed. 
+
+```jsx
+class BookView extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidUpdate() {
+    store.didUpdate(this);
+  }
+  
+  render(){
+    const {book} = this.props;
+
+    return <div>book.price</div>;
+  }
+}
+```
+
+Without further changes to the code, the new `book.price` will be rendered when the book object in the props is edited.
+
 
 ## Configuration
 
@@ -286,25 +350,25 @@ const book = new Model("book", options);
 
 All the possible options for a model creation are (they are all optional):
 
-| Name         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |
-|--------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------|
-| retrieve     | Describes the operation to retrieve the collection of objects from the REST API. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                  | `{method: "get"}`    |
-| insert       | Describes the operation to insert a new object in the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                 | `{method: "post"}`   |
-| update       | Describes the operation to update objects of the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                      | `{method: "put"}`    |
-| delete       | Describes the operation to remove objects from the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{method: "delete"}` |
-| fields       | An array of strings defining which attributes the retrieved objects should have. Essentially, it allows you to contemporarily specify the [X-Fields header](https://flask-restplus.readthedocs.io/en/stable/mask.html) and the [fields GET parameter](https://developers.google.com/slides/api/guides/performance#partial). This reduces transfer size and memory usage. E.g., if you have a collection of books, of which you are interested only in the name, you can define `fields: ["name"]`. In combination with `load` it allows for partial lazy load of the objects. | All the fields       |
-| headers      | A dictionary of headers for the HTTP request. E.g., `{"Authorization": "bearer XXXX"}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | No headers           |
-| load         | A function that allows to enrich the objects on demand. E.g., you can use `fields` to download only the titles of a collection of books, and `load` to load completely the object. See [object enrichment](#object-enrichment).                                                                                                                                                                                                                                                                                                                                               |
-| axios        | It allows to specify an axios instance to be used for the queries. If not specified, a new one will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | A new axios instance |
-| parseMoment  | Automatically creates Moment.js objects out of ISO8601 strings. E.g., if an object has a property `createdAt: "2022-01-07T21:38:50.295Z"`, this will be transformed to a moment object.                                                                                                                                                                                                                                                                                                                                                                                       |                      | 
-| hiddenFields | An array of attribute names that will never be sent back to the API. E.g., if you set `hiddenFields: ["pages"]`, a book object can contain an attribute `pages` locally, but this will be stripped out in PUT/POST requests.                                                                                                                                                                                                                                                                                                                                                  |
-| deep         | A boolean defining if nested objects should be enriched with the object methods.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | true                 |
-| lazyLoad     | A boolean defining if the model should be lazy loaded on the first use. This takes precedence over the lazyLoad declared during store initialization.                                                                                                                                                                                                                                                                                                                                                                                                                         | false                |
-| validate     | A dictionary containing functions to validate the objects of this model. See [objects validation](#objects-validation)                                                                                                                                                                                                                                                                                                                                                                                                                                                        | no validation        |
-| autoRefresh  | Set auto refresh for the specific model. See `autoRefresh` in the [store config](#configuration).                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                      |
-| autoSave     | It allows to specify `autoSave` at model level. If store.autoSave is true, `autoSave: false` at model level will allow to disable autoSave only for the specific model.                                                                                                                                                                                                                                                                                                                                                                                                       |
-| pre          | A function that is executed for every object retrieved, before creating the collection in the store. It is useful for pre-processing every data item received from the API.                                                                                                                                                                                                                                                                                                                                                                                                   |
-| post         | A function that is executed for every object retrieved before delete, update, and insert operations. It is useful for post-processing every data item before sending them back to the API.                                                                                                                                                                                                                                                                                                                                                                                    |
+| Name                 | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Default              |
+|----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------|
+| retrieve             | Describes the operation to retrieve the collection of objects from the REST API. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                  | `{method: "get"}`    |
+| insert               | Describes the operation to insert a new object in the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                 | `{method: "post"}`   |
+| update               | Describes the operation to update objects of the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                      | `{method: "put"}`    |
+| delete               | Describes the operation to remove objects from the collection. It can be an operation object or a function. See [operations](#operations).                                                                                                                                                                                                                                                                                                                                                                                                                                    | `{method: "delete"}` |
+| fields               | An array of strings defining which attributes the retrieved objects should have. Essentially, it allows you to contemporarily specify the [X-Fields header](https://flask-restplus.readthedocs.io/en/stable/mask.html) and the [fields GET parameter](https://developers.google.com/slides/api/guides/performance#partial). This reduces transfer size and memory usage. E.g., if you have a collection of books, of which you are interested only in the name, you can define `fields: ["name"]`. In combination with `load` it allows for partial lazy load of the objects. | All the fields       |
+| headers              | A dictionary of headers for the HTTP request. E.g., `{"Authorization": "bearer XXXX"}`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | No headers           |
+| load                 | A function that allows to enrich the objects on demand. E.g., you can use `fields` to download only the titles of a collection of books, and `load` to load completely the object. See [object enrichment](#object-enrichment).                                                                                                                                                                                                                                                                                                                                               |
+| axios                | It allows to specify an axios instance to be used for the queries. If not specified, a new one will be used.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | A new axios instance |
+| parseMoment          | Automatically creates Moment.js objects out of ISO8601 strings. E.g., if an object has a property `createdAt: "2022-01-07T21:38:50.295Z"`, this will be transformed to a moment object.                                                                                                                                                                                                                                                                                                                                                                                       |                      | 
+| hiddenFields         | An array of attribute names that will never be sent back to the API. E.g., if you set `hiddenFields: ["pages"]`, a book object can contain an attribute `pages` locally, but this will be stripped out in PUT/POST requests.                                                                                                                                                                                                                                                                                                                                                  |
+| deep                 | A boolean defining if nested objects should be enriched with the object methods.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | true                 |
+| lazyLoad             | A boolean defining if the model should be lazy loaded on the first use. This takes precedence over the lazyLoad declared during store initialization.                                                                                                                                                                                                                                                                                                                                                                                                                         | false                |
+| validate             | A dictionary containing functions to validate the objects of this model. See [objects validation](#objects-validation)                                                                                                                                                                                                                                                                                                                                                                                                                                                        | no validation        |
+| autoRefresh          | Set auto refresh for the specific model. See `autoRefresh` in the [store config](#configuration).                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |                      |
+| autoSave             | It allows to specify `autoSave` at model level. If store.autoSave is true, `autoSave: false` at model level will allow to disable autoSave only for the specific model.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| pre(object, objects) | A function that is executed for every object retrieved, before creating the collection in the store. It is useful for pre-processing every data item received from the API. It receives in input a object of the collection (first parameter) and the entire collection (second parameter).                                                                                                                                                                                                                                                                                   |
+| post                 | A function that is executed for every object retrieved before delete, update, and insert operations. It is useful for post-processing every data item before sending them back to the API. It receives in input a object of the collection (first parameter) and the entire collection (second parameter).                                                                                                                                                                                                                                                                    |
 
 ### Operations
 As described in the table above, there are four possible operations: **retrieve, insert, update,** and **delete**. An operation can be defined as an operation object or a function.
@@ -576,6 +640,8 @@ The store has the following method.
 | reset(type)                                            | This method syncs all the objects in the store with the remote version offered by the REST APIs (`remote -> local`). Remote changes are applied locally, including adding/removing objects. Objects edited locally but not yet persisted are reverted to the corresponding remote object. If a model type is passed, only objects of that type will be reset.                                                                                       |
 | findSync(type, filterFunction)                         | This method returns the objects in a synchronous way (no Promise). However, *it works only if you already performed an async operation (e.g., like refresh, load, find, subscribe) or if you set lazyLoad to false and the store had enough time to load.*                                                                                                                                                                                          |
 | hasChanged(type, object)                               | This method receives in input a model type and an object (optional). It returns a boolean, `true` if the object is dirty (it changed but it has not yet being persisted). If the object is not passed, the method checks if any of the objects of the specified model type has changed.                                                                                                                                                             |
+| didUpdate(context)                                     | If you pass an object as a prop to a React component, the component will not refresh if the object changes. To address this, you can use this method inside the `componentDidUpdate` to check if any of the objects changed. See [example 6](#example-7---react-props-and-observability)                                                                                                                                                            |
+| getCollection(type)                                    | This method receives in input a model type . It returns all the raw (JSON) objects available for that model.                                                                                                                                                                                                                                                                                                                                        |
 
 ### Insert vs. Mock
 
@@ -631,6 +697,7 @@ Each object created is enriched with the following methods.
 | getError()                         | If an operation on an object triggers an error, this error can be retrieved with `getError()`. This allows to observe specific objects' errors, instead of the generic `store.on("error", ...)`.                                                                                                                                                                    |
 | getError(attributeName)            | This method allows you to check if the specificed attribute generated any error according to the validation property specified in the model. See [objects validation](#objects-validation).                                                                                                                                                                         | 
 | setError(error)                    | Additionally to DataFlux's errors, you can trigger your own errors with this method. Other components observing this objet's error will be notified.                                                                                                                                                                                                                |
+| isDataflux()                       | This method returns true for all dataflux objects.                                                                                                                                                                                                                                                                                                                  |
 
 ### Deep Objects
 When a model is declared with the option `deep: true` (default, see [model creation](#models-creation)), all the sub objects will also offer many of the methods above.
@@ -718,7 +785,7 @@ class MyComponent extends React.Component {
     return <TextField
             value={book.title}
             onChange={store.handleChange(book, "title")}
-            error={object.getError("title")} 
+            error={object.getError("title")}
             // E.g., in material UI the test field will be red in case of errors
     />;
   }

package/dist/BasicObj.js

@@ -78,6 +78,12 @@ var BasicObj = exports.BasicObj = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _id, null);
     _classPrivateFieldInitSpec(this, _error, {});
     _classPrivateFieldInitSpec(this, _model, void 0);
+    _defineProperty(this, "isDataflux", function () {
+      return true;
+    });
+    _defineProperty(this, "isMock", function () {
+      return false;
+    });
     _defineProperty(this, "setId", function (id) {
       _this.id = id;
     });

package/dist/Model.js

@@ -225,7 +225,9 @@ var Model = exports["default"] = /*#__PURE__*/_createClass(function Model(name)
       return _classPrivateFieldGet(_toArray, _this).call(_this, data);
     }).then(function (data) {
       var _this$options;
-      return (_this$options = _this.options) !== null && _this$options !== void 0 && _this$options.pre ? data.map(_this.options.pre) : data;
+      return (_this$options = _this.options) !== null && _this$options !== void 0 && _this$options.pre ? data.map(function (n) {
+        return _this.options.pre(n, data);
+      }) : data;
     });
   });
   _defineProperty(this, "insertObjects", function (objects) {
@@ -297,11 +299,12 @@ var Model = exports["default"] = /*#__PURE__*/_createClass(function Model(name)
     }
   });
   _classPrivateFieldInitSpec(this, _unWrap, function (objects) {
-    var data = Object.values(objects).map(function (object) {
+    var arrayObjects = Object.values(objects);
+    var data = arrayObjects.map(function (object) {
       return _classPrivateFieldGet(_removeHiddenFields, _this).call(_this, object.toJSON());
     }).map(function (object) {
       var _this$options2;
-      return (_this$options2 = _this.options) !== null && _this$options2 !== void 0 && _this$options2.post ? _this.options.post(object) : object;
+      return (_this$options2 = _this.options) !== null && _this$options2 !== void 0 && _this$options2.post ? _this.options.post(object, arrayObjects) : object;
     });
     if (data.value != null && Object.keys(data).length === 1) {
       return data.value;

package/dist/ReactStore.js

@@ -22,12 +22,12 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); } /*
  * MIT License
@@ -60,6 +60,19 @@ var ReactStore = exports["default"] = /*#__PURE__*/function (_ObserverStore) {
     _classCallCheck(this, ReactStore);
     _this = _callSuper(this, ReactStore, [options]);
     _classPrivateMethodInitSpec(_this, _ReactStore_brand);
+    _defineProperty(_this, "didUpdate", function (context) {
+      var _context$props;
+      var objects = Object.values((_context$props = context === null || context === void 0 ? void 0 : context.props) !== null && _context$props !== void 0 ? _context$props : {}).filter(function (i) {
+        return i.isDataflux();
+      });
+      var _f = objects.map(function (i) {
+        return i.getFingerprint();
+      }).join(".");
+      if (_f !== context.___obs_f) {
+        context.forceUpdate();
+      }
+      context.___obs_f = _f;
+    });
     _classPrivateFieldInitSpec(_this, _addSubscriptionToContext, function (context, subKey) {
       // I know...
       context.___obs_subkeys = context.___obs_subkeys || [];

package/dist/Store.js

@@ -74,6 +74,32 @@ var Store = exports["default"] = /*#__PURE__*/function () {
       });
       return filterFunction ? all.filter(filterFunction) : all;
     });
+    _defineProperty(this, "_validateTypeInput", function (type) {
+      if (!_this.models[type]) {
+        throw new Error("Not valid model type");
+      }
+    });
+    _defineProperty(this, "_getDiffSync", function (type) {
+      var objects = Object.values(_this.models[type].storedObjects);
+      var inserted = [];
+      var updated = [];
+      var deleted = [];
+      for (var _i = 0, _objects = objects; _i < _objects.length; _i++) {
+        var object = _objects[_i];
+        if (object.status === "new") {
+          inserted.push(object);
+        } else if (object.status === "deleted") {
+          deleted.push(object);
+        } else if (object.status === "old" && _this.hasChanged(type, object.object)) {
+          updated.push(object);
+        } // Nothing for mock objects
+      }
+      return {
+        inserted: inserted,
+        updated: updated,
+        deleted: deleted
+      };
+    });
     _defineProperty(this, "refreshObjectByType", function (type) {
       var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       return _this._getPromise(type).then(function () {
@@ -174,8 +200,14 @@ var Store = exports["default"] = /*#__PURE__*/function () {
         throw new Error("The provided status is not valid");
       }
       if (status === "mock") {
+        wrapper.isMock = function () {
+          return true;
+        };
         wrapper.insert = function () {
           _this.models[type].storedObjects[id].status = "new";
+          wrapper.isMock = function () {
+            return false;
+          };
           _this.update([wrapper]);
           delete wrapper.insert;
         };
@@ -359,6 +391,7 @@ var Store = exports["default"] = /*#__PURE__*/function () {
     key: "hasChanged",
     value: function hasChanged(type, object) {
       var _this8 = this;
+      this._validateTypeInput(type);
       var _hasChanged = function _hasChanged(type, object) {
         var obj = _this8.models[type].storedObjects[object.getId()];
         return !obj || obj.fingerprint !== obj.object.getFingerprint();
@@ -366,8 +399,12 @@ var Store = exports["default"] = /*#__PURE__*/function () {
       if (object) {
         return _hasChanged(type, object);
       } else {
-        return Object.values(this.models[type].storedObjects).some(function (i) {
-          return _hasChanged(type, i.object);
+        var _this$_getDiffSync = this._getDiffSync(type),
+          inserted = _this$_getDiffSync.inserted,
+          updated = _this$_getDiffSync.updated,
+          deleted = _this$_getDiffSync.deleted;
+        return [inserted, updated, deleted].some(function (i) {
+          return i.length > 0;
         });
       }
     }
@@ -380,26 +417,9 @@ var Store = exports["default"] = /*#__PURE__*/function () {
     key: "getDiff",
     value: function getDiff(type, ifLoaded) {
       var _this9 = this;
+      this._validateTypeInput(type);
       return this._getPromise(type, ifLoaded).then(function () {
-        var objects = Object.values(_this9.models[type].storedObjects);
-        var inserted = [];
-        var updated = [];
-        var deleted = [];
-        for (var _i = 0, _objects = objects; _i < _objects.length; _i++) {
-          var object = _objects[_i];
-          if (object.status === "new") {
-            inserted.push(object);
-          } else if (object.status === "deleted") {
-            deleted.push(object);
-          } else if (object.status === "old" && _this9.hasChanged(type, object.object)) {
-            updated.push(object);
-          } // Nothing for mock objects
-        }
-        return {
-          inserted: inserted,
-          updated: updated,
-          deleted: deleted
-        };
+        return _this9._getDiffSync(type);
       });
     }
   }, {
@@ -450,6 +470,20 @@ var Store = exports["default"] = /*#__PURE__*/function () {
         return this.models[type].promise;
       }
     }
+  }, {
+    key: "getCollection",
+    value: function getCollection(type) {
+      var _this12 = this;
+      return this._getPromise(type).then(function () {
+        return Object.values(_this12.models[type].storedObjects).map(function (i) {
+          return i.object;
+        }).sort(function (a, b) {
+          return a.getId().localeCompare(b.getId());
+        }).map(function (i) {
+          return i.toJSON();
+        });
+      });
+    }
   }]);
 }();
 function _error(error) {
@@ -458,9 +492,9 @@ function _error(error) {
   return Promise.reject(error);
 }
 function _deleteByFilter(type, filterFunction) {
-  var _this12 = this;
+  var _this13 = this;
   return this._getPromise(type).then(function () {
-    var deleted = Object.values(_this12.models[type].storedObjects).filter(function (i) {
+    var deleted = Object.values(_this13.models[type].storedObjects).filter(function (i) {
       return filterFunction(i.object);
     });
     var _iterator5 = _createForOfIteratorHelper(deleted),
@@ -481,7 +515,7 @@ function _deleteByFilter(type, filterFunction) {
   });
 }
 function _loadObjects(type) {
-  var _this13 = this;
+  var _this14 = this;
   var item = this.models[type];
   this.pubSub.publish("loading", {
     status: "start",
@@ -493,14 +527,14 @@ function _loadObjects(type) {
     try {
       for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
         var _item2 = _step6.value;
-        _classPrivateFieldGet(_insertObject, _this13).call(_this13, type, _item2, "old");
+        _classPrivateFieldGet(_insertObject, _this14).call(_this14, type, _item2, "old");
       }
     } catch (err) {
       _iterator6.e(err);
     } finally {
       _iterator6.f();
     }
-    _this13.pubSub.publish("loading", {
+    _this14.pubSub.publish("loading", {
       status: "end",
       model: type
     });