@dr.pogodin/react-utils 1.47.0-alpha.1 → 1.47.0-alpha.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.47.0-alpha.1",
+  "version": "1.47.0-alpha.3",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,7 +12,7 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.8",
     "@dr.pogodin/csurf": "^1.16.6",
     "@dr.pogodin/js-utils": "^0.1.4",
-    "@dr.pogodin/react-global-state": "^0.20.1",
+    "@dr.pogodin/react-global-state": "^0.21.1",
     "@dr.pogodin/react-helmet": "^3.0.4",
     "@dr.pogodin/react-themes": "^1.9.3",
     "@jest/environment": "^30.2.0",
@@ -23,11 +23,11 @@
     "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
     "cross-env": "^10.1.0",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "express": "^5.1.0",
     "helmet": "^8.1.0",
     "http-status-codes": "^2.3.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "morgan": "^1.10.1",
     "node-forge": "^1.3.1",
     "qs": "^6.14.0",
@@ -36,7 +36,7 @@
     "react-dom": "^19.2.0",
     "react-router": "^7.9.5",
     "request-ip": "^3.3.0",
-    "rimraf": "^6.0.0",
+    "rimraf": "^6.1.0",
     "serialize-javascript": "^7.0.0",
     "serve-favicon": "^2.5.1",
     "source-map-support": "^0.5.21",
@@ -69,6 +69,7 @@
     "@types/express": "^5.0.5",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
+    "@types/lodash-es": "^4.17.12",
     "@types/morgan": "^1.9.10",
     "@types/node-forge": "^1.3.14",
     "@types/pretty": "^2.0.3",
@@ -83,6 +84,7 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-import-meta": "^2.3.3",
     "core-js": "^3.46.0",
@@ -102,9 +104,9 @@
     "react-refresh": "^0.18.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.93.2",
+    "sass": "^1.93.3",
     "sass-loader": "^16.0.6",
-    "sitemap": "^8.0.2",
+    "sitemap": "^9.0.0",
     "source-map-loader": "^5.0.0",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
@@ -125,7 +127,7 @@
     "node": ">=20",
     "npm": ">=10"
   },
-  "main": "./node-entry.js",
+  "main": "./build/production/index.js",
   "source": "./src/index.ts",
   "types": "./build/types-code/index.d.ts",
   "exports": {
@@ -133,10 +135,11 @@
       "browser": "./build/web/index.js",
       "node": {
         "webpack": "./build/web/index.js",
-        "default": "./node-entry.js"
+        "development": "./build/development/index.js",
+        "default": "./build/production/index.js"
       },
       "react-native": {
-        "default": "./node-entry.js",
+        "default": "./build/production/index.js",
         "types": "./build/types-code/index.d.ts"
       }
     },
@@ -176,8 +179,8 @@
   "scripts": {
     "build": "rimraf build && npm run build:configs && npm run build:types-scss && npm run build:types-code && npm run build:web && npm run build:dev && npm run build:prod",
     "build:configs": "tsc --project tsconfig.configs.json",
-    "build:dev": "node bin/build -i build/web -t development --lib --webpack-config webpack.config.ts --no-webpack",
-    "build:prod": "node bin/build -i build/web -t production --lib --webpack-config webpack.config.ts --no-webpack",
+    "build:dev": "node bin/build -i build/web -t development --lib --babel-config babel.module.config.js --webpack-config webpack.config.ts --no-webpack",
+    "build:prod": "node bin/build -i build/web -t production --lib --babel-config babel.module.config.js --webpack-config webpack.config.ts --no-webpack",
     "build:types-code": "rimraf build/types-code && tsc --project tsconfig.types.json && tsc-alias -p tsconfig.types.json",
     "build:types-scss": "rimraf build/types-scss && typed-scss-modules .",
     "build:web": "rimraf build/web && babel ./src --config-file ./babel.libweb.config.js --out-dir build/web -x .js,.jsx,.ts,.tsx --source-maps --copy-files",

package/src/client/getInj.ts

@@ -4,10 +4,10 @@
 
 // Note: this way, only required part of "node-forge": AES, and some utils,
 // is bundled into client-side code.
-import forge from 'node-forge/lib/forge';
+import forge from 'node-forge/lib/forge.js';
 
 // eslint-disable-next-line import/no-unassigned-import
-import 'node-forge/lib/aes';
+import 'node-forge/lib/aes.js';
 
 import type { InjT } from 'utils/globalState';
 

package/src/index.ts

@@ -1,8 +1,8 @@
 import 'styles/global.scss';
 
-import { webpack } from 'utils';
+import clientModule from './client';
+import { webpack } from './shared/utils';
 
-import type * as ClientM from './client';
 import type * as ServerFactoryM from './server';
 
 // It is a safeguard against multiple instances / versions of the library
@@ -21,11 +21,7 @@ dirname = dirname.slice(5, dirname.lastIndexOf('/'));
 
 const server = webpack.requireWeak<typeof ServerFactoryM>('./server', dirname);
 
-const client = server
-  ? undefined
-
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  : (require('./client') as typeof ClientM).default;
+const client = server ? undefined : clientModule;
 
 export {
   type AsyncCollectionT,

package/src/server/index.ts

@@ -1,20 +1,15 @@
 // eslint-disable-next-line import/no-unassigned-import
-import 'source-map-support/register';
+import 'source-map-support/register.js';
 
 import http from 'node:http';
 import https from 'node:https';
 
-import cloneDeep from 'lodash/cloneDeep';
-import defaults from 'lodash/defaults';
-import isFinite from 'lodash/isFinite';
-import isNumber from 'lodash/isNumber';
-import isString from 'lodash/isString';
-import toNumber from 'lodash/toNumber';
+import { cloneDeep, defaults } from 'lodash-es';
 
 // 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 'raf/polyfill.js';
 
 import type { Configuration } from 'webpack';
 
@@ -41,13 +36,12 @@ export { errors, getDefaultCspSettings, type ServerT };
  * Normalizes a port into a number, string, or false.
  * TODO: Drop this function?
  * @param value Port name or number.
- * @return Port number (Number), name (String), or false.
+ * @return Port number (Number), name (String).
  */
 function normalizePort(value: number | string) {
-  const port = toNumber(value);
-  if (isFinite(port)) return port; /* port number */
-  if (!isNumber(port)) return value; /* named pipe */
-  return false;
+  const port = typeof value === 'string' ? parseInt(value) : value;
+  if (Number.isFinite(port)) return port; /* port number */
+  return value; /* named pipe */
 }
 
 type OptionsT = ServerOptionsT & {
@@ -212,7 +206,7 @@ export default async function launchServer(
   /* Sets error handler for HTTP(S) server. */
   httpServer.on('error', (error: Error) => {
     if ((error as { syscall?: string }).syscall !== 'listen') throw error;
-    const bind = isString(ops.port) ? `Pipe ${ops.port}` : `Port ${ops.port}`;
+    const bind = typeof ops.port === 'string' ? `Pipe ${ops.port}` : `Port ${ops.port}`;
 
     /* Human-readable message for some specific listen errors. */
     switch ((error as { code?: string }).code) {
@@ -231,7 +225,7 @@ export default async function launchServer(
   /* Listening event handler for HTTP(S) server. */
   httpServer.on('listening', () => {
     const addr = httpServer.address()!;
-    const bind = isString(addr) ? `pipe ${addr}` : `port ${addr.port}`;
+    const bind = typeof addr === 'string' ? `pipe ${addr}` : `port ${addr.port}`;
     ops.logger!.info(`Server listening on ${bind} in ${
       process.env.NODE_ENV} mode`);
   });

package/src/server/renderer.tsx

@@ -15,13 +15,12 @@ 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';
@@ -36,7 +35,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
@@ -196,7 +197,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 +313,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,

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';
@@ -16,7 +14,6 @@ import csrf from '@dr.pogodin/csurf';
 import express, {
   type Express,
   type NextFunction,
-  type RequestHandler,
   type Request,
   type Response,
 } from 'express';
@@ -27,7 +24,7 @@ import loggerMiddleware from 'morgan';
 import requestIp from 'request-ip';
 import { v4 as uuid } from 'uuid';
 
-import type { Compiler, Configuration } from 'webpack';
+import type { Configuration } from 'webpack';
 
 import rendererFactory, {
   type LoggerI,
@@ -251,18 +248,19 @@ export default async function factory(
       } as Location;
     }
 
-    /* eslint-disable @typescript-eslint/no-require-imports */
-    const webpack = require('webpack') as (ops: Configuration) => Compiler;
+    const { default: webpack } = await import(/* webpackChunkName: "server-side-code" */ 'webpack');
 
-    // TODO: Figure out the exact type for options, don't wanna waste time on it
-    // right now.
-    const webpackDevMiddleware = require('webpack-dev-middleware') as
-      (c: Compiler, ops: unknown) => RequestHandler;
+    const { default: webpackDevMiddleware } = await import(
+      /* webpackChunkName: "server-side-code" */ 'webpack-dev-middleware'
+    );
 
-    const webpackHotMiddleware = require('webpack-hot-middleware') as
-      (c: Compiler) => RequestHandler;
+    const { default: webpackHotMiddleware } = await import(
+      /* webpackChunkName: "server-side-code" */ 'webpack-hot-middleware'
+    );
 
     const compiler = webpack(webpackConfig);
+    if (!compiler) throw Error('Internal error');
+
     server.use(webpackDevMiddleware(compiler, {
       publicPath,
       serverSideRender: true,

package/src/shared/utils/config.ts

@@ -1,6 +1,8 @@
 /* global document */
 
-import type CookieM from 'cookie';
+import { parse } from 'cookie';
+
+import clientGetInj from '../../client/getInj';
 
 import { IS_CLIENT_SIDE } from './isomorphy/environment-check';
 import { requireWeak } from './webpack';
@@ -8,21 +10,14 @@ 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
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    ? (require('client/getInj') as {
-      default: () => Record<string, unknown>;
-    }).default().CONFIG
-    : requireWeak('config')
+  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') {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const cookie = require('cookie') as typeof CookieM;
-  config.CSRF = cookie.parse(document.cookie).csrfToken;
+  config.CSRF = parse(document.cookie).csrfToken;
 }
 
 export default config;

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

@@ -20,23 +20,13 @@ import {
   getBuildInfo,
 } from './isomorphy';
 
-// Note: At the client side we can get chunk groups immediately when loading
-// the module; at the server-side we only can get them within React render flow.
-// Thus, we set and use the following variable at the client-side, and then when
-// needed on the server side, we'll fetch it differently.
-let clientChunkGroups: ChunkGroupsT;
-
-if (IS_CLIENT_SIDE) {
-  // 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 */
+function getClientChunkGroups(): Promise<ChunkGroupsT> | undefined {
+  if (!IS_CLIENT_SIDE) return undefined;
+
+  return (async () => {
+    const { default: getInj } = await import(/* webpackChunkName: "react-utils-client-side-code" */ '../../client/getInj');
+    return getInj().CHUNK_GROUPS ?? {};
+  })();
 }
 
 const refCounts: Record<string, number> = {};
@@ -202,15 +192,20 @@ export default function splitComponent<
   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);
-
   // The correct usage of splitComponent() assumes a single call per chunk.
   if (usedChunkNames.has(chunkName)) {
     throw Error(`Repeated splitComponent() call for the chunk "${chunkName}"`);
   } else usedChunkNames.add(chunkName);
 
   const LazyComponent = lazy(async () => {
+    const clientChunkGroups = await getClientChunkGroups();
+
+    // On the client side we can check right away if the chunk name is known.
+    if (IS_CLIENT_SIDE) {
+      if (!clientChunkGroups) throw Error('Internal error');
+      assertChunkName(chunkName, clientChunkGroups);
+    }
+
     const resolved = await getComponent();
     const Component = 'default' in resolved ? resolved.default : resolved;
 
@@ -218,6 +213,7 @@ export default function splitComponent<
     // the component (the lazy load function is executed by React one at
     // the frist mount).
     if (IS_CLIENT_SIDE) {
+      if (!clientChunkGroups) throw Error('Internal error');
       await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
@@ -237,6 +233,7 @@ export default function splitComponent<
       // This takes care about stylesheets management every time an instance of
       // this component is mounted / unmounted.
       useInsertionEffect(() => {
+        if (!clientChunkGroups) throw Error('Internal error');
         void bookStyleSheets(chunkName, clientChunkGroups, true);
         return () => {
           freeStyleSheets(chunkName, clientChunkGroups);

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

@@ -19,7 +19,7 @@ declare module '@babel/register/experimental-worker' {
   export default register;
 }
 
-declare module 'node-forge/lib/forge' {
+declare module 'node-forge/lib/forge.js' {
   import F from 'node-forge';
 
   export default F;

package/node-entry.js

@@ -1,15 +0,0 @@
-// TODO: We should re-visit, if this can be simplified / optimized?
-/* global global, module, process, require */
-
-// This permits to load the library in react-native, or other environment that
-// does not have __dirname global. It probably breaks a few node-specific lib
-// pieces, but that does not seem to prevent more relevant parts from working.
-if (typeof __dirname === 'undefined') {
-  global.__dirname = ''; // eslint-disable-line no-underscore-dangle
-}
-
-// Again, for react-native, and maybe some other environments, we need
-// to have no dynamic requires below (i.e. can't do require(`./build/${env}`)).
-// eslint-disable-next-line import/no-commonjs
-module.exports = process.env.NODE_ENV === 'production'
-  ? require('./build/production') : require('./build/development');