@yorkie-js/react 0.6.6 → 0.6.7-rc1

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

@@ -1,3 +1,4 @@
+import { ClientOptions } from '@yorkie-js/sdk';
 import { default as default_2 } from 'react';
 import { Indexable } from '@yorkie-js/sdk';
 import { JSONArray } from '@yorkie-js/sdk';
@@ -63,15 +64,10 @@ export declare const useRoot: () => {
 /**
  * `useYorkieDoc` is a custom hook that initializes a Yorkie Client and a
  * document in a single hook.
- *
- * @param apiKey
- * @param docKey
- * @returns
  */
-export declare function useYorkieDoc<R, P extends Indexable>(apiKey: string, docKey: string, options?: {
+export declare function useYorkieDoc<R, P extends Indexable = Indexable>(apiKey: string, docKey: string, opts?: Omit<ClientOptions, 'apiKey'> & {
     initialRoot?: R;
     initialPresence?: P;
-    rpcAddr?: string;
 }): {
     root: R;
     presences: Array<{
@@ -88,14 +84,6 @@ export declare function useYorkieDoc<R, P extends Indexable>(apiKey: string, doc
  * `YorkieProvider` is a component that provides the Yorkie client to its children.
  * It initializes the Yorkie client with the given API key and RPC address.
  */
-export declare const YorkieProvider: React.FC<PropsWithChildren<YorkieProviderProps>>;
-
-/**
- * `YorkieProviderProps` is a set of properties for `YorkieProvider`.
- */
-declare interface YorkieProviderProps {
-    apiKey: string;
-    rpcAddr?: string;
-}
+export declare const YorkieProvider: React.FC<PropsWithChildren<ClientOptions>>;
 
 export { }

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

@@ -3,7 +3,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a, _b, _c, _d, _e, _f, _g, _h, _i;
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState, useEffect, useContext, useCallback } from "react";
+import { createContext, useMemo, useState, useEffect, useContext, useCallback } from "react";
+const name$1 = "@yorkie-js/react";
+const version$1 = "0.6.7-rc1";
+const pkg$1 = {
+  name: name$1,
+  version: version$1
+};
 var Code$1;
 (function(Code2) {
   Code2[Code2["Canceled"] = 1] = "Canceled";
@@ -3699,9 +3705,6 @@ function createClient(service, transport) {
     }
   });
 }
-function createPromiseClient(service, transport) {
-  return createClient(service, transport);
-}
 function createUnaryFn(transport, service, method) {
   return async function(input, options) {
     var _a2, _b2;
@@ -20242,9 +20245,13 @@ const pkg = {
   name,
   version
 };
-function createMetricInterceptor() {
+function createMetricInterceptor(userAgent) {
   return (next) => async (req) => {
-    req.header.set("x-yorkie-user-agent", pkg.name + "/" + pkg.version);
+    if (userAgent) {
+      req.header.set("x-yorkie-user-agent", userAgent);
+    } else {
+      req.header.set("x-yorkie-user-agent", pkg.name + "/" + pkg.version);
+    }
     return await next(req);
   };
 }
@@ -20267,6 +20274,7 @@ var SyncMode = /* @__PURE__ */ ((SyncMode2) => {
   return SyncMode2;
 })(SyncMode || {});
 const DefaultClientOptions = {
+  rpcAddr: "https://api.yorkie.dev",
   syncLoopDuration: 50,
   retrySyncLoopDelay: 1e3,
   reconnectStreamDelay: 1e3
@@ -20281,7 +20289,7 @@ class Client {
    * @param rpcAddr - the address of the RPC server.
    * @param opts - the options of the client.
    */
-  constructor(rpcAddr, opts) {
+  constructor(opts) {
     __publicField(this, "id");
     __publicField(this, "key");
     __publicField(this, "metadata");
@@ -20299,7 +20307,8 @@ class Client {
     __publicField(this, "processing", false);
     __publicField(this, "keepalive", false);
     opts = opts || DefaultClientOptions;
-    this.key = opts.key ? opts.key : uuid();
+    const rpcAddr = opts.rpcAddr || DefaultClientOptions.rpcAddr;
+    this.key = opts.key || uuid();
     this.metadata = opts.metadata || {};
     this.status = "deactivated";
     this.attachmentMap = /* @__PURE__ */ new Map();
@@ -20320,11 +20329,14 @@ class Client {
     this.retrySyncLoopDelay = opts.retrySyncLoopDelay ?? DefaultClientOptions.retrySyncLoopDelay;
     const { authInterceptor, setToken } = createAuthInterceptor(this.apiKey);
     this.setAuthToken = setToken;
-    this.rpcClient = createPromiseClient(
+    this.rpcClient = createClient(
       YorkieService,
       createGrpcWebTransport({
         baseUrl: rpcAddr,
-        interceptors: [authInterceptor, createMetricInterceptor()],
+        interceptors: [
+          authInterceptor,
+          createMetricInterceptor(opts == null ? void 0 : opts.userAgent)
+        ],
         fetch: (input, init) => {
           const newInit = {
             ...init,
@@ -20350,22 +20362,28 @@ class Client {
       this.setAuthToken(token);
     }
     return this.enqueueTask(async () => {
-      return this.rpcClient.activateClient(
-        {
-          clientKey: this.key,
-          metadata: this.metadata
-        },
-        { headers: { "x-shard-key": this.apiKey } }
-      ).then((res) => {
+      try {
+        const res = await this.rpcClient.activateClient(
+          {
+            clientKey: this.key,
+            metadata: this.metadata
+          },
+          { headers: { "x-shard-key": this.apiKey } }
+        );
         this.id = res.clientId;
         this.status = "activated";
         this.runSyncLoop();
         logger.info(`[AC] c:"${this.getKey()}" activated, id:"${this.id}"`);
-      }).catch(async (err) => {
+        if (typeof window !== "undefined") {
+          window.addEventListener("beforeunload", async () => {
+            await this.deactivate({ keepalive: true });
+          });
+        }
+      } catch (err) {
         logger.error(`[AC] c:"${this.getKey()}" err :`, err);
         await this.handleConnectError(err);
         throw err;
-      });
+      }
     });
   }
   /**
@@ -20414,7 +20432,7 @@ class Client {
    * `attach` attaches the given document to this client. It tells the server that
    * this client will synchronize the given document.
    */
-  attach(doc, options = {}) {
+  attach(doc, opts = {}) {
     if (!this.isActive()) {
       throw new YorkieError(
         Code.ErrClientNotActivated,
@@ -20428,32 +20446,30 @@ class Client {
       );
     }
     doc.setActor(this.id);
-    doc.update((_, p) => p.set(options.initialPresence || {}));
-    const unsubscribeBroacastEvent = doc.subscribe(
-      "local-broadcast",
-      async (event) => {
-        var _a2;
-        const { topic, payload } = event.value;
-        const errorFn = (_a2 = event.options) == null ? void 0 : _a2.error;
-        const options2 = event.options;
-        try {
-          await this.broadcast(doc.getKey(), topic, payload, options2);
-        } catch (error) {
-          if (error instanceof Error) {
-            errorFn == null ? void 0 : errorFn(error);
-          }
+    doc.update((_, p) => p.set(opts.initialPresence || {}));
+    const unsub = doc.subscribe("local-broadcast", async (event) => {
+      var _a2;
+      const { topic, payload } = event.value;
+      const errorFn = (_a2 = event.options) == null ? void 0 : _a2.error;
+      const options = event.options;
+      try {
+        await this.broadcast(doc.getKey(), topic, payload, options);
+      } catch (error) {
+        if (error instanceof Error) {
+          errorFn == null ? void 0 : errorFn(error);
         }
       }
-    );
-    const syncMode = options.syncMode ?? "realtime";
+    });
+    const syncMode = opts.syncMode ?? "realtime";
     return this.enqueueTask(async () => {
-      return this.rpcClient.attachDocument(
-        {
-          clientId: this.id,
-          changePack: converter.toChangePack(doc.createChangePack())
-        },
-        { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
-      ).then(async (res) => {
+      try {
+        const res = await this.rpcClient.attachDocument(
+          {
+            clientId: this.id,
+            changePack: converter.toChangePack(doc.createChangePack())
+          },
+          { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
+        );
         const pack = converter.fromChangePack(res.changePack);
         doc.applyChangePack(pack);
         if (doc.getStatus() === DocStatus.Removed) {
@@ -20467,7 +20483,7 @@ class Client {
             doc,
             res.documentId,
             syncMode,
-            unsubscribeBroacastEvent
+            unsub
           )
         );
         if (syncMode !== "manual") {
@@ -20475,8 +20491,8 @@ class Client {
         }
         logger.info(`[AD] c:"${this.getKey()}" attaches d:"${doc.getKey()}"`);
         const crdtObject = doc.getRootObject();
-        if (options.initialRoot) {
-          const initialRoot = options.initialRoot;
+        if (opts.initialRoot) {
+          const initialRoot = opts.initialRoot;
           doc.update((root) => {
             for (const [k, v] of Object.entries(initialRoot)) {
               if (!crdtObject.has(k)) {
@@ -20487,11 +20503,11 @@ class Client {
           });
         }
         return doc;
-      }).catch(async (err) => {
+      } catch (err) {
         logger.error(`[AD] c:"${this.getKey()}" err :`, err);
         await this.handleConnectError(err);
         throw err;
-      });
+      }
     });
   }
   /**
@@ -20502,7 +20518,7 @@ class Client {
    * the changes should be applied to other replicas before GC time. For this,
    * if the document is no longer used by this client, it should be detached.
    */
-  detach(doc, options = { keepalive: false }) {
+  detach(doc, opts = { keepalive: false }) {
     if (!this.isActive()) {
       throw new YorkieError(
         Code.ErrClientNotActivated,
@@ -20518,15 +20534,16 @@ class Client {
     }
     doc.update((_, p) => p.clear());
     const task = async () => {
-      return await this.rpcClient.detachDocument(
-        {
-          clientId: this.id,
-          documentId: attachment.docID,
-          changePack: converter.toChangePack(doc.createChangePack()),
-          removeIfNotAttached: options.removeIfNotAttached ?? false
-        },
-        { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
-      ).then((res) => {
+      try {
+        const res = await this.rpcClient.detachDocument(
+          {
+            clientId: this.id,
+            documentId: attachment.docID,
+            changePack: converter.toChangePack(doc.createChangePack()),
+            removeIfNotAttached: opts.removeIfNotAttached ?? false
+          },
+          { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
+        );
         const pack = converter.fromChangePack(res.changePack);
         doc.applyChangePack(pack);
         if (doc.getStatus() !== DocStatus.Removed) {
@@ -20535,13 +20552,13 @@ class Client {
         this.detachInternal(doc.getKey());
         logger.info(`[DD] c:"${this.getKey()}" detaches d:"${doc.getKey()}"`);
         return doc;
-      }).catch(async (err) => {
+      } catch (err) {
         logger.error(`[DD] c:"${this.getKey()}" err :`, err);
         await this.handleConnectError(err);
         throw err;
-      });
+      }
     };
-    if (options.keepalive) {
+    if (opts.keepalive) {
       this.keepalive = true;
       const resp = task();
       this.keepalive = false;
@@ -20650,23 +20667,24 @@ class Client {
     const pbChangePack = converter.toChangePack(doc.createChangePack());
     pbChangePack.isRemoved = true;
     return this.enqueueTask(async () => {
-      return this.rpcClient.removeDocument(
-        {
-          clientId: this.id,
-          documentId: attachment.docID,
-          changePack: pbChangePack
-        },
-        { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
-      ).then((res) => {
+      try {
+        const res = await this.rpcClient.removeDocument(
+          {
+            clientId: this.id,
+            documentId: attachment.docID,
+            changePack: pbChangePack
+          },
+          { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
+        );
         const pack = converter.fromChangePack(res.changePack);
         doc.applyChangePack(pack);
         this.detachInternal(doc.getKey());
         logger.info(`[RD] c:"${this.getKey()}" removes d:"${doc.getKey()}"`);
-      }).catch(async (err) => {
+      } catch (err) {
         logger.error(`[RD] c:"${this.getKey()}" err :`, err);
         await this.handleConnectError(err);
         throw err;
-      });
+      }
     });
   }
   /**
@@ -20734,19 +20752,20 @@ class Client {
     };
     const doLoop = async () => {
       return this.enqueueTask(async () => {
-        return this.rpcClient.broadcast(
-          {
-            clientId: this.id,
-            documentId: attachment.docID,
-            topic,
-            payload: new TextEncoder().encode(JSON.stringify(payload))
-          },
-          { headers: { "x-shard-key": `${this.apiKey}/${docKey}` } }
-        ).then(() => {
+        try {
+          await this.rpcClient.broadcast(
+            {
+              clientId: this.id,
+              documentId: attachment.docID,
+              topic,
+              payload: new TextEncoder().encode(JSON.stringify(payload))
+            },
+            { headers: { "x-shard-key": `${this.apiKey}/${docKey}` } }
+          );
           logger.info(
             `[BC] c:"${this.getKey()}" broadcasts d:"${docKey}" t:"${topic}"`
           );
-        }).catch(async (err) => {
+        } catch (err) {
           logger.error(`[BC] c:"${this.getKey()}" err:`, err);
           if (await this.handleConnectError(err)) {
             if (err instanceof ConnectError && errorCodeOf(err) === Code.ErrUnauthenticated) {
@@ -20775,7 +20794,7 @@ class Client {
           } else {
             throw err;
           }
-        });
+        }
       });
     };
     return doLoop();
@@ -20960,19 +20979,20 @@ class Client {
     attachment.unsubscribeBroadcastEvent();
     this.attachmentMap.delete(docKey);
   }
-  syncInternal(attachment, syncMode) {
+  async syncInternal(attachment, syncMode) {
     const { doc, docID } = attachment;
     const reqPack = doc.createChangePack();
-    return this.rpcClient.pushPullChanges(
-      {
-        clientId: this.id,
-        documentId: docID,
-        changePack: converter.toChangePack(reqPack),
-        pushOnly: syncMode === "realtime-pushonly"
-        /* RealtimePushOnly */
-      },
-      { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
-    ).then((res) => {
+    try {
+      const res = await this.rpcClient.pushPullChanges(
+        {
+          clientId: this.id,
+          documentId: docID,
+          changePack: converter.toChangePack(reqPack),
+          pushOnly: syncMode === "realtime-pushonly"
+          /* RealtimePushOnly */
+        },
+        { headers: { "x-shard-key": `${this.apiKey}/${doc.getKey()}` } }
+      );
       const respPack = converter.fromChangePack(res.changePack);
       if (respPack.hasChanges() && (attachment.syncMode === "realtime-pushonly" || attachment.syncMode === "realtime-syncoff")) {
         return doc;
@@ -20993,7 +21013,7 @@ class Client {
         `[PP] c:"${this.getKey()}" sync d:"${docKey}", push:${reqPack.getChangeSize()} pull:${remoteSize} cp:${respPack.getCheckpoint().toTestString()}`
       );
       return doc;
-    }).catch(async (err) => {
+    } catch (err) {
       doc.publish([
         {
           type: DocEventType.SyncStatusChanged,
@@ -21002,7 +21022,7 @@ class Client {
       ]);
       logger.error(`[PP] c:"${this.getKey()}" err :`, err);
       throw err;
-    });
+    }
   }
   /**
    * `handleConnectError` handles the given error. If the given error can be
@@ -21087,7 +21107,7 @@ const YorkieContext = createContext({
   loading: true,
   error: void 0
 });
-function useYorkieClient(apiKey, rpcAddr) {
+function useYorkieClient(opts) {
   const [client, setClient] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
@@ -21103,9 +21123,7 @@ function useYorkieClient(apiKey, rpcAddr) {
         return;
       }
       try {
-        const newClient = new Client(rpcAddr, {
-          apiKey
-        });
+        const newClient = new Client(opts);
         await newClient.activate();
         setClient(newClient);
       } catch (e) {
@@ -21122,11 +21140,20 @@ function useYorkieClient(apiKey, rpcAddr) {
         client.deactivate({ keepalive: true });
       }
     };
-  }, [apiKey, rpcAddr, didMount]);
+  }, [opts.apiKey, opts.rpcAddr, didMount]);
   return { client, loading, error };
 }
-const YorkieProvider = ({ apiKey, rpcAddr = "https://api.yorkie.dev", children }) => {
-  const { client, loading, error } = useYorkieClient(apiKey, rpcAddr);
+const YorkieProvider = ({
+  children,
+  ...opts
+}) => {
+  const clientOpts = useMemo(() => {
+    return {
+      userAgent: pkg$1.name + "/" + pkg$1.version,
+      ...opts
+    };
+  }, [opts.apiKey, opts.rpcAddr]);
+  const { client, loading, error } = useYorkieClient(clientOpts);
   return /* @__PURE__ */ jsx(YorkieContext.Provider, { value: { client, loading, error }, children });
 };
 const useYorkie = () => {
@@ -21289,22 +21316,26 @@ const useConnection = () => {
   }
   return context.connection;
 };
-function useYorkieDoc(apiKey, docKey, options) {
-  const rpcAddr = (options == null ? void 0 : options.rpcAddr) || "https://api.yorkie.dev";
-  const initialRoot = (options == null ? void 0 : options.initialRoot) || {};
-  const initialPresence = (options == null ? void 0 : options.initialPresence) || {};
+function useYorkieDoc(apiKey, docKey, opts) {
+  const clientOpts = useMemo(() => {
+    return {
+      apiKey,
+      userAgent: pkg$1.name + "/" + pkg$1.version,
+      ...opts
+    };
+  }, [apiKey]);
   const {
     client,
     loading: clientLoading,
     error: clientError
-  } = useYorkieClient(apiKey, rpcAddr);
+  } = useYorkieClient(clientOpts);
   const { root, presences, connection, update, loading, error } = useYorkieDocument(
     client,
     clientLoading,
     clientError,
     docKey,
-    initialRoot,
-    initialPresence
+    opts == null ? void 0 : opts.initialRoot,
+    opts == null ? void 0 : opts.initialPresence
   );
   return {
     root,