Commit b7f5131
feat: migrate embedded frontend from custom MVX framework to React 18
Replace the custom MVX rendering framework (BaseComponent, StateStore,
Compositor, MVX orchestrator) with React 18 functional components using
an adapter pattern that preserves the existing public API.
## What changed
- **Adapter pattern**: ReactCaptureMenu and ReactResultView implement the
exact same public API as the original classes, using ExternalStore +
useSyncExternalStore for state management instead of MVX state IDs
- **32 React components** replace 31 MVX components across CaptureMenu
(5 components) and ResultView (18 components + JSONRenderTree)
- **Visual regression tests**: 38 Playwright screenshot tests ensure
pixel-level visual parity with the original UI
- **SCSS unchanged**: Same 3 SCSS files, same class names, same DOM
structure — zero CSS changes needed
- **Ace editor**: Wrapped with useRef/useEffect for proper lifecycle
management (no StrictMode — incompatible with Ace)
## Architecture
- ExternalStore<T> bridges imperative API → React reactivity
- Adapter classes translate method calls → store.setState() → re-render
- React components are purely presentational (read store, call handlers)
- Context pattern passes adapter instance to component tree
- JSONRenderItem discriminated union for recursive JSON tree rendering
## Bug fixes
- hide() now actually works (MVX had truthy-check bug)
- Removed dead IE11 navigator.msSaveBlob code path
- Fixed falsy number rendering in VisualStateListItem (textureLayer=0)
## Bundle impact
- Before: 667 KB (MVX + Ace)
- After: 794 KB (React + ReactDOM + Ace) — +127 KB for React
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>1 parent 1b99ced commit b7f5131
116 files changed
Lines changed: 5332 additions & 2894 deletions
File tree
- dist
- spec
- src
- embeddedFrontend
- captureMenu
- mvx
- react
- CaptureMenu
- ResultView
- CaptureList
- CommandList
- Content
- Information
- JSON
- Menu
- SourceCode
- VisualStateList
- resultView
- JSON
- captureList
- commandList
- content
- information
- sourceCode
- visualStateList
- ux
- test
- fixtures
- helpers
- screenshots/visual
- responsive.spec.ts-snapshots
- result-view.spec.ts-snapshots
- smoke.spec.ts-snapshots
- source-code.spec.ts-snapshots
- visual-state-no-stray-text.spec.ts-snapshots
- visual
Some content is hidden
Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
8 | 8 | | |
9 | 9 | | |
10 | 10 | | |
11 | | - | |
| 11 | + | |
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
| 1 | + | |
| 2 | + | |
| 3 | + | |
| 4 | + | |
| 5 | + | |
| 6 | + | |
| 7 | + | |
| 8 | + | |
| 9 | + | |
| 10 | + | |
| 11 | + | |
| 12 | + | |
| 13 | + | |
| 14 | + | |
| 15 | + | |
| 16 | + | |
| 17 | + | |
| 18 | + | |
| 19 | + | |
| 20 | + | |
| 21 | + | |
| 22 | + | |
| 23 | + | |
| 24 | + | |
| 25 | + | |
| 26 | + | |
| 27 | + | |
| 28 | + | |
| 29 | + | |
| 30 | + | |
| 31 | + | |
| 32 | + | |
| 33 | + | |
| 34 | + | |
| 35 | + | |
| 36 | + | |
| 37 | + | |
| 38 | + | |
| 39 | + | |
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
0 commit comments