@sima-land/isomorph 9.0.7 → 11.0.0-alpha.0

package/src/tokens.ts

@@ -0,0 +1,54 @@
+import { createToken } from './container';
+import type { Application } from 'express';
+import type { DefaultMiddleware, PageAssets, ResponseContext } from './http-server/types';
+import type { SagaRunner } from './saga-runner/types';
+import type { Logger } from './logger/types';
+import type { HttpClientFactory } from './http-client/types';
+import type { ConfigSource, BaseConfig } from './config/types';
+import type { Tracer } from './tracer/types';
+import type { Cache } from './cache/types';
+
+export const KnownToken = {
+  // config
+  Config: {
+    source: createToken<ConfigSource>('config.source'),
+    base: createToken<BaseConfig>('config.base'),
+  },
+
+  // cache
+  cache: createToken<Cache>('cache'),
+
+  // logging
+  logger: createToken<Logger>('logger'),
+
+  // tracing
+  tracer: createToken<Tracer>('tracer'),
+
+  // metrics
+  Metrics: {
+    httpApp: createToken<Application>('metrics.http-app'),
+  },
+
+  // http
+  Http: {
+    Client: {
+      factory: createToken<HttpClientFactory>('http.client.factory'),
+    },
+    Server: {
+      factory: createToken<() => Application>('http.server.factory'),
+      Defaults: {
+        middleware: createToken<DefaultMiddleware>('http.server.defaults.middleware'),
+      },
+    },
+  },
+
+  // scope: page response
+  Response: {
+    context: createToken<ResponseContext>('response/context'),
+    assets: createToken<PageAssets>('response/assets'),
+    prepare: createToken<() => JSX.Element | Promise<JSX.Element>>('response/prepare'),
+    render: createToken<(element: JSX.Element) => string | Promise<string>>('response/render'),
+    main: createToken<() => void>('response/main'),
+    sagaRunner: createToken<SagaRunner>('response/saga-runner'),
+  },
+} as const;

package/src/tracer/node.ts

@@ -0,0 +1,40 @@
+import type { Tracer } from './types';
+import type { BaseConfig } from '../config/types';
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node';
+import { BatchSpanProcessor, SpanExporter } from '@opentelemetry/tracing';
+import { SemanticResourceAttributes } from '@opentelemetry/semantic-conventions';
+import { registerInstrumentations } from '@opentelemetry/instrumentation';
+import { ExpressInstrumentation } from '@opentelemetry/instrumentation-express';
+import { HttpInstrumentation } from '@opentelemetry/instrumentation-http';
+import { Resource } from '@opentelemetry/resources';
+import { JaegerPropagator } from '@opentelemetry/propagator-jaeger';
+
+/**
+ * Возвращает новый tracer - объект для трассировки стадий различных процессов.
+ * @param config Конфиг.
+ * @param exporter Экспортер данных трассировки.
+ * @return Tracer.
+ */
+export function createTracer(config: BaseConfig, exporter: SpanExporter): Tracer {
+  // @todo доделать по инструкции: https://selvaganesh93.medium.com/tracing-node-js-application-with-opentelemetry-jaeger-ui-9523c0ac8453
+  const provider = new NodeTracerProvider({
+    resource: new Resource({
+      [SemanticResourceAttributes.SERVICE_NAME]: config.appName,
+      [SemanticResourceAttributes.SERVICE_VERSION]: config.appVersion,
+      [SemanticResourceAttributes.DEPLOYMENT_ENVIRONMENT]: config.env,
+    }),
+  });
+
+  // @todo выяснить, почему не сходятся типы и приходится оставлять as any
+  provider.addSpanProcessor(new BatchSpanProcessor(exporter) as any);
+
+  provider.register({
+    propagator: new JaegerPropagator(),
+  });
+
+  registerInstrumentations({
+    instrumentations: [new ExpressInstrumentation(), new HttpInstrumentation()],
+  });
+
+  return provider.getTracer(config.appName, config.appVersion);
+}

package/src/tracer/types.ts

@@ -0,0 +1,3 @@
+import type { Tracer } from '@opentelemetry/api';
+
+export type { Tracer };

package/src/utils/browser/analytics/__test__/data-layer.test.ts

@@ -0,0 +1,50 @@
+import { dataLayerPush } from '../data-layer';
+
+describe('dataLayerPush', () => {
+  beforeAll(() => {
+    (window as any).dataLayer = {
+      checkContext: () => 123,
+
+      push: jest.fn(function (this: any, data) {
+        // имитируем реальную работу window.dataLayer.push: в процессе удаляет data.n
+        delete data.n;
+
+        // имитируем реальную работу window.dataLayer.push: в процессе вызывает другие методы с this
+        this.checkContext();
+      }),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).dataLayer;
+  });
+
+  it('should handle window.dataLayer.push mutates object argument', () => {
+    const testData = {
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    };
+
+    expect((window as any).dataLayer.push).toBeCalledTimes(0);
+
+    dataLayerPush(testData);
+
+    expect((window as any).dataLayer.push).toBeCalledTimes(1);
+    expect((window as any).dataLayer.push.mock.calls[0][0]).toEqual({
+      prop1: 1,
+      prop2: 2,
+    });
+    expect(testData).toEqual({
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    });
+  });
+
+  it('should handle window.dataLayer.push absence', () => {
+    delete (window as any).dataLayer;
+
+    expect(() => dataLayerPush({ n: 'test-123' })).not.toThrow();
+  });
+});

package/src/utils/browser/analytics/__test__/oko.test.tsx

@@ -0,0 +1,143 @@
+import React, { createElement } from 'react';
+import { render } from 'react-dom';
+import { act, Simulate } from 'react-dom/test-utils';
+import { okoPush, useOkoPush } from '../oko';
+
+describe('useOkoPush', () => {
+  const TestComponent = ({ prop }: any) => {
+    const fn = useOkoPush({
+      n: 'test-event',
+      prop,
+    });
+
+    return createElement('div', { 'data-testid': 'test-block', onClick: fn });
+  };
+
+  beforeAll(() => {
+    (window as any).oko = {
+      push: jest.fn(),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).oko;
+  });
+
+  it('should call', () => {
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    render(<TestComponent prop={123} />, container);
+
+    expect((window as any).oko.push).toHaveBeenCalledTimes(0);
+
+    act(() => {
+      Simulate.click(container.querySelector('[data-testid="test-block"]') as HTMLElement);
+    });
+
+    expect((window as any).oko.push).toHaveBeenCalledTimes(1);
+    expect((window as any).oko.push).toHaveBeenCalledWith({
+      n: 'test-event',
+      prop: 123,
+    });
+  });
+
+  it('should throw error', async () => {
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    render(<TestComponent prop={1} />, container);
+
+    const renderWithError = () => {
+      render(<TestComponent prop={2} />, container);
+    };
+
+    expect(renderWithError).toThrow(
+      Error(
+        [
+          'useAnalytics: Данные для аналитики изменились.',
+          'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
+        ].join('\n'),
+      ),
+    );
+  });
+
+  it('should do not throw for complex object structure', () => {
+    const ComplexTest = () => {
+      const fn = useOkoPush({
+        n: 'custom',
+        category: 'balance_goods',
+        custom_str: ['minus'],
+      });
+
+      return <div data-testid='test-block' onClick={fn} />;
+    };
+
+    const container = document.createElement('div');
+
+    document.body.append(container);
+
+    act(() => {
+      render(<ComplexTest />, container);
+    });
+
+    const secondRender = () => {
+      act(() => {
+        render(<ComplexTest />, container);
+      });
+    };
+
+    expect(secondRender).not.toThrow();
+  });
+});
+
+describe('okoPush', () => {
+  beforeAll(() => {
+    (window as any).oko = {
+      checkContext: () => 123,
+
+      push: jest.fn(function (this: any, data) {
+        // имитируем реальную работу window.oko.push: в процессе удаляет data.n
+        delete data.n;
+
+        // имитируем реальную работу window.oko.push: в процессе вызывает другие методы с this
+        this.checkContext();
+      }),
+    };
+  });
+
+  afterAll(() => {
+    delete (window as any).oko;
+  });
+
+  it('should handle window.oko.push mutates object argument', () => {
+    const testData = {
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    };
+
+    expect((window as any).oko.push).toBeCalledTimes(0);
+
+    okoPush(testData);
+
+    expect((window as any).oko.push).toBeCalledTimes(1);
+    expect((window as any).oko.push.mock.calls[0][0]).toEqual({
+      prop1: 1,
+      prop2: 2,
+    });
+    expect(testData).toEqual({
+      n: 'test-event',
+      prop1: 1,
+      prop2: 2,
+    });
+  });
+
+  it('should handle window.oko.push absence', () => {
+    delete (window as any).oko;
+
+    expect(() => okoPush({ n: 'test-123' })).not.toThrow();
+  });
+});

package/src/utils/browser/analytics/data-layer.ts

@@ -0,0 +1,12 @@
+import { isFunction } from 'lodash';
+
+/**
+ * Отправка аналитики в око.
+ * @param eventData Данные события для отправки.
+ */
+export const dataLayerPush = (eventData: Record<string, any>) => {
+  const win: any = window;
+
+  // копируем объект так как window.dataLayer.push может менять аргумент в процессе работы
+  isFunction(win.dataLayer?.push) && win.dataLayer.push({ ...eventData });
+};

package/src/{helpers/analytics/index.ts → utils/browser/analytics/oko.ts}

@@ -1,5 +1,4 @@
 import { useRef } from 'react';
-import { call } from 'redux-saga/effects';
 import { isEqual, isFunction } from 'lodash';
 
 export type OkoEvent = Record<string, any>;
@@ -9,24 +8,18 @@ export type OkoEvent = Record<string, any>;
  * @param eventData Данные события для отправки.
  */
 export const okoPush = (eventData: OkoEvent) => {
+  const win: any = window;
+
   // копируем объект так как window.oko.push меняет свой аргумент в процессе выполнения
-  isFunction((window as any).oko?.push) && (window as any).oko.push({ ...eventData });
+  isFunction(win.oko?.push) && win.oko.push({ ...eventData });
 };
 
-/**
- * Эффект для отправки события в ОКО.
- * @param data Данные события для отправки в ОКО.
- */
-export function * sendAnalytics (data: OkoEvent) {
-  yield call(okoPush, data);
-}
-
 /**
  * Хук, возвращающий функцию, которая отправит аналитику в ОКО.
  * @param data Данные события для отправки в ОКО.
  * @return Функция.
  */
-export const useAnalytics = (data: OkoEvent) => {
+export const useOkoPush = (data: OkoEvent) => {
   const dataRef = useRef<OkoEvent>();
   const fnRef = useRef<() => void>();
 
@@ -39,10 +32,12 @@ export const useAnalytics = (data: OkoEvent) => {
   }
 
   if (!isEqual(data, dataRef.current)) {
-    throw Error([
-      'useAnalytics: Данные для аналитики изменились.',
-      'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
-    ].join('\n'));
+    throw Error(
+      [
+        'useAnalytics: Данные для аналитики изменились.',
+        'Если необходимо использовать динамические данные, вынесите логику из React-компонента.',
+      ].join('\n'),
+    );
   }
 
   return fnRef.current;

package/src/utils/browser/storage/index.ts

@@ -0,0 +1,75 @@
+/* eslint-disable require-jsdoc, jsdoc/require-jsdoc */
+
+export interface StorageUtils
+  extends Pick<Storage, 'clear' | 'getItem' | 'key' | 'removeItem' | 'setItem' | 'length'> {
+  isAvailable: () => boolean;
+}
+
+export function createStorageUtils(getStorage: () => Storage): StorageUtils {
+  function isAvailable(): boolean {
+    try {
+      const testKey = `local_storage_test_key::${Date.now()}`;
+
+      getStorage().setItem(testKey, testKey);
+      getStorage().removeItem(testKey);
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  function clear(): void {
+    if (isAvailable()) {
+      getStorage().clear();
+    }
+  }
+
+  function getItem(name: string): string | null {
+    if (isAvailable()) {
+      return getStorage().getItem(name);
+    }
+
+    return null;
+  }
+
+  function key(index: number): string | null {
+    if (isAvailable()) {
+      return getStorage().key(index);
+    }
+    return null;
+  }
+
+  function removeItem(name: string): void {
+    if (isAvailable()) {
+      getStorage().removeItem(name);
+    }
+  }
+
+  function setItem(name: string, value: string): void {
+    if (isAvailable()) {
+      getStorage().setItem(name, value);
+    }
+  }
+
+  function length(): number {
+    if (isAvailable()) {
+      return getStorage().length;
+    }
+
+    return 0;
+  }
+
+  return {
+    isAvailable,
+
+    clear,
+    getItem,
+    key,
+    removeItem,
+    setItem,
+    get length() {
+      return length();
+    },
+  };
+}

package/src/utils/number.ts

@@ -0,0 +1,8 @@
+/**
+ * Переводит наносекунды в миллисекунды.
+ * @param nanoseconds Наносекунды.
+ * @return Миллисекунды.
+ */
+export function toMilliseconds(nanoseconds: bigint): number {
+  return Number(nanoseconds / 1000000n);
+}

package/src/utils/react/error-handlers/__test__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ErrorBoundary should call captureException 1`] = `<div />`;
+
+exports[`ErrorBoundary should render children component 1`] = `
+<div>
+  <div>
+    Normal component
+  </div>
+</div>
+`;
+
+exports[`ErrorBoundary should render fallback component 1`] = `
+<div>
+  <div>
+    Fallback
+  </div>
+</div>
+`;
+
+exports[`SafeSuspense should render with props 1`] = `
+<div>
+  <div>
+    Normal component
+  </div>
+</div>
+`;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ErrorBoundary, SafeSuspense } from '..';
+
+describe('ErrorBoundary', () => {
+  const error = new Error('Test error');
+
+  const FailedComponent = () => {
+    throw error;
+  };
+
+  it('should render children component', () => {
+    const { container } = render(
+      <ErrorBoundary fallback={null}>
+        <div>Normal component</div>
+      </ErrorBoundary>,
+    );
+
+    expect(container.textContent).toContain('Normal component');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should render fallback component', () => {
+    const { container } = render(
+      <ErrorBoundary fallback={<div>Fallback</div>}>
+        <>
+          <div>Normal component</div>
+          <FailedComponent />
+        </>
+      </ErrorBoundary>,
+    );
+
+    expect(container.textContent).toContain('Fallback');
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should call captureException', () => {
+    const handlerException = jest.fn();
+
+    const { container } = render(
+      <ErrorBoundary fallback={null} onError={handlerException}>
+        <>
+          <div>Normal component</div>
+          <FailedComponent />
+        </>
+      </ErrorBoundary>,
+    );
+
+    expect(handlerException).toBeCalledWith(error, { componentStack: expect.any(String) });
+    expect(container).toMatchSnapshot();
+  });
+});
+
+describe('SafeSuspense', () => {
+  it('should render with props', () => {
+    const { container } = render(
+      <SafeSuspense fallback={<div>Fallback</div>} onError={jest.fn()}>
+        <div>Normal component</div>
+      </SafeSuspense>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,62 @@
+import React from 'react';
+
+export interface Props {
+  /** Дочерний компонент. */
+  children: NonNullable<React.ReactNode> | null;
+
+  /** Запасной элемент, если возникла ошибка. */
+  fallback: NonNullable<React.ReactNode> | null;
+
+  /** Функция для логирования ошибки. */
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+/**
+ * Обработчик ошибок в React-компонентах.
+ */
+export class ErrorBoundary extends React.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: React.ErrorInfo) {
+    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 const SafeSuspense = ({ children, fallback, onError }: Props) => (
+  <React.Suspense fallback={fallback}>
+    <ErrorBoundary fallback={fallback} onError={onError}>
+      {children}
+    </ErrorBoundary>
+  </React.Suspense>
+);

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

@@ -0,0 +1,50 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { createRemoteDataReducers, RemoteDataState, STATUS } from '../remote-data';
+
+interface TestState extends RemoteDataState<number, string> {
+  foo: 'bar';
+}
+
+describe('createGenericSlice', () => {
+  const initialState: TestState = {
+    data: 0,
+    error: '',
+    status: STATUS.initial,
+    foo: 'bar',
+  };
+
+  const { reducer, actions } = createSlice({
+    name: 'user',
+    initialState,
+    reducers: createRemoteDataReducers<TestState>(),
+  });
+
+  it('should handle request action', () => {
+    const actual = reducer(initialState, actions.request());
+
+    expect(actual).toEqual({
+      ...initialState,
+      status: STATUS.fetching,
+    });
+  });
+
+  it('should handle success action', () => {
+    const actual = reducer(initialState, actions.success(234));
+
+    expect(actual).toEqual({
+      ...initialState,
+      data: 234,
+      status: STATUS.success,
+    });
+  });
+
+  it('should handle failure action', () => {
+    const actual = reducer(initialState, actions.failure('error message here'));
+
+    expect(actual).toEqual({
+      ...initialState,
+      error: 'error message here',
+      status: STATUS.failure,
+    });
+  });
+});

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

@@ -0,0 +1,34 @@
+import type { PayloadAction, Draft } from '@reduxjs/toolkit';
+
+export type Status = 'initial' | 'fetching' | 'success' | 'failure';
+
+export interface RemoteDataState<TData, TError> {
+  data: TData;
+  error: TError;
+  status: Status;
+}
+
+export const STATUS: Record<Status, Status> = {
+  initial: 'initial',
+  fetching: 'fetching',
+  success: 'success',
+  failure: 'failure',
+};
+
+/**
+ * Возвращает набор обработчиков для работы с удаленными данными.
+ * @return Набор.
+ */
+export const createRemoteDataReducers = <S extends RemoteDataState<any, any>>() => ({
+  request: (state: Draft<S>) => {
+    state.status = STATUS.fetching;
+  },
+  success: (state: Draft<S>, action: PayloadAction<S['data']>) => {
+    state.data = action.payload;
+    state.status = STATUS.success;
+  },
+  failure: (state: Draft<S>, action: PayloadAction<S['error']>) => {
+    state.error = action.payload;
+    state.status = STATUS.failure;
+  },
+});