@dr.pogodin/react-utils 1.35.1 → 1.35.3

package/build/types-code/client/getInj.d.ts

@@ -1,3 +1,9 @@
 import 'node-forge/lib/aes';
 import type { InjT } from '../shared/utils/globalState';
 export default function getInj(): InjT;
+/**
+ * Allows to set a custom injection object instance,
+ * for server-less scenarios, for example, where it is not auto-injected
+ * into generated pages from the server side.
+ */
+export declare function setInj(value: InjT): void;

package/build/types-code/client/index.d.ts

@@ -1,12 +1,13 @@
 import { type ComponentType } from 'react';
+import { setInj } from './getInj';
 type OptionsT = {
     dontHydrate?: boolean;
     initialState?: any;
 };
+export { setInj };
 /**
  * Prepares and launches the app at client side.
  * @param Application Root application component
  * @param [options={}] Optional. Additional settings.
  */
 export default function Launch(Application: ComponentType, options?: OptionsT): void;
-export {};

package/build/types-code/index.d.ts

@@ -1,10 +1,10 @@
 import 'styles/global.scss';
 import type ServerT from './server';
 declare const server: typeof ServerT | null;
-declare const client: any;
+declare let client: any;
 export { default as api } from 'axios';
 export * as PT from 'prop-types';
 export { type AsyncCollectionLoaderT, type AsyncDataEnvelopeT, type AsyncDataLoaderT, type ForceT, type UseAsyncDataOptionsT, type UseAsyncDataResT, type UseGlobalStateResT, type ValueOrInitializerT, getGlobalState, GlobalStateProvider, newAsyncDataEnvelope, useAsyncCollection, useAsyncData, useGlobalState, withGlobalStateType, } from '@dr.pogodin/react-global-state';
 export * from './shared/components';
-export { type Theme, config, Barrier, Emitter, isomorphy, getSsrContext, Semaphore, splitComponent, themed, ThemeProvider, time, webpack, withRetries, } from './shared/utils';
+export { type Listener, type Theme, config, Barrier, Emitter, isomorphy, getSsrContext, Semaphore, splitComponent, themed, ThemeProvider, time, webpack, withRetries, } from './shared/utils';
 export { client, server };

package/build/types-code/shared/components/Button/index.d.ts

@@ -13,6 +13,7 @@ type PropsT = {
     theme: Theme<typeof validThemeKeys>;
     to?: object | string;
 };
+export declare const BaseButton: React.FunctionComponent<PropsT>;
 /**
  * Button component theme: a map of CSS
  * class names to append to button elements:

package/build/types-code/shared/components/index.d.ts

@@ -2,7 +2,7 @@
  * Just an aggregation of all exported components into a single module.
  */
 export * from './selectors';
-export { default as Button } from './Button';
+export { default as Button, BaseButton } from './Button';
 export { default as Checkbox } from './Checkbox';
 export { default as Input } from './Input';
 export { default as Link } from './Link';

package/build/types-code/shared/utils/index.d.ts

@@ -3,7 +3,7 @@ import config from './config';
 import * as isomorphy from './isomorphy';
 import time from './time';
 import * as webpack from './webpack';
-export { Barrier, Emitter, Semaphore, withRetries, } from '@dr.pogodin/js-utils';
+export { type Listener, Barrier, Emitter, Semaphore, withRetries, } from '@dr.pogodin/js-utils';
 export { getSsrContext } from './globalState';
 export { default as splitComponent } from './splitComponent';
 type ThemedT = typeof themedImpl & {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.35.1",
+  "version": "1.35.3",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,15 +8,15 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.5",
+    "@babel/runtime": "^7.24.6",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.1",
     "@dr.pogodin/csurf": "^1.13.0",
-    "@dr.pogodin/js-utils": "^0.0.9",
-    "@dr.pogodin/react-global-state": "^0.14.1",
-    "@dr.pogodin/react-themes": "^1.6.1",
+    "@dr.pogodin/js-utils": "^0.0.12",
+    "@dr.pogodin/react-global-state": "^0.14.2",
+    "@dr.pogodin/react-themes": "^1.6.2",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.6.8",
-    "commander": "^12.0.0",
+    "axios": "^1.7.2",
+    "commander": "^12.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.11",
     "cookie": "^0.6.0",
@@ -47,24 +47,23 @@
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/eslint-parser": "^7.24.5",
-    "@babel/eslint-plugin": "^7.24.5",
-    "@babel/node": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@babel/register": "^7.23.7",
+    "@babel/cli": "^7.24.6",
+    "@babel/core": "^7.24.6",
+    "@babel/eslint-parser": "^7.24.6",
+    "@babel/eslint-plugin": "^7.24.6",
+    "@babel/node": "^7.24.6",
+    "@babel/plugin-transform-runtime": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@babel/register": "^7.24.6",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.13",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@testing-library/dom": "^10.1.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.6",
-    "@tsd/typescript": "^5.4.5",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
@@ -72,11 +71,11 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.1",
+    "@types/lodash": "^4.17.4",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/request-ip": "^0.0.41",
@@ -90,7 +89,7 @@
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.2",
     "core-js": "^3.37.1",
-    "css-loader": "^7.1.1",
+    "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -99,7 +98,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -115,16 +114,16 @@
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.77.1",
+    "sass": "^1.77.4",
     "sass-loader": "^14.2.1",
-    "sitemap": "^7.1.1",
-    "stylelint": "^16.5.0",
+    "sitemap": "^8.0.0",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^7.9.0",
+    "typescript-eslint": "^7.12.0",
     "webpack": "^5.91.0",
     "webpack-dev-middleware": "^7.2.1",
     "webpack-hot-middleware": "^2.26.1",

package/src/client/getInj.ts

@@ -41,3 +41,12 @@ if (metaElement) {
 export default function getInj(): InjT {
   return inj;
 }
+
+/**
+ * Allows to set a custom injection object instance,
+ * for server-less scenarios, for example, where it is not auto-injected
+ * into generated pages from the server side.
+ */
+export function setInj(value: InjT) {
+  inj = value;
+}

package/src/client/index.tsx

@@ -8,13 +8,15 @@ import { GlobalStateProvider } from '@dr.pogodin/react-global-state';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
-import getInj from './getInj';
+import getInj, { setInj } from './getInj';
 
 type OptionsT = {
   dontHydrate?: boolean;
   initialState?: any;
 };
 
+export { setInj };
+
 /**
  * Prepares and launches the app at client side.
  * @param Application Root application component

package/src/index.ts

@@ -6,7 +6,15 @@ import type ServerT from './server';
 
 const server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;
 
-const client = server ? undefined : require('./client').default;
+// TODO: Should be done in a cleaner way, but technically it is fine
+// for this scenario.
+// eslint-disable-next-line import/no-mutable-exports
+let client = server ? undefined : require('./client');
+
+if (client) {
+  client.default.setInj = client.setInj;
+  client = client.default;
+}
 
 export { default as api } from 'axios';
 export * as PT from 'prop-types';
@@ -32,6 +40,7 @@ export {
 export * from 'components';
 
 export {
+  type Listener,
   type Theme,
   config,
   Barrier,

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

@@ -26,7 +26,7 @@ type PropsT = {
 };
 
 /* eslint-disable react/function-component-definition */
-const BaseButton: React.FunctionComponent<PropsT> = ({
+export const BaseButton: React.FunctionComponent<PropsT> = ({
   active,
   children,
   disabled,

package/src/shared/components/index.ts

@@ -4,7 +4,7 @@
 
 export * from 'components/selectors';
 
-export { default as Button } from 'components/Button';
+export { default as Button, BaseButton } from 'components/Button';
 export { default as Checkbox } from 'components/Checkbox';
 export { default as Input } from 'components/Input';
 export { default as Link } from 'components/Link';

package/src/shared/utils/index.ts

@@ -11,6 +11,7 @@ import time from './time';
 import * as webpack from './webpack';
 
 export {
+  type Listener,
   Barrier,
   Emitter,
   Semaphore,

package/src/shared/utils/jest/index.tsx

@@ -107,6 +107,7 @@ export function snapshot(element: React.ReactElement) {
   });
   if (res === undefined) throw Error('Render failed');
 
-  expect(res.asFragment().firstChild).toMatchSnapshot();
+  const nodes = res.asFragment().childNodes;
+  expect(nodes.length > 1 ? [...nodes] : nodes[0]).toMatchSnapshot();
   return res;
 }

package/src/shared/utils/splitComponent.tsx

@@ -22,15 +22,23 @@ 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.
+// NOTE: At the client-side we get chunk groups the first time they are needed
+// (we used to get them eagerly when this module loaded, but it did not work well
+// alongside custom chunk info injection in server-less scenario);
+// 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;
+let cachedClientChunkGroups: ChunkGroupsT | undefined;
 
-if (IS_CLIENT_SIDE) {
-  // eslint-disable-next-line global-require
-  clientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
+function getClientChunkGroups(): ChunkGroupsT {
+  if (IS_CLIENT_SIDE && !cachedClientChunkGroups) {
+    // eslint-disable-next-line global-require
+    cachedClientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
+  }
+
+  if (!cachedClientChunkGroups) throw Error('Internal error');
+
+  return cachedClientChunkGroups;
 }
 
 const refCounts: { [path: string]: number } = {};
@@ -185,7 +193,7 @@ export default function splitComponent<
   placeholder?: ReactNode,
 }) {
   // On the client side we can check right away if the chunk name is known.
-  if (IS_CLIENT_SIDE) assertChunkName(chunkName, clientChunkGroups);
+  if (IS_CLIENT_SIDE) assertChunkName(chunkName, getClientChunkGroups());
 
   // The correct usage of splitComponent() assumes a single call per chunk.
   if (usedChunkNames.has(chunkName)) {
@@ -200,7 +208,7 @@ export default function splitComponent<
     // the component (the lazy load function is executed by React one at
     // the frist mount).
     if (IS_CLIENT_SIDE) {
-      await bookStyleSheets(chunkName, clientChunkGroups, false);
+      await bookStyleSheets(chunkName, getClientChunkGroups(), false);
     }
 
     const Wrapper = forwardRef((
@@ -218,8 +226,8 @@ 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);
+        bookStyleSheets(chunkName, getClientChunkGroups(), true);
+        return () => freeStyleSheets(chunkName, getClientChunkGroups());
       }, []);
 
       return (

package/tsconfig.types.json

@@ -1,9 +1,7 @@
 // TS config for ESLint, editor plugins, and other tools that look-up and use
 // the default tsconfig.json file.
 {
-  // Note: Full relative paths, as some tools don't support Node module
-  // resolution mechanics.
-  "extends": "./node_modules/@tsconfig/recommended/tsconfig.json",
+  "extends": "@tsconfig/recommended",
 
   // Keep these in case any mocks / tests are declared within "src" code tree.
   "exclude": [