feat: add debug parameter

GIP-RECIA · May 24, 2024 · c10b238 · c10b238
1 parent fcb1908
commit c10b238
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -39,6 +39,7 @@ document.body.appendChild(tldrawEditor);
 
 | Nom                   |       Type        |           Requis           | Default | Description                                                                                                 |
 | --------------------- | :---------------: | :------------------------: | :-----: | ----------------------------------------------------------------------------------------------------------- |
+| `debug`               |     `boolean`     |          `false`           | `false` | Active les logs de debug                                                                                    |
 | `mode`                | `single \| multi` |           `true`           |         | Mode de fonctionnement                                                                                      |
 | `persistance-api-url` |     `string`      |          `false`           |         | URL du fichier (GET & PUT) \| (En mode multi, permet la sauvegarde sur le fichier)                          |
 | `assets-api-url`      |     `string`      |          `false`           |         | URL des assets (GET, POST & DELETE)                                                                         |
@@ -60,6 +61,7 @@ document.body.appendChild(tldrawEditor);
 
 ```html
 <tldraw-editor
+  debug
   mode=""
   persistance-api-url=""
   assets-api-url=""

diff --git a/src/AppDev.tsx b/src/AppDev.tsx
@@ -171,6 +171,7 @@ function App() {
                 owner={owner}
                 clearOnLeave={clearOnLeave}
                 leave={leave}
+                debug={true}
               />
             )}
           </div>

diff --git a/src/ce.ts b/src/ce.ts
@@ -3,6 +3,7 @@ import r2wc from '@r2wc/react-to-web-component';
 
 const TldrawEditor = r2wc(TldrawEditorSFC, {
   props: {
+    debug: 'boolean',
     mode: 'string',
     persistanceApiUrl: 'string',
     assetsApiUrl: 'string',

diff --git a/src/components/MultiplayerEditor.tsx b/src/components/MultiplayerEditor.tsx
@@ -20,11 +20,12 @@ export default function MultiplayerEditor({
   setProvider,
   ...params
 }: Readonly<MultiplayerEditorProps>) {
-  const { autoSave, autoSaveDelay, open, isReady, setIsSaving, setIsLoading, setIsError, setIsReady } = params;
+  const { debug, autoSave, autoSaveDelay, open, isReady, setIsSaving, setIsLoading, setIsError, setIsReady } = params;
 
   const props = {
     ...params,
     ...useMultiplayer(
+      debug,
       persistanceApiUrl,
       assetsApiUrl,
       token,

diff --git a/src/components/TldrawEditor.tsx b/src/components/TldrawEditor.tsx
@@ -9,6 +9,7 @@ import { useEffect, useState } from 'react';
 import { WebsocketProvider } from 'y-websocket';
 
 export default function TldrawEditor({
+  debug,
   mode,
   persistanceApiUrl,
   assetsApiUrl,
@@ -55,6 +56,7 @@ export default function TldrawEditor({
   const isMulti: boolean = cMode == 'multi' && websocketApiUrl != undefined && roomId != undefined;
 
   const common: CommonProps = {
+    debug: debug ?? false,
     darkMode: darkMode ?? false,
     autoSave: autoSave ?? true,
     autoSaveDelay: autoSaveDelay ?? 3000,

diff --git a/src/hooks/useMultiplayer.ts b/src/hooks/useMultiplayer.ts
@@ -12,6 +12,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { WebsocketProvider } from 'y-websocket';
 
 export function useMultiplayer(
+  debug: boolean,
   persistanceApiUrl: string | undefined,
   assetsApiUrl: string | undefined,
   token: string | undefined,
@@ -41,6 +42,10 @@ export function useMultiplayer(
   );
   const { loadDocument } = usePersistance(initUrl);
 
+  const log = (message: string, variable: object): void => {
+    if (debug) console.debug(`Multiplayer - ${message}`, { ...variable });
+  };
+
   /**
    * Force rerendering
    */
@@ -55,14 +60,20 @@ export function useMultiplayer(
         const oldValue: string = yPersistanceApiUrl.toString();
         if (oldValue !== persistanceApiUrl) {
           yPersistanceApiUrl.delete(0, oldValue.length);
-          setTimeout(() => {
-            if (persistanceApiUrl) yPersistanceApiUrl.insert(0, persistanceApiUrl);
-          }, 200);
+          if (persistanceApiUrl) yPersistanceApiUrl.insert(0, persistanceApiUrl);
+          log('persistance API URL has been set', { newValue: yPersistanceApiUrl.toString(), oldValue });
         }
       }
-    }, 200);
+    }, 500);
 
-    const handleChanges = throttle(() => setKey((value) => value + 1), 200, { trailing: true });
+    const handleChanges = throttle(
+      () => {
+        log('persistance API URL has changed', { newValue: yPersistanceApiUrl.toString() });
+        setKey((value) => value + 1);
+      },
+      200,
+      { trailing: true },
+    );
 
     yPersistanceApiUrl.observeDeep(handleChanges);
 
@@ -78,14 +89,20 @@ export function useMultiplayer(
         const oldValue: string = yAssetsApiUrl.toString();
         if (oldValue !== assetsApiUrl) {
           yAssetsApiUrl.delete(0, oldValue.length);
-          setTimeout(() => {
-            if (assetsApiUrl) yAssetsApiUrl.insert(0, assetsApiUrl);
-          }, 200);
+          if (assetsApiUrl) yAssetsApiUrl.insert(0, assetsApiUrl);
+          log('assets API URL has been set', { newValue: yAssetsApiUrl.toString(), oldValue });
         }
       }
-    }, 200);
-
-    const handleChanges = throttle(() => setKey((value) => value + 1), 200, { trailing: true });
+    }, 500);
+
+    const handleChanges = throttle(
+      () => {
+        log('assets API URL has changed', { newValue: yAssetsApiUrl.toString() });
+        setKey((value) => value + 1);
+      },
+      200,
+      { trailing: true },
+    );
 
     yAssetsApiUrl.observeDeep(handleChanges);
 

diff --git a/src/types/CommonProps.ts b/src/types/CommonProps.ts
@@ -1,4 +1,6 @@
 export type CommonProps = {
+  debug: boolean;
+
   // Tldraw props
   darkMode: boolean;
   readOnly: boolean;

diff --git a/src/types/TldrawEditorProps.ts b/src/types/TldrawEditorProps.ts
@@ -1,4 +1,5 @@
 export type TldrawEditorProps = {
+  debug?: boolean;
   mode?: 'single' | 'multi';
 
   // Common properties