Merge pull request #368 from Flo0807/format-js-files

Format JS files

Author: Flo0807

.github/workflows/ci.yml

@@ -33,6 +33,16 @@ jobs:
           version-file: .tool-versions
           version-type: strict
 
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+          cache-dependency-path: './assets/package-lock.json'
+          node-version: 20
+
+      - name: Install npm dependencies
+        run: npm ci
+        working-directory: ./assets
+
       - name: Restore the deps and _build cache
         uses: actions/cache@d4323d4df104b026a6aa633fdb11d772146be0bf # v4.2.2
         id: restore-cache
@@ -57,9 +67,13 @@ jobs:
       - name: Compile
         run: mix compile --warnings-as-errors --force
 
-      - name: Check Formatting
+      - name: Check Formatting (Elixir)
         run: mix format --check-formatted
 
+      - name: Check Formatting (JS)
+        run: npm run lint:standard
+        working-directory: ./assets
+
       - name: Gettext
         run: mix gettext.extract --check-up-to-date
 

assets/js/app.js

@@ -16,26 +16,26 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html'
 // Establish Phoenix Socket and LiveView configuration.
-import { Socket } from "phoenix"
-import { LiveSocket } from "phoenix_live_view"
-import topbar from "topbar"
+import { Socket } from 'phoenix'
+import { LiveSocket } from 'phoenix_live_view'
+import topbar from 'topbar'
 import Alpine from 'alpinejs'
 import { themeChange } from 'theme-change'
-import * as Hooks from "./hooks/index"
+import * as Hooks from './hooks/index'
 
 window.Alpine = Alpine
 Alpine.start()
 
 themeChange()
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {
+const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
+const liveSocket = new LiveSocket('/live', Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
   dom: {
-    onBeforeElUpdated(from, to) {
+    onBeforeElUpdated (from, to) {
       if (from._x_dataStack) {
         window.Alpine.clone(from, to)
       }
@@ -45,9 +45,9 @@ let liveSocket = new LiveSocket("/live", Socket, {
 })
 
 // Show progress bar on live navigation and form submits
-topbar.config({ barColors: { 0: "#29d" }, shadowColor: "rgba(0, 0, 0, .3)" })
-window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
-window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
+window.addEventListener('phx:page-loading-start', _info => topbar.show(300))
+window.addEventListener('phx:page-loading-stop', _info => topbar.hide())
 
 // Fix for mobile devices app height
 const appHeight = () => {
@@ -65,4 +65,3 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-

assets/js/hooks/dynamicTextArea.js

@@ -1,26 +1,26 @@
 export default {
-  mounted() {
-    this.resize();
+  mounted () {
+    this.resize()
 
-    this.el.addEventListener('input', this.resize.bind(this));
-    this.el.addEventListener('change', this.resize.bind(this));
+    this.el.addEventListener('input', this.resize.bind(this))
+    this.el.addEventListener('change', this.resize.bind(this))
   },
-  updated() {
-    this.resize();
+  updated () {
+    this.resize()
   },
-  beforeDestroy() {
-    this.el.removeEventListener('input', this.resize.bind(this));
-    this.el.removeEventListener('change', this.resize.bind(this));
+  beforeDestroy () {
+    this.el.removeEventListener('input', this.resize.bind(this))
+    this.el.removeEventListener('change', this.resize.bind(this))
   },
-  resize() {
-    this.el.style.height = '0';
+  resize () {
+    this.el.style.height = '0'
 
     // Add 2px to prevent scrollbar
-    const contentHeight = this.el.scrollHeight + 2;
+    const contentHeight = this.el.scrollHeight + 2
 
-    const minHeight = parseInt(this.el.dataset.minHeight || 40, 10);
-    const finalHeight = Math.max(contentHeight, minHeight);
+    const minHeight = parseInt(this.el.dataset.minHeight || 40, 10)
+    const finalHeight = Math.max(contentHeight, minHeight)
 
-    this.el.style.height = `${finalHeight}px`;
+    this.el.style.height = `${finalHeight}px`
   }
-};
+}

assets/js/hooks/index.js

@@ -1 +1 @@
-export { default as DynamicTextArea } from './dynamicTextArea';
+export { default as DynamicTextArea } from './dynamicTextArea'