@dr.pogodin/react-utils 1.35.3 → 1.35.5

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

@@ -1,9 +1,3 @@
 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,13 +1,12 @@
 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,7 +1,7 @@
 import 'styles/global.scss';
 import type ServerT from './server';
 declare const server: typeof ServerT | null;
-declare let client: any;
+declare const 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';

package/build/types-code/shared/components/selectors/common.d.ts

@@ -8,7 +8,7 @@ export type OptionT<NameT> = {
     name?: NameT | null;
     value: ValueT;
 };
-export type OptionsT<NameT> = Array<OptionT<NameT> | ValueT>;
+export type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;
 export type PropsT<NameT, OnChangeT = React.ChangeEventHandler<HTMLSelectElement>> = {
     filter?: (item: OptionT<NameT> | ValueT) => boolean;
     label?: React.ReactNode;

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

@@ -11,6 +11,11 @@ export type InjT = {
     };
     ISTATE?: unknown;
 };
+declare global {
+    interface Window {
+        REACT_UTILS_INJECTION?: InjT;
+    }
+}
 export interface SsrContextT<StateT> extends SsrContext<StateT> {
     chunkGroups: ChunkGroupsT;
     chunks: string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.35.3",
+  "version": "1.35.5",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,8 +8,8 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.6",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.1",
+    "@babel/runtime": "^7.24.7",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.12",
     "@dr.pogodin/react-global-state": "^0.14.2",
@@ -42,20 +42,20 @@
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
-    "uuid": "^9.0.1",
+    "uuid": "^10.0.0",
     "winston": "^3.13.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@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/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/eslint-plugin": "^7.24.7",
+    "@babel/node": "^7.24.7",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
@@ -71,7 +71,7 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.4",
+    "@types/lodash": "^4.17.5",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
@@ -96,7 +96,7 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^28.5.0",
+    "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",

package/src/client/getInj.ts

@@ -31,6 +31,9 @@ if (metaElement) {
 
   data = forge.util.decodeUtf8(d.output.data);
   inj = eval(`(${data})`); // eslint-disable-line no-eval
+} else if (typeof window !== 'undefined' && window.REACT_UTILS_INJECTION) {
+  inj = window.REACT_UTILS_INJECTION;
+  delete window.REACT_UTILS_INJECTION;
 } else {
   // Otherwise, a bunch of dependent stuff will easily fail in non-standard
   // environments, where no client-side initialization is performed. Like tests,
@@ -41,12 +44,3 @@ 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,15 +8,13 @@ import { GlobalStateProvider } from '@dr.pogodin/react-global-state';
 import { createRoot, hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
-import getInj, { setInj } from './getInj';
+import getInj 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,15 +6,7 @@ import type ServerT from './server';
 
 const server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;
 
-// 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;
-}
+const client = server ? undefined : require('./client').default;
 
 export { default as api } from 'axios';
 export * as PT from 'prop-types';

package/src/shared/components/selectors/common.ts

@@ -31,7 +31,7 @@ export type OptionT<NameT> = {
   value: ValueT;
 };
 
-export type OptionsT<NameT> = Array<OptionT<NameT> | ValueT>;
+export type OptionsT<NameT> = Readonly<Array<OptionT<NameT> | ValueT>>;
 
 export type PropsT<
   NameT,

package/src/shared/utils/globalState.ts

@@ -13,6 +13,12 @@ export type InjT = {
   ISTATE?: unknown;
 };
 
+declare global {
+  interface Window {
+    REACT_UTILS_INJECTION?: InjT;
+  }
+}
+
 export interface SsrContextT<StateT> extends SsrContext<StateT> {
   chunkGroups: ChunkGroupsT;
   chunks: string[];

package/src/shared/utils/splitComponent.tsx

@@ -22,23 +22,15 @@ import {
   getBuildInfo,
 } from './isomorphy';
 
-// 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.
+// 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 cachedClientChunkGroups: ChunkGroupsT | undefined;
+let clientChunkGroups: ChunkGroupsT;
 
-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;
+if (IS_CLIENT_SIDE) {
+  // eslint-disable-next-line global-require
+  clientChunkGroups = require('client/getInj').default().CHUNK_GROUPS || {};
 }
 
 const refCounts: { [path: string]: number } = {};
@@ -193,7 +185,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, getClientChunkGroups());
+  if (IS_CLIENT_SIDE) assertChunkName(chunkName, clientChunkGroups);
 
   // The correct usage of splitComponent() assumes a single call per chunk.
   if (usedChunkNames.has(chunkName)) {
@@ -208,7 +200,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, getClientChunkGroups(), false);
+      await bookStyleSheets(chunkName, clientChunkGroups, false);
     }
 
     const Wrapper = forwardRef((
@@ -226,8 +218,8 @@ export default function splitComponent<
       // This takes care about stylesheets management every time an instance of
       // this component is mounted / unmounted.
       useInsertionEffect(() => {
-        bookStyleSheets(chunkName, getClientChunkGroups(), true);
-        return () => freeStyleSheets(chunkName, getClientChunkGroups());
+        bookStyleSheets(chunkName, clientChunkGroups, true);
+        return () => freeStyleSheets(chunkName, clientChunkGroups);
       }, []);
 
       return (