diff --git a/website/playground/PrettierFormat.js b/website/playground/PrettierFormat.js index 742062fc6..b2815a816 100644 --- a/website/playground/PrettierFormat.js +++ b/website/playground/PrettierFormat.js @@ -22,22 +22,29 @@ function setup(props, { slots }) { const render = () => slots.default(state); onMounted(componentDidMount); - watch( - () => [ - props.code, - props.options, - settings.showAst, - settings.showPreprocessedAst, - settings.showDoc, - settings.showComments, - settings.showSecondFormat, - settings.rethrowEmbedErrors, - ], - () => { - format(); - }, - { deep: true }, - ); + watch(() => props.code, format); + watch(() => props.options, format, { deep: true }); + + // Should not trigger format when these changes + const ignoredKeys = new Set(["showSidebar", "showInput"]); + for (const key of Object.keys(settings).filter( + (key) => !ignoredKeys.has(key), + )) { + watch( + () => settings[key], + (newValue, oldValue) => { + // Always triggers format + if (key === "rethrowEmbedErrors" && newValue !== oldValue) { + return format(); + } + // Only if set to true + if (newValue) { + return format(); + } + }, + ); + } + return render; } diff --git a/website/playground/composables/playground-settings.js b/website/playground/composables/playground-settings.js index 211f79b91..8cd6b9c51 100644 --- a/website/playground/composables/playground-settings.js +++ b/website/playground/composables/playground-settings.js @@ -7,12 +7,12 @@ import * as storage from "../storage.js"; const defaultSettings = { showSidebar: window.innerWidth > window.innerHeight, + showInput: true, showAst: false, showPreprocessedAst: false, showDoc: false, showComments: false, showSecondFormat: false, - showInput: true, showOutput: true, rethrowEmbedErrors: false, };