@knowark/componarkjs 1.13.4 → 1.14.0

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

@@ -20,10 +20,9 @@ export class Emit extends Component {
 
     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)
@@ -40,5 +39,26 @@ export class Emit extends Component {
     element?.remove()
     return element
   }
+
+  _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
+    }
+  }
+
+  _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/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')
 })

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

@@ -20,15 +20,16 @@ export class List extends Component {
 
   render () {
     const listData = this.select('data')
-    const list = JSON.parse(listData?.textContent || null)
+    const list = this._parseJSON(listData?.textContent)
     const source = list || this.source
+    const sourceList = Array.isArray(source) ? source : []
 
     const itemTemplate = (this.select('template'))?.innerHTML
     this.template = itemTemplate ? this._format(itemTemplate) : this.template
 
     this.content = ''
 
-    source.forEach((data, index) => {
+    sourceList.forEach((data, index) => {
       const item = new ListItem()
 
       if (this.hasAttribute('click-disabled')) {
@@ -59,7 +60,24 @@ export class List extends Component {
   }
 
   _format (template) {
-    return (data) => Function(`return \`${template}\``).call(data)
+    let render = null
+
+    try {
+      render = Function(`return \`${template}\``)
+    } catch (error) {
+      this.emit('error', error)
+    }
+
+    return (data) => {
+      if (!render) return ''
+
+      try {
+        return render.call(data)
+      } catch (error) {
+        this.emit('error', error)
+        return ''
+      }
+    }
   }
 
   /** @param {MouseEvent} event */
@@ -89,8 +107,20 @@ export class List extends Component {
 
     const target = /** @type {HTMLElement} */ (event.target)
     const item = /** @type {ListItem} */ (target.closest('ark-list-item'))
+    if (!item) return
 
     this.delete(Number(item.index))
   }
+
+  _parseJSON (source) {
+    if (!source) return null
+
+    try {
+      return JSON.parse(source)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
+  }
 }
 Component.define(tag, List)