Use debounce from a library

CHANGELOG.md

@@ -1,4 +1,7 @@
 ## [Unreleased]
+- Small refactor on autosave.
+- Small refactor on chart.
+- Use debounce from a library.
 
 ## [0.0.69] - 2024-11-27
 - Increase animation duration for autoanimate

lib/generators/css_zero/add/templates/app/javascript/controllers/autosave_controller.js

@@ -24,10 +24,15 @@ export default class extends Controller {
   async #save() {
     this.#updateAppearance(true)
     this.#resetTimer()
-    await submitForm(this.element)
+    await this.#submitForm(this.element)
     this.#updateAppearance()
   }
 
+  async #submitForm(form) {
+    const request = new FetchRequest(form.method, form.action, { body: new FormData(form) })
+    return await request.perform()
+  }
+
   #updateAppearance(saving = false) {
     if (saving) {
       this.element.setAttribute("aria-busy", true)
@@ -52,13 +57,3 @@ export default class extends Controller {
     return !!this.#timer
   }
 }
-
-// Helpers
-
-async function submitForm(form) {
-  const request = new FetchRequest(form.method, form.action, {
-    body: new FormData(form)
-  })
-
-  return await request.perform()
-}

lib/generators/css_zero/add/templates/app/javascript/controllers/chart_controller.js

@@ -10,6 +10,10 @@ Chart.defaults.color = getCssVariableValue("--color-text")
 Chart.defaults.font.family = getCssVariableValue("--font-system-ui")
 Chart.defaults.font.size = 12
 
+function getCssVariableValue(variableName) {
+  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
+}
+
 export default class extends Controller {
   static values = { type: { type: String, default: "line" }, data: Object, options: Object }
 
@@ -24,10 +28,4 @@ export default class extends Controller {
   get #settings() {
     return { type: this.typeValue, data: this.dataValue, options: this.optionsValue }
   }
-}
-
-// Helpers
-
-function getCssVariableValue(variableName) {
-  return getComputedStyle(document.documentElement).getPropertyValue(variableName).trim()
 }

lib/generators/css_zero/add/templates/app/javascript/controllers/copyable_input_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "https://cdn.skypack.dev/[email protected]/function"
 
 export default class extends Controller {
   static targets = [ "input", "copyIcon", "successIcon" ]
@@ -35,14 +36,3 @@ export default class extends Controller {
     this.successIconTarget.hidden = !this.copiedValue
   }
 }
-
-// Helpers
-
-function debounce(fn, delay = 1000) {
-  let timeoutId = null
-
-  return (...args) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => fn.apply(this, args), delay)
-  }
-}

lib/generators/css_zero/add/templates/app/javascript/controllers/filter_controller.js

@@ -1,4 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
+import { debounce } from "https://cdn.skypack.dev/[email protected]/function"
 
 export default class extends Controller {
   static targets = [ "list" ]
@@ -41,14 +42,3 @@ export default class extends Controller {
     this.dispatch("after")
   }
 }
-
-// Helpers
-
-function debounce(fn, delay = 1000) {
-  let timeoutId = null
-
-  return (...args) => {
-    clearTimeout(timeoutId)
-    timeoutId = setTimeout(() => fn.apply(this, args), delay)
-  }
-}