webspresso 0.0.111 → 0.0.112

package/core/client/adapter/datastar.js

@@ -218,6 +218,22 @@ function createSignalsEngine() {
       }
       return out;
     }
+
+    getSignalCount() {
+      return this._nodes.size;
+    }
+
+    getSubscriberCount() {
+      const runners = new Set();
+      for (const node of this._nodes.values()) {
+        for (const sub of node._subs) {
+          if (!sub.disposed) {
+            runners.add(sub);
+          }
+        }
+      }
+      return runners.size;
+    }
   }
 
   return {
@@ -760,7 +776,7 @@ function getMorphNodeKey(node) {
  * Sync attributes from `fromEl` onto `toEl` while respecting client-owned properties
  * and preserving active focus / form draft states.
  */
-function syncElementAttributes(toEl, fromEl, ownership) {
+function syncElementAttributes(toEl, fromEl, ownership, insideDirtyForm = false) {
   const fromAttrs = fromEl.attributes;
   const toAttrs = Array.from(toEl.attributes);
 
@@ -787,6 +803,9 @@ function syncElementAttributes(toEl, fromEl, ownership) {
     const attr = fromAttrs[i];
     if (ownership.disabled && attr.name === 'disabled') continue;
     if (ownership.show && attr.name === 'hidden') continue;
+    if (attr.name === 'action' && toEl.tagName === 'FORM' && (toEl.__wCustomAction || insideDirtyForm)) {
+      continue;
+    }
     if (toEl.getAttribute(attr.name) !== attr.value) {
       toEl.setAttribute(attr.name, attr.value);
     }
@@ -847,7 +866,7 @@ function morphDomTrees(toEl, fromEl, ctx = {}) {
   const isForm = toEl.tagName === 'FORM';
   const insideDirtyForm = Boolean(ctx.insideDirtyForm || (isForm && isFormDirtyOrPreserved(toEl)));
 
-  syncElementAttributes(toEl, fromEl, ownership);
+  syncElementAttributes(toEl, fromEl, ownership, insideDirtyForm);
 
   if (toEl.tagName === 'INPUT' || toEl.tagName === 'TEXTAREA' || toEl.tagName === 'SELECT') {
     syncFormControlValue(toEl, fromEl, ownership, insideDirtyForm);
@@ -896,7 +915,7 @@ function morphDomTrees(toEl, fromEl, ctx = {}) {
         }
       }
 
-      if (!match) {
+      if (!match && !key) {
         // Look ahead for a compatible unkeyed element with the same tagName and controller attribute
         for (let j = unkeyedCursor; j < existingChildren.length; j++) {
           const cand = existingChildren[j];
@@ -1063,7 +1082,7 @@ function createDatastarAdapter(options = {}) {
    * - Single binding per element/attribute per instance (`WeakMap` guard)
    * - All effects & listeners returned in a single cleanup function
    */
-  const boundElementsByInstance = new Map(); // instanceId -> WeakSet<Element>
+  const boundElementsByInstance = new Map(); // instanceId -> Map<Element, Array<() => void>>
 
   function isWithinControllerScope(rootEl, candidateEl) {
     if (candidateEl === rootEl) return true;
@@ -1164,30 +1183,46 @@ function createDatastarAdapter(options = {}) {
     isLoadingTargetActive,
   }) {
     if (!boundElementsByInstance.has(instanceId)) {
-      boundElementsByInstance.set(instanceId, new WeakSet());
+      boundElementsByInstance.set(instanceId, new Map());
+    }
+    const elementDisposersMap = boundElementsByInstance.get(instanceId);
+
+    // Prune any previously bound elements that were detached/replaced by fragment patches
+    for (const [prevEl, prevDisposers] of Array.from(elementDisposersMap.entries())) {
+      const detached =
+        !prevEl ||
+        prevEl.isConnected === false ||
+        (rootEl && typeof rootEl.contains === 'function' && !rootEl.contains(prevEl));
+      if (detached) {
+        for (let d = 0; d < prevDisposers.length; d++) {
+          try {
+            prevDisposers[d]();
+          } catch (_e) {}
+        }
+        elementDisposersMap.delete(prevEl);
+      }
     }
-    const boundSet = boundElementsByInstance.get(instanceId);
-    const disposers = [];
 
     const elements = collectScopedElements(rootEl);
 
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-      if (boundSet.has(el)) continue;
-      boundSet.add(el);
+      if (elementDisposersMap.has(el)) continue;
+      const elDisposers = [];
+      elementDisposersMap.set(el, elDisposers);
 
       // 1. data-w-text
       if (el.hasAttribute('data-w-text')) {
         const expr = el.getAttribute('data-w-text');
         const stop = engine.effect(() => {
-          if (!isConnected()) return;
+          if (!isConnected() || el.isConnected === false) return;
           const val = evaluateStateExpression(state, expr);
           const text = val === null || val === undefined ? '' : String(val);
           if (el.textContent !== text) {
             el.textContent = text;
           }
         });
-        disposers.push(stop);
+        elDisposers.push(stop);
       }
 
       // 2. data-w-show
@@ -1195,10 +1230,10 @@ function createDatastarAdapter(options = {}) {
         const expr = el.getAttribute('data-w-show');
         const initialDisplay = el.style && el.style.display && el.style.display !== 'none' ? el.style.display : '';
         const stop = engine.effect(() => {
-          if (!isConnected()) return;
+          if (!isConnected() || el.isConnected === false) return;
           toggleElementVisibility(el, Boolean(evaluateStateExpression(state, expr)), initialDisplay);
         });
-        disposers.push(stop);
+        elDisposers.push(stop);
       }
 
       // 2b. data-w-loading & data-w-loading-hide (declarative action/task busy indicators)
@@ -1211,7 +1246,7 @@ function createDatastarAdapter(options = {}) {
           .split(/\s+/)
           .filter(Boolean);
         const stop = engine.effect(() => {
-          if (!isConnected()) return;
+          if (!isConnected() || el.isConnected === false) return;
           const active =
             typeof isLoadingTargetActive === 'function'
               ? Boolean(isLoadingTargetActive(rawSpec))
@@ -1224,14 +1259,14 @@ function createDatastarAdapter(options = {}) {
             }
           }
         });
-        disposers.push(stop);
+        elDisposers.push(stop);
       }
 
       // 3. data-w-disabled
       if (el.hasAttribute('data-w-disabled')) {
         const expr = el.getAttribute('data-w-disabled');
         const stop = engine.effect(() => {
-          if (!isConnected()) return;
+          if (!isConnected() || el.isConnected === false) return;
           const disabled = Boolean(evaluateStateExpression(state, expr));
           if ('disabled' in el) {
             el.disabled = disabled;
@@ -1244,7 +1279,7 @@ function createDatastarAdapter(options = {}) {
             el.removeAttribute('aria-disabled');
           }
         });
-        disposers.push(stop);
+        elDisposers.push(stop);
       }
 
       // 4. data-w-model (two-way binding between input/select/textarea and controller state)
@@ -1286,7 +1321,7 @@ function createDatastarAdapter(options = {}) {
           };
           el.addEventListener('compositionstart', onCompositionStart);
           el.addEventListener('compositionend', onCompositionEnd);
-          disposers.push(() => {
+          elDisposers.push(() => {
             try {
               el.removeEventListener('compositionstart', onCompositionStart);
               el.removeEventListener('compositionend', onCompositionEnd);
@@ -1295,7 +1330,7 @@ function createDatastarAdapter(options = {}) {
 
           // State -> DOM effect (synchronizes changes in state to the DOM control)
           const stopModelEffect = engine.effect(() => {
-            if (!isConnected() || isComposing) return;
+            if (!isConnected() || el.isConnected === false || isComposing) return;
             const currentVal = getByPath(state, modelPath);
 
             if (type === 'checkbox') {
@@ -1319,7 +1354,7 @@ function createDatastarAdapter(options = {}) {
               }
             }
           });
-          disposers.push(stopModelEffect);
+          elDisposers.push(stopModelEffect);
 
           // DOM -> State listener (synchronizes user interactions to state)
           const evtType =
@@ -1328,7 +1363,7 @@ function createDatastarAdapter(options = {}) {
               : 'input';
 
           const onModelInput = () => {
-            if (!isConnected() || isComposing) return;
+            if (!isConnected() || el.isConnected === false || isComposing) return;
 
             if (type === 'checkbox') {
               const cur = getByPath(state, modelPath);
@@ -1360,7 +1395,7 @@ function createDatastarAdapter(options = {}) {
           };
 
           el.addEventListener(evtType, onModelInput);
-          disposers.push(() => el.removeEventListener(evtType, onModelInput));
+          elDisposers.push(() => el.removeEventListener(evtType, onModelInput));
         }
       }
 
@@ -1368,23 +1403,30 @@ function createDatastarAdapter(options = {}) {
       const eventBindings = extractEventBindings(el);
       for (const binding of eventBindings) {
         const listener = (event) => {
-          if (!isConnected()) return;
+          if (!isConnected() || el.isConnected === false) return;
           if (binding.modifiers.has('prevent')) event.preventDefault();
           if (binding.modifiers.has('stop')) event.stopPropagation();
           invokeAction(binding.actionName, event, el);
         };
         el.addEventListener(binding.eventName, listener);
-        disposers.push(() => el.removeEventListener(binding.eventName, listener));
+        elDisposers.push(() => el.removeEventListener(binding.eventName, listener));
       }
     }
 
     return function unbindInstanceDom() {
-      for (let i = 0; i < disposers.length; i++) {
-        try {
-          disposers[i]();
-        } catch (_err) {
-          // Ignore individual unbind errors
+      const map = boundElementsByInstance.get(instanceId);
+      if (map) {
+        for (const elDisposers of map.values()) {
+          for (let i = 0; i < elDisposers.length; i++) {
+            try {
+              elDisposers[i]();
+            } catch (_err) {
+              // Ignore individual unbind errors
+            }
+          }
         }
+        map.clear();
+        boundElementsByInstance.delete(instanceId);
       }
     };
   }
@@ -1394,14 +1436,53 @@ function createDatastarAdapter(options = {}) {
    */
   function patchFragmentElement(targetEl, htmlString, lifecycleCallbacks = {}) {
     if (!targetEl || typeof htmlString !== 'string') return targetEl;
-    const parsed = parseHtmlFragment(htmlString, targetEl.ownerDocument);
+    const doc = targetEl.ownerDocument || (typeof document !== 'undefined' ? document : null);
+    const parsed = parseHtmlFragment(htmlString, doc);
     if (!parsed) return targetEl;
 
+    // Capture active focus & text selection if inside targetEl before morphing
+    let focusedEl = null;
+    let selStart = null;
+    let selEnd = null;
+    if (
+      doc &&
+      doc.activeElement &&
+      typeof targetEl.contains === 'function' &&
+      targetEl.contains(doc.activeElement)
+    ) {
+      focusedEl = doc.activeElement;
+      try {
+        if (typeof focusedEl.selectionStart === 'number') selStart = focusedEl.selectionStart;
+        if (typeof focusedEl.selectionEnd === 'number') selEnd = focusedEl.selectionEnd;
+      } catch (_e) {}
+    }
+
     const morphed = morphDomTrees(targetEl, parsed, {
       onBeforeNodeRemove: lifecycleCallbacks.onBeforeNodeRemove,
       onNodeAdded: lifecycleCallbacks.onNodeAdded,
     });
 
+    // Restore focus & selection range if the focused element was preserved inside targetEl
+    if (
+      focusedEl &&
+      focusedEl.isConnected !== false &&
+      typeof targetEl.contains === 'function' &&
+      targetEl.contains(focusedEl)
+    ) {
+      try {
+        if (doc && doc.activeElement !== focusedEl && typeof focusedEl.focus === 'function') {
+          focusedEl.focus();
+        }
+        if (
+          typeof selStart === 'number' &&
+          typeof selEnd === 'number' &&
+          typeof focusedEl.setSelectionRange === 'function'
+        ) {
+          focusedEl.setSelectionRange(selStart, selEnd);
+        }
+      } catch (_e) {}
+    }
+
     // If external @starfederation/datastar is active, notify apply() on updated subtree
     if (externalDatastar && typeof externalDatastar.apply === 'function') {
       try {
@@ -1432,6 +1513,14 @@ function createDatastarAdapter(options = {}) {
     setByPath,
     isWithinControllerScope,
     collectScopedElements,
+    getBoundInstanceCount: () => boundElementsByInstance.size,
+    getBoundElementCount: () => {
+      let total = 0;
+      for (const m of boundElementsByInstance.values()) {
+        total += m.size;
+      }
+      return total;
+    },
   };
 }
 

package/core/client/controller.js

@@ -495,6 +495,7 @@ function createControllerRuntime(options = {}) {
   const activeInstances = new Map();
   // Standalone forms (forms without a controller wrapper)
   const standaloneForms = new WeakMap();
+  const activeStandaloneForms = new Set();
 
   /**
    * Register a controller definition with collision checking.
@@ -769,6 +770,7 @@ function createControllerRuntime(options = {}) {
       let _data = null;
       let _error = null;
       let _stale = false;
+      let _lastArgs = [];
 
       function isTaskStale(mode = true) {
         if (!mode) return false;
@@ -787,6 +789,10 @@ function createControllerRuntime(options = {}) {
 
       async function run(...args) {
         if (!isConnected()) return undefined;
+        if (args.length > 0) {
+          _lastArgs = [...args];
+        }
+        const effectiveArgs = args.length > 0 ? args : _lastArgs;
 
         if (policy === 'drop' && activeRuns > 0) {
           if (debug && typeof debug.trackDiscardedResponse === 'function') {
@@ -802,12 +808,12 @@ function createControllerRuntime(options = {}) {
 
         if (policy === 'queue') {
           const wait = queuedPromise;
-          const nextRun = wait.then(() => executeRun(...args)).catch(() => {});
+          const nextRun = wait.then(() => executeRun(...effectiveArgs)).catch(() => {});
           queuedPromise = nextRun;
           return nextRun;
         }
 
-        return executeRun(...args);
+        return executeRun(...effectiveArgs);
       }
 
       async function executeRun(...args) {
@@ -834,7 +840,7 @@ function createControllerRuntime(options = {}) {
         try {
           const result = await runFn(...args);
 
-          if (!isConnected() || runVersion !== currentRunVersion) {
+          if (!isConnected() || (policy !== 'parallel' && runVersion !== currentRunVersion)) {
             return undefined;
           }
 
@@ -847,7 +853,7 @@ function createControllerRuntime(options = {}) {
           updateSignal('stale', false);
           return result;
         } catch (err) {
-          if (!isConnected() || runVersion !== currentRunVersion) {
+          if (!isConnected() || (policy !== 'parallel' && runVersion !== currentRunVersion)) {
             return undefined;
           }
           if (err && (err.isCanceled || err.name === 'AbortError')) {
@@ -865,7 +871,11 @@ function createControllerRuntime(options = {}) {
             inFlightAbort = null;
           }
           activeRuns = Math.max(0, activeRuns - 1);
-          if (runVersion === currentRunVersion || activeRuns === 0) {
+          const shouldClearPending =
+            policy === 'parallel'
+              ? activeRuns === 0
+              : runVersion === currentRunVersion || activeRuns === 0;
+          if (shouldClearPending) {
             _pending = false;
             _stale = false;
             if (isConnected()) {
@@ -912,6 +922,9 @@ function createControllerRuntime(options = {}) {
         get lastUpdatedAt() {
           return _lastUpdatedAt;
         },
+        get lastArgs() {
+          return [..._lastArgs];
+        },
         isStale: () => isTaskStale(true),
         run,
         cancel,
@@ -1359,6 +1372,9 @@ function createControllerRuntime(options = {}) {
       root: defaultStorage,
     });
     const persistConfig = normalizePersistConfig(reg.definition.persist, controllerName);
+    let persistTimer = null;
+    let lastSavedJson = '';
+    const persistenceConflicts = [];
     function resolvePersistDriver(pConfig) {
       if (!pConfig) return storageCtx.local;
       if (pConfig.isGlobal) {
@@ -1367,6 +1383,30 @@ function createControllerRuntime(options = {}) {
       return storageCtx[pConfig.storageType] || storageCtx.local;
     }
 
+    function checkFragmentPersistenceConflict(idOrName, input) {
+      if (!persistConfig || !fragments || typeof fragments.getInstance !== 'function' || !input || typeof input !== 'object') {
+        return;
+      }
+      const inst =
+        fragments.getInstance(idOrName) ||
+        (typeof fragments.getInstances === 'function'
+          ? fragments.getInstances().find((i) => i.name === idOrName)
+          : null);
+      if (inst && inst.persistInput && inst.persistInput.key !== persistConfig.storageKey) {
+        const conflict = {
+          controller: controllerName,
+          controllerStorageKey: persistConfig.storageKey,
+          fragment: inst.instanceId,
+          fragmentStorageKey: inst.persistInput.key,
+          keys: Object.keys(input),
+        };
+        persistenceConflicts.push(conflict);
+        if (debug && typeof debug.recordEvent === 'function') {
+          debug.recordEvent('persist:conflict', conflict);
+        }
+      }
+    }
+
     // 6. Context object passed to `connect(ctx)` and `actions[name](ctx, event, actionEl)`
     ctx = Object.freeze({
       instanceId,
@@ -1383,10 +1423,27 @@ function createControllerRuntime(options = {}) {
       tasks: tasksProxy,
       task: createTaskInstance,
       storage: storageCtx,
+      get persistenceConflicts() {
+        return [...persistenceConflicts];
+      },
       clearPersistedState: () => {
+        if (persistTimer) {
+          clearTimeout(persistTimer);
+          persistTimer = null;
+        }
         if (persistConfig) {
           const driver = resolvePersistDriver(persistConfig);
           driver.remove(persistConfig.storageKey);
+          if (state && initialRawState) {
+            const keysToTrack = persistConfig.keys || Object.keys(initialRawState);
+            const currentPayload = {};
+            for (const k of keysToTrack) {
+              currentPayload[k] = state[k];
+            }
+            lastSavedJson = JSON.stringify(currentPayload);
+          } else {
+            lastSavedJson = '';
+          }
         }
       },
       param: (name, maybeEl) => {
@@ -1430,7 +1487,12 @@ function createControllerRuntime(options = {}) {
         return unregister;
       },
       invalidate: (tags) => (fragments ? fragments.invalidate(tags) : Promise.resolve({ ok: true, refreshed: [] })),
+      retryFailedFragments: () =>
+        fragments && typeof fragments.retryFailed === 'function'
+          ? fragments.retryFailed()
+          : Promise.resolve({ refreshed: [], skipped: true }),
       refresh: async (idOrName, input, opts) => {
+        checkFragmentPersistenceConflict(idOrName, input);
         if (!fragments) {
           const empty = { ok: true, refreshed: [], skipped: true };
           if (opts && typeof opts.onSuccess === 'function') await opts.onSuccess(empty);
@@ -1446,6 +1508,7 @@ function createControllerRuntime(options = {}) {
           return inst && inst.input ? { ...inst.input } : {};
         },
         refresh: (input, opts) => {
+          checkFragmentPersistenceConflict(idOrName, input);
           if (!fragments) {
             const empty = { ok: true, refreshed: [], skipped: true };
             if (opts && typeof opts.onSuccess === 'function') {
@@ -1478,14 +1541,34 @@ function createControllerRuntime(options = {}) {
     );
     state = stateManager.state;
 
-    // Hydrate persisted state if defined
+    // Hydrate persisted state if defined (with schema-compatible type validation against corrupted storage)
     if (persistConfig) {
       const driver = resolvePersistDriver(persistConfig);
       const savedData = driver.get(persistConfig.storageKey, null);
       if (savedData && typeof savedData === 'object' && !isArray(savedData)) {
         for (const [k, v] of Object.entries(savedData)) {
           if (persistConfig.keys && !persistConfig.keys.includes(k)) continue;
-          if (Object.prototype.hasOwnProperty.call(initialRawState, k)) {
+          if (!Object.prototype.hasOwnProperty.call(initialRawState, k)) continue;
+          const initVal = initialRawState[k];
+          if (initVal !== null && typeof initVal === 'object' && !isArray(initVal)) {
+            if (v !== null && typeof v === 'object' && !isArray(v)) {
+              const merged = { ...initVal };
+              for (const [subKey, subVal] of Object.entries(v)) {
+                if (Object.prototype.hasOwnProperty.call(initVal, subKey)) {
+                  if (initVal[subKey] === null || typeof subVal === typeof initVal[subKey]) {
+                    merged[subKey] = subVal;
+                  }
+                } else {
+                  merged[subKey] = subVal;
+                }
+              }
+              state[k] = merged;
+            }
+          } else if (isArray(initVal)) {
+            if (isArray(v)) {
+              state[k] = v;
+            }
+          } else if (initVal === null || initVal === undefined || typeof v === typeof initVal) {
             state[k] = v;
           }
         }
@@ -1609,7 +1692,17 @@ function createControllerRuntime(options = {}) {
         isConnected,
         isLoadingTargetActive,
       });
-      domDisposers.push(unbind);
+      if (domDisposers.length === 0) {
+        domDisposers.push(unbind);
+      }
+
+      // Prune disconnected forms from scopedForms
+      for (const [fName, fh] of Array.from(scopedForms.entries())) {
+        if (!fh.el || fh.el.isConnected === false || !rootEl.contains(fh.el)) {
+          fh.destroy();
+          scopedForms.delete(fName);
+        }
+      }
 
       // Also auto-initialize any `<form data-w-form>` inside this controller's scope
       if (rootEl.tagName === 'FORM' && rootEl.hasAttribute('data-w-form')) {
@@ -1619,7 +1712,10 @@ function createControllerRuntime(options = {}) {
         const formsInScope = rootEl.querySelectorAll('form[data-w-form]');
         for (let i = 0; i < formsInScope.length; i++) {
           if (isTargetInControllerScope(rootEl, formsInScope[i])) {
-            createFormHandle(formsInScope[i], { api: scopedApi, datastar, debug, services });
+            const fh = createFormHandle(formsInScope[i], { api: scopedApi, datastar, debug, services });
+            if (fh && fh.name) {
+              scopedForms.set(fh.name, fh);
+            }
           }
         }
       }
@@ -1630,8 +1726,6 @@ function createControllerRuntime(options = {}) {
     // Auto-sync persisted state changes back to storage
     if (persistConfig) {
       const driver = resolvePersistDriver(persistConfig);
-      let persistTimer = null;
-      let lastSavedJson = '';
 
       const stopPersistEffect = registerEffect(() => {
         if (!isConnected()) return;
@@ -1816,6 +1910,11 @@ function createControllerRuntime(options = {}) {
       if (standaloneForm) {
         standaloneForm.destroy();
         standaloneForms.delete(node);
+        activeStandaloneForms.delete(standaloneForm);
+      } else if (node && node.__wFormHandle) {
+        try {
+          node.__wFormHandle.destroy();
+        } catch (_e) {}
       }
     }
   }
@@ -1901,6 +2000,7 @@ function createControllerRuntime(options = {}) {
           services,
         });
         standaloneForms.set(formEl, handle);
+        activeStandaloneForms.add(handle);
       }
     }
 
@@ -1944,10 +2044,19 @@ function createControllerRuntime(options = {}) {
     getActiveInstances() {
       return Array.from(activeInstances.values());
     },
+    getStandaloneFormCount() {
+      return activeStandaloneForms.size;
+    },
     destroyAll() {
       for (const inst of Array.from(activeInstances.values())) {
         inst.destroy();
       }
+      for (const fh of Array.from(activeStandaloneForms.values())) {
+        try {
+          fh.destroy();
+        } catch (_e) {}
+      }
+      activeStandaloneForms.clear();
     },
   };
 }