Fix lint errors

config/esbuild.js

@@ -1,5 +1,5 @@
-import path from "node:path"
-import { build } from "esbuild"
+import path from 'node:path'
+import { build } from 'esbuild'
 
 /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 export default function (eleventyConfig) {
@@ -23,7 +23,7 @@ export default function (eleventyConfig) {
         format: 'esm',
         minify: true,
         metafile: true,
-        write: false
+        write: false,
       })
 
       let files = []
@@ -43,6 +43,6 @@ export default function (eleventyConfig) {
       return async () => {
         return result.outputFiles[0].text
       }
-    }
+    },
   })
 }

config/lightningcss.js

@@ -1,6 +1,6 @@
-import path from "node:path"
-import browserslist from "browserslist"
-import { bundleAsync, browserslistToTargets } from "lightningcss"
+import path from 'node:path'
+import browserslist from 'browserslist'
+import { bundleAsync, browserslistToTargets } from 'lightningcss'
 
 const targets = browserslistToTargets(browserslist())
 
@@ -28,8 +28,8 @@ export default function (eleventyConfig) {
             const importPath = path.resolve(path.dirname(from), specifier)
             imports.push(importPath)
             return importPath
-          }
-        }
+          },
+        },
       })
 
       // Register imports as dependencies for incremental builds
@@ -38,6 +38,6 @@ export default function (eleventyConfig) {
       return async () => {
         return result.code.toString()
       }
-    }
+    },
   })
 }

config/process-bundle.js

@@ -1,6 +1,6 @@
-import browserslist from "browserslist"
-import { transform as cssTransform, browserslistToTargets } from "lightningcss"
-import { transform as jsTransform } from "esbuild"
+import browserslist from 'browserslist'
+import { transform as cssTransform, browserslistToTargets } from 'lightningcss'
+import { transform as jsTransform } from 'esbuild'
 
 const targets = browserslistToTargets(browserslist())
 

eleventy.config.js

@@ -1,11 +1,11 @@
-import pluginWebc from "@11ty/eleventy-plugin-webc"
-import esbuild from "./config/esbuild.js"
-import lightningcss from "./config/lightningcss.js"
-import processBundle from "./config/process-bundle.js"
+import pluginWebc from '@11ty/eleventy-plugin-webc'
+import esbuild from './config/esbuild.js'
+import lightningcss from './config/lightningcss.js'
+import processBundle from './config/process-bundle.js'
 
 /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 export default function (eleventyConfig) {
-  eleventyConfig.addPassthroughCopy({ 'public': '/' })
+  eleventyConfig.addPassthroughCopy({ public: '/' })
 
   eleventyConfig.addPlugin(esbuild)
   eleventyConfig.addPlugin(lightningcss)
@@ -19,7 +19,7 @@ export default function (eleventyConfig) {
   return {
     dir: {
       input: 'src',
-      output: 'dist'
-    }
+      output: 'dist',
+    },
   }
 }

eslint.config.js

@@ -17,6 +17,7 @@ export default [
       },
     },
     rules: {
+      'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
       '@stylistic/brace-style': ['error', '1tbs'],
     },
   },

src/js/_components/filepicker-toggle.js

@@ -2,12 +2,15 @@ class FilePickerToggle extends HTMLElement {
   set type(val) {
     this.setAttribute('type', val)
   }
+
   get type() {
     return this.getAttribute('type')
   }
+
   set label(val) {
     this.setAttribute('label', val)
   }
+
   get label() {
     return this.getAttribute('label')
   }

src/js/_components/image-card.js

@@ -1,12 +1,14 @@
-import { bytesToSize } from "../_utils.js"
+import { bytesToSize } from '../_utils.js'
 
 export class ImageCard extends HTMLElement {
   set quality(val) {
     this.setAttribute('quality', val)
   }
+
   get quality() {
     return Number(this.getAttribute('quality'))
   }
+
   set valid(val) {
     const isValid = Boolean(val)
     if (isValid) {
@@ -15,9 +17,11 @@ export class ImageCard extends HTMLElement {
       this.setAttribute('aria-invalid', 'true')
     }
   }
+
   get valid() {
     return !this.getAttribute('aria-invalid')
   }
+
   set loading(bool) {
     if (bool) {
       const spinner = document.createElement('div')
@@ -29,14 +33,16 @@ export class ImageCard extends HTMLElement {
       this.dom.thumbnail.replaceChildren(this.data.image)
     }
   }
+
   get loading() {
     return this.querySelector('.spinner')
   }
 
   static get observedAttributes() {
     return ['quality']
   }
-  attributeChangedCallback(name, oldVal, newVal) {
+
+  attributeChangedCallback(name, _oldVal, _newVal) {
     if (!this.dom || !this.data.image) return
     switch (name) {
       case 'quality':
@@ -156,7 +162,6 @@ export class ImageCard extends HTMLElement {
 
       this.data.compressed.url = URL.createObjectURL(this.data.compressed.blob)
       this.dom.sizeCompressed.textContent = bytesToSize(this.data.compressed.blob.size)
-
     } else {
       const offscreenCanvas = new OffscreenCanvas(this.data.image.naturalWidth, this.data.image.naturalHeight)
       const ctx = offscreenCanvas.getContext('2d')
@@ -197,12 +202,12 @@ export class ImageCard extends HTMLElement {
     }
     console.log(options)
 
-    return new Promise((resolve, reject) => {
+    return new Promise((resolve, _reject) => {
       worker.onmessage = (e) => {
         resolve(e.data.data)
         worker.terminate()
       }
-      this.data.file.arrayBuffer().then(buf => {
+      this.data.file.arrayBuffer().then((buf) => {
         worker.postMessage({
           file: new Uint8Array(buf),
           options,

src/js/_utils.js

@@ -13,7 +13,7 @@
  */
 export function bytesToSize(
   bytes,
-  { precision = 1, threshold = 100} = {},
+  { precision = 1, threshold = 100 } = {},
 ) {
   const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
   let l = 0, n = parseInt(bytes, 10) || 0

src/js/main.js

@@ -6,8 +6,8 @@ import { ImageCard } from './_components/image-card.js'
 
 // Import functions
 import JSZip from 'jszip'
-import { saveAs } from "file-saver"
-import { debounce } from "./_utils.js"
+import { saveAs } from 'file-saver'
+import { debounce } from './_utils.js'
 
 // Make imports accessible in global scope
 window.JSZip = JSZip

src/js/worker.js

@@ -2,6 +2,7 @@ importScripts('https://cdn.jsdelivr.net/gh/psych0der/pngquantjs@master/demo/js/p
 
 onmessage = (e) => {
   const { file, options } = e.data
+  // eslint-disable-next-line no-undef
   const result = pngquant(file, options, console.log)
   postMessage(result)
 }