Create shared DebugInfo component for all demos

src/components/DebugInfo.tsx

@@ -0,0 +1,47 @@
+import { memo } from "react";
+import css from "./css/DebugInfo.module.css";
+import sharedStyles from "./css/shared.module.css";
+import type { World } from "../api/worlds.ts";
+
+type Snapshot = {
+  selectedWorldId: string;
+  hello: { worlds: World[] | undefined };
+};
+
+type Props = {
+  /**
+   * Snapshot data to display.
+   */
+  snapshot: Snapshot | null;
+  /**
+   * Optional title for the debug panel. Defaults to "Store snapshot".
+   */
+  title?: string;
+};
+
+export const DebugInfo = memo(({ snapshot, title }: Props) => {
+  const displayTitle = title || "Store snapshot";
+
+  const pretty =
+    snapshot != null
+      ? JSON.stringify(
+          {
+            selectedWorldId: snapshot.selectedWorldId,
+            hello: {
+              worlds: snapshot.hello.worlds?.map((world) => ({ ...world })),
+            },
+          },
+          null,
+          2,
+        )
+      : "Snapshot pending…";
+
+  return (
+    <div className={`${sharedStyles.card} ${css.snapshot}`}>
+      <div className={css.snapshotTitle}>{displayTitle}</div>
+      <pre className={css.pre}>{pretty}</pre>
+    </div>
+  );
+});
+
+DebugInfo.displayName = "DebugInfo";

src/examples/propDrilling/PropDrillingRenderDemo.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { useLoaderData, useRevalidator } from "react-router-dom";
 import css from "../../components/css/DemoLayout.module.css";
 import { WorldApp } from "./exampleComponents/WorldApp.tsx";
-import { PropDrillingDebugInfo } from "./demoControls/PropDrillingDebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import type { World, WorldsResponse } from "../../api/worlds.ts";
 
 type Snapshot = {
@@ -32,7 +32,7 @@ export function PropDrillingRenderDemo() {
         onSnapshotChange={setSnapshot}
         revalidate={revalidator.revalidate}
       />
-      <PropDrillingDebugInfo snapshot={snapshot} />
+      <DebugInfo snapshot={snapshot} title="Top level state snapshot" />
     </div>
   );
 }

src/examples/propDrillingNaive/PropDrillingNaiveRenderDemo.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import css from "../../components/css/DemoLayout.module.css";
 import { PropDrillingWorldApp } from "./exampleComponents/WorldApp.tsx";
-import { PropDrillingDebugInfo } from "./demoControls/PropDrillingDebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { fetchWorlds, type World } from "../../api/worlds.ts";
 
 type Snapshot = {
@@ -34,7 +34,7 @@ export function PropDrillingNaiveRenderDemo() {
         setWorlds={setWorlds}
         onSnapshotChange={setSnapshot}
       />
-      <PropDrillingDebugInfo snapshot={snapshot} />
+      <DebugInfo snapshot={snapshot} title="Top level state snapshot" />
     </div>
   );
 }

src/examples/zustand-query/ZustandQuery.tsx

@@ -1,9 +1,22 @@
 import { QueryClientProvider } from "@tanstack/react-query";
 import css from "../../components/css/DemoLayout.module.css";
-import { DebugInfo } from "./demoControls/DebugInfo";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { WorldApp } from "./components/WorldApp";
 import { memo } from "react";
 import { queryClient } from "./data/WorldData.ts";
+import { useGetWorlds } from "./data/WorldData.ts";
+import { useWorldStore } from "../zustand/data/WorldStore.tsx";
+
+function ZustandQueryDebugInfo() {
+  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
+  const { data } = useGetWorlds();
+
+  return (
+    <DebugInfo
+      snapshot={{ selectedWorldId, hello: { worlds: data?.worlds } }}
+    />
+  );
+}
 
 export const ZustandQuery = memo(() => (
   <QueryClientProvider client={queryClient}>
@@ -15,7 +28,7 @@ export const ZustandQuery = memo(() => (
         more fully featured for handling data specific needs.
       </p>
       <WorldApp />
-      <DebugInfo />
+      <ZustandQueryDebugInfo />
     </div>
   </QueryClientProvider>
 ));

src/examples/zustand/ZustandRenderDemo.tsx

@@ -1,11 +1,18 @@
 import { useEffect } from "react";
 import { useLoaderData, useRevalidator } from "react-router-dom";
 import css from "../../components/css/DemoLayout.module.css";
-import { DebugInfo } from "./demoControls/DebugInfo.tsx";
+import { DebugInfo } from "../../components/DebugInfo.tsx";
 import { WorldApp } from "./exampleComponents/WorldApp.tsx";
 import { useWorldStore } from "./data/WorldStore.tsx";
 import type { WorldsResponse } from "../../api/worlds.ts";
 
+function ZustandDebugInfo() {
+  const selectedWorldId = useWorldStore((s) => s.selectedWorldId);
+  const worlds = useWorldStore((s) => s.hello.worlds);
+
+  return <DebugInfo snapshot={{ selectedWorldId, hello: { worlds } }} />;
+}
+
 export function ZustandRenderDemo() {
   const data = useLoaderData() as WorldsResponse;
   const revalidator = useRevalidator();
@@ -28,7 +35,7 @@ export function ZustandRenderDemo() {
       </p>
 
       <WorldApp revalidate={revalidator.revalidate} />
-      <DebugInfo />
+      <ZustandDebugInfo />
     </div>
   );
 }