@khanacademy/wonder-blocks-data 13.0.10 → 13.0.12

package/src/components/__tests__/gql-router.test.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import {GqlRouterContext} from "../../util/gql-router-context";
-import {GqlRouter} from "../gql-router";
-
-describe("GqlRouter", () => {
-    it("should provide the GqlRouterContext as configured", async () => {
-        // Arrange
-        const defaultContext = {
-            foo: "bar",
-        } as const;
-        const fetch = jest.fn();
-        const CaptureContext = ({captureFn}: any) => {
-            captureFn(React.useContext(GqlRouterContext));
-            return null;
-        };
-
-        // Act
-        const result = await new Promise((resolve: any, reject: any) => {
-            render(
-                <GqlRouter defaultContext={defaultContext} fetch={fetch}>
-                    <CaptureContext captureFn={resolve} />
-                </GqlRouter>,
-            );
-        });
-
-        // Assert
-        expect(result).toStrictEqual({
-            defaultContext,
-            fetch,
-        });
-    });
-
-    it("should not render React.memo-ized children if props remain the same", () => {
-        // Arrange
-        const defaultContext = {
-            foo: "bar",
-        } as const;
-        const fetch = jest.fn();
-        let renderCount = 0;
-        const Child = React.memo(() => {
-            const context = React.useContext(GqlRouterContext);
-            renderCount++;
-            return <div>{JSON.stringify(context)}</div>;
-        });
-
-        // Act
-        const {rerender} = render(
-            <GqlRouter defaultContext={defaultContext} fetch={fetch}>
-                <Child />
-            </GqlRouter>,
-        );
-        rerender(
-            <GqlRouter defaultContext={defaultContext} fetch={fetch}>
-                <Child />
-            </GqlRouter>,
-        );
-
-        // Assert
-        expect(renderCount).toBe(1);
-    });
-});

package/src/components/__tests__/intercept-requests.test.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-
-import InterceptContext from "../intercept-context";
-import InterceptRequests from "../intercept-requests";
-
-describe("InterceptRequests", () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it("should update context with fulfillRequest method", () => {
-        // Arrange
-        const fakeHandler = (requestId: any): Promise<string> =>
-            Promise.resolve("data");
-        const props = {
-            interceptor: fakeHandler,
-        } as const;
-        const captureContextFn = jest.fn();
-
-        // Act
-        render(
-            <InterceptRequests {...props}>
-                <InterceptContext.Consumer>
-                    {captureContextFn}
-                </InterceptContext.Consumer>
-            </InterceptRequests>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith([fakeHandler]);
-    });
-
-    it("should override parent InterceptRequests", () => {
-        // Arrange
-        const fakeHandler1 = jest.fn();
-        const fakeHandler2 = jest.fn();
-        const captureContextFn = jest.fn();
-
-        // Act
-        render(
-            <InterceptRequests interceptor={fakeHandler1}>
-                <InterceptRequests interceptor={fakeHandler2}>
-                    <InterceptContext.Consumer>
-                        {captureContextFn}
-                    </InterceptContext.Consumer>
-                </InterceptRequests>
-            </InterceptRequests>,
-        );
-
-        // Assert
-        expect(captureContextFn).toHaveBeenCalledWith([
-            fakeHandler1,
-            fakeHandler2,
-        ]);
-    });
-});

package/src/components/__tests__/track-data.test.tsx

@@ -1,56 +0,0 @@
-import * as React from "react";
-import {Server} from "@khanacademy/wonder-blocks-core";
-import {render, screen} from "@testing-library/react";
-
-import TrackData from "../track-data";
-import {RequestTracker, TrackerContext} from "../../util/request-tracking";
-
-describe("TrackData", () => {
-    afterEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it("should throw if used when server-side mode is off", () => {
-        // Arrange
-        jest.spyOn(Server, "isServerSide").mockReturnValue(false);
-
-        // Act
-        const underTest = () => render(<TrackData>SOME CHILDREN</TrackData>);
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"This component is not for use during client-side rendering"`,
-        );
-    });
-
-    it("should render children when server-side mode is on", () => {
-        // Arrange
-        jest.spyOn(Server, "isServerSide").mockReturnValue(true);
-
-        // Act
-        render(<TrackData>SOME CHILDREN</TrackData>);
-        const result = screen.getByText("SOME CHILDREN");
-
-        // Assert
-        expect(result).toBeInTheDocument();
-    });
-
-    it("should provide tracker function for tracking context", async () => {
-        // Arrange
-        jest.spyOn(Server, "isServerSide").mockReturnValue(true);
-
-        // Act
-        const result = await new Promise((resolve: any, reject: any) => {
-            render(
-                <TrackData>
-                    <TrackerContext.Consumer>
-                        {(fn: any) => resolve(fn)}
-                    </TrackerContext.Consumer>
-                </TrackData>,
-            );
-        });
-
-        // Assert
-        expect(result).toBe(RequestTracker.Default.trackDataRequest);
-    });
-});

package/src/components/data.ts

@@ -1,73 +0,0 @@
-import * as React from "react";
-
-import {
-    useHydratableEffect,
-    WhenClientSide,
-} from "../hooks/use-hydratable-effect";
-
-import type {Result, ValidCacheData} from "../util/types";
-
-type Props<
-    /**
-     * The type of data resolved by the handler's fulfillRequest method.
-     */
-    TData extends ValidCacheData,
-> = {
-    /**
-     * A unique identifier for the request.
-     *
-     * This should not be shared by other uses of this component.
-     */
-    requestId: string;
-    /**
-     * This defines how the request is fulfilled.
-     *
-     * If this is changed without changing the ID, there are cases where the
-     * old handler result may be given. This is not a supported mode of
-     * operation.
-     */
-    handler: () => Promise<TData>;
-    /**
-     * How the hook should behave when rendering client-side for the first time.
-     *
-     * This controls how the hook hydrates and executes when client-side.
-     *
-     * Default is `OnClientRender.ExecuteWhenNoSuccessResult`.
-     */
-    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
-     * given a loading state until the request is fulfilled.
-     *
-     * Defaults to false.
-     */
-    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.ReactElement | null;
-};
-
-/**
- * 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 extends ValidCacheData>({
-    requestId,
-    handler,
-    children,
-    retainResultOnChange = false,
-    clientBehavior = WhenClientSide.ExecuteWhenNoSuccessResult,
-}: Props<TData>): React.ReactElement | null => {
-    const result = useHydratableEffect(requestId, handler, {
-        retainResultOnChange,
-        clientBehavior,
-    });
-    return children(result);
-};
-
-export default Data;

package/src/components/gql-router.tsx

@@ -1,63 +0,0 @@
-import * as React from "react";
-
-import {GqlRouterContext} from "../util/gql-router-context";
-
-import type {
-    GqlContext,
-    GqlFetchFn,
-    GqlRouterConfiguration,
-} from "../util/gql-types";
-
-type Props<TContext extends GqlContext> = {
-    /**
-     * The default context to be used by operations when no context is provided.
-     */
-    defaultContext: TContext;
-    /**
-     * The function to use when fetching requests.
-     */
-    fetch: GqlFetchFn<any, any, TContext>;
-    /**
-     * The children to be rendered inside the router.
-     */
-    children: React.ReactNode;
-};
-
-/**
- * Configure GraphQL routing for GraphQL hooks and components.
- *
- * 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 extends GqlContext>({
-    defaultContext: thisDefaultContext,
-    fetch: thisFetch,
-    children,
-}: 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 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.
-    // By doing this, if a component under children that uses this context
-    // uses React.memo, we won't force it to re-render every time we render
-    // because we'll only change the context value if something has actually
-    // changed.
-    const configuration: GqlRouterConfiguration<TContext> = React.useMemo(
-        () => ({
-            fetch: thisFetch,
-            defaultContext: thisDefaultContext,
-        }),
-        [thisDefaultContext, thisFetch],
-    );
-
-    return (
-        <GqlRouterContext.Provider value={configuration}>
-            {children}
-        </GqlRouterContext.Provider>
-    );
-};

package/src/components/intercept-context.ts

@@ -1,19 +0,0 @@
-import * as React from "react";
-import type {ValidCacheData} from "../util/types";
-
-type InterceptContextData = ReadonlyArray<
-    (
-        requestId: string,
-    ) => Promise<ValidCacheData | null | undefined> | null | undefined
->;
-
-/**
- * InterceptContext defines a map from request ID to interception methods.
- *
- * INTERNAL USE ONLY
- */
-const InterceptContext: React.Context<InterceptContextData> =
-    React.createContext<InterceptContextData>([]);
-InterceptContext.displayName = "InterceptContext";
-
-export default InterceptContext;

package/src/components/intercept-requests.tsx

@@ -1,67 +0,0 @@
-import * as React from "react";
-
-import InterceptContext from "./intercept-context";
-
-import type {ValidCacheData} from "../util/types";
-
-type Props<TData extends ValidCacheData> = {
-    /**
-     * Called to intercept and possibly handle the request.
-     * If this returns null, the request will be handled by ancestor
-     * any ancestor interceptors, and ultimately, the original request
-     * handler, otherwise, this interceptor is handling the request.
-     *
-     * Interceptors are called in ancestor precedence, with the closest
-     * interceptor ancestor being called first, and the furthest ancestor
-     * being called last.
-     *
-     * Beware: Interceptors do not care about what data they are intercepting,
-     * so make sure to only intercept requests that you recognize from the
-     * identifier.
-     */
-    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.ReactNode;
-};
-
-/**
- * This component provides a mechanism to intercept data requests.
- * This is for use in testing.
- *
- * This component is not recommended for use in production code as it
- * can prevent predictable functioning of the Wonder Blocks Data framework.
- * One possible side-effect is that inflight requests from the interceptor could
- * be picked up by `Data` component requests from outside the children of this
- * component.
- *
- * Interceptions within the same component tree are chained such that the
- * interceptor closest to the intercepted request is called first, and the
- * furthest interceptor is called last.
- */
-const InterceptRequests = <TData extends ValidCacheData>({
-    interceptor,
-    children,
-}: Props<TData>): React.ReactElement => {
-    const interceptors = React.useContext(InterceptContext);
-
-    const updatedInterceptors = React.useMemo(
-        // We could build this in reverse order so that our hook that does
-        // the interception didn't have to use reduceRight, but I think it
-        // is easier to think about if we do this in component tree order.
-        () => [...interceptors, interceptor],
-        [interceptors, interceptor],
-    );
-
-    return (
-        <InterceptContext.Provider value={updatedInterceptors}>
-            {children}
-        </InterceptContext.Provider>
-    );
-};
-
-export default InterceptRequests;

package/src/components/track-data.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import {Server} from "@khanacademy/wonder-blocks-core";
-
-import {RequestTracker, TrackerContext} from "../util/request-tracking";
-
-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.ReactNode {
-        if (!Server.isServerSide()) {
-            throw new Error(
-                "This component is not for use during client-side rendering",
-            );
-        }
-        return (
-            <TrackerContext.Provider
-                value={RequestTracker.Default.trackDataRequest}
-            >
-                {this.props.children}
-            </TrackerContext.Provider>
-        );
-    }
-}

package/src/hooks/__tests__/__snapshots__/use-shared-cache.test.ts.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`#useSharedCache should throw if the id is  1`] = `[InvalidInputDataError: id must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the id is [Function anonymous] 1`] = `[InvalidInputDataError: id must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the id is 5 1`] = `[InvalidInputDataError: id must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the id is null 1`] = `[InvalidInputDataError: id must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the scope is  1`] = `[InvalidInputDataError: scope must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the scope is [Function anonymous] 1`] = `[InvalidInputDataError: scope must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the scope is 5 1`] = `[InvalidInputDataError: scope must be a non-empty string]`;
-
-exports[`#useSharedCache should throw if the scope is null 1`] = `[InvalidInputDataError: scope must be a non-empty string]`;