feat: onInit hook

README.md

@@ -1,13 +1,17 @@
-# Web Component Base
+Web Component Base
-
+---
 This is a very minimal base class for creating reactive custom elements easily.
 
 When you extend the `WebComponent` class for your component, you only have to define the `template()` and `observedAttributes()`, and changes in any attribute value will automatically cause the UI to render.
 
 The result is a reactive UI on attribute changes.
 
-Optionally, you can
+## Table of Contents
-1. define a method [`onChanges`](#hooks) that gets triggered when an attribute value changed
+1. [Installation](#installation)
+1. [Usage](#usage)
+1. [Life-Cycle Hooks](#life-cycle-hooks)
+    1. [`onInit`](#oninit) - the component is connected to the DOM
+    1. [`onChanges`](#onchanges) - an attribute value changed
 
 ## Installation
 
@@ -64,28 +68,40 @@ The result is a reactive UI that updates on attribute changes:
 
 <img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="https://git.sr.ht/~ayoayco/web-component-base/blob/main/assets/wc-base-demo.gif" width="400" />
 
-### Hooks
+## Life-Cycle Hooks
 
-Currently, you can define behavior when an attribute value changes by defining a method `onChanges` in your component:
+Define behavior when certain events in the component's life cycle is triggered by providing hook methods
+
+### onInit()
+- gets triggered when the component is connected to the DOM
 
 ```js
 import WebComponent from "../index.mjs";
 
-export class HelloWorld extends WebComponent {
+class ClickableText extends WebComponent {
-  name = "World";
+  onInit() {
-  emotion = "excited";
+    this.onclick = () => console.log(">>> click!");
-
-  static get observedAttributes() {
-    return ["name", "emotion"];
-  }
-
-  onChanges({ previousValue, currentValue }) {
-    console.log(">>> changed", { previousValue, currentValue });
   }
 
   get template() {
-    return `
+    return `<span style="cursor:pointer">Click me!</span>`;
-        <h1>Hello ${this.name}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
   }
 }
-```
+```
+
+### onChanges()
+- gets triggered when an attribute value changed
+
+```js
+import WebComponent from "../index.mjs";
+
+class ClickableText extends WebComponent {
+  onChanges({prev, curr}) {
+    console.log('>>> something changed', prev, curr)
+  }
+
+  get template() {
+    return `<span style="cursor:pointer">Click me!</span>`;
+  }
+}
+```

WebComponent.mjs

@@ -5,6 +5,11 @@ export class WebComponent extends HTMLElement {
     return "";
   }
 
+  /**
+   * triggered when the component is connected to the DOM
+   */
+  onInit() {}
+
   /**
    * triggered when an attribute value changed
    */
@@ -12,6 +17,7 @@ export class WebComponent extends HTMLElement {
 
   connectedCallback() {
     this.render();
+    this.onInit();
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {

demo/SimpleText.mjs

@@ -2,14 +2,12 @@
 import WebComponent from "../index.mjs";
 
 class SimpleText extends WebComponent {
-  greeting = "Hello";
+  onInit() {
-
+    this.onclick = () => console.log(">>> click!");
-  static get observedAttributes() {
-    return ["greeting"];
   }
 
   get template() {
-    return `<p>Simple text ${this.greeting}</p>`;
+    return `<span>Click me!</span>`;
   }
 }