tsx-mui-material-ui-add-name-to-pair

A painting is a person's account of this edit as text, recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.

Before…lines 1–8 unchanged (8 lines)
9  };
10
11  return (
12    <Checkbox
13      checked={checked}
14      onChange={handleChange}
15      inputProps={{ 'aria-label': 'controlled' }}
16    />
17  );
18}
19

After…lines 1–8 unchanged (8 lines)
};
10
return (
  <Checkbox
    checked={checked}
    onChange={handleChange}
    slotProps={{
      input: { 'aria-label': 'controlled' },
    }}
  />
);
20}
21

Before…lines 1–8 unchanged (8 lines)
9  };
10
11  return (
12    <Checkbox
13      checked={checked}
14      onChange={handleChange}
15      inputProps={{ 'aria-label': 'controlled' }}
16    />
17  );
18}
19

After…lines 1–8 unchanged (8 lines)
};
10
return (
  <Checkbox
    checked={checked}
    onChange={handleChange}
    slotProps={{
      input: { 'aria-label': 'controlled' },
    }}
  />
);
20}
21

Before…lines 1–8 unchanged (8 lines)
9  };
10
11  return (
12    <Checkbox
13      checked={checked}
14      onChange={handleChange}
15      inputProps={{ 'aria-label': 'controlled' }}
16    />
17  );
18}
19

After…lines 1–8 unchanged (8 lines)
};
10
return (
  <Checkbox
    checked={checked}
    onChange={handleChange}
    slotProps={{
      input: { 'aria-label': 'controlled' },
    }}
  />
);
20}
21

Before

program

import_statement

import "import"

import_clause

namespace_import

* "*"

as "as"

identifier "React"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Checkbox"

from "from"

string

' "'"

string_fragment "@mui/material/Checkbox"

' "'"

; ";"

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ControlledCheckbox"

formal_parameters

( "("

) ")"

statement_block

{ "{"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "checked"

, ","

identifier "setChecked"

] "]"

= "="

call_expression

member_expression

identifier "React"

. "."

property_identifier "useState"

arguments

( "("

true "true"

) ")"

; ";"

lexical_declaration (+41 nodes collapsed)

return_statement

return "return"

parenthesized_expression

( "("

jsx_self_closing_element

< "<"

identifier "Checkbox"

jsx_attribute

property_identifier "checked"

= "="

jsx_expression

{ "{"

identifier "checked"

} "}"

jsx_attribute

property_identifier "onChange"

= "="

jsx_expression

{ "{"

identifier "handleChange"

} "}"

jsx_attribute

property_identifier "inputProps"

= "="

jsx_expression

{ "{"

object

{ "{"

pair

string

' "'"

string_fragment "aria-label"

' "'"

: ":"

string

' "'"

string_fragment "controlled"

' "'"

} "}"

/> "/>"

) ")"

; ";"

} "}"

After

program

import_statement

import "import"

import_clause

namespace_import

* "*"

as "as"

identifier "React"

from "from"

string

' "'"

string_fragment "react"

' "'"

; ";"

import_statement

import "import"

import_clause

identifier "Checkbox"

from "from"

string

' "'"

string_fragment "@mui/material/Checkbox"

' "'"

; ";"

export_statement

export "export"

default "default"

function_declaration

function "function"

identifier "ControlledCheckbox"

formal_parameters

( "("

) ")"

statement_block

{ "{"

lexical_declaration

const "const"

variable_declarator

array_pattern

[ "["

identifier "checked"

, ","

identifier "setChecked"

] "]"

= "="

call_expression

member_expression

identifier "React"

. "."

property_identifier "useState"

arguments

( "("

true "true"

) ")"

; ";"

lexical_declaration (+41 nodes collapsed)

return_statement

return "return"

parenthesized_expression

( "("

jsx_self_closing_element

< "<"

identifier "Checkbox"

jsx_attribute

property_identifier "checked"

= "="

jsx_expression

{ "{"

identifier "checked"

} "}"

jsx_attribute

property_identifier "onChange"

= "="

jsx_expression

{ "{"

identifier "handleChange"

} "}"

jsx_attribute

property_identifier "slotProps"

= "="

jsx_expression

{ "{"

object

{ "{"

pair

property_identifier "input"

: ":"

object

{ "{"

pair

string

' "'"

string_fragment "aria-label"

' "'"

: ":"

string

' "'"

string_fragment "controlled"

' "'"

} "}"

, ","

} "}"

/> "/>"

) ")"

; ";"

} "}"

Keybindings

j / k: next / previous visible node (tree panels)
h / l: collapse / expand the focused node
g / G: jump to first / last visible node
Tab: switch focus between Before/After panels
/: search: jump to next node whose text contains a given string
a: jump the other panel to this node's mapped counterpart
i: hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v: cycle the view: split / code only / tree only
p: cycle what the code view renders: the node mapping, then each human painting
r: mark this fixture as reviewed, or forget the mark (kept in this browser only)
n: open a random fixture not yet marked as reviewed
?: toggle this help