hyperclayjs 1.21.0 → 1.22.0

package/README.md

@@ -74,7 +74,7 @@ import 'hyperclayjs/presets/standard.js';
 | Module | Size | Description |
 |--------|------|-------------|
 | ajax-elements | 2.6KB | [ajax-form], [ajax-button] for async form submissions |
-| dom-helpers | 6.2KB | el.nearest, el.val, el.text, el.exec, el.cycle |
+| dom-helpers | 6.8KB | el.nearest, el.val, el.text, el.exec, el.cycle |
 | event-attrs | 4.6KB | [onclickaway], [onclickchildren], [onclone], [onpagemutation], [onrender] |
 | input-helpers | 3.9KB | [prevent-enter], [autosize] for textareas |
 | onaftersave | 1KB | [onaftersave] attribute - run JS when save status changes |
@@ -137,12 +137,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 (~80.9KB)
+### Standard (~81.5KB)
 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 (~215.5KB)
+### Everything (~216.1KB)
 All available features
 
 Includes all available modules across all categories.

package/package.json

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

package/src/custom-attributes/domHelpers.js

@@ -8,7 +8,23 @@ function init () {
     return;
   }
 
+  // elem.el.menu returns nearest element with a "menu" attribute (alias for elem.nearest.menu)
   // elem.nearest.project returns nearest element with a "project" attribute
+  Object.defineProperty(HTMLElement.prototype, 'el', {
+    configurable: true,
+    get: function() {
+      let element = this;
+
+      const handler = {
+        get(target, prop) {
+          return nearest(element, `[${prop}], .${prop}`);
+        }
+      };
+
+      return new Proxy({}, handler);
+    }
+  });
+
   Object.defineProperty(HTMLElement.prototype, 'nearest', {
     configurable: true,
     get: function() {
@@ -183,6 +199,16 @@ function init () {
     if (next) this.setAttribute(setAttr, next);
   };
 
+  Element.prototype.show = function() {
+    this.style.display = '';
+    return this;
+  };
+
+  Element.prototype.hide = function() {
+    this.style.display = 'none';
+    return this;
+  };
+
 }
 
 // Auto-export to window unless suppressed by loader

package/src/hyperclay.js

@@ -1,7 +1,7 @@
 /**
  * DO NOT EDIT THIS FILE DIRECTLY — it is generated from build/hyperclay.template.js
  *
- * HyperclayJS v1.21.0 - Minimal Browser-Native Loader
+ * HyperclayJS v1.22.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.