@samitouri / QOS-React / commits / d4374b3ae3

[compiler] [playground] Show internals toggle (#34399)

<!-- 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 a "Show Internals" toggle switch to either show only the Config, Input, Output, and Source Map tabs, or these tabs + all the additional compiler options. The open/close state of these tabs will be preserved (unless on page refresh, which is the same as the currently functionality). <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> ## How did you test this change? <!-- 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. --> https://github.com/user-attachments/assets/8eb0f69e-360c-4e9b-9155-7aa185a0c018

Eugene Choi committed Sep 8, 2025 at 14:21 UTC d4374b3ae37eb972af6fc492de294a06edd6d325
5 files changed +53 -17
compiler/apps/playground/components/Editor/Output.tsx
+7 -3
@@ -64,12 +64,16 @@ type Props = {
64 async function tabify(
65 source: string,
66 compilerOutput: CompilerOutput,
67 + showInternals: boolean,
68 ): Promise<Map<string, ReactNode>> {
69 const tabs = new Map<string, React.ReactNode>();
70 const reorderedTabs = new Map<string, React.ReactNode>();
71 const concattedResults = new Map<string, string>();
72 // Concat all top level function declaration results into a single tab for each pass
73 for (const [passName, results] of compilerOutput.results) {
74 + if (!showInternals && passName !== 'Output' && passName !== 'SourceMap') {
75 + continue;
76 + }
77 for (const result of results) {
78 switch (result.kind) {
79 case 'hir': {
@@ -225,10 +229,10 @@ function Output({store, compilerOutput}: Props): JSX.Element {
229 }
230
231 useEffect(() => {
228 - tabify(store.source, compilerOutput).then(tabs => {
232 + tabify(store.source, compilerOutput, store.showInternals).then(tabs => {
233 setTabs(tabs);
234 });
231 - }, [store.source, compilerOutput]);
235 + }, [store.source, compilerOutput, store.showInternals]);
236
237 const changedPasses: Set<string> = new Set(['Output', 'HIR']); // Initial and final passes should always be bold
238 let lastResult: string = '';
@@ -248,7 +252,7 @@ function Output({store, compilerOutput}: Props): JSX.Element {
252 return (
253 <>
254 <TabbedWindow
251 - defaultTab="HIR"
255 + defaultTab={store.showInternals ? 'HIR' : 'Output'}
256 setTabsOpen={setTabsOpen}
257 tabsOpen={tabsOpen}
258 tabs={tabs}
compiler/apps/playground/components/Header.tsx
+23 -1
@@ -14,10 +14,11 @@ import {useState} from 'react';
14 import {defaultStore} from '../lib/defaultStore';
15 import {IconGitHub} from './Icons/IconGitHub';
16 import Logo from './Logo';
17 -import {useStoreDispatch} from './StoreContext';
17 +import {useStore, useStoreDispatch} from './StoreContext';
18
19 export default function Header(): JSX.Element {
20 const [showCheck, setShowCheck] = useState(false);
21 + const store = useStore();
22 const dispatchStore = useStoreDispatch();
23 const {enqueueSnackbar, closeSnackbar} = useSnackbar();
24
@@ -56,6 +57,27 @@ export default function Header(): JSX.Element {
57 <p className="hidden select-none sm:block">React Compiler Playground</p>
58 </div>
59 <div className="flex items-center text-[15px] gap-4">
60 + <div className="flex items-center gap-2">
61 + <label className="relative inline-block w-[34px] h-5">
62 + <input
63 + type="checkbox"
64 + checked={store.showInternals}
65 + onChange={() => dispatchStore({type: 'toggleInternals'})}
66 + className="absolute opacity-0 cursor-pointer h-full w-full m-0"
67 + />
68 + <span
69 + className={clsx(
70 + 'absolute inset-0 rounded-full cursor-pointer transition-all duration-250',
71 + "before:content-[''] before:absolute before:w-4 before:h-4 before:left-0.5 before:bottom-0.5",
72 + 'before:bg-white before:rounded-full before:transition-transform before:duration-250',
73 + 'focus-within:shadow-[0_0_1px_#2196F3]',
74 + store.showInternals
75 + ? 'bg-blue-500 before:translate-x-3.5'
76 + : 'bg-gray-300',
77 + )}></span>
78 + </label>
79 + <span className="text-secondary">Show Internals</span>
80 + </div>
81 <button
82 title="Reset Playground"
83 aria-label="Reset Playground"
compiler/apps/playground/components/StoreContext.tsx
+11 -1
@@ -56,8 +56,11 @@ type ReducerAction =
56 type: 'updateFile';
57 payload: {
58 source: string;
59 - config?: string;
59 + config: string;
60 };
61 + }
62 + | {
63 + type: 'toggleInternals';
64 };
65
66 function storeReducer(store: Store, action: ReducerAction): Store {
@@ -75,5 +78,12 @@ function storeReducer(store: Store, action: ReducerAction): Store {
78 };
79 return newStore;
80 }
81 + case 'toggleInternals': {
82 + const newStore = {
83 + ...store,
84 + showInternals: !store.showInternals,
85 + };
86 + return newStore;
87 + }
88 }
89 }
compiler/apps/playground/lib/defaultStore.ts
+2
@@ -38,9 +38,11 @@ import type { PluginOptions } from 'babel-plugin-react-compiler/dist';
38 export const defaultStore: Store = {
39 source: index,
40 config: defaultConfig,
41 + showInternals: false,
42 };
43
44 export const emptyStore: Store = {
45 source: '',
46 config: '',
47 + showInternals: false,
48 };
compiler/apps/playground/lib/stores/store.ts
+10 -12
@@ -17,12 +17,13 @@ import {defaultStore, defaultConfig} from '../defaultStore';
17 */
18 export interface Store {
19 source: string;
20 - config?: string;
20 + config: string;
21 + showInternals: boolean;
22 }
23 export function encodeStore(store: Store): string {
24 return compressToEncodedURIComponent(JSON.stringify(store));
25 }
25 -export function decodeStore(hash: string): Store {
26 +export function decodeStore(hash: string): any {
27 return JSON.parse(decompressFromEncodedURIComponent(hash));
28 }
29
@@ -63,17 +64,14 @@ export function initStoreFromUrlOrLocalStorage(): Store {
64 */
65 if (!encodedSource) return defaultStore;
66
66 - const raw = decodeStore(encodedSource);
67 + const raw: any = decodeStore(encodedSource);
68
69 invariant(isValidStore(raw), 'Invalid Store');
70
70 - // Add config property if missing for backwards compatibility
71 - if (!('config' in raw) || !raw['config']) {
72 - return {
73 - ...raw,
74 - config: defaultConfig,
75 - };
76 - }
77 -
78 - return raw;
71 + // Make sure all properties are populated
72 + return {
73 + source: raw.source,
74 + config: 'config' in raw ? raw.config : defaultConfig,
75 + showInternals: 'showInternals' in raw ? raw.showInternals : false,
76 + };
77 }