@knowark/componarkjs 1.8.2 → 1.8.3

package/lib/base/component/component.js

@@ -6,6 +6,7 @@ export class Component extends globalThis.HTMLElement {
   constructor () {
     super()
     this.binding = 'listen'
+    this.local = {}
     reflect(this, this.reflectedProperties())
   }
 
@@ -52,7 +53,7 @@ export class Component extends globalThis.HTMLElement {
 
   connectedCallback () {
     try {
-      !this.state && this.init({})
+      !(this.state || Object.keys(this.local).length) && this.init({})
       this.render()
     } catch (error) {
       this.emit('error', error)

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

@@ -82,6 +82,9 @@ describe('Component', () => {
   it('can have some of its attributes reflected as properties', () => {
     expect(component.code).toBe('XYZ123')
   })
+  it('has an asynchronous load method which is empty by default', async () => {
+    expect(await component.load()).toBeUndefined()
+  })
 
   it('sets its tag name as class when rendered', () => {
     component.render()
@@ -224,6 +227,22 @@ describe('Component', () => {
     expect(component.data.value).toEqual('A')
   })
 
+  it('performs basic transformations to event properties', async () => {
+    container.innerHTML = `
+    <mock-component>
+      <input type="text" listen on-alter="{{ data.value | number }}"></input>
+    </mock-component>
+    `
+
+    const component = container.querySelector('mock-component')
+    const input = component.select('input')
+
+    input.dispatchEvent(
+      new globalThis.CustomEvent('alter', { bubbles: true, detail: '777' }))
+
+    expect(component.data.value).toEqual(777)
+  })
+
   it('listens to events and handles them with its own methods', async () => {
     container.innerHTML = `
       <mock-component code="ABC123">
@@ -259,6 +278,25 @@ describe('Component', () => {
     expect(event.detail.code).toEqual(['XYZ890'])
   })
 
+  it('does not launch and event if the target is not found', async () => {
+    container.innerHTML = `
+      <mock-component code="ABC123">
+        <input type="text" listen on-alter="customHandler@#missing"></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([])
+  })
+
+
   it('listens to clicks and redirects them to target components', async () => {
     container.innerHTML = `
       <mock-component code="ABC123">
@@ -282,7 +320,7 @@ describe('Component', () => {
   it('listens to events and pipes them to target components', async () => {
     container.innerHTML = `
       <mock-component code="ABC123">
-        <div type="text" listen on-change="replaceChildren|detail.name@#child">
+        <div type="text" listen on-change="replaceChildren%detail.name@#child">
           <button id="action">Action</button>
         </div>
         <div id="child">

package/lib/base/utils/helpers.js

@@ -10,18 +10,20 @@ export function listen (self) {
       if (attribute.name.startsWith('on-')) {
         const [reference, at] = attribute.value.split('@').map(
           item => item.trim())
-        const [value, pipe] = reference.split('|').map(
+        const [value, field] = reference.split('%').map(
           item => item.trim())
 
         let handler = self[value]
         const [assignment] = value.match(/[^{{]+(?=\}})/g) || []
 
         if (assignment) {
-          let [objectPath, eventPath] = assignment.split('=')
+          const [content, pipe] = assignment.split('|').map(
+            item => item.trim())
+          let [objectPath, eventPath] = content.split('=')
           eventPath = eventPath?.trim() || 'target.value'
           handler = function (event) {
-            set(this, objectPath.trim(), get(
-              event, eventPath, get(event, 'detail', '')))
+            const variable = transform(pipe, get(event, 'detail', ''))
+            set(this, objectPath.trim(), get(event, eventPath, variable))
           }
         }
 
@@ -35,7 +37,7 @@ export function listen (self) {
               if (!receiver) return
               handler = receiver[value]
             }
-            const data = pipe ? get(event, pipe) : event
+            const data = field ? get(event, field) : event
             return await Promise.resolve(handler.bind(receiver)(data))
           } catch (error) {
             this.dispatchEvent(
@@ -85,6 +87,14 @@ export function reflect (self, properties) {
   provide(self)
 }
 
+function transform (pipe, value) {
+  return {
+    string: String,
+    boolean: Boolean,
+    number: Number
+  }[pipe?.toLowerCase() || 'string'](value)
+}
+
 /** @param {object} object @param {string} path @param {any} value */
 export function set (object, path, value) {
   const pathArray = path.match(/([^[.\]])+/g)

package/lib/components/emit/components/emit.js

@@ -4,18 +4,29 @@ const tag = 'ark-emit'
 export class Emit extends Component {
   constructor () {
     super()
-    const type = this.receive || 'click'
-    this.source = JSON.parse(this._pop(':scope > data')?.textContent || null)
-    this.addEventListener(type, this.handle.bind(this))
+    this.bind = /** @type {string} */ (this.bind)
+    this.receive = /** @type {string} */ (this.receive)
+    this.dispatch = /** @type {string} */ (this.dispatch)
+    this.source = this._pop(':scope > data')?.textContent
+    this.addEventListener(this.receive || 'click', this.handle.bind(this))
   }
 
   reflectedProperties () {
-    return ['receive', 'dispatch']
+    return ['receive', 'dispatch', 'bind']
   }
 
   handle (event) {
     const detail = Object.assign({}, event.detail)
-    if (this.source) Object.assign(detail, this.source)
+
+    let data = null
+    if (this.bind && this.source) {
+      const element = this.closest(this.bind)
+      data = Function(`return ${this.source.trim()}`).call(element)
+    } else if (this.source) {
+      data = JSON.parse(this.source)
+    }
+
+    Object.assign(detail, data)
 
     const value = event.target.value
     if (value) Object.assign(detail, { value })

package/lib/components/emit/components/emit.test.js

@@ -135,4 +135,35 @@ describe('Emit', () => {
 
     input.dispatchEvent(inputEvent)
   })
+
+  it('binds to the given ancestor referenced by a selector', async () => {
+    expect.assertions(1)
+
+    container.innerHTML = `
+    <div class="grandparent" data-name="John", data-surname="Doe">
+      <div class="parent">
+        <ark-emit bind=".grandparent">
+          <data>
+            {
+              name: this.dataset.name,
+              surname: this.dataset.surname
+            }
+          </data>
+          <button>Sending a click event when pressed!</button>
+        </ark-emit>
+      </div>
+    </div>
+    `
+
+    const emit = container.querySelector('ark-emit')
+    emit.addEventListener('emit', (event) => {
+      const { detail } = event
+      expect(detail).toEqual({
+        name: 'John',
+        surname: 'Doe'
+      })
+    })
+
+    container.querySelector('button').click()
+  })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",