@knowark/componarkjs 1.7.10 → 1.8.0

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

@@ -279,6 +279,28 @@ describe('Component', () => {
     expect(event.detail.code).toEqual(['XYZ890'])
   })
 
+  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">
+          <button id="action">Action</button>
+        </div>
+        <div id="child">
+          Hello
+        </div>
+      </mock-component>
+    `
+    const component = container.querySelector('mock-component')
+    const button = component.select('#action')
+
+    const event = new globalThis.CustomEvent(
+      'change', { bubbles: true, detail: { name: 'World' } })
+    button.dispatchEvent(event)
+
+    const child = container.querySelector('#child')
+    expect(child.textContent.trim()).toEqual('World')
+  })
+
   it('emits an error event on declared listeners', async () => {
     container.innerHTML = `
     <mock-component>

package/lib/base/utils/helpers.js

@@ -2,12 +2,16 @@ import { camelToKebab } from './format.js'
 
 /** @param {HTMLElement} self */
 export function listen (self) {
+  /** @ts-ignore */
   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 [value, at] = attribute.value.split('@').map(item => item.trim())
+        const [reference, at] = attribute.value.split('@').map(
+          item => item.trim())
+        const [value, pipe] = reference.split('|').map(
+          item => item.trim())
 
         let handler = self[value]
         const [assignment] = value.match(/[^{{]+(?=\}})/g) || []
@@ -31,7 +35,8 @@ export function listen (self) {
               if (!receiver) return
               handler = receiver[value]
             }
-            return await Promise.resolve(handler.bind(receiver)(event))
+            const data = pipe ? get(event, pipe) : event
+            return await Promise.resolve(handler.bind(receiver)(data))
           } catch (error) {
             this.dispatchEvent(
               new globalThis.CustomEvent(
@@ -50,9 +55,11 @@ export function listen (self) {
 
 /** @param {HTMLElement} self  */
 function provide (self) {
+  /** @ts-ignore */
   if (!self.provide) return
   self.addEventListener('resolve', (/** @type {CustomEvent} */ event) => {
     const resource = event.detail.resource
+    /** @ts-ignore */
     const dependency = self.provide(resource)
     if (dependency === undefined) return
     event.detail[resource] = dependency

package/package.json

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