@react-perfscope/ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -37
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# @react-perfscope/ui
|
|
2
2
|
|
|
3
|
-
Floating-widget UI for `react-perfscope`. Mounts a Shadow-DOM-isolated
|
|
3
|
+
Floating-widget UI for `react-perfscope`. Mounts a Shadow-DOM-isolated panel into your page that records performance signals, shows them in a per-kind tabbed panel, and highlights affected DOM regions with overlays.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
```sh
|
|
8
|
+
npm install @react-perfscope/ui @react-perfscope/core
|
|
9
|
+
```
|
|
8
10
|
|
|
9
|
-
##
|
|
11
|
+
## Usage
|
|
10
12
|
|
|
11
13
|
```ts
|
|
12
14
|
import { createRecorder } from '@react-perfscope/core'
|
|
@@ -25,46 +27,40 @@ const unmount = mount({ recorder })
|
|
|
25
27
|
|
|
26
28
|
Click any row to expand its detail. Each signal kind shows different info:
|
|
27
29
|
|
|
28
|
-
- **forced-reflow** — call stack
|
|
29
|
-
- **layout-shift** — CLS value + each source rect
|
|
30
|
+
- **forced-reflow** — call stack showing where layout was forced
|
|
31
|
+
- **layout-shift** — CLS value + each source rect
|
|
30
32
|
- **long-task** — start/end/duration, plus call stack if captured
|
|
31
33
|
- **network** — full URL, transfer size, render-blocking flag
|
|
32
34
|
- **paint** — paint name (first-paint / first-contentful-paint)
|
|
33
|
-
- **web-vital** — metric name, value
|
|
35
|
+
- **web-vital** — metric name, value, rating per [Google thresholds](https://web.dev/vitals/)
|
|
34
36
|
- **render** — component, reason, duration, timestamp
|
|
35
37
|
|
|
36
|
-
The header has a **Save** button that downloads the full recording as JSON.
|
|
37
|
-
|
|
38
|
-
The `render` tab also offers **Group by component** (collapsing many commits of the same component into one row); the `forced-reflow` tab offers **Group by source** (grouping reflows by their originating call site).
|
|
38
|
+
The header has a **Save** button that downloads the full recording as JSON. The `render` tab offers **Group by component** and the `forced-reflow` tab offers **Group by source**.
|
|
39
39
|
|
|
40
40
|
## API
|
|
41
41
|
|
|
42
42
|
- `mount({ recorder, position?, host? })` — returns an unmount function.
|
|
43
43
|
- `position`: `'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'`. Defaults to `'bottom-right'`.
|
|
44
|
-
- `host`: parent element
|
|
45
|
-
- `mountShadow(vnode, { parent? })` —
|
|
46
|
-
- `showOverlay(id, rect)` / `hideOverlay(id)` / `hideAllOverlays()` — DOM overlay primitives.
|
|
44
|
+
- `host`: parent element for the Shadow DOM host. Defaults to `document.body`.
|
|
45
|
+
- `mountShadow(vnode, { parent? })` — mount any Preact vnode in a fresh Shadow Root. Returns unmount.
|
|
46
|
+
- `showOverlay(id, rect)` / `hideOverlay(id)` / `hideAllOverlays()` — DOM overlay primitives.
|
|
47
47
|
- `App`, `Panel`, `Widget` — Preact components, exported for advanced composition.
|
|
48
48
|
|
|
49
|
-
## Notes
|
|
50
|
-
|
|
51
|
-
- The UI is built in **Preact** (not React) so the render collector — which observes React commits — doesn't pick up our own widget renders.
|
|
52
|
-
- The Shadow Root uses `mode: 'open'` so tests and devtools can inspect the tree.
|
|
53
|
-
- The overlay lives outside the Shadow DOM (in `document.body`) so it can layer over arbitrary host-page elements.
|
|
54
|
-
|
|
55
49
|
---
|
|
56
50
|
|
|
57
51
|
<a id="한국어"></a>
|
|
58
52
|
|
|
59
53
|
# 한국어
|
|
60
54
|
|
|
61
|
-
`react-perfscope`용 플로팅 위젯 UI. Shadow DOM으로 격리된
|
|
55
|
+
`react-perfscope`용 플로팅 위젯 UI. Shadow DOM으로 격리된 패널을 페이지에 마운트해서, 성능 신호를 기록하고 종류별 탭 패널로 표시하고 영향받은 DOM 영역을 오버레이로 하이라이트한다.
|
|
62
56
|
|
|
63
|
-
##
|
|
57
|
+
## 설치
|
|
64
58
|
|
|
65
|
-
|
|
59
|
+
```sh
|
|
60
|
+
npm install @react-perfscope/ui @react-perfscope/core
|
|
61
|
+
```
|
|
66
62
|
|
|
67
|
-
##
|
|
63
|
+
## 사용법
|
|
68
64
|
|
|
69
65
|
```ts
|
|
70
66
|
import { createRecorder } from '@react-perfscope/core'
|
|
@@ -83,29 +79,21 @@ const unmount = mount({ recorder })
|
|
|
83
79
|
|
|
84
80
|
신호 row를 클릭하면 디테일이 펼쳐진다. 종류별로 다른 정보를 보여준다:
|
|
85
81
|
|
|
86
|
-
- **forced-reflow** — 레이아웃을 강제한 호출 스택
|
|
87
|
-
- **layout-shift** — CLS 값 + 각 source rect
|
|
82
|
+
- **forced-reflow** — 레이아웃을 강제한 호출 스택
|
|
83
|
+
- **layout-shift** — CLS 값 + 각 source rect
|
|
88
84
|
- **long-task** — 시작/끝/duration, 캡처된 스택이 있으면 같이 표시
|
|
89
85
|
- **network** — 전체 URL, transfer size, render-blocking 여부
|
|
90
86
|
- **paint** — paint 이름 (first-paint / first-contentful-paint)
|
|
91
|
-
- **web-vital** — 메트릭 이름,
|
|
87
|
+
- **web-vital** — 메트릭 이름, 값, [Google 기준](https://web.dev/vitals/)에 따른 등급
|
|
92
88
|
- **render** — 컴포넌트, reason, duration, 타임스탬프
|
|
93
89
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
`render` 탭에는 **Group by component** (같은 컴포넌트의 여러 commit을 한 row로 묶음), `forced-reflow` 탭에는 **Group by source** (같은 call site에서 발생한 reflow끼리 묶음) 옵션도 있다.
|
|
90
|
+
헤더의 **Save** 버튼으로 전체 recording을 JSON으로 받을 수 있다. `render` 탭에는 **Group by component**, `forced-reflow` 탭에는 **Group by source** 옵션이 있다.
|
|
97
91
|
|
|
98
92
|
## API
|
|
99
93
|
|
|
100
94
|
- `mount({ recorder, position?, host? })` — unmount 함수를 반환한다.
|
|
101
95
|
- `position`: `'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'`. 기본값은 `'bottom-right'`.
|
|
102
96
|
- `host`: Shadow DOM 호스트를 붙일 부모 엘리먼트. 기본값은 `document.body`.
|
|
103
|
-
- `mountShadow(vnode, { parent? })` —
|
|
104
|
-
- `showOverlay(id, rect)` / `hideOverlay(id)` / `hideAllOverlays()` — DOM 오버레이 기본 함수.
|
|
97
|
+
- `mountShadow(vnode, { parent? })` — 새 Shadow Root에 Preact vnode를 마운트한다. unmount 함수를 반환.
|
|
98
|
+
- `showOverlay(id, rect)` / `hideOverlay(id)` / `hideAllOverlays()` — DOM 오버레이 기본 함수.
|
|
105
99
|
- `App`, `Panel`, `Widget` — 고급 조합을 위해 export된 Preact 컴포넌트들.
|
|
106
|
-
|
|
107
|
-
## 참고
|
|
108
|
-
|
|
109
|
-
- UI는 **Preact**로 만들어졌다 (React 아님). 그래서 React 커밋을 감지하는 render collector가 위젯 자체의 렌더는 잡지 않는다.
|
|
110
|
-
- Shadow Root는 `mode: 'open'`이라 테스트와 DevTools에서 트리를 들여다볼 수 있다.
|
|
111
|
-
- 오버레이는 Shadow DOM 바깥(즉 `document.body`)에 있어서 호스트 페이지의 어떤 엘리먼트 위에도 레이어를 올릴 수 있다.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-perfscope/ui",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "In-app
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "In-app performance panel and overlays for react-perfscope.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"performance",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
],
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"preact": "^10.20.0",
|
|
29
|
-
"@react-perfscope/core": "0.
|
|
29
|
+
"@react-perfscope/core": "0.2.0"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@testing-library/preact": "^3.2.4",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"@types/react-dom": "^18.3.0",
|
|
36
36
|
"react": "^18.3.0",
|
|
37
37
|
"react-dom": "^18.3.0",
|
|
38
|
-
"@react-perfscope/react": "0.
|
|
38
|
+
"@react-perfscope/react": "0.2.0"
|
|
39
39
|
},
|
|
40
40
|
"license": "MIT",
|
|
41
41
|
"author": "rayforvideos",
|