@dr.pogodin/react-utils 1.47.0-alpha.1 → 1.47.0-alpha.11

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.47.0-alpha.1",
+  "version": "1.47.0-alpha.11",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,31 +12,30 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.8",
     "@dr.pogodin/csurf": "^1.16.6",
     "@dr.pogodin/js-utils": "^0.1.4",
-    "@dr.pogodin/react-global-state": "^0.20.1",
+    "@dr.pogodin/react-global-state": "^0.21.1",
     "@dr.pogodin/react-helmet": "^3.0.4",
-    "@dr.pogodin/react-themes": "^1.9.3",
+    "@dr.pogodin/react-themes": "^1.9.4",
     "@jest/environment": "^30.2.0",
-    "axios": "^1.13.1",
+    "axios": "^1.13.2",
     "commander": "^14.0.2",
     "compression": "^1.8.1",
     "config": "^4.1.1",
     "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
     "cross-env": "^10.1.0",
-    "dayjs": "^1.11.18",
+    "dayjs": "^1.11.19",
     "express": "^5.1.0",
     "helmet": "^8.1.0",
     "http-status-codes": "^2.3.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "morgan": "^1.10.1",
-    "node-forge": "^1.3.1",
     "qs": "^6.14.0",
     "raf": "^3.4.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-router": "^7.9.5",
     "request-ip": "^3.3.0",
-    "rimraf": "^6.0.0",
+    "rimraf": "^6.1.0",
     "serialize-javascript": "^7.0.0",
     "serve-favicon": "^2.5.1",
     "source-map-support": "^0.5.21",
@@ -69,8 +68,8 @@
     "@types/express": "^5.0.5",
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
+    "@types/lodash-es": "^4.17.12",
     "@types/morgan": "^1.9.10",
-    "@types/node-forge": "^1.3.14",
     "@types/pretty": "^2.0.3",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
@@ -83,9 +82,9 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^30.2.0",
     "babel-loader": "^10.0.0",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "core-js": "^3.46.0",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
@@ -100,11 +99,10 @@
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.18.0",
-    "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.93.2",
+    "sass": "^1.93.3",
     "sass-loader": "^16.0.6",
-    "sitemap": "^8.0.2",
+    "sitemap": "^9.0.0",
     "source-map-loader": "^5.0.0",
     "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0",
@@ -122,30 +120,42 @@
     "workbox-webpack-plugin": "^7.3.0"
   },
   "engines": {
-    "node": ">=20",
-    "npm": ">=10"
+    "node": ">=22.21",
+    "npm": ">=10.9"
   },
-  "main": "./node-entry.js",
-  "source": "./src/index.ts",
+  "main": "./build/production/index.js",
   "types": "./build/types-code/index.d.ts",
   "exports": {
     ".": {
-      "browser": "./build/web/index.js",
+      "types": "./build/types-code/index.d.ts",
+      "webpack": "./build/web/index.js",
       "node": {
-        "webpack": "./build/web/index.js",
-        "default": "./node-entry.js"
+        "development": "./build/development/index.js",
+        "default": "./build/production/index.js"
       },
       "react-native": {
-        "default": "./node-entry.js",
+        "default": "./build/production/index.js",
         "types": "./build/types-code/index.d.ts"
       }
     },
+    "./client": {
+      "types": "./build/types-code/client/index.d.ts",
+      "default": "./build/web/client/index.js"
+    },
     "./config/*": "./config/*.js",
     "./config/eslint/*": "./config/eslint/*.mjs",
     "./config/*.json": "./config/*.json",
-    "./global-styles": "./build/web/styles/global.scss",
-    "./jest": "./build/production/shared/utils/jest/index.js",
+    "./global-styles.scss": "./build/web/styles/global.scss",
+    "./jest": {
+      "types": "./build/types-code/shared/utils/jest/index.d.ts",
+      "default": "./build/production/shared/utils/jest/index.js"
+    },
     "./mixins": "./build/web/styles/mixins.scss",
+    "./server": {
+      "types": "./build/types-code/server/index.d.ts",
+      "development": "./build/development/server/index.js",
+      "default": "./build/production/server/index.js"
+    },
     "./build/development/client/init": "./build/development/client/init.js",
     "./build/production/client/init": "./build/production/client/init.js",
     "./jest-e2e-ssr-env": "./build/production/shared/utils/jest/E2eSsrEnv.js"
@@ -176,8 +186,8 @@
   "scripts": {
     "build": "rimraf build && npm run build:configs && npm run build:types-scss && npm run build:types-code && npm run build:web && npm run build:dev && npm run build:prod",
     "build:configs": "tsc --project tsconfig.configs.json",
-    "build:dev": "node bin/build -i build/web -t development --lib --webpack-config webpack.config.ts --no-webpack",
-    "build:prod": "node bin/build -i build/web -t production --lib --webpack-config webpack.config.ts --no-webpack",
+    "build:dev": "node bin/build -i build/web -t development --lib --babel-config babel.module.config.js --webpack-config webpack.config.ts --no-webpack",
+    "build:prod": "node bin/build -i build/web -t production --lib --babel-config babel.module.config.js --webpack-config webpack.config.ts --no-webpack",
     "build:types-code": "rimraf build/types-code && tsc --project tsconfig.types.json && tsc-alias -p tsconfig.types.json",
     "build:types-scss": "rimraf build/types-scss && typed-scss-modules .",
     "build:web": "rimraf build/web && babel ./src --config-file ./babel.libweb.config.js --out-dir build/web -x .js,.jsx,.ts,.tsx --source-maps --copy-files",

package/types.d.ts

@@ -4,6 +4,7 @@ declare var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
 declare var REACT_UTILS_WEBPACK_BUNDLE: boolean | undefined;
 declare var REACT_UTILS_LIBRARY_LOADED: boolean | undefined;
 declare var REACT_UTILS_FORCE_CLIENT_SIDE: boolean | undefined;
+declare var SCENE_INIT_PROMISE: Promise<void> | undefined;
 /* eslint-enable no-var */
 
 declare module '@babel/register/experimental-worker' {
@@ -19,12 +20,6 @@ declare module '@babel/register/experimental-worker' {
   export default register;
 }
 
-declare module 'node-forge/lib/forge' {
-  import F from 'node-forge';
-
-  export default F;
-}
-
 declare module '*.png' {
   const path: string;
   export default path;

package/node-entry.js

@@ -1,15 +0,0 @@
-// TODO: We should re-visit, if this can be simplified / optimized?
-/* global global, module, process, require */
-
-// This permits to load the library in react-native, or other environment that
-// does not have __dirname global. It probably breaks a few node-specific lib
-// pieces, but that does not seem to prevent more relevant parts from working.
-if (typeof __dirname === 'undefined') {
-  global.__dirname = ''; // eslint-disable-line no-underscore-dangle
-}
-
-// Again, for react-native, and maybe some other environments, we need
-// to have no dynamic requires below (i.e. can't do require(`./build/${env}`)).
-// eslint-disable-next-line import/no-commonjs
-module.exports = process.env.NODE_ENV === 'production'
-  ? require('./build/production') : require('./build/development');

package/src/client/getInj.ts

@@ -1,51 +0,0 @@
-// Encapsulates retrieval of server-side data injection into HTML template.
-
-/* global document */
-
-// Note: this way, only required part of "node-forge": AES, and some utils,
-// is bundled into client-side code.
-import forge from 'node-forge/lib/forge';
-
-// eslint-disable-next-line import/no-unassigned-import
-import 'node-forge/lib/aes';
-
-import type { InjT } from 'utils/globalState';
-
-import { getBuildInfo } from 'utils/isomorphy/buildInfo';
-
-// Safeguard is needed here, because the server-side version of Docusaurus docs
-// is compiled (at least now) with settings suggesting it is a client-side
-// environment, but there is no document.
-let inj: InjT = {};
-
-const metaElement: HTMLMetaElement | null = typeof document === 'undefined'
-  ? null : document.querySelector('meta[itemprop="drpruinj"]');
-
-if (metaElement) {
-  metaElement.remove();
-  let data = forge.util.decode64(metaElement.content);
-
-  const { key } = getBuildInfo();
-  const d = forge.cipher.createDecipher('AES-CBC', key);
-  d.start({ iv: data.slice(0, key.length) });
-  d.update(forge.util.createBuffer(data.slice(key.length)));
-  d.finish();
-
-  data = forge.util.decodeUtf8(d.output.data);
-
-  // TODO: Double-check, if there is a safer alternative to parse it?
-  // eslint-disable-next-line no-eval
-  inj = eval(`(${data})`) as InjT;
-} 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,
-  // Docusaurus examples, etc.
-  inj = {};
-}
-
-export default function getInj(): InjT {
-  return inj;
-}

package/src/client/index.tsx

@@ -1,43 +0,0 @@
-// Initialization of client-side code.
-/* global document */
-
-import type { ComponentType } from 'react';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { HelmetProvider } from '@dr.pogodin/react-helmet';
-import { BrowserRouter } from 'react-router';
-
-import { GlobalStateProvider } from '@dr.pogodin/react-global-state';
-
-import getInj from './getInj';
-
-type OptionsT = {
-  dontHydrate?: boolean;
-  initialState?: unknown;
-};
-
-/**
- * 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 {
-  const container = document.getElementById('react-view');
-  if (!container) throw Error('Failed to find container for React app');
-  const scene = (
-    <GlobalStateProvider initialState={getInj().ISTATE ?? options.initialState}>
-      <BrowserRouter>
-        <HelmetProvider>
-          <Application />
-        </HelmetProvider>
-      </BrowserRouter>
-    </GlobalStateProvider>
-  );
-
-  if (options.dontHydrate) {
-    const root = createRoot(container);
-    root.render(scene);
-  } else hydrateRoot(container, scene);
-}

package/src/client/init.ts

@@ -1,52 +0,0 @@
-/**
- * Initialization of client-side environment.
- */
-
-/* global window */
-
-import { type BuildInfoT, getBuildInfo } from 'utils/isomorphy/buildInfo';
-
-const buildInfo = getBuildInfo();
-
-// TODO: Should be moved into buildInfo module?
-declare global {
-  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-  interface Window {
-    __DEV_BUILD_INFO__: BuildInfoT | undefined;
-  }
-}
-
-declare const BUILD_INFO: BuildInfoT | undefined;
-
-if (process.env.NODE_ENV !== 'production') {
-  // eslint-disable-next-line no-console
-  console.warn('Dev mode: "BUILD_INFO" attached to the global "window"');
-
-  // eslint-disable-next-line no-underscore-dangle
-  window.__DEV_BUILD_INFO__ = BUILD_INFO;
-}
-
-/* TODO: A proper logger should be moved to `@dr.pogodin/react-utils`. */
-const { useServiceWorker } = buildInfo;
-if (useServiceWorker) {
-  const { navigator } = window;
-  if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-      void (async () => {
-        try {
-          // Note: no matter the "publicPath", we want to serve the service worker
-          // from the web app root, to allow it control any and all pages of the
-          // web app (otherwise, it will be restricted to the scope of its path).
-          // The server takes it into account.
-          const reg = await navigator
-            .serviceWorker.register('/__service-worker.js');
-          // eslint-disable-next-line no-console
-          console.log('SW registered:', reg);
-        } catch (err) {
-          // eslint-disable-next-line no-console
-          console.log('SW registration failed:', err);
-        }
-      })();
-    });
-  }
-}

package/src/index.ts

@@ -1,79 +0,0 @@
-import 'styles/global.scss';
-
-import { webpack } from 'utils';
-
-import type * as ClientM from './client';
-import type * as ServerFactoryM from './server';
-
-// It is a safeguard against multiple instances / versions of the library
-// being loaded into environment by mistake (e.g. because of different
-// packages pinning down different exact versions of the lib, thus preventing
-// a proper dedupe and using a single common library version).
-if (global.REACT_UTILS_LIBRARY_LOADED) {
-  throw Error('React utils library is already loaded');
-} else global.REACT_UTILS_LIBRARY_LOADED = true;
-
-// TODO: This is a rapid workaround to get rid of __dirname. I guess, later
-// we'll re-implement requireWeak() to accept import.meta.url directly, and
-// this workaround won't be needed.
-let dirname = import.meta.url;
-dirname = dirname.slice(5, dirname.lastIndexOf('/'));
-
-const server = webpack.requireWeak<typeof ServerFactoryM>('./server', dirname);
-
-const client = server
-  ? undefined
-
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  : (require('./client') as typeof ClientM).default;
-
-export {
-  type AsyncCollectionT,
-  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 'components';
-
-export {
-  type BeforeRenderResT,
-  type BeforeRenderT,
-  type ConfigT,
-  type ServerSsrContext,
-  type ServerT,
-} from './server';
-
-export {
-  assertEmptyObject,
-  config,
-  Barrier,
-  Cached,
-  Emitter,
-  isomorphy,
-  getSsrContext,
-  type Listener,
-  type ObjectKey,
-  Semaphore,
-  splitComponent,
-  type Theme,
-  themed,
-  ThemeProvider,
-  time,
-  webpack,
-  withRetries,
-} from 'utils';
-
-export { client, server };

package/src/server/Cache.ts

@@ -1,61 +0,0 @@
-type CachedItemT<DatumT> = {
-  data: DatumT;
-  size: number;
-  timestamp: number;
-};
-
-/**
- * Implements the static cache.
- */
-export default class Cache<DatumT> {
-  private items: Record<string, CachedItemT<DatumT>> = {};
-
-  private size = 0;
-
-  constructor(private maxSize: number) { }
-
-  /**
-   * Cache lookup.
-   * @param key Item key to look for.
-   * @param [maxage=Number.MAX_VALUE] Optional. The maximum age of
-   *  cached item to serve. Default to infinite.
-   * @returns Cached item, or null if the item is absent in cache,
-   *  or stale.
-   */
-  get({
-    key,
-    maxage = Number.MAX_VALUE,
-  }: {
-    key: string;
-    maxage?: number;
-  }): DatumT | null {
-    const item = this.items[key];
-    return item && Date.now() - item.timestamp < maxage ? item.data : null;
-  }
-
-  /**
-   * Adds item to cache.
-   * @param data Item to add.
-   * @param key Key to store the item at.
-   * @param size Byte size of the item.
-   */
-  add(data: DatumT, key: string, size: number): void {
-    const cached = this.items[key];
-    if (cached) this.size -= cached.size;
-
-    this.items[key] = { data, size, timestamp: Date.now() };
-    this.size += size;
-
-    if (this.size > this.maxSize) {
-      const entries = Object.entries(this.items);
-      entries.sort((a, b) => a[1].timestamp - b[1].timestamp);
-
-      for (const entry of entries) {
-        const [itemKey, item] = entry;
-        delete this.items[itemKey];
-        this.size -= item.size;
-        if (this.size < this.maxSize / 2) break;
-      }
-    }
-  }
-}