@yorkie-js/react 0.6.3 → 0.6.5

package/dist/yorkie-js-react.d.ts

@@ -1,8 +1,10 @@
+import { default as default_2 } from 'react';
 import { Indexable } from '@yorkie-js/sdk';
 import { JSONArray } from '@yorkie-js/sdk';
 import { JSONObject } from '@yorkie-js/sdk';
 import { JSX } from 'react/jsx-dev-runtime';
 import { PropsWithChildren } from 'react';
+import { StreamConnectionStatus } from '@yorkie-js/sdk';
 
 /**
  * `DocumentProvider` is a component that provides a document to its children.
@@ -13,13 +15,18 @@ export declare const DocumentProvider: <R, P extends Indexable = Indexable>({ do
     docKey: string;
     initialRoot?: R | undefined;
     initialPresence?: P | undefined;
-    children?: React.ReactNode;
+    children?: default_2.ReactNode;
 }) => JSX.Element;
 
 export { JSONArray }
 
 export { JSONObject }
 
+/**
+ * `useConnection` is a custom hook that returns the connection status of the document.
+ */
+export declare const useConnection: () => StreamConnectionStatus;
+
 /**
  * `useDocument` is a custom hook that returns the root object and update function of the document.
  * This hook must be used within a `DocumentProvider`.
@@ -30,6 +37,7 @@ export declare const useDocument: <R, P extends Indexable = Indexable>() => {
         clientID: string;
         presence: P;
     }[];
+    connection: StreamConnectionStatus;
     update: (callback: (root: R, presence: P) => void) => void;
     loading: boolean;
     error: Error | undefined;

package/dist/yorkie-js-react.es.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-import { useState, useEffect, useCallback, createContext, useContext } from "react";
+import { useState, useEffect, useCallback, createContext, useRef, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 var Code$1;
 (function(Code2) {
@@ -20175,7 +20175,7 @@ function createAuthInterceptor(apiKey, token) {
   };
 }
 const name = "@yorkie-js/sdk";
-const version = "0.6.3";
+const version = "0.6.5";
 const pkg = {
   name,
   version
@@ -21088,15 +21088,23 @@ const YorkieProvider = ({ apiKey, rpcAddr = "https://api.yorkie.dev", children }
   const [client, setClient] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
+  const clientRef = useRef(void 0);
   useEffect(() => {
     setLoading(true);
     setError(void 0);
     async function activateClient() {
+      var _a2;
       try {
+        if ((_a2 = clientRef.current) == null ? void 0 : _a2.isActive()) {
+          setClient(clientRef.current);
+          setLoading(false);
+          return;
+        }
         const newClient = new Client(rpcAddr, {
           apiKey
         });
         await newClient.activate();
+        clientRef.current = newClient;
         setClient(newClient);
       } catch (e) {
         setError(
@@ -21108,8 +21116,10 @@ const YorkieProvider = ({ apiKey, rpcAddr = "https://api.yorkie.dev", children }
     }
     activateClient();
     return () => {
-      if (client && client.isActive()) {
-        client.deactivate({ keepalive: true });
+      var _a2;
+      if ((_a2 = clientRef.current) == null ? void 0 : _a2.isActive()) {
+        clientRef.current.deactivate({ keepalive: true });
+        clientRef.current = void 0;
       }
     };
   }, [apiKey, rpcAddr]);
@@ -21139,6 +21149,9 @@ const DocumentProvider = ({
   const [error, setError] = useState(void 0);
   const [root, setRoot] = useState(initialRoot);
   const [presences, setPresences] = useState([]);
+  const [connection, setConnection] = useState(
+    StreamConnectionStatus.Disconnected
+  );
   useEffect(() => {
     if (clientError) {
       setLoading(false);
@@ -21152,20 +21165,31 @@ const DocumentProvider = ({
     setLoading(true);
     setError(void 0);
     const newDoc = new Document(docKey);
+    const unsubs = [];
+    unsubs.push(
+      newDoc.subscribe(() => {
+        setRoot(newDoc.getRoot());
+      })
+    );
+    unsubs.push(
+      newDoc.subscribe("presence", () => {
+        setPresences(newDoc.getPresences());
+      })
+    );
+    unsubs.push(
+      newDoc.subscribe("connection", (event) => {
+        setConnection(event.value);
+      })
+    );
     async function attachDocument() {
       try {
         await (client == null ? void 0 : client.attach(newDoc, {
           initialRoot,
           initialPresence
         }));
-        newDoc.subscribe(() => {
-          setRoot(newDoc.getRoot());
-        });
-        newDoc.subscribe("presence", () => {
-          setPresences(newDoc.getPresences());
-        });
         setDoc(newDoc);
         setRoot(newDoc.getRoot());
+        setPresences(newDoc.getPresences());
       } catch (err) {
         setError(
           err instanceof Error ? err : new Error("Failed to attach document")
@@ -21179,6 +21203,9 @@ const DocumentProvider = ({
       if (client && client.hasDocument(docKey)) {
         client.detach(newDoc);
       }
+      for (const unsub of unsubs) {
+        unsub();
+      }
     };
   }, [client, clientLoading, clientError, docKey]);
   const update = useCallback(
@@ -21199,7 +21226,7 @@ const DocumentProvider = ({
   return /* @__PURE__ */ jsx(
     DocumentContext.Provider,
     {
-      value: { root, presences, update, loading, error },
+      value: { root, presences, connection, update, loading, error },
       children
     }
   );
@@ -21212,6 +21239,7 @@ const useDocument = () => {
   return {
     root: context.root,
     presences: context.presences,
+    connection: context.connection,
     update: context.update,
     loading: context.loading,
     error: context.error
@@ -21231,9 +21259,17 @@ const usePresences = () => {
   }
   return context.presences;
 };
+const useConnection = () => {
+  const context = useContext(DocumentContext);
+  if (!context) {
+    throw new Error("useConnection must be used within a DocumentProvider");
+  }
+  return context.connection;
+};
 export {
   DocumentProvider,
   YorkieProvider,
+  useConnection,
   useDocument,
   usePresences,
   useRoot,