feat(playground): Implement playground option #4606

website/src/playground/Playground.tsx

@@ -1,7 +1,7 @@
 import CodeMirror from "./CodeMirror";
 import DiagnosticsPane from "./components/DiagnosticsPane";
 import Resizable from "./components/Resizable";
-import SettingsPane from "./components/SettingsPane";
+import SettingsPanel from "./components/SettingsPanel";
 import Tabs from "./components/Tabs";
 import ControlFlowTab from "./tabs/ControlFlowTab";
 import DiagnosticsConsoleTab from "./tabs/DiagnosticsConsoleTab";
@@ -266,7 +266,7 @@ export default function PlaygroundLoader({
 
 	return (
 		<>
-			<SettingsPane
+			<SettingsPanel
 				onReset={resetPlaygroundState}
 				state={playgroundState}
 				setPlaygroundState={setPlaygroundState}

website/src/playground/PlaygroundLoader.tsx

@@ -334,6 +334,9 @@ function initState(
 			importSortingEnabled:
 				searchParams.get("importSortingEnabled") === "true" ||
 				defaultPlaygroundState.settings.importSortingEnabled,
+			unsafeParameterDecoratorsEnabled:
+				searchParams.get("unsafeParameterDecoratorsEnabled") === "true" ||
+				defaultPlaygroundState.settings.unsafeParameterDecoratorsEnabled,
 		},
 	};
 }

website/src/playground/components/SettingsPane.tsx → website/src/playground/components/SettingsPanel.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 
 const isCollapsedStore = createLocalStorage("settings-collapsed");
 
-export default function SettingsPane(props: SettingsTabProps) {
+export default function SettingsPanel(props: SettingsTabProps) {
 	const [isCollapsed, setIsCollapsed] = useState(isCollapsedStore.getBoolean());
 
 	function collapseToggle() {
@@ -17,7 +17,7 @@ export default function SettingsPane(props: SettingsTabProps) {
 	}, [isCollapsed]);
 
 	return (
-		<div className="settings-pane">
+		<div className="settings-panel">
 			{!isCollapsed && (
 				<div className="fields">
 					<SettingsTab {...props} />

website/src/playground/tabs/SettingsTab.tsx

@@ -46,6 +46,7 @@ export default function SettingsTab({
 			lintRules,
 			enabledLinting,
 			importSortingEnabled,
+			unsafeParameterDecoratorsEnabled,
 		},
 	},
 }: SettingsTabProps) {
@@ -95,6 +96,11 @@ export default function SettingsTab({
 		"importSortingEnabled",
 	);
 
+	const setUnsafeParameterDecoratorsEnabled = createPlaygroundSettingsSetter(
+		setPlaygroundState,
+		"unsafeParameterDecoratorsEnabled",
+	);
+
 	function setCurrentFilename(newFilename: string) {
 		setPlaygroundState((state) => {
 			if (state.currentFile === newFilename) {
@@ -244,7 +250,14 @@ export default function SettingsTab({
 				importSortingEnabled={importSortingEnabled}
 				setImportSorting={setImportSorting}
 			/>
-			<SyntaxSettings filename={currentFile} setFilename={setCurrentFilename} />
+			<SyntaxSettings
+				filename={currentFile}
+				setFilename={setCurrentFilename}
+				unsafeParameterDecoratorsEnabled={unsafeParameterDecoratorsEnabled}
+				setUnsafeParameterDecoratorsEnabled={
+					setUnsafeParameterDecoratorsEnabled
+				}
+			/>
 		</div>
 	);
 }
@@ -426,9 +439,13 @@ function FilenameInput({
 function SyntaxSettings({
 	filename,
 	setFilename,
+	unsafeParameterDecoratorsEnabled,
+	setUnsafeParameterDecoratorsEnabled,
 }: {
 	filename: string;
 	setFilename: (filename: string) => void;
+	unsafeParameterDecoratorsEnabled: boolean;
+	setUnsafeParameterDecoratorsEnabled: (value: boolean) => void;
 }) {
 	const isScript = isScriptFilename(filename);
 
@@ -496,6 +513,21 @@ function SyntaxSettings({
 					/>
 					<label htmlFor="jsx">JSX</label>
 				</div>
+
+				<div className="field-row">
+					<input
+						id="parameter-decorators"
+						name="parameter-decorators"
+						type="checkbox"
+						checked={unsafeParameterDecoratorsEnabled}
+						onChange={(e) =>
+							setUnsafeParameterDecoratorsEnabled(e.target.checked)
+						}
+					/>
+					<label htmlFor="parameter-decorators">
+						Parameter decorators enabled
+					</label>
+				</div>
 			</section>
 		</>
 	);

website/src/playground/types.ts

@@ -108,6 +108,7 @@ export interface PlaygroundSettings {
 	lintRules: LintRules;
 	enabledLinting: boolean;
 	importSortingEnabled: boolean;
+	unsafeParameterDecoratorsEnabled: boolean;
 }
 
 export interface PlaygroundFileState {
@@ -149,6 +150,7 @@ export const defaultPlaygroundState: PlaygroundState = {
 		lintRules: LintRules.Recommended,
 		enabledLinting: true,
 		importSortingEnabled: true,
+		unsafeParameterDecoratorsEnabled: true,
 	},
 };
 

website/src/playground/workers/romeWorker.ts

@@ -72,6 +72,7 @@ self.addEventListener("message", async (e) => {
 				trailingComma,
 				semicolons,
 				importSortingEnabled,
+				unsafeParameterDecoratorsEnabled,
 			} = e.data.settings as PlaygroundSettings;
 
 			configuration = {
@@ -104,6 +105,9 @@ self.addEventListener("message", async (e) => {
 						semicolons:
 							semicolons === Semicolons.Always ? "always" : "asNeeded",
 					},
+					parser: {
+						unsafeParameterDecoratorsEnabled,
+					},
 				},
 			};
 

website/src/styles/playground/_settings.scss

@@ -1,14 +1,14 @@
 @import "../../styles/_variables";
 @import "../../styles/_mixins";
 
-.settings-pane {
+.settings-panel {
   flex-shrink: 0;
   overflow: auto;
   font-size: 14px;
   display: flex;
   border-right: 1px solid var(--playground-border);
   background-color: var(--container-color);
-  
+
   @include dark-mode {
     background-color: rgba(255, 255, 255, 0.2);
   }
@@ -161,15 +161,15 @@
 
     &.disabled {
       opacity: 0.4;
-      
+
       &, * {
         cursor: not-allowed;
       }
     }
   }
 }
 
-.react-tabs__tab-panel .settings-pane {
+.react-tabs__tab-panel .settings-panel {
   width: 100%;
   height: 100%;
   background-color: rgba(255, 255, 255, 0.1) !important;