@dr.pogodin/react-utils 1.35.2 → 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,7 +1,7 @@
 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';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.35.2",
+  "version": "1.35.3",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"

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';

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 (