From b4c7bab3df516531baf7c0550d44a6ab58df75ab Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 17 Nov 2023 19:15:56 +0100
Subject: [PATCH] =?UTF-8?q?feat(site,=20templates):=20use=20HTMLElement.da?=
 =?UTF-8?q?taset=20=F0=9F=A4=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/components/vanilla-hello-world.js    |  9 +++--
 site/src/pages/index.html                     |  2 +-
 .../src/components/vanilla-hello-world.js     | 33 ++++++++++---------
 templates/basic/src/pages/index.html          |  3 +-
 4 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/site/src/components/vanilla-hello-world.js b/site/src/components/vanilla-hello-world.js
index 12a1564..66ccfb8 100644
--- a/site/src/components/vanilla-hello-world.js
+++ b/site/src/components/vanilla-hello-world.js
@@ -5,9 +5,12 @@ class HelloWorld extends HTMLElement {
 
   connectedCallback() {
     let count = 0;
-    this.onclick = () => {
-      this.setAttribute("data-name", `Clicked ${++count}x`);
-    };
+
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
+    }
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
   }
 
   attributeChangedCallback(property, previousValue, currentValue) {
diff --git a/site/src/pages/index.html b/site/src/pages/index.html
index 572e0a1..f95dea7 100644
--- a/site/src/pages/index.html
+++ b/site/src/pages/index.html
@@ -34,7 +34,7 @@
         <code-block>npm create <strong style="color: var(--color-blue)">mcfly</strong>@latest</code-block>
         <p>
           Here's a sample interactive custom element:
-          <vanilla-hello-world data-name="McFly"></vanilla-hello-world>
+          <vanilla-hello-world></vanilla-hello-world>
         </p>
         <p>
           Start at the very basic of writing HTML files and enhance with
diff --git a/templates/basic/src/components/vanilla-hello-world.js b/templates/basic/src/components/vanilla-hello-world.js
index 0301bb4..66ccfb8 100644
--- a/templates/basic/src/components/vanilla-hello-world.js
+++ b/templates/basic/src/components/vanilla-hello-world.js
@@ -1,18 +1,21 @@
 class HelloWorld extends HTMLElement {
-    static get observedAttributes() {
-      return ["data-name"];
+  static get observedAttributes() {
+    return ["data-name"];
+  }
+
+  connectedCallback() {
+    let count = 0;
+
+    if (!('name' in this.dataset)) {
+      this.dataset.name = 'World'
     }
-  
-    connectedCallback() {
-      let count = 0;
-      this.onclick = () => {
-        this.setAttribute("data-name", `Clicked ${++count}x`);
-      };
+
+    this.onclick = () => this.dataset.name = `Clicked ${++count}x`;
+  }
+
+  attributeChangedCallback(property, previousValue, currentValue) {
+    if (property === "data-name" && previousValue !== currentValue) {
+      this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
     }
-  
-    attributeChangedCallback(property, previousValue, currentValue) {
-      if (property === "data-name" && previousValue !== currentValue) {
-        this.innerHTML = `<button style="cursor:pointer">Hello ${currentValue}!</button>`;
-      }
-    }
-  }
\ No newline at end of file
+  }
+}
diff --git a/templates/basic/src/pages/index.html b/templates/basic/src/pages/index.html
index 553c430..a7ca67d 100644
--- a/templates/basic/src/pages/index.html
+++ b/templates/basic/src/pages/index.html
@@ -25,8 +25,7 @@
     <main>
       <h2>Welcome to {{ project.name }}</h2>
       <p>
-        Here's a vanilla custom element:
-        <vanilla-hello-world data-name="{{project.name}}" />
+        Here's a vanilla custom element: <vanilla-hello-world/>
       </p>
       <code-block language="js">
 class HelloWorld extends HTMLElement {