dataflux 1.15.1 → 1.16.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
 
@@ -576,6 +640,7 @@ 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)                                                                                                                                                            |
 
 ### Insert vs. Mock
 
@@ -631,6 +696,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 +784,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,9 @@ 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, "setId", function (id) {
       _this.id = id;
     });

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

@@ -359,6 +359,9 @@ var Store = exports["default"] = /*#__PURE__*/function () {
     key: "hasChanged",
     value: function hasChanged(type, object) {
       var _this8 = this;
+      if (!this.models[type]) {
+        throw new Error("Not valid model type");
+      }
       var _hasChanged = function _hasChanged(type, object) {
         var obj = _this8.models[type].storedObjects[object.getId()];
         return !obj || obj.fingerprint !== obj.object.getFingerprint();
@@ -367,7 +370,7 @@ var Store = exports["default"] = /*#__PURE__*/function () {
         return _hasChanged(type, object);
       } else {
         return Object.values(this.models[type].storedObjects).some(function (i) {
-          return _hasChanged(type, i);
+          return _hasChanged(type, i.object);
         });
       }
     }