Skip to content

Instantly share code, notes, and snippets.

Avatar

Brian Vaughn bvaughn

View GitHub Profile
@bvaughn
bvaughn / console-colors.js
Last active Jul 6, 2022
Color logging utils for Node and the browser
View console-colors.js
const COLORS = {
background: {
bgBlack: {
browser: [0, 0, 0],
node: "\x1b[40m",
},
bgRed: {
browser: [255, 0, 0],
node: "\x1b[41m",
},
@bvaughn
bvaughn / react-dom-test-selectors.md
Last active Aug 1, 2022
Experimental React DOM test selector API
View react-dom-test-selectors.md

RFC Test Selectors

Owner: Brian Vaughn


As of facebook/react/pull/22760, the experimental Test Selector API is now available in the experimental release channel.

To test the API, first install the experimental release:

@bvaughn
bvaughn / exercise-app.html
Created Nov 12, 2021
Countdown app for exercising
View exercise-app.html
<!DOCTYPE html>
<html>
<body>
<label>Rest for <input id="restCountInput" value="10" /></label>
<label>Exercise for <input id="activityCountInput" value="30" /></label>
<button id="startStopButton">Start</button>
<p id="countLabel"></p>
<script type="text/javascript">
@bvaughn
bvaughn / theme.json
Created Oct 21, 2021
React Conf 2021 - Code Sandbox theme
View theme.json
{
"name": "React Conf 2021",
"type": "dark",
"semanticHighlighting": false,
"colors": {
"contrastBorder": "#122d42",
"focusBorder": "#122d42",
"foreground": "#d6deeb",
"widget.shadow": "#011627",
"selection.background": "#4373c2",
@bvaughn
bvaughn / index.html
Created Aug 27, 2021
Network caching test harness
View index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<select id="cacheModeSelect">
<option>default</option>
<option>force-cache</option>
</select>
<script type="text/javascript">
@bvaughn
bvaughn / setupFilesAfterEnv.js
Created Aug 23, 2021
Jest config to remove extra console location / formatting noise
View setupFilesAfterEnv.js
import { CustomConsole } from '@jest/console';
function formatter(type, message) {
switch(type) {
case 'error':
return "\x1b[31m" + message + "\x1b[0m";
case 'warn':
return "\x1b[33m" + message + "\x1b[0m";
case 'log':
default:
@bvaughn
bvaughn / contributing-to-react-devtools.md
Created Jul 8, 2021
Contributing to React DevTools
View contributing-to-react-devtools.md

Intrested in contributing to React DevTools, but not sure where to start? This gist should hopefully get you going.

Install project dependencies

To get started, check out the React repo:

git clone git@github.com:facebook/react.git

Next install dependencies:

cd 
View devtools-merging-client-and-server-trees.md

Adding Server Component support to DevTools is going to be a big lift, but generally speaking there are a few initial things to work out:

  • Updating the Flight server renderer to stream server component names/types to the client.
  • Adding a new hook to DevTools for the Flight client to call.
  • Merging the server component subtrees into the DevTools client tree.

Yesterday and today I've been thinking about this last item, and I'm feeling pretty stumped at the moment. Merging the trees isn't that difficult, but preserving the tree across client updates gets nasty when it comes to things like conditionally rendered elements.

Setting performance concerns aside, even if I were to undo the merged trees, apply the client updates, and then redo the merge– I'm still not sure we would definitely end up with the correct final state.

For example, consider the following client component that accepts "children" rendered by a server component:

@bvaughn
bvaughn / multi-version-browser-extension.md
Created May 7, 2021
Multi-version browser extension proposal
View multi-version-browser-extension.md

Multi-version browser extension

This gist describes a challenge I've encountered while maintaining the React DevTools browser extension, and briefly explores one possible way to address that challenge. I would be happy to talk more in depth about this topic with anyone from Chrome/Firefox/Edge who would be interested in exploring.

The problem

The React DevTools browser extension supports all versions of react-dom released after 16.0.0-alpha (2017). We do this because developers often switch between projects built with different versions of React, and installing/enabling multiple versions of the extensions would be cumbersome.

This has a cost though: It adds a lot of complexity to the extension.

The implementation details of a library change frequently. Sometimes they change in a [straightforward way](https://github.com/facebook/react/blob/57768ef90bdb0110c7b9266185a8f6446934b331/packages/react-devtools-shared/src

@bvaughn
bvaughn / devtools-bridge-protocol.md
Last active Oct 13, 2022
React DevTools: Unsupported backend version
View devtools-bridge-protocol.md

Unsupported DevTools backend version

This page contains instructions for updating a local React DevTools application to match a version embedded in a renderer such as React Native. Instructions below cover NPM, Flipper, and React Native Debugger. If you use React DevTools in a different way, please let us know.

If you are viewing this page, you have likely seen one of the dialogs below:

Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version