npm - hyperclayjs - Versions diffs - 1.0.0 - Mend

hyperclayjs 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/LICENSE +21 -0
package/README.md +360 -0
package/README.template.md +276 -0
package/communication/behaviorCollector.js +230 -0
package/communication/sendMessage.js +48 -0
package/communication/uploadFile.js +348 -0
package/core/adminContenteditable.js +36 -0
package/core/adminInputs.js +58 -0
package/core/adminOnClick.js +31 -0
package/core/adminResources.js +33 -0
package/core/adminSystem.js +15 -0
package/core/editmode.js +8 -0
package/core/editmodeSystem.js +18 -0
package/core/enablePersistentFormInputValues.js +62 -0
package/core/isAdminOfCurrentResource.js +13 -0
package/core/optionVisibilityRuleGenerator.js +160 -0
package/core/savePage.js +196 -0
package/core/savePageCore.js +236 -0
package/core/setPageTypeOnDocumentElement.js +23 -0
package/custom-attributes/ajaxElements.js +94 -0
package/custom-attributes/autosize.js +17 -0
package/custom-attributes/domHelpers.js +175 -0
package/custom-attributes/events.js +15 -0
package/custom-attributes/inputHelpers.js +11 -0
package/custom-attributes/onclickaway.js +27 -0
package/custom-attributes/onclone.js +35 -0
package/custom-attributes/onpagemutation.js +20 -0
package/custom-attributes/onrender.js +30 -0
package/custom-attributes/preventEnter.js +13 -0
package/custom-attributes/sortable.js +76 -0
package/dom-utilities/All.js +412 -0
package/dom-utilities/getDataFromForm.js +60 -0
package/dom-utilities/insertStyleTag.js +28 -0
package/dom-utilities/onDomReady.js +7 -0
package/dom-utilities/onLoad.js +7 -0
package/hyperclay.js +465 -0
package/module-dependency-graph.json +612 -0
package/package.json +95 -0
package/string-utilities/copy-to-clipboard.js +35 -0
package/string-utilities/emmet-html.js +54 -0
package/string-utilities/query.js +1 -0
package/string-utilities/slugify.js +21 -0
package/ui/info.js +39 -0
package/ui/prompts.js +179 -0
package/ui/theModal.js +677 -0
package/ui/toast.js +273 -0
package/utilities/cookie.js +45 -0
package/utilities/debounce.js +12 -0
package/utilities/mutation.js +403 -0
package/utilities/nearest.js +97 -0
package/utilities/pipe.js +1 -0
package/utilities/throttle.js +21 -0
package/vendor/Sortable.js +3351 -0
package/vendor/idiomorph.min.js +8 -0
package/vendor/tailwind-base.css +1471 -0
package/vendor/tailwind-play.js +169 -0

package/core/savePageCore.js ADDED Viewed

@@ -0,0 +1,236 @@
+/**
+ * Core save functionality for Hyperclay
+ *
+ * This is the minimal save system - just the basic save function you can call yourself.
+ * No toast notifications, no auto-save, no keyboard shortcuts.
+ *
+ * Use this if you want full control over save behavior and notifications.
+ * For the full save system with conveniences, use savePage.js instead.
+ */
+import cookie from "../utilities/cookie.js";
+import { isEditMode } from "./isAdminOfCurrentResource.js";
+let beforeSaveCallbacks = [];
+let saveInProgress = false;
+const saveEndpoint = `/save/${cookie.get("currentResource")}`;
+/**
+ * Register a callback to run before saving
+ * Callbacks receive the cloned document element
+ *
+ * @param {Function} cb - Callback function(docElem)
+ */
+export function beforeSave(cb) {
+  beforeSaveCallbacks.push(cb);
+}
+/**
+ * Get the current page contents as HTML
+ * Handles CodeMirror pages, runs [onbeforesave] attributes, removes [save-ignore] elements
+ *
+ * @returns {string} HTML string of current page
+ */
+export function getPageContents() {
+  const isCodeMirrorPage = !!document.querySelector('.CodeMirror')?.CodeMirror;
+  if (!isCodeMirrorPage) {
+    let docElem = document.documentElement.cloneNode(true);
+    // Run onbeforesave callbacks
+    docElem.querySelectorAll('[onbeforesave]').forEach(el =>
+      new Function(el.getAttribute('onbeforesave')).call(el)
+    );
+    // Remove elements marked save-ignore
+    docElem.querySelectorAll('[save-ignore]').forEach(el =>
+      el.remove()
+    );
+    // Run registered beforeSave callbacks
+    beforeSaveCallbacks.forEach(cb => cb(docElem));
+    return "<!DOCTYPE html>" + docElem.outerHTML;
+  } else {
+    // For CodeMirror pages, get value from editor
+    return document.querySelector('.CodeMirror').CodeMirror.getValue();
+  }
+}
+/**
+ * Save the current page contents to the server
+ *
+ * @param {Function} callback - Called with {msg, msgType} on completion
+ *   msgType will be 'success' or 'error'
+ *
+ * @example
+ * savePage(({msg, msgType}) => {
+ *   if (msgType === 'error') {
+ *     console.error('Save failed:', msg);
+ *   } else {
+ *     console.log('Saved:', msg);
+ *   }
+ * });
+ */
+export function savePage(callback = () => {}) {
+  if (!isEditMode || saveInProgress) {
+    return;
+  }
+  const currentContents = getPageContents();
+  saveInProgress = true;
+  // Test mode: skip network request, return mock success
+  if (window.hyperclay?.testMode) {
+    setTimeout(() => {
+      saveInProgress = false;
+      if (typeof callback === 'function') {
+        callback({msg: "Test mode: save skipped", msgType: "success"});
+      }
+    }, 0);
+    return;
+  }
+  fetch(saveEndpoint, {
+    method: 'POST',
+    credentials: 'include',
+    body: currentContents
+  })
+  .then(res => {
+    return res.json().then(data => {
+      if (!res.ok) {
+        throw new Error(data.msg || data.error || `HTTP ${res.status}: ${res.statusText}`);
+      }
+      return data;
+    });
+  })
+  .then(data => {
+    if (typeof callback === 'function') {
+      callback({msg: data.msg, msgType: data.msgType || 'success'});
+    }
+  })
+  .catch(err => {
+    console.error('Failed to save page:', err);
+    if (typeof callback === 'function') {
+      callback({msg: err.message || "Failed to save", msgType: "error"});
+    }
+  })
+  .finally(() => {
+    saveInProgress = false;
+  });
+}
+/**
+ * Save specific HTML content to the server
+ *
+ * @param {string} html - HTML string to save
+ * @param {Function} callback - Called with (err, data) on completion
+ *   err will be null on success, Error object on failure
+ *
+ * @example
+ * saveHtml(myHtml, (err, data) => {
+ *   if (err) {
+ *     console.error('Save failed:', err);
+ *   } else {
+ *     console.log('Saved:', data);
+ *   }
+ * });
+ */
+export function saveHtml(html, callback = () => {}) {
+  if (!isEditMode || saveInProgress) {
+    return;
+  }
+  saveInProgress = true;
+  // Test mode: skip network request, return mock success
+  if (window.hyperclay?.testMode) {
+    setTimeout(() => {
+      saveInProgress = false;
+      if (typeof callback === 'function') {
+        callback(null, {msg: "Test mode: save skipped", msgType: "success"});
+      }
+    }, 0);
+    return;
+  }
+  fetch(saveEndpoint, {
+    method: 'POST',
+    credentials: 'include',
+    body: html
+  })
+  .then(res => {
+    return res.json().then(data => {
+      if (!res.ok) {
+        throw new Error(data.msg || data.error || `HTTP ${res.status}: ${res.statusText}`);
+      }
+      return data;
+    });
+  })
+  .then(data => {
+    if (typeof callback === 'function') {
+      callback(null, data); // Success: no error
+    }
+  })
+  .catch(err => {
+    console.error('Failed to save page:', err);
+    if (typeof callback === 'function') {
+      callback(err); // Pass error
+    }
+  })
+  .finally(() => {
+    saveInProgress = false;
+  });
+}
+/**
+ * Fetch HTML from a URL and save it to replace the current page
+ *
+ * @param {string} url - URL to fetch HTML from
+ * @param {Function} callback - Called with (err, data) on completion
+ *
+ * @example
+ * replacePageWith('/templates/blog.html', (err, data) => {
+ *   if (err) {
+ *     console.error('Failed:', err);
+ *   } else {
+ *     window.location.reload();
+ *   }
+ * });
+ */
+export function replacePageWith(url, callback = () => {}) {
+  if (!isEditMode || saveInProgress) {
+    return;
+  }
+  fetch(url)
+    .then(res => res.text())
+    .then(html => {
+      saveHtml(html, (err, data) => {
+        if (typeof callback === 'function') {
+          callback(err, data);
+        }
+      });
+    })
+    .catch(err => {
+      console.error('Failed to fetch template:', err);
+      if (typeof callback === 'function') {
+        callback(err);
+      }
+    });
+}
+/**
+ * Export save functions to window.hyperclay
+ */
+export function exportToWindow() {
+  if (!window.hyperclay) {
+    window.hyperclay = {};
+  }
+  window.hyperclay.savePage = savePage;
+  window.hyperclay.saveHtml = saveHtml;
+  window.hyperclay.replacePageWith = replacePageWith;
+  window.hyperclay.beforeSave = beforeSave;
+  window.hyperclay.getPageContents = getPageContents;
+}

package/core/setPageTypeOnDocumentElement.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { isEditMode, isOwner } from "./isAdminOfCurrentResource.js";
+import onDomReady from "../dom-utilities/onDomReady.js";
+import {beforeSave} from "./savePage.js";
+export function setViewerPageTypeBeforeSave () {
+  beforeSave(docElem => {
+    docElem.setAttribute("editmode", "false");
+    docElem.setAttribute("pageowner", "false");
+  });
+}
+export function setPageTypeOnPageLoad () {
+  onDomReady(() => {
+    document.documentElement.setAttribute("editmode", isEditMode ? "true" : "false");
+    document.documentElement.setAttribute("pageowner", isOwner ? "true" : "false");
+  });
+}
+// Auto-initialize
+export function init() {
+  setViewerPageTypeBeforeSave();
+  setPageTypeOnPageLoad();
+}

package/custom-attributes/ajaxElements.js ADDED Viewed

@@ -0,0 +1,94 @@
+import getDataFromForm from "../dom-utilities/getDataFromForm.js";
+function handleFormSubmit(event) {
+  const form = event.target;
+  if (form.hasAttribute('ajax-form')) {
+    event.preventDefault();
+    submitAjax(form);
+  }
+}
+function handleButtonClick(event) {
+  const button = event.target.closest('[ajax-button]');
+  if (button) {
+    event.preventDefault();
+    submitAjax(button);
+  }
+}
+function submitAjax(elem) {
+  callSubmitEvents(elem).then(() => {
+    // Ajax buttons can have their own action/method or inherit from parent form
+    const isButton = elem.hasAttribute('ajax-button');
+    const parentForm = elem.closest('form');
+    // Get URL - prioritize element's own action attribute
+    let url = elem.getAttribute('action');
+    if (!url && parentForm) {
+      url = parentForm.getAttribute('action');
+    }
+    if (!url) {
+      url = window.location.href;
+    }
+    // Get method - prioritize element's own method attribute
+    let method = elem.getAttribute('method');
+    if (!method && parentForm) {
+      method = parentForm.getAttribute('method');
+    }
+    method = (method || 'POST').toUpperCase();
+    // Get data - for buttons, only use form data if button is inside a form
+    let data = {};
+    if (isButton && parentForm) {
+      // Button inside form: use form data
+      data = getDataFromForm(parentForm);
+    } else if (!isButton) {
+      // It's a form element itself
+      data = getDataFromForm(elem);
+    }
+    // For standalone buttons with no form, data remains empty object
+    fetch(url, {
+      method: method,
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+      .then(res => res.json().then(resData => {
+        return { ...resData, ok: res.ok, msgType: res.ok ? "success" : "error" }
+      }))
+      .then((res) => {
+        handleResponse(elem, res);
+      })
+      .catch(error => console.error('Error:', error));
+  });
+}
+function handleResponse(elem, res) {
+  if (res.ok && elem.matches('form')) elem.reset();
+  const onResponseCode = elem.getAttribute('onresponse');
+  if (onResponseCode) {
+    new Function('res', onResponseCode).call(elem, res);
+  }
+}
+async function callSubmitEvents(elem) {
+  const elemsWithSubmitEvents = [elem, ...elem.querySelectorAll("[onbeforesubmit]")];
+  for (const elemWithSubmitEvents of elemsWithSubmitEvents) {
+    if (elemWithSubmitEvents.hasAttribute('onbeforesubmit')) {
+      const result = new Function('return ' + elemWithSubmitEvents.getAttribute('onbeforesubmit')).call(elemWithSubmitEvents);
+      if (result instanceof Promise) {
+        await result;
+      }
+    }
+  }
+}
+function init () {
+  document.addEventListener('submit', handleFormSubmit);
+  document.addEventListener('click', handleButtonClick);
+}
+export { init };
+export default init;

package/custom-attributes/autosize.js ADDED Viewed

@@ -0,0 +1,17 @@
+function init () {
+  document.addEventListener('input', event => {
+    const target = event.target;
+    if (target.matches('textarea[autosize]')) {
+      target.style.overflowY = 'hidden';
+      target.style.height = 'auto';
+      target.style.height = target.scrollHeight + 'px';
+    }
+  });
+  document.querySelectorAll('textarea[autosize]').forEach(textarea => {
+    textarea.style.overflowY = 'hidden';
+    textarea.style.height = textarea.scrollHeight + 'px';
+  });
+}
+export { init };
+export default init;

package/custom-attributes/domHelpers.js ADDED Viewed

@@ -0,0 +1,175 @@
+import nearest from "../utilities/nearest.js";
+import pipe from "../utilities/pipe.js";
+function init () {
+  // Bail if already initialized
+  if (HTMLElement.prototype.hasOwnProperty('nearest')) {
+    return;
+  }
+  // elem.nearest.project returns nearest element with a "project" attribute
+  Object.defineProperty(HTMLElement.prototype, 'nearest', {
+    configurable: true,
+    get: function() {
+      let element = this;
+      const handler = {
+        get(target, prop) {
+          return nearest(element, `[${prop}], .${prop}`);
+        }
+      };
+      return new Proxy({}, handler);
+    }
+  });
+  // elem.val.project returns the value of the nearest "project" attribute
+  // elem.val.project = "hello world" sets the value of the nearest "project" attribute
+  Object.defineProperty(HTMLElement.prototype, 'val', {
+    configurable: true,
+    get: function() {
+      let element = this;
+      const handler = {
+        get(target, prop) {
+          return nearest(element, `[${prop}], .${prop}`, elem => elem.getAttribute(prop));
+        },
+        set(target, prop, value) {
+          const foundElem = nearest(element, `[${prop}], .${prop}`);
+          if (foundElem) {
+            foundElem.setAttribute(prop, value);
+          }
+          return true;
+        }
+      };
+      return new Proxy({}, handler);
+    }
+  });
+  // elem.text.project returns the innerText of the nearest element with the "project" attribute
+  // elem.text.project = "hello world" sets the innerText of the nearest element with the "project" attribute
+  Object.defineProperty(HTMLElement.prototype, 'text', {
+    configurable: true,
+    get: function() {
+      let element = this;
+      const handler = {
+        get(target, prop) {
+          return nearest(element, `[${prop}], .${prop}`, elem => elem.innerText);
+        },
+        set(target, prop, value) {
+          const foundElem = nearest(element, `[${prop}], .${prop}`);
+          if (foundElem) {
+            foundElem.innerText = value;
+          }
+          return true;
+        }
+      };
+      return new Proxy({}, handler);
+    }
+  });
+  // elem.exec.sync_out() executes the code in the nearest "sync_out" attribute, using elem as the `this`
+  Object.defineProperty(HTMLElement.prototype, 'exec', {
+    configurable: true,
+    get: function() {
+      let element = this;
+      const handler = {
+        get(target, prop) {
+          return function() {
+            const foundElem = nearest(element, `[${prop}], .${prop}`);
+            if (foundElem) {
+              const code = foundElem.getAttribute(prop);
+              if (code) {
+                return new Function(code).call(foundElem);
+              }
+            }
+          };
+        }
+      };
+      return new Proxy({}, handler);
+    }
+  });
+  /**
+   * CYCLE METHODS
+   *
+   * Element.prototype.cycle - Cycles through elements with a specific attribute and replaces the current element with the next one
+   * Usage: element.cycle(1, 'project') - Replaces element with the next element that has 'project' attribute
+   *
+   * Element.prototype.cycleAttr - Cycles through possible values of a specific attribute on matching elements
+   * Usage:
+   *   element.cycleAttr(1, 'project_type') - Sets project_type to the next value found on elements with project_type
+   *   element.cycleAttr(1, 'project_type', 'option:project_type') - Sets project_type based on values from option:project_type
+   *
+   * Notes:
+   * - Both methods support forward/backward cycling with positive/negative order parameter
+   * - For attributes containing special characters like colons (e.g., 'option:project_type'),
+   *   the colon is automatically escaped for the CSS selector
+   * - cycle() replaces the entire element with the next one
+   * - cycleAttr() only changes the attribute value on the current element
+   */
+  Element.prototype.cycle = function(order = 1, attr) {
+    const escapedAttr = attr.replace(/:/g, '\\:');
+    const next = pipe(
+      // Get all elements
+      () => document.querySelectorAll(`[${escapedAttr}]`),
+      // Convert to array of {element, value} objects
+      els => Array.from(els).map(el => ({
+        element: el,
+        value: el.textContent.trim()
+      })),
+      // Get unique by value
+      els => [...new Map(els.map(el => [el.value, el])).values()],
+      // Sort by value
+      els => els.sort((a, b) => a.value.localeCompare(b.value)),
+      // Find next element object
+      els => els[(els.findIndex(el => el.value === this.textContent.trim()) + order + els.length) % els.length],
+      // Return just the element
+      obj => obj.element
+    )();
+    if (next) this.replaceWith(next.cloneNode(true));
+  };
+  Element.prototype.cycleAttr = function(order = 1, setAttr, lookupAttr) {
+    // If lookupAttr is not provided, use setAttr for both
+    lookupAttr = lookupAttr || setAttr;
+    const escapedLookupAttr = lookupAttr.replace(/:/g, '\\:');
+    const next = pipe(
+      // Get all elements that match the lookup attribute
+      () => document.querySelectorAll(`[${escapedLookupAttr}]`),
+      // Get unique attribute values
+      els => [...new Set(Array.from(els).map(el =>
+        el.getAttribute(lookupAttr)
+      ))],
+      // Sort them
+      vals => vals.sort(),
+      // Get next value based on current setAttr value
+      vals => vals[(vals.indexOf(this.getAttribute(setAttr)) + order + vals.length) % vals.length]
+    )();
+    if (next) this.setAttribute(setAttr, next);
+  };
+}
+export { init };
+export default init;

package/custom-attributes/events.js ADDED Viewed

@@ -0,0 +1,15 @@
+// Events module - combines all event attribute handlers
+import { init as initOnclickaway } from './onclickaway.js';
+import { init as initOnclone } from './onclone.js';
+import { init as initOnpagemutation } from './onpagemutation.js';
+import { init as initOnrender } from './onrender.js';
+function init() {
+  initOnclickaway();
+  initOnclone();
+  initOnpagemutation();
+  initOnrender();
+}
+export { init };
+export default init;

package/custom-attributes/inputHelpers.js ADDED Viewed

@@ -0,0 +1,11 @@
+// Input helpers - combines prevent-enter and autosize
+import { init as initPrevent } from './preventEnter.js';
+import { init as initAutosize } from './autosize.js';
+function init() {
+  initPrevent();
+  initAutosize();
+}
+export { init };
+export default init;

package/custom-attributes/onclickaway.js ADDED Viewed

@@ -0,0 +1,27 @@
+function init () {
+  // the code inside `onclickaway` attributes will be executed whenever that element is NOT clicked
+  document.addEventListener('click', function(event) {
+    const elementsWithOnClickAway = document.querySelectorAll('[onclickaway]');
+    elementsWithOnClickAway.forEach(element => {
+      let targetElement = event.target; // clicked element
+      do {
+        if (targetElement === element) {
+          // Click inside, do nothing
+          return;
+        }
+        // Go up the DOM
+        targetElement = targetElement.parentNode;
+      } while (targetElement);
+      // Click outside the element, execute onclickaway
+      new Function(element.getAttribute('onclickaway')).call(element);
+    });
+  });
+}
+export { init };
+export default init;

package/custom-attributes/onclone.js ADDED Viewed

@@ -0,0 +1,35 @@
+function init() {
+  // Bail if already patched (idempotence)
+  if (Node.prototype.__hyperclayOnclone) {
+    return;
+  }
+  const originalCloneNode = Node.prototype.cloneNode;
+  // Store original for idempotence check
+  Node.prototype.__hyperclayOnclone = originalCloneNode;
+  Node.prototype.cloneNode = function(deep) {
+    const clonedNode = originalCloneNode.call(this, deep);
+    if (clonedNode.nodeType === Node.ELEMENT_NODE) {
+      // Process only the top-level cloned element
+      processOnclone(clonedNode);
+    }
+    return clonedNode;
+  };
+  function processOnclone(element) {
+    const oncloneCode = element.getAttribute('onclone');
+    if (oncloneCode) {
+      try {
+        new Function(oncloneCode).call(element);
+      } catch (error) {
+        console.error('Error executing onclone:', error);
+      }
+    }
+  }
+}
+export { init };
+export default init;

package/custom-attributes/onpagemutation.js ADDED Viewed

@@ -0,0 +1,20 @@
+import Mutation from "../utilities/mutation.js";
+function init() {
+  const executePageMutation = async element => {
+    try {
+      const code = element.getAttribute('onpagemutation');
+      const asyncFn = new Function(`return (async function() { ${code} })`)();
+      await asyncFn.call(element);
+    } catch (error) {
+      console.error('Error in onpagemutation execution:', error);
+    }
+  };
+  Mutation.onAnyChange({
+    debounce: 200,
+    omitChangeDetails: true
+  }, () => document.querySelectorAll('[onpagemutation]').forEach(executePageMutation));
+}
+export { init };
+export default init;

package/custom-attributes/onrender.js ADDED Viewed

@@ -0,0 +1,30 @@
+import Mutation from "../utilities/mutation.js";
+import onLoad from "../dom-utilities/onLoad.js";
+function init() {
+  const executeRender = async (element) => {
+    try {
+      const code = element.getAttribute('onrender');
+      const asyncFn = new Function(`return (async function() { ${code} })`)();
+      await asyncFn.call(element);
+    } catch (error) {
+      console.error('Error in onrender execution:', error);
+    }
+  };
+  // Execute onrender on page load
+  onLoad(() => {
+    document.querySelectorAll('[onrender]').forEach(executeRender);
+  });
+  // Execute onrender when new elements are added
+  Mutation.onAddElement({
+    selectorFilter: "[onrender]",
+    debounce: 200
+  }, (changes) => {
+    changes.forEach(({ element }) => executeRender(element));
+  });
+}
+export { init };
+export default init;