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:
#!/usr/bin/env node | |
const { spawn } = require("child_process"); | |
const util = require("node:util"); | |
const exec = util.promisify(require("node:child_process").exec); | |
async function main() { | |
let { REPLAY_CHROME, RECORD_REPLAY_API_KEY } = process.env; | |
if (!REPLAY_CHROME || !RECORD_REPLAY_API_KEY) { |
const COLORS = { | |
background: { | |
bgBlack: { | |
browser: [0, 0, 0], | |
node: "\x1b[40m", | |
}, | |
bgRed: { | |
browser: [255, 0, 0], | |
node: "\x1b[41m", | |
}, |
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:
<!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"> |
{ | |
"name": "React Conf 2021", | |
"type": "dark", | |
"semanticHighlighting": false, | |
"colors": { | |
"contrastBorder": "#122d42", | |
"focusBorder": "#122d42", | |
"foreground": "#d6deeb", | |
"widget.shadow": "#011627", | |
"selection.background": "#4373c2", |
<!DOCTYPE html> | |
<html> | |
<head></head> | |
<body> | |
<select id="cacheModeSelect"> | |
<option>default</option> | |
<option>force-cache</option> | |
</select> | |
<script type="text/javascript"> |
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: |
Intrested in contributing to React DevTools, but not sure where to start? This gist should hopefully get you going.
To get started, check out the React repo:
git clone git@github.com:facebook/react.git
Next install dependencies:
cd
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:
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:
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 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