@react-perfscope/ui

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.

Install

npm install @react-perfscope/ui @react-perfscope/core

Usage

import { createRecorder } from '@react-perfscope/core'
import { createRenderCollector } from '@react-perfscope/react'
import { mount } from '@react-perfscope/ui'

const recorder = createRecorder()
recorder.use(createRenderCollector())

const unmount = mount({ recorder })
// ... later, to remove:
// unmount()

What's in the panel

Click any row to expand its detail. Each signal kind shows different info:

• forced-reflow — call stack showing where layout was forced; reads in one turn are coalesced into a single entry carrying its read count
• layout-shift — CLS value + each source rect
• long-task — start/end/duration, plus call stack if captured
• network — full URL, transfer size, render-blocking flag
• web-vital — metric name, value, rating per Google thresholds
• render — one entry per commit, showing the cascade root and every component that re-rendered

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.

API

• mount({ recorder, position?, host? }) — returns an unmount function.
  • position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'. Defaults to 'bottom-right'.
  • host: parent element for the Shadow DOM host. Defaults to document.body.
• mountShadow(vnode, { parent? }) — mount any Preact vnode in a fresh Shadow Root. Returns unmount.
• showOverlay(id, rect) / hideOverlay(id) / hideAllOverlays() — DOM overlay primitives.
• App, Panel, Widget — Preact components, exported for advanced composition.

한국어

react-perfscope용 플로팅 위젯 UI. Shadow DOM으로 격리된 패널을 페이지에 마운트해서, 성능 신호를 기록하고 종류별 탭 패널로 표시하고 영향받은 DOM 영역을 오버레이로 하이라이트한다.

설치

npm install @react-perfscope/ui @react-perfscope/core

사용법

import { createRecorder } from '@react-perfscope/core'
import { createRenderCollector } from '@react-perfscope/react'
import { mount } from '@react-perfscope/ui'

const recorder = createRecorder()
recorder.use(createRenderCollector())

const unmount = mount({ recorder })
// ... 나중에 제거하려면:
// unmount()

패널 안에 뭐가 있나

신호 row를 클릭하면 디테일이 펼쳐진다. 종류별로 다른 정보를 보여준다:

• forced-reflow — 레이아웃을 강제한 호출 스택. 한 턴에 일어난 읽기는 읽기 횟수를 담은 한 항목으로 합쳐진다
• layout-shift — CLS 값 + 각 source rect
• long-task — 시작/끝/duration, 캡처된 스택이 있으면 같이 표시
• network — 전체 URL, transfer size, render-blocking 여부
• web-vital — 메트릭 이름, 값, Google 기준에 따른 등급
• render — 커밋당 한 항목. 캐스케이드 루트와 그 커밋에서 리렌더된 모든 컴포넌트를 보여준다

헤더의 Save 버튼으로 전체 recording을 JSON으로 받을 수 있다. render 탭에는 Group by component, forced-reflow 탭에는 Group by source 옵션이 있다.

API

• mount({ recorder, position?, host? }) — unmount 함수를 반환한다.
  • position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'. 기본값은 'bottom-right'.
  • host: Shadow DOM 호스트를 붙일 부모 엘리먼트. 기본값은 document.body.
• mountShadow(vnode, { parent? }) — 새 Shadow Root에 Preact vnode를 마운트한다. unmount 함수를 반환.
• showOverlay(id, rect) / hideOverlay(id) / hideAllOverlays() — DOM 오버레이 기본 함수.
• App, Panel, Widget — 고급 조합을 위해 export된 Preact 컴포넌트들.