zauberflote 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zauberflote",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Shared UI components for the working examples book.",
   "type": "module",
   "main": "src/ui.js",

package/src/ui.js

@@ -2,11 +2,77 @@ const ui = (() => {
   const pendingApps = [];
   let autoMountScheduled = false;
 
+  // Helper to wrap builders with Proxy for better error messages
+  function wrapBuilder(instance, className, chainHistory = []) {
+    const methods = Object.getOwnPropertyNames(Object.getPrototypeOf(instance))
+      .filter(m => m !== 'constructor' && typeof instance[m] === 'function');
+
+    return new Proxy(instance, {
+      get(target, prop) {
+        // Track chain for error messages
+        target._chainHistory = chainHistory;
+
+        if (prop in target) {
+          const value = target[prop];
+          if (typeof value === 'function') {
+            return function(...args) {
+              const result = value.apply(target, args);
+              // If result is a builder object, wrap it too
+              if (result && typeof result === 'object' && result.constructor &&
+                  result.constructor.name.includes('Builder')) {
+                // Format arguments nicely for the chain
+                const formatArg = (a) => {
+                  if (typeof a === 'string') {
+                    const short = a.length > 20 ? a.slice(0, 20) + '...' : a;
+                    return `"${short.replace(/\n/g, ' ')}"`;
+                  }
+                  if (Array.isArray(a)) return `[${a.length} items]`;
+                  if (typeof a === 'object' && a !== null) return '{...}';
+                  return String(a);
+                };
+                const argStr = args.length > 0 ? `(${args.map(formatArg).join(', ')})` : '()';
+                const newChain = [...chainHistory, `.${prop}${argStr}`];
+                return wrapBuilder(result, result.constructor.name, newChain);
+              }
+              return result;
+            };
+          }
+          return value;
+        }
+
+        // Property doesn't exist - provide helpful error
+        if (typeof prop === 'string' && !prop.startsWith('_')) {
+          const suggestion = methods.find(m => m.toLowerCase().includes(prop.toLowerCase()));
+
+          // Format chain nicely - show last 5 calls max
+          const recentChain = chainHistory.slice(-5);
+          const chainStr = recentChain.length > 0
+            ? (chainHistory.length > 5 ? '  ...\n' : '') + recentChain.map(c => `  ${c}`).join('\n')
+            : '  (start of chain)';
+
+          let errorMsg = `\n[ui.js] ❌ ${className} has no method "${prop}"\n\n`;
+          errorMsg += `Available methods:\n  ${methods.join(', ')}\n\n`;
+          errorMsg += `Chain (last ${Math.min(chainHistory.length, 5)} calls):\n${chainStr}\n  .${prop}() ← ERROR HERE\n`;
+          if (suggestion) {
+            errorMsg += `\n💡 Did you mean: "${suggestion}"?\n`;
+          }
+          console.error(errorMsg);
+
+          // Return a function that throws to give a cleaner stack trace
+          return function() {
+            throw new Error(`[ui.js] ${className}.${prop} is not a function. See console for available methods.`);
+          };
+        }
+        return undefined;
+      }
+    });
+  }
+
   function app(title) {
     const builder = new AppBuilder(title);
     pendingApps.push(builder);
     scheduleAutoMount();
-    return builder;
+    return wrapBuilder(builder, 'AppBuilder', [`ui.app("${title || 'App'}")`]);
   }
 
   class AppBuilder {
@@ -100,6 +166,7 @@ const ui = (() => {
       this.jsonConfig = null;
       this.textConfig = null;
       this.markdownConfig = null;
+      this.htmlContent = null;
       this.customRenderer = null;
       this.renderHook = null;
       this.autoConfig = null;
@@ -169,6 +236,11 @@ const ui = (() => {
       this.storeMap = Object.assign({}, this.storeMap, map);
       return this;
     }
+    hidden() {
+      // Signature: hide section output (useful for store-only reads).
+      this.suppressOutput = true;
+      return this;
+    }
     storeView(key, template) {
       // Signature: chapter-3 JWT/CSRF token display.
       this.storeViewConfig = { key, template: template || `{{${key}}}` };
@@ -189,6 +261,11 @@ const ui = (() => {
       this.textConfig = { text: text || '', path };
       return this;
     }
+    html(content) {
+      // Signature: static HTML content block.
+      this.htmlContent = content || '';
+      return this;
+    }
     markdown(text, path) {
       // Signature: chapter-4/4-1-validation, chapter-0 UI language docs.
       this.markdownConfig = { text: text || '', path };
@@ -292,6 +369,15 @@ const ui = (() => {
       this.path = path;
       return this;
     }
+    delete(path) {
+      // Alias for del() - more intuitive name.
+      return this.del(path);
+    }
+    confirm(message) {
+      // Signature: show confirmation dialog before action.
+      this.confirmMessage = message || 'Are you sure?';
+      return this;
+    }
     upload(path) {
       // Signature: chapter-4/4-8-uploads.
       this.method = 'UPLOAD';
@@ -564,6 +650,13 @@ const ui = (() => {
       root.appendChild(markdownWrap);
     }
 
+    // Static HTML content
+    if (section.htmlContent) {
+      const htmlWrap = document.createElement('div');
+      htmlWrap.innerHTML = section.htmlContent;
+      root.appendChild(htmlWrap);
+    }
+
     let customWrap = null;
     if (section.customRenderer) {
       customWrap = document.createElement('div');
@@ -954,6 +1047,10 @@ const ui = (() => {
           btn.className = 'rounded border border-slate-300 px-3 py-2 text-sm';
           btn.textContent = action.label;
           btn.addEventListener('click', async () => {
+            // Confirmation dialog if configured
+            if (action.confirmMessage && !window.confirm(action.confirmMessage)) {
+              return;
+            }
             const fields = action.fieldList.length > 0 ? action.fieldList : section.rowFields;
             const body = collectFields(fields, rowInputs);
             const path = renderTemplate(action.path, row, section.appStore);
@@ -991,6 +1088,10 @@ const ui = (() => {
     btn.className = 'rounded border border-slate-300 px-3 py-2 text-sm';
     btn.textContent = action.label;
     btn.addEventListener('click', async () => {
+      // Confirmation dialog if configured
+      if (action.confirmMessage && !window.confirm(action.confirmMessage)) {
+        return;
+      }
       const body = Object.assign({}, action.bodyMap, collectFields(action.fieldList, fieldInputs, sectionInputs));
       applySetMap(appStore, action.setMap, body, sectionInputs);
       applyAdjustments(appStore, action.adjustments, sectionInputs);
@@ -1369,6 +1470,10 @@ const ui = (() => {
 
   function getPath(obj, path) {
     if (!obj || !path) return undefined;
+    if (typeof path !== 'string') {
+      console.error(`[ui.js] getPath expected a string path, got ${typeof path}:`, path);
+      return undefined;
+    }
     return path.split('.').reduce((acc, part) => (acc ? acc[part] : undefined), obj);
   }
 
@@ -1376,15 +1481,37 @@ const ui = (() => {
     if (!bindings || bindings.length === 0) return;
     bindings.forEach(({ field, input }) => {
       if (!field.optionsFrom) return;
-      const list = getPath(store, field.optionsFrom);
-      if (!Array.isArray(list)) return;
+
+      // Handle optionsFrom as object { store: "key", value: "id", label: "name" } or string "key"
+      let storePath, valueKey, labelKey;
+      if (typeof field.optionsFrom === 'string') {
+        storePath = field.optionsFrom;
+        valueKey = field.optionValue || 'id';
+        labelKey = field.optionLabel || 'name';
+      } else if (typeof field.optionsFrom === 'object') {
+        storePath = field.optionsFrom.store;
+        valueKey = field.optionsFrom.value || field.optionValue || 'id';
+        labelKey = field.optionsFrom.label || field.optionLabel || 'name';
+      } else {
+        console.error(`[ui.js] optionsFrom must be a string or object, got:`, field.optionsFrom);
+        return;
+      }
+
+      const list = getPath(store, storePath);
+      if (!Array.isArray(list)) {
+        if (list !== undefined) {
+          console.warn(`[ui.js] optionsFrom "${storePath}" is not an array:`, list);
+        }
+        return;
+      }
+
       const current = input.value;
       input.innerHTML = '';
       list.forEach((row) => {
         const option = document.createElement('option');
-        const value = field.optionValue ? getPath(row, field.optionValue) : row.id ?? row.name ?? row.value ?? '';
+        const value = getPath(row, valueKey) ?? row.id ?? row.name ?? row.value ?? '';
         option.value = value;
-        const label = field.optionLabel ? renderTemplate(field.optionLabel, row, store) : String(value);
+        const label = getPath(row, labelKey) ?? String(value);
         option.textContent = label;
         input.appendChild(option);
       });