Apply eslint formatting to playwright tests

.github/workflows/ci.yml

@@ -140,6 +140,9 @@ jobs:
       - name: npm install and test
         run: npm run js:test
 
+      - name: eslint
+        run: cd assets && npx eslint
+
       - uses: actions/upload-artifact@v4
         if: always()
         with:
@@ -202,6 +205,9 @@ jobs:
       - name: Run e2e tests
         run: npm run e2e:test
 
+      - name: eslint
+        run: npx eslint
+
       - uses: actions/upload-artifact@v4
         if: always()
         with:

assets/eslint.config.mjs

@@ -1,23 +1,18 @@
 import jest from "eslint-plugin-jest"
 import globals from "globals"
-import path from "node:path"
-import {fileURLToPath} from "node:url"
 import js from "@eslint/js"
-import {FlatCompat} from "@eslint/eslintrc"
 
-const __filename = fileURLToPath(import.meta.url)
-const __dirname = path.dirname(__filename)
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-  recommendedConfig: js.configs.recommended,
-  allConfig: js.configs.all
-})
+import sharedRules from "../eslint.rules.mjs"
+
+export default [{
+  ...js.configs.recommended,
 
-export default [...compat.extends("eslint:recommended"), {
   plugins: {
     jest,
   },
 
+  ignores: ["coverage/**"],
+
   languageOptions: {
     globals: {
       ...globals.browser,
@@ -30,63 +25,6 @@ export default [...compat.extends("eslint:recommended"), {
   },
 
   rules: {
-    indent: ["error", 2, {
-      SwitchCase: 1,
-    }],
-
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "double"],
-    semi: ["error", "never"],
-
-    "object-curly-spacing": ["error", "never", {
-      objectsInObjects: false,
-      arraysInObjects: false,
-    }],
-
-    "array-bracket-spacing": ["error", "never"],
-
-    "comma-spacing": ["error", {
-      before: false,
-      after: true,
-    }],
-
-    "computed-property-spacing": ["error", "never"],
-
-    "space-before-blocks": ["error", {
-      functions: "never",
-      keywords: "never",
-      classes: "always",
-    }],
-
-    "keyword-spacing": ["error", {
-      overrides: {
-        if: {
-          after: false,
-        },
-
-        for: {
-          after: false,
-        },
-
-        while: {
-          after: false,
-        },
-
-        switch: {
-          after: false,
-        },
-      },
-    }],
-
-    "eol-last": ["error", "always"],
-
-    "no-unused-vars": ["error", {
-      argsIgnorePattern: "^_",
-      varsIgnorePattern: "^_",
-    }],
-
-    "no-useless-escape": "off",
-    "no-cond-assign": "off",
-    "no-case-declarations": "off",
+    ...sharedRules
   },
 }]

assets/js/phoenix_live_view/aria.js

@@ -12,7 +12,7 @@ let ARIA = {
   },
 
   attemptFocus(el, interactiveOnly){
-    if(this.isFocusable(el, interactiveOnly)){ try { el.focus() } catch (e){} }
+    if(this.isFocusable(el, interactiveOnly)){ try { el.focus() } catch {} }
     return !!document.activeElement && document.activeElement.isSameNode(el)
   },
 

assets/js/phoenix_live_view/dom.js

@@ -21,8 +21,6 @@ import {
   THROTTLED,
 } from "./constants"
 
-import JS from "./js"
-
 import {
   logError
 } from "./utils"
@@ -96,10 +94,10 @@ let DOM = {
 
     try {
       url = new URL(href)
-    } catch (e){
+    } catch {
       try {
         url = new URL(href, currentLocation)
-      } catch (e){
+      } catch {
         // bad URL, fallback to let browser try it as external
         return true
       }

assets/js/phoenix_live_view/dom_patch.js

@@ -1,6 +1,5 @@
 import {
   PHX_COMPONENT,
-  PHX_DISABLE_WITH,
   PHX_PRUNE,
   PHX_ROOT_ID,
   PHX_SESSION,

assets/js/phoenix_live_view/js.js

@@ -54,7 +54,7 @@ let JS = {
     })
   },
 
-  exec_dispatch(e, eventType, phxEvent, view, sourceEl, el, {to, event, detail, bubbles}){
+  exec_dispatch(e, eventType, phxEvent, view, sourceEl, el, {event, detail, bubbles}){
     detail = detail || {}
     detail.dispatcher = sourceEl
     DOM.dispatchEvent(el, event, {detail, bubbles})
@@ -101,7 +101,7 @@ let JS = {
     window.requestAnimationFrame(() => focusStack.push(el || sourceEl))
   },
 
-  exec_pop_focus(e, eventType, phxEvent, view, sourceEl, el){
+  exec_pop_focus(_e, _eventType, _phxEvent, _view, _sourceEl, _el){
     window.requestAnimationFrame(() => {
       const el = focusStack.pop()
       if(el){ el.focus() }
@@ -116,7 +116,7 @@ let JS = {
     this.addOrRemoveClasses(el, [], names, transition, time, view, blocking)
   },
 
-  exec_toggle_class(e, eventType, phxEvent, view, sourceEl, el, {to, names, transition, time, blocking}){
+  exec_toggle_class(e, eventType, phxEvent, view, sourceEl, el, {names, transition, time, blocking}){
     this.toggleClasses(el, names, transition, time, view, blocking)
   },
 

assets/js/phoenix_live_view/live_socket.js

@@ -523,7 +523,7 @@ export default class LiveSocket {
     if(!dead){ this.bindNav() }
     this.bindClicks()
     if(!dead){ this.bindForms() }
-    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
+    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, targetEl, phxEvent, _phxTarget) => {
       let matchKey = targetEl.getAttribute(this.binding(PHX_KEY))
       let pressedKey = e.key && e.key.toLowerCase() // chrome clicked autocompletes send a keydown without key
       if(matchKey && matchKey.toLowerCase() !== pressedKey){ return }

assets/js/phoenix_live_view/view.js

@@ -54,7 +54,6 @@ import DOMPatch from "./dom_patch"
 import LiveUploader from "./live_uploader"
 import Rendered from "./rendered"
 import ViewHook from "./view_hook"
-import JS from "./js"
 
 export let prependFormDataKey = (key, prefix) => {
   let isArray = key.endsWith("[]")
@@ -1128,7 +1127,7 @@ export default class View {
       event: phxEvent,
       value: this.extractMeta(el, meta, opts.value),
       cid: this.targetComponentID(el, targetCtx, opts)
-    }).then(({resp, reply}) => onReply && onReply(reply))
+    }).then(({reply}) => onReply && onReply(reply))
   }
 
   pushFileProgress(fileEl, entryRef, progress, onReply = function (){ }){
@@ -1275,7 +1274,7 @@ export default class View {
     } else if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){
       let [ref, els] = refGenerator()
       let proxyRefGen = () => [ref, els, opts]
-      this.uploadFiles(formEl, phxEvent, targetCtx, ref, cid, (uploads) => {
+      this.uploadFiles(formEl, phxEvent, targetCtx, ref, cid, (_uploads) => {
         // if we still having pending preflights it means we have invalid entries
         // and the phx-submit cannot be completed
         if(LiveUploader.inputsAwaitingPreflight(formEl).length > 0){

assets/package.json

@@ -16,7 +16,6 @@
     "@babel/cli": "7.25.6",
     "@babel/core": "7.25.2",
     "@babel/preset-env": "7.25.4",
-    "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.10.0",
     "css.escape": "^1.5.1",
     "eslint": "9.10.0",

eslint.config.mjs

@@ -0,0 +1,16 @@
+import playwright from "eslint-plugin-playwright"
+import js from "@eslint/js"
+
+import sharedRules from "./eslint.rules.mjs"
+
+export default [{
+  ...js.configs.recommended,
+  ...playwright.configs["flat/recommended"],
+  ignores: ["test/e2e/test-results/**"],
+  files: ["*.js", "*.mjs", "test/e2e/**"],
+
+  rules: {
+    ...playwright.configs["flat/recommended"].rules,
+    ...sharedRules
+  },
+}]

eslint.rules.mjs

@@ -0,0 +1,60 @@
+export default {
+  indent: ["error", 2, {
+    SwitchCase: 1,
+  }],
+
+  "linebreak-style": ["error", "unix"],
+  quotes: ["error", "double"],
+  semi: ["error", "never"],
+
+  "object-curly-spacing": ["error", "never", {
+    objectsInObjects: false,
+    arraysInObjects: false,
+  }],
+
+  "array-bracket-spacing": ["error", "never"],
+
+  "comma-spacing": ["error", {
+    before: false,
+    after: true,
+  }],
+
+  "computed-property-spacing": ["error", "never"],
+
+  "space-before-blocks": ["error", {
+    functions: "never",
+    keywords: "never",
+    classes: "always",
+  }],
+
+  "keyword-spacing": ["error", {
+    overrides: {
+      if: {
+        after: false,
+      },
+
+      for: {
+        after: false,
+      },
+
+      while: {
+        after: false,
+      },
+
+      switch: {
+        after: false,
+      },
+    },
+  }],
+
+  "eol-last": ["error", "always"],
+
+  "no-unused-vars": ["error", {
+    argsIgnorePattern: "^_",
+    varsIgnorePattern: "^_",
+  }],
+
+  "no-useless-escape": "off",
+  "no-cond-assign": "off",
+  "no-case-declarations": "off",
+}