@knowark/componarkjs 1.7.3 → 1.7.5

package/Makefile

@@ -1,4 +1,4 @@
-.PHONY: all tests coverage
+.PHONY: all tests coverage showcase
 
 setup:
 	npm install -g browser-sync && \
@@ -15,8 +15,11 @@ test:
 clean:
 	rm -rf ./dist
 
+standard:
+	npx standard --fix
+
 showcase:
-	npx live-server ./showcase/
+	npx live-server ./showcase
 
 dev:
 	npm run dev
@@ -28,7 +31,7 @@ push:
 	git push && git push --tags
 
 deploy:
-	sshpass -e rsync -av --delete ./dist/ \
+	sshpass -e rsync -av --delete ./showcase/ \
 		${RSYNC_USER}@${RSYNC_HOST}:${RSYNC_DIR}
 
 reset:

package/jsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "nodenext",
+    "allowJs": true,
+    "checkJs": true,
+    "baseUrl": "lib",
+    "paths": {
+      "@base*": [
+          "base",
+          "base*"
+      ],
+      "*": [
+        "*"
+      ]
+    }
+  },
+  "exclude": [
+    "node_modules",
+    "*/node_modules/"
+  ]
+}

package/lib/base/component/component.js

@@ -1,11 +1,11 @@
-import { define, listen, reflect, slot, keys } from "../utils/index.js"
+import { define, listen, reflect, slot, keys } from '../utils/index.js'
 import styles from '../styles/index.js'
 
 const tag = 'ark-component'
-export class Component extends HTMLElement {
-  constructor() {
+export class Component extends globalThis.HTMLElement {
+  constructor () {
     super()
-    this.binding = "listen"
+    this.binding = 'listen'
     reflect(this, this.reflectedProperties())
   }
 
@@ -13,74 +13,75 @@ export class Component extends HTMLElement {
    * @param {string} tag
    * @param {CustomElementConstructor} element
    * @param {string} styles **/
-  static define(tag, element, styles = null) {
+  static define (tag, element, styles = null) {
     define(tag, element, styles)
   }
 
   /**
    * @param {object} styleMap
    * @return {string} **/
-  styleNames(styleMap) {
+  styleNames (styleMap) {
     return keys(styleMap)
   }
 
   /**
-   * @param {Object<string, any>} _context
+   * @param {object} context
    * @return {Component} */
-  init(_context = {}) {
+  init (context = {}) {
     return this
   }
 
   /** @return {string[]} */
-  reflectedProperties() {
+  reflectedProperties () {
     return []
   }
 
-  get slots() {
+  get slots () {
     return slot(this)
   }
 
   /** @param {string} content */
-  set content(content) {
+  set content (content) {
     this.innerHTML = content
   }
 
   /** @return {string} */
-  get content() {
+  get content () {
     return this.innerHTML
   }
 
-  connectedCallback() {
+  connectedCallback () {
     try {
-      !this['state'] && this.init({})
+      !this.state && this.init({})
       this.render()
     } catch (error) {
-      this.emit("error", error)
+      this.emit('error', error)
       throw error
     }
-    this.load()
+    this.load({})
   }
 
   /** @return {Component} */
-  render() {
+  render () {
     this.classList.add(this.tagName.toLowerCase())
     listen(this)
     return this
   }
 
-  async load() {}
+  /** @param {object} context */
+  async load (context = {}) {}
 
   /**
    * @param {string} selectors
    * @return {Component} */
-  select(selectors) {
+  select (selectors) {
     return /** @type {Component} */ (this.querySelector(selectors))
   }
 
   /**
    * @param {string} selectors
    * @return {NodeListOf<Component>} */
-  selectAll(selectors) {
+  selectAll (selectors) {
     return /** @type {NodeListOf<Component>} */ (this.querySelectorAll(
       selectors
     ))
@@ -89,12 +90,12 @@ export class Component extends HTMLElement {
   /**
    * @param {string} type
    * @param {any} detail */
-  emit(type, detail) {
+  emit (type, detail) {
     this.dispatchEvent(
-      new CustomEvent(type, {
+      new globalThis.CustomEvent(type, {
         detail,
         bubbles: true,
-        cancelable: true,
+        cancelable: true
       })
     )
   }
@@ -102,11 +103,11 @@ export class Component extends HTMLElement {
   /**
    * @param {string} resource
    * @return {any} */
-  resolve(resource) {
-    const event = new CustomEvent("resolve", {
+  resolve (resource) {
+    const event = new globalThis.CustomEvent('resolve', {
       detail: { resource },
       bubbles: true,
-      cancelable: true,
+      cancelable: true
     })
     this.dispatchEvent(event)
     return event.detail[resource]

package/lib/base/component/component.test.js

@@ -2,39 +2,44 @@ import { jest } from '@jest/globals'
 import { Component } from './component.js'
 
 class MockComponent extends Component {
-  init(context = {}) {
+  init (context = {}) {
     this.context = context
     this.data = {}
     this.dependency = undefined
+    this.code = this.code || null
     return super.init()
   }
 
-  reflectedProperties() { return ['code'] }
+  reflectedProperties () { return ['code'] }
+
+  customHandler (/** @type {CustomEvent} */ event) {
+    event.detail.code = this.code
+  }
 
   erroringHandler (_event) {
     throw new Error('Something went wrong!')
   }
 
   async asyncErroringHandler (_event) {
-    const callback = async () => { 
-      throw new Error('Something went async wrong!') }
+    const callback = async () => {
+      throw new Error('Something went async wrong!')
+    }
     await callback()
   }
 
-  render() {
+  render () {
     this.dependency = this.resolve('Dependency')
     return super.render()
   }
 }
 Component.define('mock-component', MockComponent)
 
-
 describe('Component', () => {
   let container = null
   let component = null
   beforeEach(() => {
     container = document.createElement('div')
-    container.innerHTML = `<mock-component code="XYZ123"></mock-component>`
+    container.innerHTML = '<mock-component code="XYZ123"></mock-component>'
     component = container.querySelector('mock-component')
     document.body.append(container)
   })
@@ -63,15 +68,15 @@ describe('Component', () => {
   })
 
   it('has an init method through which state is set', () => {
-    const response = component.init({attribute: 'value'})
+    const response = component.init({ attribute: 'value' })
     expect(response).toBe(component)
   })
 
   it('can set its content via a property', () => {
-    component.content = `<p>Hello World</p>`
+    component.content = '<p>Hello World</p>'
     const paragraph = component.querySelector('p')
-    expect(component.content).toBe(`<p>Hello World</p>`)
-    expect(paragraph.outerHTML).toBe(`<p>Hello World</p>`)
+    expect(component.content).toBe('<p>Hello World</p>')
+    expect(paragraph.outerHTML).toBe('<p>Hello World</p>')
   })
 
   it('can have some of its attributes reflected as properties', () => {
@@ -94,16 +99,16 @@ describe('Component', () => {
 
   it('emits custom events', () => {
     let detail = null
-    const handler = (event) => {detail = event.detail}
+    const handler = (event) => { detail = event.detail }
     component.addEventListener('fire', handler)
 
-    component.emit('fire', {location: 'indoors'})
+    component.emit('fire', { location: 'indoors' })
 
-    expect(detail).toEqual({location: 'indoors'})
+    expect(detail).toEqual({ location: 'indoors' })
   })
 
   it('calls the load method on connectedCallback', async () => {
-    const component = document.createElement('mock-component') 
+    const component = document.createElement('mock-component')
     const initSpy = jest.spyOn(component, 'init')
     const renderSpy = jest.spyOn(component, 'render')
     const loadSpy = jest.spyOn(component, 'load')
@@ -117,10 +122,10 @@ describe('Component', () => {
 
   it('catches and re-raises connectedCallback errors', async () => {
     expect.assertions(1)
-    const component = document.createElement('mock-component') 
+    const component = document.createElement('mock-component')
     const consoleError = console.error
     console.error = jest.fn()
-    component.render = () => { 
+    component.render = () => {
       throw new Error('Render Error!')
     }
 
@@ -133,7 +138,6 @@ describe('Component', () => {
     console.error = consoleError
   })
 
-
   it('selects the children matching a selector', () => {
     container.innerHTML = `
     <mock-component>
@@ -168,7 +172,7 @@ describe('Component', () => {
       footer: [component.select('.footer')]
     })
   })
-  
+
   it('binds its properties to children events', async () => {
     container.innerHTML = `
     <mock-component>
@@ -179,8 +183,9 @@ describe('Component', () => {
     const component = container.querySelector('mock-component')
     const input = component.select('input')
 
-
-    input.dispatchEvent(new InputEvent('input',  {bubbles: true, data: 'E'}))
+    input.dispatchEvent(
+      new globalThis.InputEvent('input', { bubbles: true, data: 'E' })
+    )
 
     expect(component.data.value).toEqual('E')
   })
@@ -193,10 +198,10 @@ describe('Component', () => {
     `
     const component = container.querySelector('mock-component')
     const input = component.select('input')
-    const inputEvent = new InputEvent('input')
+    const inputEvent = new globalThis.InputEvent('input')
     const target = { name: 'input', value: 'X' }
     Object.defineProperty(
-      inputEvent, 'target', { writable: false, value: target });
+      inputEvent, 'target', { writable: false, value: target })
 
     input.dispatchEvent(inputEvent)
 
@@ -214,11 +219,46 @@ describe('Component', () => {
     const input = component.select('input')
 
     input.dispatchEvent(
-      new CustomEvent('alter',  { bubbles: true, detail: 'A' }))
+      new globalThis.CustomEvent('alter', { bubbles: true, detail: 'A' }))
 
     expect(component.data.value).toEqual('A')
   })
 
+  it('listens to events and handles them with its own methods', async () => {
+    container.innerHTML = `
+      <mock-component code="ABC123">
+        <input type="text" listen on-alter="customHandler"></input>
+      </mock-component>
+    `
+
+    const component = container.querySelector('mock-component')
+    const input = component.select('input')
+
+    const event = new globalThis.CustomEvent(
+      'alter', { bubbles: true, detail: { code: '' } })
+    input.dispatchEvent(event)
+
+    expect(event.detail.code).toEqual('ABC123')
+  })
+
+  it('listens to events and redirects them to target components', async () => {
+    container.innerHTML = `
+      <mock-component code="ABC123">
+        <input type="text" listen on-alter="customHandler" at="#child"></input>
+        <mock-component id="child" code="XYZ890"></mock-component>
+      </mock-component>
+    `
+
+    const component = container.querySelector('mock-component')
+    const input = component.select('input')
+
+    const event = new globalThis.CustomEvent(
+      'alter', { bubbles: true, detail: { code: '' } })
+    input.dispatchEvent(event)
+
+    expect(event.detail.code).toEqual('XYZ890')
+  })
+
   it('emits an error event on declared listeners', async () => {
     container.innerHTML = `
     <mock-component>
@@ -229,12 +269,14 @@ describe('Component', () => {
     const component = container.querySelector('mock-component')
 
     let errorEvent = {}
-    component.addEventListener('error', (event) => errorEvent = event)
+    component.addEventListener('error', (event) => { errorEvent = event })
 
     const input = component.select('input')
 
     input.dispatchEvent(
-      new CustomEvent('alter',  { bubbles: true, detail: 'I will error!' }))
+      new globalThis.CustomEvent(
+        'alter', { bubbles: true, detail: 'I will error!' }
+      ))
 
     expect(errorEvent.detail.message).toEqual('Something went wrong!')
   })
@@ -249,12 +291,14 @@ describe('Component', () => {
     const component = container.querySelector('mock-component')
 
     let errorEvent = {}
-    component.addEventListener('error', (event) => errorEvent = event)
+    component.addEventListener('error', (event) => { errorEvent = event })
 
     const input = component.select('input')
 
     input.dispatchEvent(
-      new CustomEvent('alter',  { bubbles: true, detail: 'I will error!' }))
+      new globalThis.CustomEvent(
+        'alter', { bubbles: true, detail: 'I will error!' }
+      ))
 
     // Sleep
     await new Promise(resolve => setTimeout(resolve, 0))
@@ -279,7 +323,7 @@ describe('Component', () => {
 
   it('provides the dependencies requested to it by child components', () => {
     class ParentComponent extends MockComponent {
-      provide(resource) {
+      provide (resource) {
         if (resource === 'Dependency') {
           return `RESOURCE: ${resource} PROVIDED BY: ${this.id}`
         }
@@ -293,11 +337,11 @@ describe('Component', () => {
       <mock-component id="child"></mock-component>
     </parent-component>
     `
-    const parent = container.querySelector('#parent')
+
     const child = container.querySelector('#child')
 
     expect(child.dependency).toEqual(
-      "RESOURCE: Dependency PROVIDED BY: parent")
+      'RESOURCE: Dependency PROVIDED BY: parent')
 
     const state = child.resolve('state')
     expect(state).toEqual({ key: 'value' })
@@ -317,7 +361,7 @@ describe('Component', () => {
     const styleMap = {
       [`background-${background}`]: background,
       [`color-${color}`]: color,
-      [`shadow-${shadow}`]: shadow,
+      [`shadow-${shadow}`]: shadow
     }
 
     const result = component.styleNames(styleMap)

package/lib/base/styles/styles.js

@@ -1,4 +1,4 @@
-const userActions = ['-hover',  '-active' ]
+const userActions = ['-hover', '-active']
 
 const formActions = ['-focus-within', '-valid', '-invalid', '-checked']
 
@@ -46,7 +46,8 @@ html {
 
   /* TYPOGRAPHY */
 
-  --font-size-step: 0.25rem;
+  --font-size-base: 0.5rem;
+  --font-size-step: 0.125rem;
   --line-height-step: 0.5;
   --word-spacing-step: 0.1rem;
   --letter-spacing-step: 0.05rem;
@@ -102,7 +103,8 @@ ${actions.map(action => css`
 /* TYPOGRAPHY */
 
 [style*='--font-size:'] {
-  font-size: calc(var(--font-size-step) * var(--font-size));
+  font-size: calc(var(--font-size-base) + (
+    var(--font-size-step) * var(--font-size)));
 }
 [style*='--line-height:'] {
   line-height: calc(var(--line-height-step) * var(--line-height));
@@ -114,6 +116,18 @@ ${actions.map(action => css`
   letter-spacing: calc(var(--letter-spacing-step) * var(--letter-spacing));
 }
 
+[style*='--text-overflow:'] {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: var(--text-overflow);
+}
+[style*='--overflow:'] {
+  overflow: var(--overflow);
+}
+[style*='--white-space:'] {
+  white-space: var(--white-space);
+}
+
 /* SPACING */
 
 ${sides.map(side => css`
@@ -252,7 +266,7 @@ ${effects.map(effect => actions.map(action => css`
 
 /* COMBINATORS */
 
-${[...mutableProperties,  ...effects].map(
+${[...mutableProperties, ...effects].map(
   effect => userActions.map(action => css`
 *${action.replace('-', ':')} > [style*='--${effect}-parent${action}:'] {
   ${effect}: var(--${effect}-parent${action});
@@ -277,7 +291,22 @@ ${[...mutableProperties, ...effects].map(
   [style*='--display-large:'] {
     display: var(--display-large);
   }
-}                                       
+}
+
+/* PSEUDO-ELEMENTS */
+
+${actions.map(action => css`
+[style*='--content-before${action}:']${action.replace('-', ':')}::before {
+  content: var(--content-before${action});
+}
+[style*='--content-after${action}:']${action.replace('-', ':')}::after {
+  content: var(--content-after${action});
+}
+[style*='--background-backdrop${action}:']${action.replace(
+  '-', ':')}::backdrop {
+  background: var(--background-backdrop${action});
+}
+`.trim()).join('\n')}
 
 /* ANIMATIONS */
 

package/lib/base/utils/define.js

@@ -3,19 +3,18 @@
 /** @param {string} tag
  * @param {CustomElementConstructor} element
  * @param {string} styles **/
-export function define(tag, element, styles='') {
-  customElements.define(tag, element)
+export function define (tag, element, styles = '') {
+  globalThis.customElements.define(tag, element)
   if (!styles?.trim()) return
 
   try {
-    const sheet = new CSSStyleSheet()
+    const sheet = new globalThis.CSSStyleSheet()
     sheet.replaceSync(styles)
-    return document.adoptedStyleSheets = [
-      ...document.adoptedStyleSheets, sheet]
+    return (document.adoptedStyleSheets = [
+      ...document.adoptedStyleSheets, sheet])
   } catch (error) {
     const style = document.createElement('style')
     style.textContent = styles
-    document.head.appendChild(style);
+    document.head.appendChild(style)
   }
-
 }

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

@@ -3,7 +3,7 @@ import { define } from './define.js'
 
 describe('Define', () => {
   it('can define a custome element', () => {
-    class NewElement extends HTMLElement {}
+    class NewElement extends globalThis.HTMLElement {}
     define('new-element', NewElement)
 
     const newElement = document.createElement('new-element')
@@ -12,16 +12,16 @@ describe('Define', () => {
 
   it('can define a custom element using constructable CSSStyleSheet', () => {
     let definedStyles = null
-    class MockCSSStyleSheet extends CSSStyleSheet {
+    class MockCSSStyleSheet extends globalThis.CSSStyleSheet {
       replaceSync (styles) {
         definedStyles = styles
       }
     }
 
-    jest.spyOn(window, "CSSStyleSheet").mockReturnValue(
+    jest.spyOn(window, 'CSSStyleSheet').mockReturnValue(
       new MockCSSStyleSheet())
 
-    class CSSStyledElement extends HTMLElement {}
+    class CSSStyledElement extends globalThis.HTMLElement {}
     const styles = `
     body {
       color: red;
@@ -41,7 +41,7 @@ describe('Define', () => {
   })
 
   it('can define a custom element using an style fallback element', () => {
-    class StyledElement extends HTMLElement {}
+    class StyledElement extends globalThis.HTMLElement {}
     const styles = `
     body {
       color: red;

package/lib/base/utils/helpers.js

@@ -2,36 +2,41 @@ import { camelToKebab } from './format.js'
 
 /** @param {HTMLElement} self */
 export function listen (self) {
-  const binding = self['binding']
+  const binding = self.binding
   const elements = self.querySelectorAll(`[${binding}]`)
   for (const element of elements) {
     for (const attribute of Array.from(element.attributes)) {
       if (attribute.name.startsWith('on-')) {
-        const eventName = attribute.name.replace('on-', '').trim()
         let handler = self[attribute.value]
 
         const [assignment] = attribute.value.match(/[^{{]+(?=\}})/g) || []
 
         if (assignment) {
           let [objectPath, eventPath] = assignment.split('=')
-          eventPath = eventPath || 'target.value'
+          eventPath = eventPath?.trim() || 'target.value'
           handler = function (event) {
             set(this, objectPath.trim(), get(
               event, eventPath, get(event, 'detail', '')))
-          } 
-        } 
+          }
+        }
 
         if (!handler) continue
 
+        const at = element.getAttribute('at')
         const catchingHandler = async function (event) {
           try {
-            return await Promise.resolve(handler.bind(this)(event))
+            let receiver = this
+            if (at) receiver = this.select(at)
+            return await Promise.resolve(handler.bind(receiver)(event))
           } catch (error) {
-            this.dispatchEvent(new CustomEvent('error', {
-              detail: error, bubbles: true, cancelable: true }))
+            this.dispatchEvent(
+              new globalThis.CustomEvent(
+                'error', { detail: error, bubbles: true, cancelable: true }
+              ))
           }
         }
 
+        const eventName = attribute.name.replace('on-', '').trim()
         element.addEventListener(eventName, catchingHandler.bind(self))
         element.removeAttribute(binding)
       }
@@ -42,13 +47,12 @@ export function listen (self) {
 /** @param {HTMLElement} self  */
 function provide (self) {
   if (!self.provide) return
-  self.addEventListener('resolve', (event) => {
+  self.addEventListener('resolve', (/** @type {CustomEvent} */ event) => {
     const resource = event.detail.resource
     const dependency = self.provide(resource)
     if (dependency === undefined) return
     event.detail[resource] = dependency
   })
-  
 }
 
 /** @param {HTMLElement} self @param {string[]} properties */