library typescript is fun & easy!!!!

DOM.js

@@ -3,9 +3,7 @@ export function setFormElementValue(element, value) {
     const inputTypes = {
       checkbox: () => (element.checked = !!value),
       radio: () => (element.checked = element.value === value),
-      default: () => {
-        if (typeof value === "string") element.value = value
-      },
+      default: () => (element.value = value),
     }
     const handler = inputTypes[element.type] || inputTypes.default
     return handler()

index.d.ts

@@ -450,7 +450,7 @@ declare module "jessquery" {
         url?: string
         json?: boolean
         event?: Event
-        serializer?: () => void
+        serializer?: (HTMLElement) => FormData
       } & FetchOptions
     ) => DomProxy<T>
 
@@ -467,7 +467,7 @@ declare module "jessquery" {
      * })
      * .css('color', 'blue')
      */
-    do: (fn: (el: DomProxy<T>) => Promise<void>) => DomProxy<T>
+    do: (fn: (el: DomProxy<T>) => Promise<void> | void) => DomProxy<T>
 
     /**
      * Schedules a function for deferred execution on the element. This will push the operation to the very end of the internal event loop.
@@ -517,7 +517,7 @@ declare module "jessquery" {
      *    .wait(500).text("Goodbye, world!") // Text is blue
      * // This is missing the point of JessQuery. Just put each method in sequence.
      */
-    defer: (fn: (element: DomProxy) => void) => DomProxy
+    defer: (fn: (element: DomProxy) => Promise<void> | void) => DomProxy<T>
 
     /**
      * Fetches a JSON resource from the provided URL and applies a transformation function which uses the fetched JSON and the proxy's target element as arguments.
@@ -563,7 +563,7 @@ declare module "jessquery" {
      */
     fromJSON: (
       url: string,
-      transformFunc: (el: DomProxy<T>, json: any) => void,
+      transformFunc: (el: DomProxy<T>, json: any) => Promise<void> | void,
       options?: FetchOptions
     ) => DomProxy<T>
 
@@ -1448,7 +1448,9 @@ declare module "jessquery" {
      *    .wait(500).text("Goodbye, world!") // Text is blue
      * // This is missing the point of JessQuery. Just put each method in sequence.
      */
-    defer: (fn: (el: DomProxyCollection) => void) => DomProxyCollection<T>
+    defer: (
+      fn: (el: DomProxyCollection) => Promise<void> | void
+    ) => DomProxyCollection<T>
 
     /**
      * Fetches a JSON resource from the provided URL, applies a transformation function on it and the proxy's target elements.
@@ -1497,7 +1499,10 @@ declare module "jessquery" {
      */
     fromJSON: (
       url: string,
-      transformFunc: (el: DomProxyCollection<T>, json: any) => void,
+      transformFunc: (
+        el: DomProxyCollection<T>,
+        json: any
+      ) => Promise<void> | void,
       options?: FetchOptions
     ) => DomProxyCollection<T>
 

methods.js

@@ -12,8 +12,9 @@ import {
 } from "./DOM.js"
 
 export function addMethods(selector, target, fixed = false) {
+  const originalTarget = [...target]
+
   let proxy = null
-  let originalTarget = [...target]
 
   const { addToQueue, defer } = createQueue()
   const queueFunction = queueAndReturn(addToQueue, () => proxy)
@@ -54,8 +55,8 @@ export function addMethods(selector, target, fixed = false) {
           ? nextSibling.previousSibling // So, we get the previousSibling from where we were
           : el.parentElement.lastElementChild // Otherwise, we get the lastElementChild from the parent
 
-        target = [newElement]
-        proxy = updateProxy(target)
+        const index = target.indexOf(el)
+        target[index] = newElement
       } else {
         el.innerHTML = newHtml
       }

tests/become3.html

@@ -42,7 +42,9 @@ <h2>Remove Match Test:</h2>
         )
 
         // Cycle Match Test
-        toBeReplacedElsCycle.become(replacementElsCycle, {})
+        toBeReplacedElsCycle.become(replacementElsCycle, {
+          mode: "clone",
+        })
 
         if (
           document.querySelectorAll("#cycle .replacementElement").length === 4

tests/defer2.html

@@ -21,11 +21,11 @@
       //   .wait(2000)
       //   .css({ color: "red" }) // BAD!
 
-      testButton
-        .on("click", () => {
-          testButton.text(`Clicked ${++count} times`)
-        })
-        .defer((el) => el.wait(2000).css({ color: "red" })) // Good!
+      // testButton
+      //   .on("click", () => {
+      //     testButton.text(`Clicked ${++count} times`)
+      //   })
+      //   .defer((el) => el.wait(2000).css({ color: "red" })) // Good!
 
       // testButton
       //   .on("click", () => {

tests/do.html

@@ -29,20 +29,14 @@
       const button = $("button")
       const display = $(".display")
 
-      const first = $(".test")
       // button.on("click", () => {
       //   display
       //     .do(async (el) => {
       //       el.text("Loading...")
 
       //       await new Promise((resolve) => setTimeout(resolve, 2000))
 
-      //       const response = await fetch(
-      //         "https://api.github.com/users/jazzypants1989"
-      //       )
-      //       const data = await response.json()
-
-      //       el.text(data.name).css("color", "green")
+      //       el.text(fetchData()).css("color", "green")
 
       //       await new Promise((resolve) => setTimeout(resolve, 3000))
       //     })

tests/fromJSON.html

@@ -28,10 +28,9 @@
               )
               .addClass("updated")
               .css("backgroundColor", "skyblue")
-              .wait(1000)
           },
           {
-            fallback: "I'M A CUSTOM FALLBACK",
+            onWait: () => $("#testDiv").text("Waiting..."),
             error: "I'M A CUSTOM ERROR",
             onSuccess: () => $$("p").css("color", "green"),
           }

tests/html.html

@@ -8,22 +8,21 @@
   <body>
     <div id="test"></div>
     <button id="btn">Click Me</button>
+    <button id="btn">Click Me</button>
     <script type="module">
       import { $, $$ } from "../index.js"
       let count = 0
       const test = $("#test")
-      const btn = $("#btn")
-      <!-- test.html("<div><scr" + ">alert('Hello!');</scr" + "ipt></div>", { scripts: true }); -->
-      let scriptContent = `
-<div>
-<script>
-alert('Hello!');
-</script>
-</div>
-`;
-
-myElement.html(scriptContent, { scripts: true });
+      const btns = $$("#btn")
 
+      btns
+        .on("click", () => {
+          count++
+          test.html(count)
+        })
+        .wait(2000)
+        .html("<span>hi</span>", true)
+        .css("color", "red")
     </script>
   </body>
 </html>

tests/sanitize.html

@@ -12,26 +12,28 @@
     </div>
     <script type="module">
       import { $, $$ } from "../index.js" // Adjust the path to where you've stored the module.
-      const contentDiv = $("#content")
-      // 2. Using $$ utility
-      const paragraphs = $$(".paragraph")
-      paragraphs.css("color", "blue")
+      // // 2. Using $$ utility
+      // const paragraphs = $$(".paragraph")
+      // paragraphs.css("color", "blue")
 
-      // 3. Dynamically attach and prepend content
-      contentDiv.attach(
-        '<p class="attached">This is an attached paragraph.</p>',
-        true
-      )
-      contentDiv.attach(
-        '<p class="prepended">This is a prepended paragraph.</p>',
-        { position: "after" }
-      )
+      // contentDiv.attach(
+      //   '<p class="prepended">This is a prepended paragraph.</p>',
+      //   { position: "after" }
+      // )
+
+      //
+      //       contentDiv.attach(
+      //   '<p class="attached">This is an attached paragraph.</p>'
+      // )
 
-      // Unsafe HTML, should get sanitized
       const unsafeHtml = '<img src="x" onerror="alert(\'XSS Attack\')">'
+      const contentDiv = $("#content").sanitize(unsafeHtml)
+
+      // const noWorries = `<scr` + `ipt>alert("No worries!")</scr` + `ipt>`
+      // const contentDiv = $("#content").html(noWorries)
 
-      contentDiv.attach(unsafeHtml, { sanitize: false }) // will not get sanitized-- will trigger alert
-      contentDiv.attach(unsafeHtml) // will get sanitized-- so only one alert will trigger
+      // contentDiv.attach(unsafeHtml, { sanitize: false }) // will not get sanitized-- will trigger alert
+      // contentDiv.attach(unsafeHtml) // will get sanitized-- so only one alert will trigger
     </script>
   </body>
 </html>