@dr.pogodin/react-utils 1.40.10 → 1.40.12

package/build/types-code/server/utils/errors.d.ts

@@ -80,7 +80,7 @@ export declare function newError(message: string, statusCode?: CODES): ErrorWith
 /**
  * Throws an error with given message and HTTP status code.
  */
-export declare function fail(message: string, statusCode?: CODES): never;
+export declare function fail(message: string, statusCode?: CODES): Error;
 /**
  * ```js
  * import { server } from '@dr.pogodin/react-utils';

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

@@ -1,9 +1,9 @@
-import { type ReactNode } from 'react';
-import { type Link } from 'react-router-dom';
+import type { ReactNode } from 'react';
+import type { Link, LinkProps, NavLink, NavLinkProps } from 'react-router-dom';
 import './style.scss';
+type LinkT = typeof Link;
+type NavLinkT = typeof NavLink;
 type ToT = Parameters<typeof Link>[0]['to'];
-interface LinkI {
-}
 export type PropsT = {
     children?: ReactNode;
     className?: string;
@@ -14,8 +14,8 @@ export type PropsT = {
     onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;
     openNewTab?: boolean;
     replace?: boolean;
-    routerLinkType: LinkI;
-    to?: ToT;
+    routerLinkType: LinkT | NavLinkT;
+    to: ToT;
 };
 /**
  * The `<Link>` component, and almost identical `<NavLink>` component, are
@@ -57,5 +57,5 @@ export type PropsT = {
  * determining if the location matches the current URL. See the `<Route strict>`
  * documentation for more information.
  */
-declare const GenericLink: React.FunctionComponent<PropsT>;
+declare const GenericLink: ({ children, className, disabled, enforceA, keepScrollPosition, onClick, onMouseDown, openNewTab, replace, routerLinkType, to, ...rest }: (LinkProps | NavLinkProps) & PropsT) => ReactNode;
 export default GenericLink;

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

@@ -5,7 +5,8 @@
  * - 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 PropsT as GenericLinkPropsT } from './GenericLink';
-type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'>;
+type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;
 declare const Link: React.FunctionComponent<PropsT>;
 export default Link;

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

@@ -1,7 +1,11 @@
-import { type ReactNode } from 'react';
+import { type Context as ContextT, type FunctionComponent, type ReactNode } from 'react';
 type PropsT = {
     children?: ReactNode;
     description: string;
+    extraMetaTags?: Array<{
+        content: string;
+        name: string;
+    }>;
     image?: string;
     siteName?: string;
     socialDescription?: string;
@@ -10,59 +14,11 @@ type PropsT = {
     url?: string;
 };
 /**
- * The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,
- * which helps to inject meta tags (page title, a brief content description,
- * and social media thumbnails) into generated pages.
- *
- * When `<MetaTags>` are nested within the app's component tree, meta tags
- * content injected by components encountered down the tree overrides tags
- * injected by previously encountered `<MetaTags>` components.
- *
- * **Children:** `<MetaTags>` children, if any, are rendered at the component's
- * location. The context passes down all meta tag properties of parent
- * `<MetaTag>` instances. These properties can fetched within children
- * hierarchy in the following way, thus facilitating tags modification by
- * children:
- * ```jsx
- * import { useContext } from 'react';
- * import { MetaTags } from '@dr.pogodin/react-utils';
- * export default function SampleComponent() {
- *   const { title, description, ...rest } = useContext(MetaTags.Context);
- *   // Do something with these props here, e.g. prefix the page title with
- *   // the component name:
- *   return (
- *     <MetaTags title={`Sample component - ${title}`} />
- *   );
- * }
- * ```
- * @param [props]
- * @param [props.description] Page description to use in
- * the `description` meta tag, and as a default description of Open Graph Tags.
- * @param [props.image] The absolute URL of thumbnail image to use
- * in Open Graph Tags (`twitter:image`, and `og:image`). By default these tags
- * are not injected.
- *
- * **BEWARE:** It must be a complete, absolute URL, including the correct
- * website domain and HTTP schema.
- *
- * @param [props.siteName]: The site name to use in `twitter:site`,
- * and `og:sitename` tags. By default these tags are not injected.
- *
- * @param [props.socialDescription] The site description to use in
- * `twitter:description` and `og:description` meta tags. By default the value of
- * `description` prop is used.
- * @param [props.socialTitle] The page title to use in
- * `twitter:title`, `og:title`, and `og:image:alt` tags. By default the value of
- * `title` prop is used. Also the `og:image:alt` tag is only injected if `image`
- * prop is present.
- *
- * @param props.title: The page name to use in the `<title>` tag.
- * It is also used as the default value of `socialTitle` prop.
- *
- * @param [props.url] The page URL to use in `og:url` tag.
- * By default the tag is not injected.
+ * Auxiliary wrapper around "react-helmet", which helps to inject meta tags
+ * (page title, a brief content description, and social media thumbnails) into
+ * generated pages.
  */
-declare const MetaTags: React.FunctionComponent<PropsT> & {
-    Context: React.Context<PropsT>;
+declare const MetaTags: FunctionComponent<PropsT> & {
+    Context: ContextT<PropsT>;
 };
 export default MetaTags;

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

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

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

@@ -5,7 +5,7 @@
  * @param [basePath]
  * @return Required module.
  */
-export declare function requireWeak(modulePath: string, basePath?: string): NodeJS.Module | null;
+export declare function requireWeak<Module extends NodeJS.Module>(modulePath: string, basePath?: string): Module | null;
 /**
  * Resolves specified module path with help of Babel's module resolver.
  * Yes, the function itself just returns its argument to the caller, but Babel

package/config/stylelint/default.js

@@ -14,6 +14,7 @@ module.exports = {
         'each',
         'extend',
         'for',
+        'forward',
         'include',
         'mixin',
         'use',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.40.10",
+  "version": "1.40.12",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -35,14 +35,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.27.0",
+    "react-router-dom": "^6.28.0",
     "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.2",
-    "winston": "^3.16.0"
+    "winston": "^3.17.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
@@ -95,10 +95,10 @@
     "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.8.3",
+    "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -106,14 +106,14 @@
     "mini-css-extract-plugin": "^2.9.2",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.80.6",
+    "sass": "^1.80.7",
     "sass-loader": "^16.0.3",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
@@ -121,10 +121,10 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
-    "tstyche": "^2.1.1",
+    "tstyche": "^3.0.0",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.12.2",
+    "typescript-eslint": "^8.14.0",
     "webpack": "^5.96.1",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",

package/src/client/index.tsx

@@ -28,7 +28,12 @@ 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 }}>
+      <BrowserRouter
+        future={{
+          v7_relativeSplatPath: true,
+          v7_startTransition: true,
+        }}
+      >
         <Application />
       </BrowserRouter>
     </GlobalStateProvider>

package/src/server/renderer.tsx

@@ -443,7 +443,10 @@ export default function factory(
                 ssrContext={ssrContext}
               >
                 <StaticRouter
-                  future={{ v7_relativeSplatPath: true }}
+                  future={{
+                    v7_relativeSplatPath: true,
+                    v7_startTransition: true,
+                  }}
                   location={req.url}
                 >
                   <App2 />

package/src/server/utils/errors.ts

@@ -101,7 +101,7 @@ export function newError(message: string, statusCode = CODES.INTERNAL_SERVER_ERR
 export function fail(
   message: string,
   statusCode: CODES = CODES.INTERNAL_SERVER_ERROR,
-): never {
+): Error {
   throw newError(message, statusCode);
 }
 

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

@@ -1,14 +1,18 @@
-/* global window */
+import type { ReactNode } from 'react';
 
-import { type ReactNode } from 'react';
-
-import { type Link, type NavLink } from 'react-router-dom';
+import type {
+  Link,
+  LinkProps,
+  NavLink,
+  NavLinkProps,
+} from 'react-router-dom';
 
 import './style.scss';
 
-type ToT = Parameters<typeof Link>[0]['to'];
+type LinkT = typeof Link;
+type NavLinkT = typeof NavLink;
 
-interface LinkI {}
+type ToT = Parameters<typeof Link>[0]['to'];
 
 export type PropsT = {
   children?: ReactNode;
@@ -20,8 +24,8 @@ export type PropsT = {
   onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;
   openNewTab?: boolean;
   replace?: boolean;
-  routerLinkType: LinkI;
-  to?: ToT;
+  routerLinkType: LinkT | NavLinkT;
+  to: ToT;
 };
 
 /**
@@ -64,7 +68,7 @@ export type PropsT = {
  * determining if the location matches the current URL. See the `<Route strict>`
  * documentation for more information.
  */
-const GenericLink: React.FunctionComponent<PropsT> = ({
+const GenericLink = ({
   children,
   className,
   disabled,
@@ -77,7 +81,7 @@ const GenericLink: React.FunctionComponent<PropsT> = ({
   routerLinkType,
   to,
   ...rest
-}) => {
+}: (LinkProps | NavLinkProps) & PropsT): ReactNode => {
   /* Renders Link as <a> element if:
    * - It is opted explicitely by `enforceA` prop;
    * - It should be opened in a new tab;
@@ -103,7 +107,7 @@ const GenericLink: React.FunctionComponent<PropsT> = ({
     );
   }
 
-  const L = routerLinkType as typeof NavLink;
+  const L = routerLinkType;
 
   return (
     <L

package/src/shared/components/Link.tsx

@@ -6,11 +6,11 @@
  * - User explicitely opts to use <a>.
  */
 
-import { Link as RrLink } from 'react-router-dom';
+import { type LinkProps, Link as RrLink } from 'react-router-dom';
 
 import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 
-type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'>;
+type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;
 
 const Link: React.FunctionComponent<PropsT> = (props) => (
   /* eslint-disable react/jsx-props-no-spreading */

package/src/shared/components/MetaTags.tsx

@@ -1,9 +1,20 @@
-import { type ReactNode, createContext, useMemo } from 'react';
+import {
+  type Context as ContextT,
+  type FunctionComponent,
+  type ReactNode,
+  createContext,
+  useMemo,
+} from 'react';
+
 import { Helmet } from 'react-helmet';
 
 type PropsT = {
   children?: ReactNode;
   description: string;
+  extraMetaTags?: Array<{
+    content: string;
+    name: string;
+  }>;
   image?: string;
   siteName?: string;
   socialDescription?: string;
@@ -18,63 +29,16 @@ const Context = createContext<PropsT>({
 });
 
 /**
- * The `<MetaTags>` component is an auxiliary wrapper around `react-helmet`,
- * which helps to inject meta tags (page title, a brief content description,
- * and social media thumbnails) into generated pages.
- *
- * When `<MetaTags>` are nested within the app's component tree, meta tags
- * content injected by components encountered down the tree overrides tags
- * injected by previously encountered `<MetaTags>` components.
- *
- * **Children:** `<MetaTags>` children, if any, are rendered at the component's
- * location. The context passes down all meta tag properties of parent
- * `<MetaTag>` instances. These properties can fetched within children
- * hierarchy in the following way, thus facilitating tags modification by
- * children:
- * ```jsx
- * import { useContext } from 'react';
- * import { MetaTags } from '@dr.pogodin/react-utils';
- * export default function SampleComponent() {
- *   const { title, description, ...rest } = useContext(MetaTags.Context);
- *   // Do something with these props here, e.g. prefix the page title with
- *   // the component name:
- *   return (
- *     <MetaTags title={`Sample component - ${title}`} />
- *   );
- * }
- * ```
- * @param [props]
- * @param [props.description] Page description to use in
- * the `description` meta tag, and as a default description of Open Graph Tags.
- * @param [props.image] The absolute URL of thumbnail image to use
- * in Open Graph Tags (`twitter:image`, and `og:image`). By default these tags
- * are not injected.
- *
- * **BEWARE:** It must be a complete, absolute URL, including the correct
- * website domain and HTTP schema.
- *
- * @param [props.siteName]: The site name to use in `twitter:site`,
- * and `og:sitename` tags. By default these tags are not injected.
- *
- * @param [props.socialDescription] The site description to use in
- * `twitter:description` and `og:description` meta tags. By default the value of
- * `description` prop is used.
- * @param [props.socialTitle] The page title to use in
- * `twitter:title`, `og:title`, and `og:image:alt` tags. By default the value of
- * `title` prop is used. Also the `og:image:alt` tag is only injected if `image`
- * prop is present.
- *
- * @param props.title: The page name to use in the `<title>` tag.
- * It is also used as the default value of `socialTitle` prop.
- *
- * @param [props.url] The page URL to use in `og:url` tag.
- * By default the tag is not injected.
+ * Auxiliary wrapper around "react-helmet", which helps to inject meta tags
+ * (page title, a brief content description, and social media thumbnails) into
+ * generated pages.
  */
-const MetaTags: React.FunctionComponent<PropsT> & {
-  Context: React.Context<PropsT>;
+const MetaTags: FunctionComponent<PropsT> & {
+  Context: ContextT<PropsT>;
 } = ({
   children,
   description,
+  extraMetaTags,
   image,
   siteName,
   socialDescription,
@@ -103,6 +67,20 @@ const MetaTags: React.FunctionComponent<PropsT> & {
     url,
   ]);
 
+  const extra: ReactNode[] = [];
+  if (extraMetaTags?.length) {
+    for (let i = 0; i < extraMetaTags.length; ++i) {
+      const { content, name } = extraMetaTags[i]!;
+      extra.push(
+        <meta
+          content={content}
+          name={name}
+          key={`extra-meta-tag-${i}`}
+        />,
+      );
+    }
+  }
+
   return (
     <>
       <Helmet>
@@ -132,6 +110,7 @@ const MetaTags: React.FunctionComponent<PropsT> & {
           siteName ? (<meta name="og:sitename" content={siteName} />) : null
         }
         { url ? (<meta name="og:url" content={url} />) : null }
+        {extra}
       </Helmet>
       {
         children ? (

package/src/shared/components/Modal/base-theme.scss

@@ -1,4 +1,4 @@
-@import "styles/mixins";
+@use "styles/mixins" as *;
 
 *,
 .context,

package/src/shared/components/NavLink.tsx

@@ -1,8 +1,8 @@
-import { NavLink as RrNavLink } from 'react-router-dom';
+import { type NavLinkProps, NavLink as RrNavLink } from 'react-router-dom';
 
 import GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';
 
-type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'>;
+type PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;
 
 const NavLink: React.FunctionComponent<PropsT> = (props) => (
   /* eslint-disable react/jsx-props-no-spreading */

package/src/shared/components/PageLayout/base-theme.scss

@@ -5,7 +5,7 @@
  * columns on left and right.
  */
 
-@import "styles/mixins";
+@use "styles/mixins" as *;
 
 *,
 .context,

package/src/shared/components/TextArea/style.scss

@@ -1,5 +1,4 @@
 @use "sass:color";
-@import "styles/mixins";
 
 *,
 .context,

package/src/shared/components/selectors/NativeDropdown/theme.scss

@@ -1,5 +1,3 @@
-@import "styles/mixins";
-
 *,
 .context,
 .ad.hoc {

package/src/shared/utils/webpack.ts

@@ -7,29 +7,34 @@ import { IS_CLIENT_SIDE } from './isomorphy';
  * @param [basePath]
  * @return Required module.
  */
-export function requireWeak(
+export function requireWeak<Module extends NodeJS.Module>(
   modulePath: string,
   basePath?: string,
-): NodeJS.Module | null {
+): Module | null {
   if (IS_CLIENT_SIDE) return null;
 
   try {
     /* eslint-disable no-eval */
     const { resolve } = eval('require')('path');
     const path = basePath ? resolve(basePath, modulePath) : modulePath;
-    const { default: def, ...named } = eval('require')(path);
+    const module = eval('require')(path) as Module;
     /* eslint-enable no-eval */
 
-    if (!def) return named;
+    if (!('default' in module)) return module;
 
-    Object.entries(named).forEach(([key, value]) => {
-      if (def[key]) {
-        if (def[key] !== value) {
+    const { default: def, ...named } = module;
+
+    const res = def as Module;
+
+    Object.entries(named).forEach(([name, value]) => {
+      const assigned = res[name as keyof Module];
+      if (assigned !== undefined) {
+        if (assigned !== value) {
           throw Error('Conflict between default and named exports');
         }
-      } else def[key] = value;
+      } else res[name as keyof Module] = value;
     });
-    return def;
+    return res;
   } catch {
     return null;
   }

package/src/styles/global.scss

@@ -1,6 +1,6 @@
 /* Global styles. */
 
-@import "_global/reset";
+@use "_global/reset";
 
 body {
   text-rendering: auto;

package/src/styles/mixins.scss

@@ -1,6 +1,6 @@
 /* Collection of standard mixins, being used all around. */
-@import "_mixins/fonts";
-@import "_mixins/media";
-@import "_mixins/typography";
+@forward "_mixins/fonts";
+@forward "_mixins/media";
+@forward "_mixins/typography";
 
 $zIndexOfDefaultModalOverlay: 998;