any 3:2 multi-map group: any pairing of the 3 with the 2 is valid, one is shown
all 3:1 all-to-all group: each of the 3 corresponds to the 1
inserted
deleted
updated
moved
click a highlight to reveal its counterpart
Code view:
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
1// @strict: false
2
3class A {
4 foo() {}
5}
6
7abstract class B extends A {
…lines 8–17 unchanged (10 lines)
After
1// @target: es2015
2// @strict: false
3
4class A {
5 foo() {}
6}
7
…lines 8–18 unchanged (11 lines)
Before
1// @strict: false
2
3class A {
4 foo() {}
5}
6
7abstract class B extends A {
…lines 8–17 unchanged (10 lines)
After
1// @target: es2015
2// @strict: false
3
4class A {
5 foo() {}
6}
7
…lines 8–18 unchanged (11 lines)
Before
program
comment "// @strict: false"
class_declaration
class "class"
type_identifier "A"
class_body
{ "{"
method_definition
property_identifier "foo"
formal_parameters
( "("
) ")"
statement_block
{ "{"
} "}"
} "}"
abstract_class_declaration
abstract "abstract"
class "class"
type_identifier "B"
class_heritageextends_clause
extends "extends"
identifier "A"
class_body
{ "{"
abstract_method_signature
abstract "abstract"
property_identifier "bar"
formal_parameters
( "("
) ")"
; ";"
} "}"
class_declaration
class "class"
type_identifier "C"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
} "}"
abstract_class_declaration
abstract "abstract"
class "class"
type_identifier "D"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
} "}"
class_declaration
class "class"
type_identifier "E"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
method_definition
property_identifier "bar"
formal_parameters
( "("
) ")"
statement_block
{ "{"
} "}"
} "}"
After
program
comment "// @target: es2015"
comment "// @strict: false"
class_declaration
class "class"
type_identifier "A"
class_body
{ "{"
method_definition
property_identifier "foo"
formal_parameters
( "("
) ")"
statement_block
{ "{"
} "}"
} "}"
abstract_class_declaration
abstract "abstract"
class "class"
type_identifier "B"
class_heritageextends_clause
extends "extends"
identifier "A"
class_body
{ "{"
abstract_method_signature
abstract "abstract"
property_identifier "bar"
formal_parameters
( "("
) ")"
; ";"
} "}"
class_declaration
class "class"
type_identifier "C"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
} "}"
abstract_class_declaration
abstract "abstract"
class "class"
type_identifier "D"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
} "}"
class_declaration
class "class"
type_identifier "E"
class_heritageextends_clause
extends "extends"
identifier "B"
class_body
{ "{"
method_definition
property_identifier "bar"
formal_parameters
( "("
) ")"
statement_block
{ "{"
} "}"
} "}"
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)