EXC: Researching Components

W3C Custom Element, Draft##

<flag-icon country="nl"></flag-icon>

class FlagIcon extends HTMLElement {
  constructor() {
    super();
    this._countryCode = null;
  }

  static get observedAttributes() { return ["country"]; }

  attributeChangedCallback(name, oldValue, newValue) {
    // name will always be "country" due to observedAttributes
    this._countryCode = newValue;
    this._updateRendering();
  }
  connectedCallback() {
    this._updateRendering();
  }

  get country() {
    return this._countryCode;
  }
  set country(v) {
    this.setAttribute("country", v);
  }

  _updateRendering() {
    // Left as an exercise for the reader. But, you'll probably want to
    // check this.ownerDocument.defaultView to see if we've been
    // inserted into a document with a browsing context, and avoid
    // doing any work if not.
  }
}

Ember

REF: Defining a Component
REF: The Component Lifecycle

Hooks of Components

didInsertElement() element has been both created and inserted into the DOM, place to attach event listeners,

didRender() called during both render and re-render

willDestroyElement() teardown logic

didUpdateAttrs runs when the attributes of a component have changed,

HBS File Component Template

<article class="blog-post">
  <h1>{{title}}</h1>
  <p>{{yield}}</p>
  <p>Edit title: {{input type="text" value=title}}</p>
</article>

App.App.GravatarImageComponent = Ember.Component.extend({
  size: 200,
  email: '',

  gravatarUrl: function() {
    var email = this.get('email'),
        size = this.get('size');

    return 'http://example.com' + md5(email) + '?s=' + size;
  }.property('email', 'size')
});

<img src={{gravatarUrl}}>
<div class="email-input">
  {{input type="email" value=email placeholder="Enter your Gravatar e-mail"}}
</div>

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['item-list'],

  didReceiveAttrs() {
    this._super(...arguments);
    this.set('items', this.get('items').map((item) => {
      if (item.id === this.get('selectedItem.id')) {
        item.isSelected = true;
      }
      return item;
    }));
  },

  didRender() {
    this._super(...arguments);
    this.$('.item-list').scrollTop(this.$('.selected-item').position.top);
  }
});

Angular

REF: Directives

References

Building A Component-Based Web UI With Modern JavaScript Frameworks

W3C Custom Elements

ctkjose/exc_spec_components_reasearch.md