Skip to content

[playground] Config panel quality fixes #34611

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Oct 3, 2025
Merged

[playground] Config panel quality fixes #34611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8cae1d6
Fix hover order & applied configs panel remembers old values
EugeneChoi4 Sep 26, 2025
a59512f
consolidate configs
EugeneChoi4 Sep 26, 2025
0dda943
Remove ref on render, refactor code
EugeneChoi4 Sep 30, 2025
c59ef9a
Remove useEffect
EugeneChoi4 Oct 2, 2025
c6337ca
revert store changes
EugeneChoi4 Oct 2, 2025
f67a29e
Merge branch 'main' into config-fix
EugeneChoi4 Oct 3, 2025
818ab7d
lint fix
EugeneChoi4 Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 12 additions & 37 deletions compiler/apps/playground/components/Editor/ConfigEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
*/

import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react';
import {PluginOptions} from 'babel-plugin-react-compiler';
import type {editor} from 'monaco-editor';
import * as monaco from 'monaco-editor';
import React, {
Expand All @@ -18,9 +17,8 @@ import React, {
} from 'react';
import {Resizable} from 're-resizable';
import {useStore, useStoreDispatch} from '../StoreContext';
import {monacoOptions} from './monacoOptions';
import {monacoConfigOptions} from './monacoOptions';
import {IconChevron} from '../Icons/IconChevron';
import prettyFormat from 'pretty-format';
import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes';

// @ts-expect-error - webpack asset/source loader handles .d.ts files as strings
Expand All @@ -29,9 +27,9 @@ import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts';
loader.config({monaco});

export default function ConfigEditor({
appliedOptions,
formattedAppliedConfig,
}: {
appliedOptions: PluginOptions | null;
formattedAppliedConfig: string;
}): React.ReactElement {
const [isExpanded, setIsExpanded] = useState(false);

Expand All @@ -49,7 +47,7 @@ export default function ConfigEditor({
setIsExpanded(false);
});
}}
appliedOptions={appliedOptions}
formattedAppliedConfig={formattedAppliedConfig}
/>
</div>
<div
Expand All @@ -71,10 +69,10 @@ export default function ConfigEditor({

function ExpandedEditor({
onToggle,
appliedOptions,
formattedAppliedConfig,
}: {
onToggle: () => void;
appliedOptions: PluginOptions | null;
onToggle: (expanded: boolean) => void;
formattedAppliedConfig: string;
}): React.ReactElement {
const store = useStore();
const dispatchStore = useStoreDispatch();
Expand Down Expand Up @@ -122,13 +120,6 @@ function ExpandedEditor({
});
};

const formattedAppliedOptions = appliedOptions
? prettyFormat(appliedOptions, {
printFunctionName: false,
printBasicPrototype: false,
})
: 'Invalid configs';

return (
<ViewTransition
update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
Expand Down Expand Up @@ -158,7 +149,7 @@ function ExpandedEditor({
Config Overrides
</h2>
</div>
<div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
<div className="flex-1 border border-gray-300">
<MonacoEditor
path={'config.ts'}
language={'typescript'}
Expand All @@ -167,16 +158,7 @@ function ExpandedEditor({
onChange={handleChange}
loading={''}
className="monaco-editor-config"
options={{
...monacoOptions,
lineNumbers: 'off',
renderLineHighlight: 'none',
overviewRulerBorder: false,
overviewRulerLanes: 0,
fontSize: 12,
scrollBeyondLastLine: false,
glyphMargin: false,
}}
options={monacoConfigOptions}
/>
</div>
</div>
Expand All @@ -186,23 +168,16 @@ function ExpandedEditor({
Applied Configs
</h2>
</div>
<div className="flex-1 rounded-lg overflow-hidden border border-gray-300">
<div className="flex-1 border border-gray-300">
<MonacoEditor
path={'applied-config.js'}
language={'javascript'}
value={formattedAppliedOptions}
value={formattedAppliedConfig}
loading={''}
className="monaco-editor-applied-config"
options={{
...monacoOptions,
lineNumbers: 'off',
renderLineHighlight: 'none',
overviewRulerBorder: false,
overviewRulerLanes: 0,
fontSize: 12,
scrollBeyondLastLine: false,
...monacoConfigOptions,
readOnly: true,
glyphMargin: false,
}}
/>
</div>
Expand Down
Loading
Loading