@instantdb/react - npm Package Compare versions

Comparing version 0.16.2 to 0.16.3

dist/InstantReactAbstractDatabase.d.ts

@@ -1,2 +0,2 @@
-import { Auth, Storage, type AuthState, type TransactionChunk, type PresenceOpts, type PresenceResponse, type RoomSchemaShape, type InstaQLParams, type InstantConfig, type PageInfoResponse, InstantCoreDatabase, InstaQLLifecycleState, InstaQLResponse, RoomsOf, InstantSchemaDef, IInstantDatabase } from "@instantdb/core";
+import { Auth, Storage, type AuthState, type ConnectionStatus, type TransactionChunk, type PresenceOpts, type PresenceResponse, type RoomSchemaShape, type InstaQLParams, type InstantConfig, type PageInfoResponse, InstantCoreDatabase, InstaQLLifecycleState, InstaQLResponse, RoomsOf, InstantSchemaDef, IInstantDatabase } from "@instantdb/core";
 import { KeyboardEvent } from "react";
@@ -192,2 +192,25 @@ export type PresenceHandle<PresenceShape, Keys extends keyof PresenceShape> = PresenceResponse<PresenceShape, Keys> & {
     /**
+     * Listen for connection status changes to Instant. Use this for things like
+     * showing connection state to users
+     *
+     * @see https://www.instantdb.com/docs/patterns#connection-status
+     * @example
+     *  function App() {
+     *    const status = db.useConnectionStatus()
+     *    const connectionState =
+     *      status === 'connecting' || status === 'opened'
+     *        ? 'authenticating'
+     *      : status === 'authenticated'
+     *        ? 'connected'
+     *      : status === 'closed'
+     *        ? 'closed'
+     *      : status === 'errored'
+     *        ? 'errored'
+     *      : 'unexpected state';
+     *
+     *    return <div>Connection state: {connectionState}</div>
+     *  }
+     */
+    useConnectionStatus: () => ConnectionStatus;
+    /**
      * Use this for one-off queries.
@@ -194,0 +217,0 @@ * Returns local data if available, otherwise fetches from the server.

dist/InstantReactAbstractDatabase.js

@@ -274,2 +274,40 @@ "use strict";
         /**
+         * Listen for connection status changes to Instant. Use this for things like
+         * showing connection state to users
+         *
+         * @see https://www.instantdb.com/docs/patterns#connection-status
+         * @example
+         *  function App() {
+         *    const status = db.useConnectionStatus()
+         *    const connectionState =
+         *      status === 'connecting' || status === 'opened'
+         *        ? 'authenticating'
+         *      : status === 'authenticated'
+         *        ? 'connected'
+         *      : status === 'closed'
+         *        ? 'closed'
+         *      : status === 'errored'
+         *        ? 'errored'
+         *      : 'unexpected state';
+         *
+         *    return <div>Connection state: {connectionState}</div>
+         *  }
+         */
+        this.useConnectionStatus = () => {
+            const statusRef = (0, react_1.useRef)(this._core._reactor.status);
+            const subscribe = (0, react_1.useCallback)((cb) => {
+                const unsubscribe = this._core.subscribeConnectionStatus((newStatus) => {
+                    if (newStatus !== statusRef.current) {
+                        statusRef.current = newStatus;
+                        cb();
+                    }
+                });
+                return unsubscribe;
+            }, []);
+            const status = (0, react_1.useSyncExternalStore)(subscribe, () => statusRef.current, 
+            // For SSR, always return 'connecting' as the initial state
+            () => 'connecting');
+            return status;
+        };
+        /**
          * Use this for one-off queries.
@@ -276,0 +314,0 @@ * Returns local data if available, otherwise fetches from the server.

dist/module/InstantReactAbstractDatabase.d.ts

@@ -1,2 +0,2 @@
-import { Auth, Storage, type AuthState, type TransactionChunk, type PresenceOpts, type PresenceResponse, type RoomSchemaShape, type InstaQLParams, type InstantConfig, type PageInfoResponse, InstantCoreDatabase, InstaQLLifecycleState, InstaQLResponse, RoomsOf, InstantSchemaDef, IInstantDatabase } from "@instantdb/core";
+import { Auth, Storage, type AuthState, type ConnectionStatus, type TransactionChunk, type PresenceOpts, type PresenceResponse, type RoomSchemaShape, type InstaQLParams, type InstantConfig, type PageInfoResponse, InstantCoreDatabase, InstaQLLifecycleState, InstaQLResponse, RoomsOf, InstantSchemaDef, IInstantDatabase } from "@instantdb/core";
 import { KeyboardEvent } from "react";
@@ -192,2 +192,25 @@ export type PresenceHandle<PresenceShape, Keys extends keyof PresenceShape> = PresenceResponse<PresenceShape, Keys> & {
     /**
+     * Listen for connection status changes to Instant. Use this for things like
+     * showing connection state to users
+     *
+     * @see https://www.instantdb.com/docs/patterns#connection-status
+     * @example
+     *  function App() {
+     *    const status = db.useConnectionStatus()
+     *    const connectionState =
+     *      status === 'connecting' || status === 'opened'
+     *        ? 'authenticating'
+     *      : status === 'authenticated'
+     *        ? 'connected'
+     *      : status === 'closed'
+     *        ? 'closed'
+     *      : status === 'errored'
+     *        ? 'errored'
+     *      : 'unexpected state';
+     *
+     *    return <div>Connection state: {connectionState}</div>
+     *  }
+     */
+    useConnectionStatus: () => ConnectionStatus;
+    /**
      * Use this for one-off queries.
@@ -194,0 +217,0 @@ * Returns local data if available, otherwise fetches from the server.

dist/module/InstantReactAbstractDatabase.js

@@ -270,2 +270,40 @@ import { txInit, init_experimental, } from "@instantdb/core";
         /**
+         * Listen for connection status changes to Instant. Use this for things like
+         * showing connection state to users
+         *
+         * @see https://www.instantdb.com/docs/patterns#connection-status
+         * @example
+         *  function App() {
+         *    const status = db.useConnectionStatus()
+         *    const connectionState =
+         *      status === 'connecting' || status === 'opened'
+         *        ? 'authenticating'
+         *      : status === 'authenticated'
+         *        ? 'connected'
+         *      : status === 'closed'
+         *        ? 'closed'
+         *      : status === 'errored'
+         *        ? 'errored'
+         *      : 'unexpected state';
+         *
+         *    return <div>Connection state: {connectionState}</div>
+         *  }
+         */
+        this.useConnectionStatus = () => {
+            const statusRef = useRef(this._core._reactor.status);
+            const subscribe = useCallback((cb) => {
+                const unsubscribe = this._core.subscribeConnectionStatus((newStatus) => {
+                    if (newStatus !== statusRef.current) {
+                        statusRef.current = newStatus;
+                        cb();
+                    }
+                });
+                return unsubscribe;
+            }, []);
+            const status = useSyncExternalStore(subscribe, () => statusRef.current, 
+            // For SSR, always return 'connecting' as the initial state
+            () => 'connecting');
+            return status;
+        };
+        /**
          * Use this for one-off queries.
@@ -272,0 +310,0 @@ * Returns local data if available, otherwise fetches from the server.

dist/module/version.d.ts

 export default version;
-declare const version: "v0.16.2";
+declare const version: "v0.16.3";
 //# sourceMappingURL=version.d.ts.map

dist/module/version.js

 // Autogenerated by publish_packages.clj
-const version = "v0.16.2";
+const version = "v0.16.3";
 export default version;
 //# sourceMappingURL=version.js.map

dist/version.d.ts

 export default version;
-declare const version: "v0.16.2";
+declare const version: "v0.16.3";
 //# sourceMappingURL=version.d.ts.map

dist/version.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 // Autogenerated by publish_packages.clj
-const version = "v0.16.2";
+const version = "v0.16.3";
 exports.default = version;
 //# sourceMappingURL=version.js.map

package.json

 {
   "name": "@instantdb/react",
-  "version": "v0.16.2",
+  "version": "v0.16.3",
   "description": "Instant DB for React",
@@ -35,4 +35,4 @@ "main": "dist/index.js",
   "dependencies": {
-    "@instantdb/core": "v0.16.2"
+    "@instantdb/core": "v0.16.3"
   }
 }

src/InstantReactAbstractDatabase.ts

@@ -8,2 +8,3 @@ import {
   type AuthState,
+  type ConnectionStatus,
   type TransactionChunk,
@@ -452,2 +453,49 @@ type PresenceOpts,
   /**
+   * Listen for connection status changes to Instant. Use this for things like
+   * showing connection state to users
+   *
+   * @see https://www.instantdb.com/docs/patterns#connection-status
+   * @example
+   *  function App() {
+   *    const status = db.useConnectionStatus()
+   *    const connectionState =
+   *      status === 'connecting' || status === 'opened'
+   *        ? 'authenticating'
+   *      : status === 'authenticated'
+   *        ? 'connected'
+   *      : status === 'closed'
+   *        ? 'closed'
+   *      : status === 'errored'
+   *        ? 'errored'
+   *      : 'unexpected state';
+   *
+   *    return <div>Connection state: {connectionState}</div>
+   *  }
+   */
+  useConnectionStatus = (): ConnectionStatus => {
+    const statusRef = useRef<ConnectionStatus>(this._core._reactor.status as ConnectionStatus);
+
+    const subscribe = useCallback((cb: Function) => {
+      const unsubscribe = this._core.subscribeConnectionStatus((newStatus) => {
+        if (newStatus !== statusRef.current) {
+          statusRef.current = newStatus;
+          cb();
+        }
+      });
+
+      return unsubscribe;
+    }, []);
+
+    const status = useSyncExternalStore<ConnectionStatus>(
+      subscribe,
+      () => statusRef.current,
+      // For SSR, always return 'connecting' as the initial state
+      () => 'connecting'
+    );
+
+    return status;
+  }
+
+
+  /**
    * Use this for one-off queries.
@@ -454,0 +502,0 @@ * Returns local data if available, otherwise fetches from the server.

src/version.js

 // Autogenerated by publish_packages.clj
-const version = "v0.16.2";
+const version = "v0.16.3";
 
 export default version;

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

596486

increased by2.04%

Lines of code

10062

increased by2.02%

Dependency changes

• Updated@instantdb/core@v0.16.3