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

package/src/server/index.ts

@@ -4,14 +4,12 @@ import 'source-map-support/register';
 import http from 'node:http';
 import https from 'node:https';
 
-import {
-  cloneDeep,
-  defaults,
-  isFinite,
-  isNumber,
-  isString,
-  toNumber,
-} from 'lodash';
+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';
 
 // Polyfill required by ReactJS.
 // TODO: Double-check, if it is still required by React v19?

package/src/server/renderer.tsx

@@ -15,15 +15,13 @@ import winston from 'winston';
 import { GlobalStateProvider, SsrContext } from '@dr.pogodin/react-global-state';
 import { timer } from '@dr.pogodin/js-utils';
 
-import {
-  clone,
-  cloneDeep,
-  defaults,
-  get,
-  isString,
-  mapValues,
-  omit,
-} from 'lodash';
+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 config from 'config';
 import forge from 'node-forge';

package/src/server/server.ts

@@ -5,11 +5,9 @@
 import { sep } from 'node:path';
 import { pathToFileURL } from 'node:url';
 
-import {
-  cloneDeep,
-  mapValues,
-  pick,
-} from 'lodash';
+import cloneDeep from 'lodash/cloneDeep';
+import mapValues from 'lodash/mapValues';
+import pick from 'lodash/pick';
 
 import compression from 'compression';
 import cookieParser from 'cookie-parser';
@@ -18,7 +16,6 @@ import csrf from '@dr.pogodin/csurf';
 import express, {
   type Express,
   type NextFunction,
-  type RequestHandler,
   type Request,
   type Response,
 } from 'express';
@@ -29,7 +26,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,
@@ -253,18 +250,19 @@ export default async function factory(
       } as Location;
     }
 
-    /* eslint-disable @typescript-eslint/no-require-imports */
-    const webpack = require('webpack') as (ops: Configuration) => Compiler;
+    const { 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/components/Modal/base-theme.scss

@@ -1,4 +1,4 @@
-@use "styles/mixins" as *;
+@use "../../../styles/mixins" as *;
 
 *,
 .context,

package/src/shared/components/PageLayout/base-theme.scss

@@ -5,7 +5,7 @@
  * columns on left and right.
  */
 
-@use "styles/mixins" as *;
+@use "../../../styles/mixins" as *;
 
 *,
 .context,

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

@@ -19,7 +19,10 @@
 import path from 'node:path';
 
 import type { Request, Response } from 'express';
-import { defaults, noop, set } from 'lodash';
+
+import defaults from 'lodash/defaults';
+import set from 'lodash/set';
+
 import type { ReactNode } from 'react';
 
 // As this environment is a part of the Jest testing utils,
@@ -41,6 +44,10 @@ import ssrFactory from 'server/renderer';
 
 import { setBuildInfo } from '../isomorphy/buildInfo';
 
+function noop() {
+  // NOOP
+}
+
 export default class E2eSsrEnv extends JsdomEnv {
   pragmas: Record<string, string | string[]>;
 

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/build/development/__chunk_groups__.json

@@ -1,6 +0,0 @@
-{
-  "main": [
-    "style.css",
-    "web.bundle.js"
-  ]
-}