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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @splendidlabz/utils
 
+## 1.5.0-alpha.3
+
+### Minor Changes
+
+- 5fe7c51: - Just bumping
+  - Fix bug with `mix` erroring when a `null` or `undefined` source is passed to it. `mix` now ignores `null` and `undefined`.
+  - Adds `toDegrees`
+  - Adds `toRadians`
+  - Adds `getCSSValue` and `setCSSValue`. They're aliases for `getCSSVar` and `setCSSVar` but they're more descriptive for standard properties.
+  - Renamed `hasLabel` to `checkForAccessibleName`
+  - Add `getParentElement` to get the parent element of a DOM node. If it encounters an `ASTRO-ISLAND` and `ASTRO-SLOT`, it goes one level up.
+
+## 1.5.0-alpha.2
+
+### Minor Changes
+
+- acf9faf: Improve sort function
+
+## 1.5.0-alpha.1
+
+### Patch Changes
+
+- df4f2d6: Simplified Markdown — so utils now contain a markdown function
+
 ## 1.5.0-alpha.0
 
 ### Minor Changes

package/actions/masonry.js

@@ -1,6 +1,6 @@
-import { getChildrenElements, mediaLoaded } from '../dom'
+import { getChildrenElements, mediaLoaded } from '../dom/index.js'
 
-import { resizeObserver } from './resize-observer'
+import { resizeObserver } from './resize-observer.js'
 
 export async function masonry(node) {
   if (nativeMasonrySupport(node)) return
@@ -37,39 +37,6 @@ export async function masonry(node) {
   }
 }
 
-// export async function masonry(node) {
-//   if (typeof window === 'undefined') return
-//   if (nativeMasonrySupport(node)) return
-
-//   let items
-//   let gap
-
-//   node.style.setProperty('row-gap', '1px', 'important')
-//   node.style.gridAutoRows = '0px'
-//   // await mediaLoaded(node)
-
-//   const obs = resizeObserver(node, {
-//     async callback(opts) {
-//       items = getChildrenElements(node)
-//       gap = parseFloat(getComputedStyle(node).columnGap)
-//       layout(node)
-//     },
-//   })
-
-//   async function layout() {
-//     items.forEach(item => {
-//       const itemBox = item.getBoundingClientRect()
-//       // item.style.gridRowEnd = `span ${Math.round(itemBox.height + gap)}`
-//     })
-//   }
-
-//   return {
-//     destroy() {
-//       obs.disconnect()
-//     },
-//   }
-// }
-
 function nativeMasonrySupport(node) {
   return getComputedStyle(node).gridTemplateRows === 'masonry'
 }

package/dom/accessibility.js

@@ -1,21 +1,32 @@
-export function stopBodyScroll() {
-  const top = document.documentElement.scrollTop
+// export function stopBodyScroll(element) {
+//   if (!element) element = document.body
+//   const top = document.documentElement.scrollTop
+//   element.style.top = -1 * top + 'px'
+//   element.style.overflow = 'hidden'
+// }
 
-  element.style.top = -1 * top + 'px'
-  element.style.overflow = 'hidden'
-}
+// export function allowBodyScroll() {
+//   const top = parseFloat(document.body.style.top) * -1
+//   document.body.style.top = null
+//   document.body.style.overflow = null
+//   document.documentElement.scrollTop = top
+// }
 
-export function allowBodyScroll() {
-  const top = parseFloat(document.body.style.top) * -1
-  document.body.style.top = null
-  document.body.style.overflow = null
-  document.documentElement.scrollTop = top
+export function hasAccessibleName(label, labelledBy) {
+  if (label || labelledBy) return true
 }
 
-export function inertOthers() {}
+export function checkForAccessibleName({
+  name,
+  ariaLabel,
+  ariaLabelledBy,
+  severity = 'warn',
+} = {}) {
+  if (ariaLabel || ariaLabelledBy) return true
 
-export function hasLabel(label, labelledBy) {
-  if (label || labelledBy) return true
+  const message = `${name} is missing an accessible name. Please provide an accessible name with 'aria-label' or 'aria-labelledby'.`
+  if (severity === 'warn') console.warn(message)
+  if (severity === 'error') console.error(message)
 }
 
 export function isInvalidAriaPopup(value) {

package/dom/css-vars.js

@@ -1,5 +1,13 @@
 import { getElement } from './get-element.js'
 
+export function getCSSValue(element, prop) {
+  return getCSSVar(element, prop)
+}
+
+export function setCSSValue(element, prop, value) {
+  setCSSVar(element, prop, value)
+}
+
 export function getCSSVar(element, prop) {
   element = getElement(element)
   return getComputedStyle(element).getPropertyValue(prop)

package/dom/font-size.js

@@ -1,6 +1,10 @@
 import { splitUnit } from '../lib/index.js'
 
-/* globals getComputedStyle */
+export function getUnit(value) {
+  const [, unit] = splitUnit(value)
+  return unit
+}
+
 export function em(element = document.body, multiple = 1) {
   const unit = parseFloat(getComputedStyle(element)['font-size'])
   return Math.round(unit * multiple)
@@ -12,13 +16,13 @@ export function rem(multiple = 1) {
 }
 
 export function toPx(value, element = null) {
-  const [amt, unit] = splitUnit(value)
+  const [numeric, unit] = splitUnit(value)
   let finalValue = 0
 
-  if (unit === 'rem') finalValue = rem(amt)
-  if (unit === 'em') finalValue = em(element, amt)
-  if (unit === 'px') finalValue = amt
-  if (!unit) finalValue = amt // Default to px offsets
+  if (unit === 'rem') finalValue = rem(numeric)
+  if (unit === 'em') finalValue = em(element, numeric)
+  if (unit === 'px') finalValue = numeric
+  if (!unit) finalValue = numeric // Default to px offsets
 
   return finalValue
 }

package/dom/get-element.js

@@ -2,6 +2,8 @@
 // If the selector is already an HTMLElement, it will return the selector itself.
 // Otherwise, it will return the first element that matches the selector.
 
+const astroNodes = ['ASTRO-SLOT', 'ASTRO-ISLAND']
+
 export function getElement(selector) {
   if (!selector) return
   if (selector instanceof HTMLElement) return selector
@@ -16,6 +18,12 @@ export function getChildrenElements(node) {
   return Array.from(children)
 }
 
+export function getParentElement(element) {
+  const parent = element.parentElement
+  if (astroNodes.includes(parent.nodeName)) return getParentElement(parent)
+  return parent
+}
+
 export function getSiblingElements(element) {
   return Array.from(element.parentElement.children).filter(
     child => child !== element,

package/eslint.config.js

@@ -0,0 +1,2 @@
+import config from '@splendidlabz/eslint-config'
+export default config

package/lib/arrays/index.js

@@ -1,3 +1,5 @@
+import { getNestedValue } from '../objects/nested-property.js'
+
 export function last(array, index) {
   return index === array.length - 1
 }
@@ -25,38 +27,59 @@ export function shuffle(array) {
 }
 
 /**
- * Sorts an array of objects or strings without mutating the array
+ * Sorts an array of objects, numbers, or strings without mutating the original array
+ * @param {Array} array - Array to sort
+ * @param {Object} options - Sort options
+ * @param {string|string[]|null} options.props - Property or array of properties to sort by. If null, sorts simple arrays
+ * @param {boolean} options.reverse - Whether to sort in reverse order
  */
-export function sort(
-  array,
-  {
-    property, // Property to sort by. Used when sorting array of objects.
-    order = 'asc', // 'asc' or 'desc'
-  },
-) {
+export function sort(array, { props = null, reverse = false } = {}) {
   const clone = array.slice()
-  const sorted = clone.sort((a, b) => {
-    let one = a
-    let two = b
-
-    // Use the `sortBy` property if sorting by objects
-    if (property) {
-      one = a[property]
-      two = b[property]
-    }
 
-    if (order === 'asc') {
-      if (one < two) return -1
-      if (one > two) return 1
-    }
+  // Handle simple arrays (numbers or strings)
+  if (props === null) {
+    return clone.sort((a, b) => {
+      const comparison = compareValues(a, b)
+      return reverse ? -comparison : comparison
+    })
+  }
 
-    if (order === 'desc') {
-      if (one < two) return 1
-      if (one > two) return -1
-    }
+  // Handle objects in arrays
+  const properties = Array.isArray(props) ? props : [props]
+
+  return clone.sort((a, b) => {
+    for (const property of properties) {
+      const aValue = getNestedValue(a, property)
+      const bValue = getNestedValue(b, property)
+
+      // Skip if values are equal
+      if (aValue === bValue) continue
 
+      // Push null/undefined values to the end
+      if (aValue == null) return 1
+      if (bValue == null) return -1
+
+      // Compare values and handle reverse sort
+      const comparison = compareValues(aValue, bValue)
+      return reverse ? -comparison : comparison
+    }
     return 0
   })
+}
+
+// Compare values for sorting
+function compareValues(a, b) {
+  // Compare numbers
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+
+  // Compare strings
+  if (typeof a === 'string' && typeof b === 'string') return a.localeCompare(b)
+
+  // Compare dates
+  const aDate = new Date(a)
+  const bDate = new Date(b)
+  if (!isNaN(aDate) && !isNaN(bDate)) return aDate.getTime() - bDate.getTime()
 
-  return sorted
+  // Convert into strings and compare
+  return String(a).localeCompare(String(b))
 }

package/lib/arrays/sort.spec.js

@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+
+import { sort } from './index.js'
+
+describe('Sort by', _ => {
+  it('Standard array - numbers', async () => {
+    const array = [3, 1, 2]
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual([1, 2, 3])
+    expect(reversed).toEqual([3, 2, 1])
+  })
+
+  it('Standard array - strings', async () => {
+    const array = ['c', 'a', 'b']
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual(['a', 'b', 'c'])
+    expect(reversed).toEqual(['c', 'b', 'a'])
+  })
+
+  it('Standard array - dates', async () => {
+    const array = [
+      new Date('2021-05-18'),
+      new Date('2022-01-01'),
+      new Date('2025-03-09'),
+    ]
+    const sorted = sort(array)
+    const reversed = sort(array, { reverse: true })
+    expect(sorted).toEqual([
+      new Date('2021-05-18'),
+      new Date('2022-01-01'),
+      new Date('2025-03-09'),
+    ])
+    expect(reversed).toEqual([
+      new Date('2025-03-09'),
+      new Date('2022-01-01'),
+      new Date('2021-05-18'),
+    ])
+  })
+  it('Array of objects — simple integer', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ]
+    const sorted = sort(array, { props: 'age' })
+    const reversed = sort(array, { props: 'age', reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+    ])
+  })
+
+  it('Array of objects — simple string', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ]
+    const sorted = sort(array, { props: 'name' })
+    const reversed = sort(array, { props: 'name', reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+    ])
+  })
+
+  it('Double property', async () => {
+    const array = [
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+      { name: 'Candy', age: 35 },
+      { name: 'Danny', age: 30 },
+    ]
+    const sorted = sort(array, { props: ['age', 'name'] })
+    const reversed = sort(array, { props: ['age', 'name'], reverse: true })
+    expect(sorted).toEqual([
+      { name: 'Betty', age: 25 },
+      { name: 'Ace', age: 30 },
+      { name: 'Danny', age: 30 },
+      { name: 'Candy', age: 35 },
+    ])
+    expect(reversed).toEqual([
+      { name: 'Candy', age: 35 },
+      { name: 'Danny', age: 30 },
+      { name: 'Ace', age: 30 },
+      { name: 'Betty', age: 25 },
+    ])
+  })
+
+  it('Nested value', async () => {
+    const array = [
+      { data: { value: 1 } },
+      { data: { value: 2 } },
+      { data: { value: 3 } },
+    ]
+    const sorted = sort(array, { props: 'data.value' })
+    const reversed = sort(array, { props: 'data.value', reverse: true })
+    expect(sorted).toEqual([
+      { data: { value: 1 } },
+      { data: { value: 2 } },
+      { data: { value: 3 } },
+    ])
+    expect(reversed).toEqual([
+      { data: { value: 3 } },
+      { data: { value: 2 } },
+      { data: { value: 1 } },
+    ])
+  })
+})

package/lib/numbers/index.js

@@ -1,3 +1,5 @@
+export * from './math.js'
+
 export function splitUnit(string) {
   // If there are no units, return the number straight.
   if (typeof string === 'number') return [string, null]

package/lib/numbers/math.js

@@ -0,0 +1,9 @@
+// Convert radians to degrees
+export function toDegrees(angle) {
+  return angle * (180 / Math.PI)
+}
+
+// Convert degrees to radians
+export function toRadians(angle) {
+  return angle * (Math.PI / 180)
+}

package/lib/objects/mix/mix.js

@@ -1,6 +1,8 @@
 export function mix(...sources) {
   const result = {}
   for (const source of sources) {
+    // Skip null or undefined sources
+    if (source == null) continue
     merge(result, source)
   }
   return result

package/lib/objects/mix/mix.test.js

@@ -322,3 +322,19 @@ it('Safe Merge', () => {
   expect(mixed.__proto__).toEqual({})
   /* eslint-enable */
 })
+
+it('should skip null and undefined sources', () => {
+  const obj1 = { a: 1 }
+  const obj2 = { b: 2 }
+  const expected = { a: 1, b: 2 }
+
+  expect(mix(obj1, null, obj2)).toEqual(expected)
+  expect(mix(null, obj1, obj2)).toEqual(expected)
+  expect(mix(obj1, obj2, null)).toEqual(expected)
+
+  expect(mix(obj1, undefined, obj2)).toEqual(expected)
+  expect(mix(undefined, obj1, obj2)).toEqual(expected)
+  expect(mix(obj1, obj2, undefined)).toEqual(expected)
+
+  expect(mix(null, obj1, undefined, obj2, null)).toEqual(expected)
+})

package/lib/objects/nested-property.js

@@ -34,3 +34,8 @@ export function getNestedProperty2(object, path) {
   const pathArray = path.split('.')
   return getNestedProperty(object, pathArray)
 }
+
+// Same as dot syntax, but terser and more readable name
+export function getNestedValue(object, path) {
+  return path.split('.').reduce((acc, part) => acc?.[part], object)
+}

package/lib/strings/markdown.js

@@ -1,13 +1,26 @@
+import { marked } from 'marked'
+import { gfmHeadingId } from 'marked-gfm-heading-id'
+import { mangle } from 'marked-mangle'
+
+export function markdown(content, options = {}) {
+  const defaultOptions = { inline: false }
+  const opts = { ...defaultOptions, ...options }
+
+  // Prepare Marked
+  marked.use(mangle())
+  marked.use(gfmHeadingId())
+
+  const { content: treated } = treatMarkdownWhitespace(content, opts)
+  return marked.parse(treated)
+}
+
 /**
  * Removes leading whitespaces from a Markdown content so they can be rendered appropriately.
  * @param {string} content - The content to treat
  * @param {Boolean} options.inline - Whether content is inline, not block
  * @returns
  */
-export function treatMarkdownWhitespace(
-  content,
-  { inline, isSlot = false } = {},
-) {
+export function treatMarkdownWhitespace(content, { inline } = {}) {
   if (!content) return { content: '', inline }
   const lines = content.split('\n')
 
@@ -19,9 +32,7 @@ export function treatMarkdownWhitespace(
   const firstLineWithLeadingSpacesIndex = lines.findIndex(line =>
     line.match(/^\s+/),
   )
-
   const firstLineWithLeadingSpaces = lines[firstLineWithLeadingSpacesIndex]
-
   const indentation =
     firstLineWithLeadingSpaces?.match(/^\s+/)?.[0]?.length ?? 0
 

package/node/file-cache.js

@@ -119,7 +119,7 @@ export async function getLastModifiedTime(globPath) {
   files = await Promise.all(files.map(fs.stat))
   files = files.map(file => file.mtimeMs)
 
-  const sorted = sort(files, { sortBy: 'mtimeMs', order: 'desc' })
+  const sorted = sort(files, { props: 'mtimeMs', reverse: true })
   return sorted[0] || 0
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/utils",
-  "version": "1.5.0-alpha.0",
+  "version": "1.5.0-alpha.3",
   "description": "",
   "type": "module",
   "sideEffects": false,
@@ -23,13 +23,16 @@
   "dependencies": {
     "dompurify": "^3.2.4",
     "glob-promise": "^6.0.7",
+    "marked": "^15.0.7",
+    "marked-gfm-heading-id": "^4.1.1",
+    "marked-mangle": "^1.1.10",
     "pluralize": "^8.0.0",
     "statuses": "^2.0.1"
   },
   "devDependencies": {
-    "@splendidlabz/eslint-config": "*",
+    "@splendidlabz/eslint-config": "2.0.0-alpha.0",
     "jsdom": "^26.0.0",
     "np": "^10.2.0",
-    "vitest": "^3.0.7"
+    "vitest": "^3.1.1"
   }
 }

package/.eslintrc.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  extends: ['@splendidlabz/eslint-config'],
-}

package/lib/index.test.js

@@ -1,9 +0,0 @@
-// Possible to test???
-import * as test from './index.js'
-
-import { expect, it } from 'vitest'
-
-it('Import Test', () => {
-  console.log(test)
-  console.log('hello')
-})