Reset online clients on attachment cancellation (#1066)

- Fix issue where onlineClients was not cleared after detach, leaving
  stale presences, by forcing their removal.
- Ensure network.js imports in pnpm sdk dev examples follow the same
  style as other files in the devtool directory.
- Replace deleteByID usage in examples with index-based deletion to
  simplify the interface.

Author: hackerwins

examples/nextjs-scheduler/app/page.tsx

@@ -55,16 +55,9 @@ export default function Editor() {
     // delete selected content at Yorkie's database
     deleteContent(date: string) {
       doc.update((root) => {
-        let target;
-        for (const item of root.content) {
-          if (item.date === date) {
-            target = item;
-            break;
-          }
-        }
-
-        if (target) {
-          root.content.deleteByID!(target.getID());
+        const idx = root.content.findIndex((item) => item.date === date);
+        if (idx !== -1) {
+          root.content.delete?.(idx);
         }
       });
     },

examples/nextjs-todolist/components/TodoList.tsx

@@ -48,11 +48,9 @@ const TodoList = () => {
 
   const deleteTodo = (id: string) => {
     update((root) => {
-      for (const todo of root.todos) {
-        if (todo.id === id) {
-          root.todos.deleteByID!(todo.getID!());
-          break;
-        }
+      const idx = root.todos.findIndex((todo) => todo.id === id);
+      if (idx !== -1) {
+        root.todos.delete?.(idx);
       }
     });
   };

examples/react-flow/src/App.tsx

@@ -14,8 +14,8 @@ import '@xyflow/react/dist/style.css';
 import './App.css';
 
 type Graph = {
-  nodes: JSONArray<JSONObject<Node>>;
-  edges: JSONArray<JSONObject<Edge>>;
+  nodes: JSONArray<Node>;
+  edges: JSONArray<Edge>;
 };
 
 function App() {
@@ -32,25 +32,33 @@ function App() {
             case 'replace':
               {
                 const idx = r.nodes.findIndex((n) => n.id === c.id);
-                r.nodes[idx] = c.item;
+                if (idx !== -1) {
+                  r.nodes[idx] = c.item;
+                }
               }
               break;
             case 'remove':
               {
                 const idx = r.nodes.findIndex((n) => n.id === c.id);
-                r.nodes.deleteByID!(r.nodes[idx].getID!());
+                if (idx !== -1) {
+                  r.nodes.delete?.(idx);
+                }
               }
               break;
             case 'position':
               {
                 const idx = r.nodes.findIndex((n) => n.id === c.id);
-                r.nodes[idx].position = c.position!;
+                if (idx !== -1) {
+                  r.nodes[idx].position = c.position!;
+                }
               }
               break;
             case 'select':
               {
                 const idx = r.nodes.findIndex((n) => n.id === c.id);
-                r.nodes[idx].selected = c.selected;
+                if (idx !== -1) {
+                  r.nodes[idx].selected = c.selected;
+                }
               }
               break;
             default:
@@ -79,7 +87,7 @@ function App() {
             case 'remove':
               {
                 const idx = r.edges.findIndex((e) => e.id === c.id);
-                r.edges.deleteByID!(r.edges[idx].getID!());
+                r.edges.delete?.(idx);
               }
               break;
             case 'select':

examples/vuejs-kanban/src/App.vue

@@ -4,33 +4,15 @@ import yorkie from '@yorkie-js/sdk';
 const defaultLists = [
   {
     title: 'Todo',
-    cards: [
-      {
-        title: 'Pruning document',
-      },
-      {
-        title: 'Clean up codes',
-      },
-    ],
+    cards: [{ title: 'Pruning document' }, { title: 'Clean up codes' }],
   },
   {
     title: 'Doing',
-    cards: [
-      {
-        title: 'Array operations',
-      },
-    ],
+    cards: [{ title: 'Array operations' }],
   },
   {
     title: 'Done',
-    cards: [
-      {
-        title: 'Create a sample page',
-      },
-      {
-        title: 'Launch demo site',
-      },
-    ],
+    cards: [{ title: 'Create a sample page' }, { title: 'Launch demo site' }],
   },
 ];
 

packages/sdk/index.html

@@ -184,10 +184,10 @@ <h4 class="title">
         </div>
       </div>
     </div>
-    <script src="./util.js"></script>
     <script src="./devtool/text.js"></script>
     <script type="module">
       import './src/yorkie.ts';
+      import Network from './public/devtool/network.js';
 
       const textarea = document.getElementById('textarea');
       const statusHolder = document.getElementById('network-status');

packages/sdk/public/counter.html

@@ -15,9 +15,10 @@
         <button id="decreaseButton">-</button>
       </div>
     </div>
-    <script src="./util.js"></script>
     <script type="module">
       import './src/yorkie.ts';
+      import Network from './devtool/network.js';
+
       const statusHolder = document.getElementById('network-status');
       const onlineClientsHolder = document.getElementById('online-clients');
       const counter = document.getElementById('counter');

packages/sdk/public/util.js renamed to packages/sdk/public/devtool/network.js

@@ -1,7 +1,7 @@
 /**
  * `Network` is a class that manages the network status.
  */
-export class Network {
+export default class Network {
   constructor(elem) {
     this.isOnline = false;
     this.elem = elem;

packages/sdk/public/multi.html

@@ -36,9 +36,10 @@ <h2>Quill Editor</h2>
       <h2>yorkie document</h2>
       <pre style="white-space: pre-wrap" id="log-holder"></pre>
     </div>
-    <script src="./util.js"></script>
     <script type="module">
       import './src/yorkie.ts';
+      import Network from './devtool/network.js';
+
       const statusHolder = document.getElementById('network-status');
       const placeholder = document.getElementById('placeholder');
       const onlineClientsHolder = document.getElementById('online-clients');

packages/sdk/public/quill-two-clients.html

@@ -117,9 +117,10 @@
         <div class="online-clients"></div>
       </div>
     </div>
-    <script src="./util.js"></script>
     <script type="module">
       import './src/yorkie.ts';
+      import Network from './devtool/network.js';
+
       const colorHash = new ColorHash();
       const clientAElem = document.getElementById('client-a');
       const clientBElem = document.getElementById('client-b');

packages/sdk/public/quill.html

@@ -19,9 +19,10 @@
     <div id="editor"></div>
     <div id="document"></div>
     <div id="document-text"></div>
-    <script src="./util.js"></script>
     <script type="module">
       import './src/yorkie.ts';
+      import Network from './devtool/network.js';
+
       const onlineClientsElem = document.getElementById('online-clients');
       const documentElem = document.getElementById('document');
       const documentTextElem = document.getElementById('document-text');