@splendidlabz/utils 1.10.0 → 1.10.2

package/src/dom/events.js

@@ -2,7 +2,7 @@
  * @typedef {Object} EventListener
  * @property {Element} node - The DOM element to attach the event listener to
  * @property {string} event - The event type (e.g., 'click', 'keydown')
- * @property {Function} handler - The event handler function
+ * @property {EventListenerOrEventListenerObject} handler - The event handler function
  */
 
 /**

package/src/dom/font-size.js

@@ -1,4 +1,4 @@
-import { splitUnit } from '../lib/index.js'
+import { splitUnit } from '../lib/numbers/index.js'
 
 export function getUnit(value) {
   const [, unit] = splitUnit(value)

package/src/dom/observers/resize-observer.js

@@ -5,8 +5,8 @@ import { useObserverMethodOnTarget } from './observer.js'
 /**
  * Creates and manages a ResizeObserver instance to monitor size changes of a target element.
  *
- * @param {Element|Window|NodeList|Element[]} target - The element(s) to observe.
- *   - If window is provided, document.body will be observed instead.
+ * @param {Element|Window|Document|NodeList|Element[]} target - The element(s) to observe.
+ *   - If window or document is provided, document.documentElement will be observed instead.
  *   - If NodeList or Array of elements is provided, all elements will be observed.
  * @param {Object} options - Configuration options for the resize observer
  * @param {boolean} [options.observe=true] - Whether to start observing immediately. If false, the observer won't be created.
@@ -39,13 +39,15 @@ export function resizeObserver(target, options) {
   const { callback, ...opts } = options
   const observer = new ResizeObserver(observerFn)
 
-  if (target === window) target = document.body
+  if (target === window || target === document)
+    target = document.documentElement
   useObserverMethodOnTarget(target, observer, 'observe', opts)
 
   function observerFn(entries) {
     for (const entry of entries) {
       if (callback) callback({ entry, entries, observer })
-      else dispatchEvent(target, 'resize-obs', { entry, entries, observer })
+      else
+        dispatchEvent(entry.target, 'resize-obs', { entry, entries, observer })
     }
   }
 

package/src/dom/observers/scroll-observer.js

@@ -18,9 +18,24 @@ const defaultOptions = {
  * @property {Function} [onEnterThreshold] - Called when entering threshold zone
  */
 
+/**
+ * @param {Element | Document | Window} node
+ * @returns {Element}
+ */
+function getScrollElement(node) {
+  if (
+    node === document ||
+    node === window ||
+    node === document.documentElement
+  ) {
+    return document.documentElement
+  }
+  return /** @type {Element} */ (node)
+}
+
 /**
  * Scroll Observer - Optimized for performance
- * @param {Element} node - The element to observe scroll events on
+ * @param {Element | Document | Window} node - The element to observe scroll events on
  * @param {ScrollObserverOptions} [options] - Configuration options
  */
 export function scrollObserver(node, options = {}) {
@@ -38,7 +53,7 @@ export function scrollObserver(node, options = {}) {
   // Determine scroll context once at initialization
   const isDocumentScroll =
     node === document || node === window || node === document.documentElement
-  const scrollElement = isDocumentScroll ? document.documentElement : node
+  const scrollElement = getScrollElement(node)
   const eventTarget = isDocumentScroll ? window : node
 
   // Cache DOM references and expensive calculations

package/src/dom/spam-prevention.js

@@ -1,10 +1,10 @@
 /**
  * Enhances a form element with spam detection capabilities
  * @param {HTMLFormElement} form - The form element to enhance
- * @param {Object} options - Configuration options
- * @param {string} options.honeypotField - Name of the honeypot field (default: 'hp')
- * @param {number} options.honeypotDuration - Minimum time in ms for legitimate form fill (default: 2000)
- * @returns {Function} Cleanup function to remove listeners and method
+ * @param {Object} [options] - Configuration options
+ * @param {string} [options.honeypotField] - Name of the honeypot field (default: 'hp')
+ * @param {number} [options.honeypotDuration] - Minimum time in ms for legitimate form fill (default: 2000)
+ * @returns {void}
  */
 export function preventSpam(
   form,
@@ -25,6 +25,7 @@ export function preventSpam(
   form.containsSpam = function () {
     const fillTime = Date.now() - startTime
     const isTooFast = fillTime < honeypotDuration
+    /** @type {HTMLInputElement | null} */
     const honeypotInput = form.querySelector(`[name="${honeypotField}"]`)
     const hasHoneypotValue = honeypotInput?.value?.trim()
     const noInteraction = !hasInteraction

package/src/dom/events.test.js

@@ -1,99 +0,0 @@
-// @vitest-environment jsdom
-import { describe, expect, it } from 'vitest'
-
-import { createListeners } from './events.js'
-
-describe('Listeners Factory', _ => {
-  it('Empty', _ => {
-    const listeners = createListeners()
-    expect(listeners.list).toEqual([])
-  })
-
-  it('Begins with some listeners', _ => {
-    const node1 = document.createElement('div')
-    const node2 = document.createElement('p')
-    const event1 = 'click'
-    const event2 = 'keydown'
-    const cb1 = _ => {}
-    const cb2 = _ => {}
-
-    const listeners = createListeners([
-      { node: node1, event: event1, handler: cb1 },
-      { node: node2, event: event2, handler: cb2 },
-    ])
-
-    expect(listeners.list).toEqual([
-      { node: node1, event: event1, handler: cb1 },
-      { node: node2, event: event2, handler: cb2 },
-    ])
-  })
-
-  it('Add', _ => {
-    const node = document.createElement('div')
-    const event = 'click'
-    const handler = _ => {
-      node.setAttribute('clicked', true)
-    }
-
-    const listeners = createListeners()
-    listeners.add({ node, event, handler })
-
-    // Ensures the listener was added to the list
-    expect(listeners.list.length).toBe(1)
-
-    // Ensures the listener works
-    node.click()
-    expect(node.getAttribute('clicked')).toBe('true')
-  })
-
-  it('Remove', _ => {
-    const node = document.createElement('div')
-    const event = 'click'
-    const handler = _ => {
-      const count = node.getAttribute('count') || 0
-      node.setAttribute('count', count + 1)
-    }
-
-    const listener = { node, event, handler }
-    const listeners = createListeners([listener])
-
-    node.click()
-    expect(node.getAttribute('count')).toBe('1')
-
-    listeners.remove(listener)
-
-    // Ensures listener has been removed
-    node.click()
-
-    expect(listeners.list.length).toBe(0)
-    expect(node.getAttribute('count')).toBe('1')
-  })
-
-  it('Clears all listeners from', _ => {
-    const node1 = document.createElement('div')
-    const node2 = document.createElement('p')
-    const event1 = 'click'
-    const event2 = 'click'
-    const cb1 = _ => {
-      node1.setAttribute('clicked', true)
-    }
-    const cb2 = _ => {
-      node2.setAttribute('clicked', true)
-    }
-
-    const listeners = createListeners([
-      { node: node1, event: event1, handler: cb1 },
-      { node: node2, event: event2, handler: cb2 },
-    ])
-
-    listeners.clear()
-    expect(listeners.list).toEqual([])
-
-    // Ensures none of the listeners work anymore
-    node1.click()
-    node2.click()
-
-    expect(node1.getAttribute('clicked')).toBe(null)
-    expect(node2.getAttribute('clicked')).toBe(null)
-  })
-})