@dr.pogodin/react-utils 1.25.5 → 1.26.0

package/config/webpack/app-development.js

@@ -1,80 +0,0 @@
-/**
- * @category Configs
- * @module webpack/app-development
- * @desc development Webpack configuration for applications.
- */
-const { clone, defaults } = require('lodash');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-
-const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-
-const baseFactory = require('./app-base');
-
-/**
- * @param {object} ops
- * @param {boolean} [ops.dontUseReactGlobalStateDebugging]
- * @param {boolean} [ops.dontUseHmr]
- */
-module.exports = function configFactory(ops) {
-  const o = defaults(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 MiniCssExtractPlugin({
-      chunkFilename: '[id].css',
-      filename: '[id].css',
-    }),
-    new webpack.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.HotModuleReplacementPlugin(),
-      new ReactRefreshPlugin({
-        overlay: {
-          sockIntegration: 'whm',
-        },
-      }),
-    );
-  }
-
-  const res = merge(baseFactory({
-    ...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;
-};

package/config/webpack/app-production.js

@@ -1,60 +0,0 @@
-/**
- * @category Configs
- * @module webpack/app-production
- * @desc Production Webpack configuration for applications.
- */
-
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-const baseFactory = 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.
- */
-module.exports = function configFactory(ops) {
-  const entry = [
-    '@dr.pogodin/react-utils/build/production/client/init',
-    ...Array.isArray(ops.entry) ? ops.entry : [ops.entry],
-  ];
-
-  const res = merge(baseFactory({
-    ...ops,
-    babelEnv: 'production',
-    entry,
-    mode: 'production',
-  }), {
-    optimization: {
-      minimizer: [
-        '...',
-        new CssMinimizerPlugin({
-          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.DefinePlugin({
-        'process.env.BABEL_ENV': JSON.stringify('production'),
-        'process.env.NODE_ENV': JSON.stringify('production'),
-      }),
-      new MiniCssExtractPlugin({
-        chunkFilename: '[contenthash].css',
-        filename: '[contenthash].css',
-      }),
-    ],
-  });
-
-  return res;
-};

package/config/webpack/lib-base.js

@@ -1,155 +0,0 @@
-// Base Webpack config for ReactJS libraries.
-
-const path = require('path');
-
-const autoprefixer = require('autoprefixer');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { ProgressPlugin } = require('webpack');
-
-const {
-  getLocalIdent,
-} = require('@dr.pogodin/babel-plugin-react-css-modules/utils');
-
-/**
- * @param {object} ops
- * @param {boolean} [ops.dontUseProgressPlugin] Set to not include progress
- *  plugin.
- * @return {object}
- */
-module.exports = function configFactory(ops) {
-  const plugins = [
-    new MiniCssExtractPlugin({ filename: 'style.css' }),
-  ];
-
-  if (!ops.dontUseProgressPlugin) plugins.push(new 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: /\.(jsx?|svg)$/,
-        exclude: [
-          /node_modules/,
-          /src[/\\]assets[/\\]fonts/,
-        ],
-        loader: 'babel-loader',
-        options: {
-          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,
-            }],
-          ],
-          ...ops.babelLoaderOptions || {},
-        },
-      }, {
-        /* Loads SCSS stylesheets. */
-        test: /\.scss/,
-        exclude: /node_modules/,
-        use: [
-          MiniCssExtractPlugin.loader, {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 3,
-              modules: {
-                getLocalIdent,
-                localIdentName: ops.cssLocalIdent,
-              },
-            },
-          }, {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                plugins: [
-                  autoprefixer,
-                ],
-              },
-            },
-          }, '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: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-        ],
-      }],
-    },
-    resolve: {
-      alias: {
-        /* Aliases to JS an JSX files are handled by Babel. */
-        assets: path.resolve(ops.context, 'src/assets'),
-        components: path.resolve(ops.context, 'src/shared/components'),
-        fonts: path.resolve(ops.context, 'src/assets/fonts'),
-        styles: path.resolve(ops.context, 'src/styles'),
-      },
-      extensions: ['.js', '.json', '.jsx', '.scss'],
-      symlinks: false,
-    },
-  };
-};

package/config/webpack/lib-development.js

@@ -1,45 +0,0 @@
-/**
- * @category Configs
- * @module webpack/lib-development
- * @desc
- * Development Webpack config for ReactJS libraries.
- */
-
-const path = require('path');
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-
-const baseFactory = require('./lib-base');
-
-module.exports = function configFactory(ops) {
-  return merge(
-    baseFactory({
-      ...ops,
-      babelEnv: 'development',
-      cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]',
-      mode: 'development',
-      outputPath: path.resolve(__dirname, ops.context, 'build/development'),
-    }),
-    {
-      plugins: [
-        new webpack.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: [],
-      },
-    },
-  );
-};

package/config/webpack/lib-production.js

@@ -1,44 +0,0 @@
-// Production Webpack config for ReactJS libraries.
-
-const path = require('path');
-
-const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
-const webpack = require('webpack');
-const { merge } = require('webpack-merge');
-
-const baseFactory = require('./lib-base');
-
-module.exports = function configFactory(ops) {
-  const baseConfig = baseFactory({
-    ...ops,
-    babelEnv: 'production',
-    cssLocalIdent: '[hash:base64:6]',
-    mode: 'production',
-    outputPath: path.resolve(__dirname, ops.context, 'build/production'),
-  });
-  return merge(baseConfig, {
-    devtool: 'source-map',
-    optimization: {
-      minimizer: [
-        '...',
-        new CssMinimizerPlugin({
-          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.DefinePlugin({
-        'process.env.BABEL_ENV': JSON.stringify('production'),
-        'process.env.NODE_ENV': JSON.stringify('production'),
-      }),
-    ],
-  });
-};