chore: update examples

README.md

@@ -74,11 +74,13 @@ Define behavior when certain events in the component's life cycle is triggered b
 
 ### onInit()
 - gets triggered when the component is connected to the DOM
+- best for setting up the component
 
 ```js
 import WebComponent from "../index.mjs";
 
 class ClickableText extends WebComponent {
+  // gets called when the component is used in an HTML document
   onInit() {
     this.onclick = () => console.log(">>> click!");
   }
@@ -96,8 +98,9 @@ class ClickableText extends WebComponent {
 import WebComponent from "../index.mjs";
 
 class ClickableText extends WebComponent {
-  onChanges({prev, curr}) {
+  // gets called when an attribute value changes
-    console.log('>>> something changed', prev, curr)
+  onChanges({attr, prev, curr}) {
+    console.log('>>> something changed', {attr, prev, curr})
   }
 
   get template() {

WebComponent.mjs

@@ -13,7 +13,7 @@ export class WebComponent extends HTMLElement {
   /**
    * triggered when an attribute value changed
    */
-  onChanges({ previousValue, currentValue }) {}
+  onChanges({ property, previousValue, currentValue }) {}
 
   connectedCallback() {
     this.render();
@@ -26,7 +26,7 @@ export class WebComponent extends HTMLElement {
       this.render();
     }
 
-    this.onChanges({ previousValue, currentValue });
+    this.onChanges({ property, previousValue, currentValue });
   }
 
   render() {

demo/HelloWorld.mjs

@@ -9,8 +9,8 @@ export class HelloWorld extends WebComponent {
     return ["name", "emotion"];
   }
 
-  onChanges({ previousValue, currentValue }) {
+  onChanges({ property, previousValue, currentValue }) {
-    console.log(">>> changed", { previousValue, currentValue });
+    console.log(">>> changed", { property, previousValue, currentValue });
   }
 
   get template() {