@khanacademy/wonder-blocks-data 2.3.4 → 3.0.0

package/docs.md

@@ -23,17 +23,17 @@ fulfillAllDataRequests(): Promise<$ReadOnly<ResponseCache>>;
 
 ## initializeCache
 
-Wonder Blocks Data caches data in its response cache. This cache can be
-initialized with data using the `initializeCache` method. The `initializeData`
-method can only be called once to populate the cache. Usually, the data to be
-passed to `initializeCache` will be obtained by calling `fulfillAllDataRequests`
-after tracking data requests (see [TrackData](#trackdata)) during server-side
-rendering.
-
-Though method could also be used to initialize the response cache for tests,
-it is recommended that the `InterceptCache` component be used instead, since
-it can be used repeatedly whereas `initializeCache`, by design, can only be
-called while the cache is uninitialized and unused.
+Wonder Blocks Data caches data in its response cache for hydration. This cache
+can be initialized with data using the `initializeCache` method.
+The `initializeCache` method can only be called when the hydration cache is
+empty.
+
+Usually, the data to be passed to `initializeCache` will be obtained by
+calling `fulfillAllDataRequests` after tracking data requests
+(see [TrackData](#trackdata)) during server-side rendering.
+
+Combine with `removeFromCache` or `removeAllFromCache` to support your testing
+needs.
 
 ### Usage
 
@@ -49,10 +49,13 @@ initializeCache(sourceCache: $ReadOnly<ResponseCache>): void;
 
 ## removeFromCache
 
-Removes an entry from the framework cache and any custom cache associated to the given handler. The given handler and options identify the entry to be removed.
+Removes an entry associated with the given handler from the hydration cache. The given handler and options identify the entry to be removed.
 
 If an item is removed, this returns `true`; otherwise, `false`.
 
+This can be used after `initializeCache` to manipulate the cache prior to hydration.
+This can be useful during testing.
+
 ### Usage
 
 ```js static
@@ -68,10 +71,13 @@ removeFromCache(handler: IRequestHandler<TOptions, TData>, options: TOptions): b
 
 ## removeAllFromCache
 
-Removes all entries that match a given predicate from the framework cache and any custom cache associated to the given handler. If no predicate is given, all cached entries for the given handler are removed.
+Removes all entries associated to the given handler that match a given predicate from the hydration cache. If no predicate is given, all cached entries for the given handler are removed.
 
 This returns the count of entries removed.
 
+This can be used after `initializeCache` to manipulate the cache prior to hydration.
+This can be useful during testing (especially to clear the cache so that it can be initialized again).
+
 ### Usage
 
 ```js static

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "2.3.4",
+  "version": "3.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -23,6 +23,5 @@
     "wb-dev-build-settings": "^0.2.0"
   },
   "author": "",
-  "license": "MIT",
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  "license": "MIT"
 }

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

@@ -55,111 +55,6 @@ exports[`wonder-blocks-data example 1 1`] = `
     >
       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`] = `
-Array [
-  <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={
@@ -173,10 +68,8 @@ Array [
           "lineHeight": "22px",
         }
       }
-    >
-      I'm DATA from the cache
-    </span>
-  </div>,
+    />
+  </div>
   <div
     aria-hidden="true"
     className=""
@@ -202,7 +95,7 @@ Array [
         "zIndex": 0,
       }
     }
-  />,
+  />
   <div
     className=""
     style={
@@ -236,7 +129,7 @@ Array [
         }
       }
     >
-      This cache has error!
+      This request will go boom and give us an error!
     </span>
     <span
       className=""
@@ -254,14 +147,31 @@ Array [
       }
     >
       ERROR: 
-      I'm an ERROR from the cache
     </span>
-  </div>,
-]
+  </div>
+</div>
 `;
 
-exports[`wonder-blocks-data example 3 1`] = `
-Array [
+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={
@@ -295,7 +205,7 @@ Array [
         }
       }
     >
-      This intercepted cache has data!
+      This cache has data!
     </span>
     <span
       className=""
@@ -310,10 +220,8 @@ Array [
           "lineHeight": "22px",
         }
       }
-    >
-      I'm DATA from the cache interceptor
-    </span>
-  </div>,
+    />
+  </div>
   <div
     aria-hidden="true"
     className=""
@@ -339,7 +247,7 @@ Array [
         "zIndex": 0,
       }
     }
-  />,
+  />
   <div
     className=""
     style={
@@ -373,7 +281,7 @@ Array [
         }
       }
     >
-      This intercepted cache has error!
+      This cache has error!
     </span>
     <span
       className=""
@@ -391,13 +299,12 @@ Array [
       }
     >
       ERROR: 
-      I'm an ERROR from the cache interceptor
     </span>
-  </div>,
-]
+  </div>
+</div>
 `;
 
-exports[`wonder-blocks-data example 4 1`] = `
+exports[`wonder-blocks-data example 3 1`] = `
 <div
   className=""
   style={
@@ -433,30 +340,6 @@ exports[`wonder-blocks-data example 4 1`] = `
   >
     This received intercepted data!
   </span>
-  If you see this, the example is broken!
-</div>
-`;
-
-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,
-    }
-  }
->
   <span
     className=""
     style={
@@ -464,22 +347,19 @@ exports[`wonder-blocks-data example 5 1`] = `
         "MozOsxFontSmoothing": "grayscale",
         "WebkitFontSmoothing": "antialiased",
         "display": "block",
-        "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-        "fontSize": 16,
+        "fontFamily": "Inconsolata, monospace",
+        "fontSize": 17,
         "fontWeight": 400,
         "lineHeight": "22px",
       }
     }
-  >
-    This re-renders once a second. On the render, the cache is refreshed and so we see an update.
-  </span>
-  If you see this, the example is broken!
+  />
 </div>
 `;
 
-exports[`wonder-blocks-data example 6 1`] = `"Sorry, no snapshot for you"`;
+exports[`wonder-blocks-data example 4 1`] = `"Sorry, no snapshot for you"`;
 
-exports[`wonder-blocks-data example 7 1`] = `
+exports[`wonder-blocks-data example 5 1`] = `
 <div
   className=""
   style={
@@ -500,8 +380,8 @@ exports[`wonder-blocks-data example 7 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

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

@@ -13,7 +13,7 @@ import {View, Server} from "@khanacademy/wonder-blocks-core";
 import {
     Data,
     RequestHandler,
-    InterceptCache,
+    initializeCache,
     InterceptData,
     TrackData,
     fulfillAllDataRequests,
@@ -21,11 +21,8 @@ import {
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Color from "@khanacademy/wonder-blocks-color";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
 import Button from "@khanacademy/wonder-blocks-button";
 
-import NoCache from "./../util/no-cache.js";
-
 describe("wonder-blocks-data", () => {
     it("example 1", () => {
         class MyValidHandler extends RequestHandler {
@@ -122,31 +119,21 @@ describe("wonder-blocks-data", () => {
                     "If you're seeing this error, the examples are broken and data isn't in the cache that should be.",
                 );
             }
-
-            shouldRefreshCache(options, cachedEntry) {
-                /**
-                 * For our purposes, the cache never needs a refresh.
-                 */
-                return false;
-            }
         }
 
         const handler = new MyHandler();
-
-        const getEntryInterceptor = function (options) {
-            if (options === "DATA") {
-                return {
-                    data: "I'm DATA from the cache",
-                };
-            }
-
-            return {
-                error: "I'm an ERROR from the cache",
-            };
-        };
-
+        initializeCache({
+            CACHE_HIT_HANDLER: {
+                DATA: {
+                    data: "I'm DATA from the hydration cache",
+                },
+                ERROR: {
+                    error: "I'm an ERROR from hydration cache",
+                },
+            },
+        });
         const example = (
-            <InterceptCache handler={handler} getEntry={getEntryInterceptor}>
+            <View>
                 <View>
                     <Body>This cache has data!</Body>
                     <Data handler={handler} options={"DATA"}>
@@ -180,91 +167,13 @@ describe("wonder-blocks-data", () => {
                         }}
                     </Data>
                 </View>
-            </InterceptCache>
+            </View>
         );
         const tree = renderer.create(example).toJSON();
         expect(tree).toMatchSnapshot();
     });
 
     it("example 3", () => {
-        class MyHandler extends RequestHandler {
-            constructor() {
-                super("INTERCEPT_CACHE_HANDLER");
-            }
-            /**
-             * fulfillRequest should not get called as we already have data cached.
-             */
-
-            fulfillRequest(options) {
-                throw new Error(
-                    "If you're seeing this error, the examples are broken.",
-                );
-            }
-
-            shouldRefreshCache(options, cachedEntry) {
-                /**
-                 * For our purposes, the cache never needs a refresh.
-                 */
-                return false;
-            }
-        }
-
-        const handler = new MyHandler();
-
-        const getEntryIntercept = function (options) {
-            if (options === "ERROR") {
-                return {
-                    error: "I'm an ERROR from the cache interceptor",
-                };
-            }
-
-            return {
-                data: "I'm DATA from the cache interceptor",
-            };
-        };
-
-        const example = (
-            <InterceptCache handler={handler} getEntry={getEntryIntercept}>
-                <View>
-                    <Body>This intercepted cache has data!</Body>
-                    <Data handler={handler} options={"DATA"}>
-                        {({loading, data}) => {
-                            if (loading) {
-                                return "If you see this, the example is broken!";
-                            }
-
-                            return <BodyMonospace>{data}</BodyMonospace>;
-                        }}
-                    </Data>
-                </View>
-                <Strut size={Spacing.small_12} />
-                <View>
-                    <Body>This intercepted cache has error!</Body>
-                    <Data handler={handler} options={"ERROR"}>
-                        {({loading, error}) => {
-                            if (loading) {
-                                return "If you see this, the example is broken!";
-                            }
-
-                            return (
-                                <BodyMonospace
-                                    style={{
-                                        color: Color.red,
-                                    }}
-                                >
-                                    ERROR: {error}
-                                </BodyMonospace>
-                            );
-                        }}
-                    </Data>
-                </View>
-            </InterceptCache>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 4", () => {
         class MyHandler extends RequestHandler {
             constructor() {
                 super("INTERCEPT_DATA_HANDLER1");
@@ -308,96 +217,7 @@ describe("wonder-blocks-data", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 5", () => {
-        class MyHandler extends RequestHandler {
-            constructor() {
-                super("INTERCEPT_DATA_HANDLER2");
-                let _counter = 0;
-
-                this.fulfillRequest = function (options) {
-                    return Promise.resolve(`DATA ${_counter++}`);
-                };
-            }
-
-            shouldRefreshData(options) {
-                return false;
-            }
-        }
-
-        const handler = new MyHandler();
-
-        const shouldRefreshCacheInterceptor = function (options) {
-            if (options === "DATA") {
-                return true;
-            }
-
-            return null;
-        };
-
-        class SchedulableExample extends React.Component {
-            constructor(props) {
-                super(props);
-                this.state = {
-                    stamp: Date.now(),
-                };
-            }
-
-            componentDidMount() {
-                this.props.schedule.interval(
-                    () =>
-                        this.setState({
-                            stamp: Date.now(),
-                        }),
-                    1000,
-                );
-            }
-
-            render() {
-                /**
-                 * The key on the View is what causes the re-render.
-                 *
-                 * The re-render causes the `Data` component to render again.
-                 * That causes it to check if it should refresh the cache.
-                 * and that in turn causes a new data request that updates the value
-                 * being rendered.
-                 *
-                 * Without the key to cause the re-render, no additional request would
-                 * be made.
-                 */
-                return (
-                    <InterceptData
-                        handler={handler}
-                        shouldRefreshCache={shouldRefreshCacheInterceptor}
-                    >
-                        <View key={this.state.stamp}>
-                            <Body>
-                                This re-renders once a second. On the render,
-                                the cache is refreshed and so we see an update.
-                            </Body>
-                            <Data handler={handler} options={"DATA"}>
-                                {({loading, data}) => {
-                                    if (loading) {
-                                        return "If you see this, the example is broken!";
-                                    }
-
-                                    return (
-                                        <BodyMonospace>{data}</BodyMonospace>
-                                    );
-                                }}
-                            </Data>
-                        </View>
-                    </InterceptData>
-                );
-            }
-        }
-
-        const Example = withActionScheduler(SchedulableExample);
-        const example = <Example />;
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 6", () => {
+    it("example 4", () => {
         class ErrorBoundary extends React.Component {
             constructor(props) {
                 super(props);
@@ -444,7 +264,7 @@ describe("wonder-blocks-data", () => {
         expect(tree).toMatchSnapshot();
     });
 
-    it("example 7", () => {
+    it("example 5", () => {
         class MyPretendHandler extends RequestHandler {
             constructor() {
                 super("MY_PRETEND_HANDLER");