@khanacademy/wonder-blocks-data 8.0.2 → 8.0.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/dist/index.js

@@ -1580,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 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-data",
-  "version": "8.0.2",
+  "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/__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();
-    });
-});