feat(playground): enable nursery lint rules
MODIFY
website/playground/package.json
website/playground/package.json
"build:wasm": "wasm-pack build --out-dir ../../npm/wasm-web --target web --release --scope rometools ../../crates/rome_wasm",
"build:wasm-dev": "wasm-pack build --out-dir ../../npm/wasm-web --target web --dev --scope rometools ../../crates/rome_wasm",
"format": "cargo rome-cli-dev format --write ./src",
- "check": "cargo rome-cli-dev check ./src",
+ "check": "cd ../../ && cargo rome-cli-dev check ./website/playground/src",
"tsc": "tsc"
},
"dependencies": {
"@vitejs/plugin-react": "^1.0.7",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.6",
- "rome": "next",
"tailwindcss": "^3.0.19",
"typescript": "^4.8.2",
"vite": "2.9.5",

MODIFY
website/playground/pnpm-lock.yaml
website/playground/pnpm-lock.yaml
@@ -21,7 +21,6 @@ specifiers:
react: ^17.0.2
react-dom: ^17.0.2
react-tabs: ^3.2.3
- rome: next
tailwindcss: ^3.0.19
typescript: ^4.8.2
vite: 2.9.5
@@ -50,7 +49,6 @@ devDependencies:
'@vitejs/plugin-react': 1.1.4
autoprefixer: 10.4.2_postcss@8.4.6
postcss: 8.4.6
- rome: 0.8.0-next.ff4153b
tailwindcss: 3.0.19_qm7bagfnbv4vjkuayu3hle4sne
typescript: 4.8.2
vite: 2.9.5
@@ -492,54 +490,6 @@ packages:
picomatch: 2.3.1
dev: true
- /@rometools/cli-darwin-arm64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-P0BCJyN50Go7U5AG2Ujh8rIwmnaGpOqYqpsmF2J9hRX8zdMiIpYdbmAG6q0B6kibmwYcwS0+JgIdrYn4bl9Hpg==}
- cpu: [arm64]
- os: [darwin]
- requiresBuild: true
- dev: true
- optional: true
-
- /@rometools/cli-darwin-x64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-d9PuyMo4Nc16/YrWaskU+2mygYK1+Vg5GjHJswX51fkUsNlVbNFqDtYLce6m1Oe7UAh0GcsViOvF3jw7fDncbQ==}
- cpu: [x64]
- os: [darwin]
- requiresBuild: true
- dev: true
- optional: true
-
- /@rometools/cli-linux-arm64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-evoUPlk5t6LshpGA9bLB1+42sakKZspyAOJP5P5Fp9HQc9Lvg7c3H5dSosSPSsKK3EVk9ClNVNJq9XMKS5qABQ==}
- cpu: [arm64]
- os: [linux]
- requiresBuild: true
- dev: true
- optional: true
-
- /@rometools/cli-linux-x64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-vjMS1l32GC1YZC0ed9Ryr85IDYWKb4gcLgLaGTiaGEgB8tjlWAvB4h8IdomT8bJYSYjgdZOHuV5lTJ5pI2VfKg==}
- cpu: [x64]
- os: [linux]
- requiresBuild: true
- dev: true
- optional: true
-
- /@rometools/cli-win32-arm64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-W5sUoDXuE7+bK/hNtafctYT+lfxlLacqeGsw7apFczXa8c7H+SrcHneveTwzl0iUxY2R+XY9wUe4aDa+v+zYlw==}
- cpu: [arm64]
- os: [win32]
- requiresBuild: true
- dev: true
- optional: true
-
- /@rometools/cli-win32-x64/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-zpEhtqM5K3WfxDv2/bgyXOU6R33lfwuDbehM7eMsaRgwMIA7vbLenxX7Y/hpgPqhZ2MpodJhFLuK8m9yIQ7Rxw==}
- cpu: [x64]
- os: [win32]
- requiresBuild: true
- dev: true
- optional: true
-
/@svgr/babel-plugin-add-jsx-attribute/6.0.0_@babel+core@7.17.0:
resolution: {integrity: sha512-MdPdhdWLtQsjd29Wa4pABdhWbaRMACdM1h31BY+c6FghTZqNGT7pEYdBoaGeKtdTOBC/XNFQaKVj+r/Ei2ryWA==}
engines: {node: '>=10'}
@@ -1695,20 +1645,6 @@ packages:
fsevents: 2.3.2
dev: true
- /rome/0.8.0-next.ff4153b:
- resolution: {integrity: sha512-Hf1gx01l+6JRRKK4XSThLC7d7f8QuFTU5OyaSnGdCd0M//uBVBKSt5b9v9TWK6fT98ZjKMvmMOcZItHwLVJx7g==}
- engines: {node: '>=14.*'}
- hasBin: true
- requiresBuild: true
- optionalDependencies:
- '@rometools/cli-darwin-arm64': 0.8.0-next.ff4153b
- '@rometools/cli-darwin-x64': 0.8.0-next.ff4153b
- '@rometools/cli-linux-arm64': 0.8.0-next.ff4153b
- '@rometools/cli-linux-x64': 0.8.0-next.ff4153b
- '@rometools/cli-win32-arm64': 0.8.0-next.ff4153b
- '@rometools/cli-win32-x64': 0.8.0-next.ff4153b
- dev: true
-
/run-parallel/1.2.0:
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
dependencies:

ADD
website/playground/src/NurseryRules.tsx
+interface Props {
+ setEnabledNurseryRules: (b: boolean) => void;
+ enabledNurseryRules: boolean;
+}
+
+export default function NurseryRules({
+ setEnabledNurseryRules,
+ enabledNurseryRules,
+}: Props) {
+ return (
+ <div className="pl-5">
+ <fieldset className="flex items-center">
+ <legend className="sr-only">Linter</legend>
+ <div className="relative flex p-5 pt-0 pl-1">
+ <div className="flex items-center h-5">
+ <input
+ id="nursery-rules"
+ aria-describedby="nursery-rules-description"
+ name="nursery-rules"
+ type="checkbox"
+ checked={enabledNurseryRules}
+ onChange={(e) => setEnabledNurseryRules(e.target.checked)}
+ className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded disabled:opacity-30"
+ />
+ </div>
+ <div className="ml-1 text-sm">
+ <label
+ htmlFor="nursery-rules"
+ className="font-medium text-gray-700"
+ >
+ Nursery lint rules
+ </label>
+ <span id="nursery-rules-description" className="text-gray-500">
+ <span className="sr-only">Nursery lint rules</span>
+ </span>
+ </div>
+ </div>
+ </fieldset>
+ </div>
+ );
+}

MODIFY
website/playground/src/SettingsMenu.tsx
website/playground/src/SettingsMenu.tsx
@@ -6,6 +6,7 @@ import { PlaygroundSettings, PlaygroundState } from "./types";
import { Dispatch, SetStateAction } from "react";
import { createSetter } from "./utils";
import QuotePropertiesSelect from "./QuotePropertiesSelect";
+import NurseryRules from "./NurseryRules";
interface Props {
settings: PlaygroundSettings;
@@ -23,6 +24,7 @@ export function SettingsMenu({
sourceType,
isTypeScript,
isJsx,
+ enabledNurseryRules,
},
}: Props) {
return (
@@ -60,6 +62,15 @@ export function SettingsMenu({
setSourceType={createSetter(setPlaygroundState, "sourceType")}
/>
</div>
+ <div className="flex flex-col sm:flex-row">
+ <NurseryRules
+ setEnabledNurseryRules={createSetter(
+ setPlaygroundState,
+ "enabledNurseryRules",
+ )}
+ enabledNurseryRules={enabledNurseryRules}
+ />
+ </div>
</div>
);
}

MODIFY
website/playground/src/romeWorker.ts
website/playground/src/romeWorker.ts
@@ -2,6 +2,7 @@ import init, {
DiagnosticPrinter,
RomePath,
Workspace,
+ Configuration,
} from "@rometools/wasm-web";
import {
SourceType,
@@ -81,10 +82,10 @@ self.addEventListener("message", async (e) => {
isJsx,
sourceType,
cursorPosition,
+ enabledNurseryRules,
} = playgroundState;
- workspace.updateSettings({
- configuration: {
+ const configuration: Configuration = {
formatter: {
enabled: true,
formatWithErrors: true,
@@ -97,15 +98,30 @@ self.addEventListener("message", async (e) => {
},
javascript: {
formatter: {
- quoteStyle:
- quoteStyle === QuoteStyle.Double ? "double" : "single",
+ quoteStyle: quoteStyle === QuoteStyle.Double ? "double" : "single",
quoteProperties:
quoteProperties === QuoteProperties.Preserve
? "preserve"
: "asNeeded",
},
},
+ };
+ if (enabledNurseryRules) {
+ configuration.linter = {
+ enabled: true,
+ rules: {
+ nursery: {
+ noNewSymbol: "error",
+ noDangerouslySetInnerHtml: "error",
+ noUnusedVariables: "error",
+ noUnreachable: "error",
+ useCamelCase: "error",
+ },
},
+ };
+ }
+ workspace.updateSettings({
+ configuration,
});
const path = getPathForType(sourceType, isTypeScript, isJsx);

MODIFY
website/playground/src/types.ts
website/playground/src/types.ts
@@ -43,6 +43,7 @@ export interface PlaygroundState {
isTypeScript: boolean;
isJsx: boolean;
cursorPosition: number;
+ enabledNurseryRules: boolean;
}
// change `lineWidth` and `indentWidth` to string type, just to fits our `usePlaygroundState` fallback usage
@@ -61,6 +62,7 @@ export const defaultRomeConfig: RomeConfiguration = {
isTypeScript: false,
isJsx: false,
cursorPosition: 0,
+ enabledNurseryRules: true,
};
export interface PlaygroundProps {
@@ -80,6 +82,7 @@ export type PlaygroundSettings = Pick<
| "sourceType"
| "isTypeScript"
| "isJsx"
+ | "enabledNurseryRules"
>;
export type Tree = ReturnType<typeof parser.parse>;

MODIFY
website/playground/src/utils.ts
website/playground/src/utils.ts
@@ -78,6 +78,9 @@ export function usePlaygroundState(
(searchParams.get("sourceType") as SourceType) ??
defaultRomeConfig.sourceType,
cursorPosition: 0,
+ enabledNurseryRules:
+ searchParams.get("enabledNurseryRules") === "true" ||
+ defaultRomeConfig.enabledNurseryRules,
});
const [playgroundState, setPlaygroundState] = useState(initState());

feat(playground): enable nursery lint rules (#3242)