fix: updated with solidjs and feedback

rocicorp · 0xcadams · Jul 30, 2025 · Jul 18, 2025 · Jul 18, 2025 · Jul 21, 2025
commit 6d5be78e95cc6eb38772d505e9b1329d77b299cf
diff --git a/apps/zbugs/src/pages/issue/issue-composer.tsx b/apps/zbugs/src/pages/issue/issue-composer.tsx
@@ -8,8 +8,6 @@ import {
   MAX_ISSUE_TITLE_LENGTH,
 } from '../../limits.ts';
 import {isCtrlEnter} from './is-ctrl-enter.ts';
-import {promiseRace} from '../../../../../packages/shared/src/promise.ts';
-import {sleep} from '../../../../../packages/shared/src/sleep.ts';
 
 interface Props {
   /** If id is defined the issue created by the composer. */
@@ -51,10 +49,10 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
     });
   }, [description]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = () => {
     const id = nanoid();
 
-    const result = z.mutate.issue.create({
+    z.mutate.issue.create({
       id,
       title,
       description: description ?? '',
@@ -64,12 +62,6 @@ export function IssueComposer({isOpen, onDismiss}: Props) {
 
     reset();
     onDismiss(id);
-
-    const raceResult = await promiseRace([sleep(5000), result.server]);
-    if (raceResult === 0) {
-      // TODO show toast
-      console.log('timed out');
-    }
   };
 
   const reset = () => {

diff --git a/apps/zbugs/src/zero-init.tsx b/apps/zbugs/src/zero-init.tsx
@@ -1,8 +1,8 @@
 import {ZeroProvider} from '@rocicorp/zero/react';
 import {useLogin} from './hooks/use-login.tsx';
-import {createMutators} from '../shared/mutators.ts';
+import {createMutators, type Mutators} from '../shared/mutators.ts';
 import {useMemo, type ReactNode} from 'react';
-import {schema} from '../shared/schema.ts';
+import {schema, type Schema} from '../shared/schema.ts';
 import type {ZeroOptions} from '@rocicorp/zero';
 
 export function ZeroInit({children}: {children: ReactNode}) {
@@ -22,10 +22,7 @@ export function ZeroInit({children}: {children: ReactNode}) {
         }
         return login.loginState?.encoded;
       },
-    } as const satisfies ZeroOptions<
-      typeof schema,
-      ReturnType<typeof createMutators>
-    >;
+    } as const satisfies ZeroOptions<Schema, Mutators>;
   }, [login]);
 
   return <ZeroProvider {...props}>{children}</ZeroProvider>;

diff --git a/packages/shared/src/promise.ts b/packages/shared/src/promise.ts
diff --git a/packages/zero-client/src/client/options.ts b/packages/zero-client/src/client/options.ts
@@ -118,6 +118,12 @@ export interface ZeroOptions<
 
   /**
    * `onOnlineChange` is called when the Zero instance's online status changes.
+   *
+   * @deprecated Use `onOnline` on the Zero instance instead. e.g.
+   * ```ts
+   * const zero = new Zero({...});
+   * zero.onOnline((online) => { ... });
+   * ```
    */
   onOnlineChange?: ((online: boolean) => void) | undefined;
 

diff --git a/packages/zero-client/src/client/zero.ts b/packages/zero-client/src/client/zero.ts
@@ -4,7 +4,6 @@ import {
   ReplicacheImpl,
   type ReplicacheImplOptions,
 } from '../../../replicache/src/impl.ts';
-import {promiseRace} from '../../../shared/src/promise.ts';
 import {dropDatabase} from '../../../replicache/src/persist/collect-idb-databases.ts';
 import type {Puller, PullerResult} from '../../../replicache/src/puller.ts';
 import type {Pusher, PusherResult} from '../../../replicache/src/pusher.ts';
@@ -903,8 +902,7 @@ export class Zero<
 
     lc.debug?.('Closing Zero instance. Stack:', new Error().stack);
 
-    // should we unsubscribe all listeners here?
-    // this.#onlineManager.cleanup();
+    this.#onlineManager.cleanup();
 
     if (this.#connectionState !== ConnectionState.Disconnected) {
       this.#disconnect(
@@ -1802,10 +1800,6 @@ export class Zero<
   /**
    * A rough heuristic for whether the client is currently online and
    * authenticated.
-   *
-   * This does *not* update in React when the online status changes.
-   * Use {@link useZeroOnline} or {@link addOnlineChangeListener} to subscribe
-   * to online status changes.
    */
   get online(): boolean {
     return this.#onlineManager.online;
@@ -1815,10 +1809,11 @@ export class Zero<
    * Subscribe to online status changes.
    *
    * This is useful when you want to update state based on the online status.
+   * 
    * @param listener - The listener to subscribe to.
    * @returns A function to unsubscribe the listener.
    */
-  addOnlineChangeListener = (
+  onOnline = (
     listener: (online: boolean) => void,
   ): (() => void) => this.#onlineManager.subscribe(listener);
 
@@ -2109,6 +2104,13 @@ function addWebSocketIDToLogContext(
   return lc.withContext('wsid', wsid);
 }
 
+/**
+ * Like Promise.race but returns the index of the first promise that resolved.
+ */
+function promiseRace(ps: Promise<unknown>[]): Promise<number> {
+  return Promise.race(ps.map((p, i) => p.then(() => i)));
+}
+
 class TimedOutError extends Error {
   constructor(m: string) {
     super(`${m} timed out`);

diff --git a/packages/zero-react/src/use-zero-online.tsx b/packages/zero-react/src/use-zero-online.tsx
@@ -5,12 +5,13 @@ import {useZero} from './zero-provider.tsx';
  * Hook to subscribe to the online status of the Zero instance.
  *
  * This is useful when you want to update state based on the online status.
+ *
  * @returns The online status of the Zero instance.
  */
 export function useZeroOnline(): boolean {
   const zero = useZero();
   return useSyncExternalStore(
-    zero.addOnlineChangeListener,
+    zero.onOnline,
     () => zero.online,
     () => zero.online,
   );

diff --git a/packages/zero-solid/src/mod.ts b/packages/zero-solid/src/mod.ts
@@ -5,3 +5,4 @@ export {
   useQuery,
 } from './use-query.ts';
 export {createUseZero, createZero, useZero, ZeroProvider} from './use-zero.ts';
+export {useZeroOnline} from './use-zero-online.ts';
diff --git a/packages/zero-solid/src/use-zero-online.ts b/packages/zero-solid/src/use-zero-online.ts
@@ -0,0 +1,26 @@
+import {createSignal, onCleanup, type Accessor} from 'solid-js';
+import {useZero} from './use-zero.ts';
+
+/**
+ * Tracks the online status of the current Zero instance.
+ *
+ * @returns An accessor — call `online()` to get a reactive `boolean`.
+ *
+ * @example
+ * const online = useZeroOnline();
+ *
+ * <span>
+ *   {online() ? 'Online' : 'Offline'}
+ * </span>
+ */
+export function useZeroOnline(): Accessor<boolean> {
+  const zero = useZero()();
+
+  const [online, setOnline] = createSignal<boolean>(zero?.online ?? false);
+
+  const unsubscribe = zero?.onOnline(setOnline);
+
+  onCleanup(unsubscribe ?? (() => {}));
+
+  return online;
+}