@knowark/componarkjs 1.13.4 → 1.14.1

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

@@ -3,6 +3,9 @@ import { ListItem } from './item.js'
 
 const tag = 'ark-list'
 
+/**
+ * List component (array-driven rendering).
+ */
 export class List extends Component {
   constructor () {
     super()
@@ -10,7 +13,8 @@ export class List extends Component {
     this.addEventListener('delete', this._onDeleted.bind(this))
   }
 
-  /** @param {Object} context */
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.source = /** @type {Array} */ (context.source) || this.source || []
     this.template = context.template || this.template || ((data) => `${data}`)
@@ -18,17 +22,19 @@ export class List extends Component {
     return super.init()
   }
 
+  /** @returns {this} */
   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')) {
@@ -47,7 +53,10 @@ export class List extends Component {
     return super.render()
   }
 
-  /** @param {number} start @param {number?} deleteCount  */
+  /** @param {number} start
+   *  @param {number} [deleteCount=1]
+   *  @returns {void}
+   */
   delete (start, deleteCount = 1) {
     this.source.splice(start, deleteCount)
     const deletions = []
@@ -58,11 +67,31 @@ export class List extends Component {
     deletions.map(item => item.remove())
   }
 
+  /** @param {string} template
+   * @returns {(data: any)=>string} */
   _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 */
+  /** @param {MouseEvent} event
+   * @returns {void} */
   _onSelected (event) {
     event.stopImmediatePropagation()
 
@@ -83,14 +112,29 @@ export class List extends Component {
     )
   }
 
-  /** @param {MouseEvent} event */
+  /** @param {MouseEvent} event
+   * @returns {void} */
   _onDeleted (event) {
     event.stopImmediatePropagation()
 
     const target = /** @type {HTMLElement} */ (event.target)
     const item = /** @type {ListItem} */ (target.closest('ark-list-item'))
+    if (!item) return
 
     this.delete(Number(item.index))
   }
+
+  /** @param {string|null} source
+   * @returns {any[]|null} */
+  _parseJSON (source) {
+    if (!source) return null
+
+    try {
+      return JSON.parse(source)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
+  }
 }
 Component.define(tag, List)