Update tests

lib/tests/with-selectors/counter-without-selectors.tsx

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+
+export function CounterWithoutSelectors() {
+  const [{ count }, setState] = useStore();
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return (
+    <div>
+      <h2>Counter Without Selectors</h2>
+      <p>Rerender is triggered every time the state changes.</p>
+      <p>Count: {count}</p>
+      <button onClick={() => setState(state => ({ ...state, count: count + 1 }))}>Increment</button>
+      <button onClick={() => setState(state => ({ ...state, count: count - 1 }))}>Decrement</button>
+      <p data-testid="counter2-display">Render Count: {renderCount.current}</p>
+    </div>
+  );
+}

lib/tests/with-selectors/counter.tsx

@@ -0,0 +1,22 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+
+export function Counter() {
+  const [{ count }, setState] = useStore(/^count$/);
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return (
+    <div>
+      <h2>Counter With Selectors</h2>
+      <p>Rerender is triggered by RGS only when count changes.</p>
+      <p>Count: {count}</p>
+      <button
+        data-testid="increment-btn"
+        onClick={() => setState(state => ({ ...state, count: count + 1 }))}>
+        Increment
+      </button>
+      <button onClick={() => setState(state => ({ ...state, count: count - 1 }))}>Decrement</button>
+      <p data-testid="counter1-display">Render Count: {renderCount.current}</p>
+    </div>
+  );
+}

lib/tests/with-selectors/header.tsx

@@ -0,0 +1,24 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+import styles from "../demo.module.scss";
+import { listToRegExp } from "../../src/utils";
+
+export function Header() {
+  const [{ name }] = useStore(listToRegExp(["name"]));
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return (
+    <>
+      <h1>Example with Selectors</h1>
+      <header className={styles.header}>
+        <h2>My name is {name}</h2>
+        <small>
+          <i>
+            Updates only when <code>name</code> changes.{" "}
+            <code data-testid="header-render-count">renderCount = {renderCount.current}</code>
+          </i>
+        </small>
+      </header>
+    </>
+  );
+}

lib/tests/with-selectors/index.ts

@@ -0,0 +1 @@
+export * from "./with-selectors";

lib/tests/with-selectors/store.ts

@@ -0,0 +1,25 @@
+import { useRGS } from "../../src";
+
+interface MyStore {
+  count: number;
+  name: string;
+  user: {
+    name: string;
+    age: number;
+  };
+}
+
+export const useStore = (includeRegExp?: RegExp | null | 0, excludeRegExp?: RegExp) =>
+  useRGS<MyStore>(
+    "my-store-with-selectors",
+    {
+      count: 0,
+      name: "John",
+      user: {
+        name: "John",
+        age: 30,
+      },
+    },
+    includeRegExp,
+    excludeRegExp,
+  );

lib/tests/with-selectors/user-data.tsx

@@ -0,0 +1,28 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+
+export function UserData() {
+  const [{ user }, setState] = useStore(/^user$/);
+  const renderCount = useRef(0);
+  renderCount.current++;
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const name = formData.get("name") as string;
+    const age = Number(formData.get("age"));
+    setState(state => ({ ...state, user: { name, age }, name }));
+  };
+  return (
+    <div>
+      <h1>UserData</h1>
+      <small>renderCount = {renderCount.current}</small>
+      <p>Name: {user.name}</p>
+      <p>Age: {user.age}</p>
+      <form onSubmit={onSubmit}>
+        <input type="text" name="name" defaultValue={user.name} />
+        <input type="number" name="age" defaultValue={user.age} />
+        <button type="submit">Update User</button>
+      </form>
+    </div>
+  );
+}

lib/tests/with-selectors/with-selectors.tsx

@@ -0,0 +1,18 @@
+import { Counter } from "./counter";
+import styles from "../demo.module.scss";
+import { CounterWithoutSelectors } from "./counter-without-selectors";
+import { Header } from "./header";
+import { UserData } from "./user-data";
+
+export function WithSelector() {
+  return (
+    <div className={styles.preview}>
+      <Header />
+      <div className={styles.flex}>
+        <Counter />
+        <CounterWithoutSelectors />
+        <UserData />
+      </div>
+    </div>
+  );
+}