Yew dev tools past activities

activities.md

Tracking issue

#1090 "DevTools extension" (OPEN, 2020-04-18) by teymour-aldridge

yewstack/yew#1090

The canonical entry point. Body explicitly cites React DevTools (the Chrome extension) as inspiration and asks for:

• component tree
• timeline of component updates
• timeline of agent calls

Activity is thin:

• 2023-10-23 JADSN1894 linked a third-party extension https://github.com/JADSN1894/yew-debugger, built on three user-implemented traits (YewComponentModel, YewComponentMessage, YewComponentDebug). MVU-flavored, not function-component aware out of the box.
• 2023-10-24 ranile (maintainer) asked how well it works with function components. Never answered.

Implementation attempts

PR #1094 "Add developer tools extension." (CLOSED, 2020-04-20) by teymour-aldridge

yewstack/yew#1094

Draft. Opens a thread_local! WebSocket and pushes component info to a not-yet-built browser extension. Got rebase-tangled and was superseded by #1221. Reviewer (jstarry) was supportive.

PR #1221 "Add developer tools." (CLOSED as stale, 2020-05-13) by teymour-aldridge

yewstack/yew#1221

Rewrite of #1094. Closed as stale by jstarry with "Feel free to re-open when you have time to dig back in." Author committed to finishing later but never returned.

Shape of the diff (useful if anyone picks this up):

• Cargo feature: devtools (separate from dev).
• New crates: devtools/ (WebSocket echo/relay server, Rust binary) and devtools-extension/ (skeleton browser extension shell).
• New module yew/src/devtools/ with:
  • DebuggerConnection (thread-local RefCell, holds web_sys::WebSocket + queue).
  • ComponentMessage { eventdata, metadata } where:
    • ComponentEvent is Mounted | Unmounted | Updated | Created { serialized_props } | Destroyed.
    • ComponentMetadata { name: String, selector: Option<String> }. selector is built by walking parent_node() up the live DOM and concatenating node_name() segments.
• Hooks into Scope::new to fire Created { serialized_props }.
• Conditionally tightens the Properties trait to require Serialize + Deserialize when the feature is on (jstarry's suggestion, so the extension can pretty-print props).
• Connection target is configurable via env vars at compile time: YEW_DEBUGGER_CONNECTION_TYPE (ws/wss), YEW_DEBUGGER_HOST, YEW_DEBUGGER_PORT (default localhost:8017).

Open design questions left in the thread:

• Multiple Yew apps on one page muxing into one debugger connection.
• Function-component support (the data model is struct-component shaped).
• Whether the dev module belongs in core yew or a separate yew-devtools-client crate (jstarry preferred the latter).

Third-party

• https://github.com/JADSN1894/yew-debugger - independent extension, requires three trait impls per component, MVU-style timeline. Function-component story unclear.