elegance-js 2.1.18 → 2.1.20

package/dist/client/client.mjs

@@ -1,442 +1,574 @@
-import "../shared/bindServerElements";
-import { ObjectAttributeType } from "../helpers/ObjectAttributeType";
-console.log("Elegance.JS is loading..");
-let pd = {};
-let ld = {};
-var BindLevel = /* @__PURE__ */ ((BindLevel2) => {
-  BindLevel2[BindLevel2["STRICT"] = 1] = "STRICT";
-  BindLevel2[BindLevel2["SCOPED"] = 2] = "SCOPED";
-  return BindLevel2;
-})(BindLevel || {});
-;
-Object.assign(window, {
-  observe: (subjects, updateCallback) => {
-    return {
-      subjects,
-      updateCallback,
-      isAttribute: true,
-      type: ObjectAttributeType.OBSERVER
-    };
-  },
-  eventListener: (subjects, eventListener) => {
-    return {
-      subjects,
-      eventListener,
-      isAttribute: true,
-      type: ObjectAttributeType.STATE
-    };
-  }
-});
-const domParser = new DOMParser();
-const xmlSerializer = new XMLSerializer();
-const pageStringCache = /* @__PURE__ */ new Map();
-const loc = window.location;
-const doc = document;
-let cleanupProcedures = [];
-const sanitizePathname = (pn) => {
-  if (!pn.endsWith("/") || pn === "/") return pn;
-  return pn.slice(0, -1);
-};
-let currentPage = sanitizePathname(loc.pathname);
-function getAllPaths(pathname) {
-  const sanitized = pathname.endsWith("/") && pathname !== "/" ? pathname.slice(0, -1) : pathname;
-  const parts = sanitized.split("/").filter(Boolean);
-  const subpaths = [
-    "/",
-    ...parts.map((_, i) => "/" + parts.slice(0, i + 1).join("/"))
+"use strict";
+(() => {
+  // src/shared/serverElements.ts
+  var createBuildableElement = (tag) => {
+    return (options, ...children) => ({
+      tag,
+      options: options || {},
+      children
+    });
+  };
+  var createChildrenlessBuildableElement = (tag) => {
+    return (options) => ({
+      tag,
+      options: options || {},
+      children: null
+    });
+  };
+  var childrenlessElementTags = [
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "source",
+    "track",
+    "path",
+    "rect"
+  ];
+  var elementTags = [
+    "a",
+    "address",
+    "article",
+    "aside",
+    "audio",
+    "blockquote",
+    "body",
+    "button",
+    "canvas",
+    "caption",
+    "colgroup",
+    "data",
+    "datalist",
+    "dd",
+    "del",
+    "details",
+    "dialog",
+    "div",
+    "dl",
+    "dt",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "footer",
+    "form",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hgroup",
+    "html",
+    "iframe",
+    "ins",
+    "label",
+    "legend",
+    "li",
+    "main",
+    "map",
+    "meter",
+    "nav",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "picture",
+    "pre",
+    "progress",
+    "q",
+    "section",
+    "select",
+    "summary",
+    "table",
+    "tbody",
+    "td",
+    "template",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "tr",
+    "ul",
+    "video",
+    "span",
+    "script",
+    "abbr",
+    "b",
+    "bdi",
+    "bdo",
+    "cite",
+    "code",
+    "dfn",
+    "em",
+    "i",
+    "kbd",
+    "mark",
+    "rp",
+    "rt",
+    "ruby",
+    "s",
+    "samp",
+    "small",
+    "strong",
+    "sub",
+    "sup",
+    "u",
+    "wbr",
+    "title",
+    "svg"
   ];
-  if (sanitized === "/") return ["/"];
-  return subpaths;
-}
-const createStateManager = (subjects, bindLevel) => {
-  const state = {
-    subjects: subjects.map((subject) => {
-      const s = {
-        ...subject,
-        observers: /* @__PURE__ */ new Map()
+  var elements = {};
+  var childrenlessElements = {};
+  for (const element of elementTags) {
+    elements[element] = createBuildableElement(element);
+  }
+  for (const element of childrenlessElementTags) {
+    childrenlessElements[element] = createChildrenlessBuildableElement(element);
+  }
+  var allElements = {
+    ...elements,
+    ...childrenlessElements
+  };
+
+  // src/shared/bindServerElements.ts
+  Object.assign(globalThis, elements);
+  Object.assign(globalThis, childrenlessElements);
+
+  // src/client/client.ts
+  console.log("Elegance.JS is loading..");
+  var pd = {};
+  var ld = {};
+  Object.assign(window, {
+    observe: (subjects, updateCallback) => {
+      return {
+        subjects,
+        updateCallback,
+        isAttribute: true,
+        type: 2 /* OBSERVER */
+      };
+    },
+    eventListener: (subjects, eventListener) => {
+      return {
+        subjects,
+        eventListener,
+        isAttribute: true,
+        type: 1 /* STATE */
       };
-      s.signal = () => {
-        for (const observer of s.observers.values()) {
+    }
+  });
+  var domParser = new DOMParser();
+  var xmlSerializer = new XMLSerializer();
+  var pageStringCache = /* @__PURE__ */ new Map();
+  var loc = window.location;
+  var doc = document;
+  var cleanupProcedures = [];
+  var sanitizePathname = (pn) => {
+    if (!pn.endsWith("/") || pn === "/") return pn;
+    return pn.slice(0, -1);
+  };
+  var currentPage = sanitizePathname(loc.pathname);
+  var createStateManager = (subjects, bindLevel) => {
+    const state = {
+      subjects: subjects.map((subject) => {
+        const s = {
+          ...subject,
+          observers: /* @__PURE__ */ new Map()
+        };
+        s.signal = () => {
+          for (const observer of s.observers.values()) {
+            try {
+              observer(s.value);
+            } catch (e) {
+              console.error(e);
+              continue;
+            }
+          }
+        };
+        return s;
+      }),
+      destroy: (s) => {
+        state.subjects.splice(state.subjects.indexOf(s), 1);
+      },
+      get: (id) => {
+        const subject = state.subjects.find((s) => s.id === id);
+        if (subject) return subject;
+        if (bindLevel === 2 /* SCOPED */) return void 0;
+        const parts = window.location.pathname.split("/").filter(Boolean);
+        const paths = [
+          ...parts.map((_, i) => "/" + parts.slice(0, i + 1).join("/")),
+          "/"
+        ].reverse();
+        for (const item of paths) {
+          const sanitized = sanitizePathname(item);
+          const data = ld[sanitized];
+          if (!data) continue;
+          const entry = data.stateManager.get(id);
+          if (entry) return entry;
+        }
+        return void 0;
+      },
+      /**
+          Bind is deprecated, but kept as a paramater to not upset legacy code.
+      */
+      getAll: (refs) => refs?.map((ref) => {
+        return state.get(ref.id);
+      }),
+      observe: (subject, observer, key) => {
+        subject.observers.delete(key);
+        subject.observers.set(key, observer);
+      },
+      unobserve: (subject, key) => {
+        subject.observers.delete(key);
+      }
+    };
+    return state;
+  };
+  var initPageData = (data, currentPage2, previousPage, bindLevel) => {
+    if (!data) {
+      console.error("Data for page " + currentPage2 + " is null.");
+      return;
+    }
+    let state = data?.stateManager;
+    if (!state) {
+      state = createStateManager(data.state || [], bindLevel);
+      data.stateManager = state;
+    }
+    for (const subject of state.subjects) {
+      if (!subject.observers) subject.observers = /* @__PURE__ */ new Map();
+    }
+    for (const ooa of data.ooa || []) {
+      const els = doc.querySelectorAll(`[key="${ooa.key}"]`);
+      let values = {};
+      for (const { id } of ooa.refs) {
+        const subject = state.get(id);
+        values[subject.id] = subject.value;
+        const updateFunction = (value) => {
+          values[id] = value;
           try {
-            observer(s.value);
+            const newValue = ooa.update(...Object.values(values));
+            let attribute = ooa.attribute === "class" ? "className" : ooa.attribute;
+            for (const el of Array.from(els)) {
+              el[attribute] = newValue;
+            }
           } catch (e) {
             console.error(e);
-            continue;
+            return;
           }
+        };
+        updateFunction(subject.value);
+        try {
+          state.observe(subject, updateFunction, ooa.key);
+        } catch (e) {
+          console.error(e);
+          return;
         }
-      };
-      return s;
-    }),
-    destroy: (s) => {
-      state.subjects.splice(state.subjects.indexOf(s), 1);
-    },
-    get: (id) => {
-      const subject = state.subjects.find((s) => s.id === id);
-      if (subject) return subject;
-      if (bindLevel === 2 /* SCOPED */) return void 0;
-      const parts = window.location.pathname.split("/").filter(Boolean);
-      const paths = [
-        ...parts.map((_, i) => "/" + parts.slice(0, i + 1).join("/")),
-        "/"
-      ].reverse();
-      for (const item of paths) {
-        const sanitized = sanitizePathname(item);
-        const data = ld[sanitized];
-        if (!data) continue;
-        const entry = data.stateManager.get(id);
-        if (entry) return entry;
       }
-      return void 0;
-    },
-    /**
-        Bind is deprecated, but kept as a paramater to not upset legacy code.
-    */
-    getAll: (refs) => refs?.map((ref) => {
-      return state.get(ref.id);
-    }),
-    observe: (subject, observer, key) => {
-      subject.observers.delete(key);
-      subject.observers.set(key, observer);
-    },
-    unobserve: (subject, key) => {
-      subject.observers.delete(key);
     }
-  };
-  return state;
-};
-const initPageData = (data, currentPage2, previousPage, bindLevel) => {
-  if (!data) {
-    console.error("Data for page " + currentPage2 + " is null.");
-    return;
-  }
-  let state = data?.stateManager;
-  if (!state) {
-    state = createStateManager(data.state || [], bindLevel);
-    data.stateManager = state;
-  }
-  for (const subject of state.subjects) {
-    if (!subject.observers) subject.observers = /* @__PURE__ */ new Map();
-  }
-  for (const ooa of data.ooa || []) {
-    const els = doc.querySelectorAll(`[key="${ooa.key}"]`);
-    let values = {};
-    for (const { id } of ooa.refs) {
-      const subject = state.get(id);
-      values[subject.id] = subject.value;
-      const updateFunction = (value) => {
-        values[id] = value;
+    for (const soa of data.soa || []) {
+      const el = doc.querySelector(`[key="${soa.key}"]`);
+      if (!el) {
+        console.error("Could not find SOA element for SOA:", soa);
+        continue;
+      }
+      const subject = state.get(soa.id);
+      if (typeof subject.value === "function") {
         try {
-          const newValue = ooa.update(...Object.values(values));
-          let attribute = ooa.attribute === "class" ? "className" : ooa.attribute;
-          for (const el of Array.from(els)) {
-            el[attribute] = newValue;
-          }
+          el[soa.attribute] = (event) => subject.value(state, event);
         } catch (e) {
           console.error(e);
           return;
         }
-      };
-      updateFunction(subject.value);
-      try {
-        state.observe(subject, updateFunction, ooa.key);
-      } catch (e) {
-        console.error(e);
-        return;
+      } else {
+        el[soa.attribute] = subject.value;
       }
     }
-  }
-  for (const soa of data.soa || []) {
-    const el = doc.querySelector(`[key="${soa.key}"]`);
-    if (!el) {
-      console.error("Could not find SOA element for SOA:", soa);
-      continue;
-    }
-    const subject = state.get(soa.id);
-    if (typeof subject.value === "function") {
-      try {
-        el[soa.attribute] = (event) => subject.value(state, event);
-      } catch (e) {
-        console.error(e);
-        return;
+    const loadHooks = data.lh;
+    for (const loadHook of loadHooks || []) {
+      const wasInScope = previousPage ? previousPage.startsWith(currentPage2) : false;
+      if (wasInScope && bindLevel !== 1 /* STRICT */) {
+        continue;
       }
-    } else {
-      el[soa.attribute] = subject.value;
-    }
-  }
-  const loadHooks = data.lh;
-  for (const loadHook of loadHooks || []) {
-    const wasInScope = previousPage ? previousPage.startsWith(currentPage2) : false;
-    if (wasInScope && bindLevel !== 1 /* STRICT */) {
-      continue;
-    }
-    const fn = loadHook.fn;
-    try {
-      let cleanupFunction;
-      if (fn.constructor.name === "AsyncFunction") {
-        const res = fn(state);
-        res.then((cleanupFunction2) => {
-          if (cleanupFunction2) {
+      const fn = loadHook.fn;
+      try {
+        let cleanupFunction;
+        if (fn.constructor.name === "AsyncFunction") {
+          const res = fn(state);
+          res.then((cleanupFunction2) => {
+            if (cleanupFunction2) {
+              cleanupProcedures.push({
+                cleanupFunction: cleanupFunction2,
+                page: `${currentPage2}`,
+                loadHook,
+                bindLevel
+              });
+            }
+          });
+        } else {
+          cleanupFunction = fn(state);
+          if (cleanupFunction) {
             cleanupProcedures.push({
-              cleanupFunction: cleanupFunction2,
+              cleanupFunction,
               page: `${currentPage2}`,
               loadHook,
               bindLevel
             });
           }
-        });
-      } else {
-        cleanupFunction = fn(state);
-        if (cleanupFunction) {
-          cleanupProcedures.push({
-            cleanupFunction,
-            page: `${currentPage2}`,
-            loadHook,
-            bindLevel
-          });
         }
+      } catch (e) {
+        console.error(e);
+        return;
       }
-    } catch (e) {
-      console.error(e);
-      return;
     }
-  }
-};
-const loadPage = async (previousPage = null) => {
-  const fixedUrl = new URL(loc.href);
-  fixedUrl.pathname = sanitizePathname(fixedUrl.pathname);
-  const pathname = fixedUrl.pathname;
-  currentPage = pathname;
-  pageStringCache.set(
-    currentPage,
-    xmlSerializer.serializeToString(doc)
-  );
-  history.replaceState(null, "", fixedUrl.href);
-  {
-    const parts = window.location.pathname.split("/").filter(Boolean);
-    const paths = [
-      ...parts.map((_, i) => "/" + parts.slice(0, i + 1).join("/")),
-      "/"
-    ];
-    for (const path of paths) {
-      const layoutDataScript = document.querySelector(`script[data-layout="true"][data-pathname="${path}"]`);
-      if (!layoutDataScript) {
-        continue;
+  };
+  var loadPage = async (previousPage = null) => {
+    const fixedUrl = new URL(loc.href);
+    fixedUrl.pathname = sanitizePathname(fixedUrl.pathname);
+    const pathname = fixedUrl.pathname;
+    currentPage = pathname;
+    pageStringCache.set(
+      currentPage,
+      xmlSerializer.serializeToString(doc)
+    );
+    history.replaceState(null, "", fixedUrl.href);
+    {
+      const parts = window.location.pathname.split("/").filter(Boolean);
+      const paths = [
+        ...parts.map((_, i) => "/" + parts.slice(0, i + 1).join("/")),
+        "/"
+      ];
+      for (const path of paths) {
+        const layoutDataScript = document.querySelector(`script[data-layout="true"][data-pathname="${path}"]`);
+        if (!layoutDataScript) {
+          continue;
+        }
+        const { data } = await import(layoutDataScript.src);
+        if (!ld[pathname]) ld[pathname] = data;
+        {
+          const dataScript = document.querySelector(`script[data-hook="true"][data-pathname="${sanitizePathname(pathname)}"]`);
+          if (dataScript) dataScript.remove();
+        }
+        initPageData(ld[pathname], path, previousPage, 2 /* SCOPED */);
       }
-      const { data } = await import(layoutDataScript.src);
-      if (!ld[pathname]) ld[pathname] = data;
+    }
+    {
+      const pageDataScript = document.head.querySelector(`script[data-page="true"][data-pathname="${sanitizePathname(pathname)}"]`);
+      const { data } = await import(pageDataScript.src);
+      if (!pd[pathname]) pd[pathname] = data;
       {
         const dataScript = document.querySelector(`script[data-hook="true"][data-pathname="${sanitizePathname(pathname)}"]`);
         if (dataScript) dataScript.remove();
       }
-      initPageData(ld[pathname], path, previousPage, 2 /* SCOPED */);
-    }
-  }
-  {
-    const pageDataScript = document.head.querySelector(`script[data-page="true"][data-pathname="${sanitizePathname(pathname)}"]`);
-    const { data } = await import(pageDataScript.src);
-    if (!pd[pathname]) pd[pathname] = data;
-    {
-      const dataScript = document.querySelector(`script[data-hook="true"][data-pathname="${sanitizePathname(pathname)}"]`);
-      if (dataScript) dataScript.remove();
-    }
-    initPageData(pd[pathname], currentPage, previousPage, 1 /* STRICT */);
-  }
-  console.info(
-    `Loading finished, cleanupProcedures are currently:`,
-    cleanupProcedures
-  );
-};
-const fetchPage = async (targetURL) => {
-  const pathname = sanitizePathname(targetURL.pathname);
-  if (pageStringCache.has(pathname)) {
-    return domParser.parseFromString(pageStringCache.get(pathname), "text/html");
-  }
-  const res = await fetch(targetURL);
-  const newDOM = domParser.parseFromString(await res.text(), "text/html");
-  {
-    const dataScripts = Array.from(newDOM.querySelectorAll('script[data-module="true"]'));
-    const currentScripts = Array.from(document.head.querySelectorAll('script[data-module="true"]'));
-    for (const dataScript of dataScripts) {
-      const existing = currentScripts.find((s) => s.src === dataScript.src);
-      if (existing) {
-        continue;
-      }
-      document.head.appendChild(dataScript);
-    }
-  }
-  {
-    const pageDataScript = newDOM.querySelector('script[data-page="true"]');
-    if (!pageDataScript) {
-      return;
+      initPageData(pd[pathname], currentPage, previousPage, 1 /* STRICT */);
     }
-    if (!pd[pathname]) {
-      await import(pageDataScript.src);
+    console.info(
+      `Loading finished, cleanupProcedures are currently:`,
+      cleanupProcedures
+    );
+  };
+  var fetchPage = async (targetURL) => {
+    const pathname = sanitizePathname(targetURL.pathname);
+    if (pageStringCache.has(pathname)) {
+      return domParser.parseFromString(pageStringCache.get(pathname), "text/html");
     }
-  }
-  {
-    const layoutDataScripts = Array.from(newDOM.querySelectorAll('script[data-layout="true"]'));
-    for (const script of layoutDataScripts) {
-      const url = new URL(script.src, window.location.origin);
-      const dir = url.pathname.substring(0, url.pathname.lastIndexOf("/")) || "/";
-      const pathname2 = sanitizePathname(dir);
-      if (!ld[pathname2]) {
-        await import(script.src);
+    const res = await fetch(targetURL);
+    const newDOM = domParser.parseFromString(await res.text(), "text/html");
+    {
+      const dataScripts = Array.from(newDOM.querySelectorAll('script[data-module="true"]'));
+      const currentScripts = Array.from(document.head.querySelectorAll('script[data-module="true"]'));
+      for (const dataScript of dataScripts) {
+        const existing = currentScripts.find((s) => s.src === dataScript.src);
+        if (existing) {
+          continue;
+        }
+        document.head.appendChild(dataScript);
       }
     }
-  }
-  pageStringCache.set(pathname, xmlSerializer.serializeToString(newDOM));
-  return newDOM;
-};
-const navigateLocally = async (target, pushState = true) => {
-  const targetURL = new URL(target);
-  const pathname = sanitizePathname(targetURL.pathname);
-  console.log(
-    `%c${currentPage} -> ${targetURL.pathname}`,
-    "font-size: 18px; font-weight: 600; color: lightgreen;"
-  );
-  let newPage = await fetchPage(targetURL);
-  if (!newPage) return;
-  if (pathname === currentPage) return;
-  for (const cleanupProcedure of [...cleanupProcedures]) {
-    const isInScope = pathname.startsWith(cleanupProcedure.page);
-    if (!isInScope || cleanupProcedure.bindLevel === 1 /* STRICT */) {
-      try {
-        cleanupProcedure.cleanupFunction();
-      } catch (e) {
-        console.error(e);
+    {
+      const pageDataScript = newDOM.querySelector('script[data-page="true"]');
+      if (!pageDataScript) {
         return;
       }
-      cleanupProcedures.splice(cleanupProcedures.indexOf(cleanupProcedure), 1);
+      if (!pd[pathname]) {
+        await import(pageDataScript.src);
+      }
     }
-  }
-  let oldPageLatest = doc.body;
-  let newPageLatest = newPage.body;
-  {
-    const newPageLayouts = Array.from(newPage.querySelectorAll("template[layout-id]"));
-    const oldPageLayouts = Array.from(doc.querySelectorAll("template[layout-id]"));
-    const size = Math.min(newPageLayouts.length, oldPageLayouts.length);
-    for (let i = 0; i < size; i++) {
-      const newPageLayout = newPageLayouts[i];
-      const oldPageLayout = oldPageLayouts[i];
-      const newLayoutId = newPageLayout.getAttribute("layout-id");
-      const oldLayoutId = oldPageLayout.getAttribute("layout-id");
-      if (newLayoutId !== oldLayoutId) {
-        break;
+    {
+      const layoutDataScripts = Array.from(newDOM.querySelectorAll('script[data-layout="true"]'));
+      for (const script of layoutDataScripts) {
+        const url = new URL(script.src, window.location.origin);
+        const dir = url.pathname.substring(0, url.pathname.lastIndexOf("/")) || "/";
+        const pathname2 = sanitizePathname(dir);
+        if (!ld[pathname2]) {
+          await import(script.src);
+        }
       }
-      oldPageLatest = oldPageLayout.nextElementSibling;
-      newPageLatest = newPageLayout.nextElementSibling;
     }
-  }
-  oldPageLatest.replaceWith(newPageLatest);
-  {
-    doc.head.querySelector("title")?.replaceWith(
-      newPage.head.querySelector("title") ?? ""
+    pageStringCache.set(pathname, xmlSerializer.serializeToString(newDOM));
+    return newDOM;
+  };
+  var navigateLocally = async (target, pushState = true) => {
+    const targetURL = new URL(target);
+    const pathname = sanitizePathname(targetURL.pathname);
+    console.log(
+      `%c${currentPage} -> ${targetURL.pathname}`,
+      "font-size: 18px; font-weight: 600; color: lightgreen;"
     );
-    const update = (targetList, matchAgainst, action) => {
-      for (const target2 of targetList) {
-        const matching = matchAgainst.find((n) => n.isEqualNode(target2));
-        if (matching) {
-          continue;
+    let newPage = await fetchPage(targetURL);
+    if (!newPage) return;
+    if (pathname === currentPage) return;
+    for (const cleanupProcedure of [...cleanupProcedures]) {
+      const isInScope = pathname.startsWith(cleanupProcedure.page);
+      if (!isInScope || cleanupProcedure.bindLevel === 1 /* STRICT */) {
+        try {
+          cleanupProcedure.cleanupFunction();
+        } catch (e) {
+          console.error(e);
+          return;
         }
-        action(target2);
+        cleanupProcedures.splice(cleanupProcedures.indexOf(cleanupProcedure), 1);
       }
-    };
-    const oldTags = Array.from([
-      ...Array.from(document.head.querySelectorAll("link")),
-      ...Array.from(document.head.querySelectorAll("meta")),
-      ...Array.from(document.head.querySelectorAll("script")),
-      ...Array.from(document.head.querySelectorAll("base")),
-      ...Array.from(document.head.querySelectorAll("style"))
-    ]);
-    const newTags = Array.from([
-      ...Array.from(newPage.head.querySelectorAll("link")),
-      ...Array.from(newPage.head.querySelectorAll("meta")),
-      ...Array.from(newPage.head.querySelectorAll("script")),
-      ...Array.from(newPage.head.querySelectorAll("base")),
-      ...Array.from(newPage.head.querySelectorAll("style"))
-    ]);
-    update(newTags, oldTags, (node) => document.head.appendChild(node));
-    update(oldTags, newTags, (node) => node.remove());
-  }
-  if (pushState) history.pushState(null, "", targetURL.href);
-  await loadPage(currentPage);
-  currentPage = pathname;
-  if (targetURL.hash) {
-    doc.getElementById(targetURL.hash.slice(1))?.scrollIntoView();
-  }
-};
-window.onpopstate = async (event) => {
-  event.preventDefault();
-  const target = event.target;
-  await navigateLocally(target.location.href, false);
-  history.replaceState(null, "", target.location.href);
-};
-const renderRecursively = (element, attributes) => {
-  if (typeof element === "boolean") {
-    return null;
-  }
-  if (typeof element === "number" || typeof element === "string") {
-    return document.createTextNode(element.toString());
-  }
-  if (Array.isArray(element)) {
-    const fragment = document.createDocumentFragment();
-    element.forEach((item) => {
-      const childNode = renderRecursively(item, attributes);
-      if (childNode) fragment.appendChild(childNode);
-    });
-    return fragment;
-  }
-  const domElement = document.createElement(element.tag);
-  if (typeof element.options !== "object" && element.options !== void 0) {
-    const childNode = renderRecursively(element.options, attributes);
-    if (childNode) domElement.appendChild(childNode);
-  } else if (typeof element.options === "object") {
-    const { tag, options, children } = element.options;
-    if (tag !== void 0 || options !== void 0 || children !== void 0) {
+    }
+    let oldPageLatest = doc.body;
+    let newPageLatest = newPage.body;
+    {
+      const newPageLayouts = Array.from(newPage.querySelectorAll("template[layout-id]"));
+      const oldPageLayouts = Array.from(doc.querySelectorAll("template[layout-id]"));
+      const size = Math.min(newPageLayouts.length, oldPageLayouts.length);
+      for (let i = 0; i < size; i++) {
+        const newPageLayout = newPageLayouts[i];
+        const oldPageLayout = oldPageLayouts[i];
+        const newLayoutId = newPageLayout.getAttribute("layout-id");
+        const oldLayoutId = oldPageLayout.getAttribute("layout-id");
+        if (newLayoutId !== oldLayoutId) {
+          break;
+        }
+        oldPageLatest = oldPageLayout.nextElementSibling;
+        newPageLatest = newPageLayout.nextElementSibling;
+      }
+    }
+    oldPageLatest.replaceWith(newPageLatest);
+    {
+      doc.head.querySelector("title")?.replaceWith(
+        newPage.head.querySelector("title") ?? ""
+      );
+      const update = (targetList, matchAgainst, action) => {
+        for (const target2 of targetList) {
+          const matching = matchAgainst.find((n) => n.isEqualNode(target2));
+          if (matching) {
+            continue;
+          }
+          action(target2);
+        }
+      };
+      const oldTags = Array.from([
+        ...Array.from(document.head.querySelectorAll("link")),
+        ...Array.from(document.head.querySelectorAll("meta")),
+        ...Array.from(document.head.querySelectorAll("script")),
+        ...Array.from(document.head.querySelectorAll("base")),
+        ...Array.from(document.head.querySelectorAll("style"))
+      ]);
+      const newTags = Array.from([
+        ...Array.from(newPage.head.querySelectorAll("link")),
+        ...Array.from(newPage.head.querySelectorAll("meta")),
+        ...Array.from(newPage.head.querySelectorAll("script")),
+        ...Array.from(newPage.head.querySelectorAll("base")),
+        ...Array.from(newPage.head.querySelectorAll("style"))
+      ]);
+      update(newTags, oldTags, (node) => document.head.appendChild(node));
+      update(oldTags, newTags, (node) => node.remove());
+    }
+    if (pushState) history.pushState(null, "", targetURL.href);
+    await loadPage(currentPage);
+    currentPage = pathname;
+    if (targetURL.hash) {
+      doc.getElementById(targetURL.hash.slice(1))?.scrollIntoView();
+    }
+  };
+  window.onpopstate = async (event) => {
+    event.preventDefault();
+    const target = event.target;
+    await navigateLocally(target.location.href, false);
+    history.replaceState(null, "", target.location.href);
+  };
+  var renderRecursively = (element, attributes) => {
+    if (typeof element === "boolean") {
+      return null;
+    }
+    if (typeof element === "number" || typeof element === "string") {
+      return document.createTextNode(element.toString());
+    }
+    if (Array.isArray(element)) {
+      const fragment = document.createDocumentFragment();
+      element.forEach((item) => {
+        const childNode = renderRecursively(item, attributes);
+        if (childNode) fragment.appendChild(childNode);
+      });
+      return fragment;
+    }
+    const domElement = document.createElement(element.tag);
+    if (typeof element.options !== "object" && element.options !== void 0) {
       const childNode = renderRecursively(element.options, attributes);
       if (childNode) domElement.appendChild(childNode);
-    } else {
-      for (const [attrName, attrValue] of Object.entries(element.options)) {
-        if (typeof attrValue === "object") {
-          const { isAttribute } = attrValue;
-          if (isAttribute === void 0 || isAttribute === false) {
-            console.error("Objects are not valid option property values.");
-            throw "";
+    } else if (typeof element.options === "object") {
+      const { tag, options, children } = element.options;
+      if (tag !== void 0 || options !== void 0 || children !== void 0) {
+        const childNode = renderRecursively(element.options, attributes);
+        if (childNode) domElement.appendChild(childNode);
+      } else {
+        for (const [attrName, attrValue] of Object.entries(element.options)) {
+          if (typeof attrValue === "object") {
+            const { isAttribute } = attrValue;
+            if (isAttribute === void 0 || isAttribute === false) {
+              console.error("Objects are not valid option property values.");
+              throw "";
+            }
+            attributes.push({
+              ...attrValue,
+              field: attrName,
+              element: domElement
+            });
+            continue;
           }
-          attributes.push({
-            ...attrValue,
-            field: attrName,
-            element: domElement
-          });
-          continue;
+          domElement.setAttribute(attrName.toLowerCase(), attrValue);
         }
-        domElement.setAttribute(attrName.toLowerCase(), attrValue);
       }
     }
-  }
-  if (element.children !== null) {
-    if (Array.isArray(element.children)) {
-      element.children.forEach((child) => {
-        const childNode = renderRecursively(child, attributes);
+    if (element.children !== null) {
+      if (Array.isArray(element.children)) {
+        element.children.forEach((child) => {
+          const childNode = renderRecursively(child, attributes);
+          if (childNode) domElement.appendChild(childNode);
+        });
+      } else {
+        const childNode = renderRecursively(element.children, attributes);
         if (childNode) domElement.appendChild(childNode);
-      });
-    } else {
-      const childNode = renderRecursively(element.children, attributes);
-      if (childNode) domElement.appendChild(childNode);
+      }
     }
+    return domElement;
+  };
+  globalThis.client = {
+    navigateLocally,
+    fetchPage,
+    currentPage,
+    sanitizePathname,
+    getReference: (id) => document.querySelector(`[ref="${id}"]`),
+    renderRecursively
+  };
+  try {
+    loadPage();
+  } catch (e) {
+    console.error(e);
   }
-  return domElement;
-};
-globalThis.client = {
-  navigateLocally,
-  fetchPage,
-  currentPage,
-  sanitizePathname,
-  getReference: (id) => document.querySelector(`[ref="${id}"]`),
-  renderRecursively
-};
-try {
-  loadPage();
-} catch (e) {
-  console.error(e);
-}
+})();

package/dist/compilation/compilation.mjs

@@ -511,7 +511,9 @@ async function buildLayout(filePath, directory, generateDynamic = false) {
   const { pageContentHTML, metadataHTML } = result;
   function splitAround(str, sub) {
     const i = str.indexOf(sub);
-    if (i === -1) throw new Error("substring does not exist in parent string");
+    if (i === -1) {
+      throw new Error(`Whilst layout ${directory}, the splitter could not be found. Make sure to use the "child" prop passed into the layout.`);
+    }
     return {
       startHTML: str.substring(0, i),
       endHTML: str.substring(i + sub.length)
@@ -519,7 +521,9 @@ async function buildLayout(filePath, directory, generateDynamic = false) {
   }
   function splitAt(str, sub) {
     const i = str.indexOf(sub) + sub.length;
-    if (i === -1) throw new Error("substring does not exist in parent string");
+    if (i === -1) {
+      throw new Error(`Whilst layout ${directory}, the splitter could not be found. Make sure to use the "child" prop passed into the layout's metadata.`);
+    }
     return {
       startHTML: str.substring(0, i),
       endHTML: str.substring(i)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elegance-js",
-  "version": "2.1.18",
+  "version": "2.1.20",
   "description": "Web-Framework",
   "type": "module",
   "bin": {
@@ -10,7 +10,7 @@
     "native": "./scripts/native-test.js"
   },
   "scripts": {
-    "build": "esbuild --format=esm --platform=node --bundle=false --outdir=./dist --platform=node --out-extension:.js=.mjs \"./src/**/*.ts\" && tsc",
+    "build": "esbuild --format=esm --platform=node --bundle=false --outdir=./dist --out-extension:.js=.mjs \"./src/**/*.ts\" && esbuild --format=iife --platform=browser --bundle=true --outfile=./dist/client/client.mjs --out-extension:.js=.mjs ./src/client/client.ts  && tsc ",
     "compile-docs": "node ./dist/compile_docs.mjs --environment=development",
     "compile-docs-bun": "bun run ./dist/compile_docs.mjs --environment=development",
     "prepare": "npm run build"