From 146d8ec1934b7dd0cb1d1080f2c2b3c5599a476a Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Thu, 4 Feb 2021 10:34:46 +0100
Subject: [PATCH] Move args parsing/serialization to router module

---
 lib/api/src/modules/url.ts | 30 +++++++-----------------------
 lib/router/src/utils.ts    | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index 56569bdf5d1..6d0c3a403cd 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -5,11 +5,15 @@ import {
   SET_STORIES,
   SET_CURRENT_STORY,
 } from '@storybook/core-events';
-import { queryFromLocation, navigate as queryNavigate } from '@storybook/router';
+import {
+  queryFromLocation,
+  navigate as queryNavigate,
+  parseArgs,
+  stringifyArgs,
+} from '@storybook/router';
 import { toId, sanitize } from '@storybook/csf';
-
 import deepEqual from 'fast-deep-equal';
-import { parse, stringify } from 'qs';
+
 import { ModuleArgs, ModuleFn } from '../index';
 import { PanelPositions } from './layout';
 import { isStory } from '../lib/stories';
@@ -28,26 +32,6 @@ export interface SubState {
   customQueryParams: QueryParams;
 }
 
-const argsParseOptions = {
-  allowDots: true,
-  delimiter: ';',
-};
-
-const parseArgs = (argsString: string) =>
-  parse(
-    argsString
-      .split(';')
-      .map((part) => part.replace(':', '='))
-      .join(';'),
-    argsParseOptions
-  );
-
-const stringifyArgs = (args: Story['args']) =>
-  stringify(args, { ...argsParseOptions, encode: false })
-    .split(';')
-    .map((part) => part.replace('=', ':'))
-    .join(';');
-
 // Initialize the state based on the URL.
 // NOTE:
 //   Although we don't change the URL when you change the state, we do support setting initial state
diff --git a/lib/router/src/utils.ts b/lib/router/src/utils.ts
index ace2c101146..e8f8151da52 100644
--- a/lib/router/src/utils.ts
+++ b/lib/router/src/utils.ts
@@ -31,6 +31,22 @@ export const parsePath: (path: string | undefined) => StoryData = memoize(1000)(
   }
 );
 
+interface Args {
+  [key: string]: any;
+}
+
+const argsParseOptions = { allowDots: true, delimiter: ';' };
+
+export const parseArgs = (argsString: string): Args => {
+  const parts = argsString.split(';').map((part) => part.replace(':', '='));
+  return qs.parse(parts.join(';'), argsParseOptions);
+};
+
+export const stringifyArgs = (args: Args) => {
+  const parts = qs.stringify(args, { ...argsParseOptions, encode: false }).split(';');
+  return parts.map((part: string) => part.replace('=', ':')).join(';');
+};
+
 interface Query {
   [key: string]: any;
 }