diff --git a/config/esbuild.js b/config/esbuild.js index 451985c..4581ce6 100644 --- a/config/esbuild.js +++ b/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 } - } + }, }) } diff --git a/config/lightningcss.js b/config/lightningcss.js index 8f28201..ceb3602 100644 --- a/config/lightningcss.js +++ b/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() } - } + }, }) } diff --git a/config/process-bundle.js b/config/process-bundle.js index 7d903a0..d09c485 100644 --- a/config/process-bundle.js +++ b/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()) diff --git a/eleventy.config.js b/eleventy.config.js index 7b163f2..270738f 100644 --- a/eleventy.config.js +++ b/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', + }, } } diff --git a/eslint.config.js b/eslint.config.js index 2552d0b..6b8b112 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -17,6 +17,7 @@ export default [ }, }, rules: { + 'no-unused-vars': ['error', { argsIgnorePattern: '^_' }], '@stylistic/brace-style': ['error', '1tbs'], }, }, diff --git a/src/js/_components/filepicker-toggle.js b/src/js/_components/filepicker-toggle.js index f94f213..7cc2563 100644 --- a/src/js/_components/filepicker-toggle.js +++ b/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') } diff --git a/src/js/_components/image-card.js b/src/js/_components/image-card.js index 4d8a9a7..db3e5a7 100644 --- a/src/js/_components/image-card.js +++ b/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,6 +33,7 @@ export class ImageCard extends HTMLElement { this.dom.thumbnail.replaceChildren(this.data.image) } } + get loading() { return this.querySelector('.spinner') } @@ -36,7 +41,8 @@ export class ImageCard extends HTMLElement { 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, diff --git a/src/js/_utils.js b/src/js/_utils.js index 91bf063..878b9ca 100644 --- a/src/js/_utils.js +++ b/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 diff --git a/src/js/main.js b/src/js/main.js index bf64d7f..acd8b69 100644 --- a/src/js/main.js +++ b/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 diff --git a/src/js/worker.js b/src/js/worker.js index 3de6ccc..a51990b 100644 --- a/src/js/worker.js +++ b/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) }