@dr.pogodin/react-utils 1.26.0 → 1.26.1

package/config/babel/node-ssr.d.ts

@@ -0,0 +1,17 @@
+import { type BabelCompilerI, type ConfigT, type OptionsT as WebpackConfigOptionsT } from './webpack';
+type OptionsT = WebpackConfigOptionsT & {
+    baseAssetsOutputPath?: string;
+};
+/**
+ * Generates Babel config for NodeJS compilation and server-side  execution.
+ * @param babel Babel compiler instance.
+ * @param [ops] Preset options. It supports all options accepted by
+ *  the underlying {@link module:babel/webpack preset for Webpack}, but it
+ *  overrides `targets` option by `current node` value, and also accepts
+ *  the following additional options:
+ * @param [ops.baseAssetsOutputPath] Path prefix for emitted image
+ *  assets.
+ * @return Generated config.
+ */
+export default function getConfig(babel: BabelCompilerI, ops?: OptionsT): ConfigT;
+export {};

package/config/babel/node-ssr.js

@@ -0,0 +1,91 @@
+"use strict";
+/* eslint-disable import/no-extraneous-dependencies */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lodash_1 = require("lodash");
+const webpack_1 = __importStar(require("./webpack"));
+/**
+ * Creates a new base config.
+ * @param {object} babel Babel compiler.
+ * @param {object} [options] It supports all options of
+ *  {@link module:babel/webpack.getPreset babel/webpack's getPreset()},
+ *  but it overrides `targets` option with `current node` value, and further
+ *  accepts the following:
+ * @param {string} [options.baseAssetsOutputPath] Path prefix for emitted
+ *  image assets.
+ * @return {object} Created config object.
+ * @ignore
+ */
+function newBase(babel, options = {}) {
+    const config = (0, webpack_1.default)(babel, Object.assign(Object.assign({}, options), { targets: 'current node' }));
+    const baseAssetsOutputPath = options.baseAssetsOutputPath || '';
+    config.plugins.push(['@dr.pogodin/transform-assets', {
+            extensions: ['gif', 'jpeg', 'jpg', 'png'],
+            name: `${baseAssetsOutputPath}/images/[md4:hash:20].[ext]`,
+        }]);
+    const moduleResolverPluginOps = (config.plugins.find((x) => x[0] === 'module-resolver'))[1];
+    moduleResolverPluginOps.transformFunctions = [
+        'requireWeak',
+        'resolveWeak',
+        'webpack.requireWeak',
+        'webpack.resolveWeak',
+    ];
+    if (babel.env() === webpack_1.ENVIRONMENTS.DEV) {
+        (0, lodash_1.pull)(config.plugins, 'react-refresh/babel');
+    }
+    return config;
+}
+/**
+ * Updates given `config` with styling ((S)CSS-related) setup.
+ *
+ * **Beware:** It mutates `config`.
+ *
+ * @param {object} config
+ * @return {object} Returns mutated config for chaining.
+ * @ignore
+ */
+function addStyling(config) {
+    const cssModulesOps = config.plugins.find(([name]) => name === '@dr.pogodin/react-css-modules')[1];
+    cssModulesOps.replaceImport = true;
+    return config;
+}
+/**
+ * Generates Babel config for NodeJS compilation and server-side  execution.
+ * @param babel Babel compiler instance.
+ * @param [ops] Preset options. It supports all options accepted by
+ *  the underlying {@link module:babel/webpack preset for Webpack}, but it
+ *  overrides `targets` option by `current node` value, and also accepts
+ *  the following additional options:
+ * @param [ops.baseAssetsOutputPath] Path prefix for emitted image
+ *  assets.
+ * @return Generated config.
+ */
+function getConfig(babel, ops = {}) {
+    const config = newBase(babel, ops);
+    if (!ops.noStyling)
+        addStyling(config);
+    return config;
+}
+exports.default = getConfig;

package/config/babel/webpack.d.ts

@@ -0,0 +1,40 @@
+export interface BabelCompilerI {
+    env: () => string;
+}
+/**
+ * Supported Babel environments.
+ */
+export declare enum ENVIRONMENTS {
+    DEV = "development",
+    PROD = "production",
+    TEST = "test"
+}
+export interface PresetOrPluginOptionsI {
+}
+type PresetOrPluginT = string | [string, PresetOrPluginOptionsI];
+export type ConfigT = {
+    presets: PresetOrPluginT[];
+    plugins: PresetOrPluginT[];
+};
+export type OptionsT = {
+    noRR?: boolean;
+    noStyling?: boolean;
+    targets?: string | string[] | {
+        [key: string]: string;
+    };
+    typescript?: boolean;
+};
+/**
+ * Generates Babel preset for Webpack.
+ * @param babel Babel compiler.
+ * @param [ops] Preset options.
+ * @param [ops.noRR] If truthy `react-refresh/babel` plugin is not
+ *  included into config, no matter the environment.
+ * @param [ops.noStyling] If truthy all setup related to styling
+ *  ((S)CSS processing) will be skipped.
+ * @param [ops.targets=defaults] Targets for
+ *  `@babel/preset-env`.
+ * @return Generated config.
+ */
+export default function getPreset(babel: BabelCompilerI, ops?: OptionsT): ConfigT;
+export {};

package/config/babel/webpack.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ENVIRONMENTS = void 0;
+const { generateScopedNameFactory, } = require('@dr.pogodin/babel-plugin-react-css-modules/utils');
+const generateScopedNameDev = generateScopedNameFactory('[package]___[path][name]___[local]___[hash:base64:6]');
+const generateScopedNameProd = generateScopedNameFactory('[hash:base64:6]');
+/**
+ * Supported Babel environments.
+ */
+var ENVIRONMENTS;
+(function (ENVIRONMENTS) {
+    ENVIRONMENTS["DEV"] = "development";
+    ENVIRONMENTS["PROD"] = "production";
+    ENVIRONMENTS["TEST"] = "test";
+})(ENVIRONMENTS || (exports.ENVIRONMENTS = ENVIRONMENTS = {}));
+/**
+ * Creates a new base config.
+ * @param [options] Base config options.
+ * @return Generated config.
+ */
+function newBaseConfig(options) {
+    return {
+        presets: [
+            // Chrome 69 is the browser for Android API 28.
+            ['@babel/env', { targets: options.targets || 'defaults or chrome >= 69' }],
+            // TODO: Starting from Babel 8, "automatic" will be the default runtime,
+            // thus once upgraded to Babel 8, runtime should be removed from
+            // @babel/react options below.
+            ['@babel/react', { runtime: 'automatic' }],
+            '@dr.pogodin/babel-preset-svgr',
+        ],
+        plugins: [
+            ['module-resolver', {
+                    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                    root: [
+                        './src/shared',
+                        './src',
+                    ],
+                }],
+            '@babel/transform-runtime',
+        ],
+    };
+}
+/**
+ * Updates given `config` with styling ((S)CSS-related) setup.
+ *
+ * **Beware:** It mutates `config`.
+ *
+ * @param {object} config
+ * @param {string} env Target environment: `development` or `production`.
+ * @return {object} Returns mutated config for chaining.
+ * @ignore
+ */
+function addStyling(config, env) {
+    const cssModulesOps = {
+        autoResolveMultipleImports: true,
+        filetypes: {
+            '.scss': { syntax: 'postcss-scss' },
+        },
+    };
+    config.plugins.push(['@dr.pogodin/react-css-modules', cssModulesOps]);
+    switch (env) {
+        case ENVIRONMENTS.DEV:
+        case ENVIRONMENTS.TEST:
+            cssModulesOps.generateScopedName = generateScopedNameDev;
+            break;
+        case ENVIRONMENTS.PROD:
+            cssModulesOps.generateScopedName = generateScopedNameProd;
+            break;
+        default:
+    }
+    return config;
+}
+/**
+ * Generates Babel preset for Webpack.
+ * @param babel Babel compiler.
+ * @param [ops] Preset options.
+ * @param [ops.noRR] If truthy `react-refresh/babel` plugin is not
+ *  included into config, no matter the environment.
+ * @param [ops.noStyling] If truthy all setup related to styling
+ *  ((S)CSS processing) will be skipped.
+ * @param [ops.targets=defaults] Targets for
+ *  `@babel/preset-env`.
+ * @return Generated config.
+ */
+function getPreset(babel, ops = {}) {
+    const env = babel.env();
+    const res = newBaseConfig(ops);
+    if (!ops.noStyling)
+        addStyling(res, env);
+    if (env === ENVIRONMENTS.DEV && !ops.noRR) {
+        res.plugins.push('react-refresh/babel');
+    }
+    // Conditional to not require non-TypeScript projects to install TypeScript-
+    // specific dependencies for build process.
+    if (ops.typescript) {
+        res.presets.push(['@babel/typescript', {
+                // This ensures TypeScript compilation does not remove "unused" imports,
+                // as in most cases it considers assets (e.g. stylesheet) imports as
+                // unused, while other steps of our build process rely on them
+                // (e.g. @dr.pogodin/react-css-modules plugin).
+                onlyRemoveTypeImports: true,
+            }]);
+    }
+    return res;
+}
+exports.default = getPreset;

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

@@ -0,0 +1,140 @@
+/**
+ * @category Configs
+ * @module webpack/app-base
+ * @desc
+ * Base [Webpack](https://webpack.js.org/) configuration for apps.
+ */
+/// <reference types="node" />
+import nodeFs from 'fs';
+import { type Configuration } from 'webpack';
+export type BuildInfoT = {
+    key: string;
+    publicPath: string;
+    timestamp: string;
+    useServiceWorker: boolean;
+};
+export type OptionsT = {
+    babelEnv: string;
+    babelLoaderOptions?: object;
+    context: string;
+    cssLocalIdent?: string;
+    dontEmitBuildInfo?: boolean;
+    dontUseProgressPlugin?: boolean;
+    entry: string | string[];
+    fs?: typeof nodeFs;
+    keepBuildInfo?: boolean | BuildInfoT;
+    mode: 'development' | 'none' | 'production';
+    outputPath?: string;
+    publicPath?: string;
+    sitemap?: string;
+    typescript?: boolean;
+    workbox?: boolean | object;
+};
+/**
+ * Creates a new Webpack config object, and performs some auxiliary operations
+ * on the way.
+ * @param {object} ops Configuration params. This allows to modify some
+ * frequently changed options in a convenient way, without a need to manipulate
+ * directly with the created config object.
+ * @param {string} ops.babelEnv Babel environment to use for the Babel
+ * compilation step.
+ * @param {object} [ops.babelLoaderOptions] Overrides for default Babel options
+ * of JSX and SVG files loader.
+ * @param ops.context Base URL for resolution of relative config paths.
+ * @param {string} [ops.cssLocalIdent=hash:base64:6] The template for
+ * CSS classnames generation by the Webpack's `css-loader`; it is passed into
+ * the `localIdentName` param of the loader. It should match the corresponding
+ * setting in the Babel config.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ * @param [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @param {string|string[]} ops.entry Entry points for "main" chunk. The config
+ * will prepend them by some necessary polyfills, e.g.:
+ * ([babel-polyfill](https://babeljs.io/docs/usage/polyfill/),
+ * [nodelist-foreach-polyfill](https://www.npmjs.com/package/nodelist-foreach-polyfill)).
+ * @param {boolean|object} ops.workbox If evaluates to a truthy value,
+ * [Workbox's InjectManifest plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin)
+ * is added to the array of Webpack plugins, to generate service worker for
+ * browser. If the value is an object, it is merged into the options passed
+ * into the plugin, otherwise default options are used:
+ * ```json
+ * {
+ *   "importWorkboxFrom": "local",
+ *   "swSrc": "@dr.pogodin/react-utils/config/workbox/default.js",
+ *   "swDest": "__service-worker.js"
+ * }
+ * ```
+ * If service worker is generated by this option, it will be automatically
+ * initiated at the client side by the standard
+ * [client-side initialization script](docs/client.md)
+ * provided by **@dr.pogodin/react-utils**. Note that `swDest`'s value cannot be
+ * overriden by config options provided via `workbox` object.
+ * @param {object} [ops.fs] Filesystem to use instead of the Node's FS.
+ * @param {boolean|object} [ops.keepBuildInfo] If `true` and a `.build-info`
+ *  file from a previous build exists in the context directory, it will be
+ *  loaded and used, rather than re-generated by the config factory. It allows
+ *  to re-create the Webpack config during a server launch without re-generation
+ *  of the build info file created during a previous build (and thus bundled
+ *  into the frontend bundle). If an object is provided, it will be used as
+ *  the build info, instead of trying to load it from the filesystem. This
+ *  feature is intended for testing context.
+ * @param {string} ops.mode
+ * [Webpack mode](https://webpack.js.org/concepts/mode/).
+ * @param {string} [ops.outputPath=build] Optional. Output path for the build.
+ * @param {string} ops.publicPath Base URL for the output of the build assets.
+ * @param {string} [ops.sitemap] The path to JS or JSON config for sitemap.
+ * It can be relative to the context, and can be a factory, which returns
+ * the config. The config should be compatible with
+ * [`sitemap`](https://www.npmjs.com/package/sitemap) library, and if
+ * provided the Webpack config factory will use it to gererate `sitemap.xml`
+ * file in the output folder, and then serve it from the app root.
+ * @return The generated config will opt to:
+ * - Bundle the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from
+ *   the `src/assets/fonts` folder of your source code will be bundled
+ *   and output into the `[PUBLIC_PATH]/fonts` folder);
+ * - Bundle image assets (GIF, JPEG, JPG, PNG files from any folder of
+ *   your source code will be bundled and output into the
+ *   `[PUBLIC_PATH]/images` folder);
+ * - Bundle SCSS files from any folder of your source code, beside
+ *   `node_modules` and its subfolders. The files will be compiled,
+ *    bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *    bundles;
+ * - Bundle CSS files from any folder of your code. The files will be
+ *   bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *   bundles;
+ * - Bundle JS, JSX, and SVG files; they will be compiled into the
+ *   `[PUBLIC_PATH]/[CHUNK_NAME].js` bundles, using the Babel environment
+ *   specified in the factory options, and
+ *   [`config/babel/webpack`](./babel-config.js#webpack) config.
+ *
+ * - The following path aliases will be automatically set:
+ * - **`assets`** for `[CONTEXT]/src/assets`;
+ * - **`components`** for `[CONTEXT]/src/shared/components`;
+ * - **`fonts`** for `[CONTEXT]/src/assets/fonts`;
+ * - **`styles`** for `[CONTEXT]/src/styles`.
+ *
+ * Also `resolve.symlinks` Webpack option is set to *false* to avoid problems
+ * with resolution of assets from packages linked with `npm link`.
+ *
+ * - The following global variables will be emulated inside the output
+ *   JS bundle:
+ *   - **`BUILD_RNDKEY`** &mdash; A random 32 bit key that can be used
+ *     for encryption, it is set just as a global variable accessible in
+ *     the code;
+ *   - **`BUILD_TIMESTAMP`** &mdash; UTC timestamp of the beginning of
+ *     the build;
+ *   - **`FRONT_END`** &mdash; It will be set *true* inside the bundle,
+ *     so that shared code can use it to determine that it is executed
+ *     at the client side.
+ *
+ * - It also opts to polyfill the `__dirname` global variable,
+ *   and to ignore imports of the `fs` Node package;
+ *
+ * - Also, it will store to the disk (re-writes if exists) the file
+ *   `[CONTEXT]/.build-info` which will contain a stringified JSON
+ *   object with the following fields:
+ *   - **`rndkey`** &mdash; The value set for `BUILD_RNDKEY`;
+ *   - **`timestamp`** &mdash; The value set for `BUILD_TIMESTAMP`.
+ */
+export default function configFactory(ops: OptionsT): Configuration;

package/config/webpack/app-base.js

@@ -0,0 +1,313 @@
+"use strict";
+/**
+ * @category Configs
+ * @module webpack/app-base
+ * @desc
+ * Base [Webpack](https://webpack.js.org/) configuration for apps.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const sitemap_1 = __importDefault(require("sitemap"));
+const lodash_1 = require("lodash");
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const node_forge_1 = __importDefault(require("node-forge"));
+const webpack_1 = require("webpack");
+const workbox_webpack_plugin_1 = __importDefault(require("workbox-webpack-plugin"));
+const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
+/**
+ * Creates a new Webpack config object, and performs some auxiliary operations
+ * on the way.
+ * @param {object} ops Configuration params. This allows to modify some
+ * frequently changed options in a convenient way, without a need to manipulate
+ * directly with the created config object.
+ * @param {string} ops.babelEnv Babel environment to use for the Babel
+ * compilation step.
+ * @param {object} [ops.babelLoaderOptions] Overrides for default Babel options
+ * of JSX and SVG files loader.
+ * @param ops.context Base URL for resolution of relative config paths.
+ * @param {string} [ops.cssLocalIdent=hash:base64:6] The template for
+ * CSS classnames generation by the Webpack's `css-loader`; it is passed into
+ * the `localIdentName` param of the loader. It should match the corresponding
+ * setting in the Babel config.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ * @param [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @param {string|string[]} ops.entry Entry points for "main" chunk. The config
+ * will prepend them by some necessary polyfills, e.g.:
+ * ([babel-polyfill](https://babeljs.io/docs/usage/polyfill/),
+ * [nodelist-foreach-polyfill](https://www.npmjs.com/package/nodelist-foreach-polyfill)).
+ * @param {boolean|object} ops.workbox If evaluates to a truthy value,
+ * [Workbox's InjectManifest plugin](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#injectmanifest_plugin)
+ * is added to the array of Webpack plugins, to generate service worker for
+ * browser. If the value is an object, it is merged into the options passed
+ * into the plugin, otherwise default options are used:
+ * ```json
+ * {
+ *   "importWorkboxFrom": "local",
+ *   "swSrc": "@dr.pogodin/react-utils/config/workbox/default.js",
+ *   "swDest": "__service-worker.js"
+ * }
+ * ```
+ * If service worker is generated by this option, it will be automatically
+ * initiated at the client side by the standard
+ * [client-side initialization script](docs/client.md)
+ * provided by **@dr.pogodin/react-utils**. Note that `swDest`'s value cannot be
+ * overriden by config options provided via `workbox` object.
+ * @param {object} [ops.fs] Filesystem to use instead of the Node's FS.
+ * @param {boolean|object} [ops.keepBuildInfo] If `true` and a `.build-info`
+ *  file from a previous build exists in the context directory, it will be
+ *  loaded and used, rather than re-generated by the config factory. It allows
+ *  to re-create the Webpack config during a server launch without re-generation
+ *  of the build info file created during a previous build (and thus bundled
+ *  into the frontend bundle). If an object is provided, it will be used as
+ *  the build info, instead of trying to load it from the filesystem. This
+ *  feature is intended for testing context.
+ * @param {string} ops.mode
+ * [Webpack mode](https://webpack.js.org/concepts/mode/).
+ * @param {string} [ops.outputPath=build] Optional. Output path for the build.
+ * @param {string} ops.publicPath Base URL for the output of the build assets.
+ * @param {string} [ops.sitemap] The path to JS or JSON config for sitemap.
+ * It can be relative to the context, and can be a factory, which returns
+ * the config. The config should be compatible with
+ * [`sitemap`](https://www.npmjs.com/package/sitemap) library, and if
+ * provided the Webpack config factory will use it to gererate `sitemap.xml`
+ * file in the output folder, and then serve it from the app root.
+ * @return The generated config will opt to:
+ * - Bundle the font assets (EOF, OTF, SVG, TTF, WOFF, WOFF2 files from
+ *   the `src/assets/fonts` folder of your source code will be bundled
+ *   and output into the `[PUBLIC_PATH]/fonts` folder);
+ * - Bundle image assets (GIF, JPEG, JPG, PNG files from any folder of
+ *   your source code will be bundled and output into the
+ *   `[PUBLIC_PATH]/images` folder);
+ * - Bundle SCSS files from any folder of your source code, beside
+ *   `node_modules` and its subfolders. The files will be compiled,
+ *    bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *    bundles;
+ * - Bundle CSS files from any folder of your code. The files will be
+ *   bundled and extracted into the `[PUBLIC_PATH]/[CHUNK_NAME].css`
+ *   bundles;
+ * - Bundle JS, JSX, and SVG files; they will be compiled into the
+ *   `[PUBLIC_PATH]/[CHUNK_NAME].js` bundles, using the Babel environment
+ *   specified in the factory options, and
+ *   [`config/babel/webpack`](./babel-config.js#webpack) config.
+ *
+ * - The following path aliases will be automatically set:
+ * - **`assets`** for `[CONTEXT]/src/assets`;
+ * - **`components`** for `[CONTEXT]/src/shared/components`;
+ * - **`fonts`** for `[CONTEXT]/src/assets/fonts`;
+ * - **`styles`** for `[CONTEXT]/src/styles`.
+ *
+ * Also `resolve.symlinks` Webpack option is set to *false* to avoid problems
+ * with resolution of assets from packages linked with `npm link`.
+ *
+ * - The following global variables will be emulated inside the output
+ *   JS bundle:
+ *   - **`BUILD_RNDKEY`** — A random 32 bit key that can be used
+ *     for encryption, it is set just as a global variable accessible in
+ *     the code;
+ *   - **`BUILD_TIMESTAMP`** — UTC timestamp of the beginning of
+ *     the build;
+ *   - **`FRONT_END`** — It will be set *true* inside the bundle,
+ *     so that shared code can use it to determine that it is executed
+ *     at the client side.
+ *
+ * - It also opts to polyfill the `__dirname` global variable,
+ *   and to ignore imports of the `fs` Node package;
+ *
+ * - Also, it will store to the disk (re-writes if exists) the file
+ *   `[CONTEXT]/.build-info` which will contain a stringified JSON
+ *   object with the following fields:
+ *   - **`rndkey`** — The value set for `BUILD_RNDKEY`;
+ *   - **`timestamp`** — The value set for `BUILD_TIMESTAMP`.
+ */
+function configFactory(ops) {
+    const o = (0, lodash_1.defaults)((0, lodash_1.clone)(ops), {
+        babelLoaderOptions: {},
+        cssLocalIdent: '[hash:base64:6]',
+        outputPath: 'build/web-public',
+        publicPath: '',
+    });
+    const fs = ops.fs || fs_1.default;
+    /* TODO: This works in practice, but being async and not awaited it is a bad
+     * pattern. */
+    if (o.sitemap) {
+        const sitemapUrl = path_1.default.resolve(o.context, o.sitemap);
+        /* eslint-disable global-require, import/no-dynamic-require */
+        let source = require(sitemapUrl);
+        if ((0, lodash_1.isFunction)(source))
+            source = source();
+        /* eslint-enable global-require, import/no-dynamic-require */
+        const sm = new sitemap_1.default.SitemapStream();
+        source.forEach((item) => sm.write(item));
+        sm.end();
+        sitemap_1.default.streamToPromise(sm).then((sitemap) => {
+            const outUrl = path_1.default.resolve(o.context, o.outputPath);
+            if (!fs.existsSync(outUrl))
+                fs.mkdirSync(outUrl);
+            fs.writeFileSync(path_1.default.resolve(o.context, o.outputPath, 'sitemap.xml'), sitemap);
+        });
+    }
+    // TODO: Once all assets are named by hashes, we probably don't need build
+    // info anymore beside the key, which can be merged into stats object?
+    // On the other hand, it is still handy to have to pass around the build
+    // timestamp, and any other similar information to the actual app, so it
+    // can be used in some scenarious.
+    let buildInfo;
+    const buildInfoUrl = path_1.default.resolve(o.context, '.build-info');
+    if (o.keepBuildInfo) {
+        // If "true" - attempt to load from the filesystem.
+        if (o.keepBuildInfo === true) {
+            if (fs.existsSync(buildInfoUrl)) {
+                buildInfo = JSON.parse(fs.readFileSync(buildInfoUrl, 'utf8'));
+            }
+            // Otherwise we assume .keepBuildInfo value itself is the build info object
+            // to use in the build.
+        }
+        else
+            buildInfo = o.keepBuildInfo;
+    }
+    // Even if "keepBuildInfo" option was provided, we still generate a new
+    // build info object in case nothing could be loaded.
+    if (!buildInfo) {
+        buildInfo = Object.freeze({
+            /* A random 32-bit key, that can be used for encryption. */
+            key: node_forge_1.default.random.getBytesSync(32),
+            /* Public path used during build. */
+            publicPath: o.publicPath,
+            /* `true` if client-side code should setup a service worker. */
+            useServiceWorker: Boolean(o.workbox),
+            // Build timestamp.
+            timestamp: new Date().toISOString(),
+        });
+    }
+    // If not opted-out, we write the build info to the filesystem. We also attach
+    // it to the factory function itself, so it can be easily accessed right after
+    // the factory call in testing scenarios.
+    if (!o.dontEmitBuildInfo) {
+        // Note: this is needed if "fs" option is provided, to ensure the factory
+        // does not crash if the folder is not created in that filesystem.
+        fs.mkdirSync(o.context, { recursive: true });
+        fs.writeFileSync(buildInfoUrl, JSON.stringify(buildInfo));
+    }
+    /* Entry points normalization. */
+    const entry = [
+        'core-js/stable',
+        'regenerator-runtime/runtime',
+        'nodelist-foreach-polyfill',
+        ...Array.isArray(o.entry) ? o.entry : [o.entry],
+    ];
+    const plugins = [
+        new webpack_1.DefinePlugin({ BUILD_INFO: JSON.stringify(buildInfo) }),
+    ];
+    if (!ops.dontUseProgressPlugin)
+        plugins.push(new webpack_1.ProgressPlugin());
+    /* Adds InjectManifest plugin from WorkBox, if opted to. */
+    if (o.workbox) {
+        if (!(0, lodash_1.isObject)(o.workbox))
+            o.workbox = {};
+        plugins.push(new workbox_webpack_plugin_1.default.InjectManifest(Object.assign(Object.assign({ swSrc: path_1.default.resolve(__dirname, '../workbox/default.js') }, o.workbox), { swDest: '__service-worker.js' })));
+    }
+    return {
+        context: o.context,
+        entry,
+        node: {
+            __dirname: true,
+        },
+        mode: o.mode,
+        output: {
+            chunkFilename: '[contenthash].js',
+            filename: '[contenthash].js',
+            path: path_1.default.resolve(__dirname, o.context, o.outputPath),
+            publicPath: `${o.publicPath}/`,
+        },
+        plugins,
+        resolve: {
+            alias: {
+                // Aliases to JS an JSX files are handled by Babel.
+                assets: path_1.default.resolve(o.context, 'src/assets'),
+                components: path_1.default.resolve(o.context, 'src/shared/components'),
+                fonts: path_1.default.resolve(o.context, 'src/assets/fonts'),
+                styles: path_1.default.resolve(o.context, 'src/styles'),
+            },
+            extensions: [
+                '.ts',
+                '.tsx',
+                '.js',
+                '.jsx',
+                '.json',
+                '.scss',
+            ],
+            symlinks: false,
+        },
+        module: {
+            rules: [{
+                    /* Loads font resources from "src/assets/fonts" folder. */
+                    test: /\.(eot|otf|svg|ttf|woff2?)$/,
+                    include: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'fonts/[contenthash][ext][query]',
+                    },
+                }, {
+                    /* Loads JS and JSX moudles, and inlines SVG assets. */
+                    test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
+                    exclude: [/node_modules/],
+                    loader: 'babel-loader',
+                    options: Object.assign({ babelrc: false, configFile: false, envName: o.babelEnv, presets: [['@dr.pogodin/react-utils/config/babel/webpack', {
+                                    typescript: ops.typescript,
+                                }]] }, o.babelLoaderOptions),
+                }, {
+                    /* Loads image assets. */
+                    test: /\.(gif|jpe?g|png)$/,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'images/[contenthash][ext][query]',
+                    },
+                }, {
+                    /* Loads SCSS stylesheets. */
+                    test: /\.scss$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader, {
+                            loader: 'css-loader',
+                            options: {
+                                modules: {
+                                    getLocalIdent: utils_1.getLocalIdent,
+                                    localIdentName: o.cssLocalIdent,
+                                },
+                            },
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [autoprefixer_1.default],
+                                },
+                            },
+                        }, 'resolve-url-loader', {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                            },
+                        },
+                    ],
+                }, {
+                    /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
+                    * from dependencies, as we use SCSS inside our own code. */
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                    ],
+                }],
+        },
+    };
+}
+exports.default = configFactory;

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

@@ -0,0 +1,13 @@
+import webpack from 'webpack';
+import { type OptionsT as BaseOptionsT } from './app-base';
+type OptionsT = BaseOptionsT & {
+    dontUseHmr?: boolean;
+    dontUseReactGlobalStateDebugging?: boolean;
+};
+/**
+ * @param ops
+ * @param [ops.dontUseReactGlobalStateDebugging]
+ * @param [ops.dontUseHmr]
+ */
+export default function configFactory(ops: OptionsT): webpack.Configuration;
+export {};

package/config/webpack/app-development.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @category Configs
+ * @module webpack/app-development
+ * @desc development Webpack configuration for applications.
+ */
+const lodash_1 = require("lodash");
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const app_base_1 = __importDefault(require("./app-base"));
+/**
+ * @param ops
+ * @param [ops.dontUseReactGlobalStateDebugging]
+ * @param [ops.dontUseHmr]
+ */
+function configFactory(ops) {
+    const o = (0, lodash_1.defaults)((0, lodash_1.clone)(ops), {
+        cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]',
+    });
+    const entry = ['@dr.pogodin/react-utils/build/development/client/init'];
+    if (!o.dontUseHmr)
+        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 webpack_1.default.DefinePlugin({
+            'process.env.BABEL_ENV': JSON.stringify('development'),
+            'process.env.DEV_TOOLS': JSON.stringify(true),
+            'process.env.NODE_ENV': JSON.stringify('development'),
+            'process.env.REACT_GLOBAL_STATE_DEBUG': JSON.stringify(!o.dontUseReactGlobalStateDebugging),
+        }),
+    ];
+    // TODO: There should be no reason to include these plugins when HMR is opted
+    // out, however if I remove them, the compilation fails with obscure
+    // "ReferenceError: $RefreshReg$ is not defined" error. For now it seems
+    // fine to keep these plugins anyway, thus the shortcut of "if" condition
+    // below.
+    if (true || !o.dontUseHmr) {
+        plugins.push(new webpack_1.default.HotModuleReplacementPlugin(), new react_refresh_webpack_plugin_1.default({
+            overlay: {
+                sockIntegration: 'whm',
+            },
+        }));
+    }
+    const res = (0, webpack_merge_1.merge)((0, app_base_1.default)(Object.assign(Object.assign({}, o), { babelEnv: 'development', entry, mode: 'development' })), {
+        output: {
+            chunkFilename: '[id].js',
+            filename: '[id].js',
+        },
+        plugins,
+        snapshot: {
+            // This enforces Webpack to watch for possible changes in node_modules
+            // dependencies, which is a great convenience in library-centric dev
+            // workflows.
+            managedPaths: [],
+        },
+    });
+    return res;
+}
+exports.default = configFactory;

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

@@ -0,0 +1,16 @@
+/**
+ * @category Configs
+ * @module webpack/app-production
+ * @desc Production Webpack configuration for applications.
+ */
+import { type Configuration } from 'webpack';
+import { type OptionsT as BaseOptionsT } from './app-base';
+type OptionsT = BaseOptionsT;
+/**
+ * @param {object} ops
+ * @param {string} ops.context Base URL for resolution of relative config paths.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ */
+export default function configFactory(ops: OptionsT): Configuration;
+export {};

package/config/webpack/app-production.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * @category Configs
+ * @module webpack/app-production
+ * @desc Production Webpack configuration for applications.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const app_base_1 = __importDefault(require("./app-base"));
+/**
+ * @param {object} ops
+ * @param {string} ops.context Base URL for resolution of relative config paths.
+ * @param {boolean} [ops.dontEmitBuildInfo] If set the `.build-info` file won't
+ * be created at the disk during the compilation.
+ */
+function configFactory(ops) {
+    const entry = [
+        '@dr.pogodin/react-utils/build/production/client/init',
+        ...Array.isArray(ops.entry) ? ops.entry : [ops.entry],
+    ];
+    const res = (0, webpack_merge_1.merge)((0, app_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'production', entry, mode: 'production' })), {
+        optimization: {
+            minimizer: [
+                '...',
+                new css_minimizer_webpack_plugin_1.default({
+                    minimizerOptions: {
+                        preset: ['default', {
+                                /* Due to the way our styles are organized, these dangerous
+                                * optimizations can break our styles, thus they are disabled. */
+                                discardUnused: false,
+                                reduceIdents: false,
+                                zindex: false,
+                            }],
+                    },
+                }),
+            ],
+        },
+        plugins: [
+            new webpack_1.default.DefinePlugin({
+                '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',
+            }),
+        ],
+    });
+    return res;
+}
+exports.default = configFactory;

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

@@ -0,0 +1,20 @@
+import { type Configuration } from 'webpack';
+export type OptionsT = {
+    babelEnv: string;
+    babelLoaderOptions?: object;
+    context: string;
+    cssLocalIdent?: string;
+    dontUseProgressPlugin?: boolean;
+    entry: string | string[];
+    library: string;
+    mode: 'development' | 'none' | 'production';
+    outputPath?: string;
+    typescript?: boolean;
+};
+/**
+ * @param {object} ops
+ * @param {boolean} [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @return {object}
+ */
+export default function configFactory(ops: OptionsT): Configuration;

package/config/webpack/lib-base.js

@@ -0,0 +1,154 @@
+"use strict";
+// Base Webpack config for ReactJS libraries.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_1 = require("webpack");
+const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
+/**
+ * @param {object} ops
+ * @param {boolean} [ops.dontUseProgressPlugin] Set to not include progress
+ *  plugin.
+ * @return {object}
+ */
+function configFactory(ops) {
+    const plugins = [
+        new mini_css_extract_plugin_1.default({ filename: 'style.css' }),
+    ];
+    if (!ops.dontUseProgressPlugin)
+        plugins.push(new webpack_1.ProgressPlugin());
+    return {
+        context: ops.context,
+        entry: ops.entry,
+        externals: [
+            /@babel\/runtime/,
+            '@dr.pogodin/react-global-state',
+            '@dr.pogodin/js-utils',
+            '@dr.pogodin/react-themes',
+            '@dr.pogodin/react-utils',
+            'axios',
+            'dayjs',
+            'lodash',
+            /node-forge/,
+            'prop-types',
+            'qs',
+            'react',
+            /react-dom/,
+            'react-helmet',
+            'react-router-dom',
+            'uuid',
+        ],
+        mode: ops.mode,
+        output: {
+            filename: 'web.bundle.js',
+            // TODO: Check, whether this fix can be dropped.
+            // Workaround to fix umd build, restore webpack v3 behaviour
+            // https://github.com/webpack/webpack/issues/6677
+            // https://github.com/webpack/webpack/issues/6642
+            globalObject: "typeof self !== 'undefined' ? self : this",
+            library: ops.library,
+            path: ops.outputPath,
+            libraryTarget: 'umd',
+        },
+        plugins,
+        module: {
+            rules: [{
+                    /* Handles font imports in url(..) instructions in CSS. Effectively,
+                     * with such configuration it just rewrites those URLs to point to
+                     * the original location of the font assets in
+                     * the library being build. */
+                    test: /\.(eot|otf|svg|ttf|woff2?)$/,
+                    include: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    type: 'asset/resource',
+                    generator: {
+                        // TODO: This comes from the older config version which relied on
+                        // file-loader. It might require some correction to correctly join
+                        // `publicPath` and `filename`.
+                        filename: '../shared/[path][name][ext]',
+                        publicPath: `${ops.library}/build/shared`,
+                    },
+                }, {
+                    /* Loads JS and JSX moudles, and inlines SVG assets. */
+                    test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,
+                    exclude: [
+                        /node_modules/,
+                        /src[/\\]assets[/\\]fonts/,
+                    ],
+                    loader: 'babel-loader',
+                    options: Object.assign({ babelrc: false, configFile: false, envName: ops.babelEnv, presets: [
+                            // NOTE: For the compilation of this very library (react-utils),
+                            // this plugin path is overriden in webpack.config.js in the root of
+                            // the codebase.
+                            ['@dr.pogodin/react-utils/config/babel/webpack', {
+                                    noRR: true,
+                                    typescript: ops.typescript,
+                                }],
+                        ] }, ops.babelLoaderOptions || {}),
+                }, {
+                    /* Loads SCSS stylesheets. */
+                    test: /\.scss/,
+                    exclude: /node_modules/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader, {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 3,
+                                modules: {
+                                    getLocalIdent: utils_1.getLocalIdent,
+                                    localIdentName: ops.cssLocalIdent,
+                                },
+                            },
+                        }, {
+                            loader: 'postcss-loader',
+                            options: {
+                                postcssOptions: {
+                                    plugins: [
+                                        autoprefixer_1.default,
+                                    ],
+                                },
+                            },
+                        }, 'resolve-url-loader', {
+                            loader: 'sass-loader',
+                            options: {
+                                sourceMap: true,
+                            },
+                        },
+                    ],
+                }, {
+                    /* Loads CSS stylesheets. It is assumed that CSS stylesheets come only
+                    * from dependencies, as we use SCSS inside our own code. */
+                    test: /\.css$/,
+                    use: [
+                        mini_css_extract_plugin_1.default.loader,
+                        'css-loader',
+                    ],
+                }],
+        },
+        resolve: {
+            alias: {
+                /* Aliases to JS an JSX files are handled by Babel. */
+                assets: path_1.default.resolve(ops.context, 'src/assets'),
+                components: path_1.default.resolve(ops.context, 'src/shared/components'),
+                fonts: path_1.default.resolve(ops.context, 'src/assets/fonts'),
+                styles: path_1.default.resolve(ops.context, 'src/styles'),
+            },
+            extensions: [
+                '.ts',
+                '.tsx',
+                '.js',
+                '.jsx',
+                '.json',
+                '.scss',
+            ],
+            symlinks: false,
+        },
+    };
+}
+exports.default = configFactory;

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

@@ -0,0 +1,5 @@
+import webpack from 'webpack';
+import { type OptionsT as BaseOptionsT } from './lib-base';
+type OptionsT = BaseOptionsT;
+export default function configFactory(ops: OptionsT): webpack.Configuration;
+export {};

package/config/webpack/lib-development.js

@@ -0,0 +1,33 @@
+"use strict";
+// Development Webpack config for ReactJS libraries.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const lib_base_1 = __importDefault(require("./lib-base"));
+function configFactory(ops) {
+    return (0, webpack_merge_1.merge)((0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'development', cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]', mode: 'development', outputPath: path_1.default.resolve(__dirname, ops.context, 'build/development') })), {
+        plugins: [
+            new webpack_1.default.DefinePlugin({
+                // Dev. build of the library wraps modules inside eval() statements,
+                // hiding BUILD_INFO literals from the host code's Webpack build, thus
+                // leaving them undefined. As a work around, let's get it via global
+                // window object.
+                BUILD_INFO: 'window.__DEV_BUILD_INFO__',
+                'process.env.BABEL_ENV': JSON.stringify('development'),
+                'process.env.NODE_ENV': JSON.stringify('development'),
+                'process.env.REACT_GLOBAL_STATE_DEBUG': JSON.stringify(true),
+            }),
+        ],
+        snapshot: {
+            // This enforces Webpack to watch for possible changes in node_modules
+            // dependencies, which is a great convenience in library-centric dev
+            // workflows.
+            managedPaths: [],
+        },
+    });
+}
+exports.default = configFactory;

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

@@ -0,0 +1,5 @@
+import webpack from 'webpack';
+import { type OptionsT as BaseOptionsT } from './lib-base';
+type OptionsT = BaseOptionsT;
+export default function configFactory(ops: OptionsT): webpack.Configuration;
+export {};

package/config/webpack/lib-production.js

@@ -0,0 +1,40 @@
+"use strict";
+// Production Webpack config for ReactJS libraries.
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const css_minimizer_webpack_plugin_1 = __importDefault(require("css-minimizer-webpack-plugin"));
+const webpack_1 = __importDefault(require("webpack"));
+const webpack_merge_1 = require("webpack-merge");
+const lib_base_1 = __importDefault(require("./lib-base"));
+function configFactory(ops) {
+    const baseConfig = (0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'production', cssLocalIdent: '[hash:base64:6]', mode: 'production', outputPath: path_1.default.resolve(__dirname, ops.context, 'build/production') }));
+    return (0, webpack_merge_1.merge)(baseConfig, {
+        devtool: 'source-map',
+        optimization: {
+            minimizer: [
+                '...',
+                new css_minimizer_webpack_plugin_1.default({
+                    minimizerOptions: {
+                        preset: ['default', {
+                                /* Due to the way our styles are organized, these dangerous
+                                * optimizations can break our styles, thus they are disabled. */
+                                discardUnused: false,
+                                reduceIdents: false,
+                                zindex: false,
+                            }],
+                    },
+                }),
+            ],
+        },
+        plugins: [
+            new webpack_1.default.DefinePlugin({
+                'process.env.BABEL_ENV': JSON.stringify('production'),
+                'process.env.NODE_ENV': JSON.stringify('production'),
+            }),
+        ],
+    });
+}
+exports.default = configFactory;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.26.0",
+  "version": "1.26.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"