Merge pull request #22 from pbeshai/stringify-opts

Add support for stringify options

Author: pbeshai

src/__tests__/updateLocation-test.ts

@@ -48,6 +48,31 @@ describe('updateLocation', () => {
       '?foo=xxx'
     );
   });
+
+  it('handles stringify options', () => {
+    const location = makeMockLocation({
+      foo: 'one two',
+      bar: '[({1,2:3:4,5})]',
+    });
+    const newLocation = updateLocation(
+      { foo: 'o t h', bar: '[({1,2:3:6,5})]' },
+      location,
+      {
+        encode: false,
+      }
+    );
+    expect(newLocation.search).toBe('?bar=[({1,2:3:6,5})]&foo=o t h');
+
+    const newLocation2 = updateLocation(
+      { foo: 'o t h', bar: '[({1,2:6:4,5})]' },
+      location,
+      {
+        encode: false,
+        transformSearchString: (str) => str.replace(/ /g, '%20'),
+      }
+    );
+    expect(newLocation2.search).toBe('?bar=[({1,2:6:4,5})]&foo=o%20t%20h');
+  });
 });
 
 describe('updateInLocation', () => {
@@ -82,4 +107,21 @@ describe('updateInLocation', () => {
       '?foo=xxx'
     );
   });
+
+  it('handles stringify options', () => {
+    const location = makeMockLocation({
+      foo: 'one two',
+      bar: '[({1,2:3:4,5})]',
+    });
+    const newLocation = updateInLocation({ foo: 'o t h' }, location, {
+      encode: false,
+    });
+    expect(newLocation.search).toBe('?bar=[({1,2:3:4,5})]&foo=o t h');
+
+    const newLocation2 = updateInLocation({ foo: 'o t h' }, location, {
+      encode: false,
+      transformSearchString: (str) => str.replace(/ /g, '%20'),
+    });
+    expect(newLocation2.search).toBe('?bar=[({1,2:3:4,5})]&foo=o%20t%20h');
+  });
 });

src/index.ts

@@ -48,6 +48,11 @@ export {
   EncodedValueMap,
 } from './types';
 
-export { updateLocation, updateInLocation } from './updateLocation';
+export {
+  updateLocation,
+  updateInLocation,
+  ExtendedStringifyOptions,
+  transformSearchStringJsonSafe,
+} from './updateLocation';
 export { encodeQueryParams } from './encodeQueryParams';
 export { decodeQueryParams } from './decodeQueryParams';

src/updateLocation.ts

@@ -1,15 +1,51 @@
-import { stringify, parse as parseQueryString, parseUrl } from 'query-string';
+import {
+  stringify,
+  StringifyOptions,
+  parse as parseQueryString,
+  parseUrl,
+} from 'query-string';
 import { EncodedQuery } from './types';
 
+/**
+ * options passed to query-string stringify plus an
+ * addition of transformSearchString: a function that takes
+ * the result of stringify and runs a transformation on it.
+ * (e.g. replacing all instances of character x with y)
+ */
+export type ExtendedStringifyOptions = StringifyOptions & {
+  transformSearchString?: (searchString: string) => string;
+};
+
+/**
+ * An example of a transformSearchString function that undoes encoding of
+ * common JSON characters that are technically allowed in URLs.
+ */
+const JSON_SAFE_CHARS = `{}[],":`
+  .split('')
+  .map((d) => [d, encodeURIComponent(d)]);
+export function transformSearchStringJsonSafe(searchString: string): string {
+  let str = searchString;
+  for (let [char, code] of JSON_SAFE_CHARS) {
+    str = str.replace(new RegExp('\\' + code, 'g'), char);
+  }
+  return str;
+}
+
 /**
  * Update a location, wiping out parameters not included in encodedQuery
  * If a param is set to undefined it will be removed from the URL.
  */
 export function updateLocation(
   encodedQuery: EncodedQuery,
-  location: Location
+  location: Location,
+  stringifyOptions?: ExtendedStringifyOptions
 ): Location {
-  const encodedSearchString = stringify(encodedQuery);
+  let encodedSearchString = stringify(encodedQuery, stringifyOptions);
+  if (stringifyOptions && stringifyOptions.transformSearchString) {
+    encodedSearchString = stringifyOptions.transformSearchString(
+      encodedSearchString
+    );
+  }
   const search = encodedSearchString.length ? `?${encodedSearchString}` : '';
   const href = parseUrl(location.href || '').url + search;
 
@@ -33,7 +69,8 @@ export function updateLocation(
  */
 export function updateInLocation(
   encodedQueryReplacements: EncodedQuery,
-  location: Location
+  location: Location,
+  stringifyOptions?: ExtendedStringifyOptions
 ): Location {
   // if a query is there, use it, otherwise parse the search string
   const currQuery =
@@ -44,5 +81,5 @@ export function updateInLocation(
     ...encodedQueryReplacements,
   };
 
-  return updateLocation(newQuery, location);
+  return updateLocation(newQuery, location, stringifyOptions);
 }