Chris Tate
57405f9361
* feat(react): first-class React introspection, Web Vitals, and nextjs skill
Add React-general and web-universal features as first-class agent-browser verbs
(react tree/inspect/renders/suspense, vitals, pushstate). Genuinely Next.js-specific
workflows (PPR cookie protocol, /_next/mcp bridge, dev-server endpoints) ship as
a new `nextjs` skill that composes the primitives. No new runtime dependencies -
the React DevTools installHook.js is vendored (MIT) and include_str!'d into the
binary.
New commands:
react tree Full React component tree (depth id parent name)
react inspect <fiberId> Props, hooks, state, source for one fiber
react renders start|stop Fiber profiler with Insts/Mounts/Re-renders/Self/DOM
+ prev->next change details
react suspense Suspense boundaries + classifier (client-hook,
request-api, server-fetch, cache, stream, framework)
+ root-cause grouping + recommendations
vitals [url] LCP/CLS/TTFB/FCP/INP + React hydration phases
pushstate <url> Generic SPA client-side navigation
removeinitscript <id> Remove a script registered via addinitscript
New launch flags:
--init-script <path> Register init scripts before first navigation
(repeatable; env AGENT_BROWSER_INIT_SCRIPTS)
--enable <feature> Built-in init scripts; currently react-devtools
(repeatable; env AGENT_BROWSER_ENABLE)
Other primitives:
network route ... --resource-type <csv> Filter by CDP resource type
cookies set --curl <file> Auto-detects JSON/cURL/Cookie-header
* fixes
* fixes
* fixes
32 lines
1.3 KiB
Rust
32 lines
1.3 KiB
Rust
//! React/web introspection primitives.
|
|
//!
|
|
//! Scripts and handlers for the `react` subcommands (tree, inspect, renders,
|
|
//! suspense) plus the universal `vitals` verb and the generic `pushstate`
|
|
//! SPA-navigation action. These primitives are framework-agnostic: React-side
|
|
//! commands only require the `__REACT_DEVTOOLS_GLOBAL_HOOK__` to be installed,
|
|
//! and `vitals` / `pushstate` are pure web-standard APIs.
|
|
//!
|
|
//! The React DevTools `installHook.js` is vendored from the React DevTools
|
|
//! Chrome extension (MIT, facebook/react). It's registered via
|
|
//! `addScriptToEvaluateOnNewDocument` before any page JS runs when the user
|
|
//! passes `--enable react-devtools` at launch.
|
|
|
|
pub mod scripts;
|
|
|
|
mod renders;
|
|
mod suspense;
|
|
mod tree;
|
|
mod vitals;
|
|
|
|
pub use renders::{format_renders_report, RendersData};
|
|
pub use suspense::{format_suspense_report, Boundary};
|
|
pub use tree::{format_tree, TreeNode};
|
|
pub use vitals::{format_vitals_report, VitalsData};
|
|
|
|
/// React DevTools hook script (MIT, from facebook/react).
|
|
/// Registered via `addScriptToEvaluateOnNewDocument` to install
|
|
/// `window.__REACT_DEVTOOLS_GLOBAL_HOOK__` before any page JS runs. React
|
|
/// detects the hook on boot and registers its renderers against it, which
|
|
/// enables every `react …` command.
|
|
pub const INSTALL_HOOK_JS: &str = include_str!("installHook.js");
|