@khanacademy/wonder-blocks-data 3.2.0 → 4.0.0

package/docs.md

@@ -18,7 +18,7 @@ rehydrate that result.
 ### Usage
 
 ```js static
-fulfillAllDataRequests(): Promise<$ReadOnly<ResponseCache>>;
+fulfillAllDataRequests(): Promise<ResponseCache>;
 ```
 
 ## initializeCache
@@ -38,18 +38,18 @@ needs.
 ### Usage
 
 ```js static
-initializeCache(sourceCache: $ReadOnly<ResponseCache>): void;
+initializeCache(sourceCache: ResponseCache): void;
 ```
 
 #### Function arguments
 
 | Argument | Flow&nbsp;Type | Default | Description |
 | --- | --- | --- | --- |
-| `sourceData` | `$ReadOnly<ResponseCache>` | _Required_ | The source cache that will be used to initialize the response cache. |
+| `sourceData` | `ResponseCache` | _Required_ | The source cache that will be used to initialize the response cache. |
 
 ## removeFromCache
 
-Removes an entry associated with the given handler from the hydration cache. The given handler and options identify the entry to be removed.
+Removes an entry from the cache. The given handler and options identify the entry to be removed.
 
 If an item is removed, this returns `true`; otherwise, `false`.
 
@@ -59,44 +59,43 @@ This can be useful during testing.
 ### Usage
 
 ```js static
-removeFromCache(handler: IRequestHandler<TOptions, TData>, options: TOptions): boolean;
+removeFromCache(id: string): boolean;
 ```
 
 #### Function arguments
 
 | Argument | Flow&nbsp;Type | Default | Description |
 | --- | --- | --- | --- |
-| `handler` | `IRequestHandler<TOptions, TData>` | _Required_ | The handler type for the data to be removed. |
-| `options` | `TOptions` | _Required_ | The options that identify the cached request data to be removed. |
+| `id` | `string` | _Required_ | The id of the item to be removed. |
 
 ## removeAllFromCache
 
-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.
+Removes all entries that match a given predicate from the 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).
+If the predicate is not given, all items are removed.
 
 ### Usage
 
 ```js static
-removeAllFromCache(handler: IRequestHandler<TOptions, TData>, predicate: (key: string, entry: $ReadOnly<CacheEntry<TData>>) => boolean): number;
+removeAllFromCache(predicate?: (key: string, entry: $ReadOnly<CachedResponse<TData>>) => boolean): number;
 ```
 
 #### Function arguments
 
 | Argument | Flow&nbsp;Type | Default | Description |
 | --- | --- | --- | --- |
-| `handler` | `IRequestHandler<TOptions, TData>` | _Required_ | The handler type for the data to be removed. |
-| `predicate` | `(key: string, entry: $ReadOnly<CacheEntry<TData>>) => boolean)` | _Optional_ | A predicate to identify which entries to remove. If absent, all data for the handler type is removed; if present, any entries for which the predicate returns `true` will be returned. |
+| `predicate` | `(key: string, entry: $ReadOnly<CachedResponse<TData>>) => boolean)` | _Optional_ | A predicate to identify which entries to remove. If absent, all data is removed; if present, any entries for which the predicate returns `true` will be returned. |
 
 ## Types
 
 ### ResponseCache
 
 ```js static
-type CacheEntry =
+type CachedResponse =
     | {|
         data: any,
       |}
@@ -104,37 +103,20 @@ type CacheEntry =
         error: string,
       |};
 
-type HandlerSubcache = {
-    [key: string]: CacheEntry,
-    ...,
-};
-
 type ResponseCache = {
-    [handlerType: string]: HandlerSubcache,
+    [id: string]: CachedResponse,
     ...,
 };
 ```
 
-A response cache is divided into subcaches by handler type. An example is
-shown below.
+An example is of the response cache is shown below.
 
 ```js static
 const responseCache = {
-    HANDLER_TYPE_A: {
-        DATA_ID_1: {error: "It go 💥boom 😢"},
-        DATA_ID_2: {data: ["array", "of", "data"]},
-    },
-    HANDLER_TYPE_B: {
-        DATA_ID_3: {
-            data: {
-                some: "data",
-            },
-        },
-    },
+    DATA_ID_1: {error: "It go 💥boom 😢"},
+    DATA_ID_2: {data: ["array", "of", "data"]},
+    DATA_ID_3: {data: {some: "data"}},
 };
 ```
 
-In this example, the cache contains data retrieved by two handlers; one with
-type `HANDLER_TYPE_A` and one with type `HANDLER_TYPE_B`. Within each subcache,
-the data responses are keyed by the returned value of the respective [request
-handler](#requesthandler)'s `getKey` method for the relevant request.
+In this example, the cache contains data retrieved for three different requests.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"

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

@@ -55,20 +55,7 @@ exports[`wonder-blocks-data example 1 1`] = `
     >
       This request will succeed and give us data!
     </span>
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Inconsolata, monospace",
-          "fontSize": 17,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    />
+    Loading...
   </div>
   <div
     aria-hidden="true"
@@ -131,23 +118,7 @@ exports[`wonder-blocks-data example 1 1`] = `
     >
       This request will go boom and give us an error!
     </span>
-    <span
-      className=""
-      style={
-        Object {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "color": "#d92916",
-          "display": "block",
-          "fontFamily": "Inconsolata, monospace",
-          "fontSize": 17,
-          "fontWeight": 400,
-          "lineHeight": "22px",
-        }
-      }
-    >
-      ERROR: 
-    </span>
+    Loading...
   </div>
 </div>
 `;
@@ -220,7 +191,9 @@ exports[`wonder-blocks-data example 2 1`] = `
           "lineHeight": "22px",
         }
       }
-    />
+    >
+      I'm DATA from the hydration cache
+    </span>
   </div>
   <div
     aria-hidden="true"
@@ -299,6 +272,7 @@ exports[`wonder-blocks-data example 2 1`] = `
       }
     >
       ERROR: 
+      I'm an ERROR from hydration cache
     </span>
   </div>
 </div>
@@ -340,20 +314,7 @@ exports[`wonder-blocks-data example 3 1`] = `
   >
     This received intercepted data!
   </span>
-  <span
-    className=""
-    style={
-      Object {
-        "MozOsxFontSmoothing": "grayscale",
-        "WebkitFontSmoothing": "antialiased",
-        "display": "block",
-        "fontFamily": "Inconsolata, monospace",
-        "fontSize": 17,
-        "fontWeight": 400,
-        "lineHeight": "22px",
-      }
-    }
-  />
+  If you see this, the example is broken!
 </div>
 `;
 

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

@@ -12,7 +12,6 @@ import {Body, BodyMonospace} from "@khanacademy/wonder-blocks-typography";
 import {View, Server} from "@khanacademy/wonder-blocks-core";
 import {
     Data,
-    RequestHandler,
     initializeCache,
     InterceptData,
     TrackData,
@@ -25,65 +24,36 @@ import Button from "@khanacademy/wonder-blocks-button";
 
 describe("wonder-blocks-data", () => {
     it("example 1", () => {
-        class MyValidHandler extends RequestHandler {
-            constructor() {
-                super("CACHE_MISS_HANDLER_VALID");
-            }
+        const myValidHandler = () =>
+            new Promise((resolve, reject) =>
+                setTimeout(() => resolve("I'm DATA from a request"), 3000),
+            );
 
-            fulfillRequest(options) {
-                return 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),
+            );
 
-        class MyInvalidHandler extends RequestHandler {
-            constructor() {
-                super("CACHE_MISS_HANDLER_ERROR");
-            }
-
-            fulfillRequest(options) {
-                return new Promise((resolve, reject) =>
-                    setTimeout(
-                        () => reject("I'm an ERROR from a request"),
-                        3000,
-                    ),
-                );
-            }
-        }
-
-        const valid = new MyValidHandler();
-        const invalid = new MyInvalidHandler();
         const example = (
             <View>
                 <View>
                     <Body>This request will succeed and give us data!</Body>
-                    <Data
-                        handler={valid}
-                        options={{
-                            some: "options",
-                        }}
-                    >
-                        {({loading, data}) => {
-                            if (loading) {
+                    <Data handler={myValidHandler} requestId="VALID">
+                        {(result) => {
+                            if (result.status === "loading") {
                                 return "Loading...";
                             }
 
-                            return <BodyMonospace>{data}</BodyMonospace>;
+                            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={invalid}
-                        options={{
-                            some: "options",
-                        }}
-                    >
-                        {({loading, error}) => {
-                            if (loading) {
+                    <Data handler={myInvalidHandler} requestId="INVALID">
+                        {(result) => {
+                            if (result.status === "loading") {
                                 return "Loading...";
                             }
 
@@ -93,7 +63,7 @@ describe("wonder-blocks-data", () => {
                                         color: Color.red,
                                     }}
                                 >
-                                    ERROR: {error}
+                                    ERROR: {result.error}
                                 </BodyMonospace>
                             );
                         }}
@@ -106,52 +76,40 @@ describe("wonder-blocks-data", () => {
     });
 
     it("example 2", () => {
-        class MyHandler extends RequestHandler {
-            constructor() {
-                super("CACHE_HIT_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 and data isn't in the cache that should be.",
-                );
-            }
-        }
+        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.",
+            );
+        };
 
-        const handler = new MyHandler();
         initializeCache({
-            CACHE_HIT_HANDLER: {
-                DATA: {
-                    data: "I'm DATA from the hydration cache",
-                },
-                ERROR: {
-                    error: "I'm an ERROR from hydration cache",
-                },
+            DATA: {
+                data: "I'm DATA from the hydration cache",
+            },
+            ERROR: {
+                error: "I'm an ERROR from hydration cache",
             },
         });
         const example = (
             <View>
                 <View>
                     <Body>This cache has data!</Body>
-                    <Data handler={handler} options={"DATA"}>
-                        {({loading, data}) => {
-                            if (loading) {
+                    <Data handler={myHandler} requestId="DATA">
+                        {(result) => {
+                            if (result.status !== "success") {
                                 return "If you see this, the example is broken!";
                             }
 
-                            return <BodyMonospace>{data}</BodyMonospace>;
+                            return <BodyMonospace>{result.data}</BodyMonospace>;
                         }}
                     </Data>
                 </View>
                 <Strut size={Spacing.small_12} />
                 <View>
                     <Body>This cache has error!</Body>
-                    <Data handler={handler} options={"ERROR"}>
-                        {({loading, error}) => {
-                            if (loading) {
+                    <Data handler={myHandler} requestId="ERROR">
+                        {(result) => {
+                            if (result.status !== "error") {
                                 return "If you see this, the example is broken!";
                             }
 
@@ -161,7 +119,7 @@ describe("wonder-blocks-data", () => {
                                         color: Color.red,
                                     }}
                                 >
-                                    ERROR: {error}
+                                    ERROR: {result.error}
                                 </BodyMonospace>
                             );
                         }}
@@ -174,40 +132,25 @@ describe("wonder-blocks-data", () => {
     });
 
     it("example 3", () => {
-        class MyHandler extends RequestHandler {
-            constructor() {
-                super("INTERCEPT_DATA_HANDLER1");
-            }
-
-            fulfillRequest(options) {
-                return Promise.reject(new Error("You should not see this!"));
-            }
-        }
-
-        const handler = new MyHandler();
+        const myHandler = () =>
+            Promise.reject(new Error("You should not see this!"));
 
-        const fulfillRequestInterceptor = function (options) {
-            if (options === "DATA") {
-                return Promise.resolve("INTERCEPTED DATA!");
-            }
-
-            return null;
-        };
+        const interceptHandler = () => Promise.resolve("INTERCEPTED DATA!");
 
         const example = (
             <InterceptData
-                handler={handler}
-                fulfillRequest={fulfillRequestInterceptor}
+                handler={interceptHandler}
+                requestId="INTERCEPT_EXAMPLE"
             >
                 <View>
                     <Body>This received intercepted data!</Body>
-                    <Data handler={handler} options={"DATA"}>
-                        {({loading, data}) => {
-                            if (loading) {
+                    <Data handler={myHandler} requestId="INTERCEPT_EXAMPLE">
+                        {(result) => {
+                            if (result.status !== "success") {
                                 return "If you see this, the example is broken!";
                             }
 
-                            return <BodyMonospace>{data}</BodyMonospace>;
+                            return <BodyMonospace>{result.data}</BodyMonospace>;
                         }}
                     </Data>
                 </View>
@@ -265,17 +208,10 @@ describe("wonder-blocks-data", () => {
     });
 
     it("example 5", () => {
-        class MyPretendHandler extends RequestHandler {
-            constructor() {
-                super("MY_PRETEND_HANDLER");
-            }
-
-            fulfillRequest(options) {
-                return new Promise((resolve, reject) =>
-                    setTimeout(() => resolve("DATA!"), 3000),
-                );
-            }
-        }
+        const myPretendHandler = () =>
+            new Promise((resolve, reject) =>
+                setTimeout(() => resolve("DATA!"), 3000),
+            );
 
         class Example extends React.Component {
             constructor() {
@@ -286,7 +222,6 @@ describe("wonder-blocks-data", () => {
                  */
 
                 this.state = {};
-                this._handler = new MyPretendHandler();
             }
 
             static getDerivedStateFromError(error) {
@@ -344,12 +279,17 @@ describe("wonder-blocks-data", () => {
                     <React.Fragment>
                         <Strut size={Spacing.small_12} />
                         <TrackData>
-                            <Data handler={this._handler} options={{}}>
-                                {({loading, data, error}) => (
+                            <Data
+                                handler={myPretendHandler}
+                                requestId="TRACK_DATA_EXAMPLE"
+                            >
+                                {(result) => (
                                     <View>
-                                        <BodyMonospace>{`Loading: ${loading}`}</BodyMonospace>
+                                        <BodyMonospace>{`Loading: ${
+                                            result.status === "loading"
+                                        }`}</BodyMonospace>
                                         <BodyMonospace>{`Data: ${JSON.stringify(
-                                            data,
+                                            result.data,
                                         )}`}</BodyMonospace>
                                     </View>
                                 )}
@@ -372,12 +312,6 @@ describe("wonder-blocks-data", () => {
                                 not updated in the rendered tree.
                             </Body>
                             <Strut size={Spacing.small_12} />
-                            <Body>
-                                If you click to remount after the data appears,
-                                we'll rerender with the now cached data, and
-                                above should update accordingly.
-                            </Body>
-                            <Strut size={Spacing.small_12} />
                             <BodyMonospace>{data}</BodyMonospace>
                         </View>
                     </React.Fragment>