Brian Vaughn bvaughn

## index.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              0 stars
            
          
                bvaughn
                / index.md
            
            
              Last active
              February 28, 2024 20:34
            
              
                Chrome's copy+paste behavior and content editables
              
          
    Start with this HTML:
<div>click here</div>
<div style="user-select: none;">read-only (no-select)</div>
<div contenteditable style="user-select: none;">editable (no-select)</div>
<div>release here</div>
Click at the top ("click here") and drag down and release at the bottom ("release here"). The following text will be selected:


## record-with-chromium
#!/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) {

## console-colors.js
const COLORS = {
  background: {
    bgBlack: {
      browser: [0, 0, 0],
      node: "\x1b[40m",
    },
    bgRed: {
      browser: [255, 0, 0],
      node: "\x1b[41m",
    },

## react-dom-test-selectors.md

      
              1 file
            
          
              1 fork
            
          
              13 comments
            
          
              21 stars
            
          
                bvaughn
                / react-dom-test-selectors.md
            
            
              Last active
              January 9, 2023 15:46
            
              
                Experimental React DOM test selector API
              
          
    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:


## 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">

## theme.json
{
  "name": "React Conf 2021",
  "type": "dark",
  "semanticHighlighting": false,
  "colors": {
    "contrastBorder": "#122d42",
    "focusBorder": "#122d42",
    "foreground": "#d6deeb",
    "widget.shadow": "#011627",
    "selection.background": "#4373c2",

## index.html
<!DOCTYPE html>
<html>
<head></head>
<body>
  <select id="cacheModeSelect">
    <option>default</option>
    <option>force-cache</option>
  </select>

  <script type="text/javascript">

## 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:

## contributing-to-react-devtools.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                bvaughn
                / contributing-to-react-devtools.md
            
            
              Created
              July 8, 2021 18:07
            
              
                Contributing to React DevTools
              
          
    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 

  
## devtools-merging-client-and-server-trees.md

      
              1 file
            
          
              0 forks
            
          
              6 comments
            
          
              0 stars
            
          
                bvaughn
                / devtools-merging-client-and-server-trees.md
            
            
              Created
              June 4, 2021 22:01
            
              
                Merging client and server trees
              
          
    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:
	#!/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",
	},
	<!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: