Fix debugger console.log (#327)

We want the debugger to be discoverable, but we only want to show it once per session. We used to do this by displaying it in the `useYDoc` hook, but that may be run more than once. Instead, this moves the code that prints it into the `useEffect` of the `YDocProvider`.
jamsocket · Nov 5, 2024 · 321deac · 321deac
1 parent 3577b7a
commit 321deac
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 20 deletions.
diff --git a/debugger/src/app/debugger.tsx b/debugger/src/app/debugger.tsx
@@ -9,9 +9,7 @@ import { Awareness } from 'y-protocols/awareness'
 import { DebuggableAwareness } from '@/lib/debuggable/yawareness'
 
 export function Debugger() {
-  const doc: Y.Doc = useYDoc({
-    hideDebuggerLink: true,
-  })
+  const doc: Y.Doc = useYDoc()
   const provider = useYjsProvider()
   const url = provider.ws?.url
   const awareness = useAwareness()

diff --git a/debugger/src/app/page.tsx b/debugger/src/app/page.tsx
@@ -32,7 +32,11 @@ export default function Home() {
 
 function DebuggerWrapper({ clientToken }: { clientToken: ClientToken }) {
   return (
-    <YDocProvider docId={clientToken.docId} authEndpoint={async () => clientToken}>
+    <YDocProvider
+      docId={clientToken.docId}
+      authEndpoint={async () => clientToken}
+      showDebuggerLink={false}
+    >
       <Debugger />
     </YDocProvider>
   )

diff --git a/js-pkg/react/src/main.tsx b/js-pkg/react/src/main.tsx
@@ -29,6 +29,9 @@ type YjsContextType = {
 const YjsContext = createContext<YjsContextType | null>(null)
 
 type YDocOptions = {
+  /**
+   * @deprecated since 0.6.0 and not used. Pass `showDebuggerLink={false}` to `YDocProvider` as a prop instead.
+   */
   hideDebuggerLink?: boolean
 }
 
@@ -40,19 +43,11 @@ type YDocOptions = {
 export function useYDoc(options?: YDocOptions): Y.Doc {
   const yjsCtx = useContext(YjsContext)
 
-  useEffect(() => {
-    if (!options?.hideDebuggerLink && yjsCtx) {
-      const url = debuggerUrl(yjsCtx.provider.clientToken)
-      console.log(
-        `%cOpen this in Y-Sweet Debugger ⮕ ${url}`,
-        'font-size: 1.5em; display: block; padding: 10px;',
-      )
-      console.log(
-        '%cTo hide the debugger link, pass { hideDebuggerLink: true } to useYDoc',
-        'font-style: italic;',
-      )
-    }
-  }, [options?.hideDebuggerLink, yjsCtx])
+  if (options?.hideDebuggerLink) {
+    console.warn(
+      'The `hideDebuggerLink` option is deprecated and no longer used. Pass `showDebuggerLink={false}` to `YDocProvider` as a prop instead.',
+    )
+  }
 
   if (!yjsCtx) {
     throw new Error('Yjs hooks must be used within a YDocProvider')
@@ -185,6 +180,9 @@ export type YDocProviderProps = {
   /** If set to a string, the URL query parameter with this name
    * will be set to the doc id provided. */
   setQueryParam?: string
+
+  /** Whether to hide the debugger link. Defaults to true. */
+  showDebuggerLink?: boolean
 }
 
 /**
@@ -208,6 +206,18 @@ export function YDocProvider(props: YDocProviderProps) {
         disableBc: true,
       })
 
+      if (props.showDebuggerLink ?? true) {
+        const url = debuggerUrl(provider.clientToken)
+        console.log(
+          `%cOpen this in Y-Sweet Debugger ⮕ ${url}`,
+          'font-size: 1.5em; display: block; padding: 10px;',
+        )
+        console.log(
+          '%cTo hide the debugger link, pass showDebuggerLink={false} to YDocProvider',
+          'font-style: italic;',
+        )
+      }
+
       if (canceled) {
         provider.destroy()
         return
@@ -277,7 +287,7 @@ export type ObjectOptions = {
  * @returns
  */
 export function useMap<T>(name?: string, objectOptions?: ObjectOptions): Y.Map<T> {
-  const doc = useYDoc({ hideDebuggerLink: true })
+  const doc = useYDoc()
   const map = useMemo(() => doc.getMap<T>(name), [doc, name])
   useObserve(map, objectOptions?.observe || 'deep')
 
@@ -301,7 +311,7 @@ export function useMap<T>(name?: string, objectOptions?: ObjectOptions): Y.Map<T
  * @returns
  */
 export function useArray<T>(name?: string, objectOptions?: ObjectOptions): Y.Array<T> {
-  const doc = useYDoc({ hideDebuggerLink: true })
+  const doc = useYDoc()
   const array = useMemo(() => doc.getArray<T>(name), [doc, name])
   useObserve(array, objectOptions?.observe || 'deep')
 
@@ -324,7 +334,7 @@ export function useArray<T>(name?: string, objectOptions?: ObjectOptions): Y.Arr
  * @returns
  */
 export function useText(name?: string, observerKind?: ObjectOptions): Y.Text {
-  const doc = useYDoc({ hideDebuggerLink: true })
+  const doc = useYDoc()
   const text = useMemo(() => doc.getText(name), [doc, name])
   useObserve(text, observerKind?.observe || 'deep')