hyperclayjs 1.9.0 → 1.10.0

package/README.md

@@ -63,7 +63,7 @@ import 'hyperclayjs/presets/standard.js';
 | option-visibility | 5.3KB | 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 |
 | save-core | 6.8KB | Basic save function only - hyperclay.savePage() |
-| save-system | 7.1KB | Manual save: keyboard shortcut (CMD+S), save button, change tracking |
+| save-system | 7.1KB | CMD+S, [trigger-save] button, savestatus attribute |
 | save-toast | 0.9KB | Toast notifications for save events |
 | snapshot | 7.5KB | Source of truth for page state - captures DOM snapshots for save and sync |
 | unsaved-warning | 0.8KB | Warn before leaving page with unsaved changes |
@@ -120,7 +120,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | file-upload | 10.7KB | File upload with progress |
-| live-sync | 12KB | Real-time DOM sync across browsers and with file system |
+| live-sync | 12.7KB | Real-time DOM sync across browsers |
 | send-message | 1.3KB | Message sending utility |
 
 ### Vendor Libraries (Third-party libraries)
@@ -141,7 +141,7 @@ Standard feature set for most use cases
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `persist`, `option-visibility`, `event-attrs`, `dom-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Everything (~176.5KB)
+### Everything (~177.2KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

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

package/src/communication/live-sync.js

@@ -228,26 +228,34 @@ class LiveSync {
 
   /**
    * Listen for snapshot-ready events from the save system.
-   * This replaces DOM observation — we sync when save happens.
+   * Receives the full cloned documentElement and extracts head/body.
    */
   listenForSnapshots() {
-    this._snapshotHandler = (event) => {
+    this._snapshotHandler = async (event) => {
       if (this.isPaused) return;
 
-      const { body } = event.detail;
-      if (!body) return;
+      const { documentElement } = event.detail;
+      if (!documentElement) return;
 
-      this.sendBody(body);
+      // Extract head and body directly from cloned element
+      const head = documentElement.querySelector('head')?.innerHTML || '';
+      const body = documentElement.querySelector('body')?.innerHTML || '';
+
+      // Compute headHash using SHA-256 (async)
+      const headHash = await this.computeHeadHash(head);
+
+      // Send update even if body is empty (allows clearing content)
+      this.sendUpdate(body, headHash);
     };
 
     document.addEventListener('hyperclay:snapshot-ready', this._snapshotHandler);
   }
 
   /**
-   * Send body HTML to the server (debounced)
+   * Send body and headHash to the server (debounced)
    * Only updates lastBodyHtml after successful save
    */
-  sendBody(body) {
+  sendUpdate(body, headHash) {
     clearTimeout(this.debounceTimer);
 
     this.debounceTimer = setTimeout(() => {
@@ -256,9 +264,8 @@ class LiveSync {
 
       console.log('[LiveSync] Sending update');
 
-      // Compute head hash to send to server (for hosted mode)
-      const headHash = this.computeHeadHash();
-      this.lastHeadHash = headHash; // Track local head changes
+      // Track local head changes
+      this.lastHeadHash = headHash;
 
       fetch('/live-sync/save', {
         method: 'POST',
@@ -286,21 +293,30 @@ class LiveSync {
   }
 
   /**
-   * Compute MD5-like hash of head content (first 8 hex chars)
-   * Uses a simple string hash since we don't have crypto in browser
+   * Compute SHA-256 hash of head content (first 16 hex chars)
+   * Uses SubtleCrypto API (async)
+   * @param {string} head - Head innerHTML
+   * @returns {Promise<string|null>} 16-char hex hash or null if unavailable
    */
-  computeHeadHash() {
-    const head = document.head?.innerHTML;
+  async computeHeadHash(head) {
     if (!head) return null;
 
-    // Simple hash function (djb2)
-    let hash = 5381;
-    for (let i = 0; i < head.length; i++) {
-      hash = ((hash << 5) + hash) + head.charCodeAt(i);
-      hash = hash & hash; // Convert to 32bit integer
+    // SubtleCrypto requires secure context (HTTPS or localhost)
+    if (!crypto?.subtle?.digest) {
+      console.warn('[LiveSync] SHA-256 unavailable (non-secure context), skipping headHash');
+      return null;
+    }
+
+    try {
+      const encoder = new TextEncoder();
+      const data = encoder.encode(head);
+      const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+      const hashArray = Array.from(new Uint8Array(hashBuffer));
+      return hashArray.map(b => b.toString(16).padStart(2, '0')).join('').slice(0, 16);
+    } catch (e) {
+      console.warn('[LiveSync] SHA-256 hash failed, skipping headHash:', e);
+      return null;
     }
-    // Convert to hex and take first 8 chars
-    return Math.abs(hash).toString(16).padStart(8, '0').slice(0, 8);
   }
 
   /**

package/src/core/snapshot.js

@@ -128,10 +128,10 @@ export function captureForSave({ emitForSync = true } = {}) {
   const clone = captureSnapshot();
 
   // Emit for live-sync before stripping admin elements
+  // Sends full cloned documentElement so live-sync can extract head and body
   if (emitForSync) {
-    const bodyForSync = clone.querySelector('body').innerHTML;
     document.dispatchEvent(new CustomEvent('hyperclay:snapshot-ready', {
-      detail: { body: bodyForSync }
+      detail: { documentElement: clone }
     }));
   }
 

package/src/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.9.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.10.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.

package/src/module-dependency-graph.json

@@ -178,7 +178,7 @@
       "files": [
         "core/savePage.js"
       ],
-      "description": "Manual save: keyboard shortcut (CMD+S), save button, change tracking",
+      "description": "CMD+S, [trigger-save] button, savestatus attribute",
       "exports": {
         "beforeSave": [
           "hyperclay"
@@ -724,11 +724,11 @@
     "live-sync": {
       "name": "live-sync",
       "category": "communication",
-      "size": 12,
+      "size": 12.7,
       "files": [
         "communication/live-sync.js"
       ],
-      "description": "Real-time DOM sync across browsers and with file system",
+      "description": "Real-time DOM sync across browsers",
       "exports": {
         "liveSync": [
           "hyperclay"