test: remount component test

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

@@ -37,6 +37,17 @@ export const Form = ({
     };
   }, [state, updateUrl, delay]);
 
+  // Just to test ts types readonly
+  React.useEffect(() => {
+    if (state?.tags?.length === 10) {
+      // @ts-expect-error should be readonly
+      state.tags[0].value = { text: 'jjj', time: new Date() };
+      // @ts-expect-error should be readonly
+      state.tags[0].value.text = 'jjj';
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const onChangeAge = React.useCallback(
     (ev: React.ChangeEvent<HTMLInputElement>) => {
       const val = +ev.target.value;

packages/example-nextjs/src/app/Status-for-test.tsx

@@ -0,0 +1,70 @@
+'use client';
+import React from 'react';
+import { useUrlState } from 'state-in-url';
+
+import { form } from './form';
+// import { useUrlState } from '../../../../dist';
+
+const Status = ({ className, sp }: { className?: string; sp?: object }) => {
+  const { state } = useUrlState(form, sp);
+
+  return (
+    <div className={className}>
+      <div className="font-semibold mb-2 text-black">
+        Other client component
+      </div>
+      <h3 className="text-black">Types and structure of data are presered</h3>
+
+      <div className="flex-none  ">
+        <pre
+          className="h-[330px] text-sm overflow-y-scroll
+         text-gray-600 bg-white p-4 rounded-md shadow-inner
+          break-all whitespace-pre-wrap"
+          data-testid="parsed"
+        >
+          {JSON.stringify(state, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+const Wrapper = (props: Parameters<typeof Status>) => {
+  const [key, setKey] = React.useState(Math.random());
+
+  return (
+    <div>
+      <Status key={key} {...props} />
+      <button
+        onClick={() => setKey(Math.random())}
+        className="text-black p-4"
+        data-testid="remount"
+      >
+        remount
+      </button>
+    </div>
+  );
+};
+
+export { Wrapper as Status };
+
+// TODO: move to main lib
+// function usePrevious<T>(value: T) {
+//   const ref = React.useRef(value);
+
+//   React.useEffect(() => {
+//     if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
+//       ref.current = value;
+//     }
+//   }, [value]);
+
+//   return ref.current;
+// }
+
+// function useChangedValue<T>(value: T) {
+//   const valuePrev = usePrevious(value);
+
+//   return JSON.stringify(value) !== JSON.stringify(valuePrev)
+//     ? value
+//     : valuePrev;
+// }

packages/example-nextjs/src/app/test-ssr-sp/page.tsx

@@ -1,5 +1,5 @@
 import { Form } from '../Form-for-test';
-import { Status } from '../Status';
+import { Status } from '../Status-for-test';
 
 export default async function Home({ searchParams }: { searchParams: object }) {
   return (

packages/example-nextjs/src/app/test-ssr/page.tsx

@@ -1,5 +1,5 @@
 import { Form } from '../Form-for-test';
-import { Status } from '../Status';
+import { Status } from '../Status-for-test';
 
 export default async function Home() {
   return (

packages/example-nextjs/src/app/test-use-client/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Form } from '../Form-for-test';
-import { Status } from '../Status';
+import { Status } from '../Status-for-test';
 
 export default function Home() {
   return (

tests/useUrlState/main.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 const urls = ['/test-ssr', '/test-use-client', '/test-ssr-sp'];
 
@@ -53,6 +53,13 @@ test('main test', async ({ page, baseURL }) => {
       page.getByRole('checkbox', { name: 'agree to terms' }),
     ).toBeChecked();
 
+    // remount component
+    await page.getByTestId('remount').click();
+    await page.waitForTimeout(200);
+    await expect(
+      page.getByRole('checkbox', { name: 'agree to terms' }),
+    ).toBeChecked();
+
     if (url === '/test-ssr-sp') {
       await expect(errorLogs).toHaveLength(0);
     }