From b25c0ef0dcabe30398e568947606a0e51bbb665e Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 19 Oct 2023 16:36:20 +0200
Subject: [PATCH] fix: dynamic base class import

---
 routes/[...index].ts                                      | 2 +-
 src/components/{hello-world.js => vanilla-hello-world.js} | 0
 src/pages/demo/index.html                                 | 4 ++--
 src/pages/index.html                                      | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename src/components/{hello-world.js => vanilla-hello-world.js} (100%)

diff --git a/routes/[...index].ts b/routes/[...index].ts
index 6923a54..4b2f911 100644
--- a/routes/[...index].ts
+++ b/routes/[...index].ts
@@ -88,6 +88,7 @@ async function insertRegistry(
 
 async function buildRegistry(usedCustomElements: string[], type: "js" | "ts") {
   let registryScript = `<script type='module'>`;
+  let baseClassImported = false;
 
   for (const name of usedCustomElements) {
     const content = await useStorage().getItem(
@@ -97,7 +98,6 @@ async function buildRegistry(usedCustomElements: string[], type: "js" | "ts") {
       `class WebComponent {}; class HTMLElement {}; (${content.toString()})`
     );
     const className = new evalStore().constructor.name;
-    let baseClassImported = false;
 
     if (
       !baseClassImported &&
diff --git a/src/components/hello-world.js b/src/components/vanilla-hello-world.js
similarity index 100%
rename from src/components/hello-world.js
rename to src/components/vanilla-hello-world.js
diff --git a/src/pages/demo/index.html b/src/pages/demo/index.html
index f26f469..aa2f40a 100644
--- a/src/pages/demo/index.html
+++ b/src/pages/demo/index.html
@@ -20,7 +20,7 @@
     <main>
       <a href="/demo/about">{{ count }}</a>
       <div>
-        <hello-world name="{{name }}"></hello-world>
+        <my-hello-world name="{{name }}"></my-hello-world>
       </div>
       <p>some text: {{greeting}}</p>
       {{greeting}} hey<br />
@@ -28,7 +28,7 @@
     </main>
     <my-footer></my-footer>
     <script>
-      const helloWorld = document.querySelector("hello-world");
+      const helloWorld = document.querySelector("my-hello-world");
       setTimeout(() => {
         helloWorld.setAttribute("name", "Nitro");
       }, 2000);
diff --git a/src/pages/index.html b/src/pages/index.html
index d0e6a0b..1c3b99e 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -10,7 +10,7 @@
       </p>
       <p>
         Here's a sample interactive custom element:
-        <hello-world name="McFly"></hello-world>
+        <vanilla-hello-world name="McFly"></vanilla-hello-world>
       </p>
       <p>
         Start at the very basic of writing HTML files and enhance with standard