debug-flags.ts file in tldraw codebase.

In this article, we review debug-flags.ts file in tldraw codebase. We will look at:

1. What is debugFlags?

2. debugFlags usage.

I study patterns used in an open source project found on Github Trending. For this week, I reviewed Codebuff codebase and wrote this article.

What is debugFlags?

In tldraw/packages/editor/src/lib/utils/debug-flags.ts, you will find the below code at L25:

/** @internal */
export const debugFlags = {
 // --- DEBUG VALUES ---
 logPreventDefaults: createDebugValue('logPreventDefaults', {
  defaults: { all: false },
 }),
 logPointerCaptures: createDebugValue('logPointerCaptures', {
  defaults: { all: false },
 }),
 logElementRemoves: createDebugValue('logElementRemoves', {
  defaults: { all: false },
 }),
 debugSvg: createDebugValue('debugSvg', {
  defaults: { all: false },
 }),
 showFps: createDebugValue('showFps', {
  defaults: { all: false },
 }),
 measurePerformance: createDebugValue('measurePerformance', { defaults: { all: false } }),
 throwToBlob: createDebugValue('throwToBlob', {
  defaults: { all: false },
 }),
 reconnectOnPing: createDebugValue('reconnectOnPing', {
  defaults: { all: false },
 }),
 debugCursors: createDebugValue('debugCursors', {
  defaults: { all: false },
 }),
 forceSrgb: createDebugValue('forceSrgbColors', { defaults: { all: false } }),
 debugGeometry: createDebugValue('debugGeometry', { defaults: { all: false } }),
 hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),
 editOnType: createDebugValue('editOnType', { defaults: { all: false } }),
 a11y: createDebugValue('a11y', { defaults: { all: false } }),
 debugElbowArrows: createDebugValue('debugElbowArrows', { defaults: { all: false } }),
} as const

createDebugValue function:

// --- IMPLEMENTATION ---
// you probably don't need to read this if you're just using the 
// debug values system
function createDebugValue<T>(
 name: string,
 {
  defaults,
  shouldStoreForSession = true,
 }: { defaults: DebugFlagDefaults<T>; shouldStoreForSession?: boolean }
) {
 return createDebugValueBase({
  name,
  defaults,
  shouldStoreForSession,
 })
}

debugFlags usage.

In tldraw/packages/editor/src/lib/utils/dom.ts, at L40, you will find the following import:

import { debugFlags, pointerCaptureTrackingObject } from './debug-flags'

I picked one example:

export function preventDefault(event: React.BaseSyntheticEvent | Event) {
 event.preventDefault()
 if (debugFlags.logPreventDefaults.get()) {
  console.warn('preventDefault called on event:', event)
 }
}

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/utils/debug-flags.ts

2. https://github.com/tldraw/tldraw/blob/main/packages/editor/src/lib/utils/dom.ts#L17