@knowark/componarkjs 1.13.3 → 1.14.0

package/lib/components/capture/components/capture.js

@@ -1,11 +1,11 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from "#base/index.js"
 
 const tag = 'ark-capture'
 export class Capture extends Component {
   constructor () {
     super()
-    const type = this.receive || 'emit'
-    this.addEventListener(type, this.handle.bind(this))
+    this.receive = this.receive || 'emit'
+    this.addEventListener(this.receive, this.handle.bind(this))
   }
 
   reflectedProperties () {
@@ -14,7 +14,7 @@ export class Capture extends Component {
 
   /** @param {Object} context */
   init (context = {}) {
-    const data = JSON.parse(this._pop(':scope > data')?.textContent || null)
+    const data = this._parseJSON(this._pop(':scope > data')?.textContent)
     this.source = /** @type {object} */ (
       context.source) || data || this.source || {}
     this.template = context.template || this.template || (
@@ -42,7 +42,24 @@ export class Capture 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 ''
+      }
+    }
   }
 
   _pop (selector) {
@@ -50,5 +67,16 @@ export class Capture extends Component {
     element?.remove()
     return element
   }
+
+  _parseJSON (source) {
+    if (!source) return null
+
+    try {
+      return JSON.parse(source)
+    } catch (error) {
+      this.emit('error', error)
+      return null
+    }
+  }
 }
 Component.define(tag, Capture)

package/lib/components/capture/components/capture.test.js

@@ -1,112 +1,180 @@
+import { it } from 'node:test'
+import assert from 'node:assert/strict'
 import './capture.js'
 
-describe('Capture', () => {
-  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-capture></ark-capture>
+  `
 
-  it('can be instantiated', () => {
-    container.innerHTML = `
-    <ark-capture></ark-capture>
-    `
+  const capture = container.querySelector('ark-capture')
+  assert.deepStrictEqual(capture, capture.init())
+})
 
-    const capture = container.querySelector('ark-capture')
-    expect(capture).toEqual(capture.init())
-  })
+it('renders the given data detail', () => {
+  setup()
+  container.innerHTML = `
+  <ark-capture>
+    <data>
+      {
+        "name": "John Doe",
+        "job": "Programmer"
+      }
+    </data>
+    <output></output>
+  </ark-capture>
+  `
+
+  const capture = container.querySelector('ark-capture')
+  capture.init().render()
+  const output = capture.querySelector('output')
+
+  assert.deepStrictEqual(capture.children.length, 1)
+  assert.ok(output.innerHTML.includes('John Doe'))
+  assert.ok(output.innerHTML.includes('Programmer'))
+})
 
-  it('renders the given data detail', () => {
-    container.innerHTML = `
-    <ark-capture>
-      <data>
-        {
-          "name": "John Doe",
-          "job": "Programmer"
-        }
-      </data>
-      <output></output>
-    </ark-capture>
-    `
-
-    const capture = container.querySelector('ark-capture')
-    const output = capture.querySelector('output')
-
-    expect(capture.children.length).toEqual(1)
-    expect(output.innerHTML).toContain('John Doe')
-    expect(output.innerHTML).toContain('Programmer')
-  })
+it('renders json data on the given template on the given output', () => {
+  setup()
+  container.innerHTML = `
+  <ark-capture>
+    <data>
+      {
+        "name": "John Doe",
+        "job": "Programmer"
+      }
+    </data>
+    <template>
+      <div id="output">
+        <strong>\${this.name}</strong>
+        <strong>\${this.job}</strong>
+      </div>
+    </template>
+    <output></output>
+  </ark-capture>
+  `
+
+  const capture = container.querySelector('ark-capture')
+  capture.init().render()
+  const output = capture.querySelector('output')
+
+  assert.deepStrictEqual(capture.children.length, 1)
+  assert.ok(output.children[0].innerHTML.includes('John Doe'))
+  assert.ok(output.children[0].innerHTML.includes('Programmer'))
+})
+
+it('captures specific custom events and renders its details', () => {
+  setup()
+  container.innerHTML = `
+  <ark-capture receive="custom">
+    <template>
+      <div id="output">
+        <strong>\${this.name}</strong>
+        <strong>\${this.job}</strong>
+      </div>
+    </template>
+    <output></output>
+    <p>Adjoint Element</p>
+  </ark-capture>
+  `
+
+  const capture = container.querySelector('ark-capture')
+  capture.init().render()
+  capture.addEventListener('custom', capture.handle.bind(capture))
+  const output = capture.querySelector('output')
+
+  capture.dispatchEvent(new CustomEvent('custom', {
+    bubbles: true,
+    detail: {
+      name: 'Richard Roe', job: 'Analyst'
+    }
+  }))
+
+  assert.deepStrictEqual(capture.children.length, 2)
+  assert.ok(output.children[0].innerHTML.includes('Richard Roe'))
+  assert.ok(output.children[0].innerHTML.includes('Analyst'))
+
+  capture.dispatchEvent(new CustomEvent('custom', {
+    bubbles: true,
+    detail: {
+      name: 'Megan More', job: 'Manager'
+    }
+  }))
+
+  assert.deepStrictEqual(capture.children.length, 2)
+  assert.ok(output.children[0].innerHTML.includes('Megan More'))
+  assert.ok(output.children[0].innerHTML.includes('Manager'))
+})
 
-  it('renders json data on the given template on the given output', () => {
-    container.innerHTML = `
-    <ark-capture>
-      <data>
-        {
-          "name": "John Doe",
-          "job": "Programmer"
-        }
-      </data>
-      <template>
-        <div id="output">
-          <strong>\${this.name}</strong>
-          <strong>\${this.job}</strong>
-        </div>
-      </template>
-      <output></output>
-    </ark-capture>
-    `
-
-    const capture = container.querySelector('ark-capture')
-    const output = capture.querySelector('output')
-
-    expect(capture.children.length).toEqual(1)
-    expect(output.children[0].innerHTML).toContain('John Doe')
-    expect(output.children[0].innerHTML).toContain('Programmer')
+it('emits error when data JSON is invalid', () => {
+  setup()
+  const holder = document.createElement('div')
+  holder.innerHTML = `
+  <ark-capture>
+    <data>{ invalid json }</data>
+    <output></output>
+  </ark-capture>
+  `
+  const capture = holder.querySelector('ark-capture')
+  let errorEvent = null
+  capture.addEventListener('error', (event) => {
+    errorEvent = event
   })
 
-  it('captures specific custom events and renders its details', () => {
-    container.innerHTML = `
-    <ark-capture receive="custom">
-      <template>
-        <div id="output">
-          <strong>\${this.name}</strong>
-          <strong>\${this.job}</strong>
-        </div>
-      </template>
-      <output></output>
-      <p>Adjoint Element</p>
-    </ark-capture>
-    `
-
-    const capture = container.querySelector('ark-capture')
-    const output = capture.querySelector('output')
-
-    capture.dispatchEvent(new CustomEvent('custom', {
-      bubbles: true,
-      detail: {
-        name: 'Richard Roe', job: 'Analyst'
-      }
-    }))
+  capture.init().render()
 
-    expect(capture.children.length).toEqual(2)
-    expect(output.children[0].innerHTML).toContain('Richard Roe')
-    expect(output.children[0].innerHTML).toContain('Analyst')
+  assert.ok(errorEvent)
+})
 
-    capture.dispatchEvent(new CustomEvent('custom', {
-      bubbles: true,
-      detail: {
-        name: 'Megan More', job: 'Manager'
-      }
-    }))
+it('emits error when template cannot be compiled', () => {
+  setup()
+  const holder = document.createElement('div')
+  holder.innerHTML = `
+  <ark-capture>
+    <data>{"name":"John"}</data>
+    <template>\${this.name</template>
+    <output></output>
+  </ark-capture>
+  `
+  const capture = holder.querySelector('ark-capture')
+  let errorEvent = null
+  capture.addEventListener('error', (event) => {
+    errorEvent = event
+  })
 
-    expect(capture.children.length).toEqual(2)
-    expect(output.children[0].innerHTML).toContain('Megan More')
-    expect(output.children[0].innerHTML).toContain('Manager')
+  capture.init().render()
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(capture.querySelector('output').innerHTML, '')
+})
+
+it('emits error when template evaluation fails at runtime', () => {
+  setup()
+  const holder = document.createElement('div')
+  holder.innerHTML = `
+  <ark-capture>
+    <data>{"name":"John"}</data>
+    <template>\${this.profile.name}</template>
+    <output></output>
+  </ark-capture>
+  `
+  const capture = holder.querySelector('ark-capture')
+  let errorEvent = null
+  capture.addEventListener('error', (event) => {
+    errorEvent = event
   })
+
+  capture.init().render()
+
+  assert.ok(errorEvent)
+  assert.deepStrictEqual(capture.querySelector('output').innerHTML, '')
 })

package/lib/components/droparea/components/droparea-preview.js

@@ -1,13 +1,26 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from '#base/index.js'
 import './droparea.js'
-// @ts-ignore
+
+/** @import {Droparea} from './droparea.js' */
+
 const tag = 'ark-droparea-preview'
 
 export class DropareaPreview extends Component {
+  constructor () {
+    super()
+    this._objectUrls = new Map()
+    this._onDragEnd = this.handleDrop.bind(this)
+  }
+
   init (_context = {}) {
     return super.init()
   }
 
+  disconnectedCallback () {
+    this.revokeAllFiles()
+    super.disconnectedCallback()
+  }
+
   render () {
     this.content = /* html */ `
          <ul data-preview-list class="ark-droparea-preview__list drag-sort-enable"></ul>
@@ -16,7 +29,7 @@ export class DropareaPreview extends Component {
   }
 
   previewFile (file) {
-    const blobUrl = URL.createObjectURL(file)
+    const blobUrl = this.getObjectURL(file)
     const fileType = file.type.split('/')[0]
     const previewZone = this.select('[data-preview-list]')
     const picture = document.createElement('li')
@@ -26,7 +39,9 @@ export class DropareaPreview extends Component {
     removeButton.className = 'ark-droparea__remove'
 
     if (fileType != 'image') {
-      picture.innerHTML = `<p>${file.name}</p>`
+      const text = document.createElement('p')
+      text.textContent = file.name
+      picture.appendChild(text)
       picture.setAttribute('data', `${blobUrl}`)
     } else {
       picture.style.backgroundImage = `url('${blobUrl}')`
@@ -38,7 +53,7 @@ export class DropareaPreview extends Component {
     this.toggleVisibility()
 
     if (!this.droparea.hasAttribute('single')) {
-      picture.setAttribute('index', this.fileIndex(file))
+      picture.setAttribute('index', String(this.fileIndex(file)))
       this.enableDragSort('drag-sort-enable')
     }
   }
@@ -66,9 +81,12 @@ export class DropareaPreview extends Component {
   }
 
   enableDragItem (item) {
+    if (item.hasAttribute('data-drag-enabled')) return
+
+    item.setAttribute('data-drag-enabled', '')
     item.setAttribute('draggable', true)
     item.addEventListener('drag', this.handleDrag.bind(this, item))
-    item.addEventListener('dragend', this.handleDrop, false)
+    item.addEventListener('dragend', this._onDragEnd, false)
   }
 
   /* istanbul ignore next */
@@ -92,10 +110,12 @@ export class DropareaPreview extends Component {
     }
   }
 
-  handleDrop (item) {
-    const droparea = item.target.closest('ark-droparea')
+  handleDrop (event) {
+    const droparea = event.target.closest('ark-droparea')
+    if (!droparea) return
+
     droparea.preview.createNewFileList()
-    item.target.classList.remove('drag-sort-active')
+    event.target.classList.remove('drag-sort-active')
     droparea.preview.dispatchAlterEvent()
   }
   /* ---------------------------------------------------- */
@@ -109,23 +129,54 @@ export class DropareaPreview extends Component {
     const newList = []
     nodeList.forEach((item, index) => {
       newList.push(this.droparea.fileList[item.getAttribute('index')])
-      item.setAttribute('index', index)
+      item.setAttribute('index', String(index))
     })
     this.droparea.fileList = newList
   }
 
   fileExists (file) {
-    const present = this.files.some((item) => item.name === file.name)
-    return present
+    return this.files.some((item) => item.name === file.name)
+  }
+
+  getObjectURL (file) {
+    if (this._objectUrls.has(file)) return this._objectUrls.get(file)
+
+    const url = URL.createObjectURL(file)
+    this._objectUrls.set(file, url)
+    return url
+  }
+
+  revokeFile (file) {
+    const url = this._objectUrls.get(file)
+    if (!url) return
+
+    this._objectUrls.delete(file)
+    URL.revokeObjectURL?.(url)
+  }
+
+  revokeAllFiles () {
+    for (const url of this._objectUrls.values()) {
+      URL.revokeObjectURL?.(url)
+    }
+    this._objectUrls.clear()
+  }
+
+  clearPreview () {
+    const previewZone = this.select('[data-preview-list]')
+    previewZone && (previewZone.textContent = '')
+    this.toggleVisibility()
   }
 
   removeFile (file, event) {
     const element = event.target
     const fileIndex = this.droparea.fileList.indexOf(file)
+    if (fileIndex < 0) return
+
+    this.revokeFile(file)
     this.droparea.fileList.splice(fileIndex, 1)
     element.parentNode.remove()
     this.selectAll('li').forEach((item, index) =>
-      item.setAttribute('index', index)
+      item.setAttribute('index', String(index))
     )
     this.toggleVisibility()
     this.dispatchAlterEvent()
@@ -136,7 +187,7 @@ export class DropareaPreview extends Component {
   }
 
   get droparea () {
-    return this.closest('.ark-droparea')
+    return /** @type {Droparea} */ (this.closest('ark-droparea'))
   }
 
   get mediaList () {
@@ -146,7 +197,7 @@ export class DropareaPreview extends Component {
         name: file.name,
         type: file.type,
         size: file.size,
-        url: URL.createObjectURL(file)
+        url: this.getObjectURL(file)
       })
     })
     return mediaList