@knowark/componarkjs 1.13.4 → 1.14.1

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/capture/index.js

@@ -1 +1,2 @@
+/** Template capture component. */
 export { Capture } from './components/capture.js'

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

@@ -4,12 +4,30 @@ import './droparea.js'
 /** @import {Droparea} from './droparea.js' */
 
 const tag = 'ark-droparea-preview'
+/**
+ * Renders file previews and drag-sort ordering.
+ */
 
 export class DropareaPreview extends Component {
-  init (_context = {}) {
+  constructor () {
+    super()
+    this._objectUrls = new Map()
+    this._onDragEnd = this.handleDrop.bind(this)
+  }
+
+  /** @param {object} context
+   *  @returns {this} */
+  init (context = {}) {
     return super.init()
   }
 
+  /** @returns {void} */
+  disconnectedCallback () {
+    this.revokeAllFiles()
+    super.disconnectedCallback()
+  }
+
+  /** @returns {this} */
   render () {
     this.content = /* html */ `
          <ul data-preview-list class="ark-droparea-preview__list drag-sort-enable"></ul>
@@ -17,8 +35,12 @@ export class DropareaPreview extends Component {
     return super.render()
   }
 
+  /**
+   * @param {File} file
+   * @returns {void}
+   */
   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')
@@ -28,7 +50,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}')`
@@ -45,6 +69,7 @@ export class DropareaPreview extends Component {
     }
   }
 
+  /** @returns {void} */
   toggleVisibility () {
     const previewZone = this.select('[data-preview-list]')
     this.files.length !== 0
@@ -54,6 +79,8 @@ export class DropareaPreview extends Component {
 
   /* DragSort Functionality */
 
+  /** @param {string} listClass
+   *  @returns {void} */
   enableDragSort (listClass) {
     const sortableLists = this.getElementsByClassName(listClass)
     Array.prototype.map.call(sortableLists, (list) => {
@@ -61,51 +88,69 @@ export class DropareaPreview extends Component {
     })
   }
 
+  /** @param {HTMLUListElement} list
+   *  @returns {void} */
   enableDragList (list) {
     Array.prototype.map.call(list.children, (item) => {
       this.enableDragItem(item)
     })
   }
 
+  /** @param {HTMLElement} item
+   *  @returns {void} */
   enableDragItem (item) {
-    item.setAttribute('draggable', true)
+    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 */
+  /** @param {HTMLLIElement} item
+   * @param {DragEvent} event
+   * @returns {void} */
   handleDrag (item, event) {
     const selectedItem = item
-    const list = selectedItem.parentNode
+    const list = /** @type {HTMLElement} */ (selectedItem.parentElement)
     const x = event.clientX
     const y = event.clientY
 
     selectedItem.classList.add('drag-sort-active')
-    let swapItem =
-      document.elementFromPoint(x, y) === null
-        ? selectedItem
-        : document.elementFromPoint(x, y)
-    if (list === swapItem.parentNode) {
+    let swapItem = /** @type {ChildNode|null} */ (
+      document.elementFromPoint(x, y))
+    if (!swapItem) swapItem = selectedItem
+
+    if (list && swapItem && list === swapItem.parentNode) {
       swapItem = (
         swapItem !== selectedItem.nextSibling
           ? swapItem
           : swapItem.nextSibling)
-      list.insertBefore(selectedItem, swapItem)
+      list.insertBefore(selectedItem, /** @type {ChildNode|null} */ (swapItem))
     }
   }
 
-  handleDrop (item) {
-    const droparea = item.target.closest('ark-droparea')
+  /** @param {DragEvent} event
+   * @returns {void} */
+  handleDrop (event) {
+    const target = /** @type {HTMLElement|null} */ (event.target)
+    if (!target) return
+    const droparea = /** @type {Droparea|null} */ (target.closest('ark-droparea'))
+    if (!droparea) return
+
     droparea.preview.createNewFileList()
-    item.target.classList.remove('drag-sort-active')
+    target.classList.remove('drag-sort-active')
     droparea.preview.dispatchAlterEvent()
   }
   /* ---------------------------------------------------- */
 
+  /** @returns {void} */
   dispatchAlterEvent () {
     this.emit('alter', this.mediaList)
   }
 
+  /** @returns {void} */
   createNewFileList () {
     const nodeList = this.querySelectorAll('li')
     const newList = []
@@ -116,15 +161,61 @@ export class DropareaPreview extends Component {
     this.droparea.fileList = newList
   }
 
+  /**
+   * @param {File} file
+   * @returns {boolean}
+   */
   fileExists (file) {
     return this.files.some((item) => item.name === file.name)
   }
 
+  /** @param {File} file
+   * @returns {string} */
+  getObjectURL (file) {
+    if (this._objectUrls.has(file)) return this._objectUrls.get(file)
+
+    const url = URL.createObjectURL(file)
+    this._objectUrls.set(file, url)
+    return url
+  }
+
+  /** @param {File} file
+   * @returns {void} */
+  revokeFile (file) {
+    const url = this._objectUrls.get(file)
+    if (!url) return
+
+    this._objectUrls.delete(file)
+    URL.revokeObjectURL?.(url)
+  }
+
+  /** @returns {void} */
+  revokeAllFiles () {
+    for (const url of this._objectUrls.values()) {
+      URL.revokeObjectURL?.(url)
+    }
+    this._objectUrls.clear()
+  }
+
+  /** @returns {void} */
+  clearPreview () {
+    const previewZone = this.select('[data-preview-list]')
+    previewZone && (previewZone.textContent = '')
+    this.toggleVisibility()
+  }
+
+  /** @param {File} file
+   * @param {MouseEvent} event
+   * @returns {void} */
   removeFile (file, event) {
-    const element = event.target
+    const element = /** @type {HTMLElement|null} */ (event.target)
+    if (!element) return
     const fileIndex = this.droparea.fileList.indexOf(file)
+    if (fileIndex < 0) return
+
+    this.revokeFile(file)
     this.droparea.fileList.splice(fileIndex, 1)
-    element.parentNode.remove()
+    element.parentElement?.remove()
     this.selectAll('li').forEach((item, index) =>
       item.setAttribute('index', String(index))
     )
@@ -132,14 +223,18 @@ export class DropareaPreview extends Component {
     this.dispatchAlterEvent()
   }
 
+  /** @param {File} file
+   * @returns {number} */
   fileIndex (file) {
     return this.droparea.fileList.indexOf(file)
   }
 
+  /** @returns {Droparea} */
   get droparea () {
-    return /** @type {Droparea} */ (this.closest('.ark-droparea'))
+    return /** @type {Droparea} */ (this.closest('ark-droparea'))
   }
 
+  /** @returns {Array<{name:string,type:string,size:number,url:string}>} */
   get mediaList () {
     const mediaList = []
     this.droparea.fileList.map((file) => {
@@ -147,7 +242,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