@3share/ui-component

AEM UI Component

A simple helper Class to save time while creating component registrations and DOM references to internal element using the Adobe's approach with data-cmp-is="Somecomponent and the reference with hooks data-cmp-hook-somecomponent="nameOfElement".

Installation

npm i @3share/ui-component

Example

HTML

<div data-cmp-is="Slideshow">
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>
  <div data-cmp-hook-slideshow="slides"></div>
  
  <button data-cmp-hook-slideshow="clickButton">Click Here!</button>
</div>

TypeScript

import { Component, descriptor } from '@3share/ui-component';

@descriptor({
  selector: '[data-cmp-is="Slideshow"]', // this is the selector the decorator will use to instantiate this class.
})
class Slideshow extends Component {
  ...

  constructor(cmpRef: HTMLElement) {
    super(cmpRef);
    
    /* Logs the DOM reference to the component itself. */
    console.log(this.$cmp);
    /* 
      Logs and object with all the hooks found on this component. 
      { slides: HTMLElement[], clickButton: HTMLElement[], } 
    */
    console.log(this.$elements);

    this.$elements.slides.forEach((slide) => {
      slide.addEventListener('mouseenter', this.someEventHandler);
    });
    
    this.$elements.button[0].addEventListener('mouseenter', this.someClickHandler);
  }
  
  private someEventHandler(event: MouseEvent):void {}
  
  private this.someClickHandler(event: MouseEvent):void {}
}

export default Slideshow;