Cut lots of fat, and practice good code.

.replit

@@ -0,0 +1,18 @@
+run = "npm run build"
+hidden = [".config", "package-lock.json", "tsconfig.json"]
+modules = ["nodejs-20:v8-20230920-bd784b9"]
+
+[nix]
+channel = "stable-23_11"
+
+[gitHubImport]
+requiredFiles = [".replit", "replit.nix", ".config"]
+
+[deployment]
+run = ["sh", "-c", "npm run build"]
+deploymentTarget = "cloudrun"
+ignorePorts = false
+
+[[ports]]
+localPort = 3000
+externalPort = 80

build.js

@@ -0,0 +1,11 @@
+import * as esbuild from 'esbuild'
+
+import { compiledJsPath, compiledJsContent } from './env.js'
+
+await esbuild.build({
+  entryPoints: [compiledJsPath],
+  minify: true,
+  outfile: './dist/html.min.js',
+})
+
+console.log(`Building complete. Wrote to ${compiledJsPath}`)

dist/html.d.ts

@@ -95,14 +95,20 @@ export default class Html {
      * @returns Html
      */
     un(ev: string, cb: EventListenerOrEventListenerObject): Html;
+    /**
+     * Retrieve the corresponding HTMLElement.
+     * @param element The element to retrieve. Can be an HTMLElement, Html instance, or a string (as query selector).
+     * @returns The corresponding HTMLElement or null if QS and element are not found.
+     */
+    getElement(element: HTMLElement | Html | string): HTMLElement;
     /**
      * Append this element to another element. Uses `appendChild()` on the parent.
      * @param parent Element to append to. HTMLElement, Html, and string (as querySelector) are supported.
      * @returns Html
      */
     appendTo(parent: HTMLElement | Html | string): Html;
     /**
-     * Append this element to another element. Uses `appendChild()` on the parent.
+     * Prepend this element to another element. Uses `prepend()` on the parent.
      * @param parent Element to append to. HTMLElement, Html, and string (as querySelector) are supported.
      * @returns Html
      */

dist/html.js

@@ -6,11 +6,8 @@ export default class Html {
    * @param elm The HTML element to be created or classified from.
    */
   constructor(elm) {
-    if (elm instanceof HTMLElement) {
-      this.elm = elm;
-    } else {
-      this.elm = document.createElement(elm || "div");
-    }
+    if (elm instanceof HTMLElement) this.elm = elm;
+    else this.elm = document.createElement(elm || "div");
   }
   /**
    * Sets the text of the current element.
@@ -52,25 +49,21 @@ export default class Html {
    * @returns a new Html
    */
   qs(query) {
-    if (this.elm.querySelector(query)) {
+    if (this.elm.querySelector(query))
       return Html.from(this.elm.querySelector(query));
-    } else {
-      return null;
-    }
+    else return null;
   }
   /**
    * An easier querySelectorAll method.
    * @param query The string to query
    * @returns a new Html
    */
   qsa(query) {
-    if (this.elm.querySelector(query)) {
+    if (this.elm.querySelector(query))
       return Array.from(this.elm.querySelectorAll(query)).map((e) =>
         Html.from(e),
       );
-    } else {
-      return null;
-    }
+    else return null;
   }
   /**
    * Sets the ID of the element.
@@ -87,9 +80,7 @@ export default class Html {
    * @returns Html
    */
   class(...val) {
-    for (let i = 0; i < val.length; i++) {
-      this.elm.classList.toggle(val[i]);
-    }
+    for (let i = 0; i < val.length; i++) this.elm.classList.toggle(val[i]);
     return this;
   }
   /**
@@ -98,9 +89,7 @@ export default class Html {
    * @returns Html
    */
   classOn(...val) {
-    for (let i = 0; i < val.length; i++) {
-      this.elm.classList.add(val[i]);
-    }
+    for (let i = 0; i < val.length; i++) this.elm.classList.add(val[i]);
     return this;
   }
   /**
@@ -109,9 +98,7 @@ export default class Html {
    * @returns Html
    */
   classOff(...val) {
-    for (let i = 0; i < val.length; i++) {
-      this.elm.classList.remove(val[i]);
-    }
+    for (let i = 0; i < val.length; i++) this.elm.classList.remove(val[i]);
     return this;
   }
   /**
@@ -120,9 +107,8 @@ export default class Html {
    * @returns Html
    */
   style(obj) {
-    for (const key of Object.keys(obj)) {
+    for (const key of Object.keys(obj))
       this.elm.style.setProperty(key, obj[key]);
-    }
     return this;
   }
   /**
@@ -131,10 +117,8 @@ export default class Html {
    * @returns Html
    */
   styleJs(obj) {
-    for (const key of Object.keys(obj)) {
-      //@ts-ignore No other workaround I could find.
-      this.elm.style[key] = obj[key];
-    }
+    // @ts-expect-error
+    for (const key of Object.keys(obj)) this.elm.style[key] = obj[key];
     return this;
   }
   /**
@@ -157,34 +141,36 @@ export default class Html {
     this.elm.removeEventListener(ev, cb);
     return this;
   }
+  /**
+   * Retrieve the corresponding HTMLElement.
+   * @param element The element to retrieve. Can be an HTMLElement, Html instance, or a string (as query selector).
+   * @returns The corresponding HTMLElement or null if QS and element are not found.
+   */
+  getElement(element) {
+    let p = element instanceof Html ? element.elm : element;
+    if (typeof element === "string") p = document.querySelector(element);
+    if (p instanceof HTMLElement) return p;
+    else throw new Error("Invalid element type.");
+  }
   /**
    * Append this element to another element. Uses `appendChild()` on the parent.
    * @param parent Element to append to. HTMLElement, Html, and string (as querySelector) are supported.
    * @returns Html
    */
   appendTo(parent) {
-    if (parent instanceof HTMLElement) {
-      parent.appendChild(this.elm);
-    } else if (parent instanceof Html) {
-      parent.elm.appendChild(this.elm);
-    } else if (typeof parent === "string") {
-      document.querySelector(parent)?.appendChild(this.elm);
-    }
+    let p = this.getElement(parent);
+    if (p instanceof HTMLElement) p.appendChild(this.elm);
+    else throw new Error("Invalid parent element, exausted 3 checks.");
     return this;
   }
   /**
-   * Append this element to another element. Uses `appendChild()` on the parent.
+   * Prepend this element to another element. Uses `prepend()` on the parent.
    * @param parent Element to append to. HTMLElement, Html, and string (as querySelector) are supported.
    * @returns Html
    */
   prependTo(parent) {
-    if (parent instanceof HTMLElement) {
-      parent.prepend(this.elm);
-    } else if (parent instanceof Html) {
-      parent.elm.prepend(this.elm);
-    } else if (typeof parent === "string") {
-      document.querySelector(parent)?.prepend(this.elm);
-    }
+    let p = this.getElement(parent);
+    if (p instanceof HTMLElement) p.prepend(this.elm);
     return this;
   }
   /**
@@ -193,11 +179,9 @@ export default class Html {
    * @returns Html
    */
   append(elem) {
-    if (elem instanceof HTMLElement) {
-      this.elm.appendChild(elem);
-    } else if (elem instanceof Html) {
-      this.elm.appendChild(elem.elm);
-    } else if (typeof elem === "string") {
+    let e = this.getElement(elem);
+    if (e instanceof HTMLElement) this.elm.appendChild(e);
+    else if (typeof elem === "string") {
       const newElem = document.createElement(elem);
       this.elm.appendChild(newElem);
       return new Html(newElem.tagName);
@@ -210,11 +194,9 @@ export default class Html {
    * @returns Html
    */
   prepend(elem) {
-    if (elem instanceof HTMLElement) {
-      this.elm.prepend(elem);
-    } else if (elem instanceof Html) {
-      this.elm.prepend(elem.elm);
-    } else if (typeof elem === "string") {
+    let e = this.getElement(elem);
+    if (e instanceof HTMLElement) this.elm.prepend(e);
+    else if (typeof elem === "string") {
       const newElem = document.createElement(elem);
       this.elm.prepend(newElem);
       return new Html(newElem.tagName);
@@ -227,9 +209,7 @@ export default class Html {
    * @returns Html
    */
   appendMany(...elements) {
-    for (const elem of elements) {
-      this.append(elem);
-    }
+    for (const elem of elements) this.append(elem);
     return this;
   }
   /**
@@ -238,9 +218,7 @@ export default class Html {
    * @returns Html
    */
   prependMany(...elements) {
-    for (const elem of elements) {
-      this.prepend(elem);
-    }
+    for (const elem of elements) this.prepend(elem);
     return this;
   }
   /**
@@ -257,13 +235,10 @@ export default class Html {
    * @returns Html
    */
   attr(obj) {
-    for (let key in obj) {
-      if (obj[key] !== null && obj[key] !== undefined) {
+    for (let key in obj)
+      if (obj[key] !== null && obj[key] !== undefined)
         this.elm.setAttribute(key, obj[key]);
-      } else {
-        this.elm.removeAttribute(key);
-      }
-    }
+      else this.elm.removeAttribute(key);
     return this;
   }
   /**
@@ -272,8 +247,7 @@ export default class Html {
    * @returns Html
    */
   val(str) {
-    var x = this.elm;
-    x.value = str;
+    this.elm.value = str;
     return this;
   }
   /**
@@ -312,38 +286,30 @@ export default class Html {
    * @returns Html
    */
   static from(elm) {
-    if (typeof elm === "string") {
-      const element = Html.qs(elm);
-      if (element === null) return null;
-      else return element;
-    } else {
-      return new Html(elm);
-    }
+    const qs = () => Html.qs(elm);
+    if (typeof elm === "string") return qs();
+    return new Html(elm);
   }
   /**
    * An easier querySelector method.
    * @param query The string to query
    * @returns a new Html
    */
   static qs(query) {
-    if (document.querySelector(query)) {
+    if (document.querySelector(query))
       return Html.from(document.querySelector(query));
-    } else {
-      return null;
-    }
+    return null;
   }
   /**
    * An easier querySelectorAll method.
    * @param query The string to query
    * @returns a new Html
    */
   static qsa(query) {
-    if (document.querySelector(query)) {
+    if (document.querySelector(query))
       return Array.from(document.querySelectorAll(query)).map((e) =>
         Html.from(e),
       );
-    } else {
-      return null;
-    }
+    return null;
   }
 }

env.js

@@ -0,0 +1,7 @@
+import fs from 'fs';
+import path, { dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export const compiledJsPath = path.join(__dirname, "./dist/html.js");
+export const compiledJsContent = fs.readFileSync(compiledJsPath, "utf-8");

format.js

@@ -1,13 +1,9 @@
-import { format } from 'prettier';
 import path from 'node:path';
 import fs from 'node:fs';
-import { dirname } from 'path';
-import { fileURLToPath } from 'url';
-import * as esbuild from 'esbuild'
-const __dirname = dirname(fileURLToPath(import.meta.url));
 
-const compiledJsPath = path.join(__dirname, './dist/html.js');
-const compiledJsContent = fs.readFileSync(compiledJsPath, 'utf-8');
+import { compiledJsPath, compiledJsContent } from './env.js'
+
+import { format } from 'prettier';
 
 const formattedResult = await format(compiledJsContent, {
   parser: 'babel-ts',
@@ -17,10 +13,4 @@ const formattedResult = await format(compiledJsContent, {
 
 fs.writeFileSync(compiledJsPath, formattedResult);
 
-await esbuild.build({
-  entryPoints: ['./dist/html.js'],
-  minify: true,
-  outfile: './dist/html.min.js',
-})
-
-console.log(`Formatting (and building) complete. Wrote to ${compiledJsPath}`)
+console.log(`Formatting complete. Wrote to ${compiledJsPath}`)