@dr.pogodin/react-utils 1.26.2 → 1.26.4

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

@@ -4,7 +4,7 @@ declare const server: typeof ServerT | null;
 declare const client: any;
 export { default as api } from 'axios';
 export * as PT from 'prop-types';
-export { default as Rgs, type API as RgsApi, getGlobalState, GlobalStateProvider, useAsyncCollection, useAsyncData, useGlobalState, } from '@dr.pogodin/react-global-state';
+export { type AsyncCollectionLoaderT, type AsyncDataEnvelopeT, type AsyncDataLoaderT, type ForceT, type UseAsyncDataOptionsT, type UseAsyncDataResT, type UseGlobalStateResT, type ValueOrInitializerT, getGlobalState, GlobalStateProvider, useAsyncCollection, useAsyncData, useGlobalState, withGlobalStateType, } from '@dr.pogodin/react-global-state';
 export { BaseModal, Button, Checkbox, Dropdown, Input, Link, PageLayout, MetaTags, Modal, NavLink, ScalableRect, Throbber, WithTooltip, YouTubeVideo, } from './shared/components';
 export { type Theme, config, Barrier, Emitter, isomorphy, getSsrContext, JU, Semaphore, splitComponent, themed, ThemeProvider, time, webpack, withRetries, } from './shared/utils';
 export { client, server };

package/config/webpack/app-development.d.ts

@@ -1,8 +1,10 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 import { type OptionsT as BaseOptionsT } from './app-base';
 type OptionsT = BaseOptionsT & {
     dontUseHmr?: boolean;
     dontUseReactGlobalStateDebugging?: boolean;
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
 };
 /**
  * @param ops

package/config/webpack/app-development.js

@@ -28,10 +28,7 @@ function configFactory(ops) {
         entry.push('webpack-hot-middleware/client?reload=true');
     entry.push(...Array.isArray(o.entry) ? o.entry : [o.entry]);
     const plugins = [
-        new mini_css_extract_plugin_1.default({
-            chunkFilename: '[id].css',
-            filename: '[id].css',
-        }),
+        new mini_css_extract_plugin_1.default(Object.assign({ chunkFilename: '[id].css', filename: '[id].css' }, ops.cssExtractionOptions)),
         new webpack_1.default.DefinePlugin({
             'process.env.BABEL_ENV': JSON.stringify('development'),
             'process.env.DEV_TOOLS': JSON.stringify(true),

package/config/webpack/app-production.d.ts

@@ -3,9 +3,12 @@
  * @module webpack/app-production
  * @desc Production Webpack configuration for applications.
  */
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { type Configuration } from 'webpack';
 import { type OptionsT as BaseOptionsT } from './app-base';
-type OptionsT = BaseOptionsT;
+type OptionsT = BaseOptionsT & {
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
+};
 /**
  * @param {object} ops
  * @param {string} ops.context Base URL for resolution of relative config paths.

package/config/webpack/app-production.js

@@ -46,10 +46,7 @@ function configFactory(ops) {
                 'process.env.BABEL_ENV': JSON.stringify('production'),
                 'process.env.NODE_ENV': JSON.stringify('production'),
             }),
-            new mini_css_extract_plugin_1.default({
-                chunkFilename: '[contenthash].css',
-                filename: '[contenthash].css',
-            }),
+            new mini_css_extract_plugin_1.default(Object.assign({ chunkFilename: '[contenthash].css', filename: '[contenthash].css' }, ops.cssExtractionOptions)),
         ],
     });
     return res;

package/config/webpack/lib-base.d.ts

@@ -1,8 +1,10 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { type Configuration } from 'webpack';
 export type OptionsT = {
     babelEnv: string;
     babelLoaderOptions?: object;
     context: string;
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
     cssLocalIdent?: string;
     dontUseProgressPlugin?: boolean;
     entry: string | string[];

package/config/webpack/lib-base.js

@@ -17,7 +17,7 @@ const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
  */
 function configFactory(ops) {
     const plugins = [
-        new mini_css_extract_plugin_1.default({ filename: 'style.css' }),
+        new mini_css_extract_plugin_1.default(Object.assign({ filename: 'style.css' }, ops.cssExtractionOptions)),
     ];
     if (!ops.dontUseProgressPlugin)
         plugins.push(new webpack_1.ProgressPlugin());

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.26.2",
+  "version": "1.26.4",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,10 +12,10 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.6",
-    "@dr.pogodin/react-global-state": "^0.10.0-alpha.4",
+    "@dr.pogodin/react-global-state": "^0.10.0-alpha.5",
     "@dr.pogodin/react-themes": "^1.5.1",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.5.1",
+    "axios": "^1.6.0",
     "commander": "^11.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.9",
@@ -36,7 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
     "request-ip": "^3.3.0",
     "rimraf": "^5.0.5",
     "serialize-javascript": "^6.0.1",
@@ -68,12 +68,12 @@
     "@types/cookie-parser": "^1.4.5",
     "@types/csurf": "^1.11.4",
     "@types/express": "^4.17.20",
-    "@types/jest": "^29.5.6",
+    "@types/jest": "^29.5.7",
     "@types/lodash": "^4.14.200",
     "@types/morgan": "^1.9.7",
     "@types/node-forge": "^1.3.8",
     "@types/pretty": "^2.0.2",
-    "@types/react": "^18.2.31",
+    "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@types/react-helmet": "^6.1.8",
     "@types/react-test-renderer": "^18.0.5",
@@ -83,13 +83,13 @@
     "@types/supertest": "^2.0.15",
     "@types/uuid": "^9.0.6",
     "@types/webpack": "^5.28.4",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "eslint": "^8.52.0",
@@ -97,7 +97,7 @@
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.4.3",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -116,7 +116,7 @@
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.69.4",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "sitemap": "^7.1.1",
     "stylelint": "^15.11.0",

package/src/index.ts

@@ -12,13 +12,20 @@ export { default as api } from 'axios';
 export * as PT from 'prop-types';
 
 export {
-  default as Rgs,
-  type API as RgsApi,
+  type AsyncCollectionLoaderT,
+  type AsyncDataEnvelopeT,
+  type AsyncDataLoaderT,
+  type ForceT,
+  type UseAsyncDataOptionsT,
+  type UseAsyncDataResT,
+  type UseGlobalStateResT,
+  type ValueOrInitializerT,
   getGlobalState,
   GlobalStateProvider,
   useAsyncCollection,
   useAsyncData,
   useGlobalState,
+  withGlobalStateType,
 } from '@dr.pogodin/react-global-state';
 
 export {

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

@@ -65,11 +65,14 @@ const BaseButton: React.FunctionComponent<PropsT> = ({
       </Link>
     );
   }
+
   return (
     <div
       className={className}
       onClick={onClick}
-      onKeyDown={onClick}
+      onKeyDown={onClick && ((e) => {
+        if (e.key === 'Enter') onClick(e);
+      })}
       onMouseDown={onMouseDown}
       role="button"
       tabIndex={0}

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

@@ -20,10 +20,10 @@ type PropsT = {
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
 const Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (
-  <span className={theme.container} styleName="container">
-    <span className={theme.circle} styleName="circle" />
-    <span className={theme.circle} styleName="circle" />
-    <span className={theme.circle} styleName="circle" />
+  <span className={theme.container}>
+    <span className={theme.circle} />
+    <span className={theme.circle} />
+    <span className={theme.circle} />
   </span>
 );
 
@@ -31,6 +31,7 @@ const ThemedThrobber = themed(
   Throbber,
   'Throbber',
   [
+    'bouncing',
     'circle',
     'container',
   ],

package/src/shared/utils/globalState.ts

@@ -1,6 +1,6 @@
 import type { Request } from 'express';
 
-import RGS, { type API, type SsrContext } from '@dr.pogodin/react-global-state';
+import { type SsrContext, withGlobalStateType } from '@dr.pogodin/react-global-state';
 
 export type ChunkGroupsT = {
   [chunkName: string]: string[];
@@ -22,7 +22,7 @@ export interface SsrContextT<StateT> extends SsrContext<StateT> {
 
 const {
   getSsrContext,
-} = (RGS as unknown) as API<unknown, SsrContextT<unknown>>;
+} = withGlobalStateType<unknown, SsrContextT<unknown>>();
 
 export {
   getSsrContext,