@knowark/componarkjs 1.13.4 → 1.14.1

package/lib/base/utils/helpers.test.js

@@ -1,154 +1,173 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { listen, reflect, set, get, keys } from './helpers.js'
 
-describe('Helpers', () => {
-  it('does not allow invalid attribute', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button on-open="click" listen on-click="click" on-click="myMethod"
-      on-close="click"></button>
-    `
-
-    listen(element)
-
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
-
-  it('does not allow invalid attribute', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button listen ark-on-click="myMethod"></button>
-    `
+it('does not allow invalid attribute', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button on-open="click" listen on-click="click" on-click="myMethod"
+    on-close="click"></button>
+  `
 
-    listen(element)
+  listen(element)
 
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
+
+it('does not allow invalid attribute', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button listen ark-on-click="myMethod"></button>
+  `
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-  it('attribute ', () => {
-    const button = document.createElement('button')
-    button.setAttribute('listen', '')
-    button.setAttribute('on-abc', 'method')
-    button.setAttribute('on-xyz', 'method')
+it('attribute ', () => {
+  const button = document.createElement('button')
+  button.setAttribute('listen', '')
+  button.setAttribute('on-abc', 'method')
+  button.setAttribute('on-xyz', 'method')
 
-    const content = document.createElement('div')
-    content.appendChild(button)
+  const content = document.createElement('div')
+  content.appendChild(button)
 
-    listen(content)
-  })
+  listen(content)
+})
 
-  it('It does not allow to execute undeclared methods.', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button listen on-click="myMethod"></button>
-    `
+it('It does not allow to execute undeclared methods.', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button listen on-click="myMethod"></button>
+  `
 
-    listen(element)
+  listen(element)
 
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-  it('can listen events', () => {
-    const element = document.createElement('div')
-    Object.defineProperty(element, 'binding', {value: 'listen'})
-    element.innerHTML = /* html */`
-      <button listen on-click="myMethod"></button>
-    `
-    // @ts-ignore
-    element.myMethod = function () {
-      element.setAttribute('clicked-element', '')
-    }
+it('can listen events', () => {
+  const element = document.createElement('div')
+  Object.defineProperty(element, 'binding', {value: 'listen'})
+  element.innerHTML = /* html */`
+    <button listen on-click="myMethod"></button>
+  `
+  // @ts-ignore
+  element.myMethod = function () {
+    element.setAttribute('clicked-element', '')
+  }
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(element.hasAttribute('clicked-element'))
+})
 
-    listen(element)
+it('ignores missing methods when listening', () => {
+  const element = document.createElement('div')
+  Object.defineProperty(element, 'binding', {value: 'listen'})
+  element.innerHTML = /* html */`
+    <button listen on-click="missing"></button>
+  `
+  // @ts-ignore
+  element.myMethod = function () {
+    element.setAttribute('clicked-element', '')
+  }
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-    element.querySelector('button').click()
-    expect(element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+it('can create attribute', () => {
+  const element = document.createElement('div')
+  const properties = ['myProperty']
 
-  it('ignores missing methods when listening', () => {
-    const element = document.createElement('div')
-    Object.defineProperty(element, 'binding', {value: 'listen'})
-    element.innerHTML = /* html */`
-      <button listen on-click="missing"></button>
-    `
-    // @ts-ignore
-    element.myMethod = function () {
-      element.setAttribute('clicked-element', '')
-    }
+  reflect(element, properties)
 
-    listen(element)
+  // @ts-ignore
+  element.myProperty = 'value'
 
-    element.querySelector('button').click()
-    expect(element.hasAttribute('clicked-element')).toBeFalsy()
-  })
+  // @ts-ignore
+  assert.strictEqual(element.myProperty, 'value')
+  assert.ok(element.hasAttribute('my-property'))
+})
 
-  it('can create attribute', () => {
-    const element = document.createElement('div')
-    const properties = ['myProperty']
+it('cannot create attribute with property undefined', () => {
+  const element = document.createElement('div')
+  const properties = ['myProperty']
 
-    reflect(element, properties)
+  reflect(element, properties)
 
-    // @ts-ignore
-    element.myProperty = 'value'
+  // @ts-ignore
+  element.myProperty = undefined
 
-    // @ts-ignore
-    expect(element.myProperty).toBe('value')
-    expect(element.hasAttribute('my-property')).toBeTruthy()
-  })
+  // @ts-ignore
+  assert.strictEqual(element.myProperty, '')
+  assert.ok(!element.hasAttribute('my-property'))
+})
 
-  it('cannot create attribute with property undefined', () => {
-    const element = document.createElement('div')
-    const properties = ['myProperty']
+it('sets an object properties by a given path', () => {
+  const object = {}
 
-    reflect(element, properties)
+  set(object, 'value.data', 'Hello')
 
-    // @ts-ignore
-    element.myProperty = undefined
+  assert.deepStrictEqual(object.value.data, 'Hello')
+})
 
-    // @ts-ignore
-    expect(element.myProperty).toBe('')
-    expect(!element.hasAttribute('my-property')).toBeTruthy()
-  })
+it('ignores set paths that cannot be parsed', () => {
+  const object = { value: 7 }
+  set(object, '', 'Hello')
+  assert.deepStrictEqual(object, { value: 7 })
+})
 
-  it('sets an object properties by a given path', () => {
-    const object = {}
+it('gets an object properties by a given path', () => {
+  const object = { state: { data: { value: 25 } }, data: 13 }
 
-    set(object, 'value.data', 'Hello')
+  let value = get(object, 'data')
 
-    expect(object.value.data).toEqual('Hello')
-  })
+  assert.deepStrictEqual(value, 13)
 
-  it('gets an object properties by a given path', () => {
-    const object = { state: { data: { value: 25 } }, data: 13 }
+  value = get(object, 'state.data.value')
 
-    let value = get(object, 'data')
+  assert.deepStrictEqual(value, 25)
 
-    expect(value).toEqual(13)
+  const fallback = get(object, 'state.missing.value', 7)
 
-    value = get(object, 'state.data.value')
+  assert.deepStrictEqual(fallback, 7)
+})
 
-    expect(value).toEqual(25)
+it('gets falsy values by a given path without replacing them', () => {
+  const object = { state: { count: 0, enabled: false, empty: '' } }
 
-    const fallback = get(object, 'state.missing.value', 7)
+  assert.deepStrictEqual(get(object, 'state.count', 7), 0)
+  assert.deepStrictEqual(get(object, 'state.enabled', true), false)
+  assert.deepStrictEqual(get(object, 'state.empty', 'fallback'), '')
+})
 
-    expect(fallback).toEqual(7)
-  })
+it('returns fallback when get path cannot be parsed', () => {
+  const object = { value: 7 }
+  assert.deepStrictEqual(get(object, '', 'fallback'), 'fallback')
+})
 
-  it('retrieves the object keys of truthy values', () => {
-    const background = 'primary'
-    const shadow = 'small'
-    const color = ''
+it('retrieves the object keys of truthy values', () => {
+  const background = 'primary'
+  const shadow = 'small'
+  const color = ''
 
-    const classes = {
-      [`background-${background}`]: background,
-      [`color-${color}`]: color,
-      [`shadow-${shadow}`]: shadow
-    }
+  const classes = {
+    [`background-${background}`]: background,
+    [`color-${color}`]: color,
+    [`shadow-${shadow}`]: shadow
+  }
 
-    const result = keys(classes)
+  const result = keys(classes)
 
-    expect(result).toEqual('background-primary shadow-small')
-  })
+  assert.deepStrictEqual(result, 'background-primary shadow-small')
 })

package/lib/base/utils/index.js

@@ -1,3 +1,4 @@
+/** Utility helpers for component internals and runtime bindings. */
 export * from './define.js'
 export * from './format.js'
 export * from './helpers.js'

package/lib/base/utils/slots.js

@@ -1,7 +1,8 @@
 /**
+ * Groups child nodes by slot name.
  * @param {HTMLElement} container
- * @return {Object<string, Array<HTMLElement>>}
- * */
+ * @returns {Record<string, HTMLElement[]>}
+ */
 export function getSlots (container) {
   const slots = { general: [] }
 

package/lib/base/utils/slots.test.js

@@ -1,52 +1,52 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { getSlots } from './slots.js'
 
-describe('Slots', () => {
-  it('can be rendered without content', () => {
-    const item = document.createElement('div')
-    const slots = getSlots(item)
-    expect(!slots.general.length).toBeTruthy()
-  })
+it('can be rendered without content', () => {
+  const item = document.createElement('div')
+  const slots = getSlots(item)
+  assert.ok(!slots.general.length)
+})
 
-  it('can be rendered with content', () => {
-    const item = document.createElement('div')
+it('can be rendered with content', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
+  const obj = document.createElement('div')
 
-    item.appendChild(obj)
-    const slots = getSlots(item)
-    expect(slots.general.length).toBeTruthy()
-  })
+  item.appendChild(obj)
+  const slots = getSlots(item)
+  assert.ok(slots.general.length)
+})
 
-  it('can be rendered with value slot', () => {
-    const item = document.createElement('div')
+it('can be rendered with value slot', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
-    const att = document.createAttribute('slot')
-    att.value = 'mySlot'
-    obj.setAttributeNode(att)
+  const obj = document.createElement('div')
+  const att = document.createAttribute('slot')
+  att.value = 'mySlot'
+  obj.setAttributeNode(att)
 
-    item.appendChild(obj)
-    const slots = getSlots(item)
-    expect(slots.mySlot.length).toBeTruthy()
-  })
+  item.appendChild(obj)
+  const slots = getSlots(item)
+  assert.ok(slots.mySlot.length)
+})
 
-  it('can be rendered with multiple values slot', () => {
-    const item = document.createElement('div')
+it('can be rendered with multiple values slot', () => {
+  const item = document.createElement('div')
 
-    const obj = document.createElement('div')
-    const att = document.createAttribute('slot')
-    att.value = 'mySlot'
-    obj.setAttributeNode(att)
+  const obj = document.createElement('div')
+  const att = document.createAttribute('slot')
+  att.value = 'mySlot'
+  obj.setAttributeNode(att)
 
-    item.appendChild(obj)
+  item.appendChild(obj)
 
-    const obj2 = document.createElement('div')
-    const att2 = document.createAttribute('slot')
-    att2.value = 'mySlot'
-    obj2.setAttributeNode(att2)
+  const obj2 = document.createElement('div')
+  const att2 = document.createAttribute('slot')
+  att2.value = 'mySlot'
+  obj2.setAttributeNode(att2)
 
-    item.appendChild(obj2)
-    const slots = getSlots(item)
-    expect(slots.mySlot.length).toBeTruthy()
-  })
+  item.appendChild(obj2)
+  const slots = getSlots(item)
+  assert.ok(slots.mySlot.length)
 })

package/lib/base/utils/uuid.js

@@ -1,4 +1,4 @@
-/** @returns {string} */
+/** @returns {string} Generated RFC-4122-like identifier. */
 export function uuid () {
   return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
     /[xy]/g, function (c) {

package/lib/base/utils/uuid.test.js

@@ -1,19 +1,19 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { uuid } from './uuid.js'
 
-describe('Slots', () => {
-  it('groups separated by dashes', () => {
-    const id = uuid()
-    expect(id.split('-').length === 5).toBeTruthy()
-  })
-
-  it('total digits == 32', () => {
-    const id = uuid()
+it('groups separated by dashes', () => {
+  const id = uuid()
+  assert.ok(id.split('-').length === 5)
+})
 
-    let digits = ''
-    id.split('-').forEach(element => {
-      digits += element
-    })
+it('total digits == 32', () => {
+  const id = uuid()
 
-    expect(digits.length === 32).toBeTruthy()
+  let digits = ''
+  id.split('-').forEach(element => {
+    digits += element
   })
+
+  assert.ok(digits.length === 32)
 })

package/lib/components/audio/components/audio.js

@@ -2,12 +2,21 @@ import { Component } from '#base/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-audio'
+/**
+ * Audio recorder component.
+ * Emits:
+ * - `error` with `Error` detail on capture/rendering issues.
+ */
 export class Audio extends Component {
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
+    /** @type {'idle'|'recording'|'done'} */
     this.status = 'idle'
     this.dataURL = null
     this.timerId = null
     this.recorder = null
+    this.objectURL = null
     this.global = context.global || window
 
     return super.init()
@@ -17,6 +26,7 @@ export class Audio extends Component {
     return ['status']
   }
 
+  /** @returns {this} */
   render () {
     if (this.status === 'done') {
       this.content = `
@@ -44,7 +54,8 @@ export class Audio extends Component {
     return super.render()
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   *  @returns {Promise<void>} */
   async start (event) {
     event.stopPropagation()
     this.status = 'recording'
@@ -59,7 +70,8 @@ export class Audio extends Component {
     this.recorder.start()
   }
 
-  /** @param {Event} event */
+  /** @param {Event} event
+   *  @returns {void} */
   stop (event) {
     event.stopPropagation()
     this.status = 'done'
@@ -69,7 +81,10 @@ export class Audio extends Component {
     this.render()
   }
 
+  /** @returns {void} */
   reset () {
+    clearInterval(this.timerId)
+    this._revokeObjectURL()
     this.status = 'idle'
     this.render()
     this.dataURL = null
@@ -77,6 +92,15 @@ export class Audio extends Component {
     this.recorder = null
   }
 
+  /** @returns {void} */
+  disconnectedCallback () {
+    clearInterval(this.timerId)
+    this.recorder?.stream?.getTracks?.().forEach(track => track.stop())
+    this._revokeObjectURL()
+    super.disconnectedCallback()
+  }
+
+  /** @returns {ReturnType<typeof setInterval>} Interval handle. */
   _time () {
     let count = 0
     return setInterval(() => {
@@ -95,10 +119,19 @@ export class Audio extends Component {
   _onData (event) {
     const audio = /** @type {HTMLAudioElement} */ (
       this.querySelector('.ark-audio__audio'))
-    audio.src = this.global.URL.createObjectURL(event.data)
+    this._revokeObjectURL()
+    this.objectURL = this.global.URL.createObjectURL(event.data)
+    audio.src = this.objectURL
     const reader = new this.global.FileReader()
     reader.readAsDataURL(event.data)
     reader.onloadend = () => { this.dataURL = reader.result }
   }
+
+  /** @returns {void} */
+  _revokeObjectURL () {
+    if (!this.objectURL) return
+    this.global.URL.revokeObjectURL?.(this.objectURL)
+    this.objectURL = null
+  }
 }
 Component.define(tag, Audio, styles)