Merge pull request #23 from asmyshlyaev177/22-argument-of-type-readon…

…ly-string-is-not-assignable-to-parameter-of-type-string

fix: return urlState as normal type, not readonly

README.md

@@ -167,9 +167,6 @@ function MyComponent() {
   // can pass `searchParams` from server components
   const { urlState, setUrl, setState } = useUrlState({ defaultState: userState });
 
-  // won't let you to accidently mutate state directly, requires TS
-  // urlState.name = 'John' // <- error
-
   return (
     <div>
       <input value={urlState.name}

package.json

@@ -103,6 +103,7 @@
     "reinstall": "npm run cleanup && npm install",
     "setup": "playwright install --with-deps",
     "prepack": "npm run build && cp package.json dist/package.json && npm run build:demo",
+    "pin-gh-deps": "pin-github-action .github/workflows/tests.yml",
     "prepare": "npx husky"
   },
   "wireit": {
@@ -363,6 +364,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.9",
     "only-allow": "^1.2.1",
+    "pin-github-action": "^1.9.1",
     "playwright": "^1.48.2",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.6.8",

packages/example-nextjs14/src/app/Form-for-test.tsx

@@ -40,12 +40,6 @@ export const Form = ({
 
     // Just to test ts types
     if (urlState?.tags?.length === 10) {
-      // @ts-expect-error should be readonly
-      urlState.age = 18;
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value = { text: 'jjj', time: new Date() };
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value.text = 'jjj';
       setState(urlState);
       setState((st) => st);
       setState((st) => ({ ...st, age: 18 }));

packages/example-nextjs15/src/app/Form-for-test.tsx

@@ -40,12 +40,6 @@ export const Form = ({
 
     // Just to test ts types
     if (urlState?.tags?.length === 10) {
-      // @ts-expect-error should be readonly
-      urlState.age = 18;
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value = { text: 'jjj', time: new Date() };
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value.text = 'jjj';
       setState(urlState);
       setState((st) => st);
       setState((st) => ({ ...st, age: 18 }));

packages/example-react-router6/src/Form-for-test.tsx

@@ -31,12 +31,6 @@ export const Form = ({ className }: { className?: string }) => {
 
     // Just to test ts types
     if (urlState?.tags?.length === 10) {
-      // @ts-expect-error should be readonly
-      urlState.age = 18;
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value = { text: "jjj", time: new Date() };
-      // @ts-expect-error should be readonly
-      urlState.tags[0].value.text = "jjj";
       setState(urlState);
       setState((st) => st);
       setState((st) => ({ ...st, age: 18 }));

packages/urlstate/next/useUrlState/README.md

@@ -16,7 +16,8 @@ A custom React hook that manages state and synchronizes it with URL search param
 ### Returns:
 
 An object containing:
-- `urlState: object` - The current state (readonly).
+
+- `urlState: object` - The current state.
 - `setState: Function` - Function to update the state without updating the URL.
 - `setUrl: Function` - Function to update both the state and the URL.
 

packages/urlstate/next/useUrlState/useUrlState.ts

@@ -5,7 +5,6 @@ import React from "react";
 import { parseSPObj } from "../../parseSPObj";
 import { useUrlStateBase } from "../../useUrlStateBase";
 import {
-  type DeepReadonly,
   filterUnknownParams,
   filterUnknownParamsClient,
   isSSR,
@@ -115,11 +114,14 @@ export function useUrlState<T extends JSONCompatible>({
      * @deprecated use `setUrl`
      */
     updateUrl,
-    urlState: state as DeepReadonly<typeof state>,
+    /**
+     * State object. Don't mutate directly, use `setState` or `setUrl`
+     */
+    urlState: state,
     /**
      * @deprecated use `urlState`
      */
-    state: state as DeepReadonly<typeof state>,
+    state,
     getState,
   };
 }

packages/urlstate/react-router/useUrlState/README.md

@@ -16,7 +16,8 @@ A custom React hook that manages state and synchronizes it with URL search param
 ### Returns:
 
 An object containing:
-- `urlState: object` - The current state (readonly).
+
+- `urlState: object` - The current state.
 - `setState: Function` - Function to update the state without updating the URL.
 - `setUrl: Function` - Function to update both the state and the URL.
 

packages/urlstate/react-router/useUrlState/useUrlState.ts

@@ -9,7 +9,6 @@ import { parseSPObj } from "../../parseSPObj";
 import { useUrlStateBase } from "../../useUrlStateBase";
 import {
   assignValue,
-  type DeepReadonly,
   filterUnknownParams,
   filterUnknownParamsClient,
   type JSONCompatible,
@@ -121,11 +120,14 @@ export function useUrlState<T extends JSONCompatible>({
      * @deprecated use `setUrl`
      */
     updateUrl,
-    urlState: state as DeepReadonly<typeof state>,
+    /**
+     * State object. Don't mutate directly, use `setState` or `setUrl`
+     */
+    urlState: state,
     /**
      * @deprecated use `urlState`
      */
-    state: state as DeepReadonly<typeof state>,
+    state,
     getState,
   };
 }

packages/urlstate/useSharedState/README.md

@@ -14,7 +14,8 @@ A custom React hook that manages shared state across components.
 ### Returns:
 
 An object containing:
-- `state: T` - The current state (readonly).
+
+- `state: T` - The current state.
 - `getState: () => T` - Function to get the current state.
 - `setState: T | Partial<T> | (T) => void` - Function to update the state.
 
@@ -42,7 +43,7 @@ Updates the shared state.
 
 ### Parameters:
 
-- `value: T | DeepReadonly<T> | ((currState: T) => T)` - New state value or a function that receives the current state and returns the new state.
+- `value: T | ((currState: T) => T)` - New state value or a function that receives the current state and returns the new state.
 
 ## `getState`