@croct/plug-react 0.10.0 → 0.11.0

package/src/hooks/useEvaluation.ts

@@ -1,94 +0,0 @@
-import {JsonValue} from '@croct/plug/sdk/json';
-import {EvaluationOptions} from '@croct/sdk/facade/evaluatorFacade';
-import {useEffect, useState} from 'react';
-import {useLoader} from './useLoader';
-import {useCroct} from './useCroct';
-import {isSsr} from '../ssr-polyfills';
-import {hash} from '../hash';
-
-export type UseEvaluationOptions<I, F> = EvaluationOptions & {
-    initial?: I,
-    fallback?: F,
-    cacheKey?: string,
-    expiration?: number,
-    staleWhileLoading?: boolean,
-};
-
-type UseEvaluationHook = <T extends JsonValue, I = T, F = T>(
-    query: string,
-    options?: UseEvaluationOptions<I, F>,
-) => T | I | F;
-
-function useCsrEvaluation<T = JsonValue, I = T, F = T>(
-    query: string,
-    options: UseEvaluationOptions<I, F> = {},
-): T | I | F {
-    const {
-        cacheKey,
-        fallback,
-        expiration,
-        staleWhileLoading = false,
-        initial: initialValue,
-        ...evaluationOptions
-    } = options;
-
-    const [initial, setInitial] = useState<T | I | F | undefined>(initialValue);
-    const croct = useCroct();
-
-    const result = useLoader<T | I | F>({
-        cacheKey: hash(
-            `useEvaluation:${cacheKey ?? ''}`
-            + `:${query}`
-            + `:${JSON.stringify(options.attributes ?? {})}`,
-        ),
-        loader: () => croct.evaluate<T & JsonValue>(query, cleanEvaluationOptions(evaluationOptions)),
-        initial: initial,
-        fallback: fallback,
-        expiration: expiration,
-    });
-
-    useEffect(
-        () => {
-            if (staleWhileLoading) {
-                setInitial(current => {
-                    if (current !== result) {
-                        return result;
-                    }
-
-                    return current;
-                });
-            }
-        },
-        [result, staleWhileLoading],
-    );
-
-    return result;
-}
-
-function cleanEvaluationOptions(options: EvaluationOptions): EvaluationOptions {
-    const result: EvaluationOptions = {};
-
-    for (const [key, value] of Object.entries(options) as Array<[keyof EvaluationOptions, any]>) {
-        if (value !== undefined) {
-            result[key] = value;
-        }
-    }
-
-    return result;
-}
-
-function useSsrEvaluation<T = JsonValue, I = T, F = T>(
-    _: string,
-    {initial}: UseEvaluationOptions<I, F> = {},
-): T | I | F {
-    if (initial === undefined) {
-        throw new Error(
-            'The initial value is required for server-side rendering (SSR). '
-            + 'For help, see https://croct.help/sdk/react/missing-evaluation-result',
-        );
-    }
-
-    return initial;
-}
-
-export const useEvaluation: UseEvaluationHook = isSsr() ? useSsrEvaluation : useCsrEvaluation;

package/src/hooks/useLoader.test.ts

@@ -1,407 +0,0 @@
-import {act, renderHook, waitFor} from '@testing-library/react';
-import {useLoader} from './useLoader';
-
-describe('useLoader', () => {
-    const cacheKey = {
-        index: 0,
-        next: function next(): string {
-            this.index++;
-
-            return this.current();
-        },
-        current: function current(): string {
-            return `key-${this.index}`;
-        },
-    };
-
-    beforeEach(() => {
-        cacheKey.next();
-        jest.resetAllMocks();
-        jest.clearAllTimers();
-    });
-
-    // Needed to use fake timers and promises:
-    // https://github.com/testing-library/react-testing-library/issues/244#issuecomment-449461804
-    function flushPromises(): Promise<void> {
-        return Promise.resolve();
-    }
-
-    it('should return the load the value and cache on success', async () => {
-        const loader = jest.fn().mockResolvedValue('foo');
-
-        const {result, rerender} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                loader: loader,
-            }),
-        );
-
-        rerender();
-
-        await waitFor(() => expect(result.current).toBe('foo'));
-
-        expect(loader).toHaveBeenCalledTimes(1);
-    });
-
-    it('should load the value and cache on error', async () => {
-        const error = new Error('fail');
-        const loader = jest.fn().mockRejectedValue(error);
-
-        const {result, rerender} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                fallback: error,
-                loader: loader,
-            }),
-        );
-
-        rerender();
-
-        await waitFor(() => expect(result.current).toBe(error));
-
-        expect(loader).toHaveBeenCalledTimes(1);
-    });
-
-    it('should reload the value on error', async () => {
-        const content = {foo: 'qux'};
-
-        const loader = jest.fn()
-            .mockImplementationOnce(() => {
-                throw new Error('fail');
-            })
-            .mockImplementationOnce(() => Promise.resolve(content));
-
-        const {result, rerender} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                initial: {},
-                loader: loader,
-            }),
-        );
-
-        await act(flushPromises);
-
-        rerender();
-
-        await waitFor(() => expect(result.current).toBe(content));
-
-        expect(loader).toHaveBeenCalledTimes(2);
-    });
-
-    it('should return the initial state on the initial render', async () => {
-        const loader = jest.fn(() => Promise.resolve('loaded'));
-
-        const {result} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                initial: 'loading',
-                loader: loader,
-            }),
-        );
-
-        expect(result.current).toBe('loading');
-
-        await waitFor(() => expect(result.current).toBe('loaded'));
-    });
-
-    it('should update the initial state with the fallback state on error', async () => {
-        const loader = jest.fn().mockRejectedValue(new Error('fail'));
-
-        const {result} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                initial: 'loading',
-                fallback: 'error',
-                loader: loader,
-            }),
-        );
-
-        expect(result.current).toBe('loading');
-
-        await waitFor(() => expect(result.current).toBe('error'));
-    });
-
-    it('should return the fallback state on error', async () => {
-        const loader = jest.fn().mockRejectedValue(new Error('fail'));
-
-        const {result} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                fallback: 'foo',
-                loader: loader,
-            }),
-        );
-
-        await waitFor(() => expect(result.current).toBe('foo'));
-
-        expect(loader).toHaveBeenCalled();
-    });
-
-    it('should extend the cache expiration on every render', async () => {
-        jest.useFakeTimers();
-
-        const loader = jest.fn().mockResolvedValue('foo');
-
-        const {rerender, unmount} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                loader: loader,
-                expiration: 15,
-            }),
-        );
-
-        await act(flushPromises);
-
-        jest.advanceTimersByTime(14);
-
-        rerender();
-
-        jest.advanceTimersByTime(14);
-
-        rerender();
-
-        expect(loader).toHaveBeenCalledTimes(1);
-
-        jest.advanceTimersByTime(15);
-
-        unmount();
-
-        renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                loader: loader,
-                expiration: 15,
-            }),
-        );
-
-        await act(flushPromises);
-
-        expect(loader).toHaveBeenCalledTimes(2);
-    });
-
-    it('should not expire the cache when the expiration is negative', async () => {
-        jest.useFakeTimers();
-
-        const loader = jest.fn(
-            () => new Promise(resolve => {
-                setTimeout(() => resolve('foo'), 10);
-            }),
-        );
-
-        const {rerender} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                loader: loader,
-                expiration: -1,
-            }),
-        );
-
-        jest.advanceTimersByTime(10);
-
-        await act(flushPromises);
-
-        // First rerender
-        rerender();
-
-        // Second rerender
-        rerender();
-
-        expect(loader).toHaveBeenCalledTimes(1);
-    });
-
-    it('should reload the value when the cache key changes without initial value', async () => {
-        jest.useFakeTimers();
-
-        const loader = jest.fn()
-            .mockResolvedValueOnce('foo')
-            .mockImplementationOnce(
-                () => new Promise(resolve => {
-                    setTimeout(() => resolve('bar'), 10);
-                }),
-            );
-
-        const {result, rerender} = renderHook<any, {initial: string}>(
-            props => useLoader({
-                cacheKey: cacheKey.current(),
-                loader: loader,
-                initial: props?.initial,
-            }),
-        );
-
-        await act(flushPromises);
-
-        rerender();
-
-        await waitFor(() => expect(result.current).toBe('foo'));
-
-        expect(loader).toHaveBeenCalledTimes(1);
-
-        cacheKey.next();
-
-        rerender({initial: 'loading'});
-
-        await waitFor(() => expect(result.current).toBe('loading'));
-
-        jest.advanceTimersByTime(10);
-
-        await waitFor(() => expect(result.current).toBe('bar'));
-
-        expect(loader).toHaveBeenCalledTimes(2);
-    });
-
-    it('should reload the value when the cache key changes with initial value', async () => {
-        jest.useFakeTimers();
-
-        const loader = jest.fn()
-            .mockImplementationOnce(
-                () => new Promise(resolve => {
-                    setTimeout(() => resolve('foo'), 10);
-                }),
-            )
-            .mockImplementationOnce(
-                () => new Promise(resolve => {
-                    setTimeout(() => resolve('bar'), 10);
-                }),
-            );
-
-        const {result, rerender} = renderHook<any, {initial: string}>(
-            props => useLoader({
-                cacheKey: cacheKey.current(),
-                initial: props?.initial ?? 'first content',
-                loader: loader,
-            }),
-        );
-
-        await act(flushPromises);
-
-        expect(result.current).toBe('first content');
-
-        jest.advanceTimersByTime(10);
-
-        await act(flushPromises);
-
-        await waitFor(() => expect(result.current).toBe('foo'));
-
-        expect(loader).toHaveBeenCalledTimes(1);
-
-        cacheKey.next();
-
-        rerender({initial: 'second content'});
-
-        await waitFor(() => expect(result.current).toBe('second content'));
-
-        jest.advanceTimersByTime(10);
-
-        await act(flushPromises);
-
-        await waitFor(() => expect(result.current).toBe('bar'));
-
-        expect(loader).toHaveBeenCalledTimes(2);
-    });
-
-    it.each<[number, number|undefined]>(
-        [
-            // [Expected elapsed time, Expiration]
-            [60_000, undefined],
-            [15_000, 15_000],
-        ],
-    )('should cache the values for %d milliseconds', async (step, expiration) => {
-        jest.useFakeTimers();
-
-        const delay = 10;
-        const loader = jest.fn(
-            () => new Promise(resolve => {
-                setTimeout(() => resolve('foo'), delay);
-            }),
-        );
-
-        const {result: firstTime} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                expiration: expiration,
-                loader: loader,
-            }),
-        );
-
-        jest.advanceTimersByTime(delay);
-
-        await act(flushPromises);
-
-        await waitFor(() => expect(firstTime.current).toBe('foo'));
-
-        const {result: secondTime} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                expiration: expiration,
-                loader: loader,
-            }),
-        );
-
-        expect(secondTime.current).toBe('foo');
-
-        expect(loader).toHaveBeenCalledTimes(1);
-
-        jest.advanceTimersByTime(step);
-
-        const {result: thirdTime} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                expiration: expiration,
-                loader: loader,
-            }),
-        );
-
-        jest.advanceTimersByTime(delay);
-
-        await act(flushPromises);
-
-        await waitFor(() => expect(thirdTime.current).toBe('foo'));
-
-        expect(loader).toHaveBeenCalledTimes(2);
-    });
-
-    it('should dispose the cache on unmount', async () => {
-        jest.useFakeTimers();
-
-        const delay = 10;
-        const loader = jest.fn(
-            () => new Promise(resolve => {
-                setTimeout(() => resolve('foo'), delay);
-            }),
-        );
-
-        const {unmount} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                expiration: 5,
-                loader: loader,
-            }),
-        );
-
-        jest.advanceTimersByTime(delay);
-
-        await act(flushPromises);
-
-        unmount();
-
-        jest.advanceTimersByTime(5);
-
-        await act(flushPromises);
-
-        const {result: secondTime} = renderHook(
-            () => useLoader({
-                cacheKey: cacheKey.current(),
-                expiration: 5,
-                loader: loader,
-            }),
-        );
-
-        jest.advanceTimersByTime(delay);
-
-        await act(flushPromises);
-
-        expect(loader).toHaveBeenCalledTimes(2);
-
-        await waitFor(() => expect(secondTime.current).toBe('foo'));
-    });
-});

package/src/hooks/useLoader.ts

@@ -1,84 +0,0 @@
-import {useCallback, useEffect, useRef, useState} from 'react';
-import {Cache, EntryOptions} from './Cache';
-
-const cache = new Cache(60 * 1000);
-
-export type CacheOptions<R> = EntryOptions<R> & {
-    initial?: R,
-};
-
-export function useLoader<R>({initial, ...options}: CacheOptions<R>): R {
-    const {cacheKey} = options;
-    const loadedValue: R|undefined = cache.get<R>(cacheKey)?.result;
-    const [value, setValue] = useState(loadedValue !== undefined ? loadedValue : initial);
-    const mountedRef = useRef(true);
-    const initialRef = useRef(initial);
-    const previousCacheKey = useRef(cacheKey);
-
-    const load = useStableCallback(() => {
-        try {
-            setValue(cache.load(options));
-        } catch (result: unknown) {
-            if (result instanceof Promise) {
-                result.then((resolvedValue: R) => {
-                    if (mountedRef.current) {
-                        setValue(resolvedValue);
-                    }
-                });
-
-                return;
-            }
-
-            setValue(undefined);
-        }
-    });
-
-    const reset = useStableCallback(() => {
-        const newLoadedValue: R|undefined = cache.get<R>(cacheKey)?.result;
-
-        setValue(newLoadedValue !== undefined ? newLoadedValue : initial);
-
-        load();
-    });
-
-    useEffect(
-        () => {
-            if (previousCacheKey.current !== cacheKey) {
-                reset();
-                previousCacheKey.current = cacheKey;
-            }
-        },
-        [reset, cacheKey],
-    );
-
-    useEffect(
-        () => {
-            if (initialRef.current !== undefined) {
-                load();
-            }
-
-            return () => {
-                mountedRef.current = false;
-            };
-        },
-        [load],
-    );
-
-    if (value === undefined) {
-        return cache.load(options);
-    }
-
-    return value;
-}
-
-type Callback = () => void;
-
-function useStableCallback(callback: Callback): Callback {
-    const ref = useRef<Callback>(undefined);
-
-    useEffect(() => {
-        ref.current = callback;
-    });
-
-    return useCallback(() => { ref.current?.(); }, []);
-}

package/src/index.ts

@@ -1,6 +0,0 @@
-export * from '@croct/plug/sdk/json';
-export * from '@croct/plug/slot';
-export * from '@croct/plug/component';
-export * from './CroctProvider';
-export * from './hooks';
-export * from './components';

package/src/ssr-polyfills.ssr.test.ts

@@ -1,46 +0,0 @@
-/*
- * @jest-environment node
- */
-import croct from '@croct/plug';
-import {croct as croctPolyfill, isSsr} from './ssr-polyfills';
-
-jest.mock(
-    '@croct/plug',
-    () => ({
-        plug: jest.fn(),
-        unplug: jest.fn(),
-    }),
-);
-
-describe('Croct polyfill (SSR)', () => {
-    it('should not plug', () => {
-        croctPolyfill.plug({appId: '00000000-0000-0000-0000-000000000000'});
-
-        expect(croct.plug).not.toHaveBeenCalled();
-    });
-
-    it('should not unplug', async () => {
-        await expect(croctPolyfill.unplug()).resolves.toBeUndefined();
-
-        expect(croct.unplug).not.toHaveBeenCalled();
-    });
-
-    it('should not initialize', () => {
-        expect(croctPolyfill.initialized).toBe(false);
-
-        croctPolyfill.plug({appId: '00000000-0000-0000-0000-000000000000'});
-
-        expect(croctPolyfill.initialized).toBe(false);
-    });
-
-    it('should not allow accessing properties other than plug or unplug', () => {
-        expect(() => croctPolyfill.user)
-            .toThrow('Property croct.user is not supported on server-side (SSR).');
-    });
-});
-
-describe('isSsr', () => {
-    it('should always return true', () => {
-        expect(isSsr()).toBe(true);
-    });
-});

package/src/ssr-polyfills.test.ts

@@ -1,65 +0,0 @@
-import croct, {Configuration} from '@croct/plug';
-import {croct as croctPolyfill, isSsr} from './ssr-polyfills';
-import spyOn = jest.spyOn;
-
-describe('Croct polyfill (CSR)', () => {
-    beforeAll(() => {
-        jest.clearAllMocks();
-    });
-
-    const config: Configuration = {appId: '00000000-0000-0000-0000-000000000000'};
-
-    it('should delay unplugging to avoid reconnections', async () => {
-        jest.useFakeTimers();
-
-        const unplug = spyOn(croct, 'unplug');
-
-        const plug = spyOn(croct, 'plug');
-
-        croctPolyfill.plug(config);
-
-        expect(plug).toHaveBeenCalledTimes(1);
-
-        // First attempt: cancelling
-
-        const firstAttempt = croctPolyfill.unplug();
-
-        expect(unplug).not.toHaveBeenCalled();
-
-        croctPolyfill.plug(config);
-
-        jest.runOnlyPendingTimers();
-
-        await expect(firstAttempt).rejects.toThrow('Unplug cancelled.');
-
-        expect(unplug).not.toHaveBeenCalled();
-
-        // Second attempt: failing
-
-        unplug.mockRejectedValueOnce(new Error('Unplug failed.'));
-
-        const secondAttempt = croct.unplug();
-
-        jest.runOnlyPendingTimers();
-
-        await expect(secondAttempt).rejects.toThrow('Unplug failed.');
-
-        // Third attempt: succeeding
-
-        unplug.mockResolvedValueOnce();
-
-        const thirdAttempt = croct.unplug();
-
-        jest.runOnlyPendingTimers();
-
-        await expect(thirdAttempt).resolves.toBeUndefined();
-
-        expect(unplug).toHaveBeenCalledTimes(2);
-    });
-});
-
-describe('isSsr', () => {
-    it('should always return false', () => {
-        expect(isSsr()).toBe(false);
-    });
-});