@knowark/componarkjs 1.13.4 → 1.14.1

package/lib/components/droparea/styles/index.js

@@ -1,3 +1,7 @@
 // @ts-nocheck
 import styles from './ark.css.js'
-export default styles
+
+/** @type {string} */
+const stylesText = styles
+
+export default stylesText

package/lib/components/emit/components/emit.js

@@ -1,6 +1,9 @@
 import { Component } from "#base/index.js"
 
 const tag = 'ark-emit'
+/**
+ * Declarative event forwarding component.
+ */
 export class Emit extends Component {
   constructor () {
     super()
@@ -15,30 +18,57 @@ export class Emit extends Component {
     return ['receive', 'dispatch', 'bind']
   }
 
+  /** @param {CustomEvent} event
+   * @returns {void} */
   handle (event) {
     const detail = Object.assign({}, event.detail)
 
     let data = null
     if (this.bind && this.source) {
-      const element = this.closest(this.bind)
-      data = Function(`return ${this.source.trim()}`).call(element)
+      data = this._resolveBoundData()
     } else if (this.source) {
-      data = JSON.parse(this.source)
+      data = this._parseJSON(this.source)
     }
 
     Object.assign(detail, data)
 
-    const value = event.target.value
+    const value = /** @type {HTMLInputElement|null} */ (event.target)?.value
     if (value) Object.assign(detail, { value })
 
     const type = this.dispatch || 'emit'
     this.emit(type, detail)
   }
 
+  /** @param {string} selector
+   * @returns {Element|null} */
   _pop (selector) {
     const element = this.querySelector(selector)
     element?.remove()
     return element
   }
+
+  /** @returns {any|null} */
+  _resolveBoundData () {
+    const element = this.closest(this.bind)
+    if (!element) return null
+
+    try {
+      return Function(`return ${this.source.trim()}`).call(element)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
+  }
+
+  /** @param {string} source
+   * @returns {object|null} */
+  _parseJSON (source) {
+    try {
+      return JSON.parse(source)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
+  }
 }
 Component.define(tag, Emit)

package/lib/components/emit/components/emit.test.js

@@ -1,169 +1,227 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import './emit.js'
 
-describe('Emit', () => {
-  let container = null
+let container = null
 
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = `
+  <ark-emit></ark-emit>
+  `
 
-  it('can be instantiated', () => {
-    container.innerHTML = `
-    <ark-emit></ark-emit>
-    `
+  const emit = container.querySelector('ark-emit')
+  assert.deepStrictEqual(emit, emit.init())
+})
 
-    const emit = container.querySelector('ark-emit')
-    expect(emit).toEqual(emit.init())
-  })
+it('emits a target event when handling the one listened at', () => {
+  setup();
+  container.innerHTML = `
+  <ark-emit receive="click" dispatch="custom">
+    <button>Sending a click event when pressed!</button>
+  </ark-emit>
+  `
+  const emit = container.querySelector('ark-emit')
+  let customCalled = false
+  emit.addEventListener('custom', (event) => { customCalled = true })
 
-  it('emits a target event when handling the one listened at', () => {
-    container.innerHTML = `
-    <ark-emit receive="click" dispatch="custom">
-      <button>Sending a click event when pressed!</button>
-    </ark-emit>
-    `
-    const emit = container.querySelector('ark-emit')
-    let customCalled = false
-    emit.addEventListener('custom', (event) => { customCalled = true })
+  container.querySelector('button').click()
 
-    container.querySelector('button').click()
+  assert.strictEqual(customCalled, true)
+})
 
-    expect(customCalled).toBe(true)
-  })
+it('listens to click events and dispatches emit events by default', () => {
+  setup();
+  container.innerHTML = `
+  <ark-emit>
+    <button>Sending a click event when pressed!</button>
+  </ark-emit>
+  `
+  const emit = container.querySelector('ark-emit')
+  let emitCalled = false
+  emit.addEventListener('emit', (event) => { emitCalled = true })
 
-  it('listens to click events and dispatches emit events by default', () => {
-    container.innerHTML = `
-    <ark-emit>
-      <button>Sending a click event when pressed!</button>
-    </ark-emit>
-    `
-    const emit = container.querySelector('ark-emit')
-    let emitCalled = false
-    emit.addEventListener('emit', (event) => { emitCalled = true })
+  container.querySelector('button').click()
 
-    container.querySelector('button').click()
+  assert.strictEqual(emitCalled, true)
+})
 
-    expect(emitCalled).toBe(true)
+it('it carries over the json data given to it', () => {
+  setup();
+  const data = {
+    id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+    name: 'John Doe'
+  }
+  container.innerHTML = `
+  <ark-emit>
+    <data>${JSON.stringify(data)}</data>
+    <button>Sending a click event when pressed!</button>
+  </ark-emit>
+  `
+
+  const emit = container.querySelector('ark-emit')
+
+  const dataElement = emit.querySelector('data')
+  assert.strictEqual(dataElement, null)
+
+  emit.addEventListener('emit', (event) => {
+    const detail = event.detail
+    assert.deepStrictEqual(detail, data)
   })
 
-  it('it carries over the json data given to it', () => {
-    expect.assertions(2)
-    const data = {
-      id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
-      name: 'John Doe'
-    }
-    container.innerHTML = `
-    <ark-emit>
+  container.querySelector('button').click()
+})
+
+it('it merges upstream event details', () => {
+  setup();
+  const data = {
+    id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+    name: 'John Doe'
+  }
+  container.innerHTML = `
+  <ark-emit data-outer receive="inner" dispatch="outer">
+    <data>
+      {
+        "age": 34,
+        "job": "programmer"
+      }
+    </data>
+    <ark-emit data-inner dispatch="inner">
       <data>${JSON.stringify(data)}</data>
       <button>Sending a click event when pressed!</button>
     </ark-emit>
-    `
-
-    const emit = container.querySelector('ark-emit')
+  </ark-emit>
+  `
 
-    const dataElement = emit.querySelector('data')
-    expect(dataElement).toBe(null)
-
-    emit.addEventListener('emit', (event) => {
-      const detail = event.detail
-      expect(detail).toEqual(data)
+  const emit = container.querySelector('[data-outer]')
+  emit.addEventListener('outer', (event) => {
+    const detail = event.detail
+    assert.deepStrictEqual(detail, {
+      id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
+      name: 'John Doe',
+      age: 34,
+      job: 'programmer'
     })
+  })
+
+  container.querySelector('[data-inner]').click()
+})
 
-    container.querySelector('button').click()
+it('receives the target.value of regular events', async () => {
+  setup();
+  container.innerHTML = `
+  <ark-emit receive="change">
+    <input type="text"></input>
+  </ark-emit>
+  `
+  const input = container.querySelector('input')
+  const inputEvent = new Event('change', { bubbles: true })
+  const target = { name: 'input', value: 'XYZ' }
+  Object.defineProperty(
+    inputEvent, 'target', { writable: false, value: target })
+
+  const emit = container.querySelector('ark-emit')
+  emit.addEventListener('emit', (event) => {
+    const detail = event.detail
+    assert.deepStrictEqual(detail, { value: 'XYZ' })
   })
 
-  it('it merges upstream event details', () => {
-    expect.assertions(1)
-    const data = {
-      id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
-      name: 'John Doe'
-    }
-    container.innerHTML = `
-    <ark-emit data-outer receive="inner" dispatch="outer">
-      <data>
-        {
-          "age": 34,
-          "job": "programmer"
-        }
-      </data>
-      <ark-emit data-inner dispatch="inner">
-        <data>${JSON.stringify(data)}</data>
+  input.dispatchEvent(inputEvent)
+})
+
+it('binds to the given ancestor referenced by a selector', async () => {
+  setup();
+  container.innerHTML = `
+  <div class="grandparent" data-name="John", data-surname="Doe">
+    <div class="parent">
+      <ark-emit bind=".grandparent">
+        <data>
+          {
+            name: this.dataset.name,
+            surname: this.dataset.surname
+          }
+        </data>
         <button>Sending a click event when pressed!</button>
       </ark-emit>
-    </ark-emit>
-    `
-
-    const emit = container.querySelector('[data-outer]')
-    emit.addEventListener('outer', (event) => {
-      const detail = event.detail
-      expect(detail).toEqual({
-        id: '7a792bda-6f8a-44ed-a63a-a48bba1e76bf',
-        name: 'John Doe',
-        age: 34,
-        job: 'programmer'
-      })
+    </div>
+  </div>
+  `
+
+  const emit = container.querySelector('ark-emit')
+  emit.addEventListener('emit', (event) => {
+    const { detail } = event
+    assert.deepStrictEqual(detail, {
+      name: 'John',
+      surname: 'Doe'
     })
+  })
+
+  container.querySelector('button').click()
+})
 
-    container.querySelector('[data-inner]').click()
+it('emits error when given invalid JSON data', () => {
+  setup()
+  container.innerHTML = `
+  <ark-emit>
+    <data>{ invalid json }</data>
+    <button>Sending a click event when pressed!</button>
+  </ark-emit>
+  `
+  const emit = container.querySelector('ark-emit')
+  let errorEvent = null
+  emit.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('receives the target.value of regular events', async () => {
-    expect.assertions(1)
+  container.querySelector('button').click()
 
-    container.innerHTML = `
-    <ark-emit receive="change">
-      <input type="text"></input>
-    </ark-emit>
-    `
-    const input = container.querySelector('input')
-    const inputEvent = new Event('change', { bubbles: true })
-    const target = { name: 'input', value: 'XYZ' }
-    Object.defineProperty(
-      inputEvent, 'target', { writable: false, value: target })
-
-    const emit = container.querySelector('ark-emit')
-    emit.addEventListener('emit', (event) => {
-      const detail = event.detail
-      expect(detail).toEqual({ value: 'XYZ' })
-    })
+  assert.ok(errorEvent)
+})
 
-    input.dispatchEvent(inputEvent)
+it('emits error when bound source expression is invalid', () => {
+  setup()
+  container.innerHTML = `
+  <div class="grandparent">
+    <ark-emit bind=".grandparent">
+      <data>{ invalid:</data>
+      <button>Send</button>
+    </ark-emit>
+  </div>
+  `
+  const emit = container.querySelector('ark-emit')
+  let errorEvent = null
+  emit.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('binds to the given ancestor referenced by a selector', async () => {
-    expect.assertions(1)
-
-    container.innerHTML = `
-    <div class="grandparent" data-name="John", data-surname="Doe">
-      <div class="parent">
-        <ark-emit bind=".grandparent">
-          <data>
-            {
-              name: this.dataset.name,
-              surname: this.dataset.surname
-            }
-          </data>
-          <button>Sending a click event when pressed!</button>
-        </ark-emit>
-      </div>
-    </div>
-    `
-
-    const emit = container.querySelector('ark-emit')
-    emit.addEventListener('emit', (event) => {
-      const { detail } = event
-      expect(detail).toEqual({
-        name: 'John',
-        surname: 'Doe'
-      })
-    })
+  container.querySelector('button').click()
 
-    container.querySelector('button').click()
+  assert.ok(errorEvent)
+})
+
+it('ignores bound expressions when the ancestor selector does not match', () => {
+  setup()
+  container.innerHTML = `
+  <div class="parent">
+    <ark-emit bind=".missing">
+      <data>{ value: 'A' }</data>
+      <button>Send</button>
+    </ark-emit>
+  </div>
+  `
+  const emit = container.querySelector('ark-emit')
+  let detail = null
+  emit.addEventListener('emit', (event) => {
+    detail = event.detail
   })
+
+  container.querySelector('button').click()
+
+  assert.deepStrictEqual(detail, {})
 })

package/lib/components/emit/index.js

@@ -1 +1,2 @@
+/** Event emitter bridge component. */
 export { Emit } from './components/emit.js'

package/lib/components/index.js

@@ -1,3 +1,4 @@
+/** Aggregated component exports. */
 export * from './audio/index.js'
 export * from './camera/index.js'
 export * from './capture/index.js'
@@ -6,4 +7,4 @@ export * from './list/index.js'
 export * from './paginator/index.js'
 export * from './spinner/index.js'
 export * from './splitview/index.js'
-export * from './translate/index.js'
+export * from './translate/index.js'

package/lib/components/list/components/item.js

@@ -1,7 +1,12 @@
 import { Component } from "#base/index.js"
 
 const tag = 'ark-list-item'
+/**
+ * Single list item for list component.
+ */
 export class ListItem extends Component {
+  /** @param {object} context
+   * @returns {this} */
   init (context = {}) {
     this.index = context.index
     this.data = context.data || null
@@ -14,6 +19,7 @@ export class ListItem extends Component {
     return ['index']
   }
 
+  /** @returns {this} */
   render () {
     this.content = this.template(this.data)
     return super.render()

package/lib/components/list/components/item.test.js

@@ -1,91 +1,92 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import './list.js'
 import { ListItem } from './item.js'
 
-describe('List item', () => {
-  let container = null
+let container = null
 
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
-
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
 
-  it('can be instantiated', () => {
-    container.innerHTML = `
-      <ark-list></ark-list>
-    `
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = `
+    <ark-list></ark-list>
+  `
 
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
-    list.render()
-    const item = list.querySelector('ark-list-item')
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia', 'Uruguay', 'Brasil', 'Perú']
+  list.render()
+  const item = list.querySelector('ark-list-item')
 
-    expect(item).toEqual(item.init())
-  })
+  assert.deepStrictEqual(item, item.init())
+})
 
-  it('can be rendered with data', () => {
-    container.innerHTML = `
-      <ark-list></ark-list>
-    `
+it('can be rendered with data', () => {
+  setup();
+  container.innerHTML = `
+    <ark-list></ark-list>
+  `
 
-    const list = container.querySelector('ark-list')
-    list.source = ['Colombia']
-    list.render()
-    const item = list.querySelector('ark-list-item')
+  const list = container.querySelector('ark-list')
+  list.source = ['Colombia']
+  list.render()
+  const item = list.querySelector('ark-list-item')
 
-    item.data = 'my data'
-    item.render()
+  item.data = 'my data'
+  item.render()
 
-    expect(item.innerHTML.trim()).toEqual('my data')
-  })
+  assert.deepStrictEqual(item.innerHTML.trim(), 'my data')
+})
 
-  it('can be rendered with template', () => {
-    container.innerHTML = `
-      <ark-list data-template-list></ark-list>
-    `
+it('can be rendered with template', () => {
+  setup();
+  container.innerHTML = `
+    <ark-list data-template-list></ark-list>
+  `
 
-    const list = container.querySelector('[data-template-list]')
-    list.source = ['Colombia']
-    list.render()
-    const item = list.querySelector('ark-list-item')
+  const list = container.querySelector('[data-template-list]')
+  list.source = ['Colombia']
+  list.render()
+  const item = list.querySelector('ark-list-item')
 
-    item.data = 'my data'
-    item.template = data => /* html */ `<span>${data}</span>`
-    item.render()
+  item.data = 'my data'
+  item.template = data => /* html */ `<span>${data}</span>`
+  item.render()
 
-    expect(item.innerHTML.trim()).toEqual('<span>my data</span>')
-  })
+  assert.deepStrictEqual(item.innerHTML.trim(), '<span>my data</span>')
+})
 
-  it('can be rendered with template', () => {
-    container.innerHTML = `
-      <ark-list data-template-list></ark-list>
-    `
+it('can be rendered with template', () => {
+  setup();
+  container.innerHTML = `
+    <ark-list data-template-list></ark-list>
+  `
 
-    const list = container.querySelector('[data-template-list]')
-    list.source = ['Colombia']
-    list.render()
-    const item = list.querySelector('ark-list-item')
+  const list = container.querySelector('[data-template-list]')
+  list.source = ['Colombia']
+  list.render()
+  const item = list.querySelector('ark-list-item')
 
-    item.data = 'my data'
-    item.template = data => /* html */ `<span>${data}</span>`
-    item.render()
+  item.data = 'my data'
+  item.template = data => /* html */ `<span>${data}</span>`
+  item.render()
 
-    item.addEventListener('list-item:selected', event => {
-      expect(event.detail.data).toEqual('my data')
-    })
-    item.click()
+  item.addEventListener('list-item:selected', event => {
+    assert.deepStrictEqual(event.detail.data, 'my data')
   })
+  item.click()
+})
 
-  it('can be rendered without template', () => {
-    const item = new ListItem()
-    item.init({
-      data: 'my data'
-    }).render()
+it('can be rendered without template', () => {
+  setup();
+  const item = new ListItem()
+  item.init({
+    data: 'my data'
+  }).render()
 
-    expect(item.innerHTML.trim()).toEqual('my data')
-  })
+  assert.deepStrictEqual(item.innerHTML.trim(), 'my data')
 })