Add ESLint, Prettier, and TypeScript checks (#1384)

.github/workflows/playground.yaml

@@ -34,6 +34,9 @@ jobs:
       - name: "Install Node dependencies"
         run: npm ci
         working-directory: playground
+      - name: "Run TypeScript checks"
+        run: npm run check
+        working-directory: playground
       - name: "Build JavaScript bundle"
         run: npm run build
         working-directory: playground

playground/.eslintrc

@@ -0,0 +1,24 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    // Disable some recommended rules that we don't want to enforce.
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

playground/.gitignore

@@ -4,21 +4,127 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
 lerna-debug.log*
+.pnpm-debug.log*
 
-node_modules
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
 dist
-dist-ssr
-*.local
 
-# Editor directories and files
+# Gatsby files
-.vscode/*
+.cache/
-!.vscode/extensions.json
+# Comment in the public line in if your project uses Gatsby and not Next.js
-.idea
+# https://nextjs.org/blog/next-9-1#public-directory-support
-.DS_Store
+# public
-*.suo
+
-*.ntvs*
+# vuepress build output
-*.njsproj
+.vuepress/dist
-*.sln
+
-*.sw?
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

playground/.prettierignore

@@ -0,0 +1 @@
+src/ruff_options.ts

playground/README.md

@@ -0,0 +1,10 @@
+# playground
+
+In-browser playground for Ruff. Available [https://ruff.pages.dev/](https://ruff.pages.dev/).
+
+## Getting started
+
+- To build the WASM module, run `wasm-pack build --target web --out-dir playground/src/pkg` from the
+  root directory.
+- Install TypeScript dependencies with: `npm install`.
+- Start the development server with: `npm run dev`.

playground/package.json

@@ -4,23 +4,34 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "check": "npm run lint && npm run tsc",
+    "dev": "vite",
+    "fmt": "prettier --cache -w .",
+    "lint": "eslint --cache --ext .ts,.tsx src",
     "preview": "vite preview",
-    "push": "wrangler pages publish dist --project-name=ruff"
+    "tsc": "tsc"
   },
   "dependencies": {
     "@monaco-editor/react": "^4.4.6",
     "lz-string": "^1.4.4",
     "monaco-editor": "^0.34.1",
-    "prettier": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
+    "eslint": "^8.30.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.1",
     "typescript": "^4.9.3",
     "vite": "^4.0.0"
   }

playground/src/App.tsx

@@ -3,7 +3,6 @@ import Editor, { useMonaco } from "@monaco-editor/react";
 import { MarkerSeverity } from "monaco-editor/esm/vs/editor/editor.api";
 import { useEffect, useState, useCallback } from "react";
 
-// @ts-ignore
 import init, { Check, check } from "./pkg/ruff.js";
 import { AVAILABLE_OPTIONS } from "./ruff_options";
 import { Config, getDefaultConfig, toRuffConfig } from "./config";
@@ -12,14 +11,14 @@ import { Options } from "./Options";
 const DEFAULT_SOURCE = "print(1 + 2)";
 
 function restoreConfigAndSource(): [Config, string] {
-  let value = lzstring.decompressFromEncodedURIComponent(
+  const value = lzstring.decompressFromEncodedURIComponent(
     window.location.hash.slice(1)
   );
   let config = {};
   let source = DEFAULT_SOURCE;
 
   if (value) {
-    let parts = value.split("$$$");
+    const parts = value.split("$$$");
     config = JSON.parse(parts[0]);
     source = parts[1];
   }
@@ -48,7 +47,7 @@ export default function App() {
 
   useEffect(() => {
     if (source === null && config === null && monaco) {
-      let [config, source] = restoreConfigAndSource();
+      const [config, source] = restoreConfigAndSource();
       setConfig(config);
       setSource(source);
     }
@@ -61,8 +60,8 @@ export default function App() {
   }, [config, source]);
 
   useEffect(() => {
-    let editor = monaco?.editor;
+    const editor = monaco?.editor;
-    let model = editor?.getModels()[0];
+    const model = editor?.getModels()[0];
     if (
       !editor ||
       !model ||
@@ -105,7 +104,7 @@ export default function App() {
 
   const handleOptionChange = useCallback(
     (groupName: string, fieldName: string, value: string) => {
-      let group = Object.assign({}, (config || {})[groupName]);
+      const group = Object.assign({}, (config || {})[groupName]);
       if (value === defaultConfig[groupName][fieldName] || value === "") {
         delete group[fieldName];
       } else {

playground/src/config.ts

@@ -28,9 +28,9 @@ export function toRuffConfig(config: Config): any {
     return value === "None" ? null : JSON.parse(value);
   };
 
-  let result: any = {};
+  const result: any = {};
   Object.keys(config).forEach((group_name) => {
-    let fields = config[group_name];
+    const fields = config[group_name];
     if (!fields || Object.keys(fields).length === 0) {
       return;
     }