Components as extended classes

[adamjgrant]

Basic setup of a component follows native JS pattern.

class Card extends Component {
  constructor() {
    this.classname = "card";
  }

  events(_) {
    // Just a wrapper for addEventListener scoped only for class="approve" elements in a card component.
    // And "_" gives you access to the component's API.
    _.e("click", ".approve", _.approve);
    _.e("click", ".reject", _.reject);
  }

  api() {
    // This is a separate component we made elsewhere.
    const notification = new Notification();

    return {
      approve(_) { _.set_color("green"); },
      reject(_)  { _.set_color("red"); },

      set_color(color, _) {
        _.me.classList.add(`card-${color}`);
        _.save_card_to_database({
          id: _.me.index,
          color: color
        });

        // Call the api of another component
        notification.show("Color has been changed");
      },

      save_card_to_database(data, _) {
        // ...
      }      
    }
  }
}

To get an array of the cards with all the functional goodies:

const cards = Card.elements; // NodeList[]

Another idea

cards.e("click", "button").then(_ => {
  _.set_color("green");
});

These events will only fire for elements with the specified classname and their children.

<div class="card">
  <button>Press me</button>
</div>

<div class="something-else">
  <button>I don't do anything</button>
</div>

[adamjgrant]

Still a rough idea but trying to get my thoughts down....