@samitouri / QOS-React / commits / 319a7867d0

[playground] ViewTransition on config expand (#34595)

## Summary  Introduced `<ViewTransition>` to the React Compiler Playground. Added an initial animation on the config panel opening/closing to allow for a smoother visual experience. Previously, the panel would flash in and out of the screen upon open/close. ## How did you test this change?  https://github.com/user-attachments/assets/9dc77a6b-d4a5-4a7a-9d81-007ebb55e8d2

Eugene Choi committed Sep 29, 2025 at 14:09 UTC 319a7867d0e19481a60a6ed931a5f97ae6691572

10 files changed +238 -137

compiler/apps/playground/__tests__/e2e/page.spec.ts

+2 -1

@@ -23,7 +23,8 @@ function formatPrint(data: Array<string>): Promise<string> {

24 async function expandConfigs(page: Page): Promise<void> {

25 const expandButton = page.locator('[title="Expand config editor"]');

26 - expandButton.click();

26 + await expandButton.click();

27 + await page.waitForSelector('.monaco-editor-config', {state: 'visible'});

28 }

30 const TEST_SOURCE = `export default function TestComponent({ x }) {

compiler/apps/playground/components/AccordionWindow.tsx

+15 -13

@@ -18,19 +18,21 @@ export default function AccordionWindow(props: {

18 changedPasses: Set<string>;

19 }): React.ReactElement {

20 return (

21 - <div className="flex flex-row h-full">

22 - {Array.from(props.tabs.keys()).map(name => {

23 - return (

24 - <AccordionWindowItem

25 - name={name}

26 - key={name}

27 - tabs={props.tabs}

28 - tabsOpen={props.tabsOpen}

29 - setTabsOpen={props.setTabsOpen}

30 - hasChanged={props.changedPasses.has(name)}

31 - />

32 - );

33 - })}

21 + <div className="flex-1 min-w-[550px] sm:min-w-0">

22 + <div className="flex flex-row h-full">

23 + {Array.from(props.tabs.keys()).map(name => {

24 + return (

25 + <AccordionWindowItem

26 + name={name}

27 + key={name}

28 + tabs={props.tabs}

29 + tabsOpen={props.tabsOpen}

30 + setTabsOpen={props.setTabsOpen}

31 + hasChanged={props.changedPasses.has(name)}

32 + />

33 + );

34 + })}

35 + </div>

36 </div>

37 );

38 }

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

+101 -79

@@ -9,12 +9,19 @@ import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';

9 import {PluginOptions} from 'babel-plugin-react-compiler';

10 import type {editor} from 'monaco-editor';

11 import * as monaco from 'monaco-editor';

12 -import React, {useState, useRef} from 'react';

12 +import React, {

13 + useState,

14 + useRef,

15 + unstable_ViewTransition as ViewTransition,

16 + unstable_addTransitionType as addTransitionType,

17 + startTransition,

18 +} from 'react';

19 import {Resizable} from 're-resizable';

20 import {useStore, useStoreDispatch} from '../StoreContext';

21 import {monacoOptions} from './monacoOptions';

22 import {IconChevron} from '../Icons/IconChevron';

23 import prettyFormat from 'pretty-format';

24 +import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';

26 // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings

27 import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';

@@ -36,7 +43,12 @@ export default function ConfigEditor({

43 display: isExpanded ? 'block' : 'none',

44 }}>

45 <ExpandedEditor

39 - onToggle={setIsExpanded}

46 + onToggle={() => {

47 + startTransition(() => {

48 + addTransitionType(CONFIG_PANEL_TRANSITION);

49 + setIsExpanded(false);

50 + });

51 + }}

52 appliedOptions={appliedOptions}

53 />

54 </div>

@@ -44,7 +56,14 @@ export default function ConfigEditor({

56 style={{

57 display: !isExpanded ? 'block' : 'none',

58 }}>

47 - <CollapsedEditor onToggle={setIsExpanded} />

59 + <CollapsedEditor

60 + onToggle={() => {

61 + startTransition(() => {

62 + addTransitionType(CONFIG_PANEL_TRANSITION);

63 + setIsExpanded(true);

64 + });

65 + }}

66 + />

67 </div>

68 </>

69 );

@@ -54,7 +73,7 @@ function ExpandedEditor({

73 onToggle,

74 appliedOptions,

75 }: {

57 - onToggle: (expanded: boolean) => void;

76 + onToggle: () => void;

77 appliedOptions: PluginOptions | null;

78 }): React.ReactElement {

79 const store = useStore();

@@ -111,90 +130,93 @@ function ExpandedEditor({

130 : 'Invalid configs';

131

132 return (

114 - <Resizable

115 - minWidth={300}

116 - maxWidth={600}

117 - defaultSize={{width: 350}}

118 - enable={{right: true, bottom: false}}>

119 - <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">

120 - <div

121 - className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"

122 - title="Minimize config editor"

123 - onClick={() => onToggle(false)}

124 - style={{

125 - top: '50%',

126 - marginTop: '-32px',

127 - right: '-32px',

128 - borderTopLeftRadius: 0,

129 - borderBottomLeftRadius: 0,

130 - }}>

131 - <IconChevron displayDirection="left" className="text-blue-50" />

132 - </div>

133 -

134 - <div className="flex-1 flex flex-col m-2 mb-2">

135 - <div className="pb-2">

136 - <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">

137 - Config Overrides

138 - </h2>

139 - </div>

140 - <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">

141 - <MonacoEditor

142 - path={'config.ts'}

143 - language={'typescript'}

144 - value={store.config}

145 - onMount={handleMount}

146 - onChange={handleChange}

147 - loading={''}

148 - className="monaco-editor-config"

149 - options={{

150 - ...monacoOptions,

151 - lineNumbers: 'off',

152 - renderLineHighlight: 'none',

153 - overviewRulerBorder: false,

154 - overviewRulerLanes: 0,

155 - fontSize: 12,

156 - scrollBeyondLastLine: false,

157 - glyphMargin: false,

158 - }}

159 - />

133 + <ViewTransition

134 + update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>

135 + <Resizable

136 + minWidth={300}

137 + maxWidth={600}

138 + defaultSize={{width: 350}}

139 + enable={{right: true, bottom: false}}>

140 + <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">

141 + <div

142 + className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"

143 + title="Minimize config editor"

144 + onClick={onToggle}

145 + style={{

146 + top: '50%',

147 + marginTop: '-32px',

148 + right: '-32px',

149 + borderTopLeftRadius: 0,

150 + borderBottomLeftRadius: 0,

151 + }}>

152 + <IconChevron displayDirection="left" className="text-blue-50" />

153 </div>

161 - </div>

162 - <div className="flex-1 flex flex-col m-2">

163 - <div className="pb-2">

164 - <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">

165 - Applied Configs

166 - </h2>

154 +

155 + <div className="flex-1 flex flex-col m-2 mb-2">

156 + <div className="pb-2">

157 + <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">

158 + Config Overrides

159 + </h2>

160 + </div>

161 + <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">

162 + <MonacoEditor

163 + path={'config.ts'}

164 + language={'typescript'}

165 + value={store.config}

166 + onMount={handleMount}

167 + onChange={handleChange}

168 + loading={''}

169 + className="monaco-editor-config"

170 + options={{

171 + ...monacoOptions,

172 + lineNumbers: 'off',

173 + renderLineHighlight: 'none',

174 + overviewRulerBorder: false,

175 + overviewRulerLanes: 0,

176 + fontSize: 12,

177 + scrollBeyondLastLine: false,

178 + glyphMargin: false,

179 + }}

180 + />

181 + </div>

182 </div>

168 - <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">

169 - <MonacoEditor

170 - path={'applied-config.js'}

171 - language={'javascript'}

172 - value={formattedAppliedOptions}

173 - loading={''}

174 - className="monaco-editor-applied-config"

175 - options={{

176 - ...monacoOptions,

177 - lineNumbers: 'off',

178 - renderLineHighlight: 'none',

179 - overviewRulerBorder: false,

180 - overviewRulerLanes: 0,

181 - fontSize: 12,

182 - scrollBeyondLastLine: false,

183 - readOnly: true,

184 - glyphMargin: false,

185 - }}

186 - />

183 + <div className="flex-1 flex flex-col m-2">

184 + <div className="pb-2">

185 + <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">

186 + Applied Configs

187 + </h2>

188 + </div>

189 + <div className="flex-1 rounded-lg overflow-hidden border border-gray-300">

190 + <MonacoEditor

191 + path={'applied-config.js'}

192 + language={'javascript'}

193 + value={formattedAppliedOptions}

194 + loading={''}

195 + className="monaco-editor-applied-config"

196 + options={{

197 + ...monacoOptions,

198 + lineNumbers: 'off',

199 + renderLineHighlight: 'none',

200 + overviewRulerBorder: false,

201 + overviewRulerLanes: 0,

202 + fontSize: 12,

203 + scrollBeyondLastLine: false,

204 + readOnly: true,

205 + glyphMargin: false,

206 + }}

207 + />

208 + </div>

209 </div>

210 </div>

189 - </div>

190 - </Resizable>

211 + </Resizable>

212 + </ViewTransition>

213 );

214 }

215

216 function CollapsedEditor({

217 onToggle,

218 }: {

197 - onToggle: (expanded: boolean) => void;

219 + onToggle: () => void;

220 }): React.ReactElement {

221 return (

222 <div

@@ -203,7 +225,7 @@ function CollapsedEditor({

225 <div

226 className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"

227 title="Expand config editor"

206 - onClick={() => onToggle(true)}

228 + onClick={onToggle}

229 style={{

230 top: '50%',

231 marginTop: '-32px',

compiler/apps/playground/components/Editor/EditorImpl.tsx

+2 -6

@@ -343,12 +343,8 @@ export default function Editor(): JSX.Element {

343 <ConfigEditor appliedOptions={appliedOptions} />

344 </div>

345 <div className="flex flex-1 min-w-0">

346 - <div className="flex-1 min-w-[550px] sm:min-w-0">

347 - <Input language={language} errors={errors} />

348 - </div>

349 - <div className="flex-1 min-w-[550px] sm:min-w-0">

350 - <Output store={deferredStore} compilerOutput={mergedOutput} />

351 - </div>

346 + <Input language={language} errors={errors} />

347 + <Output store={deferredStore} compilerOutput={mergedOutput} />

348 </div>

349 </div>

350 </>

compiler/apps/playground/components/Editor/Input.tsx

+15 -5

@@ -13,11 +13,17 @@ import {

13 import invariant from 'invariant';

14 import type {editor} from 'monaco-editor';

15 import * as monaco from 'monaco-editor';

16 -import {useEffect, useState} from 'react';

16 +import {

17 + useEffect,

18 + useState,

19 + unstable_ViewTransition as ViewTransition,

20 +} from 'react';

21 import {renderReactCompilerMarkers} from '../../lib/reactCompilerMonacoDiagnostics';

22 import {useStore, useStoreDispatch} from '../StoreContext';

23 import TabbedWindow from '../TabbedWindow';

24 import {monacoOptions} from './monacoOptions';

25 +import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';

26 +

27 // @ts-expect-error TODO: Make TS recognize .d.ts files, in addition to loading them with webpack.

28 import React$Types from '../../node_modules/@types/react/index.d.ts';

@@ -155,9 +161,13 @@ export default function Input({errors, language}: Props): JSX.Element {

161 const [activeTab, setActiveTab] = useState('Input');

162

163 return (

158 - <div className="relative flex flex-col flex-none border-r border-gray-200">

159 - <div className="!h-[calc(100vh_-_3.5rem)]">

160 - <div className="flex flex-col h-full">

164 + <ViewTransition

165 + update={{

166 + [CONFIG_PANEL_TRANSITION]: 'container',

167 + default: 'none',

168 + }}>

169 + <div className="flex-1 min-w-[550px] sm:min-w-0">

170 + <div className="flex flex-col h-full !h-[calc(100vh_-_3.5rem)] border-r border-gray-200">

171 <TabbedWindow

172 tabs={tabs}

173 activeTab={activeTab}

@@ -165,6 +175,6 @@ export default function Input({errors, language}: Props): JSX.Element {

175 />

176 </div>

177 </div>

168 - </div>

178 + </ViewTransition>

179 );

180 }

compiler/apps/playground/components/Editor/Output.tsx

+33 -13

@@ -20,11 +20,19 @@ import parserBabel from 'prettier/plugins/babel';

20 import * as prettierPluginEstree from 'prettier/plugins/estree';

21 import * as prettier from 'prettier/standalone';

22 import {type Store} from '../../lib/stores';

23 -import {memo, ReactNode, use, useState, Suspense} from 'react';

23 +import {

24 + memo,

25 + ReactNode,

26 + use,

27 + useState,

28 + Suspense,

29 + unstable_ViewTransition as ViewTransition,

30 +} from 'react';

31 import AccordionWindow from '../AccordionWindow';

32 import TabbedWindow from '../TabbedWindow';

33 import {monacoOptions} from './monacoOptions';

34 import {BabelFileResult} from '@babel/core';

35 +import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';

36 import {LRUCache} from 'lru-cache';

38 const MemoizedOutput = memo(Output);

@@ -280,22 +288,34 @@ function OutputContent({store, compilerOutput}: Props): JSX.Element {

288

289 if (!store.showInternals) {

290 return (

283 - <TabbedWindow

284 - tabs={tabs}

285 - activeTab={activeTab}

286 - onTabChange={setActiveTab}

287 - />

291 + <ViewTransition

292 + update={{

293 + [CONFIG_PANEL_TRANSITION]: 'container',

294 + default: 'none',

295 + }}>

296 + <TabbedWindow

297 + tabs={tabs}

298 + activeTab={activeTab}

299 + onTabChange={setActiveTab}

300 + />

301 + </ViewTransition>

302 );

303 }

304

305 return (

292 - <AccordionWindow

293 - defaultTab={store.showInternals ? 'HIR' : 'Output'}

294 - setTabsOpen={setTabsOpen}

295 - tabsOpen={tabsOpen}

296 - tabs={tabs}

297 - changedPasses={changedPasses}

298 - />

306 + <ViewTransition

307 + update={{

308 + [CONFIG_PANEL_TRANSITION]: 'accordion-container',

309 + default: 'none',

310 + }}>

311 + <AccordionWindow

312 + defaultTab={store.showInternals ? 'HIR' : 'Output'}

313 + setTabsOpen={setTabsOpen}

314 + tabsOpen={tabsOpen}

315 + tabs={tabs}

316 + changedPasses={changedPasses}

317 + />

318 + </ViewTransition>

319 );

320 }

321

compiler/apps/playground/components/TabbedWindow.tsx

+22 -20

@@ -17,26 +17,28 @@ export default function TabbedWindow({

17 onTabChange: (tab: string) => void;

18 }): React.ReactElement {

19 return (

20 - <div className="flex flex-col h-full max-w-full">

21 - <div className="flex p-2 flex-shrink-0">

22 - {Array.from(tabs.keys()).map(tab => {

23 - const isActive = activeTab === tab;

24 - return (

25 - <button

26 - key={tab}

27 - onClick={() => onTabChange(tab)}

28 - className={clsx(

29 - 'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',

30 - !isActive && 'hover:bg-primary/5',

31 - isActive && 'bg-highlight text-link',

32 - )}>

33 - {tab}

34 - </button>

35 - );

36 - })}

37 - </div>

38 - <div className="flex-1 overflow-hidden w-full h-full">

39 - {tabs.get(activeTab)}

20 + <div className="flex-1 min-w-[550px] sm:min-w-0">

21 + <div className="flex flex-col h-full max-w-full">

22 + <div className="flex p-2 flex-shrink-0">

23 + {Array.from(tabs.keys()).map(tab => {

24 + const isActive = activeTab === tab;

25 + return (

26 + <button

27 + key={tab}

28 + onClick={() => onTabChange(tab)}

29 + className={clsx(

30 + 'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',

31 + !isActive && 'hover:bg-primary/5',

32 + isActive && 'bg-highlight text-link',

33 + )}>

34 + {tab}

35 + </button>

36 + );

37 + })}

38 + </div>

39 + <div className="flex-1 overflow-hidden w-full h-full">

40 + {tabs.get(activeTab)}

41 + </div>

42 </div>

43 </div>

44 );

compiler/apps/playground/lib/transitionTypes.ts new

@@ -0,0 +1,8 @@

1 +/**

2 + * Copyright (c) Meta Platforms, Inc. and affiliates.

3 + *

4 + * This source code is licensed under the MIT license found in the

5 + * LICENSE file in the root directory of this source tree.

6 + */

7 +

8 +export const CONFIG_PANEL_TRANSITION = 'config-panel';

compiler/apps/playground/next.config.js

@@ -11,6 +11,7 @@ const path = require('path');

11 const nextConfig = {

12 experimental: {

13 reactCompiler: true,

14 + viewTransition: true,

15 },

16 reactStrictMode: true,

17 webpack: (config, options) => {

compiler/apps/playground/styles/globals.css

+39

@@ -69,3 +69,42 @@

69 scrollbar-width: none; /* Firefox */

70 }

71 }

72 +

73 +::view-transition-old(.slide-in) {

74 + animation-name: slideOutLeft;

75 +}

76 +::view-transition-new(.slide-in) {

77 + animation-name: slideInLeft;

78 +}

79 +::view-transition-group(.slide-in) {

80 + z-index: 1;

81 +}

82 +

83 +@keyframes slideOutLeft {

84 + from {

85 + transform: translateX(0);

86 + }

87 + to {

88 + transform: translateX(-100%);

89 + }

90 +}

91 +@keyframes slideInLeft {

92 + from {

93 + transform: translateX(-100%);

94 + }

95 + to {

96 + transform: translateX(0);

97 + }

98 +}

99 +

100 +::view-transition-old(.container),

101 +::view-transition-new(.container) {

102 + height: 100%;

103 +}

104 +

105 +::view-transition-old(.accordion-container),

106 +::view-transition-new(.accordion-container) {

107 + height: 100%;

108 + object-fit: none;

109 + object-position: left;

110 +}