[compiler] [playground] Show internals toggle

[EugeneChoi4]

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).

How did you test this change?

Screen.Recording.2025-09-05.at.11.30.37.AM.mov

[EugeneChoi4]

Open to feedback! Right now the state of the toggle switch is in the store (and associated with the URL), should I change it to be associated only with a user's localStorage?

[poteto]

In my opinion, broadly speaking there's 2 categories of users of the playground: 1. Compiler devs, 2. React devs. The former will want to see all the tabs, while the latter may want to see the passes if they're curious but mainly need to look at the output tab and the config panel. So this toggle makes sense to me, but I would maybe default it to showing internals, and when it's off only show the config panel and output tab.

The reason it's useful to show the config panel is because users may have passed some options to the compiler and to provide us a repro we would want their same config. Bonus points if we can make an npx react-compiler dump-config command that automatically formats their config in the format needed for the playground so it can be easily copy pasted.

curious what @josephsavona and @mofeiZ think!

[rickhanlonii]

If we save the setting to local storage, and turn internals off by default, then the compiler devs would be able to enable it once and always have it on which would be nice too

[rickhanlonii]

For the config it would be nice to have a form field editor like other playgrounds: https://babeljs.io/repl

[EugeneChoi4]

The form field editor is a good suggestion! Curious what the guys that work on the compiler a lot think about this; I think it could be worth the dev effort if it'll have good use

[jackpope]

Do we need this memoization? The compiler is enabled for this app

[jackpope]

Also, doing these here means that tabify is still doing the work to render out <TextTabContent/> components for each tab, on every source change. Then we're just ignoring most of them in the case of the filtered view.

Instead, we could skip the tabify work altogether. Maybe something like

for (const [passName, results] of compilerOutput.results) {
  if (store.showInternals === false && (passName !== 'Output' || passName !== 'SourceMap' )) {
    continue;
  }
  // ...
}

[jackpope]

Nice! Thanks for the updates

We can connect with @mofeiZ next week to see if there's any additional feedback about the right default here as @poteto brought up.

But otherwise this seems good to land and we can update the default later if needed.

[mofeiZ]

Super nit: we don't need to preserve showInternals when resetting the playground. I think this feature as more of a "force reset" which should entirely clear client state

[mofeiZ]

Makes sense to me! compiler developers can manually toggle on show internals when using playground for the first time. All later sessions would be able to load this setting from localStorage

[mofeiZ]

Hmm I'm curious -- why does encodeStore(...) not work for also saving showInternals?

[mofeiZ]

Oh I see, is the reasoning that if someone links a playground example (with showInternals = false), we want the localStorage to override this?

Let's keep things simple for now -- I don't mind toggling showInternals back when I load a URL.

The reasoning for this is that we might eventually use showInternals in playground config (e.g. not logging passes unless show internals is enabled). Having URL loading be straightforward is one less thing to think about when debugging

[EugeneChoi4]

Ah ok, I'll revert this then!