From b896d5f0bc7b33ba036612a5dada69315609fb2c Mon Sep 17 00:00:00 2001 From: asmyshlyaev177 Date: Sun, 10 Nov 2024 11:52:14 +0400 Subject: [PATCH 1/3] fix: use first argument for `defaultState` and second as object with other options --- README.md | 10 +- package-lock.json | 19 ++- .../src/app/(tests)/useUrlState/Comp1.tsx | 7 +- .../src/app/Form-for-test.tsx | 4 +- packages/example-nextjs14/src/app/Form.tsx | 3 +- .../src/app/Status-for-test.tsx | 4 +- packages/example-nextjs14/src/app/Status.tsx | 5 +- .../{CodeBlockForm.tsx => CodeBlockState.tsx} | 2 +- .../src/app/components/CodeBlocksNext.tsx | 9 +- .../src/app/components/CodeBlocksRR.tsx | 9 +- .../src/app/(tests)/useUrlState/Comp1.tsx | 7 +- .../src/app/Form-for-test.tsx | 4 +- .../src/app/Status-for-test.tsx | 4 +- .../src/FewComponents/Component.tsx | 3 +- .../src/Form-for-test.tsx | 3 +- .../src/Status-for-test.tsx | 4 +- .../urlstate/next/useUrlState/useUrlState.ts | 116 +++++++++++++----- .../react-router/useUrlState/useUrlState.ts | 102 +++++++++++---- 18 files changed, 221 insertions(+), 94 deletions(-) rename packages/example-nextjs14/src/app/components/{CodeBlockForm.tsx => CodeBlockState.tsx} (91%) diff --git a/README.md b/README.md index 8eedd3cd..e04299f3 100644 --- a/README.md +++ b/README.md @@ -165,7 +165,7 @@ import { userState } from './userState'; function MyComponent() { // can pass `replace` arg, it's control will `setUrl` will use `rounter.push` or `router.replace`, default replace=true // can pass `searchParams` from server components - const { urlState, setUrl, setState } = useUrlState({ defaultState: userState }); + const { urlState, setUrl, setState } = useUrlState(userState); return (
@@ -221,7 +221,7 @@ import { form } from './form'; function TagsComponent() { // `urlState` will infer from Form type! - const { urlState, setUrl } = useUrlState({ defaultState: form }); + const { urlState, setUrl } = useUrlState(form); const onChangeTags = React.useCallback( (tag: (typeof tags)[number]) => { @@ -320,7 +320,7 @@ import { useUrlState } from 'state-in-url/next'; import { form } from './form'; const Form = ({ searchParams }: { searchParams: object }) => { - const { urlState, setState, setUrl } = useUrlState({ defaultState: form, searchParams }); + const { urlState, setState, setUrl } = useUrlState(form, { searchParams }); } ``` @@ -426,7 +426,7 @@ import { useUrlState } from 'state-in-url/react-router'; import { form } from './form'; function TagsComponent() { - const { urlState, setUrl, setState } = useUrlState({ defaultState: form }); + const { urlState, setUrl, setState } = useUrlState(form); const onChangeTags = React.useCallback( (tag: (typeof tags)[number]) => { @@ -540,7 +540,7 @@ const userState = { }; export const useUserState = () => { - const { urlState, setUrl } = useUrlState({ defaultState: userState }); + const { urlState, setUrl } = useUrlState(userState); return { userState: urlState, setUserState: setUrl };; } diff --git a/package-lock.json b/package-lock.json index c6e22604..2ca8b036 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "state-in-url", - "version": "4.0.4", + "version": "4.0.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "state-in-url", - "version": "4.0.4", + "version": "4.0.5", "license": "MIT", "workspaces": [ "packages/urlstate", @@ -33995,6 +33995,21 @@ "name": "state-in-url", "version": "1.0.0", "license": "ISC" + }, + "packages/example-nextjs15/node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.16", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz", + "integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==", + "cpu": [ + "ia32" + ], + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } } } } diff --git a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx index c1584315..e3525357 100644 --- a/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx +++ b/packages/example-nextjs14/src/app/(tests)/useUrlState/Comp1.tsx @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next'; import { stateShape } from './state'; export const Comp1 = ({ searchParams }: { searchParams?: object }) => { - const { state, updateUrl } = useUrlState({ - defaultState: stateShape, + const { urlState, setUrl } = useUrlState(stateShape, { searchParams, replace: false, }); @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {

Per page select

{ - const { urlState } = useUrlState({ defaultState: form, searchParams });// [!code highlight:1] + const { urlState } = useUrlState(form, { searchParams });// [!code highlight:1] // [!code word:urlState] return
name: {urlState.name}
diff --git a/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx b/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx index 6a4eb1c4..2c2247d0 100644 --- a/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx +++ b/packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx @@ -1,5 +1,5 @@ import { File } from './File'; -import { CodeBlockForm } from './CodeBlockForm'; +import { CodeBlockState } from './CodeBlockState'; export const CodeBlocksRR = () => { return ( @@ -8,7 +8,7 @@ export const CodeBlocksRR = () => {
1. Define the state
- +
2. Use it in any components @@ -19,7 +19,8 @@ export const CodeBlocksRR = () => { import { form } from './form'; export const ComponentA = () => { - const { urlState, setUrl, setState } = useUrlState({ defaultState: form });// [!code highlight:1] + // see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/react-router/useUrlState + const { urlState, setUrl, setState } = useUrlState(form, { replace: true });// [!code highlight:1] return <> { import { form } from './form'; export const ComponentB = () => { - const { urlState } = useUrlState({ defaultState: form });// [!code highlight:1] + const { urlState } = useUrlState(form);// [!code highlight:1] // [!code word:urlState] return
name: {urlState.name}
diff --git a/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx b/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx index f73f8c9f..bb621bc5 100644 --- a/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx +++ b/packages/example-nextjs15/src/app/(tests)/useUrlState/Comp1.tsx @@ -5,8 +5,7 @@ import { useUrlState } from 'state-in-url/next'; import { stateShape } from './state'; export const Comp1 = ({ searchParams }: { searchParams?: object }) => { - const { state, updateUrl } = useUrlState({ - defaultState: stateShape, + const { urlState, setUrl } = useUrlState(stateShape, { searchParams, replace: false, }); @@ -15,9 +14,9 @@ export const Comp1 = ({ searchParams }: { searchParams?: object }) => {

Per page select