hyperclayjs 1.24.1 → 1.24.2

package/README.md

@@ -61,7 +61,7 @@ import 'hyperclayjs/presets/standard.js';
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
 | edit-mode-helpers | 6.8KB | Admin-only functionality: [viewmode:disabled], [editmode:resource], [editmode:onclick] |
 | option-visibility | 7.1KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
-| persist | 2.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
+| persist | 6.4KB | Persist input/select/textarea values to the DOM with [persist] attribute |
 | save-core | 8.9KB | Basic save function only - hyperclay.savePage() |
 | save-system | 13.4KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
@@ -75,7 +75,7 @@ import 'hyperclayjs/presets/standard.js';
 |--------|------|-------------|
 | ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
 | dom-helpers | 6.8KB | el.nearest, el.val, el.text, el.exec, el.cycle |
-| event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
+| event-attrs | 5.3KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
 | 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 |
@@ -139,12 +139,12 @@ Essential features for basic editing
 
 **Modules:** `save-core`, `snapshot`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`, `view-mode-excludes-edit-modules`
 
-### Standard (~79.2KB)
+### Standard (~83.9KB)
 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 (~220.5KB)
+### Everything (~225.2KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

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

package/src/core/enablePersistentFormInputValues.js

@@ -1,18 +1,102 @@
 import { onSnapshot } from './snapshot.js';
 
-// <input type="checkbox" persist>
+// Persistent Form Input Values
+//
+// Problem: Browser form values (.value, .checked, .selectedIndex) live in JS
+// memory, not in DOM attributes. When Hyperclay serializes the page via
+// cloneNode() or outerHTML, those JS-only values are lost. This module syncs
+// them back to the DOM so they survive saves, live-sync, and cloning.
+//
+// Strategy: sync to the DOM immediately on every user interaction, not just at
+// snapshot time. This means cloneNode() always gets current values.
+//
+// Why this is safe for each element type:
+//
+//   <input type="text">  — setAttribute("value", ...) updates the DOM attribute
+//     but does NOT change the displayed text or cursor position. The browser's
+//     "dirty value flag" (WHATWG spec) means that once a user has typed into an
+//     input, the browser ignores attribute changes for display purposes. The
+//     attribute and the live .value property become independent surfaces.
+//
+//   <select>  — Setting/removing the "selected" attribute on <option> elements
+//     has no side effects on display or interaction.
+//
+//   <input type="checkbox/radio">  — Setting/removing the "checked" attribute
+//     has no side effects.
+//
+//   <textarea>  — The hard case. Unlike <input>, a textarea stores its default
+//     value as child text nodes, not an attribute. Writing textContent while
+//     focused destroys cursor position, scroll, and selection. So instead, we
+//     write to a harmless "data-value" attribute on every keystroke (completely
+//     inert — no cursor, scroll, or reflow). At snapshot time, the onSnapshot
+//     hook reads data-value from the cloned textarea, writes it into the
+//     clone's textContent, and strips the attribute. The saved HTML is clean.
+//
+// The onSnapshot hook also serves as a safety net for all types, catching any
+// values that weren't synced by the live listeners (e.g., a textarea that was
+// never typed into but had its value set programmatically).
+//
+// Synergy with onclone (custom-attributes/onclone.js):
+// When event-attrs is loaded, its cloneNode() intercept (onclone.js) patches
+// data-value into textContent on cloned textareas automatically.
+
 export default function enablePersistentFormInputValues(filterBySelector = "[persist]") {
   const inputSelector = `input${filterBySelector}:not([type="password"]):not([type="hidden"]):not([type="file"])`;
   const textareaSelector = `textarea${filterBySelector}`;
   const selectSelector = `select${filterBySelector}`;
 
-  // Use onSnapshot so form values are synced for both save AND live-sync
+  // --- Live DOM sync: keep attributes in sync on every user interaction ---
+
+  document.addEventListener('input', (e) => {
+    const el = e.target;
+
+    // Text-like inputs: setAttribute("value") is safe — dirty flag prevents display change
+    if (el.matches(inputSelector) && el.type !== 'checkbox' && el.type !== 'radio') {
+      el.setAttribute('value', el.value);
+      return;
+    }
+
+    // Textareas: write to data-value (inert, no cursor/scroll disruption)
+    if (el.matches(textareaSelector)) {
+      el.setAttribute('data-value', el.value);
+      return;
+    }
+  }, true);
+
+  document.addEventListener('change', (e) => {
+    const el = e.target;
+
+    // Checkboxes and radios
+    if (el.matches(inputSelector) && (el.type === 'checkbox' || el.type === 'radio')) {
+      el.checked ? el.setAttribute('checked', '') : el.removeAttribute('checked');
+      return;
+    }
+
+    // Selects: sync selected attribute on options
+    if (el.matches(selectSelector)) {
+      const options = el.querySelectorAll('option');
+      options.forEach(opt => opt.removeAttribute('selected'));
+      if (el.multiple) {
+        Array.from(el.selectedOptions).forEach(opt => {
+          const idx = Array.from(el.options).indexOf(opt);
+          if (options[idx]) options[idx].setAttribute('selected', '');
+        });
+      } else if (el.selectedIndex >= 0 && options[el.selectedIndex]) {
+        options[el.selectedIndex].setAttribute('selected', '');
+      }
+      return;
+    }
+  }, true);
+
+  // --- Snapshot hook: final safety net at serialize time ---
+
   onSnapshot((doc) => {
-    // Sync text inputs
+    // Guard: if another onSnapshot hook mutated the clone, lists may diverge
     const liveInputs = document.querySelectorAll(inputSelector);
     const clonedInputs = doc.querySelectorAll(inputSelector);
     clonedInputs.forEach((cloned, i) => {
       const live = liveInputs[i];
+      if (!live) return;
       if (live.type === 'checkbox' || live.type === 'radio') {
         if (live.checked) {
           cloned.setAttribute('checked', '');
@@ -24,18 +108,24 @@ export default function enablePersistentFormInputValues(filterBySelector = "[per
       }
     });
 
-    // Sync textareas
+    // Always read the live .value — it's the true source of truth.
+    // data-value is useful for cloneNode() outside of snapshots, but here
+    // we must use .value because code may have set textarea.value directly
+    // without firing an input event (which would leave data-value stale).
     const liveTextareas = document.querySelectorAll(textareaSelector);
     const clonedTextareas = doc.querySelectorAll(textareaSelector);
     clonedTextareas.forEach((cloned, i) => {
-      cloned.textContent = liveTextareas[i].value;
+      const live = liveTextareas[i];
+      if (!live) return;
+      cloned.textContent = live.value;
+      cloned.removeAttribute('data-value');
     });
 
-    // Sync selects
     const liveSelects = document.querySelectorAll(selectSelector);
     const clonedSelects = doc.querySelectorAll(selectSelector);
     clonedSelects.forEach((cloned, i) => {
       const live = liveSelects[i];
+      if (!live) return;
       const clonedOptions = cloned.querySelectorAll('option');
       clonedOptions.forEach(opt => opt.removeAttribute('selected'));
 

package/src/custom-attributes/onclone.js

@@ -15,6 +15,23 @@ function init() {
     if (clonedNode.nodeType === Node.ELEMENT_NODE) {
       processOnclone(clonedNode);
       clonedNode.querySelectorAll('[onclone]').forEach(processOnclone);
+
+      // Patch textareas: the persist module writes live values to data-value
+      // on every keystroke (because writing textContent on a focused textarea
+      // destroys cursor/scroll). Shift data-value into textContent on the
+      // clone so consumers get the current value without special handling.
+      if (deep) {
+        const textareas = clonedNode.tagName === 'TEXTAREA'
+          ? [clonedNode]
+          : clonedNode.querySelectorAll('textarea[data-value]');
+        textareas.forEach(ta => {
+          const val = ta.getAttribute('data-value');
+          if (val !== null) {
+            ta.textContent = val;
+            ta.removeAttribute('data-value');
+          }
+        });
+      }
     }
 
     return clonedNode;

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.24.1 - Minimal Browser-Native Loader
+ * HyperclayJS v1.24.2 - Minimal Browser-Native Loader
  *
  * Modules auto-init when imported (no separate init call needed).
  * Include `export-to-window` feature to export to window.hyperclay.