Refactor playground settings (#18762)

website/playground/Playground.jsx

@@ -1,7 +1,7 @@
 import { reactive, watch } from "vue";
 import { Button, ClipboardButton } from "./buttons.jsx";
 import getCodeSample from "./codeSamples.mjs";
-import { editorState } from "./composables/editor-state.js";
+import { settings, togglers } from "./composables/playground-settings.js";
 import { worker } from "./composables/prettier-worker.js";
 import generateDummyId from "./dummyId.js";
 import formatMarkdown from "./markdown.js";
@@ -253,7 +253,7 @@ function setup(props) {
           return (
             <>
               <div class="editors-container">
-                <Sidebar visible={editorState.showSidebar}>
+                <Sidebar visible={settings.showSidebar}>
                   <SidebarOptions
                     categories={CATEGORIES_ORDER}
                     availableOptions={enabledOptions}
@@ -334,55 +334,55 @@ function setup(props) {
                   <SidebarCategory title="Debug">
                     <Checkbox
                       label="show input"
-                      checked={editorState.showInput}
-                      onChange={editorState.toggleInput}
+                      checked={settings.showInput}
+                      onChange={togglers.showInput}
                     />
                     <Checkbox
                       label="show AST"
-                      checked={editorState.showAst}
-                      onChange={editorState.toggleAst}
+                      checked={settings.showAst}
+                      onChange={togglers.showAst}
                     />
                     {isDocExplorer ? null : (
                       <Checkbox
                         label="show preprocessed AST"
-                        checked={editorState.showPreprocessedAst}
-                        onChange={editorState.togglePreprocessedAst}
+                        checked={settings.showPreprocessedAst}
+                        onChange={togglers.showPreprocessedAst}
                       />
                     )}
                     {isDocExplorer ? null : (
                       <Checkbox
                         label="show doc"
-                        checked={editorState.showDoc}
-                        onChange={editorState.toggleDoc}
+                        checked={settings.showDoc}
+                        onChange={togglers.showDoc}
                       />
                     )}
                     {isDocExplorer ? null : (
                       <Checkbox
                         label="show comments"
-                        checked={editorState.showComments}
-                        onChange={editorState.toggleComments}
+                        checked={settings.showComments}
+                        onChange={togglers.showComments}
                       />
                     )}
                     <Checkbox
                       label="show output"
-                      checked={editorState.showOutput}
-                      onChange={editorState.toggleOutput}
+                      checked={settings.showOutput}
+                      onChange={togglers.showOutput}
                     />
                     {isDocExplorer ? null : (
                       <Checkbox
                         label="show second format"
-                        checked={editorState.showSecondFormat}
-                        onChange={editorState.toggleSecondFormat}
+                        checked={settings.showSecondFormat}
+                        onChange={togglers.showSecondFormat}
                       />
                     )}
                     {isDocExplorer ? null : (
                       <Checkbox
                         label="rethrow embed errors"
-                        checked={editorState.rethrowEmbedErrors}
-                        onChange={editorState.toggleEmbedErrors}
+                        checked={settings.rethrowEmbedErrors}
+                        onChange={togglers.rethrowEmbedErrors}
                       />
                     )}
-                    {editorState.showDoc && !isDocExplorer ? (
+                    {settings.showDoc && !isDocExplorer ? (
                       <ClipboardButton
                         copy={() => getMarkdown({ doc: debug.doc })}
                         disabled={!debug.doc}
@@ -396,7 +396,7 @@ function setup(props) {
                   </div>
                 </Sidebar>
                 <div class="editors">
-                  {editorState.showInput ? (
+                  {settings.showInput ? (
                     <InputPanel
                       name="Input"
                       mode={getCodemirrorMode(options.parser)}
@@ -415,7 +415,7 @@ function setup(props) {
                       foldGutter={options.parser === "doc-explorer"}
                     />
                   ) : null}
-                  {editorState.showAst ? (
+                  {settings.showAst ? (
                     <DebugPanel
                       name="AST"
                       mode="JSON"
@@ -423,7 +423,7 @@ function setup(props) {
                       autoFold={getAstAutoFold(options.parser)}
                     />
                   ) : null}
-                  {editorState.showPreprocessedAst && !isDocExplorer ? (
+                  {settings.showPreprocessedAst && !isDocExplorer ? (
                     <DebugPanel
                       name="Preprocessed AST"
                       mode="JSON"
@@ -431,14 +431,14 @@ function setup(props) {
                       autoFold={getAstAutoFold(options.parser)}
                     />
                   ) : null}
-                  {editorState.showDoc && !isDocExplorer ? (
+                  {settings.showDoc && !isDocExplorer ? (
                     <DebugPanel
                       name="Doc"
                       mode="JavaScript"
                       value={debug.doc || ""}
                     />
                   ) : null}
-                  {editorState.showComments && !isDocExplorer ? (
+                  {settings.showComments && !isDocExplorer ? (
                     <DebugPanel
                       name="Comments"
                       mode="JSON"
@@ -446,7 +446,7 @@ function setup(props) {
                       autoFold={getAstAutoFold(options.parser)}
                     />
                   ) : null}
-                  {editorState.showOutput ? (
+                  {settings.showOutput ? (
                     <OutputPanel
                       name="Output"
                       mode={getCodemirrorMode(options.parser)}
@@ -460,7 +460,7 @@ function setup(props) {
                       }
                     />
                   ) : null}
-                  {editorState.showSecondFormat && !isDocExplorer ? (
+                  {settings.showSecondFormat && !isDocExplorer ? (
                     <OutputPanel
                       name="Output (Second format)"
                       mode={getCodemirrorMode(options.parser)}
@@ -472,8 +472,8 @@ function setup(props) {
               </div>
               <div class="bottom-bar">
                 <div class="bottom-bar-buttons">
-                  <Button onClick={editorState.toggleSidebar}>
-                    {editorState.showSidebar ? "Hide" : "Show"} options
+                  <Button onClick={togglers.showSidebar}>
+                    {settings.showSidebar ? "Hide" : "Show"} options
                   </Button>
                   <Button onClick={clearContent}>Clear</Button>
                   <ClipboardButton

website/playground/PrettierFormat.js

@@ -1,5 +1,5 @@
 import { onMounted, reactive, toRaw, watch } from "vue";
-import { editorState } from "./composables/editor-state.js";
+import { settings } from "./composables/playground-settings.js";
 import { worker } from "./composables/prettier-worker.js";
 
 function setup(props, { slots }) {
@@ -17,7 +17,7 @@ function setup(props, { slots }) {
       showComments: comments,
       showSecondFormat: reformat,
       rethrowEmbedErrors,
-    } = editorState;
+    } = settings;
 
     const result = await worker.format(props.code, toRaw(props.options), {
       ast,
@@ -38,12 +38,12 @@ function setup(props, { slots }) {
     () => [
       props.code,
       props.options,
-      editorState.showAst,
-      editorState.showPreprocessedAst,
-      editorState.showDoc,
-      editorState.showComments,
-      editorState.showSecondFormat,
-      editorState.rethrowEmbedErrors,
+      settings.showAst,
+      settings.showPreprocessedAst,
+      settings.showDoc,
+      settings.showComments,
+      settings.showSecondFormat,
+      settings.rethrowEmbedErrors,
     ],
     () => {
       format();

website/playground/composables/editor-state.js

@@ -1,38 +0,0 @@
-import { reactive, watch } from "vue";
-import * as storage from "../storage.js";
-
-const stateToggler = (property) => () => {
-  state[property] = !state[property];
-};
-
-const state = reactive({
-  showSidebar: window.innerWidth > window.innerHeight,
-  showAst: false,
-  showPreprocessedAst: false,
-  showDoc: false,
-  showComments: false,
-  showSecondFormat: false,
-  showInput: true,
-  showOutput: true,
-  rethrowEmbedErrors: false,
-  toggleSidebar: stateToggler("showSidebar"),
-  toggleAst: stateToggler("showAst"),
-  togglePreprocessedAst: stateToggler("showPreprocessedAst"),
-  toggleDoc: stateToggler("showDoc"),
-  toggleComments: stateToggler("showComments"),
-  toggleSecondFormat: stateToggler("showSecondFormat"),
-  toggleInput: stateToggler("showInput"),
-  toggleOutput: stateToggler("showOutput"),
-  toggleEmbedErrors: stateToggler("rethrowEmbedErrors"),
-  ...storage.get("editor_state"),
-});
-
-watch(
-  () => state,
-  () => {
-    storage.set("editor_state", state);
-  },
-  { deep: true },
-);
-
-export { state as editorState };

website/playground/composables/playground-settings.js

@@ -0,0 +1,45 @@
+import { reactive, watch } from "vue";
+import * as storage from "../storage.js";
+
+/**
+@typedef {typeof defaultSettings} PlaygroundSettings
+*/
+
+const defaultSettings = {
+  showSidebar: window.innerWidth > window.innerHeight,
+  showAst: false,
+  showPreprocessedAst: false,
+  showDoc: false,
+  showComments: false,
+  showSecondFormat: false,
+  showInput: true,
+  showOutput: true,
+  rethrowEmbedErrors: false,
+};
+
+const togglers = Object.fromEntries(
+  Object.keys(defaultSettings).map((property) => [
+    property,
+    () => {
+      settings[property] = !settings[property];
+    },
+  ]),
+);
+
+/** @type {PlaygroundSettings} */
+const initialSettings = {
+  ...defaultSettings,
+  ...storage.get("editor_state"),
+};
+
+const settings = reactive(initialSettings);
+
+watch(
+  () => settings,
+  () => {
+    storage.set("editor_state", settings);
+  },
+  { deep: true },
+);
+
+export { settings, togglers };