From 4550e72c1620b0889095f49ce3ad670a5304297e Mon Sep 17 00:00:00 2001 From: Dimitri POSTOLOV Date: Thu, 5 Dec 2024 22:59:04 +0700 Subject: [PATCH] refactor to use `useSearchParams` in website playground page (#2821) * useSearchParams * a --- packages/plugin/src/index.browser.ts | 6 --- packages/plugin/tsup.config.ts | 16 +++++- pnpm-lock.yaml | 57 ---------------------- website/app/play/page.client.tsx | 53 +++++++++++--------- website/app/play/page.tsx | 37 +++++++------- website/app/play/query-params-provider.tsx | 9 ---- website/package.json | 6 +-- 7 files changed, 62 insertions(+), 122 deletions(-) delete mode 100644 packages/plugin/src/index.browser.ts delete mode 100644 website/app/play/query-params-provider.tsx diff --git a/packages/plugin/src/index.browser.ts b/packages/plugin/src/index.browser.ts deleted file mode 100644 index 00b80a90016..00000000000 --- a/packages/plugin/src/index.browser.ts +++ /dev/null @@ -1,6 +0,0 @@ -// rewrite exports because we don't need `processors` export that has fs related dependencies - -export { parser } from './parser.js'; -export { rules } from './rules/index.js'; -export * from './types.js'; -export { configs } from './configs/index.js'; diff --git a/packages/plugin/tsup.config.ts b/packages/plugin/tsup.config.ts index 2fda46fcc16..8cf3d51f03b 100644 --- a/packages/plugin/tsup.config.ts +++ b/packages/plugin/tsup.config.ts @@ -15,7 +15,6 @@ const opts: Options = { VERSION: packageJson.version, }, format: 'esm', - minifySyntax: true, outExtension: () => ({ js: '.js' }), esbuildOptions(options, _context) { options.define!.window = 'undefined'; @@ -82,7 +81,7 @@ export default defineConfig([ { ...opts, entry: { - 'index.browser': 'src/index.browser.ts', + 'index.browser': 'src/index.ts', }, outDir: 'dist', dts: false, @@ -94,5 +93,18 @@ export default defineConfig([ esbuildOptions(options, _context) { options.define!.window = 'true'; }, + esbuildPlugins: [ + { + name: 'remove-processor', + setup(build) { + build.onLoad({ filter: /processor\.ts$/ }, _args => { + return { + contents: 'export const processor = {}', + loader: 'ts', + }; + }); + }, + }, + ], }, ]); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 100d46dfd63..d9754adeb31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -355,18 +355,12 @@ importers: graphql: specifier: ^16.9.0 version: 16.9.0 - lodash.debounce: - specifier: ^4.0.8 - version: 4.0.8 lodash.uniqwith: specifier: ^4.5.0 version: 4.5.0 next: specifier: 15.0.3 version: 15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next-query-params: - specifier: 5.0.1 - version: 5.0.1(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) next-sitemap: specifier: 4.2.3 version: 4.2.3(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) @@ -376,9 +370,6 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) - use-query-params: - specifier: ^2.2.1 - version: 2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) devDependencies: '@svgr/webpack': specifier: ^8.1.0 @@ -386,9 +377,6 @@ importers: '@theguild/tailwind-config': specifier: 0.6.1 version: 0.6.1(postcss-import@16.1.0(postcss@8.4.49))(postcss-lightningcss@1.0.1(postcss@8.4.49))(tailwindcss@3.4.15) - '@types/lodash.debounce': - specifier: 4.0.9 - version: 4.0.9 '@types/lodash.uniqwith': specifier: 4.5.9 version: 4.5.9 @@ -2904,9 +2892,6 @@ packages: '@types/katex@0.16.7': resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==} - '@types/lodash.debounce@4.0.9': - resolution: {integrity: sha512-Ma5JcgTREwpLRwMM+XwBR7DaWe96nC38uCBDFKZWbNKD+osjVzdpnUSwBcqCptrp16sSOLBAUb50Car5I0TCsQ==} - '@types/lodash.lowercase@4.3.9': resolution: {integrity: sha512-nLcYAb5Rz6SzOeoOWmT1hMDEicMAsRIunDLnCxaWSAjHTsx3Sf8aknbKFIQl+RMevZbGmw2j8qydKb9YcwMExg==} @@ -5562,13 +5547,6 @@ packages: neo-async@2.6.2: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} - next-query-params@5.0.1: - resolution: {integrity: sha512-QFumNTpdc/MtT1IresYoMKkRWOaplutzKJoRl6Uv9mIOdc3jGyWD7yCHE79AiGYlRCyo+4oMVvkLYpdV2trFKA==} - peerDependencies: - next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - use-query-params: ^2.0.0 - next-sitemap@4.2.3: resolution: {integrity: sha512-vjdCxeDuWDzldhCnyFCQipw5bfpl4HmZA7uoo3GAaYGjGgfL4Cxb1CiztPuWGmS+auYs7/8OekRS8C2cjdAsjQ==} engines: {node: '>=14.18'} @@ -6418,9 +6396,6 @@ packages: serialize-javascript@6.0.2: resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} - serialize-query-params@2.0.2: - resolution: {integrity: sha512-1chMo1dST4pFA9RDXAtF0Rbjaut4is7bzFbI1Z26IuMub68pNCILku85aYmeFhvnY//BXUPUhoRMjYcsT93J/Q==} - set-function-length@1.2.2: resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} @@ -7061,19 +7036,6 @@ packages: '@types/react': optional: true - use-query-params@2.2.1: - resolution: {integrity: sha512-i6alcyLB8w9i3ZK3caNftdb+UnbfBRNPDnc89CNQWkGRmDrm/gfydHvMBfVsQJRq3NoHOM2dt/ceBWG2397v1Q==} - peerDependencies: - '@reach/router': ^1.2.1 - react: '>=16.8.0' - react-dom: '>=16.8.0' - react-router-dom: '>=5' - peerDependenciesMeta: - '@reach/router': - optional: true - react-router-dom: - optional: true - use-sidecar@1.1.2: resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'} @@ -10090,10 +10052,6 @@ snapshots: '@types/katex@0.16.7': {} - '@types/lodash.debounce@4.0.9': - dependencies: - '@types/lodash': 4.17.13 - '@types/lodash.lowercase@4.3.9': dependencies: '@types/lodash': 4.17.13 @@ -13426,13 +13384,6 @@ snapshots: neo-async@2.6.2: {} - next-query-params@5.0.1(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)(use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)): - dependencies: - next: 15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - react: 18.3.1 - tslib: 2.8.1 - use-query-params: 2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) - next-sitemap@4.2.3(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)): dependencies: '@corex/deepmerge': 4.0.43 @@ -14409,8 +14360,6 @@ snapshots: dependencies: randombytes: 2.1.0 - serialize-query-params@2.0.2: {} - set-function-length@1.2.2: dependencies: define-data-property: 1.1.4 @@ -15168,12 +15117,6 @@ snapshots: optionalDependencies: '@types/react': 18.3.13 - use-query-params@2.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): - dependencies: - react: 18.3.1 - react-dom: 18.3.1(react@18.3.1) - serialize-query-params: 2.0.2 - use-sidecar@1.1.2(@types/react@18.3.13)(react@18.3.1): dependencies: detect-node-es: 1.1.0 diff --git a/website/app/play/page.client.tsx b/website/app/play/page.client.tsx index c698d84d3bb..5a8a814bbc5 100644 --- a/website/app/play/page.client.tsx +++ b/website/app/play/page.client.tsx @@ -1,8 +1,7 @@ 'use client'; -import { FC, ReactNode, useRef } from 'react'; -import debounce from 'lodash.debounce'; -import { StringParam, useQueryParam, withDefault } from 'use-query-params'; +import { FC, ReactNode, useCallback } from 'react'; +import { ReadonlyURLSearchParams, usePathname, useRouter, useSearchParams } from 'next/navigation'; import { ConfigName, configs, rules } from '@graphql-eslint/eslint-plugin'; import { asArray } from '@graphql-tools/utils'; import { GraphQLEditor } from './graphql-editor'; @@ -30,14 +29,28 @@ const operationsRulesOptions = Object.entries(rules) const schemaConfigsOptions = schemaConfigs.map(name => ({ key: name, name })); const operationsConfigsOptions = operationsConfigs.map(name => ({ key: name, name })); -function useDebouncedQueryParams( - ...args: Parameters> -): ReturnType> { - const [query, setQuery] = useQueryParam(...args); - const fn = useRef(); - fn.current ||= debounce(setQuery, 500); +// Get a new searchParams string by merging the current +// searchParams with a provided key/value pair +const createQueryString = (searchParams: ReadonlyURLSearchParams, name: string, value: string) => { + const params = new URLSearchParams(searchParams.toString()); + params.set(name, value); - return [query, fn.current]; + return '?' + params.toString(); +}; + +function useSetterSearchParams( + paramKey: string, + defaultValue = '', +): [string, (value: string) => void] { + const pathname = usePathname(); + const router = useRouter(); + const searchParams = useSearchParams(); + + const handleChange = useCallback((value: string) => { + router.push(pathname + createQueryString(searchParams, paramKey, value)); + }, []); + + return [searchParams.get(paramKey) ?? defaultValue, handleChange]; } export const ClientPage: FC<{ @@ -46,21 +59,15 @@ export const ClientPage: FC<{ children: ReactNode; headingClass: string; }> = ({ defaultSchema, defaultOperation, children, headingClass }) => { - const [schemaConfig, setSchemaConfig] = useDebouncedQueryParams( - 'sc', - withDefault(StringParam, 'schema-recommended'), - ); - const [schemaRule, setSchemaRule] = useDebouncedQueryParams('sr'); - const [operationConfig, setOperationConfig] = useDebouncedQueryParams( + const [schemaConfig, setSchemaConfig] = useSetterSearchParams('sc', 'schema-recommended'); + const [schemaRule, setSchemaRule] = useSetterSearchParams('sr'); + const [operationConfig, setOperationConfig] = useSetterSearchParams( 'oc', - withDefault(StringParam, 'operations-recommended'), - ); - const [operationRule, setOperationRule] = useDebouncedQueryParams('or'); - const [schema, setSchema] = useDebouncedQueryParams('s', withDefault(StringParam, defaultSchema)); - const [operation, setOperation] = useDebouncedQueryParams( - 'o', - withDefault(StringParam, defaultOperation), + 'operations-recommended', ); + const [operationRule, setOperationRule] = useSetterSearchParams('or'); + const [schema, setSchema] = useSetterSearchParams('s', defaultSchema); + const [operation, setOperation] = useSetterSearchParams('o', defaultOperation); return ( <> diff --git a/website/app/play/page.tsx b/website/app/play/page.tsx index 2c65f01a6b7..f5a82eb3ad5 100644 --- a/website/app/play/page.tsx +++ b/website/app/play/page.tsx @@ -3,7 +3,6 @@ import { clsx } from 'clsx'; import { Linter } from 'eslint'; import { parser } from '@graphql-eslint/eslint-plugin'; import { ClientPage } from './page.client'; -import { QueryParamProvider } from './query-params-provider'; export const metadata = { title: 'Playground', @@ -55,25 +54,23 @@ const PlayPage: FC = () => { )} > - - -
-

VERSIONING

- - ESLint - {Linter.version} - - - GraphQL-ESLint - {parser.meta.version} - -
- - + +
+

VERSIONING

+ + ESLint + {Linter.version} + + + GraphQL-ESLint + {parser.meta.version} + +
+ ); diff --git a/website/app/play/query-params-provider.tsx b/website/app/play/query-params-provider.tsx deleted file mode 100644 index a28533ff88a..00000000000 --- a/website/app/play/query-params-provider.tsx +++ /dev/null @@ -1,9 +0,0 @@ -'use client'; - -import { FC, ReactNode } from 'react'; -import NextAdapterApp from 'next-query-params/app'; -import { QueryParamProvider as Provider } from 'use-query-params'; - -export const QueryParamProvider: FC<{ children: ReactNode }> = ({ children }) => { - return {children}; -}; diff --git a/website/package.json b/website/package.json index 93b05ce4feb..c3ae404ea8c 100644 --- a/website/package.json +++ b/website/package.json @@ -19,19 +19,15 @@ "@theguild/components": "8.0.0-alpha-20241205144621-2f6170e406a6235f71ab4756e1dd369735420a88", "clsx": "^2.0.0", "graphql": "^16.9.0", - "lodash.debounce": "^4.0.8", "lodash.uniqwith": "^4.5.0", "next": "15.0.3", - "next-query-params": "5.0.1", "next-sitemap": "4.2.3", "react": "^18.3.1", - "react-dom": "^18.3.1", - "use-query-params": "^2.2.1" + "react-dom": "^18.3.1" }, "devDependencies": { "@svgr/webpack": "^8.1.0", "@theguild/tailwind-config": "0.6.1", - "@types/lodash.debounce": "4.0.9", "@types/lodash.uniqwith": "4.5.9", "@types/node": "22.10.1", "@types/react": "18.3.13",