@splendidlabz/utils 1.5.0-alpha.3 → 1.5.0-alpha.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @splendidlabz/utils
 
+## 1.5.0-alpha.4
+
+### Patch Changes
+
+- Updates
+
 ## 1.5.0-alpha.3
 
 ### Minor Changes

package/{actions → dom/actions}/index.js

@@ -1,5 +1,3 @@
 export * from './masonry.js'
-export * from './mutation-observer.js'
 export * from './prefer-horizontal-scroll.js'
-export * from './resize-observer.js'
 export * from './sticky.js'

package/{actions → dom/actions}/masonry.js

@@ -1,6 +1,6 @@
-import { getChildrenElements, mediaLoaded } from '../dom/index.js'
-
-import { resizeObserver } from './resize-observer.js'
+import { getChildrenElements } from '../get-element.js'
+import { mediaLoaded } from '../media.js'
+import { resizeObserver } from '../observers/resize-observer.js'
 
 export async function masonry(node) {
   if (nativeMasonrySupport(node)) return

package/{actions → dom/actions}/prefer-horizontal-scroll.js

@@ -3,9 +3,9 @@ import {
   getCSSVar,
   removeListeners,
   setCSSVar,
-} from '../dom/index.js'
+} from '../index.js'
 
-import { omitEmpty } from '../lib/index.js'
+import { omitEmpty } from '../../lib/index.js'
 
 const DEFAULT_OPTIONS = {
   scrollSnapDelay: 1000,

package/{actions → dom/actions}/sticky.js

@@ -1,12 +1,9 @@
-import {
-  boundingBoxRelativeToAncestor,
-  findScrollContainer,
-} from '../dom/index.js'
-import { resizeObserver } from './resize-observer.js'
+import { boundingBoxRelativeToAncestor } from '../bounding-box.js'
+import { resizeObserver } from '../observers/resize-observer.js'
+import { findScrollContainer } from '../ui/scroll-container.js'
 
 export function sticky(node, props = {}) {
   const scrollContainer = findScrollContainer(node)
-
   let stickyTBLR = getComputedTBLR(node)
 
   const obs = resizeObserver(node, {

package/dom/events.js

@@ -10,12 +10,13 @@ export function removeListeners(listeners) {
   })
 }
 
+// Dispatch a custom event from a Node.
 export function dispatchEvent(node, eventName, detail, options = {}) {
   node.dispatchEvent(
     new CustomEvent(eventName, {
       ...options,
       detail,
-    }),
+    })
   )
 }
 

package/dom/font-size.js

@@ -6,13 +6,19 @@ export function getUnit(value) {
 }
 
 export function em(element = document.body, multiple = 1) {
-  const unit = parseFloat(getComputedStyle(element)['font-size'])
-  return Math.round(unit * multiple)
+  const value = parseFloat(getComputedStyle(element)['font-size'])
+  return Math.round(value * multiple)
 }
 
 export function rem(multiple = 1) {
-  const unit = parseFloat(getComputedStyle(document.body)['font-size'])
-  return Math.round(unit * multiple)
+  const value = parseFloat(getComputedStyle(document.body)['font-size'])
+  return Math.round(value * multiple)
+}
+
+export function lh(element = document.body, multiple = 1) {
+  const lineHeight = getComputedStyle(element)['line-height']
+  const value = parseFloat(lineHeight)
+  return Math.round(value * multiple)
 }
 
 export function toPx(value, element = null) {
@@ -21,6 +27,7 @@ export function toPx(value, element = null) {
 
   if (unit === 'rem') finalValue = rem(numeric)
   if (unit === 'em') finalValue = em(element, numeric)
+  if (unit === 'lh') finalValue = lh(element, numeric)
   if (unit === 'px') finalValue = numeric
   if (!unit) finalValue = numeric // Default to px offsets
 

package/dom/get-element.js

@@ -4,6 +4,13 @@
 
 const astroNodes = ['ASTRO-SLOT', 'ASTRO-ISLAND']
 
+// Returns the type of the node.
+export function getNodeType(node) {
+  if (node instanceof Element) return 'element'
+  if (node instanceof NodeList) return 'nodelist'
+  if (Array.isArray(node)) return 'array'
+}
+
 export function getElement(selector) {
   if (!selector) return
   if (selector instanceof HTMLElement) return selector
@@ -26,7 +33,7 @@ export function getParentElement(element) {
 
 export function getSiblingElements(element) {
   return Array.from(element.parentElement.children).filter(
-    child => child !== element,
+    child => child !== element
   )
 }
 

package/dom/index.js

@@ -1,4 +1,5 @@
 export * from './accessibility.js'
+export * from './actions/index.js'
 export * from './bounding-box.js'
 export * from './clipboard.js'
 export * from './cookie.js'
@@ -11,6 +12,7 @@ export * from './hash.js'
 export * from './keyboard.js'
 export * from './local-store.js'
 export * from './media.js'
+export * from './observers/index.js'
 export * from './pkce.js'
 export * from './query-params.js'
 export * from './random-string.js'

package/dom/media.js

@@ -5,6 +5,7 @@ export async function imagesLoaded(node) {
       if (img.complete) return resolve()
       img.onload = resolve
       img.onerror = e => {
+        // eslint-disable-next-line prefer-promise-reject-errors
         reject('Image failed to load')
       }
     })

package/dom/observers/index.js

@@ -0,0 +1,3 @@
+export * from './intersection-observer.js'
+export * from './mutation-observer.js'
+export * from './resize-observer.js'

package/dom/observers/intersection-observer.js

@@ -0,0 +1,43 @@
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
+export function intersectionObserver(target, options = {}) {
+  const { callback, ...opts } = options
+  const observer = new IntersectionObserver(observerFn, opts)
+
+  useObserverMethodOnTarget(target, observer, 'observe')
+
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer })
+      else dispatchEvent(target, 'intersect', { entry, entries, observer })
+    }
+  }
+
+  return {
+    observer,
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    unobserve(target) {
+      useObserverMethodOnTarget(target, observer, 'unobserve')
+    },
+
+    takeRecords() {
+      return observer.takeRecords()
+    },
+
+    disconnect() {
+      // Take records before disconnecting.
+      const records = observer.takeRecords()
+      observer.disconnect()
+      if (records.length > 0) observerFn(records)
+    },
+
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}

package/dom/observers/mutation-observer.js

@@ -0,0 +1,51 @@
+/* eslint-env browser */
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
+
+// These are simply options that will often be used. Check the docs for other options. Adding them here simply because it's easier to refer them here than reading the docs.
+const defaultOptions = {
+  attributes: false,
+  childList: false,
+  subtree: false,
+}
+
+export function mutationObserver(target, options) {
+  options = { ...defaultOptions, ...options }
+  const { callback, ...opts } = options
+  const observer = new MutationObserver(observerFn)
+
+  if (target === window) target = document.body
+  useObserverMethodOnTarget(target, observer, 'observe', opts)
+
+  function observerFn(entries) {
+    for (const entry of entries) {
+      if (callback) callback({ entry, entries, observer })
+      else dispatchEvent(target, 'mutate', { entry, entries, observer })
+    }
+  }
+
+  return {
+    observer,
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    takeRecords() {
+      return observer.takeRecords()
+    },
+
+    disconnect() {
+      // Take records before disconnecting.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/takeRecords
+      const records = observer.takeRecords()
+      observer.disconnect()
+      if (records.length > 0) observerFn(records)
+    },
+
+    destroy() {
+      observer.disconnect()
+    },
+  }
+}

package/dom/observers/observer.js

@@ -0,0 +1,18 @@
+import { getNodeType } from '../get-element.js'
+
+export function useObserverMethodOnTarget(
+  target,
+  observer,
+  method = 'observe',
+  options = undefined
+) {
+  const targetType = getNodeType(target)
+  if (targetType === 'element') observer[method](target, options)
+  if (targetType === 'nodelist') {
+    const elements = Array.from(target)
+    elements.forEach(element => observer[method](element, options))
+  }
+  if (targetType === 'array') {
+    target.forEach(element => observer[method](element, options))
+  }
+}

package/dom/observers/resize-observer.js

@@ -0,0 +1,34 @@
+/* eslint-env browser */
+import { dispatchEvent } from '../events.js'
+import { useObserverMethodOnTarget } from './observer.js'
+
+export function resizeObserver(target, options) {
+  // We set the option here to prevent observer from being created unless necessary.
+  options = { observe: true, ...options }
+  if (!options.observe) return
+  const { callback, ...opts } = options
+  const observer = new ResizeObserver(observerFn)
+
+  if (target === window) target = document.body
+  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 })
+    }
+  }
+
+  return {
+    observe(target, options) {
+      useObserverMethodOnTarget(target, observer, 'observe', options)
+    },
+
+    unobserve(target) {
+      useObserverMethodOnTarget(target, observer, 'unobserve')
+    },
+
+    disconnect: _ => observer.disconnect(),
+    destroy: _ => observer.disconnect(),
+  }
+}

package/lib/form/sanitize.js

@@ -1,5 +1,6 @@
 import DOMPurify from 'dompurify'
 
+// MIGHT HAVE TO SHIFT THIS TO DOM, because DOMPurify doesn't work with Node
 /**
  * Sanitizes HTML string using DOMPurify.
  * @param {string} html - The HTML string to sanitize.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.5.0-alpha.3",
+  "version": "1.5.0-alpha.4",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -9,8 +9,6 @@
     "./lib/*": "./lib/*.js",
     "./dom": "./dom/index.js",
     "./dom/*": "./dom/*.js",
-    "./actions": "./actions/index.js",
-    "./actions/*": "./actions/*.js",
     "./node": "./node/index.js",
     "./node/*": "./node/*.js"
   },
@@ -30,7 +28,7 @@
     "statuses": "^2.0.1"
   },
   "devDependencies": {
-    "@splendidlabz/eslint-config": "2.0.0-alpha.0",
+    "@splendidlabz/eslint-config": "2.0.0-alpha.1",
     "jsdom": "^26.0.0",
     "np": "^10.2.0",
     "vitest": "^3.1.1"

package/.turbo/turbo-lint.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 lint
-> eslint . --fix
-
-
-/Users/zellwk/projects/@splendidlabs/packages/utils/lib/index.test.js
-  4:10  error  'expect' is defined but never used  no-unused-vars
-
-✖ 1 problem (1 error, 0 warnings)
-

package/.turbo/turbo-test.log

@@ -1,10 +0,0 @@
-
-> @splendidlabs/utils@1.0.3 test
-> vitest run
-
-sh: vitest: command not found
-npm ERR! Lifecycle script `test` failed with error: 
-npm ERR! Error: command failed 
-npm ERR!   in workspace: @splendidlabs/utils@1.0.3 
-npm ERR!   at location: /Users/zellwk/projects/@splendidlabs/packages/utils 
-

package/actions/intersection-observer.js

@@ -1,37 +0,0 @@
-// See https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#options for options
-const options = {}
-
-export function intersectionObserver(node, options) {
-  const { callback, opts } = options
-  const observer = new IntersectionObserver(observerFn, opts)
-
-  function observerFn(entries, observer) {
-    entries.forEach(entry => {
-      for (const entry of entries) {
-        // Needs testing to see what's in entry
-        if (callback) callback({ node, entry, observer })
-        else {
-          node.dispatchEvent(
-            new CustomEvent('intersect', {
-              detail: { node, entry, observer },
-            }),
-          )
-        }
-      }
-    })
-  }
-
-  observer.observe(node)
-
-  return {
-    observer,
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/mutation-observer.js

@@ -1,42 +0,0 @@
-/* eslint-env browser */
-// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe
-
-// These are simply options that will often be used. Check the docs for other options.
-const defaultOptions = {
-  attributes: false,
-  childList: false,
-  subtree: false,
-}
-
-export function mutationObserver(node, options) {
-  options = { ...defaultOptions, ...options }
-  const { callback, ...opts } = options
-  const observer = new MutationObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (callback) callback({ node, entry, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('mutate', {
-            detail: { node, entry, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  if (node === window) node = document.body
-  observer.observe(node, opts)
-
-  return {
-    disconnect() {
-      observer.disconnect()
-    },
-
-    // Destroy is used for Svelte actions
-    destroy() {
-      observer.disconnect()
-    },
-  }
-}

package/actions/resize-observer.js

@@ -1,33 +0,0 @@
-/* eslint-env browser */
-export function resizeObserver(node, options) {
-  // We set the option here to prevent observer from being created unless necessary.
-  options = { observe: true, ...options }
-  if (!options.observe) return
-
-  const observer = new ResizeObserver(observerFn)
-
-  function observerFn(entries) {
-    for (const entry of entries) {
-      if (options.callback) options.callback({ node, entry, entries, observer })
-      else {
-        node.dispatchEvent(
-          new CustomEvent('resize-obs', {
-            detail: { node, entry, entries, observer },
-          }),
-        )
-      }
-    }
-  }
-
-  observer.observe(node)
-
-  return {
-    disconnect() {
-      observer.unobserve(node)
-    },
-
-    destroy() {
-      observer.unobserve(node)
-    },
-  }
-}