@dr.pogodin/react-utils 1.14.3 → 1.15.2

package/config/babel/node-ssr.js

@@ -1,55 +1,8 @@
-/**
- * [Babel](https://babeljs.io/) preset for NodeJS builds & server-side
- * execution.
- *
- * To include it into a Babel configuration:
- * ```json
- * {
- *   "presets": ["@dr.pogodin/react-utils/config/babel/node-ssr"]
- * }
- * ```
- *
- * To provide additional preset options (for supported options see
- * documentation for _ops_ argument of
- * {@link module:babel/node.getConfig getConfig()} method below):
- * ```json
- * {
- *   "presets": [
- *     ["@dr.pogodin/react-utils/config/babel/node-ssr", {
- *       "someOption": "someValue"
- *     }]
- *   ]
- * }
- * ```
- *
- * This preset builds on top of {@link module:babel/webpack babel/webpack}
- * preset: it performs all the same setups, then on top of it does
- * the following:
- *
- * - Sets up [babel-plugin-css-modules-transform](https://www.npmjs.com/package/babel-plugin-css-modules-transform),
- *   which transforms (S)CSS imports into JS objects mapping original (S)CSS
- *   class names into transformed class names emitted into CSS bundle (thus,
- *   matching (S)CSS transformations done by
- *   `@dr.pogodin/babel-plugin-react-css-modules` plugin on (S)CSS code.
- *
- * - Sets up [babel-plugin-tranform-assets](https://www.npmjs.com/package/@dr.pogodin/babel-plugin-transform-assets)
- *   to convert GIF, JPEG, JPG, and PNG imports into emitted asset paths, like
- *   `/images/[FILE_HASH].[FILE_EXTENSION]`. The `baseAssetsOutputPath` preset
- *   option allows to add custom prefix to these paths.
- *
- * - In _development_ environment it removes `react-refresh/babel`.
- */
 /* eslint-disable import/no-extraneous-dependencies */
 
 const { pick, pull } = require('lodash');
-const postcssScss = require('postcss-scss');
 const getWebpackBabelConfig = require('./webpack');
 
-const {
-  generateScopedNameDev,
-  generateScopedNameProd,
-} = require('../shared/utils');
-
 /**
  * Creates a new base config.
  * @param {object} babel Babel compiler.
@@ -100,29 +53,14 @@ function newBase(babel, options = {}) {
  * **Beware:** It mutates `config`.
  *
  * @param {object} config
- * @param {string} env `development` or `production`.
  * @return {object} Returns mutated config for chaining.
  * @ignore
  */
-function addStyling(config, env) {
-  const cssModulesTransformOps = {
-    extensions: ['.css', '.scss'],
-    processorOpts: { parser: postcssScss },
-  };
-  switch (env) {
-    case getWebpackBabelConfig.ENVIRONMENTS.DEV:
-    case getWebpackBabelConfig.ENVIRONMENTS.TEST:
-      cssModulesTransformOps.generateScopedName = generateScopedNameDev;
-      break;
-    case getWebpackBabelConfig.ENVIRONMENTS.PROD:
-      cssModulesTransformOps.generateScopedName = generateScopedNameProd;
-      break;
-    default:
-  }
-  config.plugins.push([
-    '@dr.pogodin/css-modules-transform',
-    cssModulesTransformOps,
-  ]);
+function addStyling(config) {
+  const cssModulesOps = config.plugins.find(
+    ([name]) => name === '@dr.pogodin/react-css-modules',
+  )[1];
+  cssModulesOps.replaceImport = true;
   return config;
 }
 

package/config/babel/webpack.js

@@ -1,59 +1,16 @@
-/**
- * [Babel](https://babeljs.io/) preset for Webpack builds.
- *
- * To include it into a Babel configuration:
- * ```json
- * {
- *   "presets": ["@dr.pogodin/react-utils/config/babel/webpack"]
- * }
- * ```
- *
- * To provide additional options (for supported options see documentation for
- * _ops_ argument of {@link module:babel/webpack.getPreset getPreset()} method
- * below):
- * ```json
- * {
- *   "presets": [
- *     ["@dr.pogodin/react-utils/config/babel/webpack", {
- *       "someOption": "someValue"
- *     }]
- *   ]
- * }
- * ```
- *
- * This preset does the following:
- *
- * - Sets up [@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env),
- *   and [@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)
- *   presets which are needed to compile modern JS(X) code.
- *
- * - Sets up [@dr.pogodin/babel-preset-svgr](https://www.npmjs.com/package/@dr.pogodin/babel-preset-svgr)
- *   preset, which allows to import SVG files as React components.
- *
- * - Sets up [babel-plugin-module-resolver](https://www.npmjs.com/package/babel-plugin-module-resolver),
- *   which helps to resolve module imports relative to `/src/shared`,
- *   and `/src` folders of host codebase.
- *
- * - Sets up [@babel/plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime),
- *   which enables the re-use of Babel's injected helper code to save on
- *   codesize.
- *
- * - Sets up [@dr.pogodin/babel-plugin-react-css-modules](https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules),
- *   which is a part of CSS modules setup that transforms `styleName` props of
- *   React components into globally unique `className` props. Generated class
- *   names are verbose in _development_ and _test_ environments, to faciliate
- *   debugging, and they are short 6-symbol-long hashes in _production_ Babel
- *   environment, to ensure compact CSS and JS output code.
- *
- * - In _development_ environment it also sets up `react-refresh/babel`.
- */
-
 const { pick } = require('lodash');
 
 const {
-  generateScopedNameDev,
-  generateScopedNameProd,
-} = require('../shared/utils');
+  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]',
+);
 
 /**
  * @static

package/node-entry.js

@@ -0,0 +1,5 @@
+const build = process.env.NODE_ENV === 'production'
+  ? 'production' : 'development';
+
+// eslint-disable-next-line import/no-dynamic-require
+module.exports = require(`./build/${build}`);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.14.3",
+  "version": "1.15.2",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -9,16 +9,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.2",
-    "@dr.pogodin/babel-plugin-react-css-modules": "^6.6.1",
-    "@dr.pogodin/react-global-state": "^0.6.5",
-    "@dr.pogodin/react-themes": "^1.3.3",
+    "@dr.pogodin/babel-plugin-react-css-modules": "^6.7.0",
+    "@dr.pogodin/react-global-state": "^0.7.1",
+    "@dr.pogodin/react-themes": "^1.4.1",
     "axios": "^0.26.0",
     "commander": "^9.0.0",
     "compression": "^1.7.4",
     "config": "^3.3.7",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.10.7",
+    "dayjs": "^1.10.8",
     "express": "^4.17.3",
     "helmet": "^5.0.2",
     "http-status-codes": "^2.2.0",
@@ -32,7 +32,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.2.1",
+    "react-router-dom": "^6.2.2",
     "request-ip": "^2.1.3",
     "rimraf": "^3.0.2",
     "serialize-javascript": "^6.0.0",
@@ -43,7 +43,7 @@
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.17.3",
+    "@babel/cli": "^7.17.6",
     "@babel/core": "^7.17.5",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/eslint-plugin": "^7.16.5",
@@ -51,7 +51,6 @@
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
-    "@dr.pogodin/babel-plugin-css-modules-transform": "^1.10.0",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.1.1",
     "@dr.pogodin/babel-preset-svgr": "^1.4.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
@@ -60,22 +59,22 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-module-resolver": "^4.1.0",
     "core-js": "^3.21.1",
-    "css-loader": "^6.6.0",
+    "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
-    "eslint": "^8.9.0",
+    "eslint": "^8.10.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-import-resolver-babel-module": "^5.3.1",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jest": "^26.1.1",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.3",
     "eslint-plugin-react-hooks": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.5.3",
+    "mini-css-extract-plugin": "^2.6.0",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.6",
+    "postcss": "^8.4.8",
     "postcss-loader": "^6.2.1",
     "postcss-scss": "^4.0.3",
     "pretty": "^2.0.0",
@@ -83,24 +82,50 @@
     "react-test-renderer": "^17.0.2",
     "regenerator-runtime": "^0.13.9",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.49.8",
+    "sass": "^1.49.9",
     "sass-loader": "^12.6.0",
     "sitemap": "^7.1.1",
-    "stylelint": "^14.5.1",
+    "stylelint": "^14.5.3",
     "stylelint-config-standard-scss": "^3.0.0",
     "supertest": "^6.2.2",
-    "webpack": "^5.69.1",
+    "webpack": "^5.70.0",
     "webpack-dev-middleware": "^5.3.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-merge": "^5.8.0",
-    "workbox-core": "^6.4.2",
-    "workbox-precaching": "^6.4.2",
-    "workbox-webpack-plugin": "^6.4.2"
+    "workbox-core": "^6.5.1",
+    "workbox-precaching": "^6.5.1",
+    "workbox-webpack-plugin": "^6.5.1"
   },
   "engines": {
     "node": ">=14.x",
     "npm": ">=6.x"
   },
+  "main": "./node-entry.js",
+  "exports": {
+    ".": {
+      "browser": {
+        "development": "./build/development/web.bundle.js",
+        "production": "./build/production/web.bundle.js"
+      },
+      "node": {
+        "webpack": "./build/production/web.bundle.js",
+        "default": "./node-entry.js"
+      },
+      "react-native": "./node-entry.js"
+    },
+    "./config/*": "./config/*.js",
+    "./mixins": "./src/styles/mixins.scss",
+    "./dev-styles": {
+      "node": "./null.js",
+      "browser": "./build/development/style.css"
+    },
+    "./prod-styles": {
+      "node": "./null.js",
+      "browser": "./build/production/style.css"
+    },
+    "./build/development/client/init": "./build/development/client/init.js",
+    "./build/production/client/init": "./build/production/client/init.js"
+  },
   "homepage": "https://dr.pogodin.studio",
   "keywords": [
     "Development",
@@ -115,7 +140,6 @@
     "Web"
   ],
   "license": "MIT",
-  "main": "index.js",
   "name": "@dr.pogodin/react-utils",
   "repository": {
     "type": "git",

package/config/shared/utils.js

@@ -1,20 +0,0 @@
-/**
- * Misc utilities reusable in different JS-format config files.
- */
-
-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]',
-);
-
-module.exports = {
-  generateScopedNameDev,
-  generateScopedNameProd,
-};

package/dev-styles.js

@@ -1,7 +0,0 @@
-const lib = require('./index');
-
-if (lib.isomorphy.IS_CLIENT_SIDE) {
-  /* eslint-disable global-require */
-  require('./build/development/style.css');
-  /* eslint-enable global-require */
-}

package/index.js

@@ -1,32 +0,0 @@
-/**
- * Entry point of the library.
- *
- * Depending on NODE_ENV variable, it proxies production or development build of
- * the library.
- */
-/* eslint-disable global-require, import/no-dynamic-require,
-  import/no-unresolved, no-eval */
-
-let lib;
-
-try {
-  if (process.versions.node) {
-    lib = process.env.NODE_ENV === 'production'
-      ? './build/production' : './build/development';
-    lib = eval('require')(lib);
-  }
-} catch (error) {
-  lib = undefined;
-}
-
-if (!lib) {
-  // NOTE: process.env.NODE_ENV check must be done explicitly here to ensure
-  // that webpack is able to optimize out the unncessary branch.
-  if (process.env.NODE_ENV === 'production') {
-    lib = require('./build/production/web.bundle');
-  } else {
-    lib = require('./build/development/web.bundle');
-  }
-}
-
-module.exports = lib;

package/mixins.scss

@@ -1 +0,0 @@
-@import "src/styles/mixins";

package/prod-styles.js

@@ -1,7 +0,0 @@
-const lib = require('./index');
-
-if (lib.isomorphy.IS_CLIENT_SIDE) {
-  /* eslint-disable global-require */
-  require('./build/production/style.css');
-  /* eslint-enable global-require */
-}