@croct/plug-react 0.5.0-next.1 → 0.5.0-next.2

package/src/hooks/Cache.test.ts

@@ -0,0 +1,280 @@
+import {Cache, EntryOptions} from './Cache';
+
+describe('Cache', () => {
+    afterEach(() => {
+        jest.clearAllTimers();
+        jest.resetAllMocks();
+    });
+
+    it('should load and cache the value for the default cache time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        jest.advanceTimersByTime(10);
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result2');
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
+    it('should load the value once before expiration', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn(
+            () => new Promise<string>(resolve => {
+                setTimeout(() => resolve('done'), 10);
+            }),
+        );
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise1: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise1 = result;
+        }
+
+        let promise2: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise2 = result;
+        }
+
+        expect(promise1).toBe(promise2);
+
+        jest.advanceTimersByTime(10);
+
+        await expect(promise1).resolves.toEqual('done');
+        await expect(promise2).resolves.toEqual('done');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should load and cache the value for the specified time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            expiration: 15,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+
+        jest.advanceTimersByTime(15);
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result2');
+
+        expect(loader).toHaveBeenCalledTimes(2);
+    });
+
+    it('should load and cache the value for undetermined time', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn()
+            .mockResolvedValueOnce('result1')
+            .mockResolvedValueOnce('result2');
+
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            expiration: -1,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toEqual('result1');
+
+        jest.advanceTimersByTime(60_000);
+
+        expect(cache.load(options)).toEqual('result1');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return the fallback value on error', async () => {
+        const cache = new Cache(10);
+
+        const loader = jest.fn().mockRejectedValue(new Error('failed'));
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+            fallback: 'fallback',
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        expect(cache.load(options)).toEqual('fallback');
+
+        // Should cache the result but not the fallback value
+        expect(cache.load({...options, fallback: 'error'})).toEqual('error');
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throw the error if no fallback is specified', async () => {
+        const cache = new Cache(10);
+
+        const error = new Error('failed');
+
+        const loader = jest.fn().mockRejectedValue(error);
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        await expect(() => cache.load(options)).toThrow(error);
+    });
+
+    it('should cache the error', async () => {
+        const cache = new Cache(10);
+
+        const error = new Error('error');
+        const loader = jest.fn().mockRejectedValue(error);
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await expect(promise).resolves.toBeUndefined();
+
+        expect(() => cache.load(options)).toThrow(error);
+        expect(cache.get(options.cacheKey)?.error).toBe(error);
+    });
+
+    it('should provide the cached values', async () => {
+        jest.useFakeTimers();
+
+        const cache = new Cache(10);
+
+        const loader = jest.fn().mockResolvedValue('loaded');
+        const options: EntryOptions<string> = {
+            cacheKey: 'key',
+            loader: loader,
+        };
+
+        let promise: Promise<any>|undefined;
+
+        try {
+            cache.load(options);
+        } catch (result: any|undefined) {
+            promise = result;
+        }
+
+        await promise;
+
+        jest.advanceTimersByTime(9);
+
+        const entry = cache.get(options.cacheKey);
+
+        expect(entry?.result).toBe('loaded');
+        expect(entry?.promise).toBe(promise);
+        expect(entry?.timeout).not.toBeUndefined();
+        expect(entry?.error).toBeUndefined();
+
+        entry?.dispose();
+
+        jest.advanceTimersByTime(9);
+
+        expect(cache.get(options.cacheKey)).toBe(entry);
+
+        expect(loader).toHaveBeenCalledTimes(1);
+    });
+});

package/src/hooks/Cache.ts

@@ -0,0 +1,97 @@
+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

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

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

@@ -0,0 +1,23 @@
+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(new Error('The initial value is required for server-side rendering (SSR).'));
+    });
+});

package/src/hooks/useContent.test.ts

@@ -0,0 +1,66 @@
+import {renderHook} from '@testing-library/react';
+import {Plug} from '@croct/plug';
+import {useCroct} from './useCroct';
+import {useLoader} from './useLoader';
+import {useContent} from './useContent';
+
+jest.mock(
+    './useCroct',
+    () => ({
+        useCroct: jest.fn(),
+    }),
+);
+
+jest.mock(
+    './useLoader',
+    () => ({
+        useLoader: jest.fn(),
+    }),
+);
+
+describe('useContent (CSR)', () => {
+    it('should evaluate fetch the content', () => {
+        const fetch: Plug['fetch'] = jest.fn().mockResolvedValue({
+            payload: {
+                title: 'loaded',
+            },
+        });
+
+        jest.mocked(useCroct).mockReturnValue({fetch: fetch} as Plug);
+        jest.mocked(useLoader).mockReturnValue('foo');
+
+        const slotId = 'home-banner@1';
+
+        const {result} = renderHook(
+            () => useContent<{title: string}>(slotId, {
+                preferredLocale: 'en',
+                cacheKey: 'unique',
+                fallback: {
+                    title: 'error',
+                },
+                expiration: 50,
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+        expect(useLoader).toHaveBeenCalledWith({
+            cacheKey: `useContent:unique:${slotId}`,
+            fallback: {
+                title: 'error',
+            },
+            expiration: 50,
+            loader: expect.any(Function),
+        });
+
+        jest.mocked(useLoader)
+            .mock
+            .calls[0][0]
+            .loader();
+
+        expect(fetch).toHaveBeenCalledWith(slotId, {
+            preferredLocale: 'en',
+        });
+
+        expect(result.current).toBe('foo');
+    });
+});

package/src/hooks/useContent.ts

@@ -0,0 +1,69 @@
+import {SlotContent, VersionedSlotId, VersionedSlotMap} from '@croct/plug/slot';
+import {JsonObject} from '@croct/plug/sdk/json';
+import {FetchOptions} from '@croct/plug/plug';
+import {useLoader} from './useLoader';
+import {useCroct} from './useCroct';
+import {isSsr} from '../ssr-polyfills';
+
+export type UseContentOptions<I, F> = FetchOptions & {
+    fallback?: F,
+    initial?: I,
+    cacheKey?: string,
+    expiration?: number,
+};
+
+function useCsrContent<I, F>(
+    id: VersionedSlotId,
+    options: UseContentOptions<I, F> = {},
+): SlotContent<VersionedSlotId> | I | F {
+    const {fallback, initial, cacheKey, expiration, ...fetchOptions} = options;
+    const croct = useCroct();
+
+    return useLoader({
+        cacheKey: `useContent:${cacheKey ?? ''}:${id}`,
+        loader: () => croct.fetch(id, fetchOptions).then(({content}) => content),
+        initial: initial,
+        fallback: fallback,
+        expiration: expiration,
+    });
+}
+
+function useSsrContent<I, F>(
+    _: VersionedSlotId,
+    {initial}: UseContentOptions<I, F> = {},
+): SlotContent<VersionedSlotId> | I | F {
+    if (initial === undefined) {
+        throw new Error('The initial value is required for server-side rendering (SSR).');
+    }
+
+    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

@@ -0,0 +1,13 @@
+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.');
+    }
+
+    return context.plug;
+}

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

@@ -0,0 +1,23 @@
+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(new Error('The initial value is required for server-side rendering (SSR).'));
+    });
+});

package/src/hooks/useEvaluation.test.ts

@@ -0,0 +1,92 @@
+import {renderHook} 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';
+
+jest.mock(
+    './useCroct',
+    () => ({
+        useCroct: jest.fn(),
+    }),
+);
+
+jest.mock(
+    './useLoader',
+    () => ({
+        useLoader: jest.fn(),
+    }),
+);
+
+describe('useEvaluation', () => {
+    beforeEach(() => {
+        jest.resetModules();
+        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 {result} = renderHook(
+            () => useEvaluation(query, {
+                ...evaluationOptions,
+                cacheKey: 'unique',
+                fallback: 'error',
+                expiration: 50,
+            }),
+        );
+
+        expect(useCroct).toHaveBeenCalled();
+        expect(useLoader).toHaveBeenCalledWith({
+            cacheKey: 'useEvaluation:unique:location:{"foo":"bar"}',
+            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, {});
+    });
+});