In this article, we review debug-flags.ts file in tldraw codebase. We will look at:
What is debugFlags?
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: [email protected]
Want to learn from open-source? Solve challenges inspired by open-source projects.