demo with issues

packages/shared/src/client/demo/demo.tsx

@@ -5,10 +5,20 @@ import styles from "./demo.module.scss";
 import basicExampleCode from "./basic-example/basic-example.tsx?raw";
 import counterCode from "./basic-example/counter.tsx?raw";
 import { CodeDisplay } from "./code-display";
+import { WithSelector } from "./with-selectors";
+import withSelectorCode from "./with-selectors/with-selectors.tsx?raw";
+import storeCode from "./with-selectors/store.ts?raw";
+import couter2Code from "./with-selectors/counter.tsx?raw";
 
-const code = [
-  { filename: "basic-example.tsx", code: basicExampleCode },
+const basicExCode = [
   { filename: "counter.tsx", code: counterCode },
+  { filename: "basic-example.tsx", code: basicExampleCode },
+];
+
+const withSelectorExCode = [
+  { filename: "store.ts", code: storeCode },
+  { filename: "counter.tsx", code: couter2Code },
+  { filename: "with-selectors.tsx", code: withSelectorCode },
 ];
 
 /** React live demo */
@@ -21,7 +31,11 @@ export function Demo() {
       </div>
       <div className={styles.demo}>
         <BasicExample />
-        <CodeDisplay code={code} />
+        <CodeDisplay code={basicExCode} />
+      </div>
+      <div className={styles.demo}>
+        <WithSelector />
+        <CodeDisplay code={withSelectorExCode} />
       </div>
     </>
   );

packages/shared/src/client/demo/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>
+      <h1>Counter Without Selectors</h1>
+      <h2>Rerender is triggered every time the state changes.</h2>
+      <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>Render Count: {renderCount.current}</p>
+    </div>
+  );
+}

packages/shared/src/client/demo/with-selectors/counter.tsx

@@ -0,0 +1,18 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+
+export function Counter() {
+  const [{ count }, setState] = useStore("count");
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return (
+    <div>
+      <h1>Counter With Selectors</h1>
+      <h2>Rerender is triggered by RGS only when count changes.</h2>
+      <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>Render Count: {renderCount.current}</p>
+    </div>
+  );
+}

packages/shared/src/client/demo/with-selectors/header.tsx

@@ -0,0 +1,19 @@
+import { useRef } from "react";
+import { useStore } from "./store";
+
+export function Header() {
+  const [{ name }] = useStore("name");
+  const renderCount = useRef(0);
+  renderCount.current++;
+  return (
+    <header>
+      <h1>My name is {name}</h1>
+      <small>
+        <i>
+          Updates only when <code>name</code> changes.{" "}
+          <code>renderCount = {renderCount.current}</code>
+        </i>
+      </small>
+    </header>
+  );
+}

packages/shared/src/client/demo/with-selectors/index.ts

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

packages/shared/src/client/demo/with-selectors/store.ts

@@ -0,0 +1,24 @@
+import { useRGS } from "r18gs";
+
+interface MyStore {
+  count: number;
+  name: string;
+  user: {
+    name: string;
+    age: number;
+  };
+}
+
+export const useStore = (...selectors: (keyof MyStore)[]) =>
+  useRGS<MyStore>(
+    "my-store-with-selectors",
+    {
+      count: 0,
+      name: "John",
+      user: {
+        name: "John",
+        age: 30,
+      },
+    },
+    ...selectors,
+  );

packages/shared/src/client/demo/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>
+  );
+}

packages/shared/src/client/demo/with-selectors/with-selectors.tsx

@@ -0,0 +1,16 @@
+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 /> */}
+      {/* <Counter /> */}
+      <CounterWithoutSelectors />
+      <UserData />
+    </div>
+  );
+}