@knowark/componarkjs 1.13.3 → 1.14.0

package/lib/components/splitview/components/splitview.master.js

@@ -1,11 +1,12 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from "#base/index.js"
 
 const tag = 'ark-splitview-master'
 export class SplitViewMaster extends Component {
   constructor () {
     super()
-    this.addEventListener(
-      this.masterEvent, this.onMasterEvent.bind(this))
+    this._onMasterEvent = this.onMasterEvent.bind(this)
+    this._boundMasterEvent = null
+    this.masterEvent = this.masterEvent
   }
 
   init (context = {}) {
@@ -17,6 +18,31 @@ export class SplitViewMaster extends Component {
     return ['masterEvent']
   }
 
+  connectedCallback () {
+    this._syncMasterEventListener()
+    super.connectedCallback()
+  }
+
+  disconnectedCallback () {
+    this._removeMasterEventListener()
+    super.disconnectedCallback()
+  }
+
+  _syncMasterEventListener () {
+    const masterEvent = (this.masterEvent || '').trim()
+    if (!masterEvent || masterEvent === this._boundMasterEvent) return
+
+    this._removeMasterEventListener()
+    this.addEventListener(masterEvent, this._onMasterEvent)
+    this._boundMasterEvent = masterEvent
+  }
+
+  _removeMasterEventListener () {
+    if (!this._boundMasterEvent) return
+    this.removeEventListener(this._boundMasterEvent, this._onMasterEvent)
+    this._boundMasterEvent = null
+  }
+
   /** @param {CustomEvent} event */
   onMasterEvent (event) {
     event.stopPropagation()

package/lib/components/splitview/components/splitview.master.test.js

@@ -1,55 +1,55 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import './splitview.master.js'
 
-describe('SplitViewMaster', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
-
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
-
-  it('can be instantiated', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-master>
-    </ark-splitview-master>
-    `
-    const master = container.querySelector('ark-splitview-master')
-    master.init()
-    master.connectedCallback()
-
-    expect(master).toBeTruthy()
-    expect(master).toBe(master.init())
-    expect(master.getAttribute('master-event')).toBeNull()
-  })
-
-  it('can be instantiated with master-event attribute', () => {
-    container.innerHTML = `
-    <ark-splitview-master master-event="my-event">
-    </ark-splitview-master>
-    `
-    const master = container.querySelector('ark-splitview-master')
-    expect(master.getAttribute('master-event')).toEqual('my-event')
-    expect(master.masterEvent).toEqual('my-event')
-  })
-
-  it('can throw a master-change event', () => {
-    container.innerHTML = `
-    <ark-splitview-master master-event="click">
-      <button>Button</button>
-    </ark-splitview-master>
-    `
-    const master = container.querySelector('ark-splitview-master')
-    const button = master.select('button')
-
-    let masterEvent = null
-    master.addEventListener('master-change', (event) => { masterEvent = event })
-
-    button.click()
-
-    expect(masterEvent).toBeTruthy()
-  })
+let container = null
+
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
+
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-master>
+  </ark-splitview-master>
+  `
+  const master = container.querySelector('ark-splitview-master')
+  master.init()
+  master.connectedCallback()
+
+  assert.ok(master)
+  assert.strictEqual(master, master.init())
+  assert.deepStrictEqual(master.getAttribute('master-event'), '')
+})
+
+it('can be instantiated with master-event attribute', () => {
+  setup();
+  container.innerHTML = `
+  <ark-splitview-master master-event="my-event">
+  </ark-splitview-master>
+  `
+  const master = container.querySelector('ark-splitview-master')
+  assert.deepStrictEqual(master.getAttribute('master-event'), 'my-event')
+  assert.deepStrictEqual(master.masterEvent, 'my-event')
+})
+
+it('can throw a master-change event', () => {
+  setup();
+  container.innerHTML = `
+  <ark-splitview-master master-event="click">
+    <button>Button</button>
+  </ark-splitview-master>
+  `
+  const master = container.querySelector('ark-splitview-master')
+  const button = master.select('button')
+
+  let masterEvent = null
+  master.addEventListener('master-change', (event) => { masterEvent = event })
+
+  button.click()
+
+  assert.ok(masterEvent)
 })

package/lib/components/splitview/components/splitview.test.js

@@ -1,6 +1,8 @@
-import { Component } from 'base/component'
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
+import { Component } from '#base/index.js'
 import './splitview.js'
-import './splitview.detail'
+import './splitview.detail.js'
 import './splitview.master.js'
 
 class NestedMaster extends Component {
@@ -28,47 +30,149 @@ class NestedDetail extends Component {
 }
 Component.define('nested-detail', NestedDetail)
 
-describe('SplitView', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
+let container = null
 
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
+
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview></ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
+
+  assert.ok(splitview)
+  assert.strictEqual(splitview.init(), splitview)
+})
+
+it('can coordinate the master and the detail components', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview>
+    <ark-splitview-master master-event="nested:master">
+      <nested-master></nested-master>
+    </ark-splitview-master>
+    <ark-splitview-detail>
+      <nested-detail></nested-detail>
+    </ark-splitview-detail>
+  </ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
+
+  const nestedMaster = splitview.select('nested-master')
+
+  nestedMaster.click()
+
+  const nestedDetail = splitview.select('nested-detail')
 
-  it('can be instantiated', () => {
+  assert.deepStrictEqual(nestedDetail.content, 'NESTED MASTER VALUE')
+})
+
+it('cleans up global resize listeners when disconnected', () => {
+  setup()
+  const addEventListener = globalThis.addEventListener
+  const removeEventListener = globalThis.removeEventListener
+  let resizeAdded = 0
+  let resizeRemoved = 0
+
+  globalThis.addEventListener = function (type, listener, options) {
+    if (type === 'resize') resizeAdded += 1
+    return addEventListener(type, listener, options)
+  }
+
+  globalThis.removeEventListener = function (type, listener, options) {
+    if (type === 'resize') resizeRemoved += 1
+    return removeEventListener(type, listener, options)
+  }
+
+  try {
     container.innerHTML = /* html */`
     <ark-splitview></ark-splitview>
     `
     const splitview = container.querySelector('ark-splitview')
+    splitview.remove()
+  } finally {
+    globalThis.addEventListener = addEventListener
+    globalThis.removeEventListener = removeEventListener
+  }
 
-    expect(splitview).toBeTruthy()
-    expect(splitview.init()).toBe(splitview)
+  assert.ok(resizeAdded > 0)
+  assert.ok(resizeRemoved > 0)
+})
+
+it('returns early when there is no detail component to render', () => {
+  setup()
+  container.innerHTML = /* html */`
+  <ark-splitview></ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
+
+  assert.doesNotThrow(() => {
+    splitview.renderDetail({ value: 'ignored' })
   })
+})
 
-  it('can coordinate the master and the detail components', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview>
-      <ark-splitview-master master-event="nested:master">
-        <nested-master></nested-master>
-      </ark-splitview-master>
-      <ark-splitview-detail>
-        <nested-detail></nested-detail>
-      </ark-splitview-detail>
-    </ark-splitview>
-    `
-    const splitview = container.querySelector('ark-splitview')
+it('returns early when removing master listener with no master bound', () => {
+  setup()
+  container.innerHTML = /* html */`
+  <ark-splitview></ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
 
-    const nestedMaster = splitview.select('nested-master')
+  assert.doesNotThrow(() => {
+    splitview._removeMasterListener()
+  })
+})
 
-    nestedMaster.click()
+it('does not rebind master listener when the master is unchanged', () => {
+  setup()
+  container.innerHTML = /* html */`
+  <ark-splitview>
+    <ark-splitview-master master-event="nested:master"></ark-splitview-master>
+    <ark-splitview-detail>
+      <nested-detail></nested-detail>
+    </ark-splitview-detail>
+  </ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
+  const master = splitview.master
+  const addSpy = master.addEventListener
+  let added = 0
+  master.addEventListener = function (type, listener, options) {
+    added += 1
+    return addSpy.call(this, type, listener, options)
+  }
 
-    const nestedDetail = splitview.select('nested-detail')
+  try {
+    splitview._removeMasterListener()
+    splitview._setMasterListener()
+    splitview._setMasterListener()
+  } finally {
+    master.addEventListener = addSpy
+  }
 
-    expect(nestedDetail.content).toEqual('NESTED MASTER VALUE')
-  })
+  assert.deepStrictEqual(added, 1)
+})
+
+it('returns early when viewport dimensions are unavailable', () => {
+  setup()
+  container.innerHTML = /* html */`
+  <ark-splitview></ark-splitview>
+  `
+  const splitview = container.querySelector('ark-splitview')
+  const originalInnerHeight = globalThis.innerHeight
+  const originalInnerWidth = globalThis.innerWidth
+
+  globalThis.innerHeight = undefined
+  assert.doesNotThrow(() => splitview.setDimensions())
+
+  globalThis.innerHeight = originalInnerHeight
+  globalThis.innerWidth = undefined
+  assert.doesNotThrow(() => splitview.setDimensions())
+
+  globalThis.innerWidth = originalInnerWidth
 })

package/lib/components/translate/components/translate.js

@@ -1,18 +1,24 @@
-import { Component } from '../../../base/component/index.js'
+import { Component } from "#base/index.js"
 
 const tag = 'ark-translate'
 export class Translate extends Component {
   init (context = {}) {
+    this.languages = this.languages
     this.global = context.global || window
     this.endpoint = context.endpoint || this.endpoint || '/locales'
     this.namespace = context.namespace || this.namespace || 'default'
     this.root = context.root || this.root || 'body'
     this.dictionary = context.dictionary || {}
 
-    const dictionary = this.select('template')
+    const dictionary = (
+      /** @type {HTMLTemplateElement} */ (this.querySelector('template')))
     if (dictionary) {
       const content = dictionary.content.textContent
-      this.dictionary = JSON.parse(content)
+      try {
+        this.dictionary = JSON.parse(content)
+      } catch (error) {
+        this.emit('error', error)
+      }
     }
 
     return super.init(context)
@@ -29,9 +35,12 @@ export class Translate extends Component {
 
     this.content = `
     <select listen on-change="onLanguageChanged">
-      ${languages.map(code => `
-        <option value="${code}">${LANGUAGE_LIST[code].name}</option>
-      `)}
+      ${languages.map(code => {
+        const normalizedCode = code.trim()
+        const language = LANGUAGE_LIST[normalizedCode]
+        const name = language ? language.name : normalizedCode
+        return `<option value="${normalizedCode}">${name}</option>`
+      }).join('')}
     </select>
     `
     return super.render()
@@ -47,10 +56,18 @@ export class Translate extends Component {
     const language = options.language || 'es'
     const root = this.global.document.querySelector(
       options.root || this.root)
+    if (!root) return
+
+    const dictionaries = {}
 
     for (const node of root.querySelectorAll('[data-i18n]')) {
       const { key, namespace } = this.parseKey(node.dataset.i18n)
-      const dictionary = await this.resolveDictionary(language, namespace)
+      dictionaries[namespace] || (
+        dictionaries[namespace] = await this.resolveDictionary(
+          language, namespace
+        )
+      )
+      const dictionary = dictionaries[namespace]
 
       node.textContent = dictionary[key] || node.textContent
     }
@@ -78,9 +95,14 @@ export class Translate extends Component {
     if (!this.global.fetch) return {}
 
     const url = `${this.endpoint}/${language}/${namespace}.json`
-    const response = await this.global.fetch(url)
-
-    dictionary = await response.json()
+    try {
+      const response = await this.global.fetch(url)
+      if (response.ok === false) return {}
+      dictionary = await response.json()
+    } catch (error) {
+      this.emit('error', error)
+      return {}
+    }
 
     this.dictionary[language] || (this.dictionary[language] = {})
     this.dictionary[language][namespace] = dictionary