feat: 🎸 add removeEmptyValue config

Previously the url contained all synced form values - including empty
values.

BREAKING CHANGE: 🧨 From now on, empty control values will be removed from the URL query
params.

Author: gili-lumigo

.all-contributorsrc

@@ -22,6 +22,15 @@
         "ideas",
         "infra"
       ]
+    },
+    {
+      "login": "ritox842",
+      "name": "Gili Yaniv",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7280441?v=4",
+      "profile": "https://github.com/ritox842",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7

BREAKING_CHANGES.md

@@ -1,3 +1,14 @@
+#v3
+### `removeEmptyValue`
+Previously the url contained all synced form values - including empty values.
+This behaviour caused the query params to contain keys without values and looked kind of messy.
+
+This change is made for altering the default behaviour of the control -> query param binding and instead of adding redundant empty
+values to the URL, from now on the url will have only non-nullish values.
+
+You can still get the old behaviour by overriding `removeEmptyValue` for each control def you would like to keep syncing
+empty values from the control to the query params.
+
 #v2
 
 ### `twoWay` Strategy 

README.md

@@ -90,6 +90,10 @@ Before updating the control with the value, the manager will parse it based on t
 
 Whether to sync the initial control value in the URL. Relevant only when using the `modelToUrl` strategy. 
 
+### `removeEmptyValue`
+
+Whether to remove empty control values from url.
+
 ### `parser`
 
 Provide a custom parser. For example, the default `array` parser converts the value to an `array` of strings. If we need it to be an array of numbers, we can pass the following `parser`:
@@ -164,6 +168,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
 <table>
   <tr>
     <td align="center"><a href="https://www.netbasal.com/"><img src="https://avatars1.githubusercontent.com/u/6745730?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Netanel Basal</b></sub></a><br /><a href="https://github.com/@ngneat/bind-query-params/commits?author=NetanelBasal" title="Code">💻</a> <a href="#content-NetanelBasal" title="Content">🖋</a> <a href="https://github.com/@ngneat/bind-query-params/commits?author=NetanelBasal" title="Documentation">📖</a> <a href="#ideas-NetanelBasal" title="Ideas, Planning, & Feedback">🤔</a> <a href="#infra-NetanelBasal" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="https://github.com/ritox842"><img src="https://avatars.githubusercontent.com/u/7280441?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gili Yaniv</b></sub></a><br /><a href="https://github.com/@ngneat/bind-query-params/commits?author=ritox842" title="Code">💻</a></td>
   </tr>
 </table>
 

package-lock.json

@@ -29,6 +29,7 @@
     "@angular/platform-browser-dynamic": "~11.0.5",
     "@angular/router": "~11.0.5",
     "lodash.set": "^4.3.2",
+    "lodash.size": "^4.2.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
@@ -44,6 +45,7 @@
     "@ngneat/spectator": "^6.1.2",
     "@types/jasmine": "~3.6.0",
     "@types/lodash.set": "^4.3.2",
+    "@types/lodash.size": "^4.2.6",
     "@types/node": "^12.11.1",
     "all-contributors-cli": "^6.19.0",
     "angular-cli-ghpages": "1.0.0-rc.1",

package.json

@@ -32,6 +32,10 @@ export class QueryParamDef<QueryParams = any> {
     return this.config.syncInitialValue || false;
   }
 
+  get removeEmptyValue() {
+    return this.config.removeEmptyValue === undefined ? true : this.config.removeEmptyValue;
+  }
+
   serialize(controlValue: any): string | null {
     if (this.serializer) {
       return this.serializer(controlValue);

projects/ngneat/bind-query-params/src/lib/QueryParamDef.ts

@@ -604,4 +604,83 @@ describe('BindQueryParams', () => {
       }));
     });
   });
+
+  describe('removeEmptyValue', () => {
+    const emptyString = '';
+    const emptyObject = {};
+    const emptyArray: any[] = [];
+
+    interface EmptyValuesParams {
+      string: string;
+      object: string;
+      array: boolean;
+    }
+
+    it('should remove empty value from url', fakeAsync(() => {
+      spectator = createComponent();
+      tick();
+      skipInitialSync(spectator);
+      spectator.component.group = new FormGroup({
+        string: new FormControl(emptyString),
+        object: new FormControl(emptyObject),
+        array: new FormControl(emptyArray),
+      });
+      // @ts-ignore
+      spectator.component.bindQueryParams = spectator.component.factory
+        .create<EmptyValuesParams>([
+          { queryKey: 'string', type: 'string' },
+          { queryKey: 'object', type: 'object' },
+          { queryKey: 'array', type: 'array' },
+        ])
+        .connect(spectator.component.group);
+
+      tick();
+
+      assertRouterCall(spectator, {
+        string: null,
+        object: null,
+        array: null,
+      });
+
+      expect(spectator.inject(Router).navigate).not.toHaveBeenCalled();
+    }));
+
+    it('should not remove empty value from url', fakeAsync(() => {
+      spectator = createComponent();
+      tick();
+      skipInitialSync(spectator);
+      spectator.component.group = new FormGroup({
+        string: new FormControl(emptyString),
+        object: new FormControl(emptyObject),
+        array: new FormControl(emptyArray),
+      });
+      // @ts-ignore
+      spectator.component.bindQueryParams = spectator.component.factory
+        .create<EmptyValuesParams>([
+          { queryKey: 'string', type: 'string', removeEmptyValue: false },
+          { queryKey: 'object', type: 'object', removeEmptyValue: false },
+          { queryKey: 'array', type: 'array', removeEmptyValue: false },
+        ])
+        .connect(spectator.component.group);
+
+      tick();
+      // @ts-ignore
+      const stringDef = spectator.component.bindQueryParams.getDef('string');
+      // @ts-ignore
+      const objectDef = spectator.component.bindQueryParams.getDef('object');
+      // @ts-ignore
+      const arrayDef = spectator.component.bindQueryParams.getDef('array');
+
+      assertRouterCall(spectator, {
+        // @ts-ignore
+        string: stringDef.serialize(emptyString),
+        // @ts-ignore
+        object: objectDef.serialize(emptyObject),
+        // @ts-ignore
+        array: arrayDef.serialize(emptyArray),
+      });
+
+      expect(spectator.inject(Router).navigate).not.toHaveBeenCalled();
+    }));
+  });
 });

projects/ngneat/bind-query-params/src/lib/lib.spec.ts

@@ -10,6 +10,7 @@ export type QueryParamParams<QueryParams = any> = {
   parser?: (value: string) => any;
   serializer?: (value: any) => string | null;
   syncInitialValue?: boolean;
+  removeEmptyValue?: boolean;
 };
 
 export interface BindQueryParamsOptions {

projects/ngneat/bind-query-params/src/lib/types.ts

@@ -1,6 +1,19 @@
 import { AbstractControl } from '@angular/forms';
 import { ParamDefType, ResolveParamsOption } from './types';
 import { QueryParamDef } from './QueryParamDef';
+import size from 'lodash.size';
+
+function isEmptyValue(def: QueryParamDef, value: any) {
+  switch (def.type) {
+    case 'array':
+    case 'object':
+      return !size(value);
+    case 'string':
+      return !value || value === '';
+    default:
+      return false;
+  }
+}
 
 export function parse(value: any, type: ParamDefType) {
   switch (type) {
@@ -32,7 +45,15 @@ export function resolveParams(params: ResolveParamsOption | ResolveParamsOption[
   const result: Record<string, string | null> = {};
 
   toArray.forEach(({ def, value }) => {
-    result[def.queryKey] = def.serialize(value);
+    let defValue: string | null;
+
+    if (def.removeEmptyValue) {
+      defValue = isEmptyValue(def, value) ? null : def.serialize(value);
+    } else {
+      defValue = def.serialize(value);
+    }
+
+    result[def.queryKey] = defValue;
   });
 
   return result;