Added webpack-merge

README.md

@@ -50,6 +50,8 @@ Resulted value:
 }
 ```
 
+In case of an error like non-existing form, invalid selector, or no elements `formToObject` will return `undefined` for every valid
+cases the method will return an object `{}`.
 
 ## Browser support
 

package.json

@@ -24,8 +24,8 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "webpack --mode production",
-    "dev": "webpack --mode development -d inline-source-map --watch",
+    "build": "webpack --config webpack.prod.js",
+    "dev": "webpack --config webpack.dev.js",
     "test": "jest",
     "test:e2e": "wdio run ./wdio.conf.ts"
   },
@@ -55,6 +55,7 @@
     "typescript": "^5.2.2",
     "wdio-wait-for": "^3.0.7",
     "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0"
+    "webpack-cli": "^4.10.0",
+    "webpack-merge": "^5.10.0"
   }
 }

test/integration/fixtures/select/select6.html

@@ -0,0 +1,6 @@
+<form data-testid="testForm">
+    <select id="select" data-testid="select" name="select[]" multiple>
+        <option value="a" selected>a</option>
+        <option value="b" selected>b</option>
+    </select>
+</form>

test/integration/select.test.ts

@@ -53,6 +53,17 @@ describe('select', () => {
 
       expect(formToObject($form)).toEqual({'countries':['RO', 'MC']});
     });
+
+    it('and name contains empty brackets []', async () => {
+      document.body.innerHTML = readIntegrationFixture("select/select6.html");
+      const $form = screen.queryByTestId('testForm') as HTMLFormElement;
+      const user = userEvent.setup();
+
+      const $countries = screen.queryByTestId('select') as HTMLSelectElement;
+      await user.selectOptions($countries, ['a', 'b']);
+
+      expect(formToObject($form)).toEqual({'select':['a', 'b']});
+    });
   });
 
   describe('A form with a select element and options dont have value attribute', () =>{

test/manual/playground.html

@@ -0,0 +1,74 @@
+<form action="/submit" method="post" data-testid="testForm" id="testForm">
+<!--    <label for="text">Text:</label>-->
+<!--    <input type="text" id="text" name="text" value="text value"><br><br>-->
+
+<!--    <label for="password">Password:</label>-->
+<!--    <input type="password" id="password" name="password" value="password value"><br><br>-->
+
+<!--    <label for="email">Email:</label>-->
+<!--    <input type="email" id="email" name="email" value="[email protected]"><br><br>-->
+
+<!--    <label for="number">Number:</label>-->
+<!--    <input type="number" id="number" name="number" value="12345"><br><br>-->
+
+<!--    <label for="date">Date:</label>-->
+<!--    <input type="date" id="date" name="date" value="2023-12-16"><br><br>-->
+
+<!--    <label for="time">Time:</label>-->
+<!--    <input type="time" id="time" name="time" value="10:30"><br><br>-->
+
+<!--    <label for="range">Range:</label>-->
+<!--    <input type="range" id="range" name="range" value="60"><br><br>-->
+
+<!--    <label for="color">Color:</label>-->
+<!--    <input type="color" id="color" name="color" value="#000000"><br><br>-->
+
+<!--    <label for="checkbox">Checkbox:</label>-->
+<!--    <input type="checkbox" id="checkbox" name="checkbox" checked><br><br>-->
+
+<!--    <label for="radio">Radio:</label>-->
+<!--    <input type="radio" id="radio1" name="radio" value="option1">-->
+<!--    <label for="radio1">Option 1</label>-->
+<!--    <input type="radio" id="radio2" name="radio" value="option2" checked>-->
+<!--    <label for="radio2">Option 2</label><br><br>-->
+<!--    <input type="radio" id="radio3" name="radio" value="option3">-->
+<!--    <label for="radio2">Option 3</label><br><br>-->
+
+<!--    <label for="file">File:</label>-->
+<!--    <input type="file" id="file" name="file"><br><br>-->
+
+<!--    <label for="textarea">Textarea:</label>-->
+<!--    <textarea id="textarea" name="textarea">textarea value</textarea><br><br>-->
+
+<!--    <label for="select">Select:</label>-->
+<!--    <select id="select" name="select">-->
+<!--        <option value="option1">Option 1</option>-->
+<!--        <option value="option2" selected>Option 2</option>-->
+<!--        <option value="option3">Option 3</option>-->
+<!--    </select><br><br>-->
+
+<!--    <label for="hidden">Hidden:</label>-->
+<!--    <input type="hidden" id="hidden" name="hidden" value="hiddenValue"><br><br>-->
+
+<!--    <label for="submit">Submit:</label>-->
+<!--    <input type="submit" id="submit" value="Submit"><br><br>-->
+
+<!--    <label for="reset">Reset:</label>-->
+<!--    <input type="reset" id="reset" value="Reset"><br><br>-->
+
+    <select id="multiselect" data-testid="multiselect" name="multiselect[]" multiple>
+        <option value="a" selected>a</option>
+        <option value="b" selected>b</option>
+    </select>
+
+<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option1" id="checkboxGroup-1" checked> Option 1</label>-->
+<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option2" id="checkboxGroup-2" checked> Option 2</label>-->
+<!--    <label><input type="checkbox" name="checkboxGroup[]" value="option3" id="checkboxGroup-3" checked> Option 3</label>-->
+</form>
+
+<!--<script src="./js/formToObject.min.js"></script>-->
+
+<script src="../../build/bundle/formToObject.min.js"></script>
+<script>
+    console.log(formToObject('testForm'));
+</script>

webpack.config.js → webpack.common.js

@@ -1,7 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require("path");
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
   entry: "./src/index.ts",
@@ -17,11 +15,6 @@ module.exports = {
     libraryExport: ['default']
   },
 
-  optimization: {
-    minimize: true,
-    minimizer: [new TerserPlugin()],
-  },
-
   resolve: {
     extensions: [".ts"]
   },
@@ -33,9 +26,6 @@ module.exports = {
         loader: "ts-loader",
         exclude: /node_modules/
       },
-
-      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
     ]
   }
 };

webpack.dev.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { merge } = require('webpack-merge');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'source-map',
+  watch: true,
+  module: {
+    rules: [
+      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
+      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
+    ]
+  }
+});

webpack.prod.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { merge } = require('webpack-merge');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const common = require('./webpack.common.js');
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const TerserPlugin = require("terser-webpack-plugin");
+
+module.exports = merge(common, {
+  mode: 'production',
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+});