elegance-js 2.0.19 → 2.1.0

package/dist/page_compiler.mjs

@@ -1,9 +1,9 @@
 // src/page_compiler.ts
-import fs from "fs";
+import fs2 from "fs";
 import path from "path";
 import { registerLoader, setArcTsConfig } from "ts-arc";
 import esbuild from "esbuild";
-import { fileURLToPath } from "url";
+import { fileURLToPath as fileURLToPath2 } from "url";
 
 // src/shared/serverElements.ts
 var createBuildableElement = (tag) => {
@@ -216,7 +216,7 @@ var generateHTMLTemplate = async ({
   serverData = null,
   addPageScriptTag = true,
   name,
-  requiredClientModules = [],
+  requiredClientModules = {},
   environment
 }) => {
   let StartTemplate = `<meta name="viewport" content="width=device-width, initial-scale=1.0">`;
@@ -224,11 +224,12 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">`;
   }
   StartTemplate += '<meta charset="UTF-8">';
-  for (const module of requiredClientModules) {
-    StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
+  for (const [globalName] of Object.entries(requiredClientModules)) {
+    StartTemplate += `<script data-module="true" src="/shipped/${globalName}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    const sanitized = pageURL === "" ? "/" : pageURL;
+    StartTemplate += `<script data-page="true" type="module" data-pathname="${sanitized}" src="${sanitized}${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
@@ -247,13 +248,419 @@ var generateHTMLTemplate = async ({
   };
 };
 
-// src/server/createState.ts
+// src/server/server.ts
+import { createServer as createHttpServer } from "http";
+import { promises as fs } from "fs";
+import { join, normalize, extname, dirname } from "path";
+import { pathToFileURL } from "url";
+
+// src/log.ts
+var quiet = false;
+function getTimestamp() {
+  const now = /* @__PURE__ */ new Date();
+  return now.toLocaleString(void 0, {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit"
+  });
+}
+function color(text, code) {
+  return `\x1B[${code}m${text}\x1B[0m`;
+}
+function logInfo(...args) {
+  if (quiet) return;
+  console.info(`Elegance.JS: ${getTimestamp()} ${color("[INFO]:", 34)}`, ...args);
+}
+function logWarn(...args) {
+  if (quiet) return;
+  console.warn(`Elegance.JS: ${getTimestamp()} ${color("[WARN]:", 33)}`, ...args);
+}
+function logError(...args) {
+  console.error(`Elegance.JS: ${getTimestamp()} ${color("[ERROR]:", 31)}`, ...args);
+}
+var log = {
+  info: logInfo,
+  warn: logWarn,
+  error: logError
+};
+
+// src/server/server.ts
+import { gzip, deflate } from "zlib";
+import { promisify } from "util";
+var gzipAsync = promisify(gzip);
+var deflateAsync = promisify(deflate);
+var MIME_TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".txt": "text/plain; charset=utf-8"
+};
+function startServer({
+  root,
+  port = 3e3,
+  host = "localhost",
+  environment = "production",
+  DIST_DIR: DIST_DIR2
+}) {
+  if (!root) throw new Error("Root directory must be specified.");
+  root = normalize(root).replace(/[\\/]+$/, "");
+  const requestHandler = async (req, res) => {
+    try {
+      if (!req.url) {
+        await sendResponse(req, res, 400, { "Content-Type": "text/plain; charset=utf-8" }, "Bad Request");
+        return;
+      }
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+      if (req.method === "OPTIONS") {
+        res.writeHead(204);
+        res.end();
+        if (environment === "development") {
+          log.info(req.method, "::", req.url, "-", res.statusCode);
+        }
+        return;
+      }
+      const url = new URL(req.url, `http://${req.headers.host}`);
+      if (url.pathname.startsWith("/api/")) {
+        await handleApiRequest(root, url.pathname, req, res);
+      } else if (PAGE_MAP.has(url.pathname)) {
+        await handlePageRequest(root, url.pathname, req, res, DIST_DIR2, PAGE_MAP.get(url.pathname));
+      } else {
+        await handleStaticRequest(root, url.pathname, req, res, DIST_DIR2);
+      }
+      if (environment === "development") {
+        log.info(req.method, "::", req.url, "-", res.statusCode);
+      }
+    } catch (err) {
+      log.error(err);
+      await sendResponse(req, res, 500, { "Content-Type": "text/plain; charset=utf-8" }, "Internal Server Error");
+    }
+  };
+  function attemptListen(p) {
+    const server = createHttpServer(requestHandler);
+    server.on("error", (err) => {
+      if (err.code === "EADDRINUSE") {
+        attemptListen(p + 1);
+      } else {
+        console.error(err);
+      }
+    });
+    server.listen(p, host, () => {
+      log.info(`Server running at http://${host}:${p}/`);
+    });
+    return server;
+  }
+  return attemptListen(port);
+}
+async function getTargetInfo(root, pathname) {
+  const originalPathname = pathname;
+  const filePath = normalize(join(root, decodeURIComponent(pathname))).replace(/[\\/]+$/, "");
+  if (!filePath.startsWith(root)) {
+    throw new Error("Forbidden");
+  }
+  let stats;
+  try {
+    stats = await fs.stat(filePath);
+  } catch {
+  }
+  let targetDir;
+  if (stats) {
+    targetDir = stats.isDirectory() ? filePath : dirname(filePath);
+  } else {
+    targetDir = originalPathname.endsWith("/") ? filePath : dirname(filePath);
+  }
+  return { filePath, targetDir, stats };
+}
+function getMiddlewareDirs(base, parts) {
+  const middlewareDirs = [];
+  let current = base;
+  middlewareDirs.push(current);
+  for (const part of parts) {
+    current = join(current, part);
+    middlewareDirs.push(current);
+  }
+  return middlewareDirs;
+}
+async function collectMiddlewares(dirs) {
+  const middlewares = [];
+  for (const dir of dirs) {
+    const mwPath = join(dir, "middleware.mjs");
+    let mwModule;
+    try {
+      await fs.access(mwPath);
+      const url = pathToFileURL(mwPath).href;
+      mwModule = await import(url);
+    } catch {
+      continue;
+    }
+    const mwKeys = Object.keys(mwModule).sort();
+    for (const key of mwKeys) {
+      const f = mwModule[key];
+      if (typeof f === "function" && !middlewares.some((existing) => existing === f)) {
+        middlewares.push(f);
+      }
+    }
+  }
+  return middlewares;
+}
+async function handlePageRequest(root, pathname, req, res, DIST_DIR2, pageInfo) {
+  try {
+    const { filePath, targetDir, stats } = await getTargetInfo(root, pathname);
+    const relDir = targetDir.slice(root.length).replace(/^[\/\\]+/, "");
+    const parts = relDir.split(/[\\/]/).filter(Boolean);
+    const middlewareDirs = getMiddlewareDirs(root, parts);
+    const middlewares = await collectMiddlewares(middlewareDirs);
+    let isDynamic = pageInfo.isDynamic;
+    const handlerPath = isDynamic ? pageInfo.filePath : join(filePath, "index.html");
+    let hasHandler = false;
+    try {
+      await fs.access(handlerPath);
+      hasHandler = true;
+    } catch {
+    }
+    const finalHandler = async (req2, res2) => {
+      if (!hasHandler) {
+        await respondWithErrorPage(root, pathname, 404, req2, res2);
+        return;
+      }
+      if (isDynamic) {
+        try {
+          const { resultHTML } = await buildDynamicPage(
+            DIST_DIR2,
+            pathname,
+            pageInfo
+          );
+          if (resultHTML === false) {
+            return;
+          }
+          await sendResponse(req2, res2, 200, { "Content-Type": MIME_TYPES[".html"] }, resultHTML);
+        } catch (err) {
+          log.error("Error building dynamic page -", err);
+        }
+      } else {
+        const ext = extname(handlerPath).toLowerCase();
+        const contentType = MIME_TYPES[ext] || "application/octet-stream";
+        const data = await fs.readFile(handlerPath);
+        await sendResponse(req2, res2, 200, { "Content-Type": contentType }, data);
+      }
+    };
+    const composed = composeMiddlewares(middlewares, finalHandler, { isApi: false, root, pathname });
+    await composed(req, res);
+  } catch (err) {
+    if (err.message === "Forbidden") {
+      await sendResponse(req, res, 403, { "Content-Type": "text/plain; charset=utf-8" }, "Forbidden");
+    } else {
+      throw err;
+    }
+  }
+}
+async function handleStaticRequest(root, pathname, req, res, DIST_DIR2) {
+  try {
+    const { filePath, targetDir, stats } = await getTargetInfo(root, pathname);
+    const relDir = targetDir.slice(root.length).replace(/^[\/\\]+/, "");
+    const parts = relDir.split(/[\\/]/).filter(Boolean);
+    const middlewareDirs = getMiddlewareDirs(root, parts);
+    const middlewares = await collectMiddlewares(middlewareDirs);
+    let handlerPath = filePath;
+    if (stats && stats.isDirectory()) {
+      handlerPath = join(filePath, "index.html");
+    } else {
+      handlerPath = filePath;
+    }
+    let hasHandler = false;
+    try {
+      await fs.access(handlerPath);
+      hasHandler = true;
+    } catch {
+    }
+    const finalHandler = async (req2, res2) => {
+      if (!hasHandler) {
+        await respondWithErrorPage(root, pathname, 404, req2, res2);
+        return;
+      }
+      const ext = extname(handlerPath).toLowerCase();
+      const contentType = MIME_TYPES[ext] || "application/octet-stream";
+      const data = await fs.readFile(handlerPath);
+      await sendResponse(req2, res2, 200, { "Content-Type": contentType }, data);
+    };
+    const composed = composeMiddlewares(middlewares, finalHandler, { isApi: false, root, pathname });
+    await composed(req, res);
+  } catch (err) {
+    if (err.message === "Forbidden") {
+      await sendResponse(req, res, 403, { "Content-Type": "text/plain; charset=utf-8" }, "Forbidden");
+    } else {
+      throw err;
+    }
+  }
+}
+async function handleApiRequest(root, pathname, req, res) {
+  const apiSubPath = pathname.slice("/api/".length);
+  const parts = apiSubPath.split("/").filter(Boolean);
+  const middlewareDirs = getMiddlewareDirs(join(root, "api"), parts);
+  const middlewares = await collectMiddlewares(middlewareDirs);
+  const routeDir = middlewareDirs[middlewareDirs.length - 1];
+  const routePath = join(routeDir, "route.mjs");
+  let hasRoute = false;
+  try {
+    await fs.access(routePath);
+    hasRoute = true;
+  } catch {
+  }
+  let fn = null;
+  let module = null;
+  if (hasRoute) {
+    try {
+      const moduleUrl = pathToFileURL(routePath).href;
+      module = await import(moduleUrl);
+      fn = module[req.method];
+    } catch (err) {
+      console.error(err);
+      return respondWithJsonError(req, res, 500, "Internal Server Error");
+    }
+  }
+  const finalHandler = async (req2, res2) => {
+    if (!hasRoute) {
+      return respondWithJsonError(req2, res2, 404, "Not Found");
+    }
+    if (typeof fn !== "function") {
+      return respondWithJsonError(req2, res2, 405, "Method Not Allowed");
+    }
+    await fn(req2, res2);
+  };
+  const composed = composeMiddlewares(middlewares, finalHandler, { isApi: true });
+  await composed(req, res);
+}
+function composeMiddlewares(mws, final, options2) {
+  return async function(req, res) {
+    let index = 0;
+    async function dispatch(err) {
+      if (err) {
+        if (options2.isApi) {
+          return respondWithJsonError(req, res, 500, err.message || "Internal Server Error");
+        } else {
+          return await respondWithErrorPage(options2.root, options2.pathname, 500, req, res);
+        }
+      }
+      if (index >= mws.length) {
+        return await final(req, res);
+      }
+      const thisMw = mws[index++];
+      const next = (e) => dispatch(e);
+      const onceNext = (nextFn) => {
+        let called = false;
+        return async (e) => {
+          if (called) {
+            log.warn("next() was called in a middleware more than once.");
+            return;
+          }
+          called = true;
+          await nextFn(e);
+        };
+      };
+      try {
+        await thisMw(req, res, onceNext(next));
+      } catch (error) {
+        await dispatch(error);
+      }
+    }
+    await dispatch();
+  };
+}
+async function respondWithJsonError(req, res, code, message) {
+  const body2 = JSON.stringify({ error: message });
+  await sendResponse(req, res, code, { "Content-Type": "application/json; charset=utf-8" }, body2);
+}
+async function respondWithErrorPage(root, pathname, code, req, res) {
+  let currentPath = normalize(join(root, decodeURIComponent(pathname)));
+  let tried = /* @__PURE__ */ new Set();
+  let errorFilePath = null;
+  while (currentPath.startsWith(root)) {
+    const candidate = join(currentPath, `${code}.html`);
+    if (!tried.has(candidate)) {
+      try {
+        await fs.access(candidate);
+        errorFilePath = candidate;
+        break;
+      } catch {
+      }
+      tried.add(candidate);
+    }
+    const parent = dirname(currentPath);
+    if (parent === currentPath) break;
+    currentPath = parent;
+  }
+  if (!errorFilePath) {
+    const fallback = join(root, `${code}.html`);
+    try {
+      await fs.access(fallback);
+      errorFilePath = fallback;
+    } catch {
+    }
+  }
+  if (errorFilePath) {
+    try {
+      const html2 = await fs.readFile(errorFilePath, "utf8");
+      await sendResponse(req, res, code, { "Content-Type": "text/html; charset=utf-8" }, html2);
+      return;
+    } catch {
+    }
+  }
+  await sendResponse(req, res, code, { "Content-Type": "text/plain; charset=utf-8" }, `${code} Error`);
+}
+function isCompressible(contentType) {
+  if (!contentType) return false;
+  return /text\/|javascript|json|xml|svg/.test(contentType);
+}
+async function sendResponse(req, res, status, headers, body2) {
+  if (typeof body2 === "string") {
+    body2 = Buffer.from(body2);
+  }
+  const accept = req.headers["accept-encoding"] || "";
+  let encoding = null;
+  if (accept.match(/\bgzip\b/)) {
+    encoding = "gzip";
+  } else if (accept.match(/\bdeflate\b/)) {
+    encoding = "deflate";
+  }
+  if (!encoding || !isCompressible(headers["Content-Type"] || "")) {
+    res.writeHead(status, headers);
+    res.end(body2);
+    return;
+  }
+  const compressor = encoding === "gzip" ? gzipAsync : deflateAsync;
+  try {
+    const compressed = await compressor(body2);
+    headers["Content-Encoding"] = encoding;
+    headers["Vary"] = "Accept-Encoding";
+    res.writeHead(status, headers);
+    res.end(compressed);
+  } catch (err) {
+    log.error("Compression error:", err);
+    res.writeHead(status, headers);
+    res.end(body2);
+  }
+}
+
+// src/server/loadHook.ts
+var resetLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__ = [];
+var getLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__;
+
+// src/server/state.ts
 if (!globalThis.__SERVER_CURRENT_STATE_ID__) {
   globalThis.__SERVER_CURRENT_STATE_ID__ = 1;
 }
-var initializeState = () => {
-  globalThis.__SERVER_CURRENT_STATE__ = [];
-};
+var initializeState = () => globalThis.__SERVER_CURRENT_STATE__ = [];
 var getState = () => {
   return globalThis.__SERVER_CURRENT_STATE__;
 };
@@ -262,16 +669,12 @@ var getObjectAttributes = () => {
   return globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__;
 };
 
-// src/server/loadHook.ts
-var resetLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__ = [];
-var getLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__;
-
 // src/server/layout.ts
 var resetLayouts = () => globalThis.__SERVER_CURRENT_LAYOUTS__ = /* @__PURE__ */ new Map();
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 
 // src/page_compiler.ts
-var __filename = fileURLToPath(import.meta.url);
+var __filename = fileURLToPath2(import.meta.url);
 var __dirname = path.dirname(__filename);
 setArcTsConfig(__dirname);
 registerLoader();
@@ -281,6 +684,8 @@ if (packageDir === void 0) {
 }
 var clientPath = path.resolve(packageDir, "./dist/client/client.mjs");
 var watcherPath = path.resolve(packageDir, "./dist/client/watcher.mjs");
+var shippedModules = /* @__PURE__ */ new Map();
+var modulesToShip = [];
 var yellow = (text) => {
   return `\x1B[38;2;238;184;68m${text}`;
 };
@@ -299,15 +704,17 @@ var underline = (text) => {
 var white = (text) => {
   return `\x1B[38;2;255;247;229m${text}`;
 };
-var log = (...text) => {
+var log2 = (...text) => {
   if (options.quiet) return;
   return console.log(text.map((text2) => `${text2}\x1B[0m`).join(""));
 };
 var options = JSON.parse(process.env.OPTIONS);
 var DIST_DIR = process.env.DIST_DIR;
+var PAGE_MAP = /* @__PURE__ */ new Map();
+var LAYOUT_MAP2 = /* @__PURE__ */ new Map();
 var getAllSubdirectories = (dir, baseDir = dir) => {
   let directories = [];
-  const items = fs.readdirSync(dir, { withFileTypes: true });
+  const items = fs2.readdirSync(dir, { withFileTypes: true });
   for (const item of items) {
     if (item.isDirectory()) {
       const fullPath = path.join(dir, item.name);
@@ -320,10 +727,10 @@ var getAllSubdirectories = (dir, baseDir = dir) => {
 };
 var buildClient = async (DIST_DIR2) => {
   let clientString = "window.__name = (func) => func; ";
-  clientString += fs.readFileSync(clientPath, "utf-8");
+  clientString += fs2.readFileSync(clientPath, "utf-8");
   if (options.hotReload !== void 0) {
     clientString += `const watchServerPort = ${options.hotReload.port}`;
-    clientString += fs.readFileSync(watcherPath, "utf-8");
+    clientString += fs2.readFileSync(watcherPath, "utf-8");
   }
   const transformedClient = await esbuild.transform(clientString, {
     minify: options.environment === "production",
@@ -333,7 +740,7 @@ var buildClient = async (DIST_DIR2) => {
     platform: "node",
     loader: "ts"
   });
-  fs.writeFileSync(
+  fs2.writeFileSync(
     path.join(DIST_DIR2, "/client.js"),
     transformedClient.code
   );
@@ -512,7 +919,7 @@ ${trace}`);
     }
   }
 };
-var pageToHTML = async (pageLocation, pageElements, metadata, DIST_DIR2, pageName, doWrite = true, requiredClientModules = [], layout) => {
+var pageToHTML = async (pageLocation, pageElements, metadata, DIST_DIR2, pageName, doWrite = true, requiredClientModules = {}, layout, pathname = "") => {
   if (typeof pageElements === "string" || typeof pageElements === "boolean" || typeof pageElements === "number" || Array.isArray(pageElements)) {
     throw new Error(`The root element of a page / layout must be a built element, not just a Child. Received: ${typeof pageElements}.`);
   }
@@ -524,23 +931,59 @@ var pageToHTML = async (pageLocation, pageElements, metadata, DIST_DIR2, pageNam
     pageLocation
   );
   const { internals, builtMetadata } = await generateHTMLTemplate({
-    pageURL: path.relative(DIST_DIR2, pageLocation),
+    pageURL: pathname,
     head: metadata,
-    addPageScriptTag: true,
+    addPageScriptTag: doWrite,
     name: pageName,
     requiredClientModules,
     environment: options.environment
   });
+  let extraBodyHTML = "";
+  if (doWrite === false) {
+    const state = getState();
+    const pageLoadHooks = getLoadHooks();
+    const userObjectAttributes = getObjectAttributes();
+    const {
+      result
+    } = await generateClientPageData(
+      pathname,
+      state || {},
+      [...objectAttributes, ...userObjectAttributes],
+      pageLoadHooks || [],
+      DIST_DIR2,
+      "page",
+      "pd",
+      false
+    );
+    const sanitized = pathname === "" ? "/" : pathname;
+    extraBodyHTML = `<script data-hook="true" data-pathname="${sanitized}" type="text/plain">${result}</script>`;
+    extraBodyHTML += `<script>
+            const text = document.querySelector('[data-hook="true"][data-pathname="${sanitized}"][type="text/plain"').textContent;
+            const blob = new Blob([text], { type: 'text/javascript' });
+            const url = URL.createObjectURL(blob);
+            
+            const script = document.createElement("script");
+            script.src = url;
+            script.type = "module";
+            script.setAttribute("data-page", "true");
+            script.setAttribute("data-pathname", "${sanitized}");
+            
+            document.head.appendChild(script);
+            
+            document.currentScript.remove();
+        </script>`;
+    extraBodyHTML = extraBodyHTML.replace(/\s+/g, " ").replace(/\s*([{}();,:])\s*/g, "$1").trim();
+  }
   const headHTML = `<!DOCTYPE html>${layout.metadata.startHTML}${layout.scriptTag}${internals}${builtMetadata}${layout.metadata.endHTML}`;
-  const bodyHTML = `${layout.pageContent.startHTML}${renderedPage.bodyHTML}${layout.pageContent.endHTML}`;
+  const bodyHTML = `${layout.pageContent.startHTML}${renderedPage.bodyHTML}${extraBodyHTML}${layout.pageContent.endHTML}`;
   const resultHTML = `${headHTML}${bodyHTML}`;
   const htmlLocation = path.join(pageLocation, (pageName === "page" ? "index" : pageName) + ".html");
   if (doWrite) {
-    const dirname = path.dirname(htmlLocation);
-    if (fs.existsSync(dirname) === false) {
-      fs.mkdirSync(dirname, { recursive: true });
+    const dirname2 = path.dirname(htmlLocation);
+    if (fs2.existsSync(dirname2) === false) {
+      fs2.mkdirSync(dirname2, { recursive: true });
     }
-    fs.writeFileSync(
+    fs2.writeFileSync(
       htmlLocation,
       resultHTML,
       {
@@ -549,16 +992,14 @@ var pageToHTML = async (pageLocation, pageElements, metadata, DIST_DIR2, pageNam
       }
     );
     return objectAttributes;
-  } else {
-    return {
-      objectAttributes,
-      resultHTML
-    };
   }
+  return resultHTML;
 };
-var generateClientPageData = async (pageLocation, state, objectAttributes, pageLoadHooks, DIST_DIR2, pageName, globalVariableName = "pd") => {
-  const pageDiff = path.relative(DIST_DIR2, pageLocation);
-  let clientPageJSText = `${globalThis.__SERVER_PAGE_DATA_BANNER__}let url="${pageDiff === "" ? "/" : `/${pageDiff}`}";`;
+var generateClientPageData = async (pageLocation, state, objectAttributes, pageLoadHooks, DIST_DIR2, pageName, globalVariableName = "pd", write = true) => {
+  let clientPageJSText = "";
+  {
+    clientPageJSText += `${globalThis.__SERVER_PAGE_DATA_BANNER__}`;
+  }
   {
     clientPageJSText += `export const data = {`;
     if (state) {
@@ -600,30 +1041,29 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
     }
     if (pageLoadHooks.length > 0) {
       clientPageJSText += "lh:[";
-      for (const loadHook of pageLoadHooks) {
-        clientPageJSText += `{fn:${loadHook.fn}},`;
+      for (const loadHook2 of pageLoadHooks) {
+        clientPageJSText += `{fn:${loadHook2.fn}},`;
       }
       clientPageJSText += "],";
     }
     clientPageJSText += `};`;
   }
-  clientPageJSText += `if(!globalThis.${globalVariableName}) { globalThis.${globalVariableName} = {}; }; globalThis.${globalVariableName}[url] = data;`;
-  const pageDataPath = path.join(pageLocation, `${pageName}_data.js`);
+  const pageDataPath = path.join(DIST_DIR2, pageLocation, `${pageName}_data.js`);
   let sendHardReloadInstruction = false;
   const transformedResult = await esbuild.transform(clientPageJSText, { minify: options.environment === "production" }).catch((error) => {
     console.error("Failed to transform client page js!", error);
   });
   if (!transformedResult) return { sendHardReloadInstruction };
-  if (fs.existsSync(pageDataPath)) {
-    const content = fs.readFileSync(pageDataPath).toString();
+  if (fs2.existsSync(pageDataPath)) {
+    const content = fs2.readFileSync(pageDataPath).toString();
     if (content !== transformedResult.code) {
       sendHardReloadInstruction = true;
     }
   }
-  fs.writeFileSync(pageDataPath, transformedResult.code, "utf-8");
-  return { sendHardReloadInstruction };
+  if (write) fs2.writeFileSync(pageDataPath, transformedResult.code, "utf-8");
+  return { sendHardReloadInstruction, result: transformedResult.code };
 };
-var generateLayout = async (DIST_DIR2, filePath, directory, childIndicator) => {
+var generateLayout = async (DIST_DIR2, filePath, directory, childIndicator, generateDynamic = false) => {
   initializeState();
   initializeObjectAttributes();
   resetLoadHooks();
@@ -631,24 +1071,30 @@ var generateLayout = async (DIST_DIR2, filePath, directory, childIndicator) => {
   let layoutElements;
   let metadataElements;
   let modules = [];
+  let isDynamicLayout = false;
   try {
     const {
       layout,
       metadata,
       isDynamic,
-      requiredClientModules
+      shippedModules: shippedModules2
     } = await import("file://" + filePath);
-    if (requiredClientModules !== void 0) {
-      modules = requiredClientModules;
+    if (shippedModules2 !== void 0) {
+      modules = shippedModules2;
     }
     layoutElements = layout;
     metadataElements = metadata;
     if (isDynamic === true) {
-      throw new Error("ts-arc in Elegance does not support dynamic pages yet.");
+      isDynamicLayout = isDynamic;
     }
   } catch (e) {
-    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}layout.mjs - ${e}`);
+    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}layout.ts - ${e}`);
   }
+  LAYOUT_MAP2.set(directory === "" ? "/" : directory, {
+    isDynamic: isDynamicLayout,
+    filePath
+  });
+  if (isDynamicLayout === true && generateDynamic === false) return false;
   {
     if (!layoutElements) {
       throw new Error(`WARNING: ${filePath} should export a const layout, which is of type Layout: (child: Child) => AnyBuiltElement.`);
@@ -683,11 +1129,12 @@ var generateLayout = async (DIST_DIR2, filePath, directory, childIndicator) => {
   const stack = [];
   const processedPageElements = processPageElements(layoutElements, foundObjectAttributes, 0, stack);
   const renderedPage = await serverSideRenderPage(
-    processedPageElements
+    processedPageElements,
+    directory
   );
   const metadataHTML = metadataElements ? renderRecursively(metadataElements) : "";
   await generateClientPageData(
-    path.dirname(path.join(DIST_DIR2, "dist", directory)),
+    directory,
     state || {},
     [...objectAttributes, ...foundObjectAttributes],
     pageLoadHooks || [],
@@ -704,7 +1151,7 @@ var buildLayouts = async () => {
   let shouldClientHardReload = false;
   for (const directory of subdirectories) {
     const abs = path.resolve(path.join(pagesDirectory, directory));
-    const files = fs.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
+    const files = fs2.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
     for (const file of files) {
       const filePath = path.join(file.parentPath, file.name);
       const name = file.name.slice(0, file.name.length - 3);
@@ -714,6 +1161,7 @@ var buildLayouts = async () => {
       }
       try {
         const builtLayout = await buildLayout(filePath, directory);
+        if (!builtLayout) return { shouldClientHardReload: false };
         builtLayouts.set(filePath, builtLayout);
       } catch (e) {
         console.error(e);
@@ -723,15 +1171,18 @@ var buildLayouts = async () => {
   }
   return { shouldClientHardReload };
 };
-var buildLayout = async (filePath, directory) => {
+var buildLayout = async (filePath, directory, generateDynamic = false) => {
   const id = globalThis.__SERVER_CURRENT_STATE_ID__ += 1;
   const childIndicator = `<template layout-id="${id}"></template>`;
-  const { pageContentHTML, metadataHTML } = await generateLayout(
+  const result = await generateLayout(
     DIST_DIR,
     filePath,
     directory,
-    childIndicator
+    childIndicator,
+    generateDynamic
   );
+  if (result === false) return false;
+  const { pageContentHTML, metadataHTML } = result;
   const splitAround = (str, sub) => {
     const i = str.indexOf(sub);
     if (i === -1) throw new Error("substring does not exist in parent string");
@@ -748,23 +1199,30 @@ var buildLayout = async (filePath, directory) => {
       endHTML: str.substring(i)
     };
   };
-  const pageURL = directory;
+  const pathname = directory === "" ? "/" : directory;
   return {
     pageContent: splitAt(pageContentHTML, childIndicator),
     metadata: splitAround(metadataHTML, childIndicator),
-    scriptTag: `<script data-layout="true" type="module" src="${pageURL}${pageURL === "/" ? "" : "/"}layout_data.js" defer="true"></script>`
+    scriptTag: `<script data-layout="true" type="module" src="${pathname}layout_data.js" data-pathname="${pathname}" defer="true"></script>`
   };
 };
-var fetchPageLayoutHTML = async (dirname) => {
-  const relative = path.relative(options.pagesDirectory, dirname);
-  let split = relative.split(path.sep).filter(Boolean);
+var fetchPageLayoutHTML = async (dirname2) => {
+  const relative2 = path.relative(options.pagesDirectory, dirname2);
+  let split = relative2.split(path.sep).filter(Boolean);
   split.push("/");
   split.reverse();
   let layouts = [];
   for (const dir of split) {
-    const filePath = path.resolve(path.join(options.pagesDirectory, dir, "layout.ts"));
-    if (builtLayouts.has(filePath)) {
-      layouts.push(builtLayouts.get(filePath));
+    if (LAYOUT_MAP2.has(dir)) {
+      const filePath = path.join(path.resolve(options.pagesDirectory), dir, "layout.ts");
+      const layout = LAYOUT_MAP2.get(dir);
+      if (layout.isDynamic) {
+        const builtLayout = await buildLayout(layout.filePath, dir, true);
+        if (!builtLayout) continue;
+        layouts.push(builtLayout);
+      } else {
+        layouts.push(builtLayouts.get(filePath));
+      }
     }
   }
   const pageContent = {
@@ -792,7 +1250,7 @@ var buildPages = async (DIST_DIR2) => {
   let shouldClientHardReload = false;
   for (const directory of subdirectories) {
     const abs = path.resolve(path.join(pagesDirectory, directory));
-    const files = fs.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
+    const files = fs2.readdirSync(abs, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
     for (const file of files) {
       const filePath = path.join(file.parentPath, file.name);
       const name = file.name.slice(0, file.name.length - 3);
@@ -822,32 +1280,43 @@ var buildPage = async (DIST_DIR2, directory, filePath, name) => {
   globalThis.__SERVER_PAGE_DATA_BANNER__ = "";
   let pageElements;
   let metadata;
-  let modules = [];
+  let modules = {};
   let pageIgnoresLayout = false;
+  let isDynamicPage = false;
   try {
     const {
       page,
       metadata: pageMetadata,
-      isDynamicPage,
-      requiredClientModules,
+      isDynamic,
+      shippedModules: shippedModules2,
       ignoreLayout
     } = await import("file://" + filePath);
-    if (requiredClientModules !== void 0) {
-      modules = requiredClientModules;
+    if (shippedModules2 !== void 0) {
+      modules = shippedModules2;
     }
     if (ignoreLayout) {
       pageIgnoresLayout = true;
     }
     pageElements = page;
     metadata = pageMetadata;
-    if (isDynamicPage === true) {
-      throw new Error("Dynamic page is not yet supported with ts-arc");
+    if (isDynamic === true) {
+      isDynamicPage = isDynamic;
     }
   } catch (e) {
-    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}${name}.ts - ${e}`);
+    throw new Error(`Error in Page: ${directory}/${name}.ts - ${e}`);
+  }
+  PAGE_MAP.set(directory === "" ? "/" : directory, {
+    isDynamic: isDynamicPage,
+    filePath
+  });
+  if (isDynamicPage) return false;
+  if (modules !== void 0) {
+    for (const [globalName, path2] of Object.entries(modules)) {
+      modulesToShip.push({ globalName, path: path2 });
+    }
   }
   if (!metadata || metadata && typeof metadata !== "function") {
-    console.warn(`WARNING: ${filePath} does not export a metadata function. This is *highly* recommended.`);
+    console.warn(`WARNING: ${filePath} does not export a metadata function.`);
   }
   if (!pageElements) {
     console.warn(`WARNING: ${filePath} should export a const page, which is of type () => BuiltElement<"body">.`);
@@ -874,12 +1343,13 @@ var buildPage = async (DIST_DIR2, directory, filePath, name) => {
     name,
     true,
     modules,
-    layout
+    layout,
+    directory
   );
   const {
     sendHardReloadInstruction
   } = await generateClientPageData(
-    path.join(DIST_DIR2, directory),
+    directory,
     state || {},
     [...objectAttributes, ...foundObjectAttributes],
     pageLoadHooks || [],
@@ -888,9 +1358,95 @@ var buildPage = async (DIST_DIR2, directory, filePath, name) => {
   );
   return sendHardReloadInstruction === true;
 };
-var recursionFlag = Symbol("external-node-modules-recursion");
-var shippedPlugins = /* @__PURE__ */ new Map();
-var pluginsToShip = [];
+var buildDynamicPage = async (DIST_DIR2, directory, pageInfo) => {
+  directory = directory === "/" ? "" : directory;
+  const filePath = pageInfo.filePath;
+  initializeState();
+  initializeObjectAttributes();
+  resetLoadHooks();
+  globalThis.__SERVER_PAGE_DATA_BANNER__ = "";
+  let pageElements = async (props) => body();
+  let metadata = async (props) => html();
+  let modules = {};
+  let pageIgnoresLayout = false;
+  let isDynamicPage = false;
+  try {
+    const {
+      page,
+      metadata: pageMetadata,
+      isDynamic,
+      shippedModules: shippedModules2,
+      ignoreLayout
+    } = await import("file://" + filePath);
+    if (shippedModules2 !== void 0) {
+      modules = shippedModules2;
+    }
+    if (ignoreLayout) {
+      pageIgnoresLayout = true;
+    }
+    pageElements = page;
+    metadata = pageMetadata;
+    if (isDynamic === true) {
+      isDynamicPage = isDynamic;
+    }
+  } catch (e) {
+    throw new Error(`Error in Page: ${directory}/page.ts - ${e}`);
+  }
+  if (modules !== void 0) {
+    for (const [globalName, path2] of Object.entries(modules)) {
+      modulesToShip.push({ globalName, path: path2 });
+    }
+  }
+  if (!metadata || metadata && typeof metadata !== "function") {
+    console.warn(`WARNING: ${filePath} does not export a metadata function.`);
+  }
+  if (!pageElements) {
+    console.warn(`WARNING: ${filePath} should export a const page, which is of type () => BuiltElement<"body">.`);
+  }
+  const pageProps = {
+    pageName: directory
+  };
+  if (typeof pageElements === "function") {
+    if (pageElements.constructor.name === "AsyncFunction") {
+      pageElements = await pageElements(pageProps);
+    } else {
+      pageElements = pageElements(pageProps);
+    }
+  }
+  const layout = await fetchPageLayoutHTML(path.dirname(filePath));
+  const resultHTML = await pageToHTML(
+    path.join(DIST_DIR2, directory),
+    pageElements,
+    metadata,
+    DIST_DIR2,
+    "page",
+    false,
+    modules,
+    layout,
+    directory
+  );
+  await shipModules();
+  return { resultHTML };
+};
+var shipModules = async () => {
+  for (const plugin of modulesToShip) {
+    {
+      if (shippedModules.has(plugin.globalName)) continue;
+      shippedModules.set(plugin.globalName, true);
+    }
+    esbuild.build({
+      entryPoints: [plugin.path],
+      bundle: true,
+      outfile: path.join(DIST_DIR, "shipped", plugin.globalName + ".js"),
+      format: "iife",
+      platform: "browser",
+      globalName: plugin.globalName,
+      minify: true,
+      treeShaking: true
+    });
+  }
+  modulesToShip = [];
+};
 var build = async () => {
   if (options.quiet === true) {
     console.log = function() {
@@ -902,9 +1458,9 @@ var build = async () => {
   }
   try {
     {
-      log(bold(yellow(" -- Elegance.JS -- ")));
+      log2(bold(yellow(" -- Elegance.JS -- ")));
       if (options.environment === "production") {
-        log(
+        log2(
           " - ",
           bgYellow(bold(black(" NOTE "))),
           " : ",
@@ -912,32 +1468,13 @@ var build = async () => {
           underline("console.log() "),
           white("statements will be shown on the client, and all code will be minified.")
         );
-        log("");
+        log2("");
       }
     }
     if (options.preCompile) {
       options.preCompile();
     }
     const start = performance.now();
-    {
-      pluginsToShip = [];
-      for (const plugin of pluginsToShip) {
-        {
-          if (shippedPlugins.has(plugin.globalName)) continue;
-          shippedPlugins.set(plugin.globalName, true);
-        }
-        await esbuild.build({
-          entryPoints: [plugin.path],
-          bundle: true,
-          outfile: path.join(DIST_DIR, "shipped", plugin.globalName + ".js"),
-          format: "iife",
-          platform: "browser",
-          globalName: plugin.globalName,
-          minify: true,
-          treeShaking: true
-        });
-      }
-    }
     let shouldClientHardReload;
     {
       const { shouldClientHardReload: doReload } = await buildLayouts();
@@ -947,24 +1484,33 @@ var build = async () => {
       const { shouldClientHardReload: doReload } = await buildPages(path.resolve(DIST_DIR));
       if (doReload) shouldClientHardReload = true;
     }
+    await shipModules();
     const pagesBuilt = performance.now();
     await buildClient(DIST_DIR);
     const end = performance.now();
     if (options.publicDirectory) {
-      log("Recursively copying public directory.. this may take a while.");
+      log2("Recursively copying public directory.. this may take a while.");
       const src = path.relative(process.cwd(), options.publicDirectory.path);
-      if (fs.existsSync(src) === false) {
+      if (fs2.existsSync(src) === false) {
         console.warn("WARNING: Public directory not found, an attempt will be made create it..");
-        fs.mkdirSync(src, { recursive: true });
+        fs2.mkdirSync(src, { recursive: true });
       }
-      await fs.promises.cp(src, path.join(DIST_DIR), { recursive: true });
+      await fs2.promises.cp(src, path.join(DIST_DIR), { recursive: true });
     }
     {
-      log(`Took ${Math.round(pagesBuilt - start)}ms to Build Pages.`);
-      log(`Took ${Math.round(end - pagesBuilt)}ms to Build Client.`);
+      log2(`Took ${Math.round(pagesBuilt - start)}ms to Build Pages.`);
+      log2(`Took ${Math.round(end - pagesBuilt)}ms to Build Client.`);
+    }
+    if (options.server != void 0 && options.server.runServer == true) {
+      startServer({
+        root: options.server.root ?? DIST_DIR,
+        environment: options.environment,
+        port: options.server.port ?? 3e3,
+        host: options.server.host ?? "localhost",
+        DIST_DIR
+      });
     }
-    process.send({ event: "message", data: "set-layouts", layouts: JSON.stringify(Array.from(__SERVER_CURRENT_LAYOUTS__)), currentLayouTId: __SERVER_CURRENT_LAYOUT_ID__ });
-    process.send({ event: "message", data: "compile-finish" });
+    process.send?.({ event: "message", data: "compile-finish" });
     if (shouldClientHardReload) {
       process.send({ event: "message", data: "hard-reload" });
     } else {
@@ -981,5 +1527,8 @@ var build = async () => {
   await build();
 })();
 export {
+  LAYOUT_MAP2 as LAYOUT_MAP,
+  PAGE_MAP,
+  buildDynamicPage,
   processPageElements
 };