tsx-microsoft-typescript-libpath-to-lib

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﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4// @libFiles: react.d.ts
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

After1﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4/// <reference path="/.lib/react.d.ts" />
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

Before1﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4// @libFiles: react.d.ts
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

After1﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4/// <reference path="/.lib/react.d.ts" />
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

Before1﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4// @libFiles: react.d.ts
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

After1﻿// @filename: file.tsx
2// @jsx: react
3// @skipLibCheck: true
4/// <reference path="/.lib/react.d.ts" />
5
6import React = require('react');
7
8function SFC1(prop: { x: number }) {
9    return <div>hello</div>;
10};
…lines 11–17 unchanged (7 lines)

Before

program

comment "// @filename: file.tsx"

comment "// @jsx: react"

comment "// @skipLibCheck: true"

comment "// @libFiles: react.d.ts"

import_statement

import "import"

import_require_clause

identifier "React"

= "="

require "require"

( "("

string

' "'"

string_fragment "react"

' "'"

) ")"

; ";"

function_declaration (+35 nodes collapsed)

empty_statement

; ";"

function_declaration (+35 nodes collapsed)

variable_declaration

var "var"

variable_declarator

identifier "SFCComp"

= "="

binary_expression

identifier "SFC1"

|| "||"

identifier "SFC2"

; ";"

expression_statement

jsx_self_closing_element

< "<"

identifier "SFCComp"

jsx_attribute

property_identifier "x"

/> "/>"

After

program

comment "// @filename: file.tsx"

comment "// @jsx: react"

comment "// @skipLibCheck: true"

comment "/// <reference path=\"/.lib/react.d.ts\" />"

import_statement

import "import"

import_require_clause

identifier "React"

= "="

require "require"

( "("

string

' "'"

string_fragment "react"

' "'"

) ")"

; ";"

function_declaration (+35 nodes collapsed)

empty_statement

; ";"

function_declaration (+35 nodes collapsed)

variable_declaration

var "var"

variable_declarator

identifier "SFCComp"

= "="

binary_expression

identifier "SFC1"

|| "||"

identifier "SFC2"

; ";"

expression_statement

jsx_self_closing_element

< "<"

identifier "SFCComp"

jsx_attribute

property_identifier "x"

/> "/>"

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