@knowark/componarkjs 1.13.4 → 1.14.0

package/lib/base/utils/define.js

@@ -1,20 +1,42 @@
 // @ts-nocheck
 
+const stylesheetRegistry = new Map()
+const fallbackRegistry = new Map()
+
 /** @param {string} tag
  * @param {CustomElementConstructor} element
  * @param {string} styles **/
 export function define (tag, element, styles = '') {
-  globalThis.customElements.define(tag, element)
+  const definedElement = globalThis.customElements.get(tag)
+  if (!definedElement) {
+    globalThis.customElements.define(tag, element)
+  }
   if (!styles?.trim()) return
+  if (typeof document === 'undefined') return
 
   try {
-    const sheet = new globalThis.CSSStyleSheet()
+    let sheet = stylesheetRegistry.get(tag)
+    if (!sheet) {
+      sheet = new globalThis.CSSStyleSheet()
+      stylesheetRegistry.set(tag, sheet)
+    }
     sheet.replaceSync(styles)
-    return (document.adoptedStyleSheets = [
-      ...document.adoptedStyleSheets, sheet])
+
+    const adopted = document.adoptedStyleSheets || []
+    if (!adopted.includes(sheet)) {
+      document.adoptedStyleSheets = [...adopted, sheet]
+    }
+
+    return sheet
   } catch (error) {
-    const style = document.createElement('style')
+    let style = fallbackRegistry.get(tag)
+    if (!style) {
+      style = document.createElement('style')
+      style.setAttribute('data-componark-tag', tag)
+      fallbackRegistry.set(tag, style)
+      document.head.appendChild(style)
+    }
     style.textContent = styles
-    document.head.appendChild(style)
+    return style
   }
 }

package/lib/base/utils/define.test.js

@@ -1,62 +1,149 @@
-import { jest } from '@jest/globals'
+import { it, mock } from 'node:test'
+import assert from 'node:assert/strict'
 import { define } from './define.js'
 
-describe('Define', () => {
-  it('can define a custome element', () => {
-    class NewElement extends globalThis.HTMLElement {}
-    define('new-element', NewElement)
+it('can define a custome element', () => {
+  class NewElement extends globalThis.HTMLElement {}
+  define('new-element', NewElement)
 
-    const newElement = document.createElement('new-element')
-    expect(newElement).toBeTruthy()
-  })
+  const newElement = document.createElement('new-element')
+  assert.ok(newElement)
+})
 
-  it('can define a custom element using constructable CSSStyleSheet', () => {
-    let definedStyles = null
-    class MockCSSStyleSheet extends globalThis.CSSStyleSheet {
-      replaceSync (styles) {
-        definedStyles = styles
-      }
+it('can define a custom element using constructable CSSStyleSheet', () => {
+  let definedStyles = null
+  class MockCSSStyleSheet extends globalThis.CSSStyleSheet {
+    replaceSync (styles) {
+      definedStyles = styles
     }
+  }
 
-    jest.spyOn(window, 'CSSStyleSheet').mockReturnValue(
-      new MockCSSStyleSheet())
-
-    class CSSStyledElement extends globalThis.HTMLElement {}
-    const styles = `
-    body {
-      color: red;
+  const cssStyleSheetSpy = mock.method(
+    globalThis,
+    'CSSStyleSheet',
+    function () {
+      return new MockCSSStyleSheet()
     }
+  )
+
+  class CSSStyledElement extends globalThis.HTMLElement {}
+  const styles = `
+  body {
+    color: red;
+  }
+
+  div {
+    margin: 5px;
+  }
+  `
+
+  define('css-styled-element', CSSStyledElement, styles)
 
-    div {
-      margin: 5px;
+  const styledElement = document.createElement('css-styled-element')
+  assert.ok(styledElement)
+
+  assert.deepStrictEqual(styles, definedStyles)
+  cssStyleSheetSpy.mock.restore()
+})
+
+it('can define a custom element using an style fallback element', () => {
+  const cssStyleSheetSpy = mock.method(
+    globalThis,
+    'CSSStyleSheet',
+    function () {
+      throw new Error('Constructable stylesheets are unavailable')
     }
-    `
+  )
+
+  class StyledElement extends globalThis.HTMLElement {}
+  const styles = `
+  body {
+    color: red;
+  }
+
+  div {
+    margin: 5px;
+  }
+  `
+
+  define('styled-element', StyledElement, styles)
+  cssStyleSheetSpy.mock.restore()
 
-    define('css-styled-element', CSSStyledElement, styles)
+  const styledElement = document.createElement('styled-element')
+  assert.ok(styledElement)
+  const style = Array.from(document.head.querySelectorAll('style')).find(
+    (item) => item.textContent.includes('color: red;')
+  )
+  assert.ok(style)
+})
 
-    const styledElement = document.createElement('css-styled-element')
-    expect(styledElement).toBeTruthy()
+it('does not throw when defining an already defined custom element', () => {
+  class DuplicateElement extends globalThis.HTMLElement {}
+  define('duplicate-element', DuplicateElement)
 
-    expect(styles).toEqual(definedStyles)
+  assert.doesNotThrow(() => {
+    define('duplicate-element', DuplicateElement)
   })
+})
 
-  it('can define a custom element using an style fallback element', () => {
-    class StyledElement extends globalThis.HTMLElement {}
-    const styles = `
-    body {
-      color: red;
+it('reuses fallback styles for repeated definitions of the same tag', () => {
+  const cssStyleSheetSpy = mock.method(
+    globalThis,
+    'CSSStyleSheet',
+    function () {
+      throw new Error('Constructable stylesheets are unavailable')
     }
+  )
+
+  class ReusedStyledElement extends globalThis.HTMLElement {}
+
+  define('reused-styled-element', ReusedStyledElement, 'body { color: red; }')
+  define('reused-styled-element', ReusedStyledElement, 'body { color: blue; }')
+
+  cssStyleSheetSpy.mock.restore()
+
+  const styles = Array.from(
+    document.head.querySelectorAll('style[data-componark-tag="reused-styled-element"]')
+  )
+  assert.deepStrictEqual(styles.length, 1)
+  assert.ok(styles[0].textContent.includes('color: blue;'))
+})
 
-    div {
-      margin: 5px;
+it('does not add a constructable stylesheet more than once for the same tag', () => {
+  class MockCSSStyleSheet extends globalThis.CSSStyleSheet {
+    replaceSync (_styles) {}
+  }
+  const cssStyleSheetSpy = mock.method(
+    globalThis,
+    'CSSStyleSheet',
+    function () {
+      return new MockCSSStyleSheet()
     }
-    `
+  )
+  class OnceStyledElement extends globalThis.HTMLElement {}
 
-    define('styled-element', StyledElement, styles)
+  const beforeCount = document.adoptedStyleSheets.length
+  define('once-styled-element', OnceStyledElement, 'body { color: orange; }')
+  const firstCount = document.adoptedStyleSheets.length
+  define('once-styled-element', OnceStyledElement, 'body { color: green; }')
+  const secondCount = document.adoptedStyleSheets.length
 
-    const styledElement = document.createElement('styled-element')
-    expect(styledElement).toBeTruthy()
-    const style = document.head.querySelector('style')
-    expect(style).toBeTruthy()
-  })
+  cssStyleSheetSpy.mock.restore()
+  assert.deepStrictEqual(firstCount, beforeCount + 1)
+  assert.deepStrictEqual(secondCount, firstCount)
+})
+
+it('returns early when styles are provided but document is unavailable', () => {
+  const previousDocument = globalThis.document
+  class NoDocumentElement extends globalThis.HTMLElement {}
+
+  delete globalThis.document
+
+  try {
+    assert.doesNotThrow(() => {
+      define('no-document-element', NoDocumentElement, 'body { color: red; }')
+    })
+  } finally {
+    globalThis.document = previousDocument
+  }
 })

package/lib/base/utils/format.test.js

@@ -1,19 +1,19 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { camelToKebab, kebabToCamel, snakeToCamel } from './format.js'
 
-describe('Format', () => {
-  it('can convert camel to kebab', () => {
-    const camel = 'myVariable'
-    const kebab = camelToKebab(camel)
-    expect(kebab).toBe('my-variable')
-  })
-  it('can convert kebab to camel', () => {
-    const kebab = 'my-variable'
-    const camel = kebabToCamel(kebab)
-    expect(camel).toBe('myVariable')
-  })
-  it('can convert snake to camel', () => {
-    const kebab = 'my_variable'
-    const camel = snakeToCamel(kebab)
-    expect(camel).toBe('myVariable')
-  })
+it('can convert camel to kebab', () => {
+  const camel = 'myVariable'
+  const kebab = camelToKebab(camel)
+  assert.strictEqual(kebab, 'my-variable')
+})
+it('can convert kebab to camel', () => {
+  const kebab = 'my-variable'
+  const camel = kebabToCamel(kebab)
+  assert.strictEqual(camel, 'myVariable')
+})
+it('can convert snake to camel', () => {
+  const kebab = 'my_variable'
+  const camel = snakeToCamel(kebab)
+  assert.strictEqual(camel, 'myVariable')
 })

package/lib/base/utils/helpers.js

@@ -25,8 +25,11 @@ export function listen (self) {
             if (pipe?.toLocaleLowerCase() === 'object') {
               return set(this, objectPath.trim(), event.detail)
             }
-            set(this, objectPath.trim(), transform(pipe, get(
-              event, eventPath, get(event, 'detail', ''))))
+            const inputValue = (
+              get(event, eventPath, undefined) ||
+              get(event, 'detail', '')
+            )
+            set(this, objectPath.trim(), transform(pipe, inputValue))
           }
         }
 
@@ -102,6 +105,7 @@ function transform (pipe, value) {
 /** @param {object} object @param {string} path @param {any} value */
 export function set (object, path, value) {
   const pathArray = path.match(/([^[.\]])+/g)
+  if (!pathArray?.length) return
 
   pathArray.reduce((accumulator, key, index) => {
     if (accumulator[key.trim()] === undefined) accumulator[key.trim()] = {}
@@ -113,9 +117,12 @@ export function set (object, path, value) {
 /** @param {object} object @param {string} path @param {any} fallback */
 export function get (object, path, fallback) {
   const pathArray = path.match(/([^[.\]])+/g)
+  if (!pathArray?.length) return fallback
 
-  return pathArray.reduce((accumulator, key) => accumulator &&
-    accumulator[key.trim()], object) || fallback
+  const value = pathArray.reduce((accumulator, key) => accumulator &&
+    accumulator[key.trim()], object)
+
+  return value === undefined ? fallback : value
 }
 
 /** @param {object} object @return {string} */

package/lib/base/utils/helpers.test.js

@@ -1,154 +1,173 @@
+import { it } from 'node:test';
+import assert from 'node:assert/strict';
 import { listen, reflect, set, get, keys } from './helpers.js'
 
-describe('Helpers', () => {
-  it('does not allow invalid attribute', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button on-open="click" listen on-click="click" on-click="myMethod"
-      on-close="click"></button>
-    `
-
-    listen(element)
-
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
-
-  it('does not allow invalid attribute', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button listen ark-on-click="myMethod"></button>
-    `
+it('does not allow invalid attribute', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button on-open="click" listen on-click="click" on-click="myMethod"
+    on-close="click"></button>
+  `
 
-    listen(element)
+  listen(element)
 
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
+
+it('does not allow invalid attribute', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button listen ark-on-click="myMethod"></button>
+  `
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-  it('attribute ', () => {
-    const button = document.createElement('button')
-    button.setAttribute('listen', '')
-    button.setAttribute('on-abc', 'method')
-    button.setAttribute('on-xyz', 'method')
+it('attribute ', () => {
+  const button = document.createElement('button')
+  button.setAttribute('listen', '')
+  button.setAttribute('on-abc', 'method')
+  button.setAttribute('on-xyz', 'method')
 
-    const content = document.createElement('div')
-    content.appendChild(button)
+  const content = document.createElement('div')
+  content.appendChild(button)
 
-    listen(content)
-  })
+  listen(content)
+})
 
-  it('It does not allow to execute undeclared methods.', () => {
-    const element = document.createElement('div')
-    element.innerHTML = /* html */`
-      <button listen on-click="myMethod"></button>
-    `
+it('It does not allow to execute undeclared methods.', () => {
+  const element = document.createElement('div')
+  element.innerHTML = /* html */`
+    <button listen on-click="myMethod"></button>
+  `
 
-    listen(element)
+  listen(element)
 
-    element.querySelector('button').click()
-    expect(!element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-  it('can listen events', () => {
-    const element = document.createElement('div')
-    Object.defineProperty(element, 'binding', {value: 'listen'})
-    element.innerHTML = /* html */`
-      <button listen on-click="myMethod"></button>
-    `
-    // @ts-ignore
-    element.myMethod = function () {
-      element.setAttribute('clicked-element', '')
-    }
+it('can listen events', () => {
+  const element = document.createElement('div')
+  Object.defineProperty(element, 'binding', {value: 'listen'})
+  element.innerHTML = /* html */`
+    <button listen on-click="myMethod"></button>
+  `
+  // @ts-ignore
+  element.myMethod = function () {
+    element.setAttribute('clicked-element', '')
+  }
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(element.hasAttribute('clicked-element'))
+})
 
-    listen(element)
+it('ignores missing methods when listening', () => {
+  const element = document.createElement('div')
+  Object.defineProperty(element, 'binding', {value: 'listen'})
+  element.innerHTML = /* html */`
+    <button listen on-click="missing"></button>
+  `
+  // @ts-ignore
+  element.myMethod = function () {
+    element.setAttribute('clicked-element', '')
+  }
+
+  listen(element)
+
+  element.querySelector('button').click()
+  assert.ok(!element.hasAttribute('clicked-element'))
+})
 
-    element.querySelector('button').click()
-    expect(element.hasAttribute('clicked-element')).toBeTruthy()
-  })
+it('can create attribute', () => {
+  const element = document.createElement('div')
+  const properties = ['myProperty']
 
-  it('ignores missing methods when listening', () => {
-    const element = document.createElement('div')
-    Object.defineProperty(element, 'binding', {value: 'listen'})
-    element.innerHTML = /* html */`
-      <button listen on-click="missing"></button>
-    `
-    // @ts-ignore
-    element.myMethod = function () {
-      element.setAttribute('clicked-element', '')
-    }
+  reflect(element, properties)
 
-    listen(element)
+  // @ts-ignore
+  element.myProperty = 'value'
 
-    element.querySelector('button').click()
-    expect(element.hasAttribute('clicked-element')).toBeFalsy()
-  })
+  // @ts-ignore
+  assert.strictEqual(element.myProperty, 'value')
+  assert.ok(element.hasAttribute('my-property'))
+})
 
-  it('can create attribute', () => {
-    const element = document.createElement('div')
-    const properties = ['myProperty']
+it('cannot create attribute with property undefined', () => {
+  const element = document.createElement('div')
+  const properties = ['myProperty']
 
-    reflect(element, properties)
+  reflect(element, properties)
 
-    // @ts-ignore
-    element.myProperty = 'value'
+  // @ts-ignore
+  element.myProperty = undefined
 
-    // @ts-ignore
-    expect(element.myProperty).toBe('value')
-    expect(element.hasAttribute('my-property')).toBeTruthy()
-  })
+  // @ts-ignore
+  assert.strictEqual(element.myProperty, '')
+  assert.ok(!element.hasAttribute('my-property'))
+})
 
-  it('cannot create attribute with property undefined', () => {
-    const element = document.createElement('div')
-    const properties = ['myProperty']
+it('sets an object properties by a given path', () => {
+  const object = {}
 
-    reflect(element, properties)
+  set(object, 'value.data', 'Hello')
 
-    // @ts-ignore
-    element.myProperty = undefined
+  assert.deepStrictEqual(object.value.data, 'Hello')
+})
 
-    // @ts-ignore
-    expect(element.myProperty).toBe('')
-    expect(!element.hasAttribute('my-property')).toBeTruthy()
-  })
+it('ignores set paths that cannot be parsed', () => {
+  const object = { value: 7 }
+  set(object, '', 'Hello')
+  assert.deepStrictEqual(object, { value: 7 })
+})
 
-  it('sets an object properties by a given path', () => {
-    const object = {}
+it('gets an object properties by a given path', () => {
+  const object = { state: { data: { value: 25 } }, data: 13 }
 
-    set(object, 'value.data', 'Hello')
+  let value = get(object, 'data')
 
-    expect(object.value.data).toEqual('Hello')
-  })
+  assert.deepStrictEqual(value, 13)
 
-  it('gets an object properties by a given path', () => {
-    const object = { state: { data: { value: 25 } }, data: 13 }
+  value = get(object, 'state.data.value')
 
-    let value = get(object, 'data')
+  assert.deepStrictEqual(value, 25)
 
-    expect(value).toEqual(13)
+  const fallback = get(object, 'state.missing.value', 7)
 
-    value = get(object, 'state.data.value')
+  assert.deepStrictEqual(fallback, 7)
+})
 
-    expect(value).toEqual(25)
+it('gets falsy values by a given path without replacing them', () => {
+  const object = { state: { count: 0, enabled: false, empty: '' } }
 
-    const fallback = get(object, 'state.missing.value', 7)
+  assert.deepStrictEqual(get(object, 'state.count', 7), 0)
+  assert.deepStrictEqual(get(object, 'state.enabled', true), false)
+  assert.deepStrictEqual(get(object, 'state.empty', 'fallback'), '')
+})
 
-    expect(fallback).toEqual(7)
-  })
+it('returns fallback when get path cannot be parsed', () => {
+  const object = { value: 7 }
+  assert.deepStrictEqual(get(object, '', 'fallback'), 'fallback')
+})
 
-  it('retrieves the object keys of truthy values', () => {
-    const background = 'primary'
-    const shadow = 'small'
-    const color = ''
+it('retrieves the object keys of truthy values', () => {
+  const background = 'primary'
+  const shadow = 'small'
+  const color = ''
 
-    const classes = {
-      [`background-${background}`]: background,
-      [`color-${color}`]: color,
-      [`shadow-${shadow}`]: shadow
-    }
+  const classes = {
+    [`background-${background}`]: background,
+    [`color-${color}`]: color,
+    [`shadow-${shadow}`]: shadow
+  }
 
-    const result = keys(classes)
+  const result = keys(classes)
 
-    expect(result).toEqual('background-primary shadow-small')
-  })
+  assert.deepStrictEqual(result, 'background-primary shadow-small')
 })