hyperclayjs 1.23.1 → 1.24.0

package/README.md

@@ -79,6 +79,7 @@ import 'hyperclayjs/presets/standard.js';
 | input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | movable | 2.5KB | Free-positioning drag with [movable] and [movable-handle], edit mode only |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
+| save-freeze | 1.9KB | [save-freeze] attribute - freeze element innerHTML for saves, live DOM changes freely |
 | sortable | 3.4KB | Drag-drop sorting with [sortable], lazy-loads ~118KB Sortable.js in edit mode |
 
 ### UI Components (User interface elements)
@@ -96,7 +97,7 @@ import 'hyperclayjs/presets/standard.js';
 | cache-bust | 0.6KB | Cache-bust href/src attributes |
 | cookie | 1.4KB | Cookie management (often auto-included) |
 | debounce | 0.4KB | Function debouncing |
-| mutation | 13.7KB | DOM mutation observation (often auto-included) |
+| mutation | 13.8KB | DOM mutation observation (often auto-included) |
 | nearest | 3.4KB | Find nearest elements (often auto-included) |
 | throttle | 0.8KB | Function throttling |
 
@@ -143,7 +144,7 @@ Standard feature set for most use cases
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `unsaved-warning`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Everything (~217.6KB)
+### Everything (~219.6KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperclayjs",
-  "version": "1.23.1",
+  "version": "1.24.0",
   "description": "Modular JavaScript library for building interactive malleable HTML files with Hyperclay",
   "type": "module",
   "main": "src/hyperclay.js",

package/src/custom-attributes/saveFreeze.js

@@ -0,0 +1,69 @@
+/**
+ * [save-freeze] Custom Attribute
+ *
+ * Freezes an element's innerHTML for save purposes.
+ * The live DOM can change freely, but the saved HTML always
+ * contains the original content captured when the element first appeared.
+ *
+ * Usage:
+ *   <div save-freeze>Content that JS will modify at runtime</div>
+ *
+ * The original innerHTML is captured:
+ *   - On page load, for all existing [save-freeze] elements
+ *   - On DOM insertion, for dynamically added [save-freeze] elements
+ *
+ * At save time, the clone's innerHTML is replaced with the stored original.
+ * Changes inside [save-freeze] elements do not trigger autosave dirty checks.
+ */
+
+import { onPrepareForSave } from "../core/snapshot.js";
+import { isEditMode } from "../core/isAdminOfCurrentResource.js";
+
+const originals = new WeakMap();
+
+function capture(el) {
+  if (!originals.has(el)) {
+    originals.set(el, el.innerHTML);
+  }
+}
+
+function captureAll() {
+  for (const el of document.querySelectorAll('[save-freeze]')) {
+    capture(el);
+  }
+}
+
+function init() {
+  if (!isEditMode) return;
+
+  captureAll();
+
+  const observer = new MutationObserver(mutations => {
+    for (const m of mutations) {
+      for (const node of m.addedNodes) {
+        if (node.nodeType !== 1) continue;
+        if (node.hasAttribute?.('save-freeze')) capture(node);
+        for (const el of node.querySelectorAll?.('[save-freeze]') || []) {
+          capture(el);
+        }
+      }
+    }
+  });
+  observer.observe(document.documentElement, { childList: true, subtree: true });
+
+  onPrepareForSave(clone => {
+    const liveElements = document.querySelectorAll('[save-freeze]');
+    const cloneElements = clone.querySelectorAll('[save-freeze]');
+
+    for (let i = 0; i < cloneElements.length; i++) {
+      const liveEl = liveElements[i];
+      if (liveEl && originals.has(liveEl)) {
+        cloneElements[i].innerHTML = originals.get(liveEl);
+      }
+    }
+  });
+}
+
+init();
+
+export default init;

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.23.1 - Minimal Browser-Native Loader
+ * HyperclayJS v1.24.0 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.
@@ -44,6 +44,7 @@ const MODULE_PATHS = {
   "dom-helpers": "./custom-attributes/domHelpers.js",
   "input-helpers": "./custom-attributes/inputHelpers.js",
   "onaftersave": "./custom-attributes/onaftersave.js",
+  "save-freeze": "./custom-attributes/saveFreeze.js",
   "dialogs": "./ui/prompts.js",
   "toast": "./ui/toast.js",
   "toast-hyperclay": "./ui/toast-hyperclay.js",
@@ -124,6 +125,7 @@ const PRESETS = {
       "dom-helpers",
       "input-helpers",
       "onaftersave",
+      "save-freeze",
       "dialogs",
       "toast",
       "the-modal",
@@ -168,6 +170,7 @@ const PRESETS = {
       "dom-helpers",
       "input-helpers",
       "onaftersave",
+      "save-freeze",
       "dialogs",
       "toast",
       "the-modal",
@@ -208,6 +211,7 @@ const EDIT_MODE_ONLY = new Set([
   "sortable",
   "movable",
   "onaftersave",
+  "save-freeze",
   "cache-bust",
   "hyper-morph",
   "file-upload",

package/src/utilities/mutation.js

@@ -204,7 +204,8 @@ const Mutation = {
     while (element && element.nodeType === 1) {
       if (element.hasAttribute?.('mutations-ignore') ||
           element.hasAttribute?.('save-remove') ||
-          element.hasAttribute?.('save-ignore')) {
+          element.hasAttribute?.('save-ignore') ||
+          element.hasAttribute?.('save-freeze')) {
         return true;
       }
       element = element.parentElement;