feat: replace qs with qs-esm (#6966)

AlessioGr · web-flow · commit 6c99326d5920 · 2024-07-09T14:33:38.000Z
qs-esm is a qs fork I created and doesn't add bloated polyfills, is ESM-only, has a smaller bundle size and comes with types included. qs: https://bundlephobia.com/package/qs@6.12.1 (11kb) https://npm.anvaka.com/#/view/2d/qs (15 dependencies) qs-esm: https://bundlephobia.com/package/qs-esm@7.0.0 (4.2kb) https://npm.anvaka.com/#/view/2d/qs-esm (1 dependency) I don't agree with the backwards philosophy of qs: ljharb/qs#404 (comment) ("more deps is better", lower bundle size as opt-in, maximum environment compatibility as opt-out) qs imports waaay too many useless dependencies
diff --git a/docs/queries/overview.mdx b/docs/queries/overview.mdx
@@ -154,7 +154,7 @@ This one isn't too bad, but more complex queries get unavoidably more difficult
 **For example, using fetch:**
 
 ```js
-import qs from 'qs'
+import { stringify } from 'qs-esm'
 
 const query = {
   color: {
@@ -165,7 +165,7 @@ const query = {
 }
 
 const getPosts = async () => {
-  const stringifiedQuery = qs.stringify(
+  const stringifiedQuery = stringify(
     {
       where: query, // ensure that `qs` adds the `where` property, too!
     },
diff --git a/package.json b/package.json
@@ -103,7 +103,6 @@
     "@types/minimist": "1.2.5",
     "@types/node": "20.12.5",
     "@types/prompts": "^2.4.5",
-    "@types/qs": "6.9.14",
     "@types/react": "npm:types-react@19.0.0-beta.2",
     "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
     "@types/semver": "^7.5.3",
diff --git a/packages/next/package.json b/packages/next/package.json
@@ -72,7 +72,7 @@
     "graphql-playground-html": "1.6.30",
     "http-status": "1.6.2",
     "path-to-regexp": "^6.2.1",
-    "qs": "6.12.1",
+    "qs-esm": "7.0.2",
     "react-diff-viewer-continued": "3.2.6",
     "sass": "1.77.4",
     "sonner": "^1.5.0",
diff --git a/packages/next/src/utilities/createPayloadRequest.ts b/packages/next/src/utilities/createPayloadRequest.ts
@@ -2,7 +2,7 @@ import type { CustomPayloadRequestProperties, PayloadRequest, SanitizedConfig }
 
 import { initI18n } from '@payloadcms/translations'
 import { executeAuthStrategies, getDataLoader, parseCookies } from 'payload'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import { URL } from 'url'
 
 import { sanitizeLocales } from './addLocalesToRequest.js'
diff --git a/packages/next/src/utilities/initPage/handleAuthRedirect.ts b/packages/next/src/utilities/initPage/handleAuthRedirect.ts
@@ -1,5 +1,5 @@
 import { redirect } from 'next/navigation.js'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 
 import { isAdminAuthRoute, isAdminRoute } from './shared.js'
 
diff --git a/packages/next/src/utilities/initPage/index.ts b/packages/next/src/utilities/initPage/index.ts
@@ -5,7 +5,7 @@ import { initI18n } from '@payloadcms/translations'
 import { findLocaleFromCode } from '@payloadcms/ui/shared'
 import { headers as getHeaders } from 'next/headers.js'
 import { createLocalReq, isEntityHidden, parseCookies } from 'payload'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 
 import type { Args } from './types.js'
 
diff --git a/packages/next/src/utilities/meta.ts b/packages/next/src/utilities/meta.ts
@@ -3,7 +3,7 @@ import type { Icon } from 'next/dist/lib/metadata/types/metadata-types.js'
 import type { MetaConfig } from 'payload'
 
 import { payloadFaviconDark, payloadFaviconLight, staticOGImage } from '@payloadcms/ui/assets'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 
 const defaultOpenGraph = {
   description:
diff --git a/packages/next/src/views/Version/SelectComparison/index.tsx b/packages/next/src/views/Version/SelectComparison/index.tsx
@@ -9,7 +9,7 @@ import {
   useTranslation,
 } from '@payloadcms/ui'
 import { formatDate } from '@payloadcms/ui/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useState } from 'react'
 
 import type { Props } from './types.js'
diff --git a/packages/richtext-lexical/bundle.js b/packages/richtext-lexical/bundle.js
@@ -54,7 +54,7 @@ const resultClient = await esbuild
       '*.scss',
       '*.css',
       '*.svg',
-      'qs',
+      'qs-esm',
       '@dnd-kit/core',
       '@payloadcms/graphql',
       '@payloadcms/translations',
diff --git a/packages/richtext-lexical/package.json b/packages/richtext-lexical/package.json
@@ -72,7 +72,7 @@
     "payload": "workspace:*"
   },
   "peerDependencies": {
-    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/modal": "3.0.0-beta.2",
     "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@lexical/headless": "0.16.1",
     "@lexical/link": "0.16.1",
diff --git a/packages/ui/bundle.js b/packages/ui/bundle.js
@@ -113,7 +113,7 @@ function require(m) {
     external: [
       '*.scss',
       '*.css',
-      'qs',
+      'qs-esm',
       '@dnd-kit/core',
       '@payloadcms/graphql',
       '@payloadcms/translations',
@@ -165,7 +165,7 @@ const resultShared = await esbuild
     external: [
       '*.scss',
       '*.css',
-      'qs',
+      'qs-esm',
       '@dnd-kit/core',
       '@payloadcms/graphql',
       '@payloadcms/translations',
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -73,7 +73,7 @@
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
     "@dnd-kit/sortable": "7.0.2",
-    "@faceless-ui/modal": "3.0.0-beta.0",
+    "@faceless-ui/modal": "3.0.0-beta.2",
     "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@faceless-ui/window-info": "3.0.0-beta.0",
     "@monaco-editor/react": "4.5.1",
@@ -84,7 +84,7 @@
     "dequal": "2.0.3",
     "md5": "2.3.0",
     "object-to-formdata": "4.5.1",
-    "qs": "6.12.1",
+    "qs-esm": "7.0.2",
     "react-animate-height": "2.1.2",
     "react-datepicker": "6.9.0",
     "react-image-crop": "10.1.8",
@@ -103,7 +103,6 @@
     "@hyrious/esbuild-plugin-commonjs": "^0.2.4",
     "@payloadcms/eslint-config": "workspace:*",
     "@types/body-scroll-lock": "^3.1.0",
-    "@types/qs": "6.9.7",
     "@types/react": "npm:types-react@19.0.0-beta.2",
     "@types/react-datepicker": "6.2.0",
     "@types/react-dom": "npm:types-react-dom@19.0.0-beta.2",
diff --git a/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx b/packages/ui/src/elements/DocumentDrawer/DrawerContent.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useModal } from '@faceless-ui/modal'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
diff --git a/packages/ui/src/elements/SortComplex/index.tsx b/packages/ui/src/elements/SortComplex/index.tsx
@@ -6,7 +6,7 @@ import { getTranslation } from '@payloadcms/translations'
 import { usePathname, useRouter } from 'next/navigation.js'
 import { sortableFieldTypes } from 'payload'
 import { fieldAffectsData } from 'payload/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useEffect, useState } from 'react'
 
 export type SortComplexProps = {
diff --git a/packages/ui/src/elements/Table/RelationshipProvider/index.tsx b/packages/ui/src/elements/Table/RelationshipProvider/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { TypeWithID } from 'payload'
 
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useCallback, useContext, useEffect, useReducer, useRef } from 'react'
 
 import { useDebounce } from '../../../hooks/useDebounce.js'
diff --git a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { PaginatedDocs, Where } from 'payload'
 
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useReducer, useState } from 'react'
 
 import type { Option } from '../../../ReactSelect/types.js'
diff --git a/packages/ui/src/fields/Relationship/index.tsx b/packages/ui/src/fields/Relationship/index.tsx
@@ -2,7 +2,7 @@
 import type { PaginatedDocs, Where } from 'payload'
 
 import { wordBoundariesRegex } from 'payload/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 
 import type { DocumentDrawerProps } from '../../elements/DocumentDrawer/types.js'
diff --git a/packages/ui/src/forms/Form/index.tsx b/packages/ui/src/forms/Form/index.tsx
@@ -11,7 +11,7 @@ import {
   reduceFieldsToValues,
   wait,
 } from 'payload/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react'
 import { toast } from 'sonner'
 
diff --git a/packages/ui/src/hooks/usePayloadAPI.ts b/packages/ui/src/hooks/usePayloadAPI.ts
@@ -1,5 +1,5 @@
 'use client'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import { useEffect, useRef, useState } from 'react'
 
 import { useLocale } from '../providers/Locale/index.js'
diff --git a/packages/ui/src/providers/Auth/index.tsx b/packages/ui/src/providers/Auth/index.tsx
@@ -3,7 +3,7 @@ import type { ClientUser, MeOperationResult, Permissions } from 'payload'
 
 import { useModal } from '@faceless-ui/modal'
 import { usePathname, useRouter } from 'next/navigation.js'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
diff --git a/packages/ui/src/providers/DocumentInfo/index.tsx b/packages/ui/src/providers/DocumentInfo/index.tsx
@@ -13,7 +13,7 @@ import type {
 
 import { notFound } from 'next/navigation.js'
 import { reduceFieldsToValues } from 'payload/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
 
 import type { DocumentInfoContext, DocumentInfoProps } from './types.js'
diff --git a/packages/ui/src/providers/ListQuery/index.tsx b/packages/ui/src/providers/ListQuery/index.tsx
@@ -3,7 +3,7 @@ import type { PaginatedDocs, Where } from 'payload'
 
 import { useRouter } from 'next/navigation.js'
 import { isNumber } from 'payload/shared'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useContext } from 'react'
 
 import type { Column } from '../../elements/Table/index.js'
diff --git a/packages/ui/src/providers/SearchParams/index.tsx b/packages/ui/src/providers/SearchParams/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useSearchParams as useNextSearchParams } from 'next/navigation.js'
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useContext } from 'react'
 
 export type SearchParamsContext = {
diff --git a/packages/ui/src/providers/Selection/index.tsx b/packages/ui/src/providers/Selection/index.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { Where } from 'payload'
 
-import qs from 'qs'
+import * as qs from 'qs-esm'
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
 
 import { useLocale } from '../Locale/index.js'
diff --git a/packages/ui/src/utilities/api.ts b/packages/ui/src/utilities/api.ts
@@ -1,4 +1,4 @@
-import qs from 'qs'
+import * as qs from 'qs-esm'
 
 type GetOptions = RequestInit & {
   params?: Record<string, unknown>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/admin/e2e/2/e2e.spec.ts b/test/admin/e2e/2/e2e.spec.ts
diff --git a/test/buildConfigWithDefaults.ts b/test/buildConfigWithDefaults.ts
diff --git a/test/helpers/NextRESTClient.ts b/test/helpers/NextRESTClient.ts
diff --git a/test/helpers/rest.ts b/test/helpers/rest.ts
diff --git a/test/live-preview/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx b/test/live-preview/app/live-preview/_components/CollectionArchive/PopulateByCollection/index.tsx
diff --git a/test/package.json b/test/package.json

Original file line number	Diff line number	Diff line change
`@@ -154,7 +154,7 @@ This one isn't too bad, but more complex queries get unavoidably more difficult`
`154`	`154`	`For example, using fetch:`
`155`	`155`
`156`	`156`	```js
`157`		`-import qs from 'qs'`
	`157`	`+import { stringify } from 'qs-esm'`
`158`	`158`
`159`	`159`	`const query = {`
`160`	`160`	`color: {`
`@@ -165,7 +165,7 @@ const query = {`
`165`	`165`	`}`
`166`	`166`
`167`	`167`	`const getPosts = async () => {`
`168`		`- const stringifiedQuery = qs.stringify(`
	`168`	`+ const stringifiedQuery = stringify(`
`169`	`169`	`{`
`170`	`170`	where: query, // ensure that `qs` adds the `where` property, too!
`171`	`171`	`},`