stencil.ts

import { Component, Element, Event, EventEmitter, Listen, Method, Prop, PropDidChange } from '@stencil/core';

/**
 * GUIDE STYLE FOR STENCIL COMPONENTS
 * -
 */
@Component({
  tag: 'ion-something',
  styleUrl: 'something.scss',
  styleUrls: {
    ios: 'something.ios.scss',
    md: 'something.md.scss',
    wp: 'something.wp.scss'
  },
  host: {
    theme: 'something'
  }
})
export class Something {

  /**
   * 1. Private variables:
   */
  private internal: string;
  private text = 'default';
  private number = 1;

  /**
   * 2. Public variables: they are not par
   */
  mode: string;
  color: string;
  isAnimating: boolean = false;
  isRightSide: boolean = false;
  width: number = null;


  /**
   * 3. Reference to host HTML element
   * Always inline
   */
  @Element() el: HTMLElement;

  /**
   * 4. Internal props (context and connect)
   * Always inline
   */
  @Prop({ context: 'config' }) config: Config;
  @Prop({ connect: 'ion-menu-controller' }) lazyMenuCtrl: Lazy<MenuController>;

  /**
   * 4. Input public API
   * Always inline
   */
  @Prop() content: string;
  @Prop() menuId: string;
  @Prop() type: string = 'overlay';
  @Prop({ mutable: true }) enabled: boolean;

  /**
   * NOTE: Prop lifecycle events SHOULD go just behind the Prop they listen to
   */
  @Prop() swipeEnabled: boolean = true;
  @PropDidChange('swipeEnabled')
  swipeEnabledChange() {
    this.updateState();
  }

  /**
   * 4. Events section
   * Always inline
   */
  @Event() ionDrag: EventEmitter;
  @Event() ionOpen: EventEmitter;
  @Event() ionClose: EventEmitter;

  /**
   * 5. Component lifecycle events
   * Lifecycle methods SHOULD be protected
   */
  protected ionViewWillLoad() {}
  protected ionViewDidLoad() {}
  protected ionViewDidUnload() {}

  /**
   * 6. Listeners
   * It is ok to place them in a different location
   * if makes more sense in the context.
   *
   * Always use two lines
   */
  @Listen('click', {enabled: false})
  onClick(ev: UIEvent) {
    console.log('hi!')
  }

  /**
   * 7. Public methods API
   * Always use two lines
   */
  @Method()
  open() { }

  @Method()
  close() {}

  /**
   * 8. Private methods
   * Internal businness logic
   */
  private prepareAnimation(): Promise<void> {
  }

  private updateState() {
  }

  /**
   * 10. hostData() function
   * SHOULD be protected
   */
  protected hostData() {
    return {
      attribute: 'navigation',
      side: this.isRightSide ? 'right' : 'left',
      type: this.type,
      class: {
        'something-is-animating': this.isAnimating
      }
    };
  }

  /**
   * 11. render() function
   * Always the last one in the class
   * SHOULD be protected
   */
  protected render() {
    return (
      <div class='menu-inner page-inner'>
        <slot></slot>
      </div>
    );
  }
}