Replace query-string dependency with URLSearchParams (#336)

.changeset/early-dogs-peel.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Replace `query-string` dependency with `URLSearchParams`

package.json

@@ -96,7 +96,6 @@
     "portfinder": "^1.0.32",
     "prettier": "^2.8.1",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",

src/Playroom/Frame.tsx

@@ -19,11 +19,15 @@ export default function Frame({
   components,
   FrameComponent,
 }: FrameProps) {
-  const { themeName, code } = useParams((rawParams) => ({
-    themeName:
-      typeof rawParams.themeName === 'string' ? rawParams.themeName : '',
-    code: typeof rawParams.code === 'string' ? rawParams.code : '',
-  }));
+  const { themeName, code } = useParams((rawParams) => {
+    const rawThemeName = rawParams.get('themeName');
+    const rawCode = rawParams.get('code');
+
+    return {
+      themeName: rawThemeName || '',
+      code: rawCode || '',
+    };
+  });
 
   const resolvedThemeName =
     themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;

src/Playroom/Preview.tsx

@@ -28,9 +28,10 @@ export interface PreviewProps {
 }
 export default ({ themes, components, FrameComponent }: PreviewProps) => {
   const { themeName, code, title } = useParams((rawParams): PreviewState => {
-    if (rawParams.code) {
+    const rawCode = rawParams.get('code');
+    if (rawCode) {
       const result = JSON.parse(
-        lzString.decompressFromEncodedURIComponent(String(rawParams.code)) ?? ''
+        lzString.decompressFromEncodedURIComponent(String(rawCode)) ?? ''
       );
 
       return {

src/StoreContext/StoreContext.tsx

@@ -453,14 +453,15 @@ export const StoreProvider = ({
     let widthsFromQuery: State['visibleWidths'];
     let titleFromQuery: State['title'];
 
-    if (params.code) {
+    const paramsCode = params.get('code');
+    if (paramsCode) {
       const {
         code: parsedCode,
         themes: parsedThemes,
         widths: parsedWidths,
         title: parsedTitle,
       } = JSON.parse(
-        lzString.decompressFromEncodedURIComponent(String(params.code)) ?? ''
+        lzString.decompressFromEncodedURIComponent(String(paramsCode)) ?? ''
       );
 
       codeFromQuery = parsedCode;

src/utils/params.ts

@@ -1,6 +1,5 @@
 import { createBrowserHistory } from 'history';
 import { useState, useEffect } from 'react';
-import queryString, { type ParsedQuery } from 'query-string';
 
 import playroomConfig from '../config';
 
@@ -11,10 +10,8 @@ export function updateUrlCode(code: string) {
 
   const existingQuery = getParamsFromQuery();
 
-  const newQuery = queryString.stringify({
-    ...existingQuery,
-    code,
-  });
+  const newQuery = new URLSearchParams(existingQuery);
+  newQuery.set('code', code);
 
   const params =
     playroomConfig.paramType === 'hash' ? `#?${newQuery}` : `?${newQuery}`;
@@ -24,18 +21,18 @@ export function updateUrlCode(code: string) {
 
 export function getParamsFromQuery(location = history.location) {
   try {
-    return queryString.parse(
+    return new URLSearchParams(
       playroomConfig.paramType === 'hash'
         ? location.hash.replace(/^#/, '')
         : location.search
     );
   } catch (err) {
-    return {};
+    return new URLSearchParams();
   }
 }
 
 export function useParams<ReturnType>(
-  selector: (rawParams: ParsedQuery) => ReturnType
+  selector: (rawParams: URLSearchParams) => ReturnType
 ): ReturnType {
   const [params, setParams] = useState(getParamsFromQuery);