From e78030ab130e1b58b3371db84b00ee91814295b5 Mon Sep 17 00:00:00 2001
From: Ayo Ayco <ramon.aycojr@gmail.com>
Date: Wed, 27 Dec 2023 00:13:21 +0100
Subject: [PATCH] feat: use shadow dom host (#41)

---
 .husky/pre-commit     |  2 +-
 .vscode/settings.json |  2 +-
 package.json          |  2 +-
 src/WebComponent.js   | 30 +++++++++++++++---------------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index 75fac8e..251a23e 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npm run lint
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index a90d63b..86fe7e9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
   "js/ts.implicitProjectConfig.checkJs": true,
   "editor.formatOnSave": true
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index b73d4f0..a41e059 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-component-base",
-  "version": "2.1.0-beta.2",
+  "version": "2.1.0-beta.3",
   "description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
   "type": "module",
   "exports": {
diff --git a/src/WebComponent.js b/src/WebComponent.js
index e8fff55..dedb70e 100644
--- a/src/WebComponent.js
+++ b/src/WebComponent.js
@@ -16,6 +16,12 @@ import {
  * @see https://WebComponent.io
  */
 export class WebComponent extends HTMLElement {
+  #host;
+  #prevDOM;
+  #props;
+  #typeMap = {};
+  #effectsMap = {};
+
   /**
    * Array of strings that tells the browsers which attributes will cause a render
    * @type {Array<string>}
@@ -54,11 +60,6 @@ export class WebComponent extends HTMLElement {
     return this.#props;
   }
 
-  /**
-   * @type {PropStringMap}
-   */
-  #props;
-
   /**
    * Triggered after view is initialized
    */
@@ -89,6 +90,7 @@ export class WebComponent extends HTMLElement {
   constructor() {
     super();
     this.#initializeProps();
+    this.#initializeHost();
   }
 
   static get observedAttributes() {
@@ -128,9 +130,6 @@ export class WebComponent extends HTMLElement {
     if (restored !== this.props[key]) this.props[key] = restored;
   }
 
-  #typeMap = {};
-  #effectsMap = {};
-
   #handler(setter, meta) {
     const effectsMap = meta.#effectsMap;
     const typeMap = meta.#typeMap;
@@ -188,24 +187,25 @@ export class WebComponent extends HTMLElement {
       );
     }
   }
+  #initializeHost() {
+    this.#host = this;
+    if (this.constructor.shadowRootInit) {
+      this.#host = this.attachShadow(this.constructor.shadowRootInit);
+    }
+  }
 
-  #prevDOM;
   render() {
     if (typeof this.template === "string") {
       this.innerHTML = this.template;
     } else if (typeof this.template === "object") {
-      let host = this;
-      if (this.constructor.shadowRootInit) {
-        host = this.attachShadow(this.constructor.shadowRootInit);
-      }
       const tree = this.template;
 
       // TODO: smart diffing
       if (JSON.stringify(this.#prevDOM) !== JSON.stringify(tree)) {
         const el = createElement(tree);
         if (el) {
-          if (Array.isArray(el)) host.replaceChildren(...el);
-          else host.replaceChildren(el);
+          if (Array.isArray(el)) this.#host.replaceChildren(...el);
+          else this.#host.replaceChildren(el);
         }
         this.#prevDOM = tree;
       }