jazz-tools 0.19.10 → 0.19.11

package/src/inspector/contexts/node.tsx

@@ -0,0 +1,129 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { CoID, LocalNode, RawAccount } from "cojson";
+import { WasmCrypto } from "cojson/crypto/WasmCrypto";
+import type { PureJSCrypto } from "cojson/dist/crypto/PureJSCrypto";
+import { createWebSocketPeer } from "cojson-transport-ws";
+
+type NodeContextType = {
+  accountID: CoID<RawAccount> | null;
+  localNode: LocalNode | null;
+  server: string;
+  createLocalNode: (
+    accountID: CoID<RawAccount>,
+    clientSecret: string,
+    server: string,
+  ) => Promise<void>;
+  reset: () => void;
+};
+
+export const NodeContext = createContext<NodeContextType>({
+  accountID: null,
+  localNode: null,
+  server: "wss://cloud.jazz.tools/",
+  createLocalNode: async () => {
+    throw new Error("createLocalNode not implemented");
+  },
+  reset: () => {
+    throw new Error("reset not implemented");
+  },
+});
+
+type NodeProviderProps = PropsWithChildren<{
+  localNode?: LocalNode | null;
+  accountID?: CoID<RawAccount> | null;
+  server?: string;
+}>;
+
+let crypto: WasmCrypto | PureJSCrypto | null = null;
+
+async function getCrypto() {
+  if (crypto) return crypto;
+  crypto = await WasmCrypto.create();
+  return crypto;
+}
+
+export function NodeProvider(props: NodeProviderProps) {
+  const [accountID, setAccountID] = useState<CoID<RawAccount> | null>(
+    props?.accountID ?? null,
+  );
+  const [localNode, setLocalNode] = useState<LocalNode | null>(
+    props?.localNode ?? null,
+  );
+  const [server, setServer] = useState<string>(
+    props?.server ?? "wss://cloud.jazz.tools/",
+  );
+
+  useEffect(() => {
+    if (props.localNode !== undefined) setLocalNode(props.localNode);
+
+    if (props.accountID !== undefined) setAccountID(props.accountID);
+
+    if (props.server !== undefined) setServer(props.server);
+  }, [props.localNode, props.accountID, props.server]);
+
+  async function createLocalNode(
+    accountID: CoID<RawAccount>,
+    clientSecret: string,
+    server: string,
+  ) {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+
+    setLocalNode(null);
+
+    const wsPeer = createWebSocketPeer({
+      id: "cloud",
+      websocket: new WebSocket(server),
+      role: "server",
+    });
+
+    const crypto = await getCrypto();
+
+    const node = await LocalNode.withLoadedAccount({
+      accountID: accountID,
+      accountSecret: clientSecret as any,
+      sessionID: crypto.newRandomSessionID(accountID),
+      peers: [wsPeer],
+      crypto,
+      migration: async () => {
+        console.log("Not running any migration in inspector");
+      },
+    });
+
+    setLocalNode(node);
+    setAccountID(accountID);
+    setServer(server);
+  }
+
+  function reset() {
+    if (localNode) {
+      localNode.gracefulShutdown();
+    }
+    setLocalNode(null);
+    setAccountID(null);
+    setServer("wss://cloud.jazz.tools/");
+  }
+
+  return (
+    <NodeContext.Provider
+      value={{ accountID, localNode, server, createLocalNode, reset }}
+    >
+      {props.children}
+    </NodeContext.Provider>
+  );
+}
+
+export function useNode() {
+  const context = useContext(NodeContext);
+  if (!context) {
+    throw new Error("useNode must be used within a NodeProvider");
+  }
+  return context;
+}

package/src/inspector/custom-element.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { setup } from "goober";
 import { Account } from "jazz-tools";
 import { createRoot } from "react-dom/client";
-import { JazzInspectorInternal } from "./viewer/new-app.js";
+import { InspectorInApp } from "./in-app.js";
 
 setup(React.createElement);
 
@@ -56,7 +56,7 @@ export class JazzInspectorElement extends HTMLElement {
     }
 
     this.root?.render(
-      <JazzInspectorInternal
+      <InspectorInApp
         localNode={this.account.$jazz.localNode}
         accountId={this.account.$jazz.raw.id}
       />,

package/src/inspector/in-app.tsx

@@ -0,0 +1,61 @@
+import { CoID, LocalNode, RawAccount } from "cojson";
+import { styled } from "goober";
+import { PageStack } from "./viewer/page-stack.js";
+import { GlobalStyles } from "./ui/global-styles.js";
+import { InspectorButton, type Position } from "./viewer/inspector-button.js";
+import { useOpenInspector } from "./viewer/use-open-inspector.js";
+import { NodeProvider } from "./contexts/node.js";
+import { InMemoryRouterProvider } from "./router/in-memory-router.js";
+import { Header } from "./viewer/header.js";
+
+export function InspectorInApp({
+  position = "right",
+  localNode,
+  accountId,
+}: {
+  position?: Position;
+  localNode?: LocalNode;
+  accountId?: CoID<RawAccount>;
+}) {
+  const [open, setOpen] = useOpenInspector();
+
+  if (!open) {
+    return (
+      <InspectorButton position={position} onClick={() => setOpen(true)} />
+    );
+  }
+
+  return (
+    <NodeProvider localNode={localNode ?? null} accountID={accountId ?? null}>
+      <InMemoryRouterProvider>
+        <InspectorContainer as={GlobalStyles} style={{ zIndex: 999 }}>
+          <Header
+            showDeleteLocalData={true}
+            showClose={true}
+            onClose={() => setOpen(false)}
+          />
+
+          <PageStack />
+        </InspectorContainer>
+      </InMemoryRouterProvider>
+    </NodeProvider>
+  );
+}
+
+const InspectorContainer = styled("div")`
+  position: fixed;
+  height: 50vh;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid var(--j-border-color);
+  color: var(--j-text-color);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-background);
+  }
+`;

package/src/inspector/index.tsx

@@ -1,28 +1,8 @@
 import React, { useEffect, useState } from "react";
-
-export { JazzInspectorInternal } from "./viewer/new-app.js";
-export { PageStack } from "./viewer/page-stack.js";
-export { Breadcrumbs } from "./viewer/breadcrumbs.js";
-export { AccountOrGroupText } from "./viewer/account-or-group-text.js";
-
-export { Button } from "./ui/button.js";
-export { Input } from "./ui/input.js";
-export { Select } from "./ui/select.js";
-export { Icon } from "./ui/icon.js";
-export { GlobalStyles } from "./ui/global-styles.js";
-
-export {
-  resolveCoValue,
-  useResolvedCoValue,
-} from "./viewer/use-resolve-covalue.js";
-
-export type { PageInfo } from "./viewer/types.js";
-
 import { setup } from "goober";
 import { useJazzContext } from "jazz-tools/react-core";
 import { Account } from "jazz-tools";
-
-import { JazzInspectorInternal } from "./viewer/new-app.js";
+import { InspectorInApp } from "./in-app.js";
 import { Position } from "./viewer/inspector-button.js";
 
 export function JazzInspector({ position = "right" }: { position?: Position }) {
@@ -40,7 +20,7 @@ export function JazzInspector({ position = "right" }: { position?: Position }) {
   }
 
   return (
-    <JazzInspectorInternal
+    <InspectorInApp
       position={position}
       localNode={localNode}
       accountId={me?.$jazz.raw.id}

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);
+`;