@khanacademy/wonder-blocks-data 8.0.1 → 8.0.4

package/src/util/ssr-cache.js

@@ -26,22 +26,13 @@ export class SsrCache {
     }
 
     _hydrationCache: SerializableInMemoryCache;
-    _ssrOnlyCache: ?SerializableInMemoryCache;
+    _ssrOnlyCache: SerializableInMemoryCache;
 
     constructor(
         hydrationCache: ?SerializableInMemoryCache = null,
         ssrOnlyCache: ?SerializableInMemoryCache = null,
     ) {
-        // The default instance gets made on first reference and if that happens
-        // before server-side mode is turned on, the Default instance would
-        // never have an SSR-only cache instance, which would then mean that if
-        // server-side mode got turned on, it wouldn't work right.
-        // This should only be an issue of surprise during testing, so, let's
-        // always have an instance in that circumstance.
-        this._ssrOnlyCache =
-            process.env.NODE_ENV === "test" || Server.isServerSide()
-                ? ssrOnlyCache || new SerializableInMemoryCache()
-                : undefined;
+        this._ssrOnlyCache = ssrOnlyCache || new SerializableInMemoryCache();
         this._hydrationCache =
             hydrationCache || new SerializableInMemoryCache();
     }
@@ -61,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;
@@ -127,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
@@ -172,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/util/types.js

@@ -1,9 +1,6 @@
 // @flow
 import type {Metadata} from "@khanacademy/wonder-stuff-core";
 
-// TODO(somewhatabstract, FEI-4172): Update eslint-plugin-flowtype when
-// they've fixed https://github.com/gajus/eslint-plugin-flowtype/issues/502
-/* eslint-disable no-undef */
 /**
  * Defines the various fetch policies that can be applied to requests.
  */
@@ -30,7 +27,6 @@ export enum FetchPolicy {
      */
     NetworkOnly,
 }
-/* eslint-enable no-undef */
 
 /**
  * Define what can be cached.

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>
-`;