Requires N:M mapping
This mapping has 9 all-to-all groups: every node on one side corresponds to every node on the other, and none is deleted or inserted. Each member carries an all N:M badge; selecting one highlights all of its counterparts, in the tree and in the code view alike.
Code view:
From the node mapping Minimal Full
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 import React , { forwardRef } from "react";
2 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
3
4 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
5 (props, ref) => {
6 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
7 },
8 );
9
After
1 import type React from "react";
2 import { forwardRef } from "react";
3 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
4
5 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6 (props, ref) => {
7 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
8 },
9 );
10
Before
1 import React, { forwardRef } from "react" ;
2 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
3
4 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
5 (props, ref) => {
6 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
7 },
8 );
9
After
1 import type React from "react" ;
2 import { forwardRef } from "react" ;
3 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
4
5 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6 (props, ref) => {
7 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
8 },
9 );
10
Before
1 import React , { forwardRef } from "react" ;
2 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
3
4 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
5 (props, ref) => {
6 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
7 },
8 );
9
After
1 import type React from "react" ;
2 import { forwardRef } from "react" ;
3 import SvgFacebookMessengerLogo2020 from "./FacebookMessengerLogo2020";
4
5 export const FBIcon = forwardRef<SVGSVGElement, React.PropsWithChildren<{}>>(
6 (props, ref) => {
7 return <SvgFacebookMessengerLogo2020 ref={ref} {...props} />;
8 },
9 );
10
Before
program import_statement all 1:2 import "import" all 1:2
import_clause all 1:2 identifier "React"
, ","
named_imports { "{"
import_specifier identifier "forwardRef"
} "}"
from "from" all 1:2
string all 1:2 " "\"" all 1:2
string_fragment "react" all 1:2
" "\"" all 1:2
; ";" all 1:2
import_statement import "import"
import_clause identifier "SvgFacebookMessengerLogo2020"
from "from"
string " "\""
string_fragment "./FacebookMessengerLogo2020"
" "\""
; ";"
export_statement (+63 nodes collapsed)
After
program import_statement all 1:2 import "import" all 1:2
type "type"
import_clause all 1:2 identifier "React"
from "from" all 1:2
string all 1:2 " "\"" all 1:2
string_fragment "react" all 1:2
" "\"" all 1:2
; ";" all 1:2
import_statement all 1:2 import "import" all 1:2
import_clause all 1:2 named_imports { "{"
import_specifier identifier "forwardRef"
} "}"
from "from" all 1:2
string all 1:2 " "\"" all 1:2
string_fragment "react" all 1:2
" "\"" all 1:2
; ";" all 1:2
import_statement import "import"
import_clause identifier "SvgFacebookMessengerLogo2020"
from "from"
string " "\""
string_fragment "./FacebookMessengerLogo2020"
" "\""
; ";"
export_statement (+63 nodes collapsed)
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
Search (plain substring, no regex):