@khanacademy/wonder-blocks-data 8.0.0 → 8.0.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-data
 
+## 8.0.3
+
+### Patch Changes
+
+-   5f4a4297: Make dependency on `flow-enums-runtime` explicit
+-   2b96fd59: Change flow-enums-runtime to be peer dependencies
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+
+## 8.0.2
+
+### Patch Changes
+
+-   580141ed: Always initialize SSR-only cache
+
+## 8.0.1
+
+### Patch Changes
+
+-   e5fa4d9e: Make sure ssr-only cache is initialized when purging caches in test environment
+
 ## 8.0.0
 
 ### Major Changes

package/dist/es/index.js

@@ -172,11 +172,10 @@ class SsrCache {
     };
 
     this.getEntry = id => {
-      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
+      const ssrEntry = Server.isServerSide() ? this._ssrOnlyCache.get(DefaultScope$2, id) : null;
+      const internalEntry = ssrEntry != null ? ssrEntry : this._hydrationCache.get(DefaultScope$2, id);
 
-      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope$2, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope$2, id);
-
-      if (this._ssrOnlyCache == null && internalEntry != null) {
+      if (!Server.isServerSide() && internalEntry != null) {
         this._hydrationCache.purge(DefaultScope$2, id);
       }
 
@@ -184,13 +183,11 @@ class SsrCache {
     };
 
     this.purgeData = predicate => {
-      var _this$_ssrOnlyCache2;
-
       const realPredicate = predicate ? (_, key, cachedEntry) => predicate(key, cachedEntry) : undefined;
 
       this._hydrationCache.purgeAll(realPredicate);
 
-      (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purgeAll(realPredicate);
+      this._ssrOnlyCache.purgeAll(realPredicate);
     };
 
     this.cloneHydratableData = () => {
@@ -201,7 +198,7 @@ class SsrCache {
       return (_cache$DefaultScope = cache[DefaultScope$2]) != null ? _cache$DefaultScope : {};
     };
 
-    this._ssrOnlyCache = Server.isServerSide() ? ssrOnlyCache || new SerializableInMemoryCache() : undefined;
+    this._ssrOnlyCache = ssrOnlyCache || new SerializableInMemoryCache();
     this._hydrationCache = hydrationCache || new SerializableInMemoryCache();
   }
 
@@ -212,9 +209,7 @@ class SsrCache {
       if (hydrate) {
         this._hydrationCache.set(DefaultScope$2, id, frozenEntry);
       } else {
-        var _this$_ssrOnlyCache3;
-
-        (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.set(DefaultScope$2, id, frozenEntry);
+        this._ssrOnlyCache.set(DefaultScope$2, id, frozenEntry);
       }
     }
 

package/dist/index.js

@@ -165,6 +165,12 @@ module.exports = require("react");
 
 /***/ }),
 /* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -187,12 +193,6 @@ const FetchPolicy = __webpack_require__(22).Mirrored(["CacheBeforeNetwork", "Cac
  * and functions are not allowed.
  */
 
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-core");
-
 /***/ }),
 /* 4 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -556,7 +556,7 @@ class RequestTracker {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SsrCache; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(13);
 
@@ -608,14 +608,14 @@ class SsrCache {
     };
 
     this.getEntry = id => {
-      var _this$_ssrOnlyCache$g, _this$_ssrOnlyCache;
-
       // Get the cached entry for this value.
-      // We first look in the ssr cache and then the hydration cache.
-      const internalEntry = (_this$_ssrOnlyCache$g = (_this$_ssrOnlyCache = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache.get(DefaultScope, id)) != null ? _this$_ssrOnlyCache$g : this._hydrationCache.get(DefaultScope, id); // If we are not server-side and we hydrated something, let's clear
+      // We first look in the ssr cache, if we need to.
+      const ssrEntry = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? this._ssrOnlyCache.get(DefaultScope, id) : null; // Now we defer to the SSR value, and fallback to the hydration cache.
+
+      const internalEntry = ssrEntry != null ? ssrEntry : this._hydrationCache.get(DefaultScope, id); // If we are not server-side and we hydrated something, let's clear
       // that from the hydration cache to save memory.
 
-      if (this._ssrOnlyCache == null && internalEntry != null) {
+      if (!_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() && internalEntry != null) {
         // We now delete this from our hydration cache as we don't need it.
         // This does mean that if another handler of the same type but
         // without some sort of linked cache won't get the value, but
@@ -632,8 +632,6 @@ class SsrCache {
     };
 
     this.purgeData = predicate => {
-      var _this$_ssrOnlyCache2;
-
       const realPredicate = predicate ? // We know what we're putting into the cache so let's assume it
       // conforms.
       // $FlowIgnore[incompatible-call]
@@ -641,7 +639,7 @@ class SsrCache {
 
       this._hydrationCache.purgeAll(realPredicate);
 
-      (_this$_ssrOnlyCache2 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache2.purgeAll(realPredicate);
+      this._ssrOnlyCache.purgeAll(realPredicate);
     };
 
     this.cloneHydratableData = () => {
@@ -658,7 +656,7 @@ class SsrCache {
       return (_cache$DefaultScope = cache[DefaultScope]) != null ? _cache$DefaultScope : {};
     };
 
-    this._ssrOnlyCache = _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__["Server"].isServerSide() ? ssrOnlyCache || new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]() : undefined;
+    this._ssrOnlyCache = ssrOnlyCache || new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]();
     this._hydrationCache = hydrationCache || new _serializable_in_memory_cache_js__WEBPACK_IMPORTED_MODULE_1__[/* SerializableInMemoryCache */ "a"]();
   }
 
@@ -671,12 +669,10 @@ class SsrCache {
       if (hydrate) {
         this._hydrationCache.set(DefaultScope, id, frozenEntry);
       } else {
-        var _this$_ssrOnlyCache3;
-
         // Usually, when server-side, this cache will always be present.
         // We do fake server-side in our doc example though, when it
         // won't be.
-        (_this$_ssrOnlyCache3 = this._ssrOnlyCache) == null ? void 0 : _this$_ssrOnlyCache3.set(DefaultScope, id, frozenEntry);
+        this._ssrOnlyCache.set(DefaultScope, id, frozenEntry);
       }
     }
 
@@ -921,7 +917,7 @@ class ScopedInMemoryCache {
 /* harmony import */ var _use_server_effect_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(16);
 /* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
 /* harmony import */ var _use_cached_effect_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
-/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
+/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
 
 
 
@@ -1123,7 +1119,7 @@ const purgeHydrationCache = predicate => _ssr_cache_js__WEBPACK_IMPORTED_MODULE_
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useServerEffect; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
@@ -1188,14 +1184,14 @@ const useServerEffect = (requestId, handler, options = {}) => {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return useCachedEffect; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _util_data_error_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(0);
 /* harmony import */ var _util_request_fulfillment_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var _util_status_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(6);
 /* harmony import */ var _use_shared_cache_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _use_request_interception_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
-/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2);
+/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
 
 
 
@@ -1584,125 +1580,9 @@ const mergeGqlContext = (defaultContext, overrides) => {
 
 /***/ }),
 /* 22 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-// Below we want to use `hasOwnProperty` on an object that doesn't have
-// `Object.prototype` in its proto chain, so we must extract it here.
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-// Map from an enum object to a reverse map of its values to names
-var reverseMapCache = typeof WeakMap === 'function' ? new WeakMap() : new Map();
-
-// Computes the reverse mapping of the enum object: from value to name.
-// Flow Enum values are unique (enforced by the parser), so this is a
-// one to one mapping.
-function getReverseMap(enumObject) {
-  var reverseMap = reverseMapCache.get(enumObject);
-  if (reverseMap !== undefined) {
-    return reverseMap;
-  }
-  // We aren't using `Object.values` because that gets enumerable
-  // properties, and our properties aren't enumerable.
-  var newReverseMap = new Map();
-  Object.getOwnPropertyNames(enumObject).forEach(function (name) {
-    newReverseMap.set(enumObject[name], name);
-  });
-  reverseMapCache.set(enumObject, newReverseMap);
-  return newReverseMap;
-}
-
-var EnumPrototype = Object.freeze(
-  Object.defineProperties(Object.create(null), {
-    isValid: {
-      value: function (x) {
-        return getReverseMap(this).has(x);
-      },
-    },
-    cast: {
-      value: function (x) {
-        return this.isValid(x) ? x : undefined;
-      },
-    },
-    members: {
-      value: function () {
-        return getReverseMap(this).keys();
-      },
-    },
-    getName: {
-      value: function (value) {
-        return getReverseMap(this).get(value);
-      }
-    }
-  })
-);
-
-// `members` is an object mapping name to value.
-function Enum(members) {
-  var o = Object.create(EnumPrototype);
-  for (var k in members) {
-    if (hasOwnProperty.call(members, k)) {
-      // Create non-enumerable properties.
-      Object.defineProperty(o, k, {value: members[k]});
-    }
-  }
-  return Object.freeze(o);
-}
-
-// Mirrored enum (string enum with no member initializers).
-// Optimized implementation, taking advantage of the fact that
-// keys and values are identical.
-var EnumMirroredPrototype = Object.freeze(
-  Object.defineProperties(Object.create(null), {
-    isValid: {
-      value: function (x) {
-        if (typeof x === 'string') {
-          return hasOwnProperty.call(this, x);
-        }
-        return false;
-      },
-    },
-    cast: {
-      value: EnumPrototype.cast,
-    },
-    members: {
-      value: function () {
-        // We aren't using `Object.values` because that gets enumerable
-        // properties, and our properties aren't enumerable.
-        return Object.getOwnPropertyNames(this).values();
-      },
-    },
-    getName: {
-      value: function (value) {
-        return value;
-      }
-    }
-  })
-);
-
-// `members` is an array of names (which, are also the values).
-Enum.Mirrored = function EnumMirrored(members) {
-  var o = Object.create(EnumMirroredPrototype);
-  for (var i = 0, len = members.length; i < len; ++i) {
-    // Value is same as key. Also, non-enumerable.
-    Object.defineProperty(o, members[i], {value: members[i]});
-  }
-  return Object.freeze(o);
-};
-
-Object.freeze(Enum.Mirrored);
-
-module.exports = Object.freeze(Enum);
+/***/ (function(module, exports) {
 
+module.exports = require("flow-enums-runtime");
 
 /***/ }),
 /* 23 */
@@ -1712,7 +1592,7 @@ module.exports = Object.freeze(Enum);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return fetchTrackedRequests; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return hasTrackedRequestsToBeFetched; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return abortInflightRequests; });
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _request_tracking_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);
 /* harmony import */ var _request_fulfillment_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(10);
@@ -1812,7 +1692,7 @@ const purgeCaches = () => {
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TrackData; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(3);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _util_request_tracking_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
 
@@ -2266,7 +2146,7 @@ const getGqlDataFromResponse = async response => {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
+/* harmony import */ var _util_types_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FetchPolicy", function() { return _util_types_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
 
 /* harmony import */ var _util_hydration_cache_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(15);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "8.0.0",
+  "version": "8.0.3",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,10 +14,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.1"
+    "@khanacademy/wonder-blocks-core": "^4.3.2"
   },
   "peerDependencies": {
     "@khanacademy/wonder-stuff-core": "^0.1.2",
+    "flow-enums-runtime": "^0.0.6",
     "react": "16.14.0"
   },
   "devDependencies": {

package/src/util/__tests__/ssr-cache.test.js

@@ -16,6 +16,54 @@ describe("../ssr-cache.js", () => {
         jest.restoreAllMocks();
     });
 
+    describe("#constructor", () => {
+        it("should default the ssr-only cache to a cache instance", () => {
+            // Arrange
+
+            // Act
+            const cache = new SsrCache();
+
+            // Assert
+            expect(cache._ssrOnlyCache).toBeInstanceOf(
+                SerializableInMemoryCache,
+            );
+        });
+
+        it("should set the hydration cache to the passed instance if there is one", () => {
+            // Arrange
+            const passedInstance = new SerializableInMemoryCache();
+
+            // Act
+            const cache = new SsrCache(null, passedInstance);
+
+            // Assert
+            expect(cache._ssrOnlyCache).toBe(passedInstance);
+        });
+
+        it("should default the hydration cache to a cache instance", () => {
+            // Arrange
+
+            // Act
+            const cache = new SsrCache();
+
+            // Assert
+            expect(cache._hydrationCache).toBeInstanceOf(
+                SerializableInMemoryCache,
+            );
+        });
+
+        it("should set the hydration cache to the passed instance if there is one", () => {
+            // Arrange
+            const passedInstance = new SerializableInMemoryCache();
+
+            // Act
+            const cache = new SsrCache(passedInstance);
+
+            // Assert
+            expect(cache._hydrationCache).toBe(passedInstance);
+        });
+    });
+
     describe("@Default", () => {
         it("should return an instance of SsrCache", () => {
             // Arrange

package/src/util/ssr-cache.js

@@ -26,15 +26,13 @@ export class SsrCache {
     }
 
     _hydrationCache: SerializableInMemoryCache;
-    _ssrOnlyCache: ?SerializableInMemoryCache;
+    _ssrOnlyCache: SerializableInMemoryCache;
 
     constructor(
         hydrationCache: ?SerializableInMemoryCache = null,
         ssrOnlyCache: ?SerializableInMemoryCache = null,
     ) {
-        this._ssrOnlyCache = Server.isServerSide()
-            ? ssrOnlyCache || new SerializableInMemoryCache()
-            : undefined;
+        this._ssrOnlyCache = ssrOnlyCache || new SerializableInMemoryCache();
         this._hydrationCache =
             hydrationCache || new SerializableInMemoryCache();
     }
@@ -54,7 +52,7 @@ export class SsrCache {
                 // Usually, when server-side, this cache will always be present.
                 // We do fake server-side in our doc example though, when it
                 // won't be.
-                this._ssrOnlyCache?.set(DefaultScope, id, frozenEntry);
+                this._ssrOnlyCache.set(DefaultScope, id, frozenEntry);
             }
         }
         return frozenEntry;
@@ -120,14 +118,18 @@ export class SsrCache {
     ): ?$ReadOnly<CachedResponse<TData>> => {
         // Get the cached entry for this value.
 
-        // We first look in the ssr cache and then the hydration cache.
+        // We first look in the ssr cache, if we need to.
+        const ssrEntry = Server.isServerSide()
+            ? this._ssrOnlyCache.get(DefaultScope, id)
+            : null;
+
+        // Now we defer to the SSR value, and fallback to the hydration cache.
         const internalEntry =
-            this._ssrOnlyCache?.get(DefaultScope, id) ??
-            this._hydrationCache.get(DefaultScope, id);
+            ssrEntry ?? this._hydrationCache.get(DefaultScope, id);
 
         // If we are not server-side and we hydrated something, let's clear
         // that from the hydration cache to save memory.
-        if (this._ssrOnlyCache == null && internalEntry != null) {
+        if (!Server.isServerSide() && internalEntry != null) {
             // We now delete this from our hydration cache as we don't need it.
             // This does mean that if another handler of the same type but
             // without some sort of linked cache won't get the value, but
@@ -165,7 +167,7 @@ export class SsrCache {
 
         // Apply the predicate to what we have in our caches.
         this._hydrationCache.purgeAll(realPredicate);
-        this._ssrOnlyCache?.purgeAll(realPredicate);
+        this._ssrOnlyCache.purgeAll(realPredicate);
     };
 
     /**

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -1,337 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`wonder-blocks-data example 1 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-          "fontSize": 16,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    >
-      This request will succeed and give us data!
-    </span>
-    Loading...
-  </div>
-  <div
-    aria-hidden="true"
-    className=""
-    style={
-      Object {
-        "MsFlexBasis": 12,
-        "MsFlexPreferredSize": 12,
-        "WebkitFlexBasis": 12,
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexBasis": 12,
-        "flexDirection": "column",
-        "flexShrink": 0,
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "width": 12,
-        "zIndex": 0,
-      }
-    }
-  />
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-          "fontSize": 16,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    >
-      This request will go boom and give us an error!
-    </span>
-    Loading...
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-data example 2 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-          "fontSize": 16,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    >
-      This cache has data!
-    </span>
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Inconsolata, monospace",
-          "fontSize": 17,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    >
-      I'm DATA from the hydration cache
-    </span>
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-data example 3 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <span
-    className=""
-    style={
-      Object {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-        "fontSize": 16,
-        "fontWeight": 400,
-        "lineHeight": "22px",
-      }
-    }
-  >
-    This received intercepted data!
-  </span>
-  If you see this, the example is broken!
-</div>
-`;
-
-exports[`wonder-blocks-data example 4 1`] = `"Sorry, no snapshot for you"`;
-
-exports[`wonder-blocks-data example 5 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <button
-    aria-disabled={false}
-    className=""
-    onBlur={[Function]}
-    onClick={[Function]}
-    onDragStart={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
-    role="button"
-    style={
-      Object {
-        "::MozFocusInner": Object {
-          "border": 0,
-        },
-        ":focus": Object {
-          "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-        },
-        "alignItems": "center",
-        "background": "#1865f2",
-        "border": "none",
-        "borderRadius": 4,
-        "boxSizing": "border-box",
-        "color": "#ffffff",
-        "cursor": "pointer",
-        "display": "inline-flex",
-        "height": 40,
-        "justifyContent": "center",
-        "margin": 0,
-        "outline": "none",
-        "paddingBottom": 0,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingTop": 0,
-        "position": "relative",
-        "textDecoration": "none",
-        "touchAction": "manipulation",
-        "userSelect": "none",
-      }
-    }
-    tabIndex={0}
-    type="button"
-  >
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "alignItems": "center",
-          "display": "inline-block",
-          "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-          "fontSize": 16,
-          "fontWeight": "bold",
-          "lineHeight": "20px",
-          "overflow": "hidden",
-          "pointerEvents": "none",
-          "textOverflow": "ellipsis",
-          "whiteSpace": "nowrap",
-        }
-      }
-    >
-      Enable Server-side Mode
-    </span>
-  </button>
-  Sorry, no snapshot for you
-</div>
-`;

package/src/__tests__/generated-snapshot.test.js

@@ -1,350 +0,0 @@
-// This file is auto-generated by gen-snapshot-tests.js
-// Do not edit this file.  To make changes to these snapshot tests:
-//   1. edit the markdown documentation files in the package,
-//        packages/wonder-blocks-data
-//   2. Run `yarn run gen-snapshot-tests`.
-import React from "react";
-import renderer from "react-test-renderer";
-
-// Mock react-dom as jest doesn't like findDOMNode.
-jest.mock("react-dom");
-import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
-import {View, Server} from "@khanacademy/wonder-blocks-core";
-import {
-    Data,
-    initializeHydrationCache,
-    InterceptRequests,
-    TrackData,
-    fetchTrackedRequests,
-} from "@khanacademy/wonder-blocks-data";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Button from "@khanacademy/wonder-blocks-button";
-
-describe("wonder-blocks-data", () => {
-    it("example 1", () => {
-        const myValidHandler = () =>
-            new Promise((resolve, reject) =>
-                setTimeout(() => resolve("I'm DATA from a request"), 3000),
-            );
-
-        const myInvalidHandler = () =>
-            new Promise((resolve, reject) =>
-                setTimeout(() => reject("I'm an ERROR from a request"), 3000),
-            );
-
-        const example = (
-            <View>
-                <View>
-                    <Body>This request will succeed and give us data!</Body>
-                    <Data handler={myValidHandler} requestId="VALID">
-                        {(result) => {
-                            if (result.status === "loading") {
-                                return "Loading...";
-                            }
-
-                            return <BodyMonospace>{result.data}</BodyMonospace>;
-                        }}
-                    </Data>
-                </View>
-                <Strut size={Spacing.small_12} />
-                <View>
-                    <Body>This request will go boom and give us an error!</Body>
-                    <Data handler={myInvalidHandler} requestId="INVALID">
-                        {(result) => {
-                            if (result.status === "loading") {
-                                return "Loading...";
-                            }
-
-                            return (
-                                <BodyMonospace
-                                    style={{
-                                        color: Color.red,
-                                    }}
-                                >
-                                    ERROR: {result.error}
-                                </BodyMonospace>
-                            );
-                        }}
-                    </Data>
-                </View>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 2", () => {
-        const myHandler = () => {
-            throw new Error(
-                "If you're seeing this error, the examples are broken and data isn't in the cache that should be.",
-            );
-        };
-
-        initializeHydrationCache({
-            DATA: {
-                data: "I'm DATA from the hydration cache",
-            },
-        });
-        const example = (
-            <View>
-                <View>
-                    <Body>This cache has data!</Body>
-                    <Data handler={myHandler} requestId="DATA">
-                        {(result) => {
-                            if (result.status !== "success") {
-                                return "If you see this, the example is broken!";
-                            }
-
-                            return <BodyMonospace>{result.data}</BodyMonospace>;
-                        }}
-                    </Data>
-                </View>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 3", () => {
-        const myHandler = () =>
-            Promise.reject(new Error("You should not see this!"));
-
-        const interceptor = (requestId) =>
-            requestId === "INTERCEPT_EXAMPLE"
-                ? Promise.resolve("INTERCEPTED DATA!")
-                : null;
-
-        const example = (
-            <InterceptRequests interceptor={interceptor}>
-                <View>
-                    <Body>This received intercepted data!</Body>
-                    <Data handler={myHandler} requestId="INTERCEPT_EXAMPLE">
-                        {(result) => {
-                            if (result.status !== "success") {
-                                return "If you see this, the example is broken!";
-                            }
-
-                            return <BodyMonospace>{result.data}</BodyMonospace>;
-                        }}
-                    </Data>
-                </View>
-            </InterceptRequests>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 4", () => {
-        class ErrorBoundary extends React.Component {
-            constructor(props) {
-                super(props);
-                this.state = {};
-            }
-
-            static getDerivedStateFromError(error) {
-                return {
-                    error: error.message,
-                };
-            }
-
-            render() {
-                if (typeof jest !== "undefined") {
-                    /**
-                     * The snapshot test just sees the error getting thrown, not the
-                     * awesome error boundary, so we have to hack around it to keep
-                     * this live example, but not get test failures.
-                     */
-                    return "Sorry, no snapshot for you";
-                }
-
-                if (this.state.error) {
-                    return <View>{this.state.error}</View>;
-                }
-
-                return this.props.children;
-            }
-        }
-
-        const example = (
-            <ErrorBoundary>
-                <View>
-                    <TrackData>
-                        <Body>
-                            This only renders if we're in server-side mode and
-                            the page hot reloaded
-                        </Body>
-                    </TrackData>
-                </View>
-            </ErrorBoundary>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 5", () => {
-        const myPretendHandler = () =>
-            new Promise((resolve, reject) =>
-                setTimeout(() => resolve("DATA!"), 3000),
-            );
-
-        class Example extends React.Component {
-            constructor() {
-                super();
-                /**
-                 * For this demonstration, we need to hack the return of isServerSide solely
-                 * for the scope of this component.
-                 */
-
-                this.state = {};
-            }
-
-            static getDerivedStateFromError(error) {
-                return {
-                    error,
-                };
-            }
-
-            componentDidMount() {
-                this._mounted = true;
-            }
-
-            componentWillUnmount() {
-                this._mounted = false;
-            }
-
-            setClientMode() {
-                window.location.reload();
-            }
-
-            setServerMode() {
-                Server.setServerSide();
-                this.setState({
-                    refresh: Date.now(),
-                    error: null,
-                });
-            }
-
-            _renderErrorOrContent() {
-                if (typeof jest !== "undefined") {
-                    /**
-                     * The snapshot test just sees the error getting thrown, not the
-                     * awesome error boundary, so we have to hack around it to keep
-                     * this live example, but not get test failures.
-                     */
-                    return "Sorry, no snapshot for you";
-                }
-
-                if (this.state.error) {
-                    return (
-                        <React.Fragment>
-                            <Strut size={Spacing.small_12} />
-                            <Body>
-                                We can't show you anything useful in client-side
-                                mode
-                            </Body>
-                        </React.Fragment>
-                    );
-                }
-
-                const data = this.state.data
-                    ? JSON.stringify(this.state.data, undefined, "  ")
-                    : "Data requested...";
-                return (
-                    <React.Fragment>
-                        <Strut size={Spacing.small_12} />
-                        <TrackData>
-                            <Data
-                                handler={myPretendHandler}
-                                requestId="TRACK_DATA_EXAMPLE"
-                            >
-                                {(result) => (
-                                    <View>
-                                        <BodyMonospace>{`Loading: ${
-                                            result.status === "loading"
-                                        }`}</BodyMonospace>
-                                        <BodyMonospace>{`Data: ${JSON.stringify(
-                                            result.data,
-                                        )}`}</BodyMonospace>
-                                    </View>
-                                )}
-                            </Data>
-                        </TrackData>
-                        <Strut size={Spacing.small_12} />
-                        <View>
-                            <Body>
-                                The above components requested data, but we're
-                                server-side, so all that happened is we tracked
-                                the request. In this example, we've also called
-                                `fetchTrackedRequests` to fetch that tracked
-                                data.
-                            </Body>
-                            <Strut size={Spacing.small_12} />
-                            <Body>
-                                In about 3 seconds, it will appear below. Notice
-                                that when it does, the above still doesn't
-                                update. That's because during SSR, the data is
-                                not updated in the rendered tree.
-                            </Body>
-                            <Strut size={Spacing.small_12} />
-                            <BodyMonospace>{data}</BodyMonospace>
-                        </View>
-                    </React.Fragment>
-                );
-            }
-
-            render() {
-                try {
-                    return (
-                        <View key={this.state.refresh}>
-                            {Server.isServerSide() ? (
-                                <React.Fragment>
-                                    <Button
-                                        kind={"secondary"}
-                                        onClick={() => this.setClientMode()}
-                                    >
-                                        Back to Client-side Mode (reloads page)
-                                    </Button>
-                                    <Strut size={Spacing.small_12} />
-                                    <Button
-                                        kind={"secondary"}
-                                        onClick={() => this.setServerMode()}
-                                    >
-                                        Re-mount
-                                    </Button>
-                                </React.Fragment>
-                            ) : (
-                                <Button
-                                    kind={"primary"}
-                                    onClick={() => this.setServerMode()}
-                                >
-                                    Enable Server-side Mode
-                                </Button>
-                            )}
-                            {this._renderErrorOrContent()}
-                        </View>
-                    );
-                } finally {
-                    if (!this.state.data && Server.isServerSide()) {
-                        setTimeout(
-                            () =>
-                                fetchTrackedRequests().then((data) => {
-                                    if (this._mounted) {
-                                        this.setState({
-                                            data,
-                                        });
-                                    }
-                                }),
-                            0,
-                        );
-                    }
-                }
-            }
-        }
-
-        const example = <Example />;
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});