elegance-js 1.15.2 → 1.17.0

package/dist/build.mjs

@@ -266,21 +266,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head2.constructor.name === "AsyncFunction") {
-    builtHead = await head2(StartTemplate);
+    builtHead = await head2();
   } else {
-    builtHead = head2(StartTemplate);
+    builtHead = head2();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 
 // src/server/createState.ts

package/dist/client/client.mjs

@@ -147,6 +147,7 @@ Object.assign(globalThis, childrenlessElements);
 // src/client/client.ts
 console.log("Elegance.JS is loading..");
 if (!globalThis.pd) globalThis.pd = {};
+if (!globalThis.ld) globalThis.ld = {};
 Object.assign(window, {
   observe: (subjects, updateCallback) => {
     return {
@@ -171,7 +172,6 @@ var pageStringCache = /* @__PURE__ */ new Map();
 var loc = window.location;
 var doc = document;
 var cleanupProcedures = [];
-var makeArray = Array.from;
 var sanitizePathname = (pn) => {
   if (!pn.endsWith("/") || pn === "/") return pn;
   return pn.slice(0, -1);
@@ -199,16 +199,16 @@ var createStateManager = (subjects) => {
     destroy: (s) => {
       state.subjects.splice(state.subjects.indexOf(s), 1);
     },
+    /**
+        Bind is deprecated, but kept as a paramater to not upset legacy code.
+    */
     get: (id, bind) => {
-      if (bind) {
-        return pd[bind].get(id);
-      }
       return state.subjects.find((s) => s.id === id);
     },
+    /**
+        Bind is deprecated, but kept as a paramater to not upset legacy code.
+    */
     getAll: (refs) => refs?.map((ref) => {
-      if (ref.bind) {
-        return pd[ref.bind].get(ref.id);
-      }
       return state.get(ref.id);
     }),
     observe: (subject, observer, key) => {
@@ -221,51 +221,24 @@ var createStateManager = (subjects) => {
   };
   return state;
 };
-var loadPage = (deprecatedKeys = [], newBreakpoints) => {
-  const fixedUrl = new URL(loc.href);
-  fixedUrl.pathname = sanitizePathname(fixedUrl.pathname);
-  const pathname = fixedUrl.pathname;
-  currentPage = pathname;
-  history.replaceState(null, "", fixedUrl.href);
-  let pageData = pd[pathname];
-  if (pd === void 0) {
-    console.error(`%cFailed to load! Missing page data!`, "font-size: 20px; font-weight: 600;");
+var initPageData = (data, currentPage2, previousPage, bindLevel) => {
+  if (!data) {
+    console.error("Data for page " + currentPage2 + " is null.");
     return;
   }
-  ;
-  console.info(`Loading ${pathname}. Page info follows:`, {
-    "Deprecated Keys": deprecatedKeys,
-    "New Breakpoints:": newBreakpoints || "(none, initial load)",
-    "State": pageData.state,
-    "OOA": pageData.ooa,
-    "SOA": pageData.soa,
-    "Load Hooks": pageData.lh
-  });
-  for (const [bind, subjects] of Object.entries(pageData.binds || {})) {
-    if (!pd[bind]) {
-      pd[bind] = createStateManager(subjects);
-      continue;
-    }
-    const stateManager = pd[bind];
-    const newSubjects = subjects;
-    for (const subject of newSubjects) {
-      if (stateManager.get(subject.id)) continue;
-      pd[bind].subjects.push(subject);
-    }
-  }
-  let state = pageData.stateManager;
+  let state = data?.stateManager;
   if (!state) {
-    state = createStateManager(pageData.state || []);
-    pageData.stateManager = state;
+    state = createStateManager(data.state || []);
+    data.stateManager = state;
   }
   for (const subject of state.subjects) {
     subject.observers = /* @__PURE__ */ new Map();
   }
-  for (const ooa of pageData.ooa || []) {
+  for (const ooa of data.ooa || []) {
     const els = doc.querySelectorAll(`[key="${ooa.key}"]`);
     let values = {};
-    for (const { id, bind } of ooa.refs) {
-      const subject = state.get(id, bind);
+    for (const { id } of ooa.refs) {
+      const subject = state.get(id);
       values[subject.id] = subject.value;
       const updateFunction = (value) => {
         values[id] = value;
@@ -289,9 +262,13 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
       }
     }
   }
-  for (const soa of pageData.soa || []) {
+  for (const soa of data.soa || []) {
     const el = doc.querySelector(`[key="${soa.key}"]`);
-    const subject = state.get(soa.id, soa.bind);
+    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);
@@ -303,14 +280,10 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
       el[soa.attribute] = subject.value;
     }
   }
-  const loadHooks = pageData.lh;
+  const loadHooks = data.lh;
   for (const loadHook of loadHooks || []) {
-    const bind = loadHook.bind ?? "";
-    if (
-      // generateClientPageData makes undefined binds into empty strings
-      // so that the page_data.js is *smaller*
-      bind !== "" && newBreakpoints && !newBreakpoints.includes(`${bind}`)
-    ) {
+    const wasInScope = previousPage ? previousPage.startsWith(currentPage2) : false;
+    if (wasInScope && bindLevel !== 1 /* STRICT */) {
       continue;
     }
     const fn = loadHook.fn;
@@ -322,7 +295,9 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
           if (cleanupFunction2) {
             cleanupProcedures.push({
               cleanupFunction: cleanupFunction2,
-              bind: `${bind}`
+              page: `${currentPage2}`,
+              loadHook,
+              bindLevel
             });
           }
         });
@@ -331,7 +306,9 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
         if (cleanupFunction) {
           cleanupProcedures.push({
             cleanupFunction,
-            bind: `${bind}`
+            page: `${currentPage2}`,
+            loadHook,
+            bindLevel
           });
         }
       }
@@ -340,12 +317,42 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
       return;
     }
   }
+};
+var loadPage = (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);
+  {
+    let pageData = pd[pathname];
+    if (!pd) {
+      console.error(`%cFailed to load! Missing page data!`, "font-size: 20px; font-weight: 600;");
+      return;
+    }
+    ;
+    initPageData(pageData, currentPage, previousPage, 1 /* STRICT */);
+  }
+  {
+    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 data = ld[path];
+      if (!data) {
+        continue;
+      }
+      initPageData(data, path, previousPage, 2 /* SCOPED */);
+    }
+  }
   console.info(
-    `Loading finished, registered these cleanupProcedures`,
+    `Loading finished, cleanupProcedures are currently:`,
     cleanupProcedures
   );
 };
@@ -354,7 +361,6 @@ var fetchPage = async (targetURL) => {
   if (pageStringCache.has(pathname)) {
     return domParser.parseFromString(pageStringCache.get(pathname), "text/html");
   }
-  console.info(`Fetching ${pathname}`);
   const res = await fetch(targetURL);
   const newDOM = domParser.parseFromString(await res.text(), "text/html");
   {
@@ -369,13 +375,23 @@ var fetchPage = async (targetURL) => {
     }
   }
   {
-    const pageDataScript = newDOM.querySelector('script[data-tag="true"]');
+    const pageDataScript = newDOM.querySelector('script[data-page="true"]');
     if (!pageDataScript) {
       return;
     }
     if (!pd[pathname]) {
-      const { data } = await import(pageDataScript.src);
-      pd[pathname] = data;
+      await import(pageDataScript.src);
+    }
+  }
+  {
+    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);
+      }
     }
   }
   pageStringCache.set(pathname, xmlSerializer.serializeToString(newDOM));
@@ -391,39 +407,9 @@ var navigateLocally = async (target, pushState = true) => {
   let newPage = await fetchPage(targetURL);
   if (!newPage) return;
   if (pathname === currentPage) return;
-  const curBreaks = makeArray(doc.querySelectorAll("div[bp]"));
-  const curBpTags = curBreaks.map((bp) => bp.getAttribute("bp"));
-  const newBreaks = makeArray(newPage.querySelectorAll("div[bp]"));
-  const newBpTags = newBreaks.map((bp) => bp.getAttribute("bp"));
-  const latestMatchingBreakpoints = (arr1, arr2) => {
-    let i = 0;
-    const len = Math.min(arr1.length, arr2.length);
-    while (i < len && arr1[i].getAttribute("bp") === arr2[i].getAttribute("bp")) i++;
-    return i > 0 ? [arr1[i - 1], arr2[i - 1]] : [document.body, newPage.body];
-  };
-  const [oldPageLatest, newPageLatest] = latestMatchingBreakpoints(curBreaks, newBreaks);
-  const deprecatedKeys = [];
-  const breakpointKey = oldPageLatest.getAttribute("key");
-  const getDeprecatedKeysRecursively = (element) => {
-    const key = element.getAttribute("key");
-    if (key) {
-      deprecatedKeys.push(key);
-    }
-    if (key === breakpointKey || !breakpointKey) return;
-    for (const child of makeArray(element.children)) {
-      getDeprecatedKeysRecursively(child);
-    }
-  };
-  getDeprecatedKeysRecursively(doc.body);
-  const deprecatedBreakpoints = curBpTags.filter(
-    (item) => !newBpTags.includes(item)
-  );
-  const newBreakpoints = newBpTags.filter(
-    (item) => !curBpTags.includes(item)
-  );
   for (const cleanupProcedure of [...cleanupProcedures]) {
-    const bind = cleanupProcedure.bind;
-    if (bind.length < 1 || deprecatedBreakpoints.includes(bind)) {
+    const isInScope = pathname.startsWith(cleanupProcedure.page);
+    if (!isInScope || cleanupProcedure.bindLevel === 1 /* STRICT */) {
       try {
         cleanupProcedure.cleanupFunction();
       } catch (e) {
@@ -433,14 +419,32 @@ var navigateLocally = async (target, pushState = true) => {
       cleanupProcedures.splice(cleanupProcedures.indexOf(cleanupProcedure), 1);
     }
   }
+  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.replaceWith(newPage.head);
   if (pushState) history.pushState(null, "", targetURL.href);
+  loadPage(currentPage);
   currentPage = pathname;
   if (targetURL.hash) {
     doc.getElementById(targetURL.hash.slice(1))?.scrollIntoView();
   }
-  loadPage(deprecatedKeys, newBreakpoints);
 };
 window.onpopstate = async (event) => {
   event.preventDefault();

package/dist/client/watcher.mjs

@@ -1,7 +1,8 @@
 // src/client/watcher.ts
 var eventSource = new EventSource(`http://localhost:${watchServerPort}/events`);
+eventSource.onerror = async () => {
+};
 eventSource.onmessage = async (event) => {
-  console.log(`hot-reload, command received: ${event.data}`);
   if (event.data === "reload") {
     for (const cleanupProcedure of cleanupProcedures) {
       cleanupProcedure.cleanupFunction();

package/dist/compile_docs.mjs

@@ -269,21 +269,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head2.constructor.name === "AsyncFunction") {
-    builtHead = await head2(StartTemplate);
+    builtHead = await head2();
   } else {
-    builtHead = head2(StartTemplate);
+    builtHead = head2();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 
 // src/server/createState.ts

package/dist/components/Breakpoint.mjs

@@ -1,5 +1,9 @@
 // src/components/Breakpoint.ts
 var Breakpoint = (options, ...children) => {
+  process.emitWarning(
+    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
   const id = options.id;
   delete options.id;

package/dist/docs/docs/basics/page.mjs

@@ -15,6 +15,10 @@ var PageHeading = (title2, id) => h2({
 
 // src/components/Breakpoint.ts
 var Breakpoint = (options, ...children) => {
+  process.emitWarning(
+    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
   const id = options.id;
   delete options.id;
@@ -507,6 +511,10 @@ var CodeBlock = (value, parse = true) => div(
 // src/server/layout.ts
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 var createLayout = (name) => {
+  process.emitWarning(
+    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
   if (layouts.has(name)) return layouts.get(name);
   const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;

package/dist/docs/docs/components/DocsLayout.mjs

@@ -1,5 +1,9 @@
 // src/components/Breakpoint.ts
 var Breakpoint = (options, ...children) => {
+  process.emitWarning(
+    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
   const id = options.id;
   delete options.id;
@@ -310,6 +314,10 @@ var Toast = (bind) => {
 // src/server/layout.ts
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 var createLayout = (name) => {
+  process.emitWarning(
+    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
   if (layouts.has(name)) return layouts.get(name);
   const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;

package/dist/docs/docs/concepts/page.mjs

@@ -438,6 +438,10 @@ var CodeBlock = (value, parse = true) => div(
 
 // src/components/Breakpoint.ts
 var Breakpoint = (options, ...children) => {
+  process.emitWarning(
+    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
   const id = options.id;
   delete options.id;
@@ -500,6 +504,10 @@ var Header = () => header(
 // src/server/layout.ts
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 var createLayout = (name) => {
+  process.emitWarning(
+    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
   if (layouts.has(name)) return layouts.get(name);
   const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;

package/dist/docs/docs/page-files/page.mjs

@@ -438,6 +438,10 @@ var CodeBlock = (value, parse = true) => div(
 
 // src/components/Breakpoint.ts
 var Breakpoint = (options, ...children) => {
+  process.emitWarning(
+    "Function Breakpoint() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   if (options.id === void 0) throw `Breakpoints must set a name attribute.`;
   const id = options.id;
   delete options.id;
@@ -500,6 +504,10 @@ var Header = () => header(
 // src/server/layout.ts
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 var createLayout = (name) => {
+  process.emitWarning(
+    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
   if (layouts.has(name)) return layouts.get(name);
   const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;

package/dist/dynamic_page.mjs

@@ -223,21 +223,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head2.constructor.name === "AsyncFunction") {
-    builtHead = await head2(StartTemplate);
+    builtHead = await head2();
   } else {
-    builtHead = head2(StartTemplate);
+    builtHead = head2();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 
 // src/server/createState.ts

package/dist/global.d.ts

@@ -28,7 +28,8 @@ declare global {
         options: Record<string, any> | Child;
     };
     type Page = (AnyBuiltElement) | (() => AnyBuiltElement) | (() => Promise<AnyBuiltElement>);
-    type Metadata = ((...children: Child[]) => (AnyBuiltElement)) | ((...children: Child[]) => Promise<AnyBuiltElement>);
+    type Layout = ((child: Child) => (AnyBuiltElement | Promise<AnyBuiltElement>));
+    type Metadata = (() => (AnyBuiltElement)) | (() => Promise<AnyBuiltElement>);
     type ObjectAttribute<T> = T extends ObjectAttributeType.STATE ? {
         type: ObjectAttributeType;
         id: string | number;
@@ -267,7 +268,10 @@ declare global {
         onTransitionEnd?: EleganceEventListener;
         onToggle?: EleganceEventListener;
     }
+    /** Generated client-page data. Contains things like loadHooks, state, etc. */
     var pd: Record<string, any>;
+    /** Generated layout-data. Contains things like loadHooks, state, etc.*/
+    var ld: Record<string, any>;
     var client: {
         navigateLocally: (target: string, pushState?: boolean) => any;
         fetchPage: (targetURL: URL) => Promise<Document | void>;

package/dist/page_compiler.mjs

@@ -223,21 +223,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head2.constructor.name === "AsyncFunction") {
-    builtHead = await head2(StartTemplate);
+    builtHead = await head2();
   } else {
-    builtHead = head2(StartTemplate);
+    builtHead = head2();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 
 // src/server/createState.ts
@@ -318,9 +320,7 @@ var getProjectFiles = (pagesDirectory) => {
   for (const subdirectory of subdirectories) {
     const absoluteDirectoryPath = path.join(pagesDirectory, subdirectory);
     const subdirectoryFiles = fs.readdirSync(absoluteDirectoryPath, { withFileTypes: true }).filter((f) => f.name.endsWith(".ts"));
-    for (const file of subdirectoryFiles) {
-      files.push(file);
-    }
+    files.push(...subdirectoryFiles);
   }
   return files;
 };
@@ -518,26 +518,27 @@ ${trace}`);
     }
   }
 };
-var generateSuitablePageElements = async (pageLocation, pageElements, metadata, DIST_DIR2, pageName, doWrite = true, requiredClientModules = []) => {
+var pageToHTML = async (pageLocation, pageElements, metadata, DIST_DIR2, pageName, doWrite = true, requiredClientModules = [], layout) => {
   if (typeof pageElements === "string" || typeof pageElements === "boolean" || typeof pageElements === "number" || Array.isArray(pageElements)) {
-    return [];
+    throw new Error(`The root element of a page / layout must be a built element, not just a Child. Received: ${typeof pageElements}.`);
   }
   const objectAttributes = [];
   const stack = [];
   const processedPageElements = processPageElements(pageElements, objectAttributes, 0, stack);
-  elementKey = 0;
   const renderedPage = await serverSideRenderPage(
     processedPageElements,
     pageLocation
   );
-  const template = await generateHTMLTemplate({
+  const { internals, builtMetadata } = await generateHTMLTemplate({
     pageURL: path.relative(DIST_DIR2, pageLocation),
     head: metadata,
     addPageScriptTag: true,
     name: pageName,
     requiredClientModules
   });
-  const resultHTML = `<!DOCTYPE html>${template}${renderedPage.bodyHTML}`;
+  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 resultHTML = `${headHTML}${bodyHTML}`;
   const htmlLocation = path.join(pageLocation, (pageName === "page" ? "index" : pageName) + ".html");
   if (doWrite) {
     fs.writeFileSync(
@@ -556,15 +557,14 @@ var generateSuitablePageElements = async (pageLocation, pageElements, metadata,
     };
   }
 };
-var generateClientPageData = async (pageLocation, state, objectAttributes, pageLoadHooks, DIST_DIR2, pageName) => {
+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}`}";`;
   {
     clientPageJSText += `export const data = {`;
     if (state) {
-      const nonBoundState = state.filter((subj) => subj.bind === void 0);
       clientPageJSText += `state:[`;
-      for (const subject of nonBoundState) {
+      for (const subject of state) {
         if (typeof subject.value === "string") {
           const stringified = JSON.stringify(subject.value);
           clientPageJSText += `{id:${subject.id},value:${stringified}},`;
@@ -575,34 +575,6 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
         }
       }
       clientPageJSText += `],`;
-      const formattedBoundState = {};
-      const stateBinds = state.map((subj) => subj.bind).filter((bind) => bind !== void 0);
-      for (const bind of stateBinds) {
-        formattedBoundState[bind] = [];
-      }
-      ;
-      const boundState = state.filter((subj) => subj.bind !== void 0);
-      for (const subject of boundState) {
-        const bindingState = formattedBoundState[subject.bind];
-        delete subject.bind;
-        bindingState.push(subject);
-      }
-      const bindSubjectPairing = Object.entries(formattedBoundState);
-      if (bindSubjectPairing.length > 0) {
-        clientPageJSText += "binds:{";
-        for (const [bind, subjects] of bindSubjectPairing) {
-          clientPageJSText += `${bind}:[`;
-          for (const subject of subjects) {
-            if (typeof subject.value === "string") {
-              clientPageJSText += `{id:${subject.id},value:${JSON.stringify(subject.value)}},`;
-            } else {
-              clientPageJSText += `{id:${subject.id},value:${JSON.stringify(subject.value)}},`;
-            }
-          }
-          clientPageJSText += "]";
-        }
-        clientPageJSText += "},";
-      }
     }
     const stateObjectAttributes = objectAttributes.filter((oa) => oa.type === 1 /* STATE */);
     if (stateObjectAttributes.length > 0) {
@@ -620,9 +592,7 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
         observerObjectAttributeString += `{key:${ooa.key},attribute:"${ooa.attribute}",update:${ooa.update.toString()},`;
         observerObjectAttributeString += `refs:[`;
         for (const ref of ooa.refs) {
-          observerObjectAttributeString += `{id:${ref.id}`;
-          if (ref.bind !== void 0) observerObjectAttributeString += `,bind:${ref.bind}`;
-          observerObjectAttributeString += "},";
+          observerObjectAttributeString += `{id:${ref.id}},`;
         }
         observerObjectAttributeString += "]},";
       }
@@ -632,14 +602,13 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
     if (pageLoadHooks.length > 0) {
       clientPageJSText += "lh:[";
       for (const loadHook of pageLoadHooks) {
-        const key = loadHook.bind;
-        clientPageJSText += `{fn:${loadHook.fn},bind:"${key || ""}"},`;
+        clientPageJSText += `{fn:${loadHook.fn}},`;
       }
       clientPageJSText += "],";
     }
     clientPageJSText += `};`;
   }
-  clientPageJSText += "if(!globalThis.pd) { globalThis.pd = {}; globalThis.pd[url] = data}";
+  clientPageJSText += `if(!globalThis.${globalVariableName}) { globalThis.${globalVariableName} = {}; }; globalThis.${globalVariableName}[url] = data;`;
   const pageDataPath = path.join(pageLocation, `${pageName}_data.js`);
   let sendHardReloadInstruction = false;
   const transformedResult = await esbuild.transform(clientPageJSText, { minify: options.environment === "production" }).catch((error) => {
@@ -655,6 +624,175 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
   fs.writeFileSync(pageDataPath, transformedResult.code, "utf-8");
   return { sendHardReloadInstruction };
 };
+var generateLayout = async (DIST_DIR2, filePath, childIndicator) => {
+  const directory = path.dirname(filePath);
+  initializeState();
+  initializeObjectAttributes();
+  resetLoadHooks();
+  globalThis.__SERVER_PAGE_DATA_BANNER__ = "";
+  let layoutElements;
+  let metadataElements;
+  let modules = [];
+  try {
+    const {
+      layout,
+      metadata,
+      isDynamic,
+      requiredClientModules
+    } = await import("file://" + filePath);
+    if (requiredClientModules !== void 0) {
+      modules = requiredClientModules;
+    }
+    layoutElements = layout;
+    metadataElements = metadata;
+    if (isDynamic === true) {
+      const result = await esbuild.build({
+        entryPoints: [filePath],
+        bundle: false,
+        format: "iife",
+        globalName: "__exports",
+        write: false,
+        platform: "node",
+        plugins: [externalPackagesPlugin]
+      });
+      let iifeCode = result.outputFiles[0].text;
+      iifeCode = iifeCode.replace(/^var __exports = /, "");
+      const wrappedCode = `import { createRequire } from 'module'; const require = createRequire(import.meta.url);
+
+export function construct() {
+  ${iifeCode} 
+return __exports
+}`;
+      fs.writeFileSync(filePath, wrappedCode);
+      return { pageContentHTML: "", metadataHTML: "" };
+    }
+    fs.rmSync(filePath, { force: true });
+  } catch (e) {
+    throw new Error(`Error in Page: ${directory === "" ? "/" : directory}layout.mjs - ${e}`);
+  }
+  {
+    if (!layoutElements) {
+      throw new Error(`WARNING: ${filePath} should export a const layout, which is of type (child: Child) => AnyBuiltElement.`);
+    }
+    if (typeof layoutElements === "function") {
+      if (layoutElements.constructor.name === "AsyncFunction") {
+        layoutElements = await layoutElements(childIndicator);
+      } else {
+        layoutElements = layoutElements(childIndicator);
+      }
+    }
+  }
+  {
+    if (!metadataElements) {
+      throw new Error(`WARNING: ${filePath} should export a const layout, which is of type (child: Child) => AnyBuiltElement.`);
+    }
+    if (typeof metadataElements === "function") {
+      if (metadataElements.constructor.name === "AsyncFunction") {
+        metadataElements = await metadataElements(childIndicator);
+      } else {
+        metadataElements = metadataElements(childIndicator);
+      }
+    }
+  }
+  const state = getState();
+  const pageLoadHooks = getLoadHooks();
+  const objectAttributes = getObjectAttributes();
+  if (typeof layoutElements === "string" || typeof layoutElements === "boolean" || typeof layoutElements === "number" || Array.isArray(layoutElements)) {
+    throw new Error(`The root element of a page / layout must be a built element, not just a Child. Received: ${typeof layoutElements}.`);
+  }
+  const foundObjectAttributes = [];
+  const stack = [];
+  const processedPageElements = processPageElements(layoutElements, foundObjectAttributes, 0, stack);
+  const renderedPage = await serverSideRenderPage(
+    processedPageElements,
+    path.dirname(filePath)
+  );
+  const metadataHTML = metadataElements ? renderRecursively(metadataElements) : "";
+  await generateClientPageData(
+    path.dirname(filePath),
+    state || {},
+    [...objectAttributes, ...foundObjectAttributes],
+    pageLoadHooks || [],
+    DIST_DIR2,
+    "layout",
+    "ld"
+  );
+  return { pageContentHTML: renderedPage.bodyHTML, metadataHTML };
+};
+var builtLayouts = /* @__PURE__ */ new Map();
+var buildLayout = async (filePath) => {
+  const storedState = globalThis.__SERVER_CURRENT_STATE__;
+  const storedObjectAttributes = globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__;
+  const storedLoadHooks = globalThis.__SERVER_CURRENT_LOADHOOKS__;
+  const storedPageDataBanner = globalThis.__SERVER_PAGE_DATA_BANNER__;
+  const id = globalThis.__SERVER_CURRENT_STATE_ID__ += 1;
+  const childIndicator = `<template layout-id="${id}"></template>`;
+  const { pageContentHTML, metadataHTML } = await generateLayout(
+    DIST_DIR,
+    filePath,
+    childIndicator
+  );
+  const splitAround = (str, sub) => {
+    const i = str.indexOf(sub);
+    if (i === -1) throw new Error("substring does not exist in parent string");
+    return {
+      startHTML: str.substring(0, i),
+      endHTML: str.substring(i + sub.length)
+    };
+  };
+  const splitAt = (str, sub) => {
+    const i = str.indexOf(sub) + sub.length;
+    if (i === -1) throw new Error("substring does not exist in parent string");
+    return {
+      startHTML: str.substring(0, i),
+      endHTML: str.substring(i)
+    };
+  };
+  const pageURL = path.relative(DIST_DIR, path.dirname(filePath));
+  globalThis.__SERVER_CURRENT_STATE__ = storedState;
+  globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__ = storedObjectAttributes;
+  globalThis.__SERVER_CURRENT_LOADHOOKS__ = storedLoadHooks;
+  globalThis.__SERVER_PAGE_DATA_BANNER__ = storedPageDataBanner;
+  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>`
+  };
+};
+var fetchPageLayoutHTML = async (dirname) => {
+  const relative = path.relative(DIST_DIR, dirname);
+  let split = relative.split(path.sep).filter(Boolean);
+  split.push("/");
+  split.reverse();
+  let layouts = [];
+  for (const dir of split) {
+    const filePath = path.resolve(path.join(DIST_DIR, dir, "layout.mjs"));
+    if (builtLayouts.has(filePath)) {
+      layouts.push(builtLayouts.get(filePath));
+    } else if (fs.existsSync(filePath)) {
+      const built = await buildLayout(filePath);
+      builtLayouts.set(filePath, built);
+      layouts.push(built);
+    }
+  }
+  const pageContent = {
+    startHTML: "",
+    endHTML: ""
+  };
+  const metadata = {
+    startHTML: "",
+    endHTML: ""
+  };
+  let scriptTags = "";
+  for (const layout of layouts) {
+    pageContent.startHTML += layout.pageContent.startHTML;
+    metadata.startHTML += layout.metadata.startHTML;
+    scriptTags += layout.scriptTag;
+    pageContent.endHTML += layout.pageContent.endHTML;
+    metadata.endHTML += layout.metadata.endHTML;
+  }
+  return { pageContent, metadata, scriptTag: scriptTags };
+};
 var buildPages = async (DIST_DIR2) => {
   resetLayouts();
   const subdirectories = [...getAllSubdirectories(DIST_DIR2), ""];
@@ -692,16 +830,21 @@ var buildPage = async (DIST_DIR2, directory, filePath, name) => {
   let pageElements;
   let metadata;
   let modules = [];
+  let pageIgnoresLayout = false;
   try {
     const {
       page,
       metadata: pageMetadata,
       isDynamicPage,
-      requiredClientModules
+      requiredClientModules,
+      ignoreLayout
     } = await import("file://" + filePath);
     if (requiredClientModules !== void 0) {
       modules = requiredClientModules;
     }
+    if (ignoreLayout) {
+      pageIgnoresLayout = true;
+    }
     pageElements = page;
     metadata = pageMetadata;
     if (isDynamicPage === true) {
@@ -745,14 +888,16 @@ return __exports
   const state = getState();
   const pageLoadHooks = getLoadHooks();
   const objectAttributes = getObjectAttributes();
-  const foundObjectAttributes = await generateSuitablePageElements(
+  const layout = await fetchPageLayoutHTML(path.dirname(filePath));
+  const foundObjectAttributes = await pageToHTML(
     path.dirname(filePath),
     pageElements || body(),
     metadata ?? (() => head()),
     DIST_DIR2,
     name,
     true,
-    modules
+    modules,
+    layout
   );
   const {
     sendHardReloadInstruction
@@ -920,13 +1065,14 @@ var build = async () => {
           minify: true,
           treeShaking: true
         });
-        log("Built a client module.");
       }
     }
     const pagesTranspiled = performance.now();
-    const {
-      shouldClientHardReload
-    } = await buildPages(DIST_DIR);
+    let shouldClientHardReload;
+    {
+      const { shouldClientHardReload: doReload } = await buildPages(DIST_DIR);
+      if (doReload) shouldClientHardReload = true;
+    }
     const pagesBuilt = performance.now();
     await buildClient(DIST_DIR);
     const end = performance.now();

package/dist/server/generateHTMLTemplate.d.ts

@@ -5,4 +5,7 @@ export declare const generateHTMLTemplate: ({ pageURL, head, serverData, addPage
     serverData?: string | null;
     name: string;
     requiredClientModules: string[];
-}) => Promise<string>;
+}) => Promise<{
+    internals: string;
+    builtMetadata: string;
+}>;

package/dist/server/generateHTMLTemplate.mjs

@@ -205,21 +205,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head.constructor.name === "AsyncFunction") {
-    builtHead = await head(StartTemplate);
+    builtHead = await head();
   } else {
-    builtHead = head(StartTemplate);
+    builtHead = head();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 export {
   generateHTMLTemplate

package/dist/server/layout.mjs

@@ -3,6 +3,10 @@ var resetLayouts = () => globalThis.__SERVER_CURRENT_LAYOUTS__ = /* @__PURE__ */
 var getLayouts = () => globalThis.__SERVER_CURRENT_LAYOUTS__;
 if (!globalThis.__SERVER_CURRENT_LAYOUT_ID__) globalThis.__SERVER_CURRENT_LAYOUT_ID__ = 1;
 var createLayout = (name) => {
+  process.emitWarning(
+    "Function createLayout() is deprecated. Prefer layout.ts files instead.",
+    { type: "DeprecationWarning" }
+  );
   const layouts = globalThis.__SERVER_CURRENT_LAYOUTS__;
   if (layouts.has(name)) return layouts.get(name);
   const id = globalThis.__SERVER_CURRENT_LAYOUT_ID__ += 1;

package/dist/server/server.mjs

@@ -223,21 +223,23 @@ var generateHTMLTemplate = async ({
     StartTemplate += `<script data-module="true" src="/shipped/${module}.js" defer="true"></script>`;
   }
   if (addPageScriptTag === true) {
-    StartTemplate += `<script data-tag="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
+    StartTemplate += `<script data-page="true" type="module" src="${pageURL === "" ? "" : "/"}${pageURL}/${name}_data.js" defer="true"></script>`;
   }
   StartTemplate += `<script type="module" src="/client.js" defer="true"></script>`;
   let builtHead;
   if (head2.constructor.name === "AsyncFunction") {
-    builtHead = await head2(StartTemplate);
+    builtHead = await head2();
   } else {
-    builtHead = head2(StartTemplate);
+    builtHead = head2();
   }
   let HTMLTemplate = renderRecursively(builtHead);
   if (serverData) {
     HTMLTemplate += serverData;
   }
-  HTMLTemplate += "";
-  return HTMLTemplate;
+  return {
+    internals: StartTemplate,
+    builtMetadata: HTMLTemplate
+  };
 };
 
 // src/server/createState.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elegance-js",
-  "version": "1.15.2",
+  "version": "1.17.0",
   "description": "Web-Framework",
   "type": "module",
   "bin": {
@@ -13,7 +13,7 @@
     "build": "esbuild --format=esm --platform=node --bundle --outdir=./dist --platform=node --external:esbuild --out-extension:.js=.mjs \"./src/**/*.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 && node ./dist/compile_docs.mjs --environment=production"
+    "prepare": "npm run build"
   },
   "exports": {
     ".": {

package/scripts/bootstrap.js

@@ -299,13 +299,14 @@ const tsconfigContent = JSON.stringify({
     esModuleInterop: true,
     forceConsistentCasingInFileNames: true,
     skipLibCheck: true,
+    paths: {
+        "@/": ["./"],
+    }
+
   },
   include: ["pages/**/*", "env.d.ts"],
   exclude: ["node_modules"],
-  paths: {
-    "@/": ["./"],
-  }
-}, null, 2);
+}, null, 4);
 
 const indexCssContent = `
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');