@benqoder/beam 0.3.0 → 0.4.1

package/README.md

@@ -125,6 +125,42 @@ export function greet(c) {
 <div id="greeting"></div>
 ```
 
+### Including Input Values
+
+Use `beam-include` to collect values from input elements and include them in action params. Elements are found by `beam-id`, `id`, or `name` (in that priority order):
+
+```html
+<!-- Define inputs with beam-id, id, or name -->
+<input beam-id="name" type="text" value="Ben"/>
+<input id="email" type="email" value="ben@example.com"/>
+<input name="age" type="number" value="30"/>
+<input beam-id="subscribe" type="checkbox" checked/>
+
+<!-- Button includes specific inputs -->
+<button
+  beam-action="saveUser"
+  beam-include="name,email,age,subscribe"
+  beam-data-source="form"
+  beam-target="#result"
+>Save</button>
+```
+
+The action receives merged params with proper type conversion:
+```json
+{
+  "source": "form",
+  "name": "Ben",
+  "email": "ben@example.com",
+  "age": 30,
+  "subscribe": true
+}
+```
+
+Type conversion:
+- `checkbox` → `boolean` (checked state)
+- `number`/`range` → `number`
+- All others → `string`
+
 ### Modals
 
 Two ways to open modals:
@@ -308,6 +344,7 @@ Async components are awaited automatically - no manual `Promise.resolve()` or he
 | `beam-action` | Action name to call | `beam-action="increment"` |
 | `beam-target` | CSS selector for where to render response | `beam-target="#counter"` |
 | `beam-data-*` | Pass data to the action | `beam-data-id="123"` |
+| `beam-include` | Include values from inputs by beam-id, id, or name | `beam-include="name,email,age"` |
 | `beam-swap` | How to swap content: `morph`, `append`, `prepend`, `replace` | `beam-swap="append"` |
 | `beam-confirm` | Show confirmation dialog before action | `beam-confirm="Delete this item?"` |
 | `beam-confirm-prompt` | Require typing text to confirm | `beam-confirm-prompt="Type DELETE\|DELETE"` |
@@ -373,7 +410,7 @@ return ctx.drawer(render(<MyDrawer />), { position: 'left', size: 'medium' })
 | `beam-watch-if` | Condition that must be true to trigger | `beam-watch-if="value.length >= 3"` |
 | `beam-cast` | Cast input value: `number`, `integer`, `boolean`, `trim` | `beam-cast="number"` |
 | `beam-loading-class` | Add class to input while request is in progress | `beam-loading-class="loading"` |
-| `beam-keep` | Preserve input focus and cursor position after morph | `beam-keep` |
+| `beam-keep` | Prevent element from being morphed during updates | `beam-keep` |
 
 ### Dirty Form Tracking
 
@@ -746,9 +783,9 @@ Add a class to the input while the request is in progress:
 </style>
 ```
 
-### Preserving Focus
+### Preventing Element Replacement
 
-Use `beam-keep` to preserve focus and cursor position after the response morphs the DOM:
+Use `beam-keep` to prevent an element from being morphed/replaced during updates. This keeps the element exactly as-is, preserving its state (focus, value, etc.):
 
 ```html
 <input
@@ -760,6 +797,8 @@ Use `beam-keep` to preserve focus and cursor position after the response morphs
 />
 ```
 
+Since the input isn't replaced, focus and cursor position are naturally preserved.
+
 ### Auto-Save on Blur
 
 Trigger action when the user leaves the field:

package/dist/client.d.ts

@@ -31,6 +31,8 @@ interface CallOptions {
     swap?: string;
 }
 declare function clearScrollState(actionOrAll?: string | boolean): void;
+declare function checkWsConnected(): boolean;
+declare function manualReconnect(): Promise<BeamServerStub>;
 declare const beamUtils: {
     showToast: typeof showToast;
     closeModal: typeof closeModal;
@@ -38,6 +40,8 @@ declare const beamUtils: {
     clearCache: typeof clearCache;
     clearScrollState: typeof clearScrollState;
     isOnline: () => boolean;
+    isConnected: typeof checkWsConnected;
+    reconnect: typeof manualReconnect;
     getSession: () => Promise<BeamServerStub>;
 };
 type ActionCaller = (data?: Record<string, unknown>, options?: string | CallOptions) => Promise<ActionResponse>;

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AA8B9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACvF;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAQD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AA82BzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AAkCD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAkrBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;AAmlCD,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,iBAAS,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0B9D;AAGD,QAAA,MAAM,SAAS;;;;;;;sBAlpFO,OAAO,CAAC,cAAc,CAAC;CA0pF5C,CAAA;AAGD,KAAK,YAAY,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAA;AAE/G,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,OAAO,SAAS,GAAG;YACvB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAAA;SAC/B,CAAA;KACF;CACF"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AA8B9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IAClE,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CACvF;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAQD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAq8BzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AAkCD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAkrBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;AAikCD,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,iBAAS,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0B9D;AAGD,iBAAS,gBAAgB,IAAI,OAAO,CAEnC;AAED,iBAAS,eAAe,IAAI,OAAO,CAAC,cAAc,CAAC,CAGlD;AAED,QAAA,MAAM,SAAS;;;;;;;;;sBA1qFO,OAAO,CAAC,cAAc,CAAC;CAorF5C,CAAA;AAGD,KAAK,YAAY,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAA;AAE/G,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,OAAO,SAAS,GAAG;YACvB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAAA;SAC/B,CAAA;KACF;CACF"}

package/dist/client.js

@@ -27,6 +27,10 @@ function getAuthToken() {
 let isOnline = navigator.onLine;
 let rpcSession = null;
 let connectingPromise = null;
+let wsConnected = false;
+let reconnectAttempts = 0;
+const MAX_RECONNECT_ATTEMPTS = 5;
+const RECONNECT_DELAY_BASE = 1000;
 // Client callback handler for server-initiated updates
 function handleServerEvent(event, data) {
     // Dispatch custom event for app to handle
@@ -42,6 +46,43 @@ function handleServerEvent(event, data) {
         window.dispatchEvent(new CustomEvent('beam:refresh', { detail: { selector } }));
     }
 }
+// Handle WebSocket disconnection
+function handleWsDisconnect(error) {
+    console.warn('[beam] WebSocket disconnected:', error);
+    wsConnected = false;
+    rpcSession = null;
+    connectingPromise = null;
+    // Dispatch event for app to handle
+    window.dispatchEvent(new CustomEvent('beam:disconnected', { detail: { error } }));
+    document.body.classList.add('beam-disconnected');
+    // Show any disconnect indicators
+    document.querySelectorAll('[beam-disconnected]').forEach((el) => {
+        el.style.display = '';
+    });
+    // Auto-reconnect with exponential backoff
+    if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+        const delay = RECONNECT_DELAY_BASE * Math.pow(2, reconnectAttempts);
+        reconnectAttempts++;
+        console.log(`[beam] Reconnecting in ${delay}ms (${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
+        setTimeout(() => {
+            connect().then(() => {
+                console.log('[beam] Reconnected');
+                document.body.classList.remove('beam-disconnected');
+                document.querySelectorAll('[beam-disconnected]').forEach((el) => {
+                    el.style.display = 'none';
+                });
+                window.dispatchEvent(new CustomEvent('beam:reconnected'));
+            }).catch((err) => {
+                console.error('[beam] Reconnect failed:', err);
+            });
+        }, delay);
+    }
+    else {
+        console.error('[beam] Max reconnect attempts reached');
+        showToast('Connection lost. Please refresh the page.', 'error');
+        window.dispatchEvent(new CustomEvent('beam:reconnect-failed'));
+    }
+}
 function connect() {
     if (connectingPromise) {
         return connectingPromise;
@@ -70,8 +111,16 @@ function connect() {
             authenticatedSession.registerCallback?.(handleServerEvent)?.catch?.(() => {
                 // Server may not support callbacks, that's ok
             });
+            // Handle connection broken (WebSocket disconnect)
+            // @ts-ignore - onRpcBroken is available on capnweb stubs
+            if (typeof authenticatedSession.onRpcBroken === 'function') {
+                authenticatedSession.onRpcBroken(handleWsDisconnect);
+            }
             rpcSession = authenticatedSession;
             connectingPromise = null;
+            wsConnected = true;
+            reconnectAttempts = 0;
+            window.dispatchEvent(new CustomEvent('beam:connected'));
             return authenticatedSession;
         }
         catch (err) {
@@ -174,8 +223,42 @@ function getParams(el) {
             }
         }
     }
+    // Handle beam-include: collect values from referenced inputs
+    const includeAttr = el.getAttribute('beam-include');
+    if (includeAttr) {
+        const ids = includeAttr.split(',').map(id => id.trim());
+        for (const id of ids) {
+            // Find element by beam-id, id, or name (priority order)
+            const inputEl = document.querySelector(`[beam-id="${id}"]`) ||
+                document.getElementById(id) ||
+                document.querySelector(`[name="${id}"]`);
+            if (inputEl) {
+                params[id] = getIncludedInputValue(inputEl);
+            }
+        }
+    }
     return params;
 }
+// Get value from an included input element with proper type conversion
+function getIncludedInputValue(el) {
+    if (el.tagName === 'INPUT') {
+        const input = el;
+        if (input.type === 'checkbox')
+            return input.checked;
+        if (input.type === 'radio')
+            return input.checked ? input.value : '';
+        if (input.type === 'number' || input.type === 'range') {
+            const num = parseFloat(input.value);
+            return isNaN(num) ? 0 : num;
+        }
+        return input.value;
+    }
+    if (el.tagName === 'TEXTAREA')
+        return el.value;
+    if (el.tagName === 'SELECT')
+        return el.value;
+    return '';
+}
 // ============ CONFIRMATION DIALOGS ============
 // Usage: <button beam-action="delete" beam-confirm="Are you sure?">Delete</button>
 // Usage: <button beam-action="delete" beam-confirm.prompt="Type DELETE to confirm|DELETE">Delete</button>
@@ -1757,9 +1840,6 @@ function setupInputWatcher(el) {
                 }
             }
         }
-        // Only restore focus for "input" events, not "change" (blur) events
-        const shouldRestoreFocus = htmlEl.hasAttribute('beam-keep') && eventType === 'input';
-        const activeElement = document.activeElement;
         // Add loading class if specified
         if (loadingClass)
             htmlEl.classList.add(loadingClass);
@@ -1808,19 +1888,6 @@ function setupInputWatcher(el) {
             if (response.script) {
                 executeScript(response.script);
             }
-            // Restore focus if beam-keep is set and this was an input event (not change/blur)
-            if (shouldRestoreFocus && activeElement instanceof HTMLElement) {
-                const newEl = document.querySelector(`[name="${name}"]`);
-                if (newEl && newEl !== activeElement) {
-                    newEl.focus();
-                    if (newEl instanceof HTMLInputElement || newEl instanceof HTMLTextAreaElement) {
-                        const cursorPos = activeElement.selectionStart;
-                        if (cursorPos !== null) {
-                            newEl.setSelectionRange(cursorPos, cursorPos);
-                        }
-                    }
-                }
-            }
         }
         catch (err) {
             console.error('Input watcher error:', err);
@@ -2482,6 +2549,13 @@ function clearScrollState(actionOrAll) {
     }
 }
 // Base utilities that are always available on window.beam
+function checkWsConnected() {
+    return wsConnected;
+}
+function manualReconnect() {
+    reconnectAttempts = 0;
+    return connect();
+}
 const beamUtils = {
     showToast,
     closeModal,
@@ -2489,6 +2563,8 @@ const beamUtils = {
     clearCache,
     clearScrollState,
     isOnline: () => isOnline,
+    isConnected: checkWsConnected,
+    reconnect: manualReconnect,
     getSession: api.getSession,
 };
 // Create a Proxy that handles both utility methods and dynamic action calls

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benqoder/beam",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",