Merge pull request #183 from Librecov/chore/clean-frontend

chore: clean frontend

Author: yknx4

.eslintignore

@@ -0,0 +1,5 @@
+priv/**/*
+deps/**/*
+assets/vendor/**/*
+_build/**/*
+code.js

.eslintrc

@@ -1,36 +1,17 @@
-env:
-  node: true
-  es6: true
-  browser: true
-
-parserOptions:
-  sourceType: module
-
-rules:
-  no-debugger: 2
-  no-dupe-args: 2
-  no-dupe-keys: 2
-  no-duplicate-case: 2
-  no-ex-assign: 2
-  no-unreachable: 2
-  valid-typeof: 2
-  no-fallthrough: 2
-  quotes: [2, "single", "avoid-escape"]
-  indent: [2, 2]
-  comma-spacing: 2
-  semi: [2, "never"]
-  space-infix-ops: 2
-  keyword-spacing: 2
-  space-before-function-paren: [2, {named: "never"}]
-  space-before-blocks: [2, "always"]
-  new-parens: 2
-  max-len: [2, 100, 2]
-  no-multiple-empty-lines: [2, {max: 2}]
-  eol-last: 2
-  no-trailing-spaces: 2
-  prefer-const: 2
-  strict: [2, "global"]
-  no-undef: 2
-
-globals:
-  $: true
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "standard-with-typescript",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "ignorePatterns": [
+    "**/.snap",
+    "node_modules"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+} 

.github/workflows/stale-pr.yml

@@ -2,6 +2,45 @@ name: Tests
 on: push
 
 jobs:
+  assets_dependencies:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout Github repo
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        id: node-install
+        with:
+          node-version: lts/*
+          cache: yarn
+      - name: Install dependencies
+        if: steps.node-install.outputs.cache-hit != 'true'
+        run: |
+          yarn install --frozen-lockfile
+
+  linters:
+    needs: assets_dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel previous runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+      - name: Checkout Github repo
+        uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        id: node-install
+        with:
+          node-version: lts/*
+          cache: yarn
+      - name: Install dependencies
+        run: |
+          yarn install --frozen-lockfile
+      - run: yarn eslint .
+
   dependencies:
     runs-on: ubuntu-latest
     env:

.github/workflows/tests.yml

@@ -1,15 +1,18 @@
-const esbuild = require('esbuild')
+/* eslint-disable @typescript-eslint/no-var-requires */
+import type { PluginBuild, Plugin, LogLevel } from 'esbuild'
+
+const esbuild = require('esbuild') as PluginBuild['esbuild']
 const { sassPlugin } = require('esbuild-sass-plugin')
 const path = require('path')
 
 const bundle = true
-const logLevel = process.env.ESBUILD_LOG_LEVEL || 'silent'
-const watch = !!process.env.ESBUILD_WATCH
+const logLevel = (process.env.ESBUILD_LOG_LEVEL ?? 'silent') as LogLevel
+const watch = typeof process.env.ESBUILD_WATCH === 'string'
 
-const plugins = [
+const plugins: Plugin[] = [
   sassPlugin({
     includePaths: [path.resolve(__dirname, 'node_modules')]
-  })
+  }) as unknown as Plugin
 ]
 
 const promise = esbuild.build({
@@ -30,13 +33,18 @@ const promise = esbuild.build({
 })
 
 if (watch) {
-  promise.then((_result) => {
-    process.stdin.on('close', () => {
-      process.exit(0)
-    })
+  promise
+    .then((_result) => {
+      process.stdin.on('close', () => {
+        process.exit(0)
+      })
 
-    process.stdin.resume()
-  })
+      process.stdin.resume()
+    })
+    .catch((e) => {
+      console.error(e)
+      process.exit(1)
+    })
 } else {
   promise.catch((e) => {
     console.error(e)

assets/build.ts

@@ -47,5 +47,9 @@ liveSocket.connect()
 // >> liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
-// @ts-expect-error
+declare global {
+  interface Window {
+    liveSocket: LiveSocket
+  }
+}
 window.liveSocket = liveSocket

assets/js/index.ts

@@ -114,8 +114,7 @@ defmodule Librecov.Mixfile do
       "ecto.setup": ["ecto.create", "ecto.migrate"],
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       "assets.deploy": [
-        "cmd yarn run postcss --ext=css -m --dir=./priv/static/assets ./assets/css",
-        "cmd --cd assets node build.ts",
+        "cmd --cd assets ../node_modules/.bin/ts-node build.ts",
         "phx.digest"
       ],
       sentry_recompile: ["compile", "deps.compile sentry --force"]

mix.exs

@@ -16,28 +16,30 @@
   ],
   "license": "MIT",
   "devDependencies": {
+    "@eslint/eslintrc": "^1.0.4",
     "@types/node": "^16.7.8",
     "@types/phoenix": "^1.5.2",
     "@types/phoenix_live_view": "^0.15.1",
-    "@typescript-eslint/parser": "^4.0.0",
-    "autoprefixer": "^10.3.2",
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
     "cz-conventional-changelog": "3.3.0",
     "esbuild": "^0.14.0",
     "esbuild-sass-plugin": "^1.5.2",
-    "eslint": "^7.0.0",
+    "eslint": "^8.3.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard-with-typescript": "^21.0.1",
+    "eslint-formatter-rdjson": "^1.0.5",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
     "husky": ">=6",
     "less": "^4.1.1",
     "lint-staged": ">=10",
     "popper.js": "^1.16.1",
-    "postcss": "^8.3.6",
-    "postcss-cli": "^8.3.1",
-    "postcss-preset-env": "^6.7.0",
-    "postcss-scss": "^4.0.0",
     "prettier": "^2.3.2",
     "prettier-config-standard": "^4.0.0",
     "sass": "^1.38.1",
-    "standard": "^16.0.3",
-    "ts-standard": "^10.0.0"
+    "ts-node": "^10.4.0"
   },
   "prettier": "prettier-config-standard",
   "dependencies": {
@@ -65,9 +67,9 @@
   },
   "lint-staged": {
     "*.{css,md}": "prettier --write",
-    "*.{js,ts}": [
+    "assets/**/*.{js,ts}": [
       "prettier --write",
-      "ts-standard --fix"
+      "eslint --fix"
     ],
     "*.{ex,exs, eex}": "mix format"
   },

package.json

@@ -4,7 +4,7 @@
     "sourceMap": true,
     "outDir": "./dist/",
     "noImplicitAny": true,
-    "module": "es6",
+    "module": "commonjs",
     "target": "es5",
     "jsx": "react",
     "allowJs": true,