@react-perfscope/core 0.1.0 → 0.1.1
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 +31 -43
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,31 +1,14 @@
|
|
|
1
1
|
# @react-perfscope/core
|
|
2
2
|
|
|
3
|
-
Core recording engine for `react-perfscope`. Provides a `Recorder` and pluggable `Collector`s that emit normalized performance signals.
|
|
3
|
+
Core recording engine for `react-perfscope`. Provides a `Recorder` and pluggable `Collector`s that emit normalized performance signals (forced-reflow, long-tasks, layout-shift, network, web-vitals, paint).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Install
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
**Forced-reflow note:** Synchronous dirty tracking via `MutationObserver.takeRecords()` ensures the collector only emits when DOM mutated since the last layout read. Stack parsing is deferred until `signal.stack` is accessed.
|
|
10
|
-
|
|
11
|
-
**Paint collector note:** Phase 2 emits paint entries with a zero-sized `rect` placeholder. Real mutated-region geometry arrives with the UI package in Phase 3.
|
|
12
|
-
|
|
13
|
-
The `render` signal is owned by the upcoming `@react-perfscope/react` package (Phase 3) and not yet emitted.
|
|
14
|
-
|
|
15
|
-
## Source-map resolution
|
|
16
|
-
|
|
17
|
-
`createSourceMapResolver()` returns an async resolver that follows `//# sourceMappingURL=` references (including inline `data:` URIs), caches the parsed source map per source URL, and resolves a `StackFrame` to its original source position. The UI uses this to make bundled stack traces readable.
|
|
18
|
-
|
|
19
|
-
```ts
|
|
20
|
-
import { createSourceMapResolver } from '@react-perfscope/core'
|
|
21
|
-
|
|
22
|
-
const resolver = createSourceMapResolver()
|
|
23
|
-
const original = await resolver.resolve(parsedFrame)
|
|
7
|
+
```sh
|
|
8
|
+
npm install @react-perfscope/core
|
|
24
9
|
```
|
|
25
10
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## Example
|
|
11
|
+
## Usage
|
|
29
12
|
|
|
30
13
|
```ts
|
|
31
14
|
import {
|
|
@@ -53,38 +36,32 @@ const result = recorder.stop()
|
|
|
53
36
|
console.log(result.signals)
|
|
54
37
|
```
|
|
55
38
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
<a id="한국어"></a>
|
|
59
|
-
|
|
60
|
-
# 한국어
|
|
61
|
-
|
|
62
|
-
`react-perfscope`의 핵심 레코딩 엔진. `Recorder`와 플러그인 방식의 `Collector`를 제공해서 정규화된 성능 신호를 내보낸다.
|
|
39
|
+
## Source-map resolution
|
|
63
40
|
|
|
64
|
-
|
|
41
|
+
`createSourceMapResolver()` returns an async resolver that follows `//# sourceMappingURL=` references (including inline `data:` URIs) and resolves a `StackFrame` to its original source position, so bundled stack traces become readable. Falls back to the input frame on any failure.
|
|
65
42
|
|
|
66
|
-
|
|
43
|
+
```ts
|
|
44
|
+
import { createSourceMapResolver } from '@react-perfscope/core'
|
|
67
45
|
|
|
68
|
-
|
|
46
|
+
const resolver = createSourceMapResolver()
|
|
47
|
+
const original = await resolver.resolve(parsedFrame)
|
|
48
|
+
```
|
|
69
49
|
|
|
70
|
-
|
|
50
|
+
---
|
|
71
51
|
|
|
72
|
-
|
|
52
|
+
<a id="한국어"></a>
|
|
73
53
|
|
|
74
|
-
|
|
54
|
+
# 한국어
|
|
75
55
|
|
|
76
|
-
`
|
|
56
|
+
`react-perfscope`의 핵심 레코딩 엔진. `Recorder`와 플러그인 방식의 `Collector`를 제공해서 정규화된 성능 신호(forced-reflow, long-tasks, layout-shift, network, web-vitals, paint)를 내보낸다.
|
|
77
57
|
|
|
78
|
-
|
|
79
|
-
import { createSourceMapResolver } from '@react-perfscope/core'
|
|
58
|
+
## 설치
|
|
80
59
|
|
|
81
|
-
|
|
82
|
-
|
|
60
|
+
```sh
|
|
61
|
+
npm install @react-perfscope/core
|
|
83
62
|
```
|
|
84
63
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
## 예제
|
|
64
|
+
## 사용법
|
|
88
65
|
|
|
89
66
|
```ts
|
|
90
67
|
import {
|
|
@@ -111,3 +88,14 @@ const result = recorder.stop()
|
|
|
111
88
|
|
|
112
89
|
console.log(result.signals)
|
|
113
90
|
```
|
|
91
|
+
|
|
92
|
+
## Source-map 해석
|
|
93
|
+
|
|
94
|
+
`createSourceMapResolver()`는 `//# sourceMappingURL=` 참조(inline `data:` URI 포함)를 따라가서 `StackFrame`을 원본 소스 위치로 해석해주는 async resolver를 반환한다. 덕분에 번들된 스택 트레이스를 읽을 수 있다. 실패하면 원본 frame을 그대로 반환한다.
|
|
95
|
+
|
|
96
|
+
```ts
|
|
97
|
+
import { createSourceMapResolver } from '@react-perfscope/core'
|
|
98
|
+
|
|
99
|
+
const resolver = createSourceMapResolver()
|
|
100
|
+
const original = await resolver.resolve(parsedFrame)
|
|
101
|
+
```
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-perfscope/core",
|
|
3
|
-
"version": "0.1.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Recorder and signal collectors for react-perfscope.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
7
7
|
"performance",
|