Migrate RPC to ConnectRPC (#698)

With this support, we can resolve several issues: - Removes dependency with Envoy proxy to communicate with grpc-web - Reduces SDK bundle size by half bundle size of #434 - Standardizes API interfaces to powerful fetch API For more information about this migration, follow: yorkie#703 --------- Co-authored-by: Youngteac Hong <[email protected]>
yorkie-team · Dec 15, 2023 · 7368454 · 7368454
1 parent bd5cd55
commit 7368454
Show file tree

Hide file tree

Showing 46 changed files with 4,488 additions and 20,429 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -61,9 +61,9 @@ $ npm run build:proto
 > Primary "source of truth" location of protobuf message is
 > in [yorkie](https://github.com/yorkie-team/yorkie/tree/main/api). We manage the messages in the repository.
 
-### Testing yorkie-js-sdk with Envoy, Yorkie and MongoDB.
+### Testing yorkie-js-sdk with Yorkie and MongoDB.
 
-Start MongoDB, Yorkie and Envoy proxy in a terminal session.
+Start MongoDB, Yorkie in a terminal session.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d
@@ -112,7 +112,7 @@ $ npm run test {test file path} # e.g. npm run test integration/tree_test.ts
 
 ### Starting co-editing example with CodeMirror
 
-Start MongoDB, Yorkie and Envoy proxy in a terminal session.
+Start MongoDB and Yorkie in a terminal session.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/README.md b/README.md
@@ -8,20 +8,6 @@ The Yorkie JavaScript SDK implements the client-side libraries.
 
 To get started using Yorkie JavaScript SDK, see: https://yorkie.dev/docs/js-sdk
 
-## How yorkie-js-sdk works
-
-yorkie-js-sdk uses gRPC-web for communicating with Yorkie Server built on gRPC.
-
-```
- +--Browser--+           +--Envoy---------+         +--Yorkie-----+
- |           |           |                |         |             |
- | gRPC-web  <- HTTP1.1 -> gRPC-web proxy <- HTTP2 -> gRPC server |
- |           |           |                |         |             |
- +-----------+           +----------------+         +-------------+
-```
-
-For more details: https://grpc.io/blog/state-of-grpc-web/
-
 ## Contributing
 
 See [CONTRIBUTING](CONTRIBUTING.md) for details on submitting patches and the contribution workflow.

diff --git a/buf.gen.yaml b/buf.gen.yaml
@@ -0,0 +1,12 @@
+version: v1
+plugins:
+  - plugin: es
+    out: .
+    opt: 
+    - target=js+dts
+    - js_import_style=legacy_commonjs
+  - plugin: connect-es
+    out: .
+    opt: 
+    - target=js+dts
+    - js_import_style=legacy_commonjs
diff --git a/docker/docker-compose-ci.yml b/docker/docker-compose-ci.yml
@@ -1,31 +1,14 @@
 version: '3.3'
 
 services:
-  envoy:
-    build:
-      context: ./
-      dockerfile: ./envoy.Dockerfile
-    image: 'grpcweb:envoy'
-    container_name: 'envoy'
-    restart: always
-    ports:
-      - '8080:8080'
-      - '9901:9901'
-    command: ['/etc/envoy/envoy-ci.yaml']
-    depends_on:
-      - yorkie
   yorkie:
     image: 'yorkieteam/yorkie:latest'
     container_name: 'yorkie'
-    command: [
-      'server',
-      '--mongo-connection-uri',
-      'mongodb://mongo:27017',
-    ]
+    command: ['server', '--mongo-connection-uri', 'mongodb://mongo:27017']
     restart: always
     ports:
-      - '11101:11101'
-      - '11102:11102'
+      - '8080:8080'
+      - '8081:8081'
     depends_on:
       - mongo
   mongo:

diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
@@ -1,31 +1,11 @@
 version: '3.3'
 
 services:
-  envoy:
-    build:
-      context: ./
-      dockerfile: ./envoy.Dockerfile
-    image: 'grpcweb:envoy'
-    container_name: 'envoy'
-    restart: always
-    ports:
-      - '8080:8080'
-      - '9901:9901'
-    command: ['/etc/envoy/envoy.yaml']
-    depends_on:
-      - yorkie
-    # If you're using Mac or Windows, this special domain name("host.docker.internal" which makes containers able to connect to the host)
-    # is supported by default.
-    # But if you're using Linux and want an envoy container to communicate with the host,
-    # it may help to define "host.docker.internal" in extra_hosts.
-    # (Actually, other hostnames are available, but in that case you should update clusters[].host configurations of envoy.yaml)
-    extra_hosts:
-      - 'host.docker.internal:host-gateway'
   yorkie:
     image: 'yorkieteam/yorkie:latest'
     container_name: 'yorkie'
     command: ['server', '--enable-pprof']
     restart: always
     ports:
-      - '11101:11101'
-      - '11102:11102'
+      - '8080:8080'
+      - '8081:8081'
diff --git a/docker/envoy-ci.yaml b/docker/envoy-ci.yaml
diff --git a/docker/envoy.Dockerfile b/docker/envoy.Dockerfile
diff --git a/docker/envoy.yaml b/docker/envoy.yaml
diff --git a/examples/nextjs-scheduler/README.md b/examples/nextjs-scheduler/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie server and Envoy proxy.
+At project root, run below command to start Yorkie server.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/profile-stack/README.md b/examples/profile-stack/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie and Envoy proxy.
+At project root, run below command to start Yorkie.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/react-tldraw/README.md b/examples/react-tldraw/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie server and Envoy proxy.
+At project root, run below command to start Yorkie server.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/react-tldraw/src/hooks/useMultiplayerState.ts b/examples/react-tldraw/src/hooks/useMultiplayerState.ts
@@ -192,7 +192,7 @@ export function useMultiplayerState(roomId: string) {
     // Setup the document's storage and subscriptions
     async function setupDocument() {
       try {
-        // 01. Create client with RPCAddr(envoy) and options with apiKey if provided.
+        // 01. Create client with RPCAddr and options with apiKey if provided.
         //     Then activate client.
         const options: Options = {
           apiKey: import.meta.env.VITE_YORKIE_API_KEY,

diff --git a/examples/react-todomvc/README.md b/examples/react-todomvc/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie server and Envoy proxy.
+At project root, run below command to start Yorkie server.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/react-todomvc/src/App.tsx b/examples/react-todomvc/src/App.tsx
@@ -118,7 +118,7 @@ export default function App() {
       doc: Document<{ todos: JSONArray<Todo> }>,
       callback: (todos: any) => void,
     ) {
-      // 01. create client with RPCAddr(envoy) then activate it.
+      // 01. create client with RPCAddr then activate it.
       await client.activate();
 
       // 02. attach the document into the client.

diff --git a/examples/simultaneous-cursors/README.md b/examples/simultaneous-cursors/README.md
@@ -41,7 +41,7 @@ Install dependencies
 $ npm install
 ```
 
-At project root, run below command to start Yorkie and Envoy proxy.
+At project root, run below command to start Yorkie server.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/vanilla-codemirror6/README.md b/examples/vanilla-codemirror6/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie and Envoy proxy.
+At project root, run below command to start Yorkie.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/vanilla-codemirror6/src/main.ts b/examples/vanilla-codemirror6/src/main.ts
@@ -20,7 +20,7 @@ const documentTextElem = document.getElementById('document-text')!;
 const networkStatusElem = document.getElementById('network-status')!;
 
 async function main() {
-  // 01. create client with RPCAddr(envoy) then activate it.
+  // 01. create client with RPCAddr then activate it.
   const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
     apiKey: import.meta.env.VITE_YORKIE_API_KEY,
   });

diff --git a/examples/vanilla-quill/README.md b/examples/vanilla-quill/README.md
@@ -41,7 +41,7 @@ Install dependencies
 $ npm install
 ```
 
-At project root, run below command to start Yorkie and Envoy proxy.
+At project root, run below command to start Yorkie.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d

diff --git a/examples/vanilla-quill/src/main.ts b/examples/vanilla-quill/src/main.ts
@@ -41,7 +41,7 @@ function toDeltaOperation<T extends TextValueType>(
 }
 
 async function main() {
-  // 01-1. create client with RPCAddr(envoy) then activate it.
+  // 01-1. create client with RPCAddr then activate it.
   const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
     apiKey: import.meta.env.VITE_YORKIE_API_KEY,
   });

diff --git a/examples/vuejs-kanban/README.md b/examples/vuejs-kanban/README.md
@@ -10,7 +10,7 @@
 
 ## How to run demo
 
-At project root, run below command to start Yorkie and Envoy proxy.
+At project root, run below command to start Yorkie server.
 
 ```bash
 $ docker-compose -f docker/docker-compose.yml up --build -d