Skip to content

Commit 67a44bc

Browse files
EugeneChoi4EugeneChoi4
authored
Playground applied configs (#34474)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary Added an "Applied Configs" section under the Config Overrides panel. Users will now be able to see the full list of configs applied to the compiler in the playground. Adds greater discoverability for config options to override as well. Updated the default config as well to be a commented config option, so users will start with empty overrides. <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? https://github.com/user-attachments/assets/1a57b2d5-0405-4fc8-9990-1747c30181c0 <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. -->
1 parent 3fa927b commit 67a44bc

File tree

4 files changed

+89
-56
lines changed

4 files changed

+89
-56
lines changed

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

Lines changed: 81 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,41 @@
66
*/
77

88
import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
9+
import {PluginOptions} from 'babel-plugin-react-compiler';
910
import type {editor} from 'monaco-editor';
1011
import * as monaco from 'monaco-editor';
1112
import React, {useState} from 'react';
1213
import {Resizable} from 're-resizable';
1314
import {useStore, useStoreDispatch} from '../StoreContext';
1415
import {monacoOptions} from './monacoOptions';
1516
import {IconChevron} from '../Icons/IconChevron';
17+
import prettyFormat from 'pretty-format';
1618

1719
// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
1820
import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
1921

2022
loader.config({monaco});
2123

22-
export default function ConfigEditor(): React.ReactElement {
24+
export default function ConfigEditor({
25+
appliedOptions,
26+
}: {
27+
appliedOptions: PluginOptions | null;
28+
}): React.ReactElement {
2329
const [isExpanded, setIsExpanded] = useState(false);
2430

25-
return (
26-
<div className="flex flex-row relative">
27-
{isExpanded ? (
28-
<ExpandedEditor onToggle={setIsExpanded} />
29-
) : (
30-
<CollapsedEditor onToggle={setIsExpanded} />
31-
)}
32-
</div>
31+
return isExpanded ? (
32+
<ExpandedEditor onToggle={setIsExpanded} appliedOptions={appliedOptions} />
33+
) : (
34+
<CollapsedEditor onToggle={setIsExpanded} />
3335
);
3436
}
3537

3638
function ExpandedEditor({
3739
onToggle,
40+
appliedOptions,
3841
}: {
3942
onToggle: (expanded: boolean) => void;
43+
appliedOptions: PluginOptions | null;
4044
}): React.ReactElement {
4145
const store = useStore();
4246
const dispatchStore = useStoreDispatch();
@@ -81,22 +85,22 @@ function ExpandedEditor({
8185
}
8286
};
8387

88+
const formattedAppliedOptions = appliedOptions
89+
? prettyFormat(appliedOptions, {
90+
printFunctionName: false,
91+
printBasicPrototype: false,
92+
})
93+
: 'Invalid configs';
94+
8495
return (
8596
<Resizable
86-
className="border-r"
8797
minWidth={300}
8898
maxWidth={600}
89-
defaultSize={{width: 350, height: 'auto'}}
90-
enable={{right: true, bottom: false}}
91-
style={{position: 'relative', height: 'calc(100vh - 3.5rem)'}}>
92-
<div className="bg-gray-700 p-2">
93-
<div className="pb-2">
94-
<h2 className="inline-block text-secondary-dark text-center outline-none py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap text-sm">
95-
Config Overrides
96-
</h2>
97-
</div>
99+
defaultSize={{width: 350}}
100+
enable={{right: true, bottom: false}}>
101+
<div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
98102
<div
99-
className="absolute w-10 h-16 bg-gray-700 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[5] cursor-pointer"
103+
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"
100104
title="Minimize config editor"
101105
onClick={() => onToggle(false)}
102106
style={{
@@ -106,30 +110,60 @@ function ExpandedEditor({
106110
borderTopLeftRadius: 0,
107111
borderBottomLeftRadius: 0,
108112
}}>
109-
<IconChevron
110-
displayDirection="left"
111-
className="text-secondary-dark"
112-
/>
113+
<IconChevron displayDirection="left" className="text-blue-50" />
114+
</div>
115+
116+
<div className="flex-1 flex flex-col m-2 mb-2">
117+
<div className="pb-2">
118+
<h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
119+
Config Overrides
120+
</h2>
121+
</div>
122+
<div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
123+
<MonacoEditor
124+
path={'config.ts'}
125+
language={'typescript'}
126+
value={store.config}
127+
onMount={handleMount}
128+
onChange={handleChange}
129+
options={{
130+
...monacoOptions,
131+
lineNumbers: 'off',
132+
renderLineHighlight: 'none',
133+
overviewRulerBorder: false,
134+
overviewRulerLanes: 0,
135+
fontSize: 12,
136+
scrollBeyondLastLine: false,
137+
glyphMargin: false,
138+
}}
139+
/>
140+
</div>
113141
</div>
114-
<div className="h-[calc(100vh_-_3.5rem_-_3.5rem)] rounded-lg overflow-hidden">
115-
<MonacoEditor
116-
path={'config.ts'}
117-
language={'typescript'}
118-
value={store.config}
119-
onMount={handleMount}
120-
onChange={handleChange}
121-
options={{
122-
...monacoOptions,
123-
lineNumbers: 'off',
124-
folding: false,
125-
renderLineHighlight: 'none',
126-
hideCursorInOverviewRuler: true,
127-
overviewRulerBorder: false,
128-
overviewRulerLanes: 0,
129-
fontSize: 12,
130-
scrollBeyondLastLine: false,
131-
}}
132-
/>
142+
143+
<div className="flex-1 flex flex-col m-2">
144+
<div className="pb-2">
145+
<h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">
146+
Applied Configs
147+
</h2>
148+
</div>
149+
<div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
150+
<MonacoEditor
151+
path={'applied-config.js'}
152+
language={'javascript'}
153+
value={formattedAppliedOptions}
154+
options={{
155+
...monacoOptions,
156+
lineNumbers: 'off',
157+
renderLineHighlight: 'none',
158+
overviewRulerBorder: false,
159+
overviewRulerLanes: 0,
160+
fontSize: 12,
161+
scrollBeyondLastLine: false,
162+
readOnly: true,
163+
glyphMargin: false,
164+
}}
165+
/>
166+
</div>
133167
</div>
134168
</div>
135169
</Resizable>
@@ -143,10 +177,10 @@ function CollapsedEditor({
143177
}): React.ReactElement {
144178
return (
145179
<div
146-
className="w-4"
147-
style={{height: 'calc(100vh - 3.5rem)', position: 'relative'}}>
180+
className="w-4 !h-[calc(100vh_-_3.5rem)]"
181+
style={{position: 'relative'}}>
148182
<div
149-
className="absolute w-10 h-16 bg-gray-700 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[5] cursor-pointer"
183+
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"
150184
title="Expand config editor"
151185
onClick={() => onToggle(true)}
152186
style={{
@@ -156,7 +190,7 @@ function CollapsedEditor({
156190
borderTopLeftRadius: 0,
157191
borderBottomLeftRadius: 0,
158192
}}>
159-
<IconChevron displayDirection="right" className="text-secondary-dark" />
193+
<IconChevron displayDirection="right" className="text-blue-50" />
160194
</div>
161195
</div>
162196
);

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ function compile(
201201
source: string,
202202
mode: 'compiler' | 'linter',
203203
configOverrides: string,
204-
): [CompilerOutput, 'flow' | 'typescript'] {
204+
): [CompilerOutput, 'flow' | 'typescript', PluginOptions | null] {
205205
const results = new Map<string, Array<PrintedCompilerPipelineValue>>();
206206
const error = new CompilerError();
207207
const otherErrors: Array<CompilerErrorDetail | CompilerDiagnostic> = [];
@@ -279,7 +279,7 @@ function compile(
279279
...baseOpts,
280280
logger: {
281281
debugLogIRs: logIR,
282-
logEvent: (_filename: string | null, event: LoggerEvent) => {
282+
logEvent: (_filename: string | null, event: LoggerEvent): void => {
283283
if (event.kind === 'CompileError') {
284284
otherErrors.push(event.detail);
285285
}
@@ -315,11 +315,12 @@ function compile(
315315
otherErrors.forEach(e => error.details.push(e));
316316
}
317317
if (error.hasErrors()) {
318-
return [{kind: 'err', results, error}, language];
318+
return [{kind: 'err', results, error}, language, baseOpts];
319319
}
320320
return [
321321
{kind: 'ok', results, transformOutput, errors: error.details},
322322
language,
323+
baseOpts,
323324
];
324325
}
325326

@@ -328,7 +329,7 @@ export default function Editor(): JSX.Element {
328329
const deferredStore = useDeferredValue(store);
329330
const dispatchStore = useStoreDispatch();
330331
const {enqueueSnackbar} = useSnackbar();
331-
const [compilerOutput, language] = useMemo(
332+
const [compilerOutput, language, appliedOptions] = useMemo(
332333
() => compile(deferredStore.source, 'compiler', deferredStore.config),
333334
[deferredStore.source, deferredStore.config],
334335
);
@@ -379,7 +380,7 @@ export default function Editor(): JSX.Element {
379380
<>
380381
<div className="relative flex top-14">
381382
<div className="flex-shrink-0">
382-
<ConfigEditor />
383+
<ConfigEditor appliedOptions={appliedOptions} />
383384
</div>
384385
<div className="flex flex-1 min-w-0">
385386
<div className="flex-1 min-w-[550px] sm:min-w-0">

‎compiler/apps/playground/components/TabbedWindow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default function TabbedWindow({
3333
key={tab}
3434
onClick={() => onTabChange(tab)}
3535
className={clsx(
36-
'active:scale-95 transition-transform text-center outline-none py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full capitalize whitespace-nowrap text-sm',
36+
'active:scale-95 transition-transform py-1.5 px-1.5 xs:px-3 sm:px-4 rounded-full text-sm',
3737
!isActive && 'hover:bg-primary/5',
3838
isActive && 'bg-highlight text-link',
3939
)}>

‎compiler/apps/playground/lib/defaultStore.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,7 @@ export const defaultConfig = `\
1717
import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
1818
1919
({
20-
environment: {
21-
enableResetCacheOnSourceFileChanges: false
22-
}
20+
//compilationMode: "all"
2321
} satisfies Partial<PluginOptions>);`;
2422

2523
export const defaultStore: Store = {

0 commit comments

Comments
 (0)