hyperclayjs 1.6.0 → 1.7.0

package/README.md

@@ -60,7 +60,7 @@ import 'hyperclayjs/presets/standard.js';
 | autosave | 1.1KB | Auto-save on DOM changes, unsaved changes warning |
 | edit-mode | 1.8KB | Toggle edit mode on hyperclay on/off |
 | edit-mode-helpers | 5.4KB | Admin-only functionality: [edit-mode-input], [edit-mode-resource], [edit-mode-onclick] |
-| option-visibility | 4.7KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
+| option-visibility | 5.9KB | Dynamic show/hide based on ancestor state with option:attribute="value" |
 | persist | 2.5KB | Persist input/select/textarea values to the DOM with [persist] attribute |
 | save-core | 6.3KB | Basic save function only - hyperclay.savePage() |
 | save-system | 7.1KB | Manual save: keyboard shortcut (CMD+S), save button, change tracking |
@@ -132,12 +132,12 @@ Essential features for basic editing
 
 **Modules:** `save-core`, `save-system`, `edit-mode-helpers`, `toast`, `save-toast`, `export-to-window`
 
-### Standard (~44.3KB)
+### Standard (~45.5KB)
 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 (~149KB)
+### Everything (~150.2KB)
 All available features
 
 Includes all available modules across all categories.

package/core/optionVisibility.js

@@ -0,0 +1,216 @@
+/**
+ * Option Visibility (CSS Layers Implementation)
+ *
+ * Shows/hides elements based on `option:` attributes and ancestor matches.
+ *
+ * Usage:
+ *   <div editmode="true">
+ *     <button option:editmode="true">Visible</button>
+ *     <button option:editmode="false">Hidden</button>
+ *   </div>
+ *
+ * An element with `option:name="value"` is hidden by default.
+ * It becomes visible when ANY ancestor has `name="value"`.
+ *
+ * ---
+ *
+ * HOW IT WORKS:
+ * 1. Uses `display: none !important` to forcefully hide elements
+ * 2. Uses `display: revert-layer !important` to un-hide when ancestor matches
+ *    `revert-layer` tells the browser: "Ignore rules in this layer, fall back to author styles"
+ * 3. This preserves the user's original `display` (flex, grid, block) without us knowing what it is
+ *
+ * BROWSER SUPPORT:
+ * Requires `@layer` and `revert-layer` support (~92% of browsers, 2022+).
+ * Falls back gracefully - elements remain visible if unsupported.
+ *
+ * TRADEOFFS:
+ * - Pro: Pure CSS after generation, zero JS overhead for toggling
+ * - Pro: Simple code, similar to original approach
+ * - Con: Loses to user `!important` rules (layered !important < unlayered !important)
+ */
+
+import Mutation from "../utilities/mutation.js";
+
+const optionVisibility = {
+  debug: false,
+  _started: false,
+  _styleElement: null,
+  _unsubscribe: null,
+
+  LAYER_NAME: 'option-visibility',
+  STYLE_CLASS: 'option-visibility-layer-styles',
+
+  log(...args) {
+    if (this.debug) console.log('[OptionVisibility:Layer]', ...args);
+  },
+
+  /**
+   * Check if browser supports the layer approach
+   */
+  isSupported() {
+    return typeof CSS !== 'undefined'
+      && typeof CSS.supports === 'function'
+      && CSS.supports('display', 'revert-layer');
+  },
+
+  /**
+   * Find all unique option:name="value" patterns using XPath (faster than regex on HTML)
+   */
+  findOptionAttributes() {
+    const patterns = new Map();
+
+    try {
+      const snapshot = document.evaluate(
+        '//*[@*[starts-with(name(), "option:")]]',
+        document.documentElement,
+        null,
+        XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
+        null
+      );
+
+      for (let i = 0; i < snapshot.snapshotLength; i++) {
+        const el = snapshot.snapshotItem(i);
+        for (const attr of el.attributes) {
+          if (attr.name.startsWith('option:')) {
+            const name = attr.name.slice(7);
+            const value = attr.value;
+            const key = `${name}=${value}`;
+            if (!patterns.has(key)) {
+              patterns.set(key, { name, value });
+            }
+          }
+        }
+      }
+    } catch (error) {
+      this.log('XPath error, falling back to empty', error);
+    }
+
+    return [...patterns.values()];
+  },
+
+  /**
+   * Generate CSS rules wrapped in @layer
+   */
+  generateCSS(attributes) {
+    if (!attributes.length) return '';
+
+    const rules = attributes.map(({ name, value }) => {
+      const safeName = CSS.escape(name);
+      const safeValue = CSS.escape(value);
+
+      // Hidden by default, visible when ancestor matches
+      // Both rules need !important for consistency within the layer
+      return `[option\\:${safeName}="${safeValue}"]{display:none!important}[${safeName}="${safeValue}"] [option\\:${safeName}="${safeValue}"]{display:revert-layer!important}`;
+    }).join('');
+
+    return `@layer ${this.LAYER_NAME}{${rules}}`;
+  },
+
+  /**
+   * Update the style element with current rules
+   */
+  update() {
+    if (!this.isSupported()) {
+      this.log('Browser lacks revert-layer support, skipping');
+      return;
+    }
+
+    try {
+      const attributes = this.findOptionAttributes();
+      const css = this.generateCSS(attributes);
+
+      // Remove style element if no attributes
+      if (!css) {
+        if (this._styleElement) {
+          this._styleElement.remove();
+          this._styleElement = null;
+          this.log('Removed empty style element');
+        }
+        return;
+      }
+
+      // Skip if unchanged
+      if (this._styleElement?.textContent === css) {
+        this.log('Styles unchanged');
+        return;
+      }
+
+      // Create or update
+      if (!this._styleElement) {
+        this._styleElement = document.createElement('style');
+        this._styleElement.className = this.STYLE_CLASS;
+        document.head.appendChild(this._styleElement);
+      }
+
+      this._styleElement.textContent = css;
+      this.log(`Generated ${attributes.length} rules`);
+
+    } catch (error) {
+      console.error('[OptionVisibility:Layer] Error generating rules:', error);
+    }
+  },
+
+  start() {
+    if (this._started) return;
+
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => this.start(), { once: true });
+      return;
+    }
+
+    this._started = true;
+
+    if (!this.isSupported()) {
+      console.warn('[OptionVisibility:Layer] Browser lacks revert-layer support. Elements will remain visible.');
+      return;
+    }
+
+    this.update();
+
+    // selectorFilter only triggers on option:* attribute changes (new patterns).
+    // Ancestor attribute changes (e.g., editmode="true" -> "false") are handled
+    // automatically by the browser - CSS rules re-evaluate when attributes change.
+    this._unsubscribe = Mutation.onAnyChange({
+      debounce: 200,
+      selectorFilter: el => [...el.attributes].some(attr => attr.name.startsWith('option:')),
+      omitChangeDetails: true
+    }, () => this.update());
+
+    this.log('Started');
+  },
+
+  stop() {
+    if (!this._started) return;
+
+    this._started = false;
+
+    if (this._unsubscribe) {
+      this._unsubscribe();
+      this._unsubscribe = null;
+    }
+
+    if (this._styleElement) {
+      this._styleElement.remove();
+      this._styleElement = null;
+    }
+
+    this.log('Stopped');
+  }
+};
+
+// Auto-export
+if (!window.__hyperclayNoAutoExport) {
+  window.optionVisibility = optionVisibility;
+  window.hyperclay = window.hyperclay || {};
+  window.hyperclay.optionVisibility = optionVisibility;
+  window.h = window.hyperclay;
+}
+
+export default optionVisibility;
+
+export function init() {
+  optionVisibility.start();
+}
+
+init();

package/core/savePageCore.js

@@ -121,7 +121,7 @@ export function savePage(callback = () => {}) {
 
     const msg = err.name === 'AbortError'
       ? 'Server not responding'
-      : (err.message || 'Failed to save');
+      : 'Save failed';
 
     if (typeof callback === 'function') {
       callback({msg, msgType: "error"});

package/hyperclay.js

@@ -1,5 +1,5 @@
 /**
- * HyperclayJS v1.6.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.7.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.
@@ -31,7 +31,7 @@ const MODULE_PATHS = {
   "save-toast": "./core/saveToast.js",
   "edit-mode-helpers": "./core/adminSystem.js",
   "persist": "./core/enablePersistentFormInputValues.js",
-  "option-visibility": "./core/optionVisibilityRuleGenerator.js",
+  "option-visibility": "./core/optionVisibility.js",
   "edit-mode": "./core/editmodeSystem.js",
   "event-attrs": "./custom-attributes/events.js",
   "ajax-elements": "./custom-attributes/ajaxElements.js",

package/module-dependency-graph.json

@@ -68,7 +68,7 @@
       "string-utilities/query.js",
       "utilities/cookie.js"
     ],
-    "core/optionVisibilityRuleGenerator.js": [
+    "core/optionVisibility.js": [
       "utilities/mutation.js"
     ],
     "core/savePage.js": [
@@ -242,9 +242,9 @@
     "option-visibility": {
       "name": "option-visibility",
       "category": "core",
-      "size": 4.7,
+      "size": 5.9,
       "files": [
-        "core/optionVisibilityRuleGenerator.js"
+        "core/optionVisibility.js"
       ],
       "description": "Dynamic show/hide based on ancestor state with option:attribute=\"value\"",
       "exports": {}
@@ -678,7 +678,7 @@
     "save-toast": "./core/saveToast.js",
     "edit-mode-helpers": "./core/adminSystem.js",
     "persist": "./core/enablePersistentFormInputValues.js",
-    "option-visibility": "./core/optionVisibilityRuleGenerator.js",
+    "option-visibility": "./core/optionVisibility.js",
     "edit-mode": "./core/editmodeSystem.js",
     "event-attrs": "./custom-attributes/events.js",
     "ajax-elements": "./custom-attributes/ajaxElements.js",

package/package.json

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

package/core/optionVisibilityRuleGenerator.js

@@ -1,171 +0,0 @@
-/**
-* 
-*  Automatically show/hide elements with "option" attributes based on ancestors' attributes.
-*  
-*  # Usage:
-*  optionVisibilityRuleGenerator.debug = true;
-*  optionVisibilityRuleGenerator.start();
-*  
-*  # HTML Example:
-*  <div editmode="true">                  <!-- Parent element with matching attribute -->
-*    <div option:editmode="true"></div>   <!-- This will be visible -->
-*    <div option:editmode="false"></div>  <!-- This will be hidden -->
-*  </div>
-*  
-*  Elements with `option:` attributes will be:
-*  - Visible if any ancestor has matching attribute
-*  - Hidden if no ancestor has matching attribute
-* 
-*/
-import Mutation from "../utilities/mutation.js";
-
-const optionVisibilityRuleGenerator = {
-  debug: false,
-  styleElement: null,
-
-  HIDDEN_STYLES: `
-    visibility: hidden;
-    pointer-events: none;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-  `,
-  VISIBLE_STYLES: `
-    visibility: visible;
-    pointer-events: auto;
-    width: auto;
-    height: auto;
-    overflow: visible;
-  `,
-
-  STYLE_CLASS: 'option-visibility-styles',
-
-  log(message, ...args) {
-    if (this.debug) {
-      console.log(`[OptionVisibilityRuleGenerator] ${message}`, ...args);
-    }
-  },
-
-  findOptionAttributes() {
-    const html = document.documentElement.outerHTML;
-    const optionAttributes = new Set(); // Using Set for unique combinations
-    const optionRegex = /option:([^\s"']+)=["']([^"']+)["']/g; // regex: "option:" + (anything but space and quote) + equal + quote + (anything but quote) + quote
-    
-    let match;
-    while ((match = optionRegex.exec(html)) !== null) {
-      // Create a unique key for each name-value pair
-      const key = JSON.stringify({name: match[1], value: match[2]});
-      optionAttributes.add(key);
-    }
-    
-    // Convert back to objects
-    return Array.from(optionAttributes).map(key => JSON.parse(key));
-  },
-
-  minifyCSS(css) {
-    return css
-      .replace(/\s+/g, ' ')
-      .replace(/{\s+/g, '{')
-      .replace(/\s+}/g, '}')
-      .replace(/;\s+/g, ';')
-      .replace(/:\s+/g, ':')
-      .trim();
-  },
-
-  generateCSSRules(optionAttributes) {
-    const rules = [];
-    
-    optionAttributes.forEach(({name, value}) => {
-      const escapedValue = value.replace(/["\\]/g, '\\$&');
-      
-      rules.push(`
-        [option\\:${name}="${escapedValue}"] {
-          ${this.HIDDEN_STYLES}
-        }
-      `);
-      
-      rules.push(`
-        [${name}="${escapedValue}"] [option\\:${name}="${escapedValue}"] {
-          ${this.VISIBLE_STYLES}
-        }
-      `);
-    });
-    
-    return this.minifyCSS(rules.join('\n'));
-  },
-
-  generateRules() {
-   try {
-     this.log('Starting rule generation');
-     
-     const optionAttributes = this.findOptionAttributes();
-     this.log('Found option attributes:', optionAttributes);
-     
-     // Early return if no option attributes found
-     if (optionAttributes.length === 0) {
-       this.log('No option attributes found, skipping style creation');
-       return;
-     }
-     
-     const cssRules = this.generateCSSRules(optionAttributes);
-     this.log('Generated CSS rules:', cssRules);
-     
-     // Check if we already have these exact rules
-     const existingStyleElement = document.head.querySelector(`.${this.STYLE_CLASS}`);
-     if (existingStyleElement && existingStyleElement.textContent.trim() === cssRules) {
-       this.log('Rules unchanged, skipping update');
-       return;
-     }
-     
-     // Create new style element
-     const newStyleElement = document.createElement('style');
-     newStyleElement.className = this.STYLE_CLASS;
-     newStyleElement.textContent = cssRules;
-     document.head.appendChild(newStyleElement);
-     
-     // Remove all previous style elements
-     document.head
-       .querySelectorAll(`.${this.STYLE_CLASS}`)
-       .forEach(el => {
-         if (el !== newStyleElement) {
-           el.remove();
-         }
-       });
-     
-     this.styleElement = newStyleElement;
-     
-     this.log('Rule generation complete');
-   } catch (error) {
-     console.error('Error generating visibility rules:', error);
-   }
-  },
-
-  start() {
-    Mutation.onAnyChange({
-      selectorFilter: el => [...el.attributes].some(attr => attr.name.startsWith('option:')),
-      debounce: 200
-    }, () => {
-      this.generateRules();
-    });
-    this.generateRules();
-    this.log('Started observing DOM mutations');
-  },
-};
-
-// Auto-export to window unless suppressed by loader
-if (!window.__hyperclayNoAutoExport) {
-  window.optionVisibilityRuleGenerator = optionVisibilityRuleGenerator;
-  window.hyperclay = window.hyperclay || {};
-  window.hyperclay.optionVisibilityRuleGenerator = optionVisibilityRuleGenerator;
-  window.h = window.hyperclay;
-}
-
-export default optionVisibilityRuleGenerator;
-
-// Auto-initialize
-export function init() {
-  optionVisibilityRuleGenerator.start();
-}
-
-// Auto-init when module is imported
-init();