Move args parsing/serialization to router module

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

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;
 }