@samitouri / QOS-React-1 / commits / 6160773f30

[playground] Refactor ConfigEditor to use <Activity> component (#34958)

## Summary This PR addresses a pending TODO comment left in https://github.com/facebook/react/pull/34499 https://github.com/facebook/react/blame/eb2f784e752ba690f032db4c3d87daac77a5a2aa/compiler/apps/playground/components/Editor/ConfigEditor.tsx#L37 This change removes the temporary workaround and replaces it with `<Activity>`, as originally intended. ## How did you test this change? - Updated the component to use `<Activity>` directly - Verified the editor renders correctly in both development and production builds. - The `<Activity>` UI updates as expected. https://github.com/user-attachments/assets/ce976123-da59-4579-b063-b308a9167b21

Timothy Lau committed Oct 23, 2025 at 23:13 UTC 6160773f309b7fc734767649d47140d04fa1f568
4 files changed +54 -45
compiler/apps/playground/components/Editor/ConfigEditor.tsx
+7 -12
@@ -14,6 +14,7 @@ import React, {
14 unstable_ViewTransition as ViewTransition,
15 unstable_addTransitionType as addTransitionType,
16 startTransition,
17 + Activity,
18 } from 'react';
19 import {Resizable} from 're-resizable';
20 import {useStore, useStoreDispatch} from '../StoreContext';
@@ -34,12 +35,8 @@ export default function ConfigEditor({
35 const [isExpanded, setIsExpanded] = useState(false);
36
37 return (
37 - // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753
38 <>
39 - <div
40 - style={{
41 - display: isExpanded ? 'block' : 'none',
42 - }}>
39 + <Activity mode={isExpanded ? 'visible' : 'hidden'}>
40 <ExpandedEditor
41 onToggle={() => {
42 startTransition(() => {
@@ -49,11 +46,8 @@ export default function ConfigEditor({
46 }}
47 formattedAppliedConfig={formattedAppliedConfig}
48 />
52 - </div>
53 - <div
54 - style={{
55 - display: !isExpanded ? 'block' : 'none',
56 - }}>
49 + </Activity>
50 + <Activity mode={isExpanded ? 'hidden' : 'visible'}>
51 <CollapsedEditor
52 onToggle={() => {
53 startTransition(() => {
@@ -62,7 +56,7 @@ export default function ConfigEditor({
56 });
57 }}
58 />
65 - </div>
59 + </Activity>
60 </>
61 );
62 }
@@ -122,7 +116,8 @@ function ExpandedEditor({
116
117 return (
118 <ViewTransition
125 - update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
119 + enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
120 + exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}>
121 <Resizable
122 minWidth={300}
123 maxWidth={600}
compiler/apps/playground/package.json
+7 -7
@@ -26,7 +26,7 @@
26 "@babel/traverse": "^7.18.9",
27 "@babel/types": "7.26.3",
28 "@heroicons/react": "^1.0.6",
29 - "@monaco-editor/react": "^4.4.6",
29 + "@monaco-editor/react": "^4.8.0-rc.2",
30 "@playwright/test": "^1.51.1",
31 "@use-gesture/react": "^10.2.22",
32 "hermes-eslint": "^0.25.0",
@@ -40,13 +40,13 @@
40 "prettier": "^3.3.3",
41 "pretty-format": "^29.3.1",
42 "re-resizable": "^6.9.16",
43 - "react": "19.1.1",
44 - "react-dom": "19.1.1"
43 + "react": "19.2",
44 + "react-dom": "19.2"
45 },
46 "devDependencies": {
47 "@types/node": "18.11.9",
48 - "@types/react": "19.1.13",
49 - "@types/react-dom": "19.1.9",
48 + "@types/react": "19.2",
49 + "@types/react-dom": "19.2",
50 "autoprefixer": "^10.4.13",
51 "clsx": "^1.2.1",
52 "concurrently": "^7.4.0",
@@ -58,7 +58,7 @@
58 "wait-on": "^7.2.0"
59 },
60 "resolutions": {
61 - "@types/react": "19.1.12",
62 - "@types/react-dom": "19.1.9"
61 + "@types/react": "19.2",
62 + "@types/react-dom": "19.2"
63 }
64 }
compiler/apps/playground/styles/globals.css
+9
@@ -79,6 +79,15 @@
79 ::view-transition-group(.slide-in) {
80 z-index: 1;
81 }
82 +::view-transition-old(.slide-out) {
83 + animation-name: slideOutLeft;
84 +}
85 +::view-transition-new(.slide-out) {
86 + animation-name: slideInLeft;
87 +}
88 +::view-transition-group(.slide-out) {
89 + z-index: 1;
90 +}
91
92 @keyframes slideOutLeft {
93 from {
compiler/apps/playground/yarn.lock
+31 -26
@@ -701,19 +701,19 @@
701 "@jridgewell/resolve-uri" "^3.1.0"
702 "@jridgewell/sourcemap-codec" "^1.4.14"
703
704 -"@monaco-editor/loader@^1.4.0":
705 - version "1.4.0"
706 - resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
707 - integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
704 +"@monaco-editor/loader@^1.6.1":
705 + version "1.6.1"
706 + resolved "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.6.1.tgz#c99177d87765abf10de31a0086084e714acfbc0f"
707 + integrity sha512-w3tEnj9HYEC73wtjdpR089AqkUPskFRcdkxsiSFt3SoUc3OHpmu+leP94CXBm4mHfefmhsdfI0ZQu6qJ0wgtPg==
708 dependencies:
709 state-local "^1.0.6"
710
711 -"@monaco-editor/react@^4.4.6":
712 - version "4.6.0"
713 - resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
714 - integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
711 +"@monaco-editor/react@^4.8.0-rc.2":
712 + version "4.8.0-rc.2"
713 + resolved "https://registry.npmjs.org/@monaco-editor/react/-/react-4.8.0-rc.2.tgz#e9acf652e23e9f640671a69875f496dde7f098aa"
714 + integrity sha512-RzFHKBCnRA4RnozaG/EPhKsbkhX5wcApSa5MElR/AD2ojxhMY+QP+G8aJpxALCnIwKs6L0dec5MJ0nAjMUEqnA==
715 dependencies:
716 - "@monaco-editor/loader" "^1.4.0"
716 + "@monaco-editor/loader" "^1.6.1"
717
718 "@next/env@15.6.0-canary.7":
719 version "15.6.0-canary.7"
@@ -859,6 +859,11 @@
859 resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
860 integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
861
862 +"@types/react-dom@19.2":
863 + version "19.2.2"
864 + resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz#a4cc874797b7ddc9cb180ef0d5dc23f596fc2332"
865 + integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==
866 +
867 "@types/react@19.1.12":
868 version "19.1.12"
869 resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b"
@@ -866,10 +871,10 @@
871 dependencies:
872 csstype "^3.0.2"
873
869 -"@types/react@19.1.13":
870 - version "19.1.13"
871 - resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.13.tgz#fc650ffa680d739a25a530f5d7ebe00cdd771883"
872 - integrity sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==
874 +"@types/react@19.2":
875 + version "19.2.2"
876 + resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz#ba123a75d4c2a51158697160a4ea2ff70aa6bf36"
877 + integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
878 dependencies:
879 csstype "^3.0.2"
880
@@ -3589,12 +3594,12 @@ re-resizable@^6.9.16:
3594 resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee"
3595 integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==
3596
3592 -react-dom@19.1.1:
3593 - version "19.1.1"
3594 - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.1.1.tgz#2daa9ff7f3ae384aeb30e76d5ee38c046dc89893"
3595 - integrity sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==
3597 +react-dom@19.2:
3598 + version "19.2.0"
3599 + resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz#00ed1e959c365e9a9d48f8918377465466ec3af8"
3600 + integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==
3601 dependencies:
3597 - scheduler "^0.26.0"
3602 + scheduler "^0.27.0"
3603
3604 react-is@^16.13.1:
3605 version "16.13.1"
@@ -3606,10 +3611,10 @@ react-is@^18.0.0:
3611 resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
3612 integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
3613
3609 -react@19.1.1:
3610 - version "19.1.1"
3611 - resolved "https://registry.yarnpkg.com/react/-/react-19.1.1.tgz#06d9149ec5e083a67f9a1e39ce97b06a03b644af"
3612 - integrity sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==
3614 +react@19.2:
3615 + version "19.2.0"
3616 + resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz#d33dd1721698f4376ae57a54098cb47fc75d93a5"
3617 + integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==
3618
3619 read-cache@^1.0.0:
3620 version "1.0.0"
@@ -3785,10 +3790,10 @@ safe-regex-test@^1.1.0:
3790 es-errors "^1.3.0"
3791 is-regex "^1.2.1"
3792
3788 -scheduler@^0.26.0:
3789 - version "0.26.0"
3790 - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.26.0.tgz#4ce8a8c2a2095f13ea11bf9a445be50c555d6337"
3791 - integrity sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==
3793 +scheduler@^0.27.0:
3794 + version "0.27.0"
3795 + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
3796 + integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
3797
3798 semver@^6.3.1:
3799 version "6.3.1"