Add simultaneous cursors example and Update examples to v0.4.6 (#581)

Co-authored-by: YoonKiJin <[email protected]>
Co-authored-by: Youngteac Hong <[email protected]>

docker/docker-compose.yml

@@ -17,17 +17,14 @@ services:
     # 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. 
+    # 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"
+      - 'host.docker.internal:host-gateway'
   yorkie:
     image: 'yorkieteam/yorkie:latest'
     container_name: 'yorkie'
-    command: [
-      'server',
-      '--enable-pprof',
-    ]
+    command: ['server', '--enable-pprof']
     restart: always
     ports:
       - '11101:11101'

examples/profile-stack/main.js

@@ -1,26 +1,24 @@
-import yorkie from 'yorkie-js-sdk';
+import yorkie, { DocEventType } from 'yorkie-js-sdk';
 import { getRandomName, getRandomColor } from './util.js';
 
 async function main() {
   const client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
     apiKey: import.meta.env.VITE_YORKIE_API_KEY,
+  });
+  await client.activate();
+  const doc = new yorkie.Document('profile-stack');
+  doc.subscribe('presence', (event) => {
+    if (event.type !== DocEventType.PresenceChanged) {
+      displayPeerList(doc.getPresences(), client.getID());
+    }
+  });
+  await client.attach(doc, {
     // set the client's name and color to presence.
-    presence: {
+    initialPresence: {
       name: getRandomName(),
       color: getRandomColor(),
     },
   });
-  await client.activate();
-
-  client.subscribe((event) => {
-    if (event.type === 'peers-changed') {
-      // show peer list
-      displayPeerList(client.getPeersByDocKey(doc.getKey()), client.getID());
-    }
-  });
-
-  const doc = new yorkie.Document('profile-stack');
-  await client.attach(doc);
 
   window.addEventListener('beforeunload', () => {
     client.deactivate();