From 311dd291e53c1c1cfc37e0836b9dc5d9d812fa92 Mon Sep 17 00:00:00 2001
From: Martin Bohal <mb@mbohal.cz>
Date: Thu, 23 Nov 2023 17:50:39 +0100
Subject: [PATCH] Make both production and development builds available

In order to allow the consuming apps to leverage friendly CSS class names and React tooling (PropTypes, StrictMode, etc.) during development this commit adds development builds of CSS and JS files into the `dist` folder.
---
 package.json            |  6 ++++--
 webpack.config.babel.js | 14 ++++++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 82a5a667..9a11eb57 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,10 @@
     "npm": ">=9"
   },
   "scripts": {
-    "build": "webpack --mode=production",
-    "copy": "cp \"src/docs/_assets/generated/react-ui.css\" dist & cp \"src/docs/_assets/generated/react-ui.js\" dist",
+    "build": "webpack --mode=production && webpack --mode=development",
+    "copy": "npm run copy:css && npm run copy:js",
+    "copy:css": "cp src/docs/_assets/generated/react-ui.css dist && cp src/docs/_assets/generated/react-ui.development.css dist",
+    "copy:js": "cp src/docs/_assets/generated/react-ui.js dist && cp src/docs/_assets/generated/react-ui.development.js dist",
     "eslint": "eslint --ext js,jsx src",
     "jest": "jest src --coverage",
     "lint": "npm run eslint && npm run markdownlint && npm run stylelint",
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index df11fe28..17f8bc0b 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -65,11 +65,13 @@ module.exports = (env, argv) => ({
     ],
   },
   optimization: {
-    minimize: true,
+    minimize: argv.mode === 'production',
     minimizer: [new TerserPlugin()],
   },
   output: {
-    filename: '[name].js',
+    filename: argv.mode === 'production'
+      ? '[name].js'
+      : '[name].development.js',
     libraryTarget: 'umd',
     path: Path.join(__dirname, 'src/docs/_assets/generated/'),
   },
@@ -84,8 +86,12 @@ module.exports = (env, argv) => ({
   },
   plugins: [
     new MiniCssExtractPlugin({
-      chunkFilename: '[id].css',
-      filename: '[name].css',
+      chunkFilename: argv.mode === 'production'
+        ? '[id].css'
+        : '[id].development.css',
+      filename: argv.mode === 'production'
+        ? '[name].css'
+        : '[name].development.css',
       ignoreOrder: false, // Enable to remove warnings about conflicting order
     }),
     new StyleLintPlugin({