@dr.pogodin/react-utils 1.42.0 → 1.43.0

package/src/client/init.ts

@@ -10,8 +10,8 @@ const buildInfo = getBuildInfo();
 
 // TODO: Should be moved into buildInfo module?
 declare global {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface Window {
-  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
     __DEV_BUILD_INFO__: BuildInfoT | undefined;
   }
 }
@@ -21,29 +21,32 @@ declare const BUILD_INFO: BuildInfoT | undefined;
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line no-console
   console.warn('Dev mode: "BUILD_INFO" attached to the global "window"');
+
   // eslint-disable-next-line no-underscore-dangle
   window.__DEV_BUILD_INFO__ = BUILD_INFO;
 }
 
 /* TODO: A proper logger should be moved to `@dr.pogodin/react-utils`. */
-/* eslint-disable no-console */
 const { useServiceWorker } = buildInfo;
 if (useServiceWorker) {
   const { navigator } = window;
   if ('serviceWorker' in navigator) {
-    window.addEventListener('load', async () => {
-      try {
-        // Note: no matter the "publicPath", we want to serve the service worker
-        // from the web app root, to allow it control any and all pages of the
-        // web app (otherwise, it will be restricted to the scope of its path).
-        // The server takes it into account.
-        const reg = await navigator
-          .serviceWorker.register('/__service-worker.js');
-        console.log('SW registered:', reg);
-      } catch (err) {
-        console.log('SW registration failed:', err);
-      }
+    window.addEventListener('load', () => {
+      void (async () => {
+        try {
+          // Note: no matter the "publicPath", we want to serve the service worker
+          // from the web app root, to allow it control any and all pages of the
+          // web app (otherwise, it will be restricted to the scope of its path).
+          // The server takes it into account.
+          const reg = await navigator
+            .serviceWorker.register('/__service-worker.js');
+          // eslint-disable-next-line no-console
+          console.log('SW registered:', reg);
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.log('SW registration failed:', err);
+        }
+      })();
     });
   }
 }
-/* eslint-enable no-console */

package/src/index.ts

@@ -2,11 +2,16 @@ import 'styles/global.scss';
 
 import { webpack } from 'utils';
 
-import type ServerFactoryT from './server';
+import type * as ClientM from './client';
+import type * as ServerFactoryM from './server';
 
-const server = webpack.requireWeak('./server', __dirname) as (typeof ServerFactoryT) | null;
+const server = webpack.requireWeak<typeof ServerFactoryM>('./server', __dirname);
 
-const client = server ? undefined : require('./client').default;
+const client = server
+  ? undefined
+
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  : (require('./client') as typeof ClientM).default;
 
 export {
   type AsyncCollectionT,

package/src/server/Cache.ts

@@ -10,13 +10,9 @@ type CachedItemT<DatumT> = {
 export default class Cache<DatumT> {
   private items: Record<string, CachedItemT<DatumT>> = {};
 
-  private maxSize: number;
-
   private size = 0;
 
-  constructor(maxSize: number) {
-    this.maxSize = maxSize;
-  }
+  constructor(private maxSize: number) { }
 
   /**
    * Cache lookup.
@@ -39,12 +35,11 @@ export default class Cache<DatumT> {
 
   /**
    * Adds item to cache.
-   * @ignore
    * @param data Item to add.
    * @param key Key to store the item at.
    * @param size Byte size of the item.
    */
-  add(data: DatumT, key: string, size: number) {
+  add(data: DatumT, key: string, size: number): void {
     const cached = this.items[key];
     if (cached) this.size -= cached.size;
 
@@ -55,14 +50,11 @@ export default class Cache<DatumT> {
       const entries = Object.entries(this.items);
       entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
 
-      for (let i = 0; i < entries.length; ++i) {
-        const entry = entries[i];
-        if (entry) {
-          const [itemKey, item] = entry;
-          delete this.items[itemKey];
-          this.size -= item.size;
-          if (this.size < this.maxSize / 2) break;
-        }
+      for (const entry of entries) {
+        const [itemKey, item] = entry;
+        delete this.items[itemKey];
+        this.size -= item.size;
+        if (this.size < this.maxSize / 2) break;
       }
     }
   }

package/src/server/index.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unassigned-import
 import 'source-map-support/register';
 
 import http from 'http';
@@ -12,10 +13,12 @@ import {
   toNumber,
 } from 'lodash';
 
-/* Polyfill required by ReactJS. */
+// Polyfill required by ReactJS.
+// TODO: Double-check, if it is still required by React v19?
+// eslint-disable-next-line import/no-unassigned-import
 import 'raf/polyfill';
 
-import { type Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 
 import serverFactory, {
   type OptionsT as ServerOptionsT,
@@ -27,11 +30,11 @@ import { SCRIPT_LOCATIONS, newDefaultLogger } from './renderer';
 
 import { errors } from './utils';
 
-export {
-  type BeforeRenderResT,
-  type BeforeRenderT,
-  type ConfigT,
-  type ServerSsrContext,
+export type {
+  BeforeRenderResT,
+  BeforeRenderT,
+  ConfigT,
+  ServerSsrContext,
 } from './renderer';
 
 export { errors, getDefaultCspSettings, type ServerT };
@@ -53,7 +56,7 @@ type OptionsT = ServerOptionsT & {
   https?: {
     cert: string;
     key: string;
-  },
+  };
 
   // TODO: Should we limit it to number | string, and throw if it is different value?
   port?: false | number | string;
@@ -175,22 +178,27 @@ type OptionsT = ServerOptionsT & {
  * @param {number} [options.maxSsrRounds=10] Maximum number of SSR rounds.
  * @param {number} [options.ssrTimeout=1000] SSR timeout in milliseconds,
  * defaults to 1 second.
- * @return {Promise<{ expressServer: object, httpServer: object }>} Resolves to
- * an object with created Express and HTTP servers.
+ * @return Resolves to an object with created Express and HTTP servers.
  */
-export default async function launchServer(webpackConfig: Configuration, options: OptionsT) {
+export default async function launchServer(
+  webpackConfig: Configuration,
+  options: OptionsT = {},
+): Promise<{
+    expressServer: ServerT;
+    httpServer: http.Server;
+  }> {
   /* Options normalization. */
-  const ops = options ? cloneDeep(options) : {};
+  const ops = cloneDeep(options);
+
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   ops.port = normalizePort(ops.port || process.env.PORT || 3000);
   defaults(ops, { httpsRedirect: true });
 
   // TODO: Need a separate type for normalized options, which guarantees
   // the logger is set!
-  if (ops.logger === undefined) {
-    ops.logger = newDefaultLogger({
-      defaultLogLevel: ops.defaultLoggerLogLevel,
-    });
-  }
+  ops.logger ??= newDefaultLogger({
+    defaultLogLevel: ops.defaultLoggerLogLevel,
+  });
 
   /* Creates servers, resolves and sets the port. */
   const expressServer = await serverFactory(webpackConfig, ops);
@@ -200,22 +208,23 @@ export default async function launchServer(webpackConfig: Configuration, options
     httpServer = https.createServer({
       cert: ops.https.cert,
       key: ops.https.key,
-    }, expressServer);
-  } else httpServer = http.createServer(expressServer);
+    }, expressServer as unknown as () => void);
+  } else httpServer = http.createServer(expressServer as unknown as () => void);
 
   /* Sets error handler for HTTP(S) server. */
   httpServer.on('error', (error: Error) => {
-    if ((error as any).syscall !== 'listen') throw error;
+    if ((error as { syscall?: string }).syscall !== 'listen') throw error;
     const bind = isString(ops.port) ? `Pipe ${ops.port}` : `Port ${ops.port}`;
 
     /* Human-readable message for some specific listen errors. */
-    switch ((error as any).code) {
+    switch ((error as { code?: string }).code) {
       case 'EACCES':
         ops.logger!.error(`${bind} requires elevated privileges`);
         return process.exit(1);
       case 'EADDRINUSE':
         ops.logger!.error(`${bind} is already in use`);
         return process.exit(1);
+      case undefined:
       default:
         throw error;
     }

package/src/server/renderer.tsx

@@ -6,7 +6,7 @@ import fs from 'fs';
 import path from 'path';
 
 import type { Request, RequestHandler } from 'express';
-import { type ComponentType } from 'react';
+import type { ComponentType } from 'react';
 import { Writable } from 'stream';
 import { brotliCompress, brotliDecompress } from 'zlib';
 import winston from 'winston';
@@ -28,14 +28,14 @@ import config from 'config';
 import forge from 'node-forge';
 
 import { prerenderToNodeStream } from 'react-dom/static';
-import { HelmetProvider } from '@dr.pogodin/react-helmet';
+import { HelmetProvider, type HelmetDataContext } from '@dr.pogodin/react-helmet';
 import { StaticRouter } from 'react-router';
 import serializeJs from 'serialize-javascript';
 import { type BuildInfoT, setBuildInfo } from 'utils/isomorphy/buildInfo';
 
-import { type ChunkGroupsT, type SsrContextT } from 'utils/globalState';
+import type { ChunkGroupsT, SsrContextT } from 'utils/globalState';
 
-import { type Configuration } from 'webpack';
+import type { Configuration, Stats } from 'webpack';
 
 import Cache from './Cache';
 
@@ -44,13 +44,19 @@ const sanitizedConfig = omit(config, 'SECRET');
 // Note: These type definitions for logger are copied from Winston logger,
 // then simplified to make it easier to fit an alternative logger into this
 // interface.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface LogMethodI {
-  (level: string, message: string, ...meta: any[]): void;
+  // eslint-disable-next-line @typescript-eslint/prefer-function-type
+  (level: string, message: string, ...meta: unknown[]): void;
 }
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 interface LeveledLogMethodI {
-  (message: string, ...meta: any[]): void;
+  // eslint-disable-next-line @typescript-eslint/prefer-function-type
+  (message: string, ...meta: unknown[]): void;
 }
 
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface LoggerI {
   debug: LeveledLogMethodI;
   error: LeveledLogMethodI;
@@ -59,7 +65,6 @@ export interface LoggerI {
   warn: LeveledLogMethodI;
 }
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
 export enum SCRIPT_LOCATIONS {
   BODY_OPEN = 'BODY_OPEN',
   DEFAULT = 'DEFAULT',
@@ -82,7 +87,7 @@ export class ServerSsrContext<StateT>
     chunkGroups: ChunkGroupsT,
     initialState?: StateT,
   ) {
-    super(cloneDeep(initialState) || ({} as StateT));
+    super(cloneDeep(initialState) ?? ({} as StateT));
     this.chunkGroups = chunkGroups;
     this.req = req;
   }
@@ -104,7 +109,7 @@ type ScriptT = {
  */
 function getBuildInfo(context: string) {
   const url = path.resolve(context, '.build-info');
-  return JSON.parse(fs.readFileSync(url, 'utf8'));
+  return JSON.parse(fs.readFileSync(url, 'utf8')) as BuildInfoT;
 }
 
 /**
@@ -119,8 +124,9 @@ function readChunkGroupsJson(buildDir: string) {
   const url = path.resolve(buildDir, '__chunk_groups__.json');
   let res;
   try {
-    res = JSON.parse(fs.readFileSync(url, 'utf8'));
-  } catch (err) {
+    res = JSON.parse(fs.readFileSync(url, 'utf8')) as Record<string, string[]>;
+  } catch {
+    // TODO: Should we message the error here somehow?
     res = null;
   }
   return res;
@@ -134,7 +140,10 @@ function readChunkGroupsJson(buildDir: string) {
  *  1. cipher - a new Cipher, ready for encryption;
  *  2. iv - initial vector used by the cipher.
  */
-function prepareCipher(key: string) {
+async function prepareCipher(key: string): Promise<{
+  cipher: forge.cipher.BlockCipher;
+  iv: string;
+}> {
   return new Promise((resolve, reject) => {
     forge.random.getBytes(32, (err, iv) => {
       if (err) reject(err);
@@ -150,22 +159,17 @@ function prepareCipher(key: string) {
 /**
  * Given an incoming HTTP requests, it deduces whether Brotli-encoded responses
  * are acceptable to the caller.
- * @param {object} req
- * @return {boolean}
- * @ignore
+ * @param req
  */
-export function isBrotliAcceptable(req: Request) {
+export function isBrotliAcceptable(req: Request): boolean {
   const acceptable = req.get('accept-encoding');
   if (acceptable) {
     const ops = acceptable.split(',');
-    for (let i = 0; i < ops.length; ++i) {
-      const op = ops[i];
-      if (op) {
-        const [type, priority] = op.trim().split(';q=');
-        if ((type === '*' || type === 'br')
+    for (const op of ops) {
+      const [type, priority] = op.trim().split(';q=');
+      if ((type === '*' || type === 'br')
         && (!priority || parseFloat(priority) > 0)) {
-          return true;
-        }
+        return true;
       }
     }
   }
@@ -192,14 +196,12 @@ function groupExtraScripts(scripts: Array<string | ScriptT> = []) {
     [SCRIPT_LOCATIONS.DEFAULT]: '',
     [SCRIPT_LOCATIONS.HEAD_OPEN]: '',
   };
-  for (let i = 0; i < scripts.length; ++i) {
-    const script = scripts[i];
+  for (const script of scripts) {
     if (isString(script)) {
       if (script) res[SCRIPT_LOCATIONS.DEFAULT] += script;
-    } else if (script?.code) {
-      if (res[script.location] !== undefined) {
-        res[script.location] += script.code;
-      } else throw Error(`Invalid location "${script.location}"`);
+    } else if (script.code) {
+      if (script.location in res) res[script.location] += script.code;
+      else throw Error(`Invalid location "${script.location}"`);
     }
   }
   return res;
@@ -213,10 +215,9 @@ function groupExtraScripts(scripts: Array<string | ScriptT> = []) {
  */
 export function newDefaultLogger({
   defaultLogLevel = 'info',
-} = {}) {
+} = {}): winston.Logger {
   const { format, transports } = winston;
   return winston.createLogger({
-    level: defaultLogLevel,
     format: format.combine(
       format.splat(),
       format.timestamp(),
@@ -229,15 +230,16 @@ export function newDefaultLogger({
           stack,
           ...rest
         }) => {
-          let res = `${level}\t(at ${timestamp}):\t${message}`;
+          let res = `${level}\t(at ${timestamp as string}):\t${message as string}`;
           if (Object.keys(rest).length) {
             res += `\n${JSON.stringify(rest, null, 2)}`;
           }
-          if (stack) res += `\n${stack}`;
+          if (stack) res += `\n${stack as string}`;
           return res;
         },
       ),
     ),
+    level: defaultLogLevel,
     transports: [new transports.Console()],
   });
 }
@@ -249,7 +251,7 @@ export type ConfigT = {
 export type BeforeRenderResT = {
   configToInject?: ConfigT;
   extraScripts?: Array<ScriptT | string>;
-  initialState?: any;
+  initialState?: unknown;
 };
 
 export type BeforeRenderT =
@@ -310,7 +312,7 @@ export default function factory(
   options: OptionsT,
 ): RequestHandler {
   const ops: OptionsT = defaults(clone(options), {
-    beforeRender: () => Promise.resolve({}),
+    beforeRender: async () => Promise.resolve({}),
     maxSsrRounds: 10,
     ssrTimeout: 1000,
     staticCacheSize: 1.e7,
@@ -319,21 +321,20 @@ export default function factory(
   // Note: in normal use the default logger is created and set in the root
   // server function, and this initialization is for testing uses, where
   // renderer is imported directly.
-  if (ops.logger === undefined) {
-    ops.logger = newDefaultLogger({
-      defaultLogLevel: ops.defaultLoggerLogLevel,
-    });
-  }
+  ops.logger ??= newDefaultLogger({
+    defaultLogLevel: ops.defaultLoggerLogLevel,
+  });
 
-  const buildInfo = ops.buildInfo || getBuildInfo(webpackConfig.context!);
+  const buildInfo = ops.buildInfo ?? getBuildInfo(webpackConfig.context!);
   setBuildInfo(buildInfo);
 
   // publicPath from webpack.output has a trailing slash at the end.
   const { publicPath, path: outputPath } = webpackConfig.output!;
 
   const manifestLink = fs.existsSync(`${outputPath}/manifest.json`)
-    ? `<link rel="manifest" href="${publicPath}manifest.json">` : '';
+    ? `<link rel="manifest" href="${publicPath as string}manifest.json">` : '';
 
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
   interface BufferWithNonce extends Buffer {
     nonce: string;
   }
@@ -347,6 +348,8 @@ export default function factory(
 
   const CHUNK_GROUPS = readChunkGroupsJson(outputPath!);
 
+  // TODO: Look at it later.
+  // eslint-disable-next-line complexity
   return async (req, res, next) => {
     try {
       // Ensures any caches always revalidate HTML markup before reuse.
@@ -377,7 +380,11 @@ export default function factory(
                       // .replaceAll() method instead relying on reg. expression for
                       // global matching.
                       const regex = new RegExp(buffer.nonce, 'g');
-                      h = h.replace(regex, (req as any).nonce);
+
+                      // TODO: It should be implemented more careful.
+                      h = h.replace(regex, (req as unknown as {
+                        nonce: string;
+                      }).nonce);
                     }
                     if (status !== 200) res.status(status);
                     res.send(h);
@@ -399,25 +406,26 @@ export default function factory(
         cipher,
         iv,
       }] = await Promise.all([
-        ops.beforeRender!(req, sanitizedConfig as any),
-        prepareCipher(buildInfo.key) as Promise<any>,
+        ops.beforeRender!(req, sanitizedConfig as unknown as ConfigT),
+        prepareCipher(buildInfo.key),
       ]);
 
-      let helmet: any;
+      let helmet: HelmetDataContext['helmet'];
 
       // Gets the mapping between code chunk names and their asset files.
       // These data come from the Webpack compilation, either from the stats
       // attached to the request (in dev mode), or from a file output during
       // the build (in prod mode).
       let chunkGroups: ChunkGroupsT;
-      const webpackStats = get(res.locals, 'webpack.devMiddleware.stats');
+      const webpackStats = get(res.locals, 'webpack.devMiddleware.stats') as Stats | undefined;
       if (webpackStats) {
         chunkGroups = mapValues(
           webpackStats.toJson({
             all: false,
             chunkGroups: true,
           }).namedChunkGroups,
-          (item) => item.assets.map(({ name }: { name: string }) => name),
+          (item) => item.assets?.map(({ name }: { name: string }) => name)
+            ?? [],
         );
       } else if (CHUNK_GROUPS) chunkGroups = CHUNK_GROUPS;
       else chunkGroups = {};
@@ -439,7 +447,7 @@ export default function factory(
 
           // TODO: prerenderToNodeStream has (abort) "signal" option,
           // and we should wire it up to the SSR timeout below.
-          const helmetContext = {};
+          const helmetContext = {} as HelmetDataContext;
           const { prelude } = await prerenderToNodeStream(
             <GlobalStateProvider
               initialState={ssrContext.state}
@@ -451,9 +459,11 @@ export default function factory(
                 </HelmetProvider>
               </StaticRouter>
             </GlobalStateProvider>,
-            { onError: (error) => { throw error; } },
+            { onError: (error) => {
+              throw error;
+            } },
           );
-          ({ helmet } = helmetContext as any);
+          ({ helmet } = helmetContext);
 
           return prelude;
         };
@@ -461,18 +471,16 @@ export default function factory(
         let ssrRound = 0;
         let bailed = false;
         for (; ssrRound < ops.maxSsrRounds!; ++ssrRound) {
-          stream = await renderPass(); // eslint-disable-line no-await-in-loop
+          stream = await renderPass();
 
           if (!ssrContext.dirty) break;
 
-          /* eslint-disable no-await-in-loop */
           const timeout = ops.ssrTimeout! + ssrStart - Date.now();
           bailed = timeout <= 0 || !await Promise.race([
             Promise.allSettled(ssrContext.pending),
             timer(timeout).then(() => false),
           ]);
           if (bailed) break;
-          /* eslint-enable no-await-in-loop */
         }
 
         let logMsg;
@@ -491,7 +499,7 @@ export default function factory(
         await new Promise((ready) => {
           stream!.pipe(new Writable({
             destroy: ready,
-            write: (chunk, _, done) => {
+            write: (chunk: { toString: () => string }, _, done) => {
               appHtmlMarkup += chunk.toString();
               done();
             },
@@ -506,7 +514,7 @@ export default function factory(
        * better than injection of a plain text. */
       const payload = serializeJs({
         CHUNK_GROUPS: chunkGroups,
-        CONFIG: configToInject || sanitizedConfig,
+        CONFIG: configToInject ?? sanitizedConfig,
         ISTATE: ssrContext.state,
       }, {
         ignoreFunction: true,
@@ -538,22 +546,22 @@ export default function factory(
       let scriptChunkString = '';
       chunkSet.forEach((chunk) => {
         if (chunk.endsWith('.css')) {
-          styleChunkString += `<link href="${publicPath}${chunk}" rel="stylesheet">`;
+          styleChunkString += `<link href="${publicPath as string}${chunk}" rel="stylesheet">`;
         } else if (
           chunk.endsWith('.js')
-            // In dev mode HMR adds JS updates into asset arrays,
-            // and they (updates) should be ignored.
-            && !chunk.endsWith('.hot-update.js')
+          // In dev mode HMR adds JS updates into asset arrays,
+          // and they (updates) should be ignored.
+          && !chunk.endsWith('.hot-update.js')
         ) {
-          scriptChunkString += `<script src="${publicPath}${chunk}" type="application/javascript"></script>`;
+          scriptChunkString += `<script src="${publicPath as string}${chunk}" type="application/javascript"></script>`;
         }
       });
 
       const grouppedExtraScripts = groupExtraScripts(extraScripts);
 
-      const faviconLink = ops.favicon ? (
-        '<link rel="shortcut icon" href="/favicon.ico">'
-      ) : '';
+      const faviconLink = ops.favicon
+        ? '<link rel="shortcut icon" href="/favicon.ico">'
+        : '';
 
       const html = `<!DOCTYPE html>
         <html lang="en">
@@ -591,8 +599,10 @@ export default function factory(
             const b = buffer as BufferWithNonce;
             if (error) failed(error);
             else {
-              b.nonce = (req as any).nonce; // eslint-disable-line no-param-reassign
-              cache!.add({ buffer: b, status }, cacheRef!.key, buffer.length);
+              b.nonce = (req as unknown as {
+                nonce: string;
+              }).nonce;
+              cache!.add({ buffer: b, status }, cacheRef.key, buffer.length);
               done();
             }
           });