DEV Community

Cover image for Stop saying “you forgot to …” in code review
Ramu Narasinga
Ramu Narasinga

Posted on • Edited on

Stop saying “you forgot to …” in code review

In this article, we analyse a file named dangerfile.js in React source code.

Image description

The above screenshot is from React source code.

What is Danger.js?

Danger runs during your CI process, and gives your team the chance to automate common code review chores such as enforcing changelogs, encouraging smaller PRs, show useful info on a PR.

This provides another logical step in your build, through this Danger can help lint your rote tasks in daily code review.

Danger leaves messages inside your PRs based on rules that you create with JavaScript or TypeScript.

Over time, as rules are adhered to, the message is amended to reflect the current state of the code review.

An example from React PR:

Image description

This pull request has a comment left by dangerJs about critical size changes.

Danger has good documentation:

Dangerjs provides good documentation:

  1. Getting Started with Danger JS

  2. Extending Danger

  3. Danger + Node Library

There’s more do checkout dangerjs website.

An overview of react/dangerfile.js

Image description

From the looks of react/dangerfile.js, React uses this file mainly to compute critical built size changes.

Image description

const {markdown, danger, warn} = require('danger');
Enter fullscreen mode Exit fullscreen mode

This import is found at the top of the file. Let’s find out what these functions are and how they are used in react/dangerfile.js.

markdown and warn, these are the functions which you use in rules to provide feedback during code review. Assuming Danger has access to write a comment, then warnand markdown will report directly inline.

// Adds raw markdown into the Danger comment, under the table
markdown(message: MarkdownString, file?: string, line?: number) => void

// Highlights low-priority issues, but does not fail the build. Message is shown inside a HTML table.
warn(message: MarkdownString, file?: string, line?: number) => void
Enter fullscreen mode Exit fullscreen mode

markdown is used at the end of the file

Image description

warn is found to be used in catch block

Image description

danger is further used in 5 places and below is its usecase:

Image description


// Details specific to the git changes within the code changes. Currently, this is just the raw file paths that have been added, removed or modified.
danger.git: GitDSL
Enter fullscreen mode Exit fullscreen mode

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at ramu.narasinga@gmail.com

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

References:

  1. https://danger.systems/js/

  2. https://github.com/facebook/react/blob/main/dangerfile.js

  3. https://github.com/facebook/react/pull/31013

Top comments (0)