Boilerplate draft for calcite-app-components

calcite-boilerplate.tsx

/*
  Enforceable by `component-member-order` rule (https://github.com/natemoo-re/tslint-stencil/blob/5aa7cfc5e3b627e67cd42ea3fbe7b8394fd14730/docs/component-member-order.md):

  "component-member-order": {
    "severity": "warn",
    "options": {
      "order": [
        "lifecycle",
        "stencil-method",
        "prop",
        "watched-prop",
        "event",
        "own-prop",
        "internal-prop",
        "own-method",
        "element",
        "state",
        "watched-state",
        "listen",
        "method"
      ],
      "alphabetical": true
    }
  }
 */

import {
  Component,
  Element,
  Event,
  EventEmitter,
  Listen,
  Method,
  Prop,
  State,
  Watch,
  h
} from "@stencil/core";

const CSS = {
  foo: "foo"
};

@Component({
  tag: "calcite-boilerplate",
  styleUrl: "calcite-boilerplate.scss",
  shadow: true
})
export class CalciteBoilerplate {
  // --------------------------------------------------------------------------
  //
  //  Lifecycle
  //
  // --------------------------------------------------------------------------

  componentWillLoad() {
    // ...
  }

  // --------------------------------------------------------------------------
  //
  //  Rendering
  //
  // --------------------------------------------------------------------------  
  
  render() {
    return <div class={CSS.foo} />;
  }

  // --------------------------------------------------------------------------
  //
  //  Properties
  //
  // --------------------------------------------------------------------------

  @Prop()
  someProp = true;

  // --------------------------------------------------------------------------
  //
  //  Events
  //
  // --------------------------------------------------------------------------

  @Event()
  calciteBoilerplateEvent: EventEmitter;

  // --------------------------------------------------------------------------
  //
  //  Private Properties
  //
  // --------------------------------------------------------------------------

  internalProp: string;

  internalMethod(): void {
    // ...
  }

  @Element()
  el: HTMLElement;

  @State()
  internalRenderableProp = 0;

  // --------------------------------------------------------------------------
  //
  //  Private Methods
  //
  // --------------------------------------------------------------------------

  @Watch("someProp")
  handleSomeProp(): void {
    // ...
  }

  @Watch("internalRenderableProp")
  handleInternalSomeProp(): void {
    // ...
  }

  @Listen("someEvent")
  handleSomeEvent(): void {
    // ...
  }

  // --------------------------------------------------------------------------
  //
  //  Public Methods
  //
  // --------------------------------------------------------------------------

  @Method()
  publicMethod(): void {
    // ...
  }
}

Moved! 💥