docs(website): added checkbox to toggle linter in playground
Fixes
MODIFY
website/src/playground/components/SettingsPane.tsx
website/src/playground/components/SettingsPane.tsx
@@ -33,6 +33,7 @@ export default function SettingsPane({
typescript: isTypeScript,
jsx: isJsx,
enabledNurseryRules,
+ enabledLinting,
},
}: Props) {
const setIsTypeScript = createSetter(setPlaygroundState, "typescript");
@@ -51,6 +52,7 @@ export default function SettingsPane({
setPlaygroundState,
"enabledNurseryRules",
);
+ const setEnabledLinting = createSetter(setPlaygroundState, "enabledLinting");
const [isCollapsed, setIsCollapsed] = useState(isCollapsedStore.getBoolean());
@@ -88,6 +90,8 @@ export default function SettingsPane({
<LinterSettings
enabledNurseryRules={enabledNurseryRules}
setEnabledNurseryRules={setEnabledNurseryRules}
+ enabledLinting={enabledLinting}
+ setEnabledLinting={setEnabledLinting}
/>
<SyntaxSettings
sourceType={sourceType}
@@ -284,20 +288,35 @@ function FormatterSettings({
function LinterSettings({
enabledNurseryRules,
setEnabledNurseryRules,
+ enabledLinting,
+ setEnabledLinting,
}: {
enabledNurseryRules: boolean;
setEnabledNurseryRules: (value: boolean) => void;
+ enabledLinting: boolean;
+ setEnabledLinting: (value: boolean) => void;
}) {
return (
<>
<h2>Linter</h2>
<section>
+ <div className="field-row">
+ <input
+ id="linting-enabled"
+ name="linting-enabled"
+ type="checkbox"
+ checked={enabledLinting}
+ onChange={(e) => setEnabledLinting(e.target.checked)}
+ />
+ <label htmlFor="linting-enabled">Linter enabled</label>
+ </div>
<div className="field-row">
<input
id="nursery-rules"
aria-describedby="nursery-rules-description"
name="nursery-rules"
type="checkbox"
+ disabled={!enabledLinting}
checked={enabledNurseryRules}
onChange={(e) => setEnabledNurseryRules(e.target.checked)}
/>

MODIFY
website/src/playground/types.ts
website/src/playground/types.ts
@@ -50,6 +50,7 @@ export interface PlaygroundState {
jsx: boolean;
cursorPosition: number;
enabledNurseryRules: boolean;
+ enabledLinting: boolean;
}
// change `lineWidth` and `indentWidth` to string type, just to fits our `usePlaygroundState` fallback usage
@@ -70,6 +71,7 @@ export const defaultRomeConfig: RomeConfiguration = {
jsx: true,
cursorPosition: 0,
enabledNurseryRules: true,
+ enabledLinting: true,
};
export interface PlaygroundProps {
@@ -92,6 +94,7 @@ export type PlaygroundSettings = Pick<
| "typescript"
| "jsx"
| "enabledNurseryRules"
+ | "enabledLinting"
>;
export type Tree = ReturnType<typeof parser.parse>;

MODIFY
website/src/playground/utils.ts
website/src/playground/utils.ts
@@ -145,6 +145,9 @@ export function usePlaygroundState(
enabledNurseryRules:
searchParams.get("enabledNurseryRules") === "true" ||
defaultRomeConfig.enabledNurseryRules,
+ enabledLinting:
+ searchParams.get("enabledLinting") === "true" ||
+ defaultRomeConfig.enabledLinting,
});
const [playgroundState, setPlaygroundState] = useState(
initState(initialSearchParams),

MODIFY
website/src/playground/workers/romeWorker.ts
website/src/playground/workers/romeWorker.ts
@@ -2,6 +2,7 @@ import init, {
Configuration,
DiagnosticPrinter,
RomePath,
+ RuleCategories,
Workspace,
} from "@rometools/wasm-web";
import {
@@ -83,6 +84,7 @@ self.addEventListener("message", async (e) => {
sourceType,
cursorPosition,
enabledNurseryRules,
+ enabledLinting,
trailingComma,
} = playgroundState;
@@ -95,7 +97,7 @@ self.addEventListener("message", async (e) => {
indentSize: indentWidth,
},
linter: {
- enabled: true,
+ enabled: enabledLinting,
},
javascript: {
formatter: {
@@ -110,7 +112,7 @@ self.addEventListener("message", async (e) => {
};
if (enabledNurseryRules) {
configuration.linter = {
- enabled: true,
+ enabled: enabledLinting,
rules: {
nursery: {
noConstAssign: "error",
@@ -160,9 +162,16 @@ self.addEventListener("message", async (e) => {
path,
});
+ const categories: RuleCategories = [];
+ if (configuration.formatter?.enabled) {
+ categories.push("Syntax");
+ }
+ if (configuration.linter?.enabled) {
+ categories.push("Lint");
+ }
const diagnostics = workspace.pullDiagnostics({
path,
- categories: ["Syntax", "Lint"],
+ categories: categories,
max_diagnostics: Number.MAX_SAFE_INTEGER,
});

docs(website): added checkbox to toggle linter in playground (#3699)

Fixes https://github.com/rome/tools/issues/3010