From 5269a4dbfa6bbab77218e22e68fbe6b5f3944b4c Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 17 Sep 2023 02:09:02 +0200
Subject: [PATCH] chore: update examples

---
 README.md           | 7 +++++--
 WebComponent.mjs    | 4 ++--
 demo/HelloWorld.mjs | 4 ++--
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 4f428f0..e71168c 100644
--- a/README.md
+++ b/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}) {
-    console.log('>>> something changed', prev, curr)
+  // gets called when an attribute value changes
+  onChanges({attr, prev, curr}) {
+    console.log('>>> something changed', {attr, prev, curr})
   }
 
   get template() {
diff --git a/WebComponent.mjs b/WebComponent.mjs
index 78fbf92..7791f81 100644
--- a/WebComponent.mjs
+++ b/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() {
diff --git a/demo/HelloWorld.mjs b/demo/HelloWorld.mjs
index 950406c..f414694 100644
--- a/demo/HelloWorld.mjs
+++ b/demo/HelloWorld.mjs
@@ -9,8 +9,8 @@ export class HelloWorld extends WebComponent {
     return ["name", "emotion"];
   }
 
-  onChanges({ previousValue, currentValue }) {
-    console.log(">>> changed", { previousValue, currentValue });
+  onChanges({ property, previousValue, currentValue }) {
+    console.log(">>> changed", { property, previousValue, currentValue });
   }
 
   get template() {