Make it so showInternals is preserved across reset/sessions

Author: EugeneChoi4

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

@@ -19,7 +19,7 @@ import {
 import parserBabel from 'prettier/plugins/babel';
 import * as prettierPluginEstree from 'prettier/plugins/estree';
 import * as prettier from 'prettier/standalone';
-import {memo, ReactNode, useEffect, useMemo, useState} from 'react';
+import {memo, ReactNode, useEffect, useState} from 'react';
 import {type Store} from '../../lib/stores';
 import TabbedWindow from '../TabbedWindow';
 import {monacoOptions} from './monacoOptions';

compiler/apps/playground/components/Header.tsx

@@ -32,7 +32,15 @@ export default function Header(): JSX.Element {
        * such as "Bad URL" will be closed by the outputs calling `closeSnackbar`.
        */
       closeSnackbar();
-      dispatchStore({type: 'setStore', payload: {store: defaultStore}});
+      dispatchStore({
+        type: 'setStore',
+        payload: {
+          store: {
+            ...defaultStore,
+            showInternals: store.showInternals,
+          },
+        },
+      });
     }
   };
 

compiler/apps/playground/lib/stores/store.ts

@@ -32,6 +32,10 @@ export function decodeStore(hash: string): any {
  */
 export function saveStore(store: Store): void {
   const hash = encodeStore(store);
+  localStorage.setItem(
+    'playgroundShowInternals',
+    store.showInternals.toString(),
+  );
   localStorage.setItem('playgroundStore', hash);
   history.replaceState({}, '', `#${hash}`);
 }
@@ -58,20 +62,29 @@ export function initStoreFromUrlOrLocalStorage(): Store {
   const encodedSourceFromLocal = localStorage.getItem('playgroundStore');
   const encodedSource = encodedSourceFromUrl || encodedSourceFromLocal;
 
+  // Prioritize local storage for showInternals field
+  const showInternals =
+    localStorage.getItem('playgroundShowInternals') === 'true';
+
   /**
    * No data in the URL and no data in the localStorage to fallback to.
    * Initialize with the default store.
    */
-  if (!encodedSource) return defaultStore;
+  if (!encodedSource) {
+    return {
+      ...defaultStore,
+      showInternals,
+    };
+  }
 
-  const raw: any = decodeStore(encodedSource);
+  const raw = decodeStore(encodedSource);
 
   invariant(isValidStore(raw), 'Invalid Store');
 
   // Make sure all properties are populated
   return {
     source: raw.source,
     config: 'config' in raw ? raw.config : defaultConfig,
-    showInternals: 'showInternals' in raw ? raw.showInternals : false,
+    showInternals,
   };
 }