Test store data types update & fixes

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.42.1] - 2019-01-07
+### Fixed
+- Fix `dcc.Store` type changes [#427](https://github.com/plotly/dash-core-components/pull/427)
+
 ## [0.42.0] - 2018-12-27
 ### Fixed
 - Fix `dcc.Store` null values in list causing an infinite loop [#424](https://github.com/plotly/dash-core-components/pull/424)

dash_core_components/dash_core_components.dev.js

@@ -114609,42 +114609,65 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 
 
+/**
+ * Deep equality check to know if the data has changed.
+ *
+ * @param {*} newData - New data to compare
+ * @param {*} oldData - The old data to compare
+ * @returns {boolean} The data has changed.
+ */
 
-function dataCheck(data, old) {
-  // Assuming data and old are of the same type.
-  var oldNull = ramda__WEBPACK_IMPORTED_MODULE_0___default.a.isNil(old);
-  var newNull = ramda__WEBPACK_IMPORTED_MODULE_0___default.a.isNil(data);
+function dataChanged(newData, oldData) {
+  var oldNull = Object(ramda__WEBPACK_IMPORTED_MODULE_0__["isNil"])(oldData);
+  var newNull = Object(ramda__WEBPACK_IMPORTED_MODULE_0__["isNil"])(newData);
 
-  if ((oldNull || newNull) && !(oldNull && newNull)) {
-    return true;
+  if (oldNull || newNull) {
+    return oldNull !== newNull;
   }
 
-  var type = ramda__WEBPACK_IMPORTED_MODULE_0___default.a.type(data);
+  var newType = Object(ramda__WEBPACK_IMPORTED_MODULE_0__["type"])(newData);
 
-  if (type === 'Array') {
-    if (data.length !== old.length) {
+  if (newType !== Object(ramda__WEBPACK_IMPORTED_MODULE_0__["type"])(oldData)) {
+    return true;
+  }
+
+  if (newType === 'Array') {
+    if (newData.length !== oldData.length) {
       return true;
     }
 
-    for (var i = 0; i < data.length; i++) {
-      if (dataCheck(data[i], old[i])) {
+    for (var i = 0; i < newData.length; i++) {
+      if (dataChanged(newData[i], oldData[i])) {
         return true;
       }
     }
-  } else if (ramda__WEBPACK_IMPORTED_MODULE_0___default.a.contains(type, ['String', 'Number'])) {
-    return old !== data;
-  } else if (type === 'Object') {
-    return ramda__WEBPACK_IMPORTED_MODULE_0___default.a.any(function (_ref) {
+  } else if (Object(ramda__WEBPACK_IMPORTED_MODULE_0__["contains"])(newType, ['String', 'Number', 'Boolean'])) {
+    return oldData !== newData;
+  } else if (newType === 'Object') {
+    var oldEntries = Object.entries(oldData);
+    var newEntries = Object.entries(newData);
+
+    if (oldEntries.length !== newEntries.length) {
+      return true;
+    }
+
+    return Object(ramda__WEBPACK_IMPORTED_MODULE_0__["any"])(function (_ref) {
       var _ref2 = _slicedToArray(_ref, 2),
           k = _ref2[0],
           v = _ref2[1];
 
-      return dataCheck(v, old[k]);
-    })(Object.entries(data));
+      return dataChanged(v, oldData[k]);
+    })(newEntries);
   }
 
   return false;
 }
+/**
+ * Abstraction for the memory storage_type to work the same way as local/session
+ *
+ * Each memory Store component get it's own MemStore.
+ */
+
 
 var MemStore =
 /*#__PURE__*/
@@ -114689,6 +114712,12 @@ function () {
 
   return MemStore;
 }();
+/**
+ * Abstraction for local/session storage_type.
+ *
+ * Single instances for localStorage, sessionStorage
+ */
+
 
 var WebStore =
 /*#__PURE__*/
@@ -114797,7 +114826,7 @@ function (_React$Component) {
 
       var old = this._backstore.getItem(id);
 
-      if (ramda__WEBPACK_IMPORTED_MODULE_0___default.a.isNil(old) && data) {
+      if (Object(ramda__WEBPACK_IMPORTED_MODULE_0__["isNil"])(old) && data) {
         // Initial data mount
         this._backstore.setItem(id, data);
 
@@ -114810,7 +114839,7 @@ function (_React$Component) {
         return;
       }
 
-      if (setProps && dataCheck(old, data)) {
+      if (setProps && dataChanged(old, data)) {
         setProps({
           data: old,
           modified_timestamp: this._backstore.getModified(id)
@@ -114843,18 +114872,20 @@ function (_React$Component) {
             modified_timestamp: this._backstore.getModified(id)
           });
         }
-      } else if (data) {
-        var old = this._backstore.getItem(id); // Only set the data if it's not the same data.
 
+        return;
+      }
 
-        if (dataCheck(data, old)) {
-          this._backstore.setItem(id, data);
+      var old = this._backstore.getItem(id); // Only set the data if it's not the same data.
 
-          if (setProps) {
-            setProps({
-              modified_timestamp: this._backstore.getModified(id)
-            });
-          }
+
+      if (dataChanged(data, old)) {
+        this._backstore.setItem(id, data);
+
+        if (setProps) {
+          setProps({
+            modified_timestamp: this._backstore.getModified(id)
+          });
         }
       }
     }
@@ -114892,7 +114923,7 @@ Store.propTypes = {
   /**
    * The stored data for the id.
    */
-  data: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.object, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.array, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string]),
+  data: prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.object, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.array, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.number, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.string, prop_types__WEBPACK_IMPORTED_MODULE_2___default.a.bool]),
 
   /**
    * Set to true to remove the data contained in `data_key`.

dash_core_components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.42.0",
+  "version": "0.42.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

dash_core_components/version.py

@@ -1 +1 @@
-__version__ = '0.42.0'
+__version__ = '0.42.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dash-core-components",
-  "version": "0.42.0",
+  "version": "0.42.1",
   "description": "Core component suite for Dash",
   "repository": {
     "type": "git",

src/components/Store.react.js

@@ -1,32 +1,51 @@
-import R from 'ramda';
+import {isNil, type, contains, any} from 'ramda';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-function dataCheck(data, old) {
-    // Assuming data and old are of the same type.
-    const oldNull = R.isNil(old);
-    const newNull = R.isNil(data);
+/**
+ * Deep equality check to know if the data has changed.
+ *
+ * @param {*} newData - New data to compare
+ * @param {*} oldData - The old data to compare
+ * @returns {boolean} The data has changed.
+ */
+function dataChanged(newData, oldData) {
+    const oldNull = isNil(oldData);
+    const newNull = isNil(newData);
     if (oldNull || newNull) {
         return oldNull !== newNull;
     }
-    const type = R.type(data);
-    if (type === 'Array') {
-        if (data.length !== old.length) {
+    const newType = type(newData);
+    if (newType !== type(oldData)) {
+        return true;
+    }
+    if (newType === 'Array') {
+        if (newData.length !== oldData.length) {
             return true;
         }
-        for (let i = 0; i < data.length; i++) {
-            if (dataCheck(data[i], old[i])) {
+        for (let i = 0; i < newData.length; i++) {
+            if (dataChanged(newData[i], oldData[i])) {
                 return true;
             }
         }
-    } else if (R.contains(type, ['String', 'Number'])) {
-        return old !== data;
-    } else if (type === 'Object') {
-        return R.any(([k, v]) => dataCheck(v, old[k]))(Object.entries(data));
+    } else if (contains(newType, ['String', 'Number', 'Boolean'])) {
+        return oldData !== newData;
+    } else if (newType === 'Object') {
+        const oldEntries = Object.entries(oldData);
+        const newEntries = Object.entries(newData);
+        if (oldEntries.length !== newEntries.length) {
+            return true;
+        }
+        return any(([k, v]) => dataChanged(v, oldData[k]))(newEntries);
     }
     return false;
 }
 
+/**
+ * Abstraction for the memory storage_type to work the same way as local/session
+ *
+ * Each memory Store component get it's own MemStore.
+ */
 class MemStore {
     constructor() {
         this._data = {};
@@ -58,6 +77,11 @@ class MemStore {
     }
 }
 
+/**
+ * Abstraction for local/session storage_type.
+ *
+ * Single instances for localStorage, sessionStorage
+ */
 class WebStore {
     constructor(storage) {
         this._storage = storage;
@@ -129,7 +153,7 @@ export default class Store extends React.Component {
         }
 
         const old = this._backstore.getItem(id);
-        if (R.isNil(old) && data) {
+        if (isNil(old) && data) {
             // Initial data mount
             this._backstore.setItem(id, data);
             if (setProps) {
@@ -140,7 +164,7 @@ export default class Store extends React.Component {
             return;
         }
 
-        if (setProps && dataCheck(old, data)) {
+        if (setProps && dataChanged(old, data)) {
             setProps({
                 data: old,
                 modified_timestamp: this._backstore.getModified(id),
@@ -165,16 +189,16 @@ export default class Store extends React.Component {
                     modified_timestamp: this._backstore.getModified(id),
                 });
             }
-        } else if (data) {
-            const old = this._backstore.getItem(id);
-            // Only set the data if it's not the same data.
-            if (dataCheck(data, old)) {
-                this._backstore.setItem(id, data);
-                if (setProps) {
-                    setProps({
-                        modified_timestamp: this._backstore.getModified(id),
-                    });
-                }
+            return;
+        }
+        const old = this._backstore.getItem(id);
+        // Only set the data if it's not the same data.
+        if (dataChanged(data, old)) {
+            this._backstore.setItem(id, data);
+            if (setProps) {
+                setProps({
+                    modified_timestamp: this._backstore.getModified(id),
+                });
             }
         }
     }
@@ -213,6 +237,7 @@ Store.propTypes = {
         PropTypes.array,
         PropTypes.number,
         PropTypes.string,
+        PropTypes.bool,
     ]),
 
     /**