@sima-land/isomorph 11.0.0-alpha.4 → 11.0.0-alpha.41

package/src/utils/react/error-handlers/index.tsx

@@ -0,0 +1,68 @@
+import { Component, ErrorInfo, ReactNode, Suspense } from 'react';
+
+/**
+ * Опции компонентов ErrorBoundary и SafeSuspense.
+ */
+export interface Props {
+  /** Дочерний элемент. */
+  children: NonNullable<ReactNode> | null;
+
+  /** Содержимое, которое будет выведено если возникла ошибка. */
+  fallback: NonNullable<ReactNode> | null;
+
+  /** Функция для логирования ошибок. */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+/**
+ * Компонент-предохранитель. Обработчик ошибок в React-компонентах.
+ */
+export class ErrorBoundary extends Component<Props, { hasError: boolean }> {
+  /**
+   * @param props Свойства.
+   */
+  constructor(props: Props) {
+    super(props);
+
+    this.state = { hasError: false };
+  }
+
+  /** @inheritDoc */
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  /** @inheritDoc */
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // @todo добавить возможность брать onError из специального контекста (это упростит передачу из di-контейнера)
+    const { onError } = this.props;
+
+    onError?.(error, errorInfo);
+  }
+
+  /**
+   * Рендер.
+   * @return Дочерний элемент либо запасное значение.
+   */
+  render() {
+    const { children, fallback } = this.props;
+
+    return <>{this.state.hasError ? fallback : children}</>;
+  }
+}
+
+/**
+ * Обертка над Suspense c перехватом ошибок.
+ * @todo Возможно этот компонент не нужен...
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export function SafeSuspense({ children, fallback, onError }: Props) {
+  return (
+    <Suspense fallback={fallback}>
+      <ErrorBoundary fallback={fallback} onError={onError}>
+        {children}
+      </ErrorBoundary>
+    </Suspense>
+  );
+}

package/src/utils/react/index.ts

@@ -0,0 +1,3 @@
+import { ErrorBoundary, SafeSuspense } from './error-handlers';
+
+export { ErrorBoundary, SafeSuspense };

package/src/utils/redux/__test__/remote-data.test.ts

@@ -0,0 +1,172 @@
+import { createReducer, createSlice } from '@reduxjs/toolkit';
+import { STATUS, RemoteData, RemoteDataState } from '..';
+
+type TestSliceState = RemoteDataState<number, string | null>;
+
+describe('RemoteData.STATUS', () => {
+  it('should be constant of status', () => {
+    expect(RemoteData.STATUS).toBe(STATUS);
+  });
+});
+
+describe('RemoteData.createActions', () => {
+  it('should create action creators', () => {
+    const actions = RemoteData.createActions<{ id: number }, string, number>('test-reducer');
+
+    expect(actions.request(123)).toEqual({
+      type: 'test-reducer/request',
+      payload: 123,
+    });
+
+    expect(actions.success({ id: 123 })).toEqual({
+      type: 'test-reducer/success',
+      payload: { id: 123 },
+    });
+
+    expect(actions.failure('error!')).toEqual({
+      type: 'test-reducer/failure',
+      payload: 'error!',
+    });
+  });
+});
+
+describe('RemoteData.createHandlers', () => {
+  it('should works with createSlice', () => {
+    const initialState: TestSliceState = {
+      data: 0,
+      status: STATUS.initial,
+      error: null,
+    };
+
+    const slice = createSlice({
+      name: 'test',
+      initialState,
+      reducers: {
+        ...RemoteData.createHandlers<number, string | null>(),
+      },
+    });
+
+    expect(slice.reducer(initialState, slice.actions.request())).toEqual({
+      ...initialState,
+      status: STATUS.fetching,
+    });
+
+    expect(slice.reducer(initialState, slice.actions.success(23))).toEqual({
+      ...initialState,
+      data: 23,
+      status: STATUS.success,
+      fetchCount: 1,
+    });
+
+    expect(slice.reducer(initialState, slice.actions.failure('test error'))).toEqual({
+      ...initialState,
+      error: 'test error',
+      status: STATUS.failure,
+      fetchCount: 1,
+    });
+  });
+});
+
+interface TestReducerState extends RemoteDataState<{ name: string } | null, string | null> {
+  type: 'test-reducer-state';
+}
+
+describe('RemoteData.applyHandlers', () => {
+  it('should apply handlers by builder', () => {
+    const initialState: TestReducerState = {
+      type: 'test-reducer-state',
+      data: null,
+      error: null,
+      status: 'initial',
+    };
+
+    const actions = {
+      ...RemoteData.createActions<TestReducerState['data'], string | null>('test-reducer'),
+    };
+
+    const reducer = createReducer<TestReducerState>(initialState, builder => {
+      RemoteData.applyHandlers(actions, builder);
+    });
+
+    expect(reducer(initialState, actions.request())).toEqual({
+      ...initialState,
+      status: 'fetching',
+    });
+
+    expect(reducer(initialState, actions.success({ name: 'Jason' }))).toEqual({
+      ...initialState,
+      data: { name: 'Jason' },
+      status: 'success',
+      fetchCount: 1,
+    });
+
+    expect(reducer(initialState, actions.failure('Restriction'))).toEqual({
+      ...initialState,
+      error: 'Restriction',
+      status: 'failure',
+      fetchCount: 1,
+    });
+  });
+});
+
+interface TestSelectorsState extends RemoteDataState<boolean, number> {
+  type: 'test-selectors-state';
+}
+
+describe('RemoteData.createSelectors', () => {
+  it('should create selectors', () => {
+    const initialState: TestSelectorsState = {
+      data: false,
+      error: 0,
+      status: 'initial',
+      type: 'test-selectors-state',
+    };
+
+    const selectors = RemoteData.createSelectors<TestSelectorsState, TestSelectorsState>(
+      (state: TestSelectorsState) => state,
+    );
+
+    expect(selectors.isInitial(initialState)).toBe(true);
+    expect(selectors.isFetching(initialState)).toBe(false);
+    expect(selectors.isSuccess(initialState)).toBe(false);
+    expect(selectors.isFailed(initialState)).toBe(false);
+    expect(selectors.wasFetched(initialState)).toBe(false);
+
+    const fetchingState: TestSelectorsState = {
+      ...initialState,
+      status: 'fetching',
+    };
+
+    expect(selectors.isInitial(fetchingState)).toBe(false);
+    expect(selectors.isFetching(fetchingState)).toBe(true);
+    expect(selectors.isSuccess(initialState)).toBe(false);
+    expect(selectors.isFailed(fetchingState)).toBe(false);
+    expect(selectors.wasFetched(fetchingState)).toBe(false);
+
+    const doneState: TestSelectorsState = {
+      ...initialState,
+      status: 'success',
+      data: true,
+      fetchCount: 94,
+    };
+
+    expect(selectors.isInitial(doneState)).toBe(false);
+    expect(selectors.isFetching(doneState)).toBe(false);
+    expect(selectors.isSuccess(doneState)).toBe(true);
+    expect(selectors.isFailed(doneState)).toBe(false);
+    expect(selectors.wasFetched(doneState)).toBe(true);
+
+    const failState: TestSelectorsState = {
+      ...initialState,
+      status: 'failure',
+      data: false,
+      fetchCount: 2,
+    };
+
+    expect(selectors.isInitial(failState)).toBe(false);
+    expect(selectors.isFetching(failState)).toBe(false);
+    expect(selectors.isSuccess(failState)).toBe(false);
+    expect(selectors.isFailed(failState)).toBe(true);
+    expect(selectors.wasFetched(failState)).toBe(true);
+  });
+});

package/src/utils/redux/index.ts

@@ -0,0 +1,4 @@
+import { Status, RemoteDataState, STATUS, RemoteData } from './remote-data';
+
+export type { Status, RemoteDataState };
+export { STATUS, RemoteData };

package/src/utils/redux/remote-data.ts

@@ -0,0 +1,138 @@
+/* eslint-disable require-jsdoc */
+
+// @todo "* as" сделано для работы в Node.js ESM но есть подозрение что на tree shaking плохо скажется
+import * as redux from '@reduxjs/toolkit';
+
+const { createAction, createSelector } = redux;
+
+interface RemoteDataActions<TData, TError = unknown, TPayload = void> {
+  request: redux.PayloadActionCreator<TPayload, string>;
+  success: redux.PayloadActionCreator<TData, string>;
+  failure: redux.PayloadActionCreator<TError, string>;
+}
+
+/**
+ * Статус загрузки данных.
+ */
+export type Status = 'initial' | 'fetching' | 'success' | 'failure';
+
+/**
+ * Базовая структура хранилища удаленных данных.
+ */
+export interface RemoteDataState<TData, TError> {
+  /** Загружаемые данные. */
+  readonly data: TData;
+
+  /** Данные ошибки запроса. */
+  readonly error: TError;
+
+  /** Статус загрузки данных. */
+  readonly status: Status;
+
+  /** Количество запросов. */
+  readonly fetchCount?: number;
+}
+
+/**
+ * Возможные статусы загрузки данных.
+ */
+export const STATUS: Record<Status, Status> = {
+  initial: 'initial',
+  fetching: 'fetching',
+  success: 'success',
+  failure: 'failure',
+} as const;
+
+/** Работа с удаленными данными. */
+export abstract class RemoteData {
+  static get STATUS() {
+    return STATUS;
+  }
+
+  /**
+   * Возвращает action'ы для работы с удаленными данными.
+   * @param name Префикс имён.
+   * @return Набор.
+   */
+  static createActions<TData = never, TError = never, TPayload = void>(
+    name: string,
+  ): RemoteDataActions<TData, TError, TPayload> {
+    return {
+      request: createAction<TPayload>(`${name}/request`),
+      success: createAction<TData>(`${name}/success`),
+      failure: createAction<TError>(`${name}/failure`),
+    } as const;
+  }
+
+  /**
+   * Возвращает набор обработчиков для работы с удаленными данными.
+   * @return Набор.
+   */
+  static createHandlers<
+    TData,
+    TError,
+    S extends RemoteDataState<TData, TError> = RemoteDataState<TData, TError>,
+  >() {
+    // ВАЖНО: не используем возможности immer здесь чтобы набор можно было использовать без immer.
+    return {
+      request(state: S | redux.Draft<S>): S | redux.Draft<S> {
+        return {
+          ...state,
+          status: STATUS.fetching,
+        };
+      },
+
+      success(state: S | redux.Draft<S>, action: redux.PayloadAction<TData>): S | redux.Draft<S> {
+        return {
+          ...state,
+          data: action.payload,
+          status: STATUS.success,
+          fetchCount: (state.fetchCount ?? 0) + 1,
+        };
+      },
+
+      failure(state: S | redux.Draft<S>, action: redux.PayloadAction<TError>): S | redux.Draft<S> {
+        return {
+          ...state,
+          error: action.payload,
+          status: STATUS.failure,
+          fetchCount: (state.fetchCount ?? 0) + 1,
+        };
+      },
+    } as const;
+  }
+
+  /**
+   * Применяет обработчики для работы с удаленными данными.
+   * @param actions Набор action'ов.
+   * @param builder Builder.
+   */
+  static applyHandlers<TData, TError>(
+    actions: RemoteDataActions<TData, TError, any | never>,
+    builder: Pick<redux.ActionReducerMapBuilder<RemoteDataState<TData, TError>>, 'addCase'>,
+  ): void {
+    const handlers = RemoteData.createHandlers<TData, TError>();
+
+    // @todo разобраться с проблемой когда убираешь ".type"
+    builder.addCase(actions.request.type, handlers.request);
+    builder.addCase(actions.success.type, handlers.success);
+    builder.addCase(actions.failure.type, handlers.failure);
+  }
+
+  /**
+   * Возвращает новый набор селекторов данных.
+   * @param selectRoot Функция получения состояния.
+   * @return Набор селекторов.
+   */
+  static createSelectors<S extends RemoteDataState<unknown, unknown>, R = unknown>(
+    selectRoot: (root: R) => S,
+  ) {
+    return {
+      isInitial: createSelector(selectRoot, state => state.status === 'initial'),
+      isFetching: createSelector(selectRoot, state => state.status === 'fetching'),
+      isSuccess: createSelector(selectRoot, state => state.status === 'success'),
+      isFailed: createSelector(selectRoot, state => state.status === 'failure'),
+      wasFetched: createSelector(selectRoot, state => (state.fetchCount ?? 0) > 0),
+    } as const;
+  }
+}

package/src/utils/redux-saga/__test__/take-chain.test.ts

@@ -0,0 +1,141 @@
+import { delay, fork, put, race, take } from 'redux-saga/effects';
+import { generateTakeChain, putDelayed, takeChain } from '../take-chain';
+
+const SettlementTypes = {
+  UPDATE: 'settlement',
+  REMOVE: 'settlement',
+};
+
+describe('takeChain', () => {
+  beforeEach(() => {
+    jest.spyOn(Date, 'now').mockImplementation(() => 123);
+  });
+
+  const testTypes = [SettlementTypes.UPDATE, SettlementTypes.REMOVE];
+  const timeout = 100;
+  const testTask = jest.fn();
+  const deps: [string, number] = ['John', 23];
+
+  it('generateTakeChain few actions', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: SettlementTypes.REMOVE.toString() }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: { type: SettlementTypes.UPDATE.toString() },
+        canceled: { type: 'BREAK_123' },
+      }).value,
+    ).toEqual(
+      fork(testTask, ...deps, [
+        { type: SettlementTypes.REMOVE.toString() },
+        { type: SettlementTypes.UPDATE.toString() },
+      ]),
+    );
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('generateTakeChain one action', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: 'settlement/REMOVE' }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: undefined,
+        canceled: { type: 'BREAK_123' },
+      }).value,
+    ).toEqual(fork(testTask, ...deps, [{ type: 'settlement/REMOVE' }]));
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('generateTakeChain without canceled', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: 'settlement/REMOVE' }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+    expect(
+      gen.next({
+        action: undefined,
+        canceled: undefined,
+      }).value,
+    ).toBeTruthy();
+  });
+
+  it('generateTakeChain when puts all actions and have not canceled', () => {
+    const gen = generateTakeChain(timeout, testTypes, testTask, deps);
+
+    expect(gen.next().value).toEqual(take(testTypes));
+
+    expect(gen.next({ type: SettlementTypes.REMOVE.toString() }).value).toEqual(
+      fork(putDelayed, timeout, { type: 'BREAK_123' }),
+    );
+
+    expect(gen.next().value).toEqual(
+      race({
+        action: take(testTypes),
+        canceled: take('BREAK_123'),
+      }),
+    );
+
+    expect(
+      gen.next({
+        action: { type: SettlementTypes.UPDATE.toString() },
+        canceled: undefined,
+      }).value,
+    ).toEqual(
+      fork(testTask, ...deps, [
+        { type: SettlementTypes.REMOVE.toString() },
+        { type: SettlementTypes.UPDATE.toString() },
+      ]),
+    );
+    expect(gen.next()).toBeTruthy();
+  });
+
+  it('should fork generateTakeChain', () => {
+    const fakeTakeChain = takeChain(timeout, testTypes, testTask, ...deps);
+
+    expect(fakeTakeChain).toEqual(fork(generateTakeChain, timeout, testTypes, testTask, deps));
+  });
+});
+
+describe('putDelayed', () => {
+  it('should works properly', () => {
+    const gen = putDelayed(10, { type: 'test' });
+
+    expect(gen.next().value).toEqual(delay(10));
+    expect(gen.next().value).toEqual(put({ type: 'test' }));
+
+    expect(gen.next()).toBeTruthy();
+  });
+});

package/src/utils/redux-saga/index.ts

@@ -0,0 +1,3 @@
+export type { SagaExtendedMiddleware, SagaMiddlewareHandler } from './types';
+export { takeChain } from './take-chain';
+export { createSagaMiddleware } from './middleware';

package/src/utils/redux-saga/middleware.ts

@@ -0,0 +1,168 @@
+/* eslint-disable require-jsdoc, jsdoc/require-jsdoc */
+import { MiddlewareAPI } from '@reduxjs/toolkit';
+import {
+  SagaExtendedMiddleware,
+  SagaInterruptConfig,
+  SagaMiddlewareHandler,
+  SagaTimeoutRunData,
+} from './types';
+import createSagaMiddleware, { END, Saga, Task, SagaMiddleware } from 'redux-saga';
+import { call, cancel, delay, fork, race } from 'redux-saga/effects';
+
+/**
+ * Возвращает расширенную версию SagaMiddleware.
+ * @param handler Обработчик событий.
+ * @return Middleware.
+ */
+function createSagaExtendedMiddleware(handler: SagaMiddlewareHandler): SagaExtendedMiddleware {
+  return new MiddlewareControl(handler).toMiddleware();
+}
+
+class MiddlewareControl {
+  private api?: MiddlewareAPI;
+  private interruptTimeout?: number;
+  private interruptStrategy?: SagaInterruptConfig['strategy'];
+  private handler: SagaMiddlewareHandler;
+  private sagaMiddleware: SagaMiddleware;
+
+  constructor(handler: SagaMiddlewareHandler) {
+    this.handler = handler;
+
+    this.sagaMiddleware = createSagaMiddleware({
+      onError: (error, info) => {
+        handler.onSagaError(error, info);
+      },
+    });
+  }
+
+  toMiddleware(): SagaExtendedMiddleware {
+    const middleware: SagaExtendedMiddleware = api => {
+      this.api = api;
+      return this.sagaMiddleware(api);
+    };
+
+    middleware.timeout = (milliseconds, config) => {
+      this.configInterrupt(milliseconds, config);
+      return middleware;
+    };
+
+    middleware.run = async (saga, ...args) => {
+      await this.run(saga, ...args);
+    };
+
+    return middleware;
+  }
+
+  private configInterrupt(milliseconds: number, config?: SagaInterruptConfig) {
+    this.interruptTimeout = milliseconds;
+    this.interruptStrategy = config?.strategy ?? 'cancel-task';
+  }
+
+  private async run<S extends Saga>(saga: S, ...args: Parameters<S>): Promise<void> {
+    const { interruptTimeout } = this;
+
+    if (typeof interruptTimeout === 'number' && Number.isFinite(interruptTimeout)) {
+      switch (this.interruptStrategy) {
+        case 'cancel-task':
+          await this.runWithBreakTask({ saga, args, timeout: interruptTimeout });
+          return;
+        case 'dispatch-end':
+          await this.runWithBreakMiddleware({ saga, args, timeout: interruptTimeout });
+          return;
+      }
+    }
+
+    await this.sagaMiddleware.run(saga, ...args).toPromise();
+  }
+
+  private async runWithBreakTask<S extends Saga>(data: SagaTimeoutRunData<S>): Promise<void> {
+    const result: Either<unknown, unknown> = await this.sagaMiddleware
+      .run(runWithTimeLimit, data)
+      .toPromise();
+
+    if (!result.done) {
+      this.handler.onTimeoutInterrupt({ timeout: data.timeout });
+    }
+  }
+
+  private async runWithBreakMiddleware<S extends Saga>(data: SagaTimeoutRunData<S>): Promise<void> {
+    const { saga, args, timeout } = data;
+    const { api } = this;
+
+    if (!api) {
+      const error = new Error('Middleware is not applied to the store');
+
+      this.handler.onConfigError(error);
+
+      throw error;
+    }
+
+    const promises: Promise<void>[] = [];
+
+    let ready = false;
+    let timerId: ReturnType<typeof setTimeout>;
+
+    promises.push(
+      this.sagaMiddleware
+        .run(saga, ...args)
+        .toPromise()
+        .then(() => {
+          ready = true;
+        })
+        .finally(() => {
+          // вне зависимости от результата отключаем таймер если он есть
+          timerId !== undefined && clearTimeout(timerId);
+        }),
+    );
+
+    promises.push(
+      new Promise<void>(resolve => {
+        timerId = setTimeout(() => {
+          if (!ready) {
+            this.handler.onTimeoutInterrupt({ timeout });
+            api.dispatch(END);
+          }
+
+          resolve();
+        }, timeout);
+      }),
+    );
+
+    await Promise.race(promises);
+  }
+}
+
+function* runWithTimeLimit<S extends Saga>(
+  data: SagaTimeoutRunData<S>,
+): Generator<any, Either<SagaCancelSignal, ReturnType<S>>, any> {
+  const { saga, args, timeout } = data;
+  const task: Task = yield fork(saga, ...args);
+
+  const [needCancel, taskResult]: [boolean, ReturnType<S>] = yield race([
+    delay(timeout, true),
+    call(() => task.toPromise()),
+  ]);
+
+  if (needCancel) {
+    yield cancel(task);
+
+    // ВАЖНО: если делать throw ... - ошибка попадет в onError (createSagaMiddleware)
+    // чтобы не логировать лишний раз возвращаем значение
+    return { done: false, error: new SagaCancelSignal() };
+  } else {
+    return { done: true, value: taskResult };
+  }
+}
+
+// @todo в будущем можно заменить все ожидаемые исключения (только внутри фреймворка) на этот тип
+type Either<E, V> = { done: false; error: E } | { done: true; value: V };
+
+class SagaCancelSignal {
+  name: string;
+
+  constructor() {
+    this.name = 'SagaCancelSignal';
+  }
+}
+
+export { createSagaExtendedMiddleware as createSagaMiddleware };