hyperclayjs 1.1.2 → 1.3.0

package/hyperclay.js

@@ -1,437 +1,67 @@
 /**
- * HyperclayJS - Self-detecting module loader
- * Automatically loads requested features with dependency resolution
+ * HyperclayJS v1.3.0 - Minimal Browser-Native Loader
  *
- * USAGE:
+ * Modules self-export to window.hyperclay when imported.
+ * Modules auto-init when imported (no separate init call needed).
+ * Uses top-level await so subsequent module scripts automatically wait.
  *
  * <!-- Load with a preset -->
  * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal" type="module"></script>
- * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=standard" type="module"></script>
- * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=everything" type="module"></script>
- *
  * <!-- Load specific features -->
  * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?features=save,admin,toast" type="module"></script>
- *
- * <!-- Combine presets and features -->
- * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=minimal&features=modals,ajax" type="module"></script>
- *
- * Available presets: minimal, standard, everything
- * See https://github.com/hyperclay/hyperclayjs for full list of features
+ * <!-- Load preset with exclusions -->
+ * <script src="https://cdn.jsdelivr.net/npm/hyperclayjs@1/hyperclay.js?preset=everything&exclude=tailwind-play,behavior-collector" type="module"></script>
  *
  * AUTO-GENERATED FILE - Do not edit directly
- * Generated from module-dependency-graph.json
  */
 
-(async function() {
-  'use strict';
-
-  // Create a promise that resolves when hyperclay is ready
-  let hyperclayReadyResolve;
-  window.hyperclayReady = new Promise(resolve => {
-    hyperclayReadyResolve = resolve;
-  });
-
-  // Initialize namespaces
-  window.hyperclay = window.hyperclay || {};
-
-  // Module dependency map - AUTO-GENERATED
-  const moduleDependencies = {
-  "save-core": {
-    "path": "./core/savePageCore.js",
-    "dependencies": [
-      "cookie"
-    ],
-    "exports": {
-      "savePage": [
-        "hyperclay"
-      ]
-    }
-  },
-  "save": {
-    "path": "./core/savePage.js",
-    "dependencies": [
-      "save-core",
-      "toast",
-      "mutation",
-      "throttle"
-    ],
-    "exports": {
-      "beforeSave": [
-        "hyperclay"
-      ],
-      "savePage": [
-        "hyperclay"
-      ],
-      "replacePageWith": [
-        "hyperclay"
-      ],
-      "initHyperclaySaveButton": [
-        "hyperclay"
-      ],
-      "initSaveKeyboardShortcut": [
-        "hyperclay"
-      ],
-      "initSavePageOnChange": [
-        "hyperclay"
-      ]
-    }
-  },
-  "admin": {
-    "path": "./core/adminSystem.js",
-    "dependencies": [
-      "save",
-      "dom-ready"
-    ],
-    "exports": {}
-  },
-  "persist": {
-    "path": "./core/enablePersistentFormInputValues.js",
-    "dependencies": [
-      "save"
-    ],
-    "exports": {
-      "enablePersistentFormInputValues": [
-        "hyperclay"
-      ]
-    }
-  },
-  "options": {
-    "path": "./core/optionVisibilityRuleGenerator.js",
-    "dependencies": [
-      "mutation"
-    ],
-    "exports": {
-      "optionVisibilityRuleGenerator": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "editmode": {
-    "path": "./core/editmodeSystem.js",
-    "dependencies": [
-      "save",
-      "dom-ready"
-    ],
-    "exports": {
-      "toggleEditMode": [
-        "hyperclay"
-      ],
-      "isEditMode": [
-        "hyperclay"
-      ],
-      "isOwner": [
-        "hyperclay"
-      ]
-    }
-  },
-  "events": {
-    "path": "./custom-attributes/events.js",
-    "dependencies": [
-      "mutation",
-      "window-load"
-    ],
-    "exports": {}
-  },
-  "ajax": {
-    "path": "./custom-attributes/ajaxElements.js",
-    "dependencies": [
-      "get-data-from-form"
-    ],
-    "exports": {}
-  },
-  "sortable": {
-    "path": "./custom-attributes/sortable.js",
-    "dependencies": [
-      "mutation"
-    ],
-    "exports": {
-      "Sortable": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "helpers": {
-    "path": "./custom-attributes/domHelpers.js",
-    "dependencies": [
-      "nearest"
-    ],
-    "exports": {
-      "initCustomAttributes": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "inputs": {
-    "path": "./custom-attributes/inputHelpers.js",
-    "dependencies": [],
-    "exports": {}
-  },
-  "prompts": {
-    "path": "./ui/prompts.js",
-    "dependencies": [
-      "dom-ready",
-      "copy-to-clipboard",
-      "modals",
-      "toast"
-    ],
-    "exports": {
-      "ask": [
-        "window",
-        "hyperclay"
-      ],
-      "consent": [
-        "window",
-        "hyperclay"
-      ],
-      "tell": [
-        "window",
-        "hyperclay"
-      ],
-      "snippet": [
-        "hyperclay"
-      ],
-      "showApiKey": [
-        "hyperclay"
-      ]
-    }
-  },
-  "toast": {
-    "path": "./ui/toast.js",
-    "dependencies": [],
-    "exports": {
-      "toast": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "modals": {
-    "path": "./ui/theModal.js",
-    "dependencies": [],
-    "exports": {
-      "themodal": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "info": {
-    "path": "./ui/info.js",
-    "dependencies": [
-      "dom-ready",
-      "modals"
-    ],
-    "exports": {
-      "info": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "tailwind-play": {
-    "path": "./vendor/tailwind-play.js",
-    "dependencies": [
-      "style-injection"
-    ],
-    "exports": {}
-  },
-  "mutation": {
-    "path": "./utilities/mutation.js",
-    "dependencies": [],
-    "exports": {
-      "Mutation": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "nearest": {
-    "path": "./utilities/nearest.js",
-    "dependencies": [],
-    "exports": {
-      "nearest": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "cookie": {
-    "path": "./utilities/cookie.js",
-    "dependencies": [],
-    "exports": {
-      "cookie": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "throttle": {
-    "path": "./utilities/throttle.js",
-    "dependencies": [],
-    "exports": {
-      "throttle": [
-        "hyperclay"
-      ]
-    }
-  },
-  "debounce": {
-    "path": "./utilities/debounce.js",
-    "dependencies": [],
-    "exports": {
-      "debounce": [
-        "hyperclay"
-      ]
-    }
-  },
-  "dom-ready": {
-    "path": "./dom-utilities/onDomReady.js",
-    "dependencies": [],
-    "exports": {
-      "onDomReady": [
-        "hyperclay"
-      ]
-    }
-  },
-  "window-load": {
-    "path": "./dom-utilities/onLoad.js",
-    "dependencies": [],
-    "exports": {
-      "onLoad": [
-        "hyperclay"
-      ]
-    }
-  },
-  "alljs": {
-    "path": "./dom-utilities/All.js",
-    "dependencies": [],
-    "exports": {
-      "All": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "style-injection": {
-    "path": "./dom-utilities/insertStyleTag.js",
-    "dependencies": [],
-    "exports": {
-      "insertStyleTag": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "get-data-from-form": {
-    "path": "./dom-utilities/getDataFromForm.js",
-    "dependencies": [],
-    "exports": {
-      "getDataFromForm": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "dom-morphing": {
-    "path": "./vendor/idiomorph.min.js",
-    "dependencies": [],
-    "exports": {
-      "Idiomorph": [
-        "hyperclay"
-      ]
-    }
-  },
-  "slugify": {
-    "path": "./string-utilities/slugify.js",
-    "dependencies": [],
-    "exports": {
-      "slugify": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "emmet-html": {
-    "path": "./string-utilities/emmet-html.js",
-    "dependencies": [],
-    "exports": {
-      "emmet": [
-        "hyperclay"
-      ]
-    }
-  },
-  "copy-to-clipboard": {
-    "path": "./string-utilities/copy-to-clipboard.js",
-    "dependencies": [],
-    "exports": {
-      "copyToClipboard": [
-        "hyperclay"
-      ]
-    }
-  },
-  "query-parser": {
-    "path": "./string-utilities/query.js",
-    "dependencies": [],
-    "exports": {
-      "query": [
-        "window",
-        "hyperclay"
-      ]
-    }
-  },
-  "behavior-collector": {
-    "path": "./communication/behaviorCollector.js",
-    "dependencies": [],
-    "exports": {
-      "behaviorCollector": [
-        "hyperclay"
-      ]
-    }
-  },
-  "send-message": {
-    "path": "./communication/sendMessage.js",
-    "dependencies": [
-      "behavior-collector",
-      "get-data-from-form",
-      "toast"
-    ],
-    "exports": {
-      "sendMessage": [
-        "hyperclay"
-      ]
-    }
-  },
-  "file-upload": {
-    "path": "./communication/uploadFile.js",
-    "dependencies": [
-      "copy-to-clipboard",
-      "toast",
-      "debounce"
-    ],
-    "exports": {
-      "uploadFile": [
-        "hyperclay"
-      ],
-      "createFile": [
-        "hyperclay"
-      ],
-      "uploadFileBasic": [
-        "hyperclay"
-      ]
-    }
-  }
+window.hyperclay = window.hyperclay || {};
+window.hyperclayModules = window.hyperclayModules || {};
+
+const MODULE_PATHS = {
+  "save-core": "./core/savePageCore.js",
+  "save-system": "./core/savePage.js",
+  "autosave": "./core/autosave.js",
+  "admin": "./core/adminSystem.js",
+  "persist": "./core/enablePersistentFormInputValues.js",
+  "option-visibility": "./core/optionVisibilityRuleGenerator.js",
+  "edit-mode": "./core/editmodeSystem.js",
+  "event-attrs": "./custom-attributes/events.js",
+  "ajax-elements": "./custom-attributes/ajaxElements.js",
+  "sortable": "./custom-attributes/sortable.js",
+  "dom-helpers": "./custom-attributes/domHelpers.js",
+  "input-helpers": "./custom-attributes/inputHelpers.js",
+  "dialogs": "./ui/prompts.js",
+  "toast": "./ui/toast.js",
+  "toast-hyperclay": "./ui/toast-hyperclay.js",
+  "modal": "./ui/theModal.js",
+  "tailwind-play": "./vendor/tailwind-play.js",
+  "mutation": "./utilities/mutation.js",
+  "nearest": "./utilities/nearest.js",
+  "cookie": "./utilities/cookie.js",
+  "throttle": "./utilities/throttle.js",
+  "debounce": "./utilities/debounce.js",
+  "dom-ready": "./dom-utilities/onDomReady.js",
+  "window-load": "./dom-utilities/onLoad.js",
+  "all-js": "./dom-utilities/All.js",
+  "style-injection": "./dom-utilities/insertStyleTag.js",
+  "form-data": "./dom-utilities/getDataFromForm.js",
+  "idiomorph": "./vendor/idiomorph.min.js",
+  "slugify": "./string-utilities/slugify.js",
+  "emmet": "./string-utilities/emmet-html.js",
+  "clipboard": "./string-utilities/copy-to-clipboard.js",
+  "query-params": "./string-utilities/query.js",
+  "behavior-collector": "./communication/behaviorCollector.js",
+  "send-message": "./communication/sendMessage.js",
+  "file-upload": "./communication/uploadFile.js"
 };
-
-  // Preset configurations - AUTO-GENERATED
-  const presets = {
+const PRESETS = {
   "minimal": {
     "name": "Minimal",
     "description": "Essential features for basic editing",
     "modules": [
       "save-core",
-      "save",
+      "save-system",
       "admin",
       "toast"
     ]
@@ -441,12 +71,12 @@
     "description": "Standard feature set for most use cases",
     "modules": [
       "save-core",
-      "save",
+      "save-system",
       "admin",
       "persist",
-      "ajax",
-      "events",
-      "helpers",
+      "option-visibility",
+      "event-attrs",
+      "dom-helpers",
       "toast"
     ]
   },
@@ -455,20 +85,21 @@
     "description": "All available features",
     "modules": [
       "save-core",
-      "save",
+      "save-system",
+      "autosave",
       "admin",
       "persist",
-      "options",
-      "editmode",
-      "events",
-      "ajax",
+      "option-visibility",
+      "edit-mode",
+      "event-attrs",
+      "ajax-elements",
       "sortable",
-      "helpers",
-      "inputs",
-      "prompts",
+      "dom-helpers",
+      "input-helpers",
+      "dialogs",
       "toast",
-      "modals",
-      "info",
+      "toast-hyperclay",
+      "modal",
       "tailwind-play",
       "mutation",
       "nearest",
@@ -477,14 +108,14 @@
       "debounce",
       "dom-ready",
       "window-load",
-      "alljs",
+      "all-js",
       "style-injection",
-      "get-data-from-form",
-      "dom-morphing",
+      "form-data",
+      "idiomorph",
       "slugify",
-      "emmet-html",
-      "copy-to-clipboard",
-      "query-parser",
+      "emmet",
+      "clipboard",
+      "query-params",
       "behavior-collector",
       "send-message",
       "file-upload"
@@ -492,247 +123,52 @@
   }
 };
 
-  // Find our script tag
-  const currentScript = document.currentScript ||
-    Array.from(document.scripts).find(s =>
-      s.src && (s.src.includes('hyperclay.js') || s.src.includes('hyperclay-starter-kit.js'))
-    );
-
-  if (!currentScript) {
-    console.error('HyperclayJS: Could not find script tag');
-    return;
-  }
-
-  // Parse URL parameters
-  const scriptUrl = new URL(currentScript.src);
-  const featuresParam = scriptUrl.searchParams.get('features');
-  const presetParam = scriptUrl.searchParams.get('preset');
-
-  // Determine requested features
-  let requestedFeatures = [];
-
-  if (presetParam && presets[presetParam]) {
-    requestedFeatures = presets[presetParam].modules;
-    console.log(`HyperclayJS: Loading preset "${presetParam}"`);
-  } else if (featuresParam) {
-    requestedFeatures = featuresParam.split(',').map(f => f.trim());
-    console.log(`HyperclayJS: Loading features:`, requestedFeatures);
-  } else {
-    // Default to minimal preset
-    requestedFeatures = presets.minimal.modules;
-    console.log('HyperclayJS: No features specified, loading minimal preset');
-  }
-
-  // Resolve all dependencies
-  function resolveDependencies(features) {
-    const resolved = new Set();
-    const queue = [...features];
-
-    while (queue.length > 0) {
-      const feature = queue.shift();
-
-      if (resolved.has(feature)) continue;
-
-      const module = moduleDependencies[feature];
-      if (!module) {
-        console.warn(`HyperclayJS: Unknown feature "${feature}"`);
-        continue;
-      }
-
-      // Add dependencies to queue
-      if (module.dependencies && module.dependencies.length > 0) {
-        module.dependencies.forEach(dep => {
-          if (!resolved.has(dep)) {
-            queue.push(dep);
-          }
-        });
-      }
-
-      // Mark this feature as resolved
-      resolved.add(feature);
-    }
-
-    return Array.from(resolved);
-  }
-
-  // Topological sort for correct load order
-  function topologicalSort(features) {
-    const visited = new Set();
-    const result = [];
-
-    function visit(feature) {
-      if (visited.has(feature)) return;
-      visited.add(feature);
-
-      const module = moduleDependencies[feature];
-      if (module && module.dependencies) {
-        module.dependencies.forEach(dep => {
-          if (features.includes(dep)) {
-            visit(dep);
-          }
-        });
-      }
-
-      result.push(feature);
-    }
-
-    features.forEach(feature => visit(feature));
-    return result;
-  }
-
-  // Get base URL for module imports
-  function getBaseUrl() {
-    const scriptDir = scriptUrl.href.substring(0, scriptUrl.href.lastIndexOf('/'));
-    return scriptDir;
-  }
-
-  // Load a module
-  async function loadModule(feature, baseUrl) {
-    const module = moduleDependencies[feature];
-    if (!module) return null;
-
-    const modulePath = `${baseUrl}/${module.path}`;
-
-    try {
-      console.log(`HyperclayJS: Loading ${feature}...`);
-      const loaded = await import(modulePath);
-
-      // Auto-initialize if the module exports an init function
-      if (loaded.init && typeof loaded.init === 'function') {
-        loaded.init();
-      }
-
-      return loaded;
-    } catch (error) {
-      console.error(`HyperclayJS: Failed to load ${feature}:`, error);
-      return null;
-    }
-  }
-
-  // Main execution
-  try {
-    // Resolve all dependencies
-    const allFeatures = resolveDependencies(requestedFeatures);
-
-    // Sort in correct load order
-    const loadOrder = topologicalSort(allFeatures);
-
-    console.log('HyperclayJS: Load order:', loadOrder);
-
-    // Get base URL
-    const baseUrl = getBaseUrl();
-
-    // Track loaded modules
-    const loadedModules = {};
-
-    // Load modules in order
-    for (const feature of loadOrder) {
-      const module = await loadModule(feature, baseUrl);
-      if (module) {
-        loadedModules[feature] = module;
-      }
-    }
-
-    // Store loaded modules globally for access
-    window.hyperclayModules = loadedModules;
-
-    // Attach exports to window based on module configuration
-    for (const feature of loadOrder) {
-      const module = loadedModules[feature];
-      const moduleConfig = moduleDependencies[feature];
-
-      if (!module || !moduleConfig.exports) continue;
-
-      // For each export in the module's configuration
-      for (const [exportName, locations] of Object.entries(moduleConfig.exports)) {
-        // Try to get the export - check both named export and default export
-        let exportValue = module[exportName];
-
-        // If not found as named export, try default export
-        if (!exportValue && module.default) {
-          exportValue = module.default;
-        }
-
-        if (!exportValue) continue;
-
-        // Attach to each configured location
-        locations.forEach(location => {
-          if (location === 'window') {
-            window[exportName] = exportValue;
-          } else if (location === 'hyperclay') {
-            window.hyperclay[exportName] = exportValue;
-          }
-        });
-      }
-    }
+// Parse URL
+const script = document.currentScript;
+const url = new URL(script.src);
+const preset = url.searchParams.get('preset');
+const features = url.searchParams.get('features');
+const exclude = url.searchParams.get('exclude');
+const debug = url.searchParams.get('debug') === 'true';
+const baseUrl = url.href.substring(0, url.href.lastIndexOf('/'));
+
+// Get requested features
+let requested = [];
+if (preset && PRESETS[preset]) {
+  requested = [...PRESETS[preset].modules];
+} else if (features) {
+  requested = features.split(',').map(f => f.trim());
+} else {
+  requested = [...PRESETS.minimal.modules];
+}
 
-    // Create window.h alias
-    window.h = window.hyperclay;
+// Apply exclusions
+if (exclude) {
+  const excluded = new Set(exclude.split(',').map(f => f.trim()));
+  requested = requested.filter(f => !excluded.has(f));
+}
 
-    // Fire custom event when loading is complete
-    window.dispatchEvent(new CustomEvent('hyperclayReady', {
-      detail: {
-        features: loadOrder,
-        modules: loadedModules
-      }
-    }));
+// Modules that extend prototypes must load before modules that execute user code
+const LOAD_FIRST = new Set(['dom-helpers', 'all-js']);
 
-    // Resolve the ready promise
-    if (hyperclayReadyResolve) {
-      hyperclayReadyResolve(window.hyperclay);
-    }
+const loadModules = (modules) => Promise.all(modules.map(async feature => {
+  const path = MODULE_PATHS[feature];
+  if (!path) throw new Error(`Unknown feature: ${feature}`);
+  if (debug) console.log(`HyperclayJS: Loading ${feature}...`);
+  const module = await import(`${baseUrl}/${path}`);
+  window.hyperclayModules[feature] = module;
+}));
 
-    console.log('HyperclayJS: All modules loaded successfully');
+if (debug) console.log('HyperclayJS: Loading features:', requested);
 
-    // Show feature summary - AUTO-GENERATED
-    const sizes = {
-  "save-core": 5.9,
-  "save": 4.9,
-  "admin": 5.300000000000001,
-  "persist": 2.2,
-  "options": 4.4,
-  "editmode": 1.4,
-  "events": 3.5,
-  "ajax": 2.7,
-  "sortable": 117.89999999999999,
-  "helpers": 5.4,
-  "inputs": 1.2,
-  "prompts": 7.7,
-  "toast": 7.3,
-  "modals": 18.4,
-  "info": 3.2,
-  "tailwind-play": 362.3,
-  "mutation": 12.8,
-  "nearest": 3.2,
-  "cookie": 1.3,
-  "throttle": 0.6,
-  "debounce": 0.2,
-  "dom-ready": 0.2,
-  "window-load": 0.2,
-  "alljs": 13.9,
-  "style-injection": 0.8,
-  "get-data-from-form": 1.7,
-  "dom-morphing": 7.9,
-  "slugify": 0.7,
-  "emmet-html": 1.4,
-  "copy-to-clipboard": 0.9,
-  "query-parser": 0.1,
-  "behavior-collector": 5.2,
-  "send-message": 1.2,
-  "file-upload": 10.4
-};
-    const totalSize = loadOrder.reduce((sum, feature) => {
-      return sum + (sizes[feature] || 0);
-    }, 0);
+// Load in waves: prototype extenders first, then everything else
+const first = requested.filter(f => LOAD_FIRST.has(f));
+const rest = requested.filter(f => !LOAD_FIRST.has(f));
 
-    console.log(`HyperclayJS: Loaded ${loadOrder.length} modules (~${totalSize.toFixed(1)}KB)`);
+if (first.length) await loadModules(first);
+if (rest.length) await loadModules(rest);
 
-  } catch (error) {
-    console.error('HyperclayJS: Fatal error during initialization:', error);
-  }
-})();
+// Create h alias
+window.h = window.hyperclay;
 
-// Export for use in build tools
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { version: '1.0.0' };
-}
+if (debug) console.log('HyperclayJS: Ready');