@dr.pogodin/react-utils 1.41.4 → 1.41.5

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import type { Link, LinkProps, NavLink, NavLinkProps } from 'react-router-dom';
+import type { Link, LinkProps, NavLink, NavLinkProps } from 'react-router';
 import './style.scss';
 type LinkT = typeof Link;
 type NavLinkT = typeof NavLink;

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

@@ -5,7 +5,7 @@
  * - User opts to open the reference in a new tab;
  * - User explicitely opts to use <a>.
  */
-import { type LinkProps } from 'react-router-dom';
+import { type LinkProps } from 'react-router';
 import { type PropsT as GenericLinkPropsT } from './GenericLink';
 type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;
 declare const Link: React.FunctionComponent<PropsT>;

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

@@ -1,4 +1,4 @@
-import { type NavLinkProps } from 'react-router-dom';
+import { type NavLinkProps } from 'react-router';
 import { type PropsT as GenericLinkPropsT } from './GenericLink';
 type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;
 declare const NavLink: React.FunctionComponent<PropsT>;

package/config/jest/resolver.js

@@ -1,10 +1,12 @@
 module.exports = (path, options) => {
+  const ops = { ...options };
+
   // Appending "development" option we ensure that Jest tests use development
   // version of the library's build for browsers, which for example contains
   // "data-testid" attributes (they are optimized-out of production builds).
-  if (options.conditions && !options.conditions.includes('development')) {
-    options.conditions.push('development');
+  if (ops.conditions && !ops.conditions.includes('development')) {
+    ops.conditions = [...ops.conditions, 'development'];
   }
 
-  return options.defaultResolver(path, { ...options });
+  return options.defaultResolver(path, ops);
 };

package/config/jest/setup.js

@@ -1,3 +1,13 @@
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable global-require, import/no-extraneous-dependencies */
+/* global globalThis */
 
 import 'raf/polyfill';
+
+// TODO: This is a temporary polyfill necessary for react-router,
+// as JSDom does not provide TextEncoder, see:
+// https://github.com/remix-run/react-router/issues/12363
+if (!globalThis.TextEncoder || !globalThis.TextDecoder) {
+  const { TextDecoder, TextEncoder } = require('node:util');
+  globalThis.TextEncoder = TextEncoder;
+  globalThis.TextDecoder = TextDecoder;
+}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.41.4",
+  "version": "1.41.5",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -30,25 +30,25 @@
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
-    "qs": "^6.13.1",
+    "qs": "^6.14.0",
     "raf": "^3.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.28.1",
+    "react-helmet-async": "^2.0.5",
+    "react-router": "^7.1.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
-    "uuid": "^11.0.4",
+    "uuid": "^11.0.5",
     "winston": "^3.17.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
     "@babel/cli": "^7.26.4",
     "@babel/core": "^7.26.0",
-    "@babel/eslint-parser": "^7.25.9",
+    "@babel/eslint-parser": "^7.26.5",
     "@babel/eslint-plugin": "^7.25.9",
     "@babel/node": "^7.26.0",
     "@babel/plugin-transform-runtime": "^7.25.9",
@@ -61,7 +61,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.6.0",
     "@tsconfig/recommended": "^1.0.8",
     "@types/compression": "^1.7.5",
     "@types/config": "^3.3.5",
@@ -74,9 +74,8 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^19.0.4",
-    "@types/react-dom": "^19.0.2",
-    "@types/react-helmet": "^6.1.11",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
     "@types/serve-favicon": "^2.5.7",
@@ -94,36 +93,36 @@
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-jest": "^28.11.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.15.3",
+    "memfs": "^4.17.0",
     "mini-css-extract-plugin": "^2.9.2",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.16.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.83.1",
+    "sass": "^1.83.4",
     "sass-loader": "^16.0.4",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
-    "stylelint": "^16.12.0",
+    "stylelint": "^16.13.2",
     "stylelint-config-standard-scss": "^14.0.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
-    "tstyche": "^3.3.1",
-    "typed-scss-modules": "^8.1.0",
+    "tstyche": "^3.5.0",
+    "typed-scss-modules": "^8.1.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.19.1",
+    "typescript-eslint": "^8.20.0",
     "webpack": "^5.97.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",

package/src/client/index.tsx

@@ -2,12 +2,12 @@
 /* global document */
 
 import { type ComponentType } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
+import { BrowserRouter } from 'react-router';
 
 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';
 
 type OptionsT = {
@@ -28,13 +28,10 @@ export default function Launch(
   if (!container) throw Error('Failed to find container for React app');
   const scene = (
     <GlobalStateProvider initialState={getInj().ISTATE || options.initialState}>
-      <BrowserRouter
-        future={{
-          v7_relativeSplatPath: true,
-          v7_startTransition: true,
-        }}
-      >
-        <Application />
+      <BrowserRouter>
+        <HelmetProvider>
+          <Application />
+        </HelmetProvider>
       </BrowserRouter>
     </GlobalStateProvider>
   );

package/src/server/renderer.tsx

@@ -27,9 +27,9 @@ import {
 import config from 'config';
 import forge from 'node-forge';
 
-import { type PipeableStream, renderToPipeableStream } from 'react-dom/server';
-import { Helmet } from 'react-helmet';
-import { StaticRouter } from 'react-router-dom/server';
+import { prerenderToNodeStream } from 'react-dom/static';
+import { HelmetProvider } from 'react-helmet-async';
+import { StaticRouter } from 'react-router';
 import serializeJs from 'serialize-javascript';
 import { type BuildInfoT, setBuildInfo } from 'utils/isomorphy/buildInfo';
 
@@ -403,7 +403,7 @@ export default function factory(
         prepareCipher(buildInfo.key) as Promise<any>,
       ]);
 
-      let helmet;
+      let helmet: any;
 
       // Gets the mapping between code chunk names and their asset files.
       // These data come from the Webpack compilation, either from the stats
@@ -426,7 +426,7 @@ export default function factory(
       const App = ops.Application;
       let appHtmlMarkup: string = '';
       const ssrContext = new ServerSsrContext(req, chunkGroups, initialState);
-      let stream: PipeableStream;
+      let stream: NodeJS.ReadableStream;
       if (App) {
         const ssrStart = Date.now();
 
@@ -436,30 +436,26 @@ export default function factory(
 
         const renderPass = async () => {
           ssrContext.chunks = [];
-          return new Promise<PipeableStream>((resolve, reject) => {
-            // TODO: pipeableStream has .abort() method,
-            // and we should wire it up to the SSR timeout below.
-            const pipeableStream = renderToPipeableStream(
-              <GlobalStateProvider
-                initialState={ssrContext.state}
-                ssrContext={ssrContext}
-              >
-                <StaticRouter
-                  future={{
-                    v7_relativeSplatPath: true,
-                    v7_startTransition: true,
-                  }}
-                  location={req.url}
-                >
+
+          // TODO: prerenderToNodeStream has (abort) "signal" option,
+          // and we should wire it up to the SSR timeout below.
+          const helmetContext = {};
+          const { prelude } = await prerenderToNodeStream(
+            <GlobalStateProvider
+              initialState={ssrContext.state}
+              ssrContext={ssrContext}
+            >
+              <StaticRouter location={req.url}>
+                <HelmetProvider context={helmetContext}>
                   <App2 />
-                </StaticRouter>
-              </GlobalStateProvider>,
-              {
-                onAllReady: () => resolve(pipeableStream),
-                onError: reject,
-              },
-            );
-          });
+                </HelmetProvider>
+              </StaticRouter>
+            </GlobalStateProvider>,
+            { onError: (error) => { throw error; } },
+          );
+          ({ helmet } = helmetContext as any);
+
+          return prelude;
         };
 
         let ssrRound = 0;
@@ -492,16 +488,15 @@ export default function factory(
 
         ops.logger!.log(ssrContext.dirty ? 'warn' : 'info', logMsg);
 
-        stream!.pipe(new Writable({
-          write: (chunk, _, done) => {
-            appHtmlMarkup += chunk.toString();
-            done();
-          },
-        }));
-
-        /* This takes care about server-side rendering of page title and meta tags
-        * (still demands injection into HTML template, which happens below). */
-        helmet = Helmet.renderStatic();
+        await new Promise((ready) => {
+          stream!.pipe(new Writable({
+            destroy: ready,
+            write: (chunk, _, done) => {
+              appHtmlMarkup += chunk.toString();
+              done();
+            },
+          }));
+        });
       }
 
       /* Encrypts data to be injected into HTML.

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

@@ -5,7 +5,7 @@ import type {
   LinkProps,
   NavLink,
   NavLinkProps,
-} from 'react-router-dom';
+} from 'react-router';
 
 import './style.scss';
 
@@ -112,6 +112,7 @@ const GenericLink = ({
   return (
     <L
       className={className}
+      discover="none"
       // disabled
       onMouseDown={onMouseDown}
       replace={replace}

package/src/shared/components/Link.tsx

@@ -6,7 +6,7 @@
  * - User explicitely opts to use <a>.
  */
 
-import { type LinkProps, Link as RrLink } from 'react-router-dom';
+import { type LinkProps, Link as RrLink } from 'react-router';
 
 import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 

package/src/shared/components/MetaTags.tsx

@@ -6,7 +6,7 @@ import {
   useMemo,
 } from 'react';
 
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 type PropsT = {
   children?: ReactNode;

package/src/shared/components/NavLink.tsx

@@ -1,4 +1,4 @@
-import { type NavLinkProps, NavLink as RrNavLink } from 'react-router-dom';
+import { type NavLinkProps, NavLink as RrNavLink } from 'react-router';
 
 import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 

package/src/shared/utils/jest/E2eSsrEnv.ts

@@ -37,6 +37,8 @@ import type {
   JestEnvironmentConfig,
 } from '@jest/environment';
 
+import { setBuildInfo } from '../isomorphy/buildInfo';
+
 export default class E2eSsrEnv extends JsdomEnv {
   pragmas: Record<string, string | string[]>;
 
@@ -232,6 +234,22 @@ export default class E2eSsrEnv extends JsdomEnv {
   async setup() {
     await super.setup();
     await this.runWebpack();
+
+    // NOTE: It is possible that the Webpack run above, and the SSR run below
+    // load different versions of the same module (CommonJS, and ES), and it may
+    // cause very confusing problems (e.g. see:
+    // https://github.com/birdofpreyru/react-utils/issues/413).
+    // It seems we can't reset the cache of ES modules, and Jest's module reset
+    // does not reset modules loaded in this enviroment module, and also only
+    // replacing entire cache object by and empty {} seems to help (in contrast
+    // to deleting all entries by their keys, as it is done within .teardown()
+    // method below). Thus, for now we do this as a hotfix, and we also reset
+    // build info to undefined, because ES module version not beeing reset
+    // triggers an error on the subsequent test using the environment.
+    // TODO: Look for a cleaner solution.
+    require.cache = {};
+    setBuildInfo(undefined, true);
+
     if (this.withSsr) await this.runSsr();
     this.global.REACT_UTILS_FORCE_CLIENT_SIDE = true;
   }