@dr.pogodin/react-utils 1.47.0-alpha.2 → 1.47.0-alpha.4

package/src/server/renderer.tsx

@@ -2,6 +2,8 @@
  * ExpressJS middleware for server-side rendering of a ReactJS app.
  */
 
+import { Buffer } from 'node:buffer';
+import { type Cipheriv, createCipheriv, randomBytes } from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
 import { Writable } from 'node:stream';
@@ -15,16 +17,14 @@ import winston from 'winston';
 import { GlobalStateProvider, SsrContext } from '@dr.pogodin/react-global-state';
 import { timer } from '@dr.pogodin/js-utils';
 
-import clone from 'lodash/clone';
-import cloneDeep from 'lodash/cloneDeep';
-import defaults from 'lodash/defaults';
-import get from 'lodash/get';
-import isString from 'lodash/isString';
-import mapValues from 'lodash/mapValues';
-import omit from 'lodash/omit';
+import {
+  cloneDeep,
+  defaults,
+  get,
+  mapValues,
+} from 'lodash-es';
 
 import config from 'config';
-import forge from 'node-forge';
 
 import { prerenderToNodeStream } from 'react-dom/static';
 import { type HelmetDataContext, HelmetProvider } from '@dr.pogodin/react-helmet';
@@ -36,7 +36,9 @@ import type { ChunkGroupsT, SsrContextT } from 'utils/globalState';
 
 import Cache from './Cache';
 
-const sanitizedConfig = omit(config, 'SECRET');
+// @ts-expect-error "Property 'SECRET' does not exist on type 'IConfig'."
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { SECRET, ...sanitizedConfig } = config;
 
 // Note: These type definitions for logger are copied from Winston logger,
 // then simplified to make it easier to fit an alternative logger into this
@@ -133,26 +135,15 @@ function readChunkGroupsJson(buildDir: string) {
 
 /**
  * Prepares a new Cipher for data encryption.
- * @param key Encryption key (32-bit random key is expected, see
- *  node-forge documentation, in case of doubts).
- * @return Resolves to the object with two fields:
+ * @param key Encryption key (32-bit random, Base64-encoded key is expected).
+ * @return Returns a tuple of:
  *  1. cipher - a new Cipher, ready for encryption;
  *  2. iv - initial vector used by the cipher.
  */
-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);
-      else {
-        const cipher = forge.cipher.createCipher('AES-CBC', key);
-        cipher.start({ iv });
-        resolve({ cipher, iv });
-      }
-    });
-  });
+function prepareCipher(key: string): [cipher: Cipheriv, iv: Buffer] {
+  const iv = randomBytes(16);
+  const cipher = createCipheriv('AES-256-CBC', Buffer.from(key, 'base64'), iv);
+  return [cipher, iv];
 }
 
 /**
@@ -196,7 +187,7 @@ function groupExtraScripts(scripts: Array<string | ScriptT> = []) {
     [SCRIPT_LOCATIONS.HEAD_OPEN]: '',
   };
   for (const script of scripts) {
-    if (isString(script)) {
+    if (typeof script === 'string') {
       if (script) res[SCRIPT_LOCATIONS.DEFAULT] += script;
     } else if (script.code) {
       if (script.location in res) res[script.location] += script.code;
@@ -312,7 +303,7 @@ export default function factory(
   webpackConfig: Configuration,
   options: OptionsT,
 ): RequestHandler {
-  const ops: OptionsT = defaults(clone(options), {
+  const ops: OptionsT = defaults({ ...options }, {
     beforeRender: async () => Promise.resolve({}),
     maxSsrRounds: 10,
     ssrTimeout: 1000,
@@ -400,21 +391,9 @@ export default function factory(
       }
 
       const brr = ops.beforeRender!(req, sanitizedConfig as unknown as ConfigT);
+      const { configToInject, extraScripts, initialState } = await brr;
 
-      const [{
-        configToInject,
-        extraScripts,
-        initialState,
-      }, {
-        cipher,
-        iv,
-      }] = await Promise.all([
-        // NOTE: Written this way to avoid triggering the "await-thenable"
-        // ESLint rule.
-        brr instanceof Promise ? brr : Promise.resolve(brr),
-
-        prepareCipher(buildInfo.key),
-      ]);
+      const [cipher, iv] = prepareCipher(buildInfo.key);
 
       let helmet: HelmetDataContext['helmet'];
 
@@ -553,9 +532,12 @@ export default function factory(
         ignoreFunction: true,
         unsafe: true,
       });
-      cipher.update(forge.util.createBuffer(payload, 'utf8'));
-      cipher.finish();
-      const INJ = forge.util.encode64(`${iv}${cipher.output.data}`);
+
+      const INJ = Buffer.concat([
+        iv,
+        cipher.update(payload, 'utf8'),
+        cipher.final(),
+      ]).toString('base64');
 
       const chunkSet = new Set<string>();
 

package/src/server/server.ts

@@ -5,9 +5,7 @@
 import { sep } from 'node:path';
 import { pathToFileURL } from 'node:url';
 
-import cloneDeep from 'lodash/cloneDeep';
-import mapValues from 'lodash/mapValues';
-import pick from 'lodash/pick';
+import { cloneDeep, mapValues, pick } from 'lodash-es';
 
 import compression from 'compression';
 import cookieParser from 'cookie-parser';
@@ -250,7 +248,7 @@ export default async function factory(
       } as Location;
     }
 
-    const { webpack } = await import(/* webpackChunkName: "server-side-code" */ 'webpack');
+    const { default: webpack } = await import(/* webpackChunkName: "server-side-code" */ 'webpack');
 
     const { default: webpackDevMiddleware } = await import(
       /* webpackChunkName: "server-side-code" */ 'webpack-dev-middleware'

package/src/shared/components/Modal/index.tsx

@@ -7,7 +7,7 @@ import {
   useRef,
 } from 'react';
 
-import ReactDom from 'react-dom';
+import { createPortal } from 'react-dom';
 import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import baseTheme from './base-theme.scss';
@@ -96,7 +96,7 @@ const BaseModal: FunctionComponent<PropsT> = ({
     />
   ), []);
 
-  return ReactDom.createPortal(
+  return createPortal(
     (
       <div>
         {focusLast}

package/src/shared/utils/config.ts

@@ -7,17 +7,53 @@ import clientGetInj from '../../client/getInj';
 import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
 import { requireWeak } from './webpack';
 
-// TODO: The internal type casting is somewhat messed up here,
-// to be corrected later.
-const config: Record<string, unknown> = (
-  IS_CLIENT_SIDE ? clientGetInj().CONFIG : requireWeak('config')
-) as (Record<string, unknown> | undefined) ?? ({} as Record<string, unknown>);
-
-// The safeguard for "document" is necessary because in non-Node environments,
-// like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
-// of other browser-world features are not available.
-if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
-  config.CSRF = parse(document.cookie).csrfToken;
+type ConfigT = Record<string, unknown>;
+
+let config: ConfigT | Promise<ConfigT> | undefined;
+
+/**
+ * Injects CSRF token into config (on client-side only).
+ *
+ * BEWARE: It mutates the argument, and also returns it as the result,
+ * for chaining.
+ */
+function injectCsrfToken(cfg: ConfigT): ConfigT {
+  // The safeguard for "document" is necessary because in non-Node environments,
+  // like React Native, IS_CLIENT_SIDE is "true", however "document" and a bunch
+  // of other browser-world features are not available.
+  if (IS_CLIENT_SIDE && typeof document !== 'undefined') {
+    // eslint-disable-next-line no-param-reassign
+    cfg.CSRF = parse(document.cookie).csrfToken;
+  }
+
+  return cfg;
 }
 
-export default config;
+export function getConfig(sync: true): ConfigT;
+
+export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT>;
+
+export function getConfig(sync?: boolean): ConfigT | Promise<ConfigT> {
+  if (!config) {
+    if (IS_CLIENT_SIDE) {
+      const inj = clientGetInj();
+      config = inj instanceof Promise
+        ? inj.then((injection) => {
+          const res = injectCsrfToken(injection.CONFIG ?? {});
+          config = res;
+          return res;
+        })
+        : injectCsrfToken(inj.CONFIG ?? {});
+    } else {
+      const weak = requireWeak<ConfigT>('config');
+      if (!weak) throw Error('Internal error');
+      config = weak;
+    }
+  }
+
+  if (sync && (config instanceof Promise)) {
+    throw Error('The config is not available yet');
+  }
+
+  return config;
+}

package/src/shared/utils/index.ts

@@ -5,7 +5,7 @@ import themedImpl, {
   ThemeProvider,
 } from '@dr.pogodin/react-themes';
 
-import config from './config';
+import { getConfig } from './config';
 import * as isomorphy from './isomorphy';
 import time from './time';
 import * as webpack from './webpack';
@@ -36,7 +36,7 @@ themed.PRIORITY = PRIORITY;
 
 export {
   type Theme,
-  config,
+  getConfig,
   isomorphy,
   themed,
   ThemeProvider,

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

@@ -20,8 +20,7 @@ import path from 'node:path';
 
 import type { Request, Response } from 'express';
 
-import defaults from 'lodash/defaults';
-import set from 'lodash/set';
+import { defaults, set } from 'lodash-es';
 
 import type { ReactNode } from 'react';
 

package/src/shared/utils/splitComponent.tsx

@@ -25,7 +25,9 @@ function getClientChunkGroups(): Promise<ChunkGroupsT> | undefined {
 
   return (async () => {
     const { default: getInj } = await import(/* webpackChunkName: "react-utils-client-side-code" */ '../../client/getInj');
-    return getInj().CHUNK_GROUPS ?? {};
+
+    const inj = await getInj();
+    return inj.CHUNK_GROUPS ?? {};
   })();
 }
 
@@ -171,6 +173,16 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
   default: ComponentType<PropsT>;
 };
 
+type GenericComponentPropsT = {
+  children?: ReactNode;
+  ref?: RefObject<unknown>;
+
+  // NOTE: This is necessary, as without it this type (with only optional
+  // fields) will be conisdered as "weak" by TypeScript, and it will be
+  // a error to assign to it any type that does not use "children", or "ref".
+  [propName: string]: unknown;
+};
+
 /**
  * Given an async component retrieval function `getComponent()` it creates
  * a special "code split" component, which uses <Suspense> to asynchronously
@@ -182,7 +194,7 @@ type ComponentOrModule<PropsT> = ComponentType<PropsT> | {
  * @return {React.ElementType}
  */
 export default function splitComponent<
-  ComponentPropsT extends { children?: ReactNode; ref?: RefObject<unknown> },
+  ComponentPropsT extends GenericComponentPropsT,
 >({
   chunkName,
   getComponent,

package/src/shared/utils/webpack.ts

@@ -1,6 +1,9 @@
 import type PathNS from 'node:path';
 
-import { IS_CLIENT_SIDE } from './isomorphy';
+// eslint-disable-next-line import/enforce-node-protocol-usage
+import { createRequire } from 'module';
+
+import { IS_CLIENT_SIDE, IS_SERVER_SIDE } from './isomorphy';
 
 type RequireWeakOptionsT = {
   basePath?: string;
@@ -10,6 +13,10 @@ type RequireWeakResT<T> = T extends { default: infer D }
   ? (D extends null | undefined ? T : D & Omit<T, 'default'>)
   : T;
 
+let require: ((url: string) => unknown) | undefined;
+
+if (IS_SERVER_SIDE) require = createRequire(import.meta.url);
+
 /**
  * Requires the specified module without including it into the bundle during
  * Webpack build.
@@ -36,14 +43,12 @@ export function requireWeak<T extends object>(
     ({ basePath } = ops);
   }
 
-  // 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 PathNS;
+  const { resolve } = require!('node:path') as typeof PathNS;
 
   const path = basePath ? resolve(basePath, modulePath) : modulePath;
-  const module = req(path) as T;
+
+  const module = require!(path) as T;
 
   if (!('default' in module) || !module.default) return module as RequireWeakResT<T>;
 
@@ -53,8 +58,9 @@ export function requireWeak<T extends object>(
 
   Object.entries(named).forEach(([name, value]) => {
     const assigned = res[name as keyof RequireWeakResT<T>];
-    if (assigned) (res[name as keyof RequireWeakResT<T>] as unknown) = value;
-    else if (assigned !== value) {
+    if (assigned === undefined) {
+      (res[name as keyof RequireWeakResT<T>] as unknown) = value;
+    } else if (assigned !== value) {
       throw Error('Conflict between default and named exports');
     }
   });

package/types.d.ts

@@ -4,6 +4,7 @@ declare var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
 declare var REACT_UTILS_WEBPACK_BUNDLE: boolean | undefined;
 declare var REACT_UTILS_LIBRARY_LOADED: boolean | undefined;
 declare var REACT_UTILS_FORCE_CLIENT_SIDE: boolean | undefined;
+declare var SCENE_INIT_PROMISE: Promise<void> | undefined;
 /* eslint-enable no-var */
 
 declare module '@babel/register/experimental-worker' {
@@ -19,12 +20,6 @@ declare module '@babel/register/experimental-worker' {
   export default register;
 }
 
-declare module 'node-forge/lib/forge' {
-  import F from 'node-forge';
-
-  export default F;
-}
-
 declare module '*.png' {
   const path: string;
   export default path;