@khanacademy/wonder-blocks-data 10.0.5 → 10.1.1

package/src/components/__tests__/{intercept-requests.test.js → intercept-requests.test.tsx}

@@ -1,9 +1,8 @@
-// @flow
 import * as React from "react";
 import {render} from "@testing-library/react";
 
-import InterceptContext from "../intercept-context.js";
-import InterceptRequests from "../intercept-requests.js";
+import InterceptContext from "../intercept-context";
+import InterceptRequests from "../intercept-requests";
 
 describe("InterceptRequests", () => {
     afterEach(() => {
@@ -12,11 +11,11 @@ describe("InterceptRequests", () => {
 
     it("should update context with fulfillRequest method", () => {
         // Arrange
-        const fakeHandler = (requestId): Promise<string> =>
+        const fakeHandler = (requestId: any): Promise<string> =>
             Promise.resolve("data");
         const props = {
             interceptor: fakeHandler,
-        };
+        } as const;
         const captureContextFn = jest.fn();
 
         // Act

package/src/components/__tests__/{track-data.test.js → track-data.test.tsx}

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 import {Server} from "@khanacademy/wonder-blocks-core";
 import {render, screen} from "@testing-library/react";
 
-import TrackData from "../track-data.js";
-import {RequestTracker, TrackerContext} from "../../util/request-tracking.js";
+import TrackData from "../track-data";
+import {RequestTracker, TrackerContext} from "../../util/request-tracking";
 
 describe("TrackData", () => {
     afterEach(() => {
@@ -41,11 +40,11 @@ describe("TrackData", () => {
         jest.spyOn(Server, "isServerSide").mockReturnValue(true);
 
         // Act
-        const result = await new Promise((resolve, reject) => {
+        const result = await new Promise((resolve: any, reject: any) => {
             render(
                 <TrackData>
                     <TrackerContext.Consumer>
-                        {(fn) => resolve(fn)}
+                        {(fn: any) => resolve(fn)}
                     </TrackerContext.Consumer>
                 </TrackData>,
             );

package/src/components/{data.js → data.ts}

@@ -1,30 +1,24 @@
-// @flow
 import * as React from "react";
 
 import {
     useHydratableEffect,
-    // TODO(somewhatabstract, FEI-4174): Update eslint-plugin-import when they
-    // have fixed:
-    // https://github.com/import-js/eslint-plugin-import/issues/2073
-    // eslint-disable-next-line import/named
     WhenClientSide,
-} from "../hooks/use-hydratable-effect.js";
+} from "../hooks/use-hydratable-effect";
 
-import type {Result, ValidCacheData} from "../util/types.js";
+import type {Result, ValidCacheData} from "../util/types";
 
 type Props<
     /**
      * The type of data resolved by the handler's fulfillRequest method.
      */
-    TData: ValidCacheData,
-> = {|
+    TData extends ValidCacheData,
+> = {
     /**
      * A unique identifier for the request.
      *
      * This should not be shared by other uses of this component.
      */
-    requestId: string,
-
+    requestId: string;
     /**
      * This defines how the request is fulfilled.
      *
@@ -32,8 +26,7 @@ type Props<
      * old handler result may be given. This is not a supported mode of
      * operation.
      */
-    handler: () => Promise<TData>,
-
+    handler: () => Promise<TData>;
     /**
      * How the hook should behave when rendering client-side for the first time.
      *
@@ -41,8 +34,7 @@ type Props<
      *
      * Default is `OnClientRender.ExecuteWhenNoSuccessResult`.
      */
-    clientBehavior?: WhenClientSide,
-
+    clientBehavior?: typeof WhenClientSide[keyof typeof WhenClientSide];
     /**
      * When true, the children will be rendered with the existing result
      * until the pending load is completed. Otherwise, the children will be
@@ -50,28 +42,28 @@ type Props<
      *
      * Defaults to false.
      */
-    retainResultOnChange?: boolean,
-
+    retainResultOnChange?: boolean;
     /**
      * A function that will render the content of this component using the
      * loading state and data or error that gets retrieved from cache or loaded
      * via the request if no cached value is available.
      */
-    children: (result: Result<TData>) => React.Node,
-|};
+    children: (result: Result<TData>) => React.ReactElement;
+};
 
 /**
  * This component is the main component of Wonder Blocks Data. With this, data
  * requirements can be placed in a React application in a manner that will
  * support server-side rendering and efficient caching.
  */
-const Data = <TData: ValidCacheData>({
+// TODO(FEI-5000): Update this support generic props correctly
+const Data: React.FC<Props<any>> = <TData extends ValidCacheData>({
     requestId,
     handler,
     children,
     retainResultOnChange = false,
     clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
-}: Props<TData>): React.Node => {
+}: Props<TData>): React.ReactElement => {
     const result = useHydratableEffect(requestId, handler, {
         retainResultOnChange,
         clientBehavior,

package/src/components/{gql-router.js → gql-router.tsx}

@@ -1,30 +1,27 @@
-// @flow
 import * as React from "react";
 
-import {GqlRouterContext} from "../util/gql-router-context.js";
+import {GqlRouterContext} from "../util/gql-router-context";
 
 import type {
     GqlContext,
     GqlFetchFn,
     GqlRouterConfiguration,
-} from "../util/gql-types.js";
+} from "../util/gql-types";
 
-type Props<TContext: GqlContext> = {|
+type Props<TContext extends GqlContext> = {
     /**
      * The default context to be used by operations when no context is provided.
      */
-    defaultContext: TContext,
-
+    defaultContext: TContext;
     /**
      * The function to use when fetching requests.
      */
-    fetch: GqlFetchFn<any, any, TContext>,
-
+    fetch: GqlFetchFn<any, any, TContext>;
     /**
      * The children to be rendered inside the router.
      */
-    children: React.Node,
-|};
+    children: React.ReactNode;
+};
 
 /**
  * Configure GraphQL routing for GraphQL hooks and components.
@@ -32,17 +29,18 @@ type Props<TContext: GqlContext> = {|
  * These can be nested. Components and hooks relying on the GraphQL routing
  * will use the configuration from their closest ancestral GqlRouter.
  */
-export const GqlRouter = <TContext: GqlContext>({
+// TODO(FEI-5000): Update this support generic props correctly
+export const GqlRouter: React.FC<Props<any>> = <TContext extends GqlContext>({
     defaultContext: thisDefaultContext,
     fetch: thisFetch,
     children,
-}: Props<TContext>): React.Node => {
+}: Props<TContext>): React.ReactElement => {
     // We don't care if we're nested. We always force our callers to define
     // everything. It makes for a clearer API and requires less error checking
-    // code (assuming our flow types are correct). We also don't default fetch
-    // to anything - our callers can tell us what function to use quite easily.
-    // If code that consumes this wants more nuanced nesting, it can implement
-    // it within its own GqlRouter than then defers to this one.
+    // code (assuming our TypeScript types are correct). We also don't default
+    // fetch to anything - our callers can tell us what function to use quite
+    // easily. If code that consumes this wants more nuanced nesting, it can
+    // implement it within its own GqlRouter than then defers to this one.
 
     // We want to always use the same object if things haven't changed to avoid
     // over-rendering consumers of our context, let's memoize the configuration.

package/src/components/{intercept-context.js → intercept-context.ts}

@@ -1,9 +1,10 @@
-// @flow
 import * as React from "react";
-import type {ValidCacheData} from "../util/types.js";
+import type {ValidCacheData} from "../util/types";
 
-type InterceptContextData = $ReadOnlyArray<
-    (requestId: string) => ?Promise<?ValidCacheData>,
+type InterceptContextData = ReadonlyArray<
+    (
+        requestId: string,
+    ) => Promise<ValidCacheData | null | undefined> | null | undefined
 >;
 
 /**

package/src/components/{intercept-requests.js → intercept-requests.tsx}

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 
-import InterceptContext from "./intercept-context.js";
+import InterceptContext from "./intercept-context";
 
-import type {ValidCacheData} from "../util/types.js";
+import type {ValidCacheData} from "../util/types";
 
-type Props<TData: ValidCacheData> = {|
+type Props<TData extends ValidCacheData> = {
     /**
      * Called to intercept and possibly handle the request.
      * If this returns null, the request will be handled by ancestor
@@ -20,16 +19,15 @@ type Props<TData: ValidCacheData> = {|
      * so make sure to only intercept requests that you recognize from the
      * identifier.
      */
-    interceptor: (requestId: string) => ?Promise<TData>,
-
+    interceptor: (requestId: string) => Promise<TData> | null | undefined;
     /**
      * The children to render within this component. Any requests by `Data`
      * components that use same ID as this component will be intercepted.
      * If `InterceptRequests` is used within `children`, that interception will
      * be given a chance to intercept first.
      */
-    children: React.Node,
-|};
+    children: React.ReactNode;
+};
 
 /**
  * This component provides a mechanism to intercept data requests.
@@ -45,10 +43,11 @@ type Props<TData: ValidCacheData> = {|
  * interceptor closest to the intercepted request is called first, and the
  * furthest interceptor is called last.
  */
-const InterceptRequests = <TData: ValidCacheData>({
+// TODO(FEI-5000): Update this support generic props correctly
+const InterceptRequests: React.FC<Props<any>> = <TData extends ValidCacheData>({
     interceptor,
     children,
-}: Props<TData>): React.Node => {
+}: Props<TData>): React.ReactElement => {
     const interceptors = React.useContext(InterceptContext);
 
     const updatedInterceptors = React.useMemo(

package/src/components/{track-data.js → track-data.tsx}

@@ -1,18 +1,17 @@
-// @flow
 import * as React from "react";
 import {Server} from "@khanacademy/wonder-blocks-core";
 
-import {RequestTracker, TrackerContext} from "../util/request-tracking.js";
+import {RequestTracker, TrackerContext} from "../util/request-tracking";
 
-type TrackDataProps = {|
-    children: React.Node,
-|};
+type TrackDataProps = {
+    children: React.ReactNode;
+};
 
 /**
  * Component to enable data request tracking when server-side rendering.
  */
 export default class TrackData extends React.Component<TrackDataProps> {
-    render(): React.Node {
+    render(): React.ReactElement {
         if (!Server.isServerSide()) {
             throw new Error(
                 "This component is not for use during client-side rendering",