webspresso 0.0.110 → 0.0.111

package/core/client/adapter/datastar.js

@@ -24,7 +24,7 @@
  *    external package is not installed in `node_modules`.
  */
 
-const { getByPath, setByPath } = require('../utils');
+const { isArray, getByPath, setByPath } = require('../utils');
 
 const PluginType = {
   Attribute: 1,
@@ -507,11 +507,15 @@ function createIsolatedControllerState(
           return Reflect.get(obj, prop, receiver);
         }
 
-        // Allow accessing tasks on root state
+        // Allow accessing tasks and busy status on root state
         if (!basePath && prop === 'tasks') {
           const ctx = getContext();
           return ctx && ctx.tasks ? ctx.tasks : undefined;
         }
+        if (!basePath && (prop === '$busy' || prop === 'isBusy') && !Object.prototype.hasOwnProperty.call(obj, prop)) {
+          const ctx = getContext();
+          return ctx ? Boolean(ctx.isBusy) : false;
+        }
 
         // Check if accessing a root-level computed property
         if (!basePath && computedDefs && Object.prototype.hasOwnProperty.call(computedDefs, prop)) {
@@ -523,7 +527,7 @@ function createIsolatedControllerState(
         // Track signal dependency in Datastar signals store
         engine.signals.value(signalKeyFor(path));
         // If accessing array length or methods, also subscribe to the array path itself
-        if (Array.isArray(obj) && basePath) {
+        if (isArray(obj) && basePath) {
           engine.signals.value(signalKeyFor(basePath));
         }
         const val = Reflect.get(obj, prop, receiver);
@@ -562,21 +566,21 @@ function createIsolatedControllerState(
         const prevValue = obj[prop];
         const path = basePath ? `${basePath}.${String(prop)}` : String(prop);
 
-        if (Object.is(prevValue, rawNext) && !Array.isArray(obj)) {
+        if (Object.is(prevValue, rawNext) && !isArray(obj)) {
           return true;
         }
 
         Reflect.set(obj, prop, rawNext, receiver);
 
         // Seed nested keys if setting an object
-        if (rawNext !== null && typeof rawNext === 'object' && !Array.isArray(rawNext)) {
+        if (rawNext !== null && typeof rawNext === 'object' && !isArray(rawNext)) {
           for (const [k, v] of Object.entries(rawNext)) {
             engine.signals.setValue(signalKeyFor(`${path}.${k}`), v);
           }
         }
         engine.signals.setValue(signalKeyFor(path), rawNext);
         if (basePath) {
-          engine.signals.setValue(signalKeyFor(basePath), Array.isArray(obj) ? [...obj] : { ...obj });
+          engine.signals.setValue(signalKeyFor(basePath), isArray(obj) ? [...obj] : { ...obj });
         }
         return true;
       },
@@ -609,13 +613,13 @@ function createIsolatedControllerState(
     for (const [key, val] of Object.entries(initialState)) {
       const cloned =
         val !== null && typeof val === 'object'
-          ? Array.isArray(val)
+          ? isArray(val)
             ? [...val]
             : { ...val }
           : val;
       rawStore[key] = cloned;
       engine.signals.setValue(signalKeyFor(key), cloned);
-      if (cloned !== null && typeof cloned === 'object' && !Array.isArray(cloned)) {
+      if (cloned !== null && typeof cloned === 'object' && !isArray(cloned)) {
         for (const [subKey, subVal] of Object.entries(cloned)) {
           engine.signals.setValue(signalKeyFor(`${key}.${subKey}`), subVal);
         }
@@ -734,6 +738,8 @@ function getMorphNodeKey(node) {
   if (node.id) return `id:${node.id}`;
   const wKey = node.getAttribute('data-w-key');
   if (wKey) return `wkey:${wKey}`;
+  const hostKey = node.getAttribute('data-w-host');
+  if (hostKey) return `host:${hostKey}`;
   const fragId = node.getAttribute('data-w-fragment-id');
   if (fragId) return `frag:${fragId}`;
   const formName = node.getAttribute('data-w-form');
@@ -850,6 +856,11 @@ function morphDomTrees(toEl, fromEl, ctx = {}) {
     }
   }
 
+  // If `toEl` is a client service UI host (`data-w-host`), the service owns its DOM contents
+  if (toEl.hasAttribute && toEl.hasAttribute('data-w-host')) {
+    return toEl;
+  }
+
   // If `toEl` has `data-w-text`, client state owns its textContent; do not overwrite from server HTML
   if (ownership.text) {
     return toEl;
@@ -951,10 +962,13 @@ function morphDomTrees(toEl, fromEl, ctx = {}) {
     }
   }
 
-  // Remove leftover existing children that were not matched
+  // Remove leftover existing children that were not matched (preserve client service UI hosts)
   for (let i = 0; i < existingChildren.length; i++) {
     const oldChild = existingChildren[i];
     if (!usedExisting.has(oldChild) && oldChild.parentNode === toEl) {
+      if (oldChild.nodeType === 1 && oldChild.hasAttribute && oldChild.hasAttribute('data-w-host')) {
+        continue;
+      }
       if (oldChild.nodeType === 1 && typeof ctx.onBeforeNodeRemove === 'function') {
         ctx.onBeforeNodeRemove(oldChild);
       }
@@ -1124,10 +1138,31 @@ function createDatastarAdapter(options = {}) {
     return bindings;
   }
 
+  function toggleElementVisibility(el, visible, initialDisplay) {
+    if (visible) {
+      el.removeAttribute('hidden');
+      if (el.style && el.style.display === 'none') {
+        el.style.display = initialDisplay;
+      }
+    } else {
+      el.setAttribute('hidden', '');
+      if (el.style) {
+        el.style.display = 'none';
+      }
+    }
+  }
+
   /**
    * Bind V1 declarative attributes inside `rootEl` for a controller instance.
    */
-  function bindControllerDom({ instanceId, rootEl, state, invokeAction, isConnected }) {
+  function bindControllerDom({
+    instanceId,
+    rootEl,
+    state,
+    invokeAction,
+    isConnected,
+    isLoadingTargetActive,
+  }) {
     if (!boundElementsByInstance.has(instanceId)) {
       boundElementsByInstance.set(instanceId, new WeakSet());
     }
@@ -1161,16 +1196,31 @@ function createDatastarAdapter(options = {}) {
         const initialDisplay = el.style && el.style.display && el.style.display !== 'none' ? el.style.display : '';
         const stop = engine.effect(() => {
           if (!isConnected()) return;
-          const visible = Boolean(evaluateStateExpression(state, expr));
-          if (visible) {
-            el.removeAttribute('hidden');
-            if (el.style && el.style.display === 'none') {
-              el.style.display = initialDisplay;
-            }
-          } else {
-            el.setAttribute('hidden', '');
-            if (el.style) {
-              el.style.display = 'none';
+          toggleElementVisibility(el, Boolean(evaluateStateExpression(state, expr)), initialDisplay);
+        });
+        disposers.push(stop);
+      }
+
+      // 2b. data-w-loading & data-w-loading-hide (declarative action/task busy indicators)
+      if (el.hasAttribute('data-w-loading') || el.hasAttribute('data-w-loading-hide')) {
+        const isHide = el.hasAttribute('data-w-loading-hide');
+        const rawSpec = el.getAttribute(isHide ? 'data-w-loading-hide' : 'data-w-loading') || '';
+        const initialDisplay = el.style && el.style.display && el.style.display !== 'none' ? el.style.display : '';
+        const loadingClasses = (el.getAttribute('data-w-loading-class') || '')
+          .trim()
+          .split(/\s+/)
+          .filter(Boolean);
+        const stop = engine.effect(() => {
+          if (!isConnected()) return;
+          const active =
+            typeof isLoadingTargetActive === 'function'
+              ? Boolean(isLoadingTargetActive(rawSpec))
+              : Boolean(evaluateStateExpression(state, rawSpec || '$busy'));
+          toggleElementVisibility(el, isHide ? !active : active, initialDisplay);
+          if (loadingClasses.length > 0 && el.classList) {
+            for (let c = 0; c < loadingClasses.length; c++) {
+              if (active) el.classList.add(loadingClasses[c]);
+              else el.classList.remove(loadingClasses[c]);
             }
           }
         });
@@ -1249,7 +1299,7 @@ function createDatastarAdapter(options = {}) {
             const currentVal = getByPath(state, modelPath);
 
             if (type === 'checkbox') {
-              if (Array.isArray(currentVal)) {
+              if (isArray(currentVal)) {
                 el.checked = currentVal.map(String).includes(String(el.value));
               } else {
                 el.checked = Boolean(currentVal);
@@ -1257,7 +1307,7 @@ function createDatastarAdapter(options = {}) {
             } else if (type === 'radio') {
               el.checked = String(currentVal) === String(el.value);
             } else if (el.tagName === 'SELECT' && el.multiple) {
-              const arr = Array.isArray(currentVal) ? currentVal.map(String) : [];
+              const arr = isArray(currentVal) ? currentVal.map(String) : [];
               const opts = el.options || [];
               for (let j = 0; j < opts.length; j++) {
                 opts[j].selected = arr.includes(String(opts[j].value));
@@ -1282,7 +1332,7 @@ function createDatastarAdapter(options = {}) {
 
             if (type === 'checkbox') {
               const cur = getByPath(state, modelPath);
-              if (Array.isArray(cur)) {
+              if (isArray(cur)) {
                 const next = el.checked
                   ? Array.from(new Set([...cur, el.value]))
                   : cur.filter((item) => String(item) !== String(el.value));

package/core/client/api.js

@@ -13,6 +13,8 @@
  * - Raw & streaming escape hatches (`api.raw`, `api.stream`)
  */
 
+const { isArray, isNumber } = require('./utils');
+
 const VALID_POLICIES = new Set(['latest', 'drop', 'queue', 'parallel']);
 const MUTATION_METHODS = new Set(['POST', 'PUT', 'PATCH', 'DELETE']);
 const RESERVED_OPTION_KEYS = new Set([
@@ -68,7 +70,7 @@ class ClientRequestError extends Error {
     this.key = details.key || '';
     this.fieldErrors = details.fieldErrors || {};
     this.fieldErrorList = details.fieldErrorList || {};
-    this.issues = Array.isArray(details.issues) ? details.issues : [];
+    this.issues = isArray(details.issues) ? details.issues : [];
     this.formError = details.formError || null;
     this.data = details.data !== undefined ? details.data : null;
     this.isCanceled = this.kind === 'canceled';
@@ -176,7 +178,7 @@ function buildRequestUrl(urlTemplate, params, query) {
   const searchParams = new URLSearchParams();
   for (const [key, rawVal] of Object.entries(query)) {
     if (rawVal === undefined) continue;
-    if (Array.isArray(rawVal)) {
+    if (isArray(rawVal)) {
       for (const item of rawVal) {
         if (item === undefined) continue;
         searchParams.append(key, item instanceof Date ? item.toISOString() : String(item));
@@ -205,7 +207,7 @@ function containsBinaryValue(value) {
   if (typeof Blob !== 'undefined' && value instanceof Blob) return true;
   if (typeof File !== 'undefined' && value instanceof File) return true;
   if (typeof FormData !== 'undefined' && value instanceof FormData) return true;
-  if (Array.isArray(value)) {
+  if (isArray(value)) {
     return value.some(containsBinaryValue);
   }
   for (const v of Object.values(value)) {
@@ -221,7 +223,7 @@ function objectToFormData(obj) {
   const fd = new FormData();
   for (const [key, val] of Object.entries(obj)) {
     if (val === undefined) continue;
-    if (Array.isArray(val)) {
+    if (isArray(val)) {
       for (const item of val) {
         if (item === undefined) continue;
         if (typeof Blob !== 'undefined' && item instanceof Blob) {
@@ -307,9 +309,9 @@ function extractValidationErrors(payload) {
 
   // 1. Direct fieldErrors map (e.g. { title: 'Required' } or { title: ['Required'] })
   const rawFieldErrors = errObj.fieldErrors || payload.fieldErrors || errObj.fields || null;
-  if (rawFieldErrors && typeof rawFieldErrors === 'object' && !Array.isArray(rawFieldErrors)) {
+  if (rawFieldErrors && typeof rawFieldErrors === 'object' && !isArray(rawFieldErrors)) {
     for (const [field, msgOrArr] of Object.entries(rawFieldErrors)) {
-      const list = Array.isArray(msgOrArr) ? msgOrArr.map(String) : [String(msgOrArr)];
+      const list = isArray(msgOrArr) ? msgOrArr.map(String) : [String(msgOrArr)];
       if (list.length > 0) {
         fieldErrors[field] = list[0];
         fieldErrorList[field] = list;
@@ -320,17 +322,17 @@ function extractValidationErrors(payload) {
 
   // 2. Zod / Webspresso `issues` or `details` array
   const rawIssues =
-    (Array.isArray(errObj.issues) && errObj.issues) ||
-    (Array.isArray(payload.issues) && payload.issues) ||
-    (Array.isArray(errObj.details) && errObj.details) ||
-    (Array.isArray(payload.details) && payload.details) ||
-    (Array.isArray(errObj.errors) && errObj.errors) ||
+    (isArray(errObj.issues) && errObj.issues) ||
+    (isArray(payload.issues) && payload.issues) ||
+    (isArray(errObj.details) && errObj.details) ||
+    (isArray(payload.details) && payload.details) ||
+    (isArray(errObj.errors) && errObj.errors) ||
     [];
 
   for (const issue of rawIssues) {
     if (!issue || typeof issue !== 'object') continue;
     let rawPath = '';
-    if (Array.isArray(issue.path)) {
+    if (isArray(issue.path)) {
       // Strip leading 'body' / 'query' / 'params' prefix from route validation paths
       const cleanParts =
         issue.path.length > 1 &&
@@ -393,8 +395,8 @@ function unwrapApiResultAndInvalidate(parsedBody, responseHeaders) {
   if (
     parsedBody &&
     typeof parsedBody === 'object' &&
-    !Array.isArray(parsedBody) &&
-    Array.isArray(parsedBody.invalidate) &&
+    !isArray(parsedBody) &&
+    isArray(parsedBody.invalidate) &&
     'data' in parsedBody
   ) {
     for (const tag of parsedBody.invalidate) {
@@ -495,18 +497,18 @@ function normalizeRetryConfig(retryOpt, upperMethod, retryMutations = false) {
   let statusCodes = new Set([408, 429, 502, 503, 504]);
   let onRetry = null;
 
-  if (typeof retryOpt === 'number') {
+  if (isNumber(retryOpt)) {
     count = Math.max(0, Math.floor(retryOpt));
   } else if (retryOpt === true) {
     count = 2;
   } else if (typeof retryOpt === 'object' && retryOpt !== null) {
-    count = typeof retryOpt.count === 'number' ? Math.max(0, Math.floor(retryOpt.count)) : 2;
-    if (typeof retryOpt.delay === 'number') delay = Math.max(0, retryOpt.delay);
-    if (typeof retryOpt.maxDelay === 'number') maxDelay = Math.max(delay, retryOpt.maxDelay);
+    count = isNumber(retryOpt.count) ? Math.max(0, Math.floor(retryOpt.count)) : 2;
+    if (isNumber(retryOpt.delay)) delay = Math.max(0, retryOpt.delay);
+    if (isNumber(retryOpt.maxDelay)) maxDelay = Math.max(delay, retryOpt.maxDelay);
     if (retryOpt.backoff === 'linear' || retryOpt.backoff === 'exponential') {
       backoff = retryOpt.backoff;
     }
-    if (Array.isArray(retryOpt.statusCodes)) {
+    if (isArray(retryOpt.statusCodes)) {
       statusCodes = new Set(retryOpt.statusCodes);
     }
     if (typeof retryOpt.onRetry === 'function') {
@@ -536,7 +538,7 @@ function isRetryableError(err, statusCodes) {
   // Network failures and timeouts are retryable
   if (err.kind === 'network' || err.kind === 'timeout' || err.isTimedOut) return true;
   // Transient HTTP status codes
-  if (typeof err.status === 'number' && statusCodes && statusCodes.has(err.status)) {
+  if (isNumber(err.status) && statusCodes && statusCodes.has(err.status)) {
     return true;
   }
   return false;
@@ -797,7 +799,7 @@ function createApiClient(config = {}) {
     let timeoutTimer = null;
     let currentSeq = 1;
 
-    if (typeof options.timeout === 'number' && options.timeout > 0) {
+    if (isNumber(options.timeout) && options.timeout > 0) {
       timeoutTimer = setTimeout(() => {
         timedOut = true;
         abortController.abort();