ESLint + Prettier (streamlit#55)

* Remove old ESLint setup

* ESLint + Prettier

* Update Makefile

* Run Prettier on Cypress tests

Makefile

@@ -219,14 +219,14 @@ scssvars: react-init
 # Lint the JS code.
 jslint:
 	@# max-warnings 0 means we'll exit with a non-zero status on any lint warning
+	@# HK: I'm removing `max-warnings 0` out, until we convert all our JavaScript files to TypeScript
 	cd frontend; \
 		./node_modules/.bin/eslint \
 			--ext .js \
 			--ext .jsx \
 			--ext .ts \
 			--ext .tsx \
 			--ignore-pattern 'src/autogen/*' \
-			--max-warnings 0 \
 			--format junit \
 			--output-file test-reports/eslint/eslint.xml \
 			./src

frontend/.eslintrc

@@ -0,0 +1,70 @@
+{
+  "env": {
+    // allow using browser-defined globals like `window` and `document`
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    // Uses the recommended rules from @eslint-plugin-react
+    "plugin:react/recommended",
+    // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    "plugin:@typescript-eslint/recommended",
+    // Uses eslint-config-prettier to disable ESLint rules
+    // from @typescript-eslint/eslint-plugin that would conflict with prettier
+    "prettier/@typescript-eslint",
+    // Enables eslint-plugin-prettier and eslint-config-prettier.
+    // This will display prettier errors as ESLint errors.
+    // Make sure this is always the last configuration in the extends array.
+    "plugin:prettier/recommended"
+  ],
+  // Specifies the ESLint parser
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true // Allows for the parsing of JSX
+    },
+    // Allows for the parsing of modern ECMAScript features
+    "ecmaVersion": 2018,
+    // Allows for the use of imports
+    "sourceType": "module"
+  },
+  // Place to specify ESLint rules.
+  // Can be used to overwrite rules specified from the extended configs
+  "rules": {
+    // Use `const` or `let` instead of `var`
+    "no-var": "error",
+    // We don't use PropTypes
+    "react/prop-types": "off",
+    // We don't escape entities
+    "react/no-unescaped-entities": "off",
+    // Some of these are being caught erroneously
+    "@typescript-eslint/camelcase": "off",
+    // Console statements are currently allowed,
+    // but we may want to reconsider this!
+    "@typescript-eslint/no-console": "off",
+    // Empty interfaces are ok
+    "@typescript-eslint/no-empty-interface": "off",
+    // We prefer not using `any`, but don't disallow it
+    "@typescript-eslint/no-explicit-any": "off",
+    // Don't warn about unused function params
+    "@typescript-eslint/no-unused-vars": ["warn", { "args": "none" }],
+    // It's safe to use functions before they're defined
+    "@typescript-eslint/no-use-before-define": [
+      "warn",
+      { "functions": false }
+    ],
+    // Functions must have return types, but we allow
+    // inline function expressions to omit them
+    "@typescript-eslint/explicit-function-return-type": [
+      "warn",
+      { "allowExpressions": true }
+    ]
+  },
+  "settings": {
+    "react": {
+      // Tells eslint-plugin-react to automatically detect
+      // the version of React to use
+      "version": "detect"
+    }
+  }
+}

frontend/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "trailingComma": "es5"
+}

frontend/craco.config.js

@@ -1,9 +1,9 @@
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin')
+const HardSourceWebpackPlugin = require("hard-source-webpack-plugin")
 
 module.exports = {
   webpack: {
-    configure: (webpackConfig, {env, paths}) => {
-      webpackConfig.resolve.mainFields = ['main', 'module']
+    configure: (webpackConfig, { env, paths }) => {
+      webpackConfig.resolve.mainFields = ["main", "module"]
 
       // HardSourceWebpackPlugin adds aggressive build caching
       // to speed up our slow builds.

frontend/cypress/integration/examples/core/add_rows.spec.ts

@@ -17,49 +17,47 @@
 
 /// <reference types="cypress" />
 
-describe('st.add_rows', () => {
+describe("st.add_rows", () => {
   // Doesn't have to run before each, since these tests are stateless.
   before(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
 
     // Rerun the script because we want to test that JS-side coalescing works.
-    cy.get('.stApp .decoration').trigger('keypress', {
-      keyCode: 82,  // "r"
-      which: 82,  // "r"
+    cy.get(".stApp .decoration").trigger("keypress", {
+      keyCode: 82, // "r"
+      which: 82, // "r"
     })
 
     // Wait for 'stale-element' class to go away, so the snapshot looks right.
-    cy.get('.element-container')
-      .should('not.have.class', 'stale-element')
+    cy.get(".element-container").should("not.have.class", "stale-element")
   })
 
-  it('works for all elements that support it', () => {
-    cy.get('.element-container .stTable')
-      .should('have.length', 3)
-    cy.get('.element-container .stDataFrame')
-      .should('have.length', 4)
-    cy.get('.element-container .stChart')
-      .should('have.length', 3)
-    cy.get('.element-container .stVegaLiteChart')
-      .should('have.length', 12)
+  it("works for all elements that support it", () => {
+    cy.get(".element-container .stTable").should("have.length", 3)
+    cy.get(".element-container .stDataFrame").should("have.length", 4)
+    cy.get(".element-container .stChart").should("have.length", 3)
+    cy.get(".element-container .stVegaLiteChart").should("have.length", 12)
   })
 
-  it('raises an exception when the shapes don\'t match', () => {
-    cy.get('.element-container .stException')
-      .should('have.length', 1)
-      .contains('Dataframes have incompatible shapes')
+  it("raises an exception when the shapes don't match", () => {
+    cy.get(".element-container .stException")
+      .should("have.length", 1)
+      .contains("Dataframes have incompatible shapes")
   })
 
-  it('correctly adds rows to tables and dataframes', () => {
-    cy.get('.element-container .stTable tr').should('have.length', 10)
-    cy.get('.element-container .stDataFrame .col-header').should('have.length', 7)
+  it("correctly adds rows to tables and dataframes", () => {
+    cy.get(".element-container .stTable tr").should("have.length", 10)
+    cy.get(".element-container .stDataFrame .col-header").should(
+      "have.length",
+      7
+    )
   })
 
-  it('correctly adds rows to charts', () => {
-    cy.get('.element-container .stChart').each((el, i) => {
+  it("correctly adds rows to charts", () => {
+    cy.get(".element-container .stChart").each((el, i) => {
       cy.get(el).matchImageSnapshot(`stChart-${i}`)
     })
-    cy.get('.element-container .stVegaLiteChart').each((el, i) => {
+    cy.get(".element-container .stVegaLiteChart").each((el, i) => {
       cy.get(el).matchImageSnapshot(`stVegaLiteChart-${i}`)
     })
   })

frontend/cypress/integration/examples/core/altair_chart.spec.ts

@@ -17,14 +17,14 @@
 
 /// <reference types="cypress" />
 
-describe('st.altair_chart', () => {
+describe("st.altair_chart", () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays an altair chart', () => {
-    cy.get('.element-container .stVegaLiteChart')
-      .find('canvas')
-      .should('have.class', 'marks')
+  it("displays an altair chart", () => {
+    cy.get(".element-container .stVegaLiteChart")
+      .find("canvas")
+      .should("have.class", "marks")
   })
 })

frontend/cypress/integration/examples/core/area_chart.spec.ts

@@ -17,14 +17,14 @@
 
 /// <reference types="cypress" />
 
-describe('st.area_chart', () => {
+describe("st.area_chart", () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays an area chart', () => {
-    cy.get('.element-container .stChart')
-      .find('svg')
-      .should('have.attr', 'height', '200')
+  it("displays an area chart", () => {
+    cy.get(".element-container .stChart")
+      .find("svg")
+      .should("have.attr", "height", "200")
   })
 })

frontend/cypress/integration/examples/core/audio.spec.ts

@@ -17,31 +17,28 @@
 
 /// <reference types="cypress" />
 
-describe('st.audio', () => {
+describe("st.audio", () => {
   beforeEach(() => {
     // Increasing timeout since we're requesting an external audio file
-    Cypress.config('defaultCommandTimeout', 10000)
-    cy.visit('http://localhost:3000/')
+    Cypress.config("defaultCommandTimeout", 10000)
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays an audio player', () => {
-    cy.get('.element-container')
-      .find('audio.stAudio')
+  it("displays an audio player", () => {
+    cy.get(".element-container").find("audio.stAudio")
   })
 
-  it('has controls', () => {
-    cy.get('.element-container .stAudio')
-      .should('have.attr', 'controls')
+  it("has controls", () => {
+    cy.get(".element-container .stAudio").should("have.attr", "controls")
   })
 
-  it('has src', () => {
-    cy.get('.element-container .stAudio')
-      .should('have.attr', 'src')
+  it("has src", () => {
+    cy.get(".element-container .stAudio").should("have.attr", "src")
   })
 
-  it('has audio', () => {
-    cy.get('.element-container .stAudio')
-      .should('have.prop', 'tagName')
-      .and('eq', 'AUDIO')
+  it("has audio", () => {
+    cy.get(".element-container .stAudio")
+      .should("have.prop", "tagName")
+      .and("eq", "AUDIO")
   })
 })

frontend/cypress/integration/examples/core/balloons.spec.ts

@@ -17,13 +17,12 @@
 
 /// <reference types="cypress" />
 
-describe('st.balloons', () => {
+describe("st.balloons", () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays balloons', () => {
-    cy.get('.element-container')
-      .find('.balloons')
+  it("displays balloons", () => {
+    cy.get(".element-container").find(".balloons")
   })
 })

frontend/cypress/integration/examples/core/bar_chart.spec.ts

@@ -17,14 +17,14 @@
 
 /// <reference types="cypress" />
 
-describe('st.bar_chart', () => {
+describe("st.bar_chart", () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays a bar chart', () => {
-    cy.get('.element-container .stChart')
-      .find('svg')
-      .should('have.attr', 'height', '200')
+  it("displays a bar chart", () => {
+    cy.get(".element-container .stChart")
+      .find("svg")
+      .should("have.attr", "height", "200")
   })
 })

frontend/cypress/integration/examples/core/bokeh_chart.spec.ts

@@ -17,13 +17,16 @@
 
 /// <reference types="cypress" />
 
-describe('st.bokeh_chart', () => {
+describe("st.bokeh_chart", () => {
   beforeEach(() => {
-    cy.visit('http://localhost:3000/')
+    cy.visit("http://localhost:3000/")
   })
 
-  it('displays a bokeh chart', () => {
-    cy.get('.element-container .stBokehChart')
-      .should('have.css', 'height', '600px')
+  it("displays a bokeh chart", () => {
+    cy.get(".element-container .stBokehChart").should(
+      "have.css",
+      "height",
+      "600px"
+    )
   })
 })