elegance-js 1.2.3 → 1.4.0

package/dist/build.d.ts

@@ -1,3 +1,4 @@
+export declare const processPageElements: (element: Child, objectAttributes: Array<any>, parent: Child) => Child;
 type CompilationOptions = {
     postCompile?: () => any;
     preCompile?: () => any;

package/dist/build.mjs

@@ -248,6 +248,10 @@ var initializeState = () => globalThis.__SERVER_CURRENT_STATE__ = [];
 var getState = () => {
   return globalThis.__SERVER_CURRENT_STATE__;
 };
+var initializeObjectAttributes = () => globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__ = [];
+var getObjectAttributes = () => {
+  return globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__;
+};
 
 // src/server/loadHook.ts
 var resetLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__ = [];
@@ -770,7 +774,7 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
   clientPageJSText += "if(!globalThis.pd) { globalThis.pd = {}; globalThis.pd[url] = data}";
   const pageDataPath = path.join(pageLocation, `${pageName}_data.js`);
   let sendHardReloadInstruction = false;
-  const transformedResult = await esbuild.transform(clientPageJSText, { minify: true }).catch((error) => {
+  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 };
@@ -797,6 +801,7 @@ var buildPages = async (DIST_DIR) => {
       }
       fs2.rmSync(filePath, { force: true });
       initializeState();
+      initializeObjectAttributes();
       resetLoadHooks();
       let pageElements;
       let metadata;
@@ -809,7 +814,7 @@ var buildPages = async (DIST_DIR) => {
         metadata = pageMetadata;
       } catch (e) {
         fs2.rmSync(tempPath, { force: true });
-        throw `Error in Page: ${directory === "" ? "/" : directory}${file.name} - ${e}`;
+        throw new Error(`Error in Page: ${directory === "" ? "/" : directory}${file.name} - ${e}`);
       }
       fs2.rmSync(tempPath, { force: true });
       if (!metadata || metadata && typeof metadata !== "function") {
@@ -823,7 +828,8 @@ var buildPages = async (DIST_DIR) => {
       }
       const state = getState();
       const pageLoadHooks = getLoadHooks();
-      const objectAttributes = await generateSuitablePageElements(
+      const objectAttributes = getObjectAttributes();
+      const foundObjectAttributes = await generateSuitablePageElements(
         file.parentPath,
         pageElements || body(),
         metadata ?? (() => head()),
@@ -835,7 +841,7 @@ var buildPages = async (DIST_DIR) => {
       } = await generateClientPageData(
         file.parentPath,
         state || {},
-        objectAttributes,
+        [...objectAttributes, ...foundObjectAttributes],
         pageLoadHooks || [],
         DIST_DIR,
         name
@@ -937,7 +943,12 @@ var build = async (DIST_DIR) => {
         keepNames: false,
         banner: {
           js: "//__ELEGANCE_JS_PAGE_MARKER__"
-        }
+        },
+        define: {
+          "DEV": options.environment === "development" ? "true" : "false",
+          "PROD": options.environment === "development" ? "false" : "true"
+        },
+        external: ["fs"]
       });
       await esbuild.build({
         entryPoints: [
@@ -954,7 +965,11 @@ var build = async (DIST_DIR) => {
         },
         format: "esm",
         platform: "node",
-        keepNames: false
+        keepNames: false,
+        define: {
+          "DEV": options.environment === "development" ? "true" : "false",
+          "PROD": options.environment === "development" ? "false" : "true"
+        }
       });
     }
     const pagesTranspiled = performance.now();
@@ -1067,5 +1082,6 @@ var compile = async (props) => {
   if (!success) return;
 };
 export {
-  compile
+  compile,
+  processPageElements
 };

package/dist/client/client.d.ts

@@ -1 +1 @@
-export {};
+import "../shared/bindServerElements";

package/dist/client/client.mjs

@@ -1,6 +1,183 @@
+// 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"
+];
+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..");
 if (!globalThis.pd) globalThis.pd = {};
+Object.assign(window, {
+  observe: (subjects, updateCallback) => {
+    return {
+      subjects,
+      updateCallback,
+      isAttribute: true
+    };
+  },
+  /*
+  observe: (subjects: ClientSubject[], updateCallback: () => any) => {
+      const pageData = pd[currentPage];
+      
+      const keys = [];
+      
+      for (const subject of subjects) {
+          const key = subject.id + Date.now();
+          
+          keys.push({
+              key: key,
+              subject: subject.id,
+          });
+          
+          pageData.stateManager.observe(subject, updateCallback, key);
+      }
+      
+      return { keys }
+  },
+  */
+  eventListener: () => {
+  }
+});
 var domParser = new DOMParser();
 var xmlSerializer = new XMLSerializer();
 var pageStringCache = /* @__PURE__ */ new Map();
@@ -32,6 +209,9 @@ var createStateManager = (subjects) => {
       };
       return s;
     }),
+    destroy: (s) => {
+      state.subjects.splice(state.subjects.indexOf(s), 1);
+    },
     get: (id, bind) => {
       if (bind) {
         return pd[bind].get(id);
@@ -47,6 +227,9 @@ var createStateManager = (subjects) => {
     observe: (subject, observer, key) => {
       subject.observers.delete(key);
       subject.observers.set(key, observer);
+    },
+    unobserve: (subject, key) => {
+      subject.observers.delete(key);
     }
   };
   return state;
@@ -55,6 +238,7 @@ 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) {
@@ -91,7 +275,7 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
     subject.observers = /* @__PURE__ */ new Map();
   }
   for (const ooa of pageData.ooa || []) {
-    const el = doc.querySelector(`[key="${ooa.key}"]`);
+    const els = doc.querySelectorAll(`[key="${ooa.key}"]`);
     let values = {};
     for (const { id, bind } of ooa.refs) {
       const subject = state.get(id, bind);
@@ -101,7 +285,9 @@ var loadPage = (deprecatedKeys = [], newBreakpoints) => {
         try {
           const newValue = ooa.update(...Object.values(values));
           let attribute = ooa.attribute === "class" ? "className" : ooa.attribute;
-          el[attribute] = newValue;
+          for (const el of Array.from(els)) {
+            el[attribute] = newValue;
+          }
         } catch (e) {
           console.error(e);
           return;

package/dist/client/processPageElements.d.ts

@@ -0,0 +1 @@
+export declare const processPageElements: (element: Child, objectAttributes: Array<any>, parent: Child) => Child;

package/dist/client/processPageElements.mjs

@@ -0,0 +1,117 @@
+// src/client/processPageElements.ts
+var elementKey = 0;
+var processOptionAsObjectAttribute = (element, optionName, optionValue, objectAttributes) => {
+  const lcOptionName = optionName.toLowerCase();
+  const options = element.options;
+  let key = options.key;
+  if (key == void 0) {
+    elementKey -= 1;
+    key = elementKey;
+    options.key = key;
+  }
+  if (!optionValue.type) {
+    throw `ObjectAttributeType is missing from object attribute. ${element.tag}: ${optionName}/${optionValue}`;
+  }
+  let optionFinal = lcOptionName;
+  switch (optionValue.type) {
+    case 1 /* STATE */:
+      const SOA = optionValue;
+      if (typeof SOA.value === "function") {
+        delete options[optionName];
+        break;
+      }
+      if (lcOptionName === "innertext" || lcOptionName === "innerhtml") {
+        element.children = [SOA.value];
+        delete options[optionName];
+      } else {
+        delete options[optionName];
+        options[lcOptionName] = SOA.value;
+      }
+      break;
+    case 2 /* OBSERVER */:
+      const OOA = optionValue;
+      const firstValue = OOA.update(...OOA.initialValues);
+      if (lcOptionName === "innertext" || lcOptionName === "innerhtml") {
+        element.children = [firstValue];
+        delete options[optionName];
+      } else {
+        delete options[optionName];
+        options[lcOptionName] = firstValue;
+      }
+      optionFinal = optionName;
+      break;
+    case 4 /* REFERENCE */:
+      options["ref"] = optionValue.value;
+      break;
+  }
+  objectAttributes.push({ ...optionValue, key, attribute: optionFinal });
+};
+var processPageElements = (element, objectAttributes, parent) => {
+  if (typeof element === "boolean" || typeof element === "number" || Array.isArray(element)) return element;
+  if (typeof element === "string") {
+    return element;
+  }
+  const processElementOptionsAsChildAndReturn = () => {
+    const children = element.children;
+    element.children = [
+      element.options,
+      ...children
+    ];
+    element.options = {};
+    for (let i = 0; i < children.length + 1; i++) {
+      const child = element.children[i];
+      const processedChild = processPageElements(child, objectAttributes, element);
+      element.children[i] = processedChild;
+    }
+    return {
+      ...element,
+      options: {}
+    };
+  };
+  if (typeof element.options !== "object") {
+    return processElementOptionsAsChildAndReturn();
+  }
+  const {
+    tag: elementTag,
+    options: elementOptions,
+    children: elementChildren
+  } = element.options;
+  if (elementTag && elementOptions && elementChildren) {
+    return processElementOptionsAsChildAndReturn();
+  }
+  const options = element.options;
+  for (const [optionName, optionValue] of Object.entries(options)) {
+    const lcOptionName = optionName.toLowerCase();
+    if (typeof optionValue !== "object") {
+      if (lcOptionName === "innertext") {
+        delete options[optionName];
+        if (element.children === null) {
+          throw `Cannot use innerText or innerHTML on childrenless elements.`;
+        }
+        element.children = [optionValue, ...element.children];
+        continue;
+      } else if (lcOptionName === "innerhtml") {
+        if (element.children === null) {
+          throw `Cannot use innerText or innerHTML on childrenless elements.`;
+        }
+        delete options[optionName];
+        element.children = [optionValue];
+        continue;
+      }
+      continue;
+    }
+    ;
+    processOptionAsObjectAttribute(element, optionName, optionValue, objectAttributes);
+  }
+  if (element.children) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children[i];
+      const processedChild = processPageElements(child, objectAttributes, element);
+      element.children[i] = processedChild;
+    }
+  }
+  return element;
+};
+export {
+  processPageElements
+};

package/dist/client/render.d.ts

@@ -0,0 +1 @@
+export declare const renderRecursively: (element: Child) => HTMLElement | DocumentFragment | Text | null;

package/dist/client/render.mjs

@@ -0,0 +1,41 @@
+// src/client/render.ts
+var renderRecursively = (element) => {
+  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);
+      if (childNode) fragment.appendChild(childNode);
+    });
+    return fragment;
+  }
+  const domElement = document.createElement(element.tag);
+  if (typeof element.options === "object" && element.options !== null) {
+    for (const [attrName, attrValue] of Object.entries(element.options)) {
+      if (typeof attrValue === "object") {
+        throw new Error(`Attr ${attrName} for element ${element.tag} has object type. Got: ${JSON.stringify(element)}`);
+      }
+      domElement.setAttribute(attrName.toLowerCase(), attrValue);
+    }
+  }
+  if (element.children !== null) {
+    if (Array.isArray(element.children)) {
+      element.children.forEach((child) => {
+        const childNode = renderRecursively(child);
+        if (childNode) domElement.appendChild(childNode);
+      });
+    } else {
+      const childNode = renderRecursively(element.children);
+      if (childNode) domElement.appendChild(childNode);
+    }
+  }
+  return domElement;
+};
+export {
+  renderRecursively
+};

package/dist/compile_docs.mjs

@@ -251,6 +251,10 @@ var initializeState = () => globalThis.__SERVER_CURRENT_STATE__ = [];
 var getState = () => {
   return globalThis.__SERVER_CURRENT_STATE__;
 };
+var initializeObjectAttributes = () => globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__ = [];
+var getObjectAttributes = () => {
+  return globalThis.__SERVER_CURRENT_OBJECT_ATTRIBUTES__;
+};
 
 // src/server/loadHook.ts
 var resetLoadHooks = () => globalThis.__SERVER_CURRENT_LOADHOOKS__ = [];
@@ -773,7 +777,7 @@ var generateClientPageData = async (pageLocation, state, objectAttributes, pageL
   clientPageJSText += "if(!globalThis.pd) { globalThis.pd = {}; globalThis.pd[url] = data}";
   const pageDataPath = path.join(pageLocation, `${pageName}_data.js`);
   let sendHardReloadInstruction = false;
-  const transformedResult = await esbuild.transform(clientPageJSText, { minify: true }).catch((error) => {
+  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 };
@@ -800,6 +804,7 @@ var buildPages = async (DIST_DIR) => {
       }
       fs2.rmSync(filePath, { force: true });
       initializeState();
+      initializeObjectAttributes();
       resetLoadHooks();
       let pageElements;
       let metadata;
@@ -812,7 +817,7 @@ var buildPages = async (DIST_DIR) => {
         metadata = pageMetadata;
       } catch (e) {
         fs2.rmSync(tempPath, { force: true });
-        throw `Error in Page: ${directory === "" ? "/" : directory}${file.name} - ${e}`;
+        throw new Error(`Error in Page: ${directory === "" ? "/" : directory}${file.name} - ${e}`);
       }
       fs2.rmSync(tempPath, { force: true });
       if (!metadata || metadata && typeof metadata !== "function") {
@@ -826,7 +831,8 @@ var buildPages = async (DIST_DIR) => {
       }
       const state = getState();
       const pageLoadHooks = getLoadHooks();
-      const objectAttributes = await generateSuitablePageElements(
+      const objectAttributes = getObjectAttributes();
+      const foundObjectAttributes = await generateSuitablePageElements(
         file.parentPath,
         pageElements || body(),
         metadata ?? (() => head()),
@@ -838,7 +844,7 @@ var buildPages = async (DIST_DIR) => {
       } = await generateClientPageData(
         file.parentPath,
         state || {},
-        objectAttributes,
+        [...objectAttributes, ...foundObjectAttributes],
         pageLoadHooks || [],
         DIST_DIR,
         name
@@ -940,7 +946,12 @@ var build = async (DIST_DIR) => {
         keepNames: false,
         banner: {
           js: "//__ELEGANCE_JS_PAGE_MARKER__"
-        }
+        },
+        define: {
+          "DEV": options.environment === "development" ? "true" : "false",
+          "PROD": options.environment === "development" ? "false" : "true"
+        },
+        external: ["fs"]
       });
       await esbuild.build({
         entryPoints: [
@@ -957,7 +968,11 @@ var build = async (DIST_DIR) => {
         },
         format: "esm",
         platform: "node",
-        keepNames: false
+        keepNames: false,
+        define: {
+          "DEV": options.environment === "development" ? "true" : "false",
+          "PROD": options.environment === "development" ? "false" : "true"
+        }
       });
     }
     const pagesTranspiled = performance.now();

package/dist/components/Link.mjs

@@ -1,3 +1,9 @@
+// src/internal/deprecate.ts
+var ShowDeprecationWarning = (msg) => {
+  console.warn("\x1B[31m", msg);
+  console.trace("Stack Trace:");
+};
+
 // src/server/createState.ts
 if (!globalThis.__SERVER_CURRENT_STATE_ID__) {
   globalThis.__SERVER_CURRENT_STATE_ID__ = 0;
@@ -8,6 +14,7 @@ var createEventListener = ({
   dependencies = [],
   params
 }) => {
+  ShowDeprecationWarning("WARNING: The createEventListener() and function is deprecated. Please use eventListener() instead, from elegance-js/state.");
   const deps = dependencies.map((dep) => ({ id: dep.id, bind: dep.bind }));
   let dependencyString = "[";
   for (const dep of deps) {
@@ -31,6 +38,7 @@ var createEventListener = ({
 
 // src/server/loadHook.ts
 var createLoadHook = (options) => {
+  ShowDeprecationWarning("WARNING: createLoadHook() is a deprecated function. Use loadHook() from elegance-js/loadHook instead.");
   const stringFn = options.fn.toString();
   const deps = (options.deps || []).map((dep) => ({
     id: dep.id,

package/dist/components/List.d.ts

@@ -0,0 +1,18 @@
+import { ObjectAttributeType } from "../helpers/ObjectAttributeType";
+type ClientSubjectGeneric<T> = Omit<ClientSubject, "value"> & {
+    value: T;
+};
+type ServerSubject = {
+    type: ObjectAttributeType;
+    value: unknown;
+    id: number;
+    bind?: string;
+};
+type ListOptions<T extends ServerSubject[]> = {
+    template: (...subjects: {
+        [K in keyof T]: ClientSubjectGeneric<T[K]["value"]>;
+    }) => Child;
+    deps?: [...T];
+};
+declare const List: <T extends ServerSubject[]>(options: ListOptions<T>) => void;
+export { List };

package/dist/components/List.mjs

@@ -0,0 +1,75 @@
+// src/server/loadHook.ts
+var loadHook = (deps, fn, bind) => {
+  const stringFn = fn.toString();
+  const depsArray = (deps || []).map((dep) => ({
+    id: dep.id,
+    bind: dep.bind
+  }));
+  let dependencyString = "[";
+  for (const dep of depsArray) {
+    dependencyString += `{id:${dep.id}`;
+    if (dep.bind) dependencyString += `,bind:${dep.bind}`;
+    dependencyString += `},`;
+  }
+  dependencyString += "]";
+  const isAsync = fn.constructor.name === "AsyncFunction";
+  const wrapperFn = isAsync ? `async (state) => await (${stringFn})(state, ...state.getAll(${dependencyString}))` : `(state) => (${stringFn})(state, ...state.getAll(${dependencyString}))`;
+  globalThis.__SERVER_CURRENT_LOADHOOKS__.push({
+    fn: wrapperFn,
+    bind: bind || ""
+  });
+};
+
+// src/server/state.ts
+if (!globalThis.__SERVER_CURRENT_STATE_ID__) {
+  globalThis.__SERVER_CURRENT_STATE_ID__ = 0;
+}
+var currentId = globalThis.__SERVER_CURRENT_STATE_ID__;
+var state = (value2, options) => {
+  const serverStateEntry = {
+    id: currentId += 1,
+    value: value2,
+    type: 1 /* STATE */,
+    bind: options?.bind
+  };
+  globalThis.__SERVER_CURRENT_STATE__.push(serverStateEntry);
+  if (Array.isArray(value2)) {
+    serverStateEntry.reactiveMap = reactiveMap;
+  }
+  return serverStateEntry;
+};
+var reactiveMap = (template, deps) => {
+  const strVal = template.toString();
+  console.log(strVal);
+  const id = currentId += 1;
+  const subject = void 0;
+  loadHook(
+    [subject],
+    (state2, subject2) => {
+      const el = document.querySelector(`[map-id]=${id}`);
+      if (!el) return;
+      const trackedElement = el.previousSibling;
+      if (!trackedElement) return;
+      state2.observe(subject2, () => {
+        console.log(trackedElement);
+      });
+    }
+  );
+  return div({
+    "map-id": id
+  });
+};
+
+// src/components/List.ts
+var value = state([2, 3, "hi"]);
+var List = (options) => {
+};
+div(
+  value.reactiveMap((item) => div(
+    {},
+    item
+  ))
+);
+export {
+  List
+};