Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace query-string dependency with URLSearchParams #336

Merged
merged 2 commits into from
Mar 5, 2024
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/early-dogs-peel.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'playroom': patch
---

Replace `query-string` dependency with `URLSearchParams`
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,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",
Expand Down
33 changes: 0 additions & 33 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 9 additions & 5 deletions src/Playroom/Frame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '',
};
});
Comment on lines -22 to +30
Copy link
Contributor Author

@askoufis askoufis Mar 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

query-string's API returned a single value or an array, but URLSearchParams' .get API returns string | null, so there's no need for a typeof check here anymore.


const resolvedThemeName =
themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;
Expand Down
5 changes: 3 additions & 2 deletions src/Playroom/Preview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
5 changes: 3 additions & 2 deletions src/StoreContext/StoreContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 5 additions & 8 deletions src/utils/params.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { createBrowserHistory } from 'history';
import { useState, useEffect } from 'react';
import queryString, { type ParsedQuery } from 'query-string';

import playroomConfig from '../config';

Expand All @@ -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}`;
Expand All @@ -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();
Comment on lines 23 to +30
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This try catch might not even be needed anymore since AFAICT URLSearchParams constructor never throws. I couldn't make it throw on any input, and a cursory glance at the spec didn't mention throwing. But probably better to be safe than sorry.

}
}

export function useParams<ReturnType>(
selector: (rawParams: ParsedQuery) => ReturnType
selector: (rawParams: URLSearchParams) => ReturnType
): ReturnType {
const [params, setParams] = useState(getParamsFromQuery);

Expand Down