@knowark/componarkjs 1.8.1 → 1.8.3

package/.github/workflows/node.js.yml

@@ -0,0 +1,35 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "master" ]
+    paths-ignore:
+      - '**/README.md'
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm test
+    - name: Upload coverage reports to Codecov
+      uses: codecov/codecov-action@v3
+      env:
+        CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

package/README.md

@@ -1,3 +1,14 @@
+<p align="center">
+  <a href="https://codecov.io/gh/librark/componark">
+    <img src="https://codecov.io/gh/librark/componark/graph/badge.svg?token=IWNapsPUch"/>
+  </a>
+</p>
+<p align="center">
+  <a href="https://codecov.io/gh/librark/componark">
+    <img src="https://codecov.io/gh/librark/componark/graphs/sunburst.svg?token=IWNapsPUch"/>
+  </a>
+</p>
+
 # ComponArk
 
 Pragmatic Web Components Library

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/styles/styles.js

@@ -267,21 +267,21 @@ ${effects.map(effect => actions.map(action => css`
 /* COMBINATORS */
 
 ${[...mutableProperties, ...effects].map(
-  effect => userActions.map(action => css`
+  effect => actions.map(action => css`
 *${action.replace('-', ':')} > [style*='--${effect}-parent${action}:'] {
   ${effect}: var(--${effect}-parent${action});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
-  effect => formActions.map(action => css`
+  effect => actions.map(action => css`
 *${action.replace('-', ':')} + [style*='--${effect}-sibling${action}:'] {
   ${effect}: var(--${effect}-sibling${action});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
-  effect => formActions.map(action => css`
+  effect => actions.map(action => css`
 *${action.replace('-', ':')} ~ [style*='--${effect}-antecessor${action}:'] {
   ${effect}: var(--${effect}-antecessor${action});
 }
@@ -289,7 +289,7 @@ ${[...mutableProperties, ...effects].map(
 
 /* MEDIA QUERIES */
 
-@media (min-width: 960px) {             
+@media (min-width: 960px) {
   [style*='--grid-large:'] {
     display: grid;
     grid: var(--grid-large);

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.1",
+  "version": "1.8.3",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",
@@ -20,21 +20,21 @@
     "components"
   ],
   "devDependencies": {
-    "@knowark/injectarkjs": "^0.9.1",
-    "@knowark/routarkjs": "^0.6.5",
-    "@types/jest": "^29.5.2",
+    "@knowark/injectarkjs": "^0.10.6",
+    "@knowark/routarkjs": "^0.6.6",
+    "@types/jest": "^29.5.11",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "^12.0.2",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.1",
-    "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.5.1",
-    "jest-environment-jsdom": "^29.5.0",
-    "jsdom": "^22.1.0",
-    "npm-check-updates": "^16.10.12",
-    "webpack": "^5.85.1",
-    "webpack-cli": "^5.1.3",
-    "webpack-dev-server": "^4.15.0"
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "jsdom": "^24.0.0",
+    "npm-check-updates": "^16.14.12",
+    "webpack": "^5.90.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "directories": {
     "test": "tests"
@@ -48,7 +48,6 @@
     "verbose": true,
     "clearMocks": true,
     "testEnvironment": "jsdom",
-    "coverageDirectory": "/tmp/componark/coverage",
     "transform": {},
     "setupFiles": [
       "jest-canvas-mock"