typescript-microsoft-typescript-expand-target-2

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.

Before1// @allowJs: true
2// @checkJs: true
3// @target: es5
4// @outDir: ./out
5// @declaration: true
6// @filename: index.js
7class A {
8    member = new Q();
…lines 9–19 unchanged (11 lines)

After1// @allowJs: true
2// @checkJs: true
3// @target: es5, es2015
4// @outDir: ./out
5// @declaration: true
6// @filename: index.js
7class A {
8    member = new Q();
9}
…lines 10–19 unchanged (10 lines)

Before1// @allowJs: true
2// @checkJs: true
3// @target: es5
4// @outDir: ./out
5// @declaration: true
6// @filename: index.js
7class A {
8    member = new Q();
…lines 9–19 unchanged (11 lines)

After1// @allowJs: true
2// @checkJs: true
3// @target: es5, es2015
4// @outDir: ./out
5// @declaration: true
6// @filename: index.js
7class A {
8    member = new Q();
9}
…lines 10–19 unchanged (10 lines)

Before

program

comment "// @allowJs: true"

comment "// @checkJs: true"

comment "// @target: es5"

comment "// @outDir: ./out"

comment "// @declaration: true"

comment "// @filename: index.js"

class_declaration

class "class"

type_identifier "A"

class_body

{ "{"

public_field_definition

property_identifier "member"

= "="

new_expression

new "new"

identifier "Q"

arguments

( "("

) ")"

; ";"

} "}"

class_declaration

class "class"

type_identifier "Q"

class_body

{ "{"

public_field_definition

property_identifier "x"

= "="

number "42"

; ";"

} "}"

expression_statement (+35 nodes collapsed)

expression_statement

assignment_expression

member_expression

identifier "module"

. "."

property_identifier "exports"

. "."

property_identifier "Another"

= "="

identifier "Q"

; ";"

After

program

comment "// @allowJs: true"

comment "// @checkJs: true"

comment "// @target: es5, es2015"

comment "// @outDir: ./out"

comment "// @declaration: true"

comment "// @filename: index.js"

class_declaration

class "class"

type_identifier "A"

class_body

{ "{"

public_field_definition

property_identifier "member"

= "="

new_expression

new "new"

identifier "Q"

arguments

( "("

) ")"

; ";"

} "}"

class_declaration

class "class"

type_identifier "Q"

class_body

{ "{"

public_field_definition

property_identifier "x"

= "="

number "42"

; ";"

} "}"

expression_statement (+35 nodes collapsed)

expression_statement

assignment_expression

member_expression

identifier "module"

. "."

property_identifier "exports"

. "."

property_identifier "Another"

= "="

identifier "Q"

; ";"

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