@knowark/componarkjs 1.13.4 → 1.14.1

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

@@ -1,3 +1,5 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { Component } from '#base/index.js'
 import './splitview.detail.js'
 
@@ -18,77 +20,77 @@ class MockMain extends Component {
 }
 Component.define('mock-main', MockMain)
 
-describe('SplitViewDetail', () => {
-  let container = null
-  beforeEach(() => {
-    container = document.createElement('div')
-    document.body.appendChild(container)
-  })
-
-  afterEach(() => {
-    container.remove()
-    container = null
-  })
-
-  it('can be instantiated', () => {
-    container.innerHTML = `
-    <ark-splitview-detail>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-    expect(detail).toBeTruthy()
-
-    expect(detail).toBe(detail.init())
-  })
-
-  it('can be instantiated with an inner main Component', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main>MAIN CONTENT</mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    expect(detail.firstElementChild.textContent).toEqual('MAIN CONTENT')
-  })
-
-  it('can initialize its main Component', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    detail.init({ name: 'Servagro' }).render()
-
-    expect(detail.firstElementChild.textContent).toEqual('Servagro')
-  })
-
-  it('can manipulate its hidden attribute', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-
-    detail.show()
-    expect(detail.hasAttribute('hidden')).toBeFalsy()
-
-    detail.hide()
-    expect(detail.hasAttribute('hidden')).toBeTruthy()
-  })
-
-  it('listens to close events to hide itself', () => {
-    container.innerHTML = /* html */`
-    <ark-splitview-detail>
-      <mock-main></mock-main>
-    </ark-splitview-detail>
-    `
-    const detail = container.querySelector('ark-splitview-detail')
-    detail.dispatchEvent(new Event('close'))
-
-    expect(detail.hasAttribute('hidden')).toBeTruthy()
-  })
+let container = null
+
+const setup = () => {
+  document.body.innerHTML = '';
+  container = document.createElement('div')
+  document.body.appendChild(container)
+};
+
+it('can be instantiated', () => {
+  setup();
+  container.innerHTML = `
+  <ark-splitview-detail>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+  assert.ok(detail)
+
+  assert.strictEqual(detail, detail.init())
+})
+
+it('can be instantiated with an inner main Component', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main>MAIN CONTENT</mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  assert.deepStrictEqual(detail.firstElementChild.textContent, 'MAIN CONTENT')
+})
+
+it('can initialize its main Component', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  detail.init({ name: 'Servagro' }).render()
+
+  assert.deepStrictEqual(detail.firstElementChild.textContent, 'Servagro')
+})
+
+it('can manipulate its hidden attribute', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+
+  detail.show()
+  assert.ok(!detail.hasAttribute('hidden'))
+
+  detail.hide()
+  assert.ok(detail.hasAttribute('hidden'))
+})
+
+it('listens to close events to hide itself', () => {
+  setup();
+  container.innerHTML = /* html */`
+  <ark-splitview-detail>
+    <mock-main></mock-main>
+  </ark-splitview-detail>
+  `
+  const detail = container.querySelector('ark-splitview-detail')
+  detail.dispatchEvent(new Event('close'))
+
+  assert.ok(detail.hasAttribute('hidden'))
 })

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

@@ -1,46 +1,89 @@
 import { Component, css } from "#base/index.js"
 
 /** @import {SplitViewDetail} from './splitview.detail.js' */
+/** @import {SplitViewMaster} from './splitview.master.js' */
 
 const tag = 'ark-splitview'
+/**
+ * Master-detail split view orchestrator.
+ */
 export class SplitView extends Component {
   constructor () {
     super()
     this.binding = 'splitview-listen'
-    this.setDimensions()
-    globalThis.addEventListener('resize', this.setDimensions.bind(this))
+    this._onResize = this.setDimensions.bind(this)
+    this._onMasterChange = this.onMasterChange.bind(this)
+    this._master = null
   }
 
+  /** @returns {void} */
   setDimensions () {
-    this.style.setProperty('--inner-height', `${innerHeight}px`)
-    this.style.setProperty('--inner-width', `${innerWidth}px`)
+    if (typeof globalThis.innerHeight !== 'number') return
+    if (typeof globalThis.innerWidth !== 'number') return
+
+    this.style.setProperty('--inner-height', `${globalThis.innerHeight}px`)
+    this.style.setProperty('--inner-width', `${globalThis.innerWidth}px`)
+  }
+
+  /** @returns {void} */
+  connectedCallback () {
+    this.setDimensions()
+    globalThis.addEventListener('resize', this._onResize)
+    super.connectedCallback()
+  }
+
+  /** @returns {void} */
+  disconnectedCallback () {
+    globalThis.removeEventListener('resize', this._onResize)
+    this._removeMasterListener()
+    super.disconnectedCallback()
+  }
+
+  /** @returns {void} */
+  _setMasterListener () {
+    const master = this.master
+    if (master === this._master) return
+
+    this._removeMasterListener()
+    this._master = master
+    this._master?.addEventListener('master-change', this._onMasterChange)
+  }
+
+  /** @returns {void} */
+  _removeMasterListener () {
+    if (!this._master) return
+    this._master.removeEventListener('master-change', this._onMasterChange)
+    this._master = null
   }
 
+  /** @returns {(SplitViewMaster|null)} */
   get master () {
-    return this.select('ark-splitview-master')
+    return /** @type {SplitViewMaster|null} */ (
+      this.querySelector('ark-splitview-master'))
   }
 
+  /** @returns {SplitViewDetail} */
   get detail () {
     return /** @type {SplitViewDetail} */ (this.select('ark-splitview-detail'))
   }
 
+  /** @returns {this} */
   render () {
     this.renderDetail()
-    if (this.master) {
-      this.master.addEventListener(
-        'master-change', this.onMasterChange.bind(this))
-    }
+    this._setMasterListener()
     return super.render()
   }
 
-  /** @param {Object} context */
+  /** @param {object} context
+   * @returns {void} */
   renderDetail (context = {}) {
     if (!this.detail || !this.detail.init) return
 
     this.detail.init(context).render()
   }
 
-  /** @param {CustomEvent} event */
+  /** @param {CustomEvent} event
+   * @returns {void} */
   onMasterChange (event) {
     event.stopPropagation()
 

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

@@ -1,23 +1,58 @@
 import { Component } from "#base/index.js"
 
 const tag = 'ark-splitview-master'
+/**
+ * Master pane controller for split-view layout.
+ */
 export class SplitViewMaster extends Component {
   constructor () {
     super()
+    this._onMasterEvent = this.onMasterEvent.bind(this)
+    this._boundMasterEvent = null
     this.masterEvent = this.masterEvent
-    this.addEventListener(
-      this.masterEvent, this.onMasterEvent.bind(this))
   }
 
+  /** @param {object} context
+   *  @returns {this} */
   init (context = {}) {
     this.binding = 'splitview-master-listen'
     return super.init(context)
   }
 
+  /** @returns {string[]} */
   reflectedProperties () {
     return ['masterEvent']
   }
 
+  /** @returns {void} */
+  connectedCallback () {
+    this._syncMasterEventListener()
+    super.connectedCallback()
+  }
+
+  /** @returns {void} */
+  disconnectedCallback () {
+    this._removeMasterEventListener()
+    super.disconnectedCallback()
+  }
+
+  /** @returns {void} */
+  _syncMasterEventListener () {
+    const masterEvent = (this.masterEvent || '').trim()
+    if (!masterEvent || masterEvent === this._boundMasterEvent) return
+
+    this._removeMasterEventListener()
+    this.addEventListener(masterEvent, this._onMasterEvent)
+    this._boundMasterEvent = masterEvent
+  }
+
+  /** @returns {void} */
+  _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')).toEqual('')
-  })
-
-  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 { 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/splitview/index.js

@@ -1,3 +1,4 @@
+/** Master-detail split view components. */
 export { SplitViewDetail } from './components/splitview.detail.js'
 export { SplitViewMaster } from './components/splitview.master.js'
 export { SplitView } from './components/splitview.js'