From bfacf84b455a6e700e21ceaada87df2bbb4539e4 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 10 Nov 2023 22:04:46 +0100
Subject: [PATCH] refactor: update jsdocs types & example

---
 src/WebComponent.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/WebComponent.js b/src/WebComponent.js
index c80e9a1..7405bb4 100644
--- a/src/WebComponent.js
+++ b/src/WebComponent.js
@@ -1,5 +1,5 @@
 /**
- * A minimal vanilla JS base class to reduce the complexity of creating reactive custom elements
+ * A minimal base class to reduce the complexity of creating reactive custom elements
  * @license MIT <https://opensource.org/licenses/MIT>
  * @author Ayo Ayco <https://ayo.ayco.io>
  * @see https://www.npmjs.com/package/web-component-base#readme
@@ -8,14 +8,11 @@
  * import WebComponent from "https://unpkg.com/web-component-base/index.js";
  *
  * class HelloWorld extends WebComponent {
- *   dataName = "World";
- *   emotion = "excited";
- *
  *   static properties = ["data-name", "emotion"];
  *
  *   get template() {
  *     return `
- *         <h1>Hello ${this.dataName}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</* h1>`;
+ *         <h1>Hello ${this.dataName || 'World'}${this.emotion === "sad" ? ". 😭" : "! 🙌"}</h1>`;
  *   }
  * }
  *
@@ -58,7 +55,13 @@ export class WebComponent extends HTMLElement {
   onDestroy() {}
 
   /**
-   * @param {{'property': string, 'previousValue': any, 'currentValue': any}} changes
+   * Triggered when an attribute value changes
+   * @typedef {{
+   *  property: string,
+   *  previousValue: any,
+   *  currentValue: any
+   * }} Changes
+   * @param {Changes} changes
    * @returns void
    */
   onChanges(changes) {}
@@ -92,6 +95,11 @@ export class WebComponent extends HTMLElement {
     this.innerHTML = this.template;
   }
 
+  /**
+   * Converts a kebab-cased string into camelCaps
+   * @param {string} kebab string in kebab-case
+   * @returns {string}
+   */
   #getCamelCaps(kebab) {
     return kebab.replace(/-./g, (x) => x[1].toUpperCase());
   }