@yorkie-js/react 0.6.7-rc → 0.6.7

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

@@ -64,10 +64,6 @@ 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 = Indexable>(apiKey: string, docKey: string, opts?: Omit<ClientOptions, 'apiKey'> & {
     initialRoot?: R;

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

@@ -4,6 +4,12 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 var _a, _b, _c, _d, _e, _f, _g, _h, _i;
 import { jsx } from "react/jsx-runtime";
 import { createContext, useMemo, useState, useEffect, useContext, useCallback } from "react";
+const name$1 = "@yorkie-js/react";
+const version$1 = "0.6.7";
+const pkg$1 = {
+  name: name$1,
+  version: version$1
+};
 var Code$1;
 (function(Code2) {
   Code2[Code2["Canceled"] = 1] = "Canceled";
@@ -20234,14 +20240,18 @@ function createAuthInterceptor(apiKey, token) {
   };
 }
 const name = "@yorkie-js/sdk";
-const version = "0.6.6";
+const version = "0.6.7";
 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);
   };
 }
@@ -20323,7 +20333,10 @@ class Client {
       YorkieService,
       createGrpcWebTransport({
         baseUrl: rpcAddr,
-        interceptors: [authInterceptor, createMetricInterceptor()],
+        interceptors: [
+          authInterceptor,
+          createMetricInterceptor(opts == null ? void 0 : opts.userAgent)
+        ],
         fetch: (input, init) => {
           const newInit = {
             ...init,
@@ -20349,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;
-      });
+      }
     });
   }
   /**
@@ -20413,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,
@@ -20427,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) {
@@ -20466,7 +20483,7 @@ class Client {
             doc,
             res.documentId,
             syncMode,
-            unsubscribeBroacastEvent
+            unsub
           )
         );
         if (syncMode !== "manual") {
@@ -20474,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)) {
@@ -20486,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;
-      });
+      }
     });
   }
   /**
@@ -20501,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,
@@ -20517,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) {
@@ -20534,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;
@@ -20649,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;
-      });
+      }
     });
   }
   /**
@@ -20733,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) {
@@ -20774,7 +20794,7 @@ class Client {
           } else {
             throw err;
           }
-        });
+        }
       });
     };
     return doLoop();
@@ -20959,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;
@@ -20992,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,
@@ -21001,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
@@ -21124,16 +21145,15 @@ function useYorkieClient(opts) {
 }
 const YorkieProvider = ({
   children,
-  ...rest
+  ...opts
 }) => {
-  const opts = useMemo(
-    () => ({
-      apiKey: rest.apiKey,
-      rpcAddr: rest.rpcAddr
-    }),
-    [rest.apiKey, rest.rpcAddr]
-  );
-  const { client, loading, error } = useYorkieClient(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 = () => {
@@ -21300,9 +21320,10 @@ function useYorkieDoc(apiKey, docKey, opts) {
   const clientOpts = useMemo(() => {
     return {
       apiKey,
+      userAgent: pkg$1.name + "/" + pkg$1.version,
       ...opts
     };
-  }, [apiKey, docKey]);
+  }, [apiKey]);
   const {
     client,
     loading: clientLoading,