From 655debf19346d5e9a44133eab87e2fd81f941d4b Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Thu, 19 Oct 2023 12:07:43 +0200
Subject: [PATCH] feat: static .html fragments

---
 README.md                          |  8 ++---
 routes/[...index].ts               | 55 ++++++++++++++++++++++++++----
 src/components/awesome-header.html |  6 ++++
 src/pages/index.html               |  7 +---
 4 files changed, 60 insertions(+), 16 deletions(-)
 create mode 100644 src/components/awesome-header.html

diff --git a/README.md b/README.md
index a1372f2..975f9e4 100644
--- a/README.md
+++ b/README.md
@@ -28,15 +28,15 @@ We want a way to:
 - use `<script server:setup>` to define logic that runs on the server, which then gets stripped away
 
 **2. `src/components`**
-- custom element constructor class files go here (only `.js` files for now)
-- all components are automatically registered using their file names (e.g., a `hello-world.js` component can be used as `<hello-world>` element)
-- the idea is, if it is a valid custom element constructor, just throw it in the `components` directory and it will work... vanilla, Lit, Stencil, or our own totally optional [Base Class](https://ayco.io/n/web-component-base) -- your choice!
+- custom element constructor files (only `.js` files for now)
+- all components are automatically registered using their file names; a `hello-world.js` component can be used as `<hello-world>`
+- static `.html` fragments; a `my-header.html` fragment can be directly used as `<my-header>`
 
 ## Setting up
 
 It's still very early in the project development and we have no packages published yet.
 
-You can, however, experience the framework by cloning the project and play with the example files in the [special directories](#special-directories). 
+You can, however, experience the framework by cloning the project and play with the example files in the [special directories](#special-directories).
 
 Do the following steps to get you started:
 
diff --git a/routes/[...index].ts b/routes/[...index].ts
index fe7dc74..fc8e4fc 100644
--- a/routes/[...index].ts
+++ b/routes/[...index].ts
@@ -2,16 +2,23 @@
  * McFly SSR logic
  */
 
-import { ELEMENT_NODE, parse, render, renderSync, walkSync } from "ultrahtml";
+import {
+  Node as UltraNode,
+  ELEMENT_NODE,
+  parse,
+  render,
+  renderSync,
+  walkSync,
+} from "ultrahtml";
 import { parseScript } from "esprima";
 import config from "../mcfly.config";
 
+const { components: componentType } = config();
+
 export default eventHandler(async (event) => {
   const { path } = event;
   let html = await getHtml(path);
 
-  const { components: componentType } = config();
-
   // transforms
   const transforms = [doSetUp, deleteServerScripts];
   if (html) {
@@ -20,6 +27,8 @@ export default eventHandler(async (event) => {
     }
   }
 
+  html = await useFragments(html.toString());
+
   if (!!componentType && !!html) {
     html = await insertRegistry(html.toString(), componentType);
   }
@@ -48,9 +57,7 @@ async function insertRegistry(
   type: "js" | "ts"
 ): Promise<string> {
   const ast = parse(html);
-  const componentFiles = (await useStorage().getKeys("assets:components"))
-    .map((key) => key.replace("assets:components:", ""))
-    .filter((key) => key.includes(type));
+  const componentFiles = await getFiles(type);
   const availableComponents = componentFiles.map((key) =>
     key.replace(`.${type}`, "")
   );
@@ -193,3 +200,39 @@ function removeComments(script: string) {
     });
   return script;
 }
+
+async function useFragments(html: string) {
+  const fragmentFiles = await getFiles("html");
+
+  const availableFragments = fragmentFiles.map((key) => {
+    return {
+      key: key.replace(".html", ""),
+      text: "",
+    };
+  });
+  const ast = parse(html);
+
+  for (const fragment of availableFragments) {
+    fragment.text = await useStorage().getItem(
+      "assets:components:" + fragment.key + ".html"
+    );
+  }
+
+  walkSync(ast, (node) => {
+    const usedFragment = availableFragments.find(
+      (fragment) => fragment.key === node.name
+    );
+
+    if (node.type === ELEMENT_NODE && !!usedFragment) {
+      node.children.push(parse(usedFragment.text));
+    }
+  });
+
+  return render(ast);
+}
+
+async function getFiles(type: string) {
+  return (await useStorage().getKeys("assets:components"))
+    .map((key) => key.replace("assets:components:", ""))
+    .filter((key) => key.includes(type));
+}
diff --git a/src/components/awesome-header.html b/src/components/awesome-header.html
new file mode 100644
index 0000000..3ddffcb
--- /dev/null
+++ b/src/components/awesome-header.html
@@ -0,0 +1,6 @@
+<header>
+  <a href="https://ayco.io/gh/mcfly">
+    <h1>McFly</h1>
+  </a>
+  <span>Back to the Basics. Into the Future.</span>
+</header>
diff --git a/src/pages/index.html b/src/pages/index.html
index 68e2fd8..51bf3ff 100644
--- a/src/pages/index.html
+++ b/src/pages/index.html
@@ -44,12 +44,7 @@
     </style>
   </head>
   <body>
-    <header>
-        <a href="https://ayco.io/gh/mcfly">
-            <h1>McFly</h1>
-        </a>
-        <span>Back to the Basics. Into the Future.</span>
-    </header>
+    <awesome-header></awesome-header>
     <main>
       <p>
         <strong>McFly</strong> is a full-stack no-framework framework that assists developers in leveraging the web platform.