@croct/plug-react 0.9.0 → 0.11.0

package/src/hooks/Cache.ts

@@ -1,97 +0,0 @@
-export type EntryLoader<R> = (...args: any) => Promise<R>;
-
-export type EntryOptions<R> = {
-    cacheKey: string,
-    loader: EntryLoader<R>,
-    fallback?: R,
-    expiration?: number,
-};
-
-type Entry<R = any> = {
-    promise: Promise<any>,
-    result?: R,
-    dispose: () => void,
-    timeout?: number,
-    error?: any,
-};
-
-export class Cache {
-    private readonly cache: Record<string, Entry> = {};
-
-    private readonly defaultExpiration: number;
-
-    public constructor(defaultExpiration: number) {
-        this.defaultExpiration = defaultExpiration;
-    }
-
-    public load<R>(configuration: EntryOptions<R>): R {
-        const {cacheKey, loader, fallback, expiration = this.defaultExpiration} = configuration;
-
-        const cachedEntry = this.get<R>(cacheKey);
-
-        if (cachedEntry !== undefined) {
-            if (cachedEntry.error !== undefined) {
-                if (fallback !== undefined) {
-                    return fallback;
-                }
-
-                throw cachedEntry.error;
-            }
-
-            if (cachedEntry.result !== undefined) {
-                return cachedEntry.result;
-            }
-
-            throw cachedEntry.promise;
-        }
-
-        const entry: Entry<R> = {
-            dispose: () => {
-                if (entry.timeout !== undefined || expiration < 0) {
-                    return;
-                }
-
-                entry.timeout = window.setTimeout(
-                    (): void => {
-                        delete this.cache[cacheKey];
-                    },
-                    expiration,
-                );
-            },
-            promise: loader()
-                .then((result): R => {
-                    entry.result = result;
-
-                    return result;
-                })
-                .catch(error => {
-                    entry.error = error;
-                })
-                .finally(() => {
-                    entry.dispose();
-                }),
-        };
-
-        this.cache[cacheKey] = entry;
-
-        throw entry.promise;
-    }
-
-    public get<R>(cacheKey: string): Entry<R>|undefined {
-        const entry = this.cache[cacheKey];
-
-        if (entry === undefined) {
-            return undefined;
-        }
-
-        if (entry.timeout !== undefined) {
-            clearTimeout(entry.timeout);
-
-            delete entry.timeout;
-
-            entry.dispose();
-        }
-
-        return entry;
-    }
-}

package/src/hooks/index.ts

@@ -1,3 +0,0 @@
-export * from './useEvaluation';
-export * from './useContent';
-export * from './useCroct';

package/src/hooks/useContent.ssr.test.ts

@@ -1,23 +0,0 @@
-import {renderHook} from '@testing-library/react';
-import {useContent} from './useContent';
-
-jest.mock(
-    '../ssr-polyfills',
-    () => ({
-        __esModule: true,
-        isSsr: (): boolean => true,
-    }),
-);
-
-describe('useContent (SSR)', () => {
-    it('should render the initial value on the server-side', () => {
-        const {result} = renderHook(() => useContent('slot-id', {initial: 'foo'}));
-
-        expect(result.current).toBe('foo');
-    });
-
-    it('should require an initial value for server-side rending', () => {
-        expect(() => useContent('slot-id'))
-            .toThrow('The initial content is required for server-side rendering (SSR).');
-    });
-});

package/src/hooks/useContent.test.ts

@@ -1,183 +0,0 @@
-import {renderHook, waitFor} from '@testing-library/react';
-import {Plug} from '@croct/plug';
-import {useCroct} from './useCroct';
-import {useLoader} from './useLoader';
-import {useContent} from './useContent';
-import {hash} from '../hash';
-
-jest.mock(
-    './useCroct',
-    () => ({
-        useCroct: jest.fn(),
-    }),
-);
-
-jest.mock(
-    './useLoader',
-    () => ({
-        useLoader: jest.fn(),
-    }),
-);
-
-describe('useContent (CSR)', () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it('should fetch the content', () => {
-        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
-            content: {},
-        });
-
-        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
-        jest.mocked(useLoader).mockReturnValue({
-            title: 'foo',
-        });
-
-        const slotId = 'home-banner@1';
-        const preferredLocale = 'en';
-        const attributes = {example: 'value'};
-        const cacheKey = 'unique';
-
-        const {result} = renderHook(
-            () => useContent<{title: string}>(slotId, {
-                preferredLocale: preferredLocale,
-                attributes: attributes,
-                cacheKey: cacheKey,
-                fallback: {
-                    title: 'error',
-                },
-                expiration: 50,
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-        expect(useLoader).toHaveBeenCalledWith({
-            cacheKey: hash(`useContent:${cacheKey}:${slotId}:${preferredLocale}:${JSON.stringify(attributes)}`),
-            fallback: {
-                title: 'error',
-            },
-            expiration: 50,
-            loader: expect.any(Function),
-        });
-
-        jest.mocked(useLoader)
-            .mock
-            .calls[0][0]
-            .loader();
-
-        expect(fetch).toHaveBeenCalledWith(slotId, {
-            preferredLocale: 'en',
-            attributes: attributes,
-        });
-
-        expect(result.current).toEqual({title: 'foo'});
-    });
-
-    it('should use the initial value when the cache key changes if the stale-while-loading flag is false', async () => {
-        const key = {
-            current: 'initial',
-        };
-
-        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({content: {}});
-
-        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
-
-        jest.mocked(useLoader).mockImplementation(
-            () => ({title: key.current === 'initial' ? 'first' : 'second'}),
-        );
-
-        const slotId = 'home-banner@1';
-
-        const {result, rerender} = renderHook(
-            () => useContent<{title: string}>(slotId, {
-                cacheKey: key.current,
-                initial: {
-                    title: 'initial',
-                },
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
-            initial: {
-                title: 'initial',
-            },
-        }));
-
-        await waitFor(() => expect(result.current).toEqual({title: 'first'}));
-
-        key.current = 'next';
-
-        rerender();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
-            initial: {
-                title: 'initial',
-            },
-        }));
-
-        await waitFor(() => expect(result.current).toEqual({title: 'second'}));
-    });
-
-    it('should use the last fetched content as initial value if the stale-while-loading flag is true', async () => {
-        const key = {
-            current: 'initial',
-        };
-
-        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({content: {}});
-
-        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
-
-        const firstResult = {
-            title: 'first',
-        };
-
-        const secondResult = {
-            title: 'second',
-        };
-
-        jest.mocked(useLoader).mockImplementation(
-            () => (key.current === 'initial' ? firstResult : secondResult),
-        );
-
-        const slotId = 'home-banner@1';
-
-        const {result, rerender} = renderHook(
-            () => useContent<{title: string}>(slotId, {
-                cacheKey: key.current,
-                initial: {
-                    title: 'initial',
-                },
-                staleWhileLoading: true,
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
-            initial: {
-                title: 'initial',
-            },
-        }));
-
-        await waitFor(() => expect(result.current).toEqual({title: 'first'}));
-
-        key.current = 'next';
-
-        rerender();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useContent:${key.current}:${slotId}::${JSON.stringify({})}`),
-            initial: {
-                title: 'first',
-            },
-        }));
-
-        await waitFor(() => expect(result.current).toEqual({title: 'second'}));
-    });
-});

package/src/hooks/useContent.ts

@@ -1,107 +0,0 @@
-import {SlotContent, VersionedSlotId, VersionedSlotMap} from '@croct/plug/slot';
-import {JsonObject} from '@croct/plug/sdk/json';
-import {FetchOptions} from '@croct/plug/plug';
-import {useEffect, useState} from 'react';
-import {useLoader} from './useLoader';
-import {useCroct} from './useCroct';
-import {isSsr} from '../ssr-polyfills';
-import {hash} from '../hash';
-
-export type UseContentOptions<I, F> = FetchOptions & {
-    fallback?: F,
-    initial?: I,
-    cacheKey?: string,
-    expiration?: number,
-    staleWhileLoading?: boolean,
-};
-
-function useCsrContent<I, F>(
-    id: VersionedSlotId,
-    options: UseContentOptions<I, F> = {},
-): SlotContent | I | F {
-    const {
-        fallback,
-        cacheKey,
-        expiration,
-        initial: initialContent,
-        staleWhileLoading = false,
-        ...fetchOptions
-    } = options;
-
-    const [initial, setInitial] = useState<SlotContent | I | F | undefined>(initialContent);
-    const {preferredLocale} = fetchOptions;
-    const croct = useCroct();
-
-    const result: SlotContent | I | F = useLoader({
-        cacheKey: hash(
-            `useContent:${cacheKey ?? ''}`
-            + `:${id}`
-            + `:${preferredLocale ?? ''}`
-            + `:${JSON.stringify(fetchOptions.attributes ?? {})}`,
-        ),
-        loader: () => croct.fetch(id, fetchOptions).then(({content}) => content),
-        initial: initial,
-        fallback: fallback,
-        expiration: expiration,
-    });
-
-    useEffect(
-        () => {
-            if (staleWhileLoading) {
-                setInitial(current => {
-                    if (current !== result) {
-                        return result;
-                    }
-
-                    return current;
-                });
-            }
-        },
-        [result, staleWhileLoading],
-    );
-
-    return result;
-}
-
-function useSsrContent<I, F>(
-    _: VersionedSlotId,
-    {initial}: UseContentOptions<I, F> = {},
-): SlotContent | I | F {
-    if (initial === undefined) {
-        throw new Error(
-            'The initial content is required for server-side rendering (SSR). '
-            + 'For help, see https://croct.help/sdk/react/missing-slot-content',
-        );
-    }
-
-    return initial;
-}
-
-type UseContentHook = {
-    <P extends JsonObject, I = P, F = P>(
-        id: keyof VersionedSlotMap extends never ? string : never,
-        options?: UseContentOptions<I, F>
-    ): P | I | F,
-
-    <S extends VersionedSlotId>(
-        id: S,
-        options?: UseContentOptions<never, never>
-    ): SlotContent<S>,
-
-    <I, S extends VersionedSlotId>(
-        id: S,
-        options?: UseContentOptions<I, never>
-    ): SlotContent<S> | I,
-
-    <F, S extends VersionedSlotId>(
-        id: S,
-        options?: UseContentOptions<never, F>
-    ): SlotContent<S> | F,
-
-    <I, F, S extends VersionedSlotId>(
-        id: S,
-        options?: UseContentOptions<I, F>
-    ): SlotContent<S> | I | F,
-};
-
-export const useContent: UseContentHook = isSsr() ? useSsrContent : useCsrContent;

package/src/hooks/useCroct.ts

@@ -1,16 +0,0 @@
-import {Plug} from '@croct/plug';
-import {useContext} from 'react';
-import {CroctContext} from '../CroctProvider';
-
-export function useCroct(): Plug {
-    const context = useContext(CroctContext);
-
-    if (context === null) {
-        throw new Error(
-            'useCroct() can only be used in the context of a <CroctProvider> component. '
-            + 'For help, see https://croct.help/sdk/react/missing-provider',
-        );
-    }
-
-    return context.plug;
-}

package/src/hooks/useEvaluation.ssr.test.ts

@@ -1,23 +0,0 @@
-import {renderHook} from '@testing-library/react';
-import {useEvaluation} from './useEvaluation';
-
-jest.mock(
-    '../ssr-polyfills',
-    () => ({
-        __esModule: true,
-        isSsr: (): boolean => true,
-    }),
-);
-
-describe('useEvaluation (SSR)', () => {
-    it('should render the initial value on the server-side', () => {
-        const {result} = renderHook(() => useEvaluation('location', {initial: 'foo'}));
-
-        expect(result.current).toBe('foo');
-    });
-
-    it('should require an initial value for server-side rending', () => {
-        expect(() => useEvaluation('location'))
-            .toThrow('The initial value is required for server-side rendering (SSR).');
-    });
-});

package/src/hooks/useEvaluation.test.ts

@@ -1,180 +0,0 @@
-import {renderHook, waitFor} from '@testing-library/react';
-import {EvaluationOptions} from '@croct/sdk/facade/evaluatorFacade';
-import {Plug} from '@croct/plug';
-import {useEvaluation} from './useEvaluation';
-import {useCroct} from './useCroct';
-import {useLoader} from './useLoader';
-import {hash} from '../hash';
-
-jest.mock(
-    './useCroct',
-    () => ({
-        useCroct: jest.fn(),
-    }),
-);
-
-jest.mock(
-    './useLoader',
-    () => ({
-        useLoader: jest.fn(),
-    }),
-);
-
-describe('useEvaluation', () => {
-    beforeEach(() => {
-        jest.resetAllMocks();
-    });
-
-    it('should evaluate a query', () => {
-        const evaluationOptions: EvaluationOptions = {
-            timeout: 100,
-            attributes: {
-                foo: 'bar',
-            },
-        };
-
-        const evaluate: Plug['evaluate'] = jest.fn();
-
-        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
-        jest.mocked(useLoader).mockReturnValue('foo');
-
-        const query = 'location';
-        const cacheKey = 'unique';
-
-        const {result} = renderHook(
-            () => useEvaluation(query, {
-                ...evaluationOptions,
-                cacheKey: cacheKey,
-                fallback: 'error',
-                expiration: 50,
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-        expect(useLoader).toHaveBeenCalledWith({
-            cacheKey: hash(`useEvaluation:${cacheKey}:${query}:${JSON.stringify(evaluationOptions.attributes)}`),
-            fallback: 'error',
-            expiration: 50,
-            loader: expect.any(Function),
-        });
-
-        jest.mocked(useLoader)
-            .mock
-            .calls[0][0]
-            .loader();
-
-        expect(evaluate).toHaveBeenCalledWith(query, evaluationOptions);
-
-        expect(result.current).toBe('foo');
-    });
-
-    it('should remove undefined evaluation options', () => {
-        const evaluationOptions: EvaluationOptions = {
-            timeout: undefined,
-            attributes: undefined,
-        };
-
-        const evaluate: Plug['evaluate'] = jest.fn();
-
-        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
-        jest.mocked(useLoader).mockReturnValue('foo');
-
-        const query = 'location';
-
-        renderHook(() => useEvaluation(query, evaluationOptions));
-
-        jest.mocked(useLoader)
-            .mock
-            .calls[0][0]
-            .loader();
-
-        expect(evaluate).toHaveBeenCalledWith(query, {});
-    });
-
-    it('should use the initial value when the cache key changes if the stale-while-loading flag is false', async () => {
-        const key = {
-            current: 'initial',
-        };
-
-        const evaluate: Plug['evaluate'] = jest.fn();
-
-        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
-
-        jest.mocked(useLoader).mockImplementation(
-            () => (key.current === 'initial' ? 'first' : 'second'),
-        );
-
-        const query = 'location';
-
-        const {result, rerender} = renderHook(
-            () => useEvaluation(query, {
-                cacheKey: key.current,
-                initial: 'initial',
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
-            initial: 'initial',
-        }));
-
-        await waitFor(() => expect(result.current).toEqual('first'));
-
-        key.current = 'next';
-
-        rerender();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
-            initial: 'initial',
-        }));
-
-        await waitFor(() => expect(result.current).toEqual('second'));
-    });
-
-    it('should use the last evaluation result if the stale-while-loading flag is true', async () => {
-        const key = {
-            current: 'initial',
-        };
-
-        const evaluate: Plug['evaluate'] = jest.fn();
-
-        jest.mocked(useCroct).mockReturnValue({evaluate: evaluate} as Plug);
-
-        jest.mocked(useLoader).mockImplementation(
-            () => (key.current === 'initial' ? 'first' : 'second'),
-        );
-
-        const query = 'location';
-
-        const {result, rerender} = renderHook(
-            () => useEvaluation(query, {
-                cacheKey: key.current,
-                initial: 'initial',
-                staleWhileLoading: true,
-            }),
-        );
-
-        expect(useCroct).toHaveBeenCalled();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
-            initial: 'initial',
-        }));
-
-        await waitFor(() => expect(result.current).toEqual('first'));
-
-        key.current = 'next';
-
-        rerender();
-
-        expect(useLoader).toHaveBeenCalledWith(expect.objectContaining({
-            cacheKey: hash(`useEvaluation:${key.current}:${query}:${JSON.stringify({})}`),
-            initial: 'first',
-        }));
-
-        await waitFor(() => expect(result.current).toEqual('second'));
-    });
-});