jazz-tools 0.19.10 → 0.19.12

package/src/inspector/pages/home.tsx

@@ -0,0 +1,77 @@
+import { styled } from "goober";
+import { useNode } from "../contexts/node";
+import { Heading } from "../ui/heading";
+import { Button, Input } from "../ui";
+import { useState } from "react";
+import { CoID, RawCoValue } from "cojson";
+import { useRouter } from "../router";
+
+export function HomePage() {
+  const { localNode, accountID } = useNode();
+  const { path, setPage } = useRouter();
+  const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+
+  if (!localNode || !accountID) {
+    return <div>Loading...</div>;
+  }
+
+  const handleCoValueIdSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+
+  return (
+    <>
+      <CenteredForm
+        onSubmit={handleCoValueIdSubmit}
+        aria-hidden={path.length !== 0}
+      >
+        <Heading>Jazz CoValue Inspector</Heading>
+
+        <Input
+          label="CoValue ID"
+          className="font-mono"
+          hideLabel
+          placeholder="co_z1234567890abcdef123456789"
+          value={coValueId}
+          onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+        />
+
+        <Button type="submit" variant="primary">
+          Inspect CoValue
+        </Button>
+
+        <OrText>or</OrText>
+
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setPage(accountID);
+          }}
+        >
+          Inspect my account
+        </Button>
+      </CenteredForm>
+    </>
+  );
+}
+
+const CenteredForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: -1.5rem;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
+`;
+
+const OrText = styled("p")`
+  text-align: center;
+`;

package/src/inspector/router/context.ts

@@ -0,0 +1,21 @@
+import { CoID, RawCoValue } from "cojson";
+import { PageInfo } from "../viewer/types.js";
+import { createContext, useContext } from "react";
+
+export interface Router {
+  path: PageInfo[];
+  setPage: (coId: CoID<RawCoValue>) => void;
+  addPages: (newPages: PageInfo[]) => void;
+  goToIndex: (index: number) => void;
+  goBack: () => void;
+}
+
+export const RouterContext = createContext<Router | null>(null);
+
+export function useRouter(): Router {
+  const context = useContext(RouterContext);
+  if (!context) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  return context;
+}

package/src/inspector/router/hash-router.tsx

@@ -0,0 +1,128 @@
+import React, {
+  ReactNode,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { Router, RouterContext } from "./context.js";
+import { PageInfo } from "../viewer/types.js";
+import { CoID, RawCoValue } from "cojson";
+
+export function HashRouterProvider({
+  children,
+  defaultPath,
+}: {
+  children: ReactNode;
+  defaultPath?: PageInfo[];
+}) {
+  const [path, setPath] = useState<PageInfo[]>(() => {
+    if (typeof window === "undefined") return defaultPath || [];
+    const hash = window.location.hash.slice(2); // Remove '#/'
+
+    const defaultEncoded = encodePathToHash(defaultPath || []);
+
+    if (defaultPath) {
+      window.history.pushState({}, "", `#/${defaultEncoded}`);
+      return defaultPath;
+    }
+
+    if (hash) {
+      const path = decodePathFromHash(hash);
+      return path;
+    }
+
+    window.history.pushState({}, "", `#/${encodePathToHash([])}`);
+    return [];
+  });
+
+  const updatePath = useCallback((newPath: PageInfo[]) => {
+    setPath(newPath);
+    if (typeof window !== "undefined") {
+      const hash = encodePathToHash(newPath);
+      window.history.pushState({}, "", `#/${hash}`);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(2);
+      const currentPath = encodePathToHash(path);
+
+      if (hash === currentPath) return;
+
+      if (hash) {
+        try {
+          const newPath = decodePathFromHash(hash);
+          setPath(newPath);
+        } catch (e) {
+          console.error("Failed to parse hash:", e);
+        }
+      } else if (defaultPath) {
+        setPath(defaultPath);
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    return () => window.removeEventListener("hashchange", handleHashChange);
+  }, [path, defaultPath]);
+
+  useEffect(() => {
+    if (defaultPath) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath]);
+
+  const router: Router = useMemo(() => {
+    const addPages = (newPages: PageInfo[]) => {
+      updatePath([...path, ...newPages]);
+    };
+
+    const goToIndex = (index: number) => {
+      updatePath(path.slice(0, index + 1));
+    };
+
+    const setPage = (coId: CoID<RawCoValue>) => {
+      updatePath([{ coId, name: "Root" }]);
+    };
+
+    const goBack = () => {
+      updatePath(path.slice(0, path.length - 1));
+    };
+
+    return {
+      path,
+      addPages,
+      goToIndex,
+      setPage,
+      goBack,
+    };
+  }, [path, updatePath]);
+
+  return (
+    <RouterContext.Provider value={router}>{children}</RouterContext.Provider>
+  );
+}
+
+function encodePathToHash(path: PageInfo[]): string {
+  return path
+    .map((page) => {
+      if (page.name && page.name !== "Root") {
+        return `${page.coId}:${encodeURIComponent(page.name)}`;
+      }
+      return page.coId;
+    })
+    .join("/");
+}
+
+function decodePathFromHash(hash: string): PageInfo[] {
+  return hash.split("/").map((segment) => {
+    const [coId, encodedName] = segment.split(":");
+    return {
+      coId,
+      name: encodedName ? decodeURIComponent(encodedName) : undefined,
+    } as PageInfo;
+  });
+}

package/src/inspector/{viewer/use-page-path.ts → router/in-memory-router.tsx}

@@ -1,10 +1,17 @@
-import { CoID, RawCoValue } from "cojson";
-import { useCallback, useEffect, useState } from "react";
-import { PageInfo } from "./types.js";
+import { ReactNode, useCallback, useEffect, useMemo, useState } from "react";
+import type { CoID, RawCoValue } from "cojson";
+import { Router, RouterContext } from "./context.js";
+import { PageInfo } from "../viewer/types.js";
 
 const STORAGE_KEY = "jazz-inspector-paths";
 
-export function usePagePath(defaultPath?: PageInfo[]) {
+export function InMemoryRouterProvider({
+  children,
+  defaultPath,
+}: {
+  children: ReactNode;
+  defaultPath?: PageInfo[];
+}) {
   const [path, setPath] = useState<PageInfo[]>(() => {
     if (typeof window === "undefined") return [];
     const stored = localStorage.getItem(STORAGE_KEY);
@@ -29,38 +36,33 @@ export function usePagePath(defaultPath?: PageInfo[]) {
     }
   }, [defaultPath, path, updatePath]);
 
-  const addPages = useCallback(
-    (newPages: PageInfo[]) => {
+  const router: Router = useMemo(() => {
+    const addPages = (newPages: PageInfo[]) => {
       updatePath([...path, ...newPages]);
-    },
-    [path, updatePath],
-  );
+    };
 
-  const goToIndex = useCallback(
-    (index: number) => {
+    const goToIndex = (index: number) => {
       updatePath(path.slice(0, index + 1));
-    },
-    [path, updatePath],
-  );
+    };
 
-  const setPage = useCallback(
-    (coId: CoID<RawCoValue>) => {
+    const setPage = (coId: CoID<RawCoValue>) => {
       updatePath([{ coId, name: "Root" }]);
-    },
-    [updatePath],
-  );
+    };
 
-  const goBack = useCallback(() => {
-    if (path.length > 1) {
+    const goBack = () => {
       updatePath(path.slice(0, path.length - 1));
-    }
+    };
+
+    return {
+      path,
+      addPages,
+      goToIndex,
+      setPage,
+      goBack,
+    };
   }, [path, updatePath]);
 
-  return {
-    path,
-    setPage,
-    addPages,
-    goToIndex,
-    goBack,
-  };
+  return (
+    <RouterContext.Provider value={router}>{children}</RouterContext.Provider>
+  );
 }

package/src/inspector/router/index.ts

@@ -0,0 +1,4 @@
+export type { Router } from "./context.js";
+export { useRouter } from "./context.js";
+export { InMemoryRouterProvider } from "./in-memory-router.js";
+export { HashRouterProvider } from "./hash-router.js";

package/src/inspector/standalone.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { HashRouterProvider } from "./router";
+import { setup, styled } from "goober";
+import { NodeContext, NodeProvider } from "./contexts/node";
+import { Header } from "./viewer/header";
+import { GlobalStyles } from "./ui/global-styles";
+import { PageStack } from "./viewer/page-stack";
+import { AccountSwitcher } from "./account-switcher";
+
+type InspectorAppProps = {
+  defaultSyncServer?: string;
+};
+
+setup(React.createElement);
+
+export default function InspectorStandalone(props: InspectorAppProps) {
+  return (
+    <HashRouterProvider>
+      <NodeProvider>
+        <InspectorContainer as={GlobalStyles}>
+          <Header>
+            <AccountSwitcher defaultSyncServer={props.defaultSyncServer} />
+          </Header>
+          <NodeContext.Consumer>
+            {({ accountID }) =>
+              accountID ? (
+                <PageStack />
+              ) : (
+                <CenteredMessage>
+                  Select an account to connect to the inspector.
+                </CenteredMessage>
+              )
+            }
+          </NodeContext.Consumer>
+        </InspectorContainer>
+      </NodeProvider>
+    </HashRouterProvider>
+  );
+}
+
+const InspectorContainer = styled("div")`
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  color: #44403c; /* text-stone-700 */
+  background-color: #fff; /* bg-white */
+
+  @media (prefers-color-scheme: dark) {
+    color: #d6d3d1; /* text-stone-300 */
+    background-color: #0c0a09; /* bg-stone-950 */
+  }
+`;
+
+const CenteredMessage = styled("p")`
+  text-align: center;
+  margin: 0;
+  padding: 1rem;
+  color: var(--j-text-color);
+`;