Skip to content

Commit b7f5131

Browse files
sebavanCopilot
andcommitted
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

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@
88
/node_modules
99
npm-debug.log.**
1010
npm-debug.log
11-
.DS_Store
11+
.DS_Storeplaywright-report/

dist/spector.bundle.js

Lines changed: 2 additions & 82 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/spector.bundle.js.LICENSE.txt

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/**
2+
* @license React
3+
* react-dom.production.min.js
4+
*
5+
* Copyright (c) Facebook, Inc. and its affiliates.
6+
*
7+
* This source code is licensed under the MIT license found in the
8+
* LICENSE file in the root directory of this source tree.
9+
*/
10+
11+
/**
12+
* @license React
13+
* react-jsx-runtime.production.min.js
14+
*
15+
* Copyright (c) Facebook, Inc. and its affiliates.
16+
*
17+
* This source code is licensed under the MIT license found in the
18+
* LICENSE file in the root directory of this source tree.
19+
*/
20+
21+
/**
22+
* @license React
23+
* react.production.min.js
24+
*
25+
* Copyright (c) Facebook, Inc. and its affiliates.
26+
*
27+
* This source code is licensed under the MIT license found in the
28+
* LICENSE file in the root directory of this source tree.
29+
*/
30+
31+
/**
32+
* @license React
33+
* scheduler.production.min.js
34+
*
35+
* Copyright (c) Facebook, Inc. and its affiliates.
36+
*
37+
* This source code is licensed under the MIT license found in the
38+
* LICENSE file in the root directory of this source tree.
39+
*/

package-lock.json

Lines changed: 209 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)