@dr.pogodin/react-utils 1.25.6 → 1.26.0

package/build/types-scss/__tests__/ts/config/stylename-generation/__assets__/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const sampleClassName: string;

package/build/types-scss/__tests__/ts/shared/components/NavLink/styles.scss.d.ts

@@ -0,0 +1 @@
+export declare const navLink: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentA/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentB/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/ComponentC/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/build/types-scss/__tests__/ts/shared/utils/splitComponent/__assets__/SampleScene/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const container: string;

package/build/types-scss/src/shared/components/Button/style.scss.d.ts

@@ -0,0 +1,6 @@
+export declare const active: string;
+export declare const ad: string;
+export declare const button: string;
+export declare const context: string;
+export declare const disabled: string;
+export declare const hoc: string;

package/build/types-scss/src/shared/components/Checkbox/theme.scss.d.ts

@@ -0,0 +1,6 @@
+export declare const ad: string;
+export declare const checkbox: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const label: string;

package/build/types-scss/src/shared/components/Dropdown/theme.scss.d.ts

@@ -0,0 +1,9 @@
+export declare const ad: string;
+export declare const arrow: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hiddenOption: string;
+export declare const hoc: string;
+export declare const label: string;
+export declare const option: string;
+export declare const select: string;

package/build/types-scss/src/shared/components/GenericLink/style.scss.d.ts

@@ -0,0 +1 @@
+export declare const link: string;

package/build/types-scss/src/shared/components/Input/theme.scss.d.ts

@@ -0,0 +1,6 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const input: string;
+export declare const label: string;

package/build/types-scss/src/shared/components/Modal/base-theme.scss.d.ts

@@ -0,0 +1,5 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const overlay: string;

package/build/types-scss/src/shared/components/PageLayout/base-theme.scss.d.ts

@@ -0,0 +1,6 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const mainPanel: string;
+export declare const sidePanel: string;

package/build/types-scss/src/shared/components/ScalableRect/style.scss.d.ts

@@ -0,0 +1,2 @@
+export declare const container: string;
+export declare const wrapper: string;

package/build/types-scss/src/shared/components/Throbber/theme.scss.d.ts

@@ -0,0 +1,6 @@
+export declare const ad: string;
+export declare const bouncing: string;
+export declare const circle: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;

package/build/types-scss/src/shared/components/WithTooltip/default-theme.scss.d.ts

@@ -0,0 +1,7 @@
+export declare const ad: string;
+export declare const appearance: string;
+export declare const arrow: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const wrapper: string;

package/build/types-scss/src/shared/components/YouTubeVideo/base.scss.d.ts

@@ -0,0 +1,5 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;
+export declare const video: string;

package/build/types-scss/src/shared/components/YouTubeVideo/throbber.scss.d.ts

@@ -0,0 +1,4 @@
+export declare const ad: string;
+export declare const container: string;
+export declare const context: string;
+export declare const hoc: string;

package/config/eslint/jest.json

@@ -1,5 +1,4 @@
 {
-  "extends": "./default.json",
   "env": {
     "browser": true,
     "jest": true
@@ -8,9 +7,11 @@
     "jest"
   ],
   "rules": {
+    "@typescript-eslint/no-implied-eval": 0,
     "global-require": 0,
     "import/no-dynamic-require": 0,
     "import/no-extraneous-dependencies": 0,
-    "no-console": 0
+    "no-console": 0,
+    "no-new-func": 0
   }
 }

package/config/eslint/typescript.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: ['airbnb', 'airbnb/hooks', 'airbnb-typescript'],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  rules: {
+    'jsx-a11y/anchor-is-valid': ['error', {
+      components: [],
+      specialLink: ['hrefLeft', 'hrefRight'],
+      aspects: ['invalidHref', 'noHref', 'preferButton'],
+    }],
+    'no-plusplus': 0,
+
+    // In TypeScript arrow-functions are better for component definitions as
+    // they allow typing like this, which helps to avoid many errors early:
+    // const Component: React.FunctionComponent<Props> = ({ ... }) => { ... };
+    'react/function-component-definition': ['error', {
+      namedComponents: 'arrow-function',
+      unnamedComponents: 'arrow-function',
+    }],
+
+    'react/jsx-one-expression-per-line': 0,
+    'react/jsx-uses-react': 0,
+    'react/no-unknown-property': ['error', {
+      ignore: ['styleName'],
+    }],
+    'react/react-in-jsx-scope': 0,
+  },
+  settings: {
+    'import/resolver': {
+      'babel-module': {},
+    },
+  },
+};

package/config/jest/default.js

@@ -5,7 +5,7 @@ const globalLibDir = path.resolve(process.execPath, '../../lib/node_modules');
 module.exports = {
   collectCoverage: true,
   collectCoverageFrom: [
-    'src/**/*.{js,jsx}',
+    'src/**/*.{js,jsx,ts,tsx}',
   ],
   coverageDirectory: '__coverage__',
   moduleDirectories: [
@@ -17,7 +17,7 @@ module.exports = {
   },
   modulePathIgnorePatterns: ['<rootDir>/build/'],
   rootDir: '../..',
-  testMatch: ['**/__tests__/**/*.js?(x)'],
+  testMatch: ['**/__tests__/**/*.(j|t)s?(x)'],
   testPathIgnorePatterns: [
     '/__assets__/',
     '/node_modules/',
@@ -26,7 +26,7 @@ module.exports = {
     url: 'http://localhost',
   },
   transform: {
-    '\\.(jsx?|svg)$': 'babel-jest',
+    '\\.((j|t)sx?|svg)$': 'babel-jest',
   },
   transformIgnorePatterns: [
     '/node_modules/(?!@dr.pogodin/react-utils)',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.25.6",
+  "version": "1.26.0",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,14 +8,15 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.1",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.11.0",
+    "@babel/runtime": "^7.23.2",
+    "@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.2",
-    "@dr.pogodin/react-themes": "^1.4.9",
-    "axios": "^1.5.0",
-    "commander": "^11.0.0",
+    "@dr.pogodin/react-global-state": "^0.10.0-alpha.4",
+    "@dr.pogodin/react-themes": "^1.5.1",
+    "@jest/environment": "^29.7.0",
+    "axios": "^1.5.1",
+    "commander": "^11.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.9",
     "cookie": "^0.5.0",
@@ -25,7 +26,7 @@
     "express": "^4.18.2",
     "helmet": "^7.0.0",
     "http-status-codes": "^2.3.0",
-    "joi": "^17.10.2",
+    "joi": "^17.11.0",
     "lodash": "^4.17.21",
     "morgan": "^1.10.0",
     "node-forge": "^1.3.1",
@@ -35,69 +36,99 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.17.0",
     "request-ip": "^3.3.0",
-    "rimraf": "^5.0.4",
+    "rimraf": "^5.0.5",
     "serialize-javascript": "^6.0.1",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^9.0.1",
-    "winston": "^3.10.0"
+    "winston": "^3.11.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.2",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/eslint-plugin": "^7.22.10",
     "@babel/node": "^7.22.19",
-    "@babel/plugin-transform-runtime": "^7.22.15",
-    "@babel/preset-env": "^7.22.20",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
     "@babel/register": "^7.22.15",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
+    "@tsconfig/recommended": "^1.0.2",
+    "@tsd/typescript": "^5.1.6",
+    "@types/compression": "^1.7.4",
+    "@types/config": "^3.3.2",
+    "@types/cookie": "^0.5.3",
+    "@types/cookie-parser": "^1.4.5",
+    "@types/csurf": "^1.11.4",
+    "@types/express": "^4.17.20",
+    "@types/jest": "^29.5.6",
+    "@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-dom": "^18.2.14",
+    "@types/react-helmet": "^6.1.8",
+    "@types/react-test-renderer": "^18.0.5",
+    "@types/request-ip": "^0.0.40",
+    "@types/serialize-javascript": "^5.0.3",
+    "@types/serve-favicon": "^2.5.6",
+    "@types/supertest": "^2.0.15",
+    "@types/uuid": "^9.0.6",
+    "@types/webpack": "^5.28.4",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.32.2",
+    "core-js": "^3.33.1",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.50.0",
+    "eslint": "^8.52.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
-    "eslint-plugin-import": "^2.28.1",
-    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-jest": "^27.4.3",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.5.0",
+    "memfs": "^4.6.0",
     "mini-css-extract-plugin": "^2.7.6",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.30",
+    "postcss": "^8.4.31",
     "postcss-loader": "^7.3.3",
-    "postcss-scss": "^4.0.8",
+    "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.68.0",
+    "sass": "^1.69.4",
     "sass-loader": "^13.3.2",
     "sitemap": "^7.1.1",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.0.0",
     "supertest": "^6.3.3",
-    "webpack": "^5.88.2",
+    "tsc-alias": "^1.8.8",
+    "typed-scss-modules": "^7.1.4",
+    "typescript": "^5.2.2",
+    "webpack": "^5.89.0",
     "webpack-dev-middleware": "^6.1.1",
     "webpack-hot-middleware": "^2.25.4",
-    "webpack-merge": "^5.9.0",
+    "webpack-merge": "^5.10.0",
     "workbox-core": "^7.0.0",
     "workbox-precaching": "^7.0.0",
     "workbox-webpack-plugin": "^7.0.0"
@@ -107,6 +138,8 @@
     "npm": ">=9"
   },
   "main": "./node-entry.js",
+  "source": "./src/index.ts",
+  "types": "./build/types-code/index.d.ts",
   "exports": {
     ".": {
       "browser": {
@@ -148,6 +181,7 @@
     "ReactJS",
     "Starting Pack",
     "Tools",
+    "TypeScript",
     "Utils",
     "Web"
   ],
@@ -155,13 +189,21 @@
   "name": "@dr.pogodin/react-utils",
   "repository": "github:birdofpreyru/react-utils",
   "scripts": {
-    "build": "rimraf build && node bin/build -t development --lib && node bin/build -t production --lib",
-    "jest:1": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=1/2",
-    "jest:2": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=2/2",
-    "jest": "npm run jest:1 && npm run jest:2",
-    "lint": "npm run lint:js && npm run lint:scss",
-    "lint:js": "eslint --ext .js,.jsx .",
+    "build": "rimraf build && npm run build:configs && npm run build:types-scss && npm run build:types-code && npm run build:dev && npm run build:prod",
+    "build:configs": "tsc --project tsconfig.configs.json",
+    "build:dev": "node bin/build -t development --lib --webpack-config webpack.config.ts",
+    "build:prod": "node bin/build -t production --lib --webpack-config webpack.config.ts",
+    "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 .",
+    "jest:1": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=1/4",
+    "jest:2": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=2/4",
+    "jest:3": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=3/4",
+    "jest:4": "NODE_CONFIG_ENV=test jest --no-cache -w 1 --config config/jest/default.js --shard=4/4",
+    "jest": "npm run jest:1 && npm run jest:2 && npm run jest:3 && npm run jest:4",
+    "lint": "npm run lint:code && npm run lint:scss",
+    "lint:code": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:scss": "stylelint -- **/*.{css,scss}",
-    "test": "npm run lint && npm run jest"
+    "test": "npm run lint && npm run typecheck && npm run jest",
+    "typecheck": "tsc --project __tests__/tsconfig.json"
   }
 }

package/src/client/getInj.ts

@@ -0,0 +1,43 @@
+// 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';
+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'
+  ? document.querySelector('meta[itemprop="drpruinj"]') : null;
+
+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);
+  inj = eval(`(${data})`); // eslint-disable-line no-eval
+} 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

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

package/src/client/init.ts

@@ -0,0 +1,47 @@
+/**
+ * Initialization of client-side environment.
+ */
+
+/* global BUILD_INFO, window */
+
+import { type BuildInfoT, getBuildInfo } from 'utils/isomorphy/buildInfo';
+
+const buildInfo = getBuildInfo();
+
+// TODO: Should be moved into buildInfo module?
+declare global {
+  interface Window {
+  // eslint-disable-next-line @typescript-eslint/naming-convention, no-underscore-dangle
+    __DEV_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`. */
+/* eslint-disable no-console */
+const { useServiceWorker } = buildInfo;
+if (useServiceWorker) {
+  const { navigator } = window;
+  if ('serviceWorker' in navigator) {
+    window.addEventListener('load', 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');
+        console.log('SW registered:', reg);
+      } catch (err) {
+        console.log('SW registration failed:', err);
+      }
+    });
+  }
+}
+/* eslint-enable no-console */

package/src/index.ts

@@ -0,0 +1,58 @@
+import 'styles/global.scss';
+
+import { webpack } from 'utils';
+
+import type ServerT from './server';
+
+const server = webpack.requireWeak('./server', __dirname) as (typeof ServerT) | null;
+
+const client = server ? undefined : require('./client').default;
+
+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 {
+  BaseModal,
+  Button,
+  Checkbox,
+  Dropdown,
+  Input,
+  Link,
+  PageLayout,
+  MetaTags,
+  Modal,
+  NavLink,
+  ScalableRect,
+  Throbber,
+  WithTooltip,
+  YouTubeVideo,
+} from 'components';
+
+export {
+  type Theme,
+  config,
+  Barrier,
+  Emitter,
+  isomorphy,
+  getSsrContext,
+  JU,
+  Semaphore,
+  splitComponent,
+  themed,
+  ThemeProvider,
+  time,
+  webpack,
+  withRetries,
+} from 'utils';
+
+export { client, server };

package/src/server/Cache.ts

@@ -0,0 +1,68 @@
+/**
+ * Implements the static cache.
+ */
+export default class Cache<DatumT> {
+  private: {
+    items: {
+      [key: string]: {
+        data: DatumT;
+        size: number;
+        timestamp: number;
+      }
+    };
+    maxSize: number;
+    size: number;
+  };
+
+  constructor(maxSize: number) {
+    this.private = {
+      items: {},
+      maxSize,
+      size: 0,
+    };
+  }
+
+  /**
+   * 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.private.items[key];
+    return item && Date.now() - item.timestamp < maxage ? item.data : null;
+  }
+
+  /**
+   * Adds item to cache.
+   * @ignore
+   * @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) {
+    const p = this.private;
+    const old = p.items[key];
+    if (old) p.size -= old.size;
+    p.items[key] = { data, size, timestamp: Date.now() };
+    p.size += size;
+    if (p.size > p.maxSize) {
+      const items = Object.entries(p.items);
+      items.sort((a, b) => a[1].timestamp - b[1].timestamp);
+      for (let i = 0; i < items.length; ++i) {
+        const [itemKey, item] = items[i];
+        delete p.items[itemKey];
+        p.size -= item.size;
+        if (p.size < p.maxSize / 2) break;
+      }
+    }
+  }
+}