/
types.ts
115 lines (104 loc) · 3.94 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
export interface CodeInfo {
lineNumber: string;
columnNumber: string;
/**
* code source file relative path to dev-server cwd(current working directory)
* need use with `@react-dev-inspector/babel-plugin`
*/
relativePath?: string;
/**
* code source file absolute path
* just need use with `@babel/plugin-transform-react-jsx-source` which auto set by most framework
*/
absolutePath?: string;
}
/**
* props that injected into react nodes
*
* like <div data-inspector-line="2" data-inspector-column="3" data-inspector-relative-path="xxx/ooo" />
* this props will be record in fiber
*/
export interface CodeDataAttribute {
'data-inspector-line': string;
'data-inspector-column': string;
'data-inspector-relative-path': string;
}
/**
*
* InspectAgent design different renderer binding (like React DOM, React Native, React Three.js etc.)
*
* An Agent need implement these functions:
* - setup event listener to collect user interaction operation (like Pointer Down/Up/Over / Click etc.)
* and its target element (like DOM, Three.js etc.)
* - collect inspection info from its element (like name, code source position etc.)
* - show/hide indicator UI on element (like highlight element, show tooltip for name or code position etc.)
*/
export interface InspectAgent<Element> {
/**
* trigger when user activate inspector in <Inspector/>
*
* Agent need setup event listeners to collect user interaction on their target renderer (like DOM, React Native, React Three.js etc.)
*/
activate(params: {
/**
* the initial `PointerMove` event when activate inspector,
* use its position to check whether hovered any element immediately at initialization then trigger Inspector.
*/
pointer?: PointerEvent;
/**
* when hovered a element
* trigger it like on PointerMove on PointerOver event.
*/
onHover: (params: { element: Element; pointer: PointerEvent }) => void;
/**
* Just throw the `PointerDown` event to Inspector,
* that's no need to stopPropagation or preventDefault in agent, Inspector will auto stop it when agent is in active.
* Normally, the `PointerDown` event will stop by Inspector to prevent the default behavior like text selection,
* and the `Click` event will use to trigger the inspection and remove event listeners (by deactivate agent).
*/
onPointerDown: (params: { element?: Element; pointer: PointerEvent }) => void;
/**
* just throw the `client` event to Inspector,
* that's no need to stopPropagation or preventDefault in agent, Inspector will auto stop it when agent is in active.
* Normally, the `PointerDown` event will stop by Inspector to prevent the default behavior like text selection,
* and the `Click` event will use to trigger the inspection and remove event listeners (by deactivate agent).
*/
onClick: (params: { element?: Element; pointer: PointerEvent }) => void;
}): void;
/**
* trigger when user deactivate inspector in <Inspector/>,
* to clear agent's indicators, remove event listeners, release resources and reset states
*/
deactivate(): void;
/**
* use for filter valid elements from input element upward to render root.
* a "valid" element considered have a valid name and you want show it in the inspected list.
*/
getAncestorChain(element: Element): Generator<Element, void, void>;
/**
* get the element display name and title for show in indicator UI
*/
getNameInfo(element: Element): (
| undefined
| {
/** element's constructor name */
name: string;
/** display to describe the element as short */
title: string;
}
);
findCodeInfo(element: Element): CodeInfo | undefined;
/**
* show a indicator UI for the element on page
*/
indicate(params: {
element: Element;
pointer: PointerEvent;
name?: string;
title?: string;
}): void;
/**
* hide agent's indicator UI
*/
removeIndicate(): void;
}