Skip to content

Commit 6160773

Browse files
0xlau0xlau
authored
[playground] Refactor ConfigEditor to use <Activity> component (#34958)
## Summary This PR addresses a pending TODO comment left in #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
1 parent eb2f784 commit 6160773

File tree

4 files changed

+54
-45
lines changed

4 files changed

+54
-45
lines changed

‎compiler/apps/playground/components/Editor/ConfigEditor.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import React, {
1414
unstable_ViewTransition as ViewTransition,
1515
unstable_addTransitionType as addTransitionType,
1616
startTransition,
17+
Activity,
1718
} from 'react';
1819
import {Resizable} from 're-resizable';
1920
import {useStore, useStoreDispatch} from '../StoreContext';
@@ -34,12 +35,8 @@ export default function ConfigEditor({
3435
const [isExpanded, setIsExpanded] = useState(false);
3536

3637
return (
37-
// TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753
3838
<>
39-
<div
40-
style={{
41-
display: isExpanded ? 'block' : 'none',
42-
}}>
39+
<Activity mode={isExpanded ? 'visible' : 'hidden'}>
4340
<ExpandedEditor
4441
onToggle={() => {
4542
startTransition(() => {
@@ -49,11 +46,8 @@ export default function ConfigEditor({
4946
}}
5047
formattedAppliedConfig={formattedAppliedConfig}
5148
/>
52-
</div>
53-
<div
54-
style={{
55-
display: !isExpanded ? 'block' : 'none',
56-
}}>
49+
</Activity>
50+
<Activity mode={isExpanded ? 'hidden' : 'visible'}>
5751
<CollapsedEditor
5852
onToggle={() => {
5953
startTransition(() => {
@@ -62,7 +56,7 @@ export default function ConfigEditor({
6256
});
6357
}}
6458
/>
65-
</div>
59+
</Activity>
6660
</>
6761
);
6862
}
@@ -122,7 +116,8 @@ function ExpandedEditor({
122116

123117
return (
124118
<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'}}>
126121
<Resizable
127122
minWidth={300}
128123
maxWidth={600}

‎compiler/apps/playground/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
"@babel/traverse": "^7.18.9",
2727
"@babel/types": "7.26.3",
2828
"@heroicons/react": "^1.0.6",
29-
"@monaco-editor/react": "^4.4.6",
29+
"@monaco-editor/react": "^4.8.0-rc.2",
3030
"@playwright/test": "^1.51.1",
3131
"@use-gesture/react": "^10.2.22",
3232
"hermes-eslint": "^0.25.0",
@@ -40,13 +40,13 @@
4040
"prettier": "^3.3.3",
4141
"pretty-format": "^29.3.1",
4242
"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"
4545
},
4646
"devDependencies": {
4747
"@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",
5050
"autoprefixer": "^10.4.13",
5151
"clsx": "^1.2.1",
5252
"concurrently": "^7.4.0",
@@ -58,7 +58,7 @@
5858
"wait-on": "^7.2.0"
5959
},
6060
"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"
6363
}
6464
}

‎compiler/apps/playground/styles/globals.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,15 @@
7979
::view-transition-group(.slide-in) {
8080
z-index: 1;
8181
}
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+
}
8291

8392
@keyframes slideOutLeft {
8493
from {

‎compiler/apps/playground/yarn.lock‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -701,19 +701,19 @@
701701
"@jridgewell/resolve-uri" "^3.1.0"
702702
"@jridgewell/sourcemap-codec" "^1.4.14"
703703

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==
708708
dependencies:
709709
state-local "^1.0.6"
710710

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==
715715
dependencies:
716-
"@monaco-editor/loader" "^1.4.0"
716+
"@monaco-editor/loader" "^1.6.1"
717717

718718
"@next/[email protected]":
719719
version "15.6.0-canary.7"
@@ -859,17 +859,22 @@
859859
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
860860
integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
861861

862+
"@types/[email protected]":
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+
862867
"@types/[email protected]":
863868
version "19.1.12"
864869
resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b"
865870
integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==
866871
dependencies:
867872
csstype "^3.0.2"
868873

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==
873878
dependencies:
874879
csstype "^3.0.2"
875880

@@ -3589,12 +3594,12 @@ re-resizable@^6.9.16:
35893594
resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.10.0.tgz#d684a096ab438f1a93f59ad3a580a206b0ce31ee"
35903595
integrity sha512-hysSK0xmA5nz24HBVztlk4yCqCLCvS32E6ZpWxVKop9x3tqCa4yAj1++facrmkOf62JsJHjmjABdKxXofYioCw==
35913596

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==
35963601
dependencies:
3597-
scheduler "^0.26.0"
3602+
scheduler "^0.27.0"
35983603

35993604
react-is@^16.13.1:
36003605
version "16.13.1"
@@ -3606,10 +3611,10 @@ react-is@^18.0.0:
36063611
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
36073612
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
36083613

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==
36133618

36143619
read-cache@^1.0.0:
36153620
version "1.0.0"
@@ -3785,10 +3790,10 @@ safe-regex-test@^1.1.0:
37853790
es-errors "^1.3.0"
37863791
is-regex "^1.2.1"
37873792

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==
37923797

37933798
semver@^6.3.1:
37943799
version "6.3.1"

0 commit comments

Comments
 (0)