@dr.pogodin/react-utils 1.42.0 → 1.42.1

package/src/shared/utils/jest/E2eSsrEnv.ts

@@ -4,7 +4,6 @@
  * Webpack build of the code for client-side execution, it further exposes
  * Jsdom environment for the client-side testing of the outcomes.
  */
-/* eslint-disable global-require, import/no-dynamic-require */
 
 // BEWARE: The module is not imported into the JU module / the main assembly of
 // the library, because doing so easily breaks stuff:
@@ -15,10 +14,13 @@
 //      probably some sort of a require-loop, or some issues with weak
 //      require in that scenario.
 
+// TODO: We need to add correct typing for environment options.
+
 import path from 'path';
 
 import type { Request, Response } from 'express';
 import { defaults, noop, set } from 'lodash';
+import type { ReactNode } from 'react';
 
 // As this environment is a part of the Jest testing utils,
 // we assume development dependencies are available when it is used.
@@ -26,8 +28,8 @@ import { defaults, noop, set } from 'lodash';
 import register from '@babel/register/experimental-worker';
 
 import JsdomEnv from 'jest-environment-jsdom';
-import { type IFs, createFsFromVolume, Volume } from 'memfs';
-import webpack from 'webpack';
+import { createFsFromVolume, Volume } from 'memfs';
+import webpack, { type Configuration } from 'webpack';
 /* eslint-enable import/no-extraneous-dependencies */
 
 import ssrFactory from 'server/renderer';
@@ -56,11 +58,11 @@ export default class E2eSsrEnv extends JsdomEnv {
    * Loads Webpack config, and exposes it to the environment via global
    * webpackConfig object.
    */
-  loadWebpackConfig() {
+  private loadWebpackConfig() {
     const optionsString = this.pragmas['webpack-config-options'] as string;
 
-    const options = (optionsString
-      ? JSON.parse(optionsString) : {}) as webpack.Configuration;
+    const options = (optionsString ? JSON.parse(optionsString) : {}) as
+      webpack.Configuration;
 
     defaults(options, {
       context: this.testFolder,
@@ -68,12 +70,16 @@ export default class E2eSsrEnv extends JsdomEnv {
     });
 
     const factoryPath = this.pragmas['webpack-config-factory'] as string;
-    let factory = require(path.resolve(this.rootDir, factoryPath));
+    // eslint-disable-next-line import/no-dynamic-require, @typescript-eslint/no-require-imports
+    let factory = require(path.resolve(this.rootDir, factoryPath)) as
+      (((ops: Configuration) => Configuration) | {
+        default: (ops: Configuration) => Configuration;
+      });
     factory = 'default' in factory ? factory.default : factory;
 
     this.global.webpackConfig = factory(options);
 
-    const fs = this.global.webpackOutputFs as IFs;
+    const fs = this.global.webpackOutputFs;
     let buildInfo = `${options.context}/.build-info`;
     if (fs.existsSync(buildInfo)) {
       buildInfo = fs.readFileSync(buildInfo, 'utf8') as string;
@@ -85,14 +91,17 @@ export default class E2eSsrEnv extends JsdomEnv {
    * Executes Webpack build.
    * @return {Promise}
    */
-  async runWebpack() {
+  async runWebpack(): Promise<void> {
     this.loadWebpackConfig();
 
-    const compiler = webpack(this.global.webpackConfig as webpack.Configuration);
+    if (!this.global.webpackConfig) throw Error('Failed to load Webpack config');
+    const compiler = webpack(this.global.webpackConfig);
 
-    // TODO: The "as typeof compiler.outputFileSystem" piece below is a workaround
-    // for the Webpack regression: https://github.com/webpack/webpack/issues/18242
-    compiler.outputFileSystem = this.global.webpackOutputFs as typeof compiler.outputFileSystem;
+    // TODO: The "as typeof compiler.outputFileSystem" piece below is
+    // a workaround for the Webpack regression:
+    // https://github.com/webpack/webpack/issues/18242
+    compiler.outputFileSystem = this.global.webpackOutputFs as
+      typeof compiler.outputFileSystem;
 
     return new Promise<void>((done, fail) => {
       compiler.run((err, stats) => {
@@ -115,35 +124,43 @@ export default class E2eSsrEnv extends JsdomEnv {
     });
   }
 
-  async runSsr() {
+  async runSsr(): Promise<void> {
     const optionsString = this.pragmas['ssr-options'] as string;
-    const options = optionsString ? JSON.parse(optionsString) : {};
+    const options = optionsString
+      ? JSON.parse(optionsString) as Record<string, unknown>
+      : {};
 
     // TODO: This is temporary to shortcut the logging added to SSR.
-    if (options.logger === undefined) {
-      options.logger = {
-        debug: noop,
-        info: noop,
-        log: noop,
-        warn: noop,
-      };
-    }
+    options.logger ??= {
+      debug: noop,
+      info: noop,
+      log: noop,
+      warn: noop,
+    };
 
-    if (!options.buildInfo) options.buildInfo = this.global.buildInfo;
+    options.buildInfo ??= this.global.buildInfo;
 
     let cleanup: (() => void) | undefined;
 
     if (options.entry) {
-      const p = path.resolve(this.testFolder, options.entry);
-      const module = require(p);
-      cleanup = module.cleanup;
-      options.Application = module[options.entryExportName || 'default'];
+      const p = path.resolve(this.testFolder, options.entry as string);
+      // TODO: This sure can be replaced by a dynamic import().
+      // eslint-disable-next-line import/no-dynamic-require, @typescript-eslint/no-require-imports
+      const module = require(p) as NodeJS.Module;
+      if ('cleanup' in module) cleanup = module.cleanup as () => void;
+
+      const exportName = (options.entryExportName as string) || 'default';
+      if (exportName in module) {
+        options.Application = (
+          module as unknown as Record<string, unknown>
+        )[exportName] as ReactNode;
+      }
     }
 
     const renderer = ssrFactory(this.global.webpackConfig!, options);
     let status = 200; // OK
     const markup = await new Promise<string>((done, fail) => {
-      renderer(
+      void renderer(
         this.ssrRequest as Request,
 
         // TODO: This will do for now, with the current implementation of
@@ -170,7 +187,9 @@ export default class E2eSsrEnv extends JsdomEnv {
         } as unknown) as Response,
 
         (error) => {
-          if (error) fail(error);
+          // TODO: Strictly speaking, that error as Error casting is not all
+          // correct, but it works, so no need to spend time on it right now.
+          if (error) fail(error as Error);
           else done('');
         },
       );
@@ -190,16 +209,18 @@ export default class E2eSsrEnv extends JsdomEnv {
     const pragmas = context.docblockPragmas;
 
     const requestString = pragmas['ssr-request'] as string;
-    const request = requestString ? JSON.parse(requestString) : {};
+    const request = requestString
+      ? JSON.parse(requestString) as Record<string, unknown>
+      : {};
 
-    if (!request.url) request.url = '/';
+    request.url ??= '/';
     request.csrfToken = noop;
 
     // This ensures the initial JsDom URL matches the value we use for SSR.
     set(
       config.projectConfig,
       'testEnvironmentOptions.url',
-      `http://localhost${request.url}`,
+      `http://localhost${request.url as string}`,
     );
 
     super(config, context);
@@ -218,20 +239,24 @@ export default class E2eSsrEnv extends JsdomEnv {
     // The usual "babel-jest" transformation setup does not apply to
     // the environment code and imports from it, this workaround enables it.
     const optionsString = this.pragmas['ssr-options'] as string;
-    const options = optionsString ? JSON.parse(optionsString) : {};
+    const options = optionsString
+      ? JSON.parse(optionsString) as Record<string, unknown>
+      : {};
     let root;
     switch (options.root) {
-      case 'TEST': root = this.testFolder; break;
+      case 'TEST':
+        root = this.testFolder;
+        break;
       default: root = process.cwd();
     }
     register({
-      envName: options.babelEnv,
+      envName: options.babelEnv as string,
       extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
       root,
     });
   }
 
-  async setup() {
+  async setup(): Promise<void> {
     await super.setup();
     await this.runWebpack();
 
@@ -254,7 +279,7 @@ export default class E2eSsrEnv extends JsdomEnv {
     this.global.REACT_UTILS_FORCE_CLIENT_SIDE = true;
   }
 
-  async teardown() {
+  async teardown(): Promise<void> {
     delete this.global.REACT_UTILS_FORCE_CLIENT_SIDE;
 
     // Resets module cache and @babel/register. Effectively this ensures that
@@ -267,6 +292,6 @@ export default class E2eSsrEnv extends JsdomEnv {
       delete require.cache[key];
     });
     register.revert();
-    super.teardown();
+    await super.teardown();
   }
 }

package/src/shared/utils/jest/global.ts

@@ -1,19 +1,17 @@
-import { type IFs } from 'memfs';
-
-/* eslint-disable import/no-extraneous-dependencies */
-import webpack from 'webpack';
-/* eslint-enable import/no-extraneous-dependencies */
+import type { IFs } from 'memfs';
+import type { Configuration, StatsCompilation } from 'webpack';
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
     ssrMarkup: string | undefined;
     ssrStatus: number | undefined;
-    webpackConfig: webpack.Configuration | undefined;
+    webpackConfig: Configuration | undefined;
     webpackOutputFs: IFs;
-    webpackStats?: webpack.StatsCompilation;
+    webpackStats?: StatsCompilation;
   }
 }
 
 export default function getGlobal(): Window {
-  return global as any;
+  return global as unknown as Window;
 }

package/src/shared/utils/jest/{index.tsx → index.ts}

@@ -4,6 +4,7 @@
 import type {
   AxiosRequestConfig,
   AxiosResponse,
+  AxiosStatic,
   InternalAxiosRequestConfig,
 } from 'axios';
 
@@ -29,14 +30,14 @@ const originalProcessVersions = process.versions;
  * Tricks **react-utils** into thinking the test is running within client-side
  * (browser) environment.
  */
-export function mockClientSide() {
+export function mockClientSide(): void {
   Object.defineProperty(process, 'versions', { value: undefined });
 }
 
 /**
  * Reverts the effect of {@link module:JU.mockClientSide mockClientSide(..)}.
  */
-export function unmockClientSide() {
+export function unmockClientSide(): void {
   Object.defineProperty(process, 'versions', {
     value: originalProcessVersions,
     writable: false,
@@ -49,7 +50,7 @@ export function unmockClientSide() {
  * @param {number} seed
  * @return {string}
  */
-export function getMockUuid(seed = 0) {
+export function getMockUuid(seed = 0): string {
   const x = seed.toString(16).padStart(32, '0');
   return `${x.slice(0, 8)}-${x.slice(8, 12)}-${x.slice(12, 16)}-${x.slice(16, 20)}-${x.slice(20)}`;
 }
@@ -57,12 +58,14 @@ export function getMockUuid(seed = 0) {
 export type AxiosRequestHandlerT =
   (config: AxiosRequestConfig) => Partial<AxiosResponse> | null | undefined;
 
-export function mockAxios(handlers: AxiosRequestHandlerT[]) {
-  const axios = jest.requireActual('axios');
+export function mockAxios(handlers: AxiosRequestHandlerT[]): AxiosStatic {
+  const axios: AxiosStatic = jest.requireActual('axios');
 
-  axios.defaults.adapter = async (config: AxiosRequestConfig): Promise<AxiosResponse> => {
-    for (let i = 0; i < handlers.length; ++i) {
-      const res = handlers[i]?.(config);
+  axios.defaults.adapter = async (
+    config: AxiosRequestConfig,
+  ): Promise<AxiosResponse> => {
+    for (const handler of handlers) {
+      const res = handler(config);
       if (res) {
         return {
           config: config as InternalAxiosRequestConfig,
@@ -79,6 +82,7 @@ export function mockAxios(handlers: AxiosRequestHandlerT[]) {
     let res: AxiosResponse;
     try {
       res = await axios({ ...config, adapter: ['xhr', 'http', 'fetch'] });
+      // eslint-disable-next-line no-console
       console.warn(
         'Network request has not been mocked for a test.\n\nConfig:\n',
         config,
@@ -86,6 +90,7 @@ export function mockAxios(handlers: AxiosRequestHandlerT[]) {
         JSON.stringify(res, null, 2),
       );
     } catch (e) {
+      // eslint-disable-next-line no-console
       console.warn(
         'Network request has not been mocked for a test, and failed.\n\nConfig:\n',
         config,
@@ -107,9 +112,9 @@ export function mockAxios(handlers: AxiosRequestHandlerT[]) {
  * @returns {Promise} Wait for this to "jump after" any async code which should
  * be executed because of the mock time movement.
  */
-export async function mockTimer(time: number) {
+export async function mockTimer(time: number): Promise<void> {
   mockdate.set(time + Date.now());
-  jest.advanceTimersByTime(time);
+  await jest.advanceTimersByTimeAsync(time);
 }
 
 export type MountedSceneT = HTMLElement & {
@@ -134,7 +139,9 @@ export function mount(scene: ReactNode): MountedSceneT {
     // when it is simulating user events.
     global.IS_REACT_ACT_ENVIRONMENT = true;
 
-    act(() => root.unmount());
+    act(() => {
+      root.unmount();
+    });
     res.remove();
   };
 
@@ -160,9 +167,15 @@ type SnapshotOptionsT = {
 export async function snapshot(
   element: React.ReactElement,
   options?: SnapshotOptionsT,
-) {
+): Promise<RenderResult> {
   let res: RenderResult | undefined;
 
+  // TODO: Just adding async to the actor function breaks stuff, as it makes
+  // act() asynchronous no matter the `options.await` value, thus breaking all
+  // calls that do not await for snapshot() result... thus... perhaps we need
+  // to have a more complex typing to ensure it all works as intended in all
+  // cases, and while being correctly enforced by TypeScript.
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
   const promise = act(() => {
     res = render(element);
     return options?.await;

package/src/shared/utils/splitComponent.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 /* global document */
 
 import {
@@ -28,11 +27,19 @@ import {
 let clientChunkGroups: ChunkGroupsT;
 
 if (IS_CLIENT_SIDE) {
-  // eslint-disable-next-line global-require
-  clientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
+  // TODO: Rewrite to avoid these overrides of ESLint rules.
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment,
+    @typescript-eslint/no-require-imports,
+    @typescript-eslint/no-unsafe-call,
+    @typescript-eslint/no-unsafe-member-access */
+  clientChunkGroups = require('client/getInj').default().CHUNK_GROUPS ?? {};
+  /* eslint-enable @typescript-eslint/no-unsafe-assignment,
+    @typescript-eslint/no-require-imports,
+    @typescript-eslint/no-unsafe-call,
+    @typescript-eslint/no-unsafe-member-access */
 }
 
-const refCounts: { [path: string]: number } = {};
+const refCounts: Record<string, number> = {};
 
 function getPublicPath() {
   return getBuildInfo().publicPath;
@@ -67,12 +74,18 @@ function bookStyleSheet(
     }
 
     res = new Barrier<void>();
-    link.addEventListener('load', () => res!.resolve());
-    link.addEventListener('error', () => res!.resolve());
+    link.addEventListener('load', () => {
+      if (!res) throw Error('Internal error');
+      void res.resolve();
+    });
+    link.addEventListener('error', () => {
+      if (!res) throw Error('Internal error');
+      void res.resolve();
+    });
   }
 
   if (refCount) {
-    const current = refCounts[path] || 0;
+    const current = refCounts[path] ?? 0;
     refCounts[path] = 1 + current;
   }
 
@@ -86,8 +99,7 @@ function bookStyleSheet(
 function getLoadedStyleSheets(): Set<string> {
   const res = new Set<string>();
   const { styleSheets } = document;
-  for (let i = 0; i < styleSheets.length; ++i) {
-    const href = styleSheets[i]?.href;
+  for (const { href } of styleSheets) {
     if (href) res.add(href);
   }
   return res;
@@ -110,7 +122,7 @@ function assertChunkName(
  * @return Resolves once all pending stylesheets, necessary for
  *  the chunk, are either loaded, or failed to load.
  */
-export function bookStyleSheets(
+export async function bookStyleSheets(
   chunkName: string,
   chunkGroups: ChunkGroupsT,
   refCount: boolean,
@@ -121,9 +133,8 @@ export function bookStyleSheets(
 
   const loadedSheets = getLoadedStyleSheets();
 
-  for (let i = 0; i < assets.length; ++i) {
-    const asset = assets[i];
-    if (asset?.endsWith('.css')) {
+  for (const asset of assets) {
+    if (asset.endsWith('.css')) {
       const promise = bookStyleSheet(asset, loadedSheets, refCount);
       if (promise) promises.push(promise);
     }
@@ -144,13 +155,12 @@ export function bookStyleSheets(
 export function freeStyleSheets(
   chunkName: string,
   chunkGroups: ChunkGroupsT,
-) {
+): void {
   const assets = chunkGroups[chunkName];
   if (!assets) return;
 
-  for (let i = 0; i < assets.length; ++i) {
-    const asset = assets[i];
-    if (asset?.endsWith('.css')) {
+  for (const asset of assets) {
+    if (asset.endsWith('.css')) {
       const path = `${getPublicPath()}/${asset}`;
 
       const pathRefCount = refCounts[path];
@@ -168,7 +178,7 @@ export function freeStyleSheets(
 const usedChunkNames = new Set();
 
 type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
-  default: ComponentType<PropsT>,
+  default: ComponentType<PropsT>;
 };
 
 /**
@@ -189,9 +199,9 @@ export default function splitComponent<
   placeholder,
 }: {
   chunkName: string;
-  getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>,
-  placeholder?: ReactNode,
-}) {
+  getComponent: () => Promise<ComponentOrModule<ComponentPropsT>>;
+  placeholder?: ReactNode;
+}): FunctionComponent<ComponentPropsT> {
   // On the client side we can check right away if the chunk name is known.
   if (IS_CLIENT_SIDE) assertChunkName(chunkName, clientChunkGroups);
 
@@ -227,12 +237,18 @@ export default function splitComponent<
       // This takes care about stylesheets management every time an instance of
       // this component is mounted / unmounted.
       useInsertionEffect(() => {
-        bookStyleSheets(chunkName, clientChunkGroups, true);
-        return () => freeStyleSheets(chunkName, clientChunkGroups);
+        void bookStyleSheets(chunkName, clientChunkGroups, true);
+        return () => {
+          freeStyleSheets(chunkName, clientChunkGroups);
+        };
       }, []);
 
       return (
-        <Component {...(rest as unknown as ComponentPropsT)} ref={ref}>
+        <Component
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          {...(rest as unknown as ComponentPropsT)}
+          ref={ref}
+        >
           {children}
         </Component>
       );
@@ -246,7 +262,10 @@ export default function splitComponent<
     ...rest
   }: ComponentPropsT) => (
     <Suspense fallback={placeholder}>
-      <LazyComponent {...rest as Parameters<typeof LazyComponent>[0]}>
+      <LazyComponent
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...rest as Parameters<typeof LazyComponent>[0]}
+      >
         {children}
       </LazyComponent>
     </Suspense>

package/src/shared/utils/time.ts

@@ -1,6 +1,6 @@
 import { serialize } from 'cookie';
-import dayjs from 'dayjs';
 import { useEffect } from 'react';
+import dayjs from 'dayjs';
 
 import {
   DAY_MS,
@@ -30,10 +30,13 @@ export function useCurrent({
   globalStatePath = 'currentTime',
   precision = 5 * SEC_MS,
 } = {}): number {
-  const [now, setter] = useGlobalState<ForceT, number>(globalStatePath, Date.now);
+  const [now, setter] = useGlobalState<ForceT, number>(
+    globalStatePath,
+    Date.now,
+  );
   useEffect(() => {
-    let timerId: NodeJS.Timeout;
-    const update = () => {
+    let timerId: NodeJS.Timeout | undefined;
+    const update = (): void => {
       setter((old) => {
         const neu = Date.now();
         return Math.abs(neu - old) > precision ? neu : old;
@@ -41,7 +44,7 @@ export function useCurrent({
       if (autorefresh) timerId = setTimeout(update, precision);
     };
     update();
-    return () => {
+    return (): void => {
       if (timerId) clearTimeout(timerId);
     };
   }, [autorefresh, precision, setter]);
@@ -64,10 +67,14 @@ export function useTimezoneOffset({
   globalStatePath = 'timezoneOffset',
 } = {}): number {
   const ssrContext = getSsrContext(false);
-  const [offset, setOffset] = useGlobalState<ForceT, number>(globalStatePath, () => {
-    const value = cookieName && ssrContext?.req?.cookies?.[cookieName];
-    return value ? parseInt(value, 10) : 0;
-  });
+  const [offset, setOffset] = useGlobalState<ForceT, number>(
+    globalStatePath,
+    () => {
+      const value = cookieName
+        && ssrContext?.req.cookies[cookieName] as string;
+      return value ? parseInt(value) : 0;
+    },
+  );
   useEffect(() => {
     const date = new Date();
     const value = date.getTimezoneOffset();

package/src/shared/utils/webpack.ts

@@ -1,3 +1,5 @@
+import type PathT from 'path';
+
 import { IS_CLIENT_SIDE } from './isomorphy';
 
 /**
@@ -7,37 +9,40 @@ import { IS_CLIENT_SIDE } from './isomorphy';
  * @param [basePath]
  * @return Required module.
  */
-export function requireWeak<Module extends NodeJS.Module>(
+export function requireWeak<T extends object>(
   modulePath: string,
   basePath?: string,
-): Module | null {
+): T | null {
   if (IS_CLIENT_SIDE) return null;
 
   // TODO: On one hand, this try/catch wrap silencing errors is bad, as it may
   // hide legit errors, in a way difficult to notice and understand; but on the
-  // other hand it fails for some (unclear, but legit?) reasons in some environments,
+  // other hand it fails for some (unclear, but legit?) reasons in some
+  // environments,
   // like during the static code generation for docs. Perhaps, something should
   // be implemented differently here.
   try {
-    /* eslint-disable no-eval */
-    const { resolve } = eval('require')('path');
+    // eslint-disable-next-line no-eval
+    const req = eval('require') as (path: string) => unknown;
+
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { resolve } = req('path') as typeof PathT;
+
     const path = basePath ? resolve(basePath, modulePath) : modulePath;
-    const module = eval('require')(path) as Module;
-    /* eslint-enable no-eval */
+    const module = req(path) as T;
 
     if (!('default' in module) || !module.default) return module;
 
     const { default: def, ...named } = module;
 
-    const res = def as Module;
+    const res = def as T;
 
     Object.entries(named).forEach(([name, value]) => {
-      const assigned = res[name as keyof Module];
-      if (assigned !== undefined) {
-        if (assigned !== value) {
-          throw Error('Conflict between default and named exports');
-        }
-      } else res[name as keyof Module] = value;
+      const assigned = res[name as keyof T];
+      if (assigned) (res[name as keyof T] as unknown) = value;
+      else if (assigned !== value) {
+        throw Error('Conflict between default and named exports');
+      }
     });
     return res;
   } catch {