eslint prettier

examples/counter/app.js

@@ -1,12 +1,17 @@
-import { getInputId, refocus, reset, focusBlurListeners } from '../../src/gui.js';
-import { buildApp, div, p } from '../../src/html.js';
+import {
+  getInputId,
+  refocus,
+  reset,
+  focusBlurListeners,
+} from "../../src/gui.js";
+import { buildApp, div, p } from "../../src/html.js";
 
-import { logger } from '../helpers/logger.js';
+import { logger } from "../helpers/logger.js";
 
-import { counterButtonBuilder } from './components/counter-button.js';
-import { resetButtonBuilder } from './components/reset-button.js';
-import { incrementTextInputBuilder } from './components/increment-text.js';
-import { debugCheckboxBuilder } from './components/debug-checkbox.js';
+import { counterButtonBuilder } from "./components/counter-button.js";
+import { resetButtonBuilder } from "./components/reset-button.js";
+import { incrementTextInputBuilder } from "./components/increment-text.js";
+import { debugCheckboxBuilder } from "./components/debug-checkbox.js";
 
 const appId = "counter-app";
 
@@ -28,15 +33,15 @@ focusBlurListeners({ state, log });
 async function loop() {
   log("loop", state.loopCounter++);
 
-  const app = buildApp({ 
+  const app = buildApp({
     appId,
-    classList: "w-52 mx-auto py-6"
+    classList: "w-52 mx-auto py-6",
   });
 
   const resetFn = () => reset({ app, state, log });
-  
+
   const appContext = { loop, resetFn, getInputIdFn, log };
-  
+
   const counterButton = counterButtonBuilder(appContext);
   const resetButton = resetButtonBuilder(appContext);
   const incrementTextInput = incrementTextInputBuilder(appContext);
@@ -47,27 +52,34 @@ async function loop() {
     if (!isCounterDisabled(state.counterValue)) {
       state.counterValue = state.counterValue + state.incrementValue;
     }
-    
+
     return state.counterValue;
-  }
+  };
 
   const htmlElements = [
     div({
       description: "Container for counter and reset buttons",
-      classList: "flex justify-between items-center mb-4", 
+      classList: "flex justify-between items-center mb-4",
       children: [
-        counterButton(state.counterValue, counterUpdate, isCounterDisabled(state.counterValue)),
-        resetButton(() => {    
+        counterButton(
+          state.counterValue,
+          counterUpdate,
+          isCounterDisabled(state.counterValue),
+        ),
+        resetButton(() => {
           state.counterValue = 0;
 
           return state.counterValue;
-        })
-      ]
+        }),
+      ],
     }),
     div({
       description: "Container for increment number input and its label",
       classList: "flex items-center justify-between mb-4",
-      children: incrementTextInput(state.incrementValue, (newVal) => state.incrementValue = newVal)
+      children: incrementTextInput(
+        state.incrementValue,
+        (newVal) => (state.incrementValue = newVal),
+      ),
     }),
     div({
       description: "Container for debug checkbox and its label",
@@ -76,25 +88,26 @@ async function loop() {
         state.debug = newChecked;
 
         return state.debug;
-      })
+      }),
     }),
     div({
       description: "Container for counter limit warning text",
       classList: "flex items-center mb-4",
-      children: state.counterValue >= 5 
-        ? [
-            state.counterValue === 8 
-              ? p({
-                  classList: "text-blue-500 text-xl",
-                  text: "Congrats, you reached the maximum count possible!"
-                })
-              : p({
-                  classList: "text-red-500 text-xl",
-                  text: "You reached your counter limit. Please reset"
-                })
-          ]
-        : []
-    })
+      children:
+        state.counterValue >= 5
+          ? [
+              state.counterValue === 8
+                ? p({
+                    classList: "text-blue-500 text-xl",
+                    text: "Congrats, you reached the maximum count possible!",
+                  })
+                : p({
+                    classList: "text-red-500 text-xl",
+                    text: "You reached your counter limit. Please reset",
+                  }),
+            ]
+          : [],
+    }),
   ];
 
   htmlElements.forEach((el) => app.appendChild(el));

examples/counter/components/counter-button.js

@@ -1,24 +1,24 @@
-
 export const counterButtonBuilder = ({ loop, resetFn, log, getInputIdFn }) => {
   return (val, updateFn, disabled) => {
     const button = document.createElement("button");
-    
+
     button.id = getInputIdFn();
-    button.classList = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";
+    button.classList =
+      "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded";
     button.disabled = disabled;
 
     button.textContent = val;
-  
+
     button.addEventListener("click", () => {
       const newVal = updateFn();
 
       log("new counter", newVal);
-  
+
       resetFn();
-      
+
       requestAnimationFrame(loop);
     });
-  
+
     return button;
-  }
-}
+  };
+};

examples/counter/components/debug-checkbox.js

@@ -2,28 +2,28 @@ import { labelFor } from "../../../src/html.js";
 
 export const debugCheckboxBuilder = ({ loop, log, resetFn, getInputIdFn }) => {
   return (checked, updateFn) => {
-    const checkbox = document.createElement('input');
+    const checkbox = document.createElement("input");
 
-    checkbox.type = 'checkbox';
+    checkbox.type = "checkbox";
 
     checkbox.id = getInputIdFn();
     checkbox.classList = "h-5 w-5 text-blue-600";
     checkbox.checked = checked;
 
-    checkbox.addEventListener("change", (event) => {  
+    checkbox.addEventListener("change", (event) => {
       const newVal = updateFn(event.target.checked);
 
       log("debug is", newVal);
-      
+
       resetFn();
-      
+
       requestAnimationFrame(loop);
     });
 
-    return labelFor({ 
-      input: checkbox, 
-      classList: "text-sm font-medium text-gray-900 mr-2", 
-      text: "Debug Logs" 
+    return labelFor({
+      input: checkbox,
+      classList: "text-sm font-medium text-gray-900 mr-2",
+      text: "Debug Logs",
     });
-  }
-}
+  };
+};

examples/counter/components/increment-text.js

@@ -1,33 +1,39 @@
 import { labelFor } from "../../../src/html.js";
 
-export const incrementTextInputBuilder = ({ loop, log, resetFn, getInputIdFn }) => {
+export const incrementTextInputBuilder = ({
+  loop,
+  log,
+  resetFn,
+  getInputIdFn,
+}) => {
   return (initVal, updateFn) => {
-    const numberInput = document.createElement('input');
-    
+    const numberInput = document.createElement("input");
+
     numberInput.id = getInputIdFn();
-    numberInput.type = 'number';
-
-    numberInput.min = '1';
-    numberInput.max = '5';
-
-    numberInput.classList = "px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm";
-    numberInput.style = "width: auto;"
+    numberInput.type = "number";
+
+    numberInput.min = "1";
+    numberInput.max = "5";
+
+    numberInput.classList =
+      "px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm";
+    numberInput.style = "width: auto;";
     numberInput.value = initVal;
 
     numberInput.addEventListener("change", (event) => {
       const currentVal = event.target.value;
-      const newVal = updateFn(parseInt(currentVal))
+      const newVal = updateFn(parseInt(currentVal));
 
       log("increment set to", newVal);
-  
-      resetFn();    
+
+      resetFn();
       requestAnimationFrame(loop);
     });
 
-    return labelFor({ 
-      input: numberInput, 
-      classList: "text-sm font-medium text-gray-700 mr-3", 
-      text: "Increment Value" 
+    return labelFor({
+      input: numberInput,
+      classList: "text-sm font-medium text-gray-700 mr-3",
+      text: "Increment Value",
     });
-  }
-}
+  };
+};

examples/counter/components/reset-button.js

@@ -1,22 +1,22 @@
-
 export const resetButtonBuilder = ({ loop, log, resetFn, getInputIdFn }) => {
   return (updateFn) => {
     let button = document.createElement("button");
     button.id = getInputIdFn();
-    button.classList = "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-3 rounded";
+    button.classList =
+      "bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-1 px-3 rounded";
 
     button.textContent = "Reset Counter";
-  
+
     button.addEventListener("click", () => {
       const newVal = updateFn();
-  
+
       log("reset counter to", newVal);
-  
+
       resetFn();
-      
+
       requestAnimationFrame(loop);
     });
-  
+
     return button;
-  }
-}
+  };
+};

examples/helpers/logger.js

@@ -3,5 +3,5 @@ export function logger({ state }) {
     if (state.debug) {
       console.log(...text);
     }
-  }
+  };
 }