From 7b45dc3ae6d49591bfc414d4727e60e74cef6761 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Sun, 8 Oct 2023 00:59:57 +0200
Subject: [PATCH] feat: support 404.html; initial src/components

---
 nitro.config.ts                      |  4 ++++
 plugins/register-components.ts       | 28 ++++++++++++++++++++++++++++
 public/{registry.js => _registry.js} |  0
 routes/[...index].ts                 | 25 ++++++++++---------------
 src/components/hello-world.js        | 21 +++++++++++++++++++++
 src/pages/about.html                 | 11 -----------
 src/pages/index.html                 |  2 +-
 7 files changed, 64 insertions(+), 27 deletions(-)
 create mode 100644 plugins/register-components.ts
 rename public/{registry.js => _registry.js} (100%)
 create mode 100644 src/components/hello-world.js
 delete mode 100644 src/pages/about.html

diff --git a/nitro.config.ts b/nitro.config.ts
index c602585..0881daa 100644
--- a/nitro.config.ts
+++ b/nitro.config.ts
@@ -5,5 +5,9 @@ export default defineNitroConfig({
       baseName: "pages",
       dir: "./src/pages",
     },
+    {
+      baseName: "components",
+      dir: "./src/components",
+    },
   ],
 });
diff --git a/plugins/register-components.ts b/plugins/register-components.ts
new file mode 100644
index 0000000..d4b4817
--- /dev/null
+++ b/plugins/register-components.ts
@@ -0,0 +1,28 @@
+/**
+ build registry of custom elements
+ */
+
+export default defineNitroPlugin(async () => {
+  console.log("Building registry of custom elements...");
+  useStorage()
+    .getKeys("/assets/components")
+    .then((keys) => {
+      keys.forEach((key) => {
+        const name = key
+          .replace("assets:components:", "")
+          .replace(".ts", "")
+          .replace(".js", "");
+        const constructor = name
+          .split("-")
+          .map((word) => capitalizeFirstLetter(word))
+          .join("");
+
+        useStorage().setItem(`registry:${name}`, constructor);
+        console.log(`> ${name}, ${constructor}`);
+      });
+    });
+});
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
diff --git a/public/registry.js b/public/_registry.js
similarity index 100%
rename from public/registry.js
rename to public/_registry.js
diff --git a/routes/[...index].ts b/routes/[...index].ts
index e6fd3ee..97db24e 100644
--- a/routes/[...index].ts
+++ b/routes/[...index].ts
@@ -1,21 +1,16 @@
-import * as fs from "fs";
 export default eventHandler(async (event) => {
-  const filename = event.path === "/" ? "/index.html" : `${event.path}.html`;
-  const fallback = getPath(event.path + "/index.html");
+  const rawPath =
+    event.path[event.path.length - 1] === "/"
+      ? event.path.slice(0, -1)
+      : event.path;
+  const filename = rawPath === "" ? "/index.html" : `${rawPath}.html`;
+  const fallback = getPath(rawPath + "/index.html");
   const path = getPath(filename);
-  let html = "";
+  let html = await useStorage().getItem(path);
+  if (!html) html = await useStorage().getItem(fallback);
+  if (!html) html = await useStorage().getItem(getPath("/404.html"));
 
-  try {
-    html = await useStorage().getItem(path);
-  } catch (error) {
-    try {
-      html = await useStorage().getItem(fallback);
-    } catch {
-      html = `cannot find ${path} or ${fallback}`;
-    }
-  }
-
-  return html;
+  return html ?? new Response("Not found", { status: 404 });
 });
 
 function getPath(filename: string) {
diff --git a/src/components/hello-world.js b/src/components/hello-world.js
new file mode 100644
index 0000000..b670be1
--- /dev/null
+++ b/src/components/hello-world.js
@@ -0,0 +1,21 @@
+import WebComponent from "https://unpkg.com/web-component-base/index.js";
+
+export default class HelloWorld extends WebComponent {
+  name = "";
+  static properties = ["name"];
+
+  onInit() {
+    console.log(`Greeting for ${this.name} initialized`);
+    let count = 0;
+    this.onclick = () => {
+      console.log("Clicked!");
+      this.name = `I was clicked ${++count} times`;
+      this.render();
+    };
+    this.setAttribute("title", "Click me please");
+  }
+
+  get template() {
+    return `<button style="cursor:pointer">Hello ${this.name}!</button>`;
+  }
+}
diff --git a/src/pages/about.html b/src/pages/about.html
deleted file mode 100644
index 1fa5293..0000000
--- a/src/pages/about.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>top about</title>
-  </head>
-  <body>
-    <h1>Top Level About</h1>
-  </body>
-</html>
diff --git a/src/pages/index.html b/src/pages/index.html
index 50b9ca7..1becafc 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Hello Nitro</title>
-    <script type="module" src="registry.js"></script>
+    <script type="module" src="_registry.js"></script>
   </head>
   <body>
     <hello-world name="Ayo" />