webspresso 0.0.109 → 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,
@@ -124,6 +124,16 @@ function createSignalsEngine() {
     };
   }
 
+  function untracked(fn) {
+    const prev = activeEffect;
+    activeEffect = null;
+    try {
+      return fn();
+    } finally {
+      activeEffect = prev;
+    }
+  }
+
   /**
    * Implements Datastar's public `SignalsRoot` contract:
    * exists(path), signal(path), value(path), setValue(path, val),
@@ -213,6 +223,7 @@ function createSignalsEngine() {
   return {
     signals: new CompatibleSignalsRoot(),
     effect,
+    untracked,
   };
 }
 
@@ -238,6 +249,123 @@ function resolveOperand(state, token) {
   return getByPath(state, t);
 }
 
+/**
+ * Safely strips balanced enclosing parentheses if the entire expression is wrapped in them:
+ * e.g. `(a && b)` -> `a && b`, but `(a && b) || (c && d)` is left unchanged.
+ *
+ * @param {string} raw
+ * @returns {string}
+ */
+function stripOuterParens(raw) {
+  let s = raw.trim();
+  while (s.startsWith('(') && s.endsWith(')')) {
+    let depth = 0;
+    let matched = true;
+    for (let i = 0; i < s.length - 1; i++) {
+      const ch = s[i];
+      if (ch === '(') depth++;
+      else if (ch === ')') {
+        depth--;
+        if (depth === 0) {
+          matched = false;
+          break;
+        }
+      }
+    }
+    if (matched) {
+      s = s.slice(1, -1).trim();
+    } else {
+      break;
+    }
+  }
+  return s;
+}
+
+/**
+ * Split an expression by an operator (e.g. '||', '&&') only at the top level
+ * (outside single/double quotes and outside balanced parentheses).
+ *
+ * @param {string} expr
+ * @param {string} op
+ * @returns {string[]|null}
+ */
+function splitTopLevel(expr, op) {
+  const parts = [];
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let depth = 0;
+  let lastIndex = 0;
+  const opLen = op.length;
+  const len = expr.length;
+
+  for (let i = 0; i < len; i++) {
+    const ch = expr[i];
+    const prev = i > 0 ? expr[i - 1] : '';
+
+    if (ch === "'" && !inDoubleQuote && prev !== '\\') {
+      inSingleQuote = !inSingleQuote;
+    } else if (ch === '"' && !inSingleQuote && prev !== '\\') {
+      inDoubleQuote = !inDoubleQuote;
+    } else if (!inSingleQuote && !inDoubleQuote) {
+      if (ch === '(') {
+        depth++;
+      } else if (ch === ')') {
+        if (depth > 0) depth--;
+      } else if (depth === 0 && expr.slice(i, i + opLen) === op) {
+        parts.push(expr.slice(lastIndex, i).trim());
+        lastIndex = i + opLen;
+        i += opLen - 1;
+      }
+    }
+  }
+
+  if (parts.length > 0) {
+    parts.push(expr.slice(lastIndex).trim());
+    return parts;
+  }
+
+  return null;
+}
+
+/**
+ * Find the first comparison operator at the top level outside quotes and parentheses.
+ */
+function findTopLevelComparison(expr) {
+  const operators = ['===', '!==', '==', '!=', '>=', '<=', '>', '<'];
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let depth = 0;
+  const len = expr.length;
+
+  for (let i = 0; i < len; i++) {
+    const ch = expr[i];
+    const prev = i > 0 ? expr[i - 1] : '';
+
+    if (ch === "'" && !inDoubleQuote && prev !== '\\') {
+      inSingleQuote = !inSingleQuote;
+    } else if (ch === '"' && !inSingleQuote && prev !== '\\') {
+      inDoubleQuote = !inDoubleQuote;
+    } else if (!inSingleQuote && !inDoubleQuote) {
+      if (ch === '(') {
+        depth++;
+      } else if (ch === ')') {
+        if (depth > 0) depth--;
+      } else if (depth === 0 && i > 0) {
+        for (const op of operators) {
+          if (expr.slice(i, i + op.length) === op) {
+            return {
+              op,
+              left: expr.slice(0, i).trim(),
+              right: expr.slice(i + op.length).trim(),
+            };
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
 /**
  * Safely evaluate a declarative binding expression against controller state without
  * naive regex transformations or `eval`/`new Function`.
@@ -246,6 +374,8 @@ function resolveOperand(state, token) {
  *   - Property path: `count`, `user.name`, `items.length`
  *   - Negation: `!pending`, `!!error`
  *   - Simple comparisons: `status === 'active'`, `count > 0`, `step !== 1`
+ *   - Logical operators: `isReady && !hasError`, `status === 'a' || status === 'b'`
+ *   - Parenthesized groups: `(a || b) && c`
  *
  * @param {object} state
  * @param {string} rawExpr
@@ -253,39 +383,55 @@ function resolveOperand(state, token) {
  */
 function evaluateStateExpression(state, rawExpr) {
   if (typeof rawExpr !== 'string') return undefined;
-  const expr = rawExpr.trim();
+  const expr = stripOuterParens(rawExpr.trim());
   if (!expr) return undefined;
 
-  // Check simple comparison operators in precedence order
-  const operators = ['===', '!==', '==', '!=', '>=', '<=', '>', '<'];
-  for (const op of operators) {
-    const idx = expr.indexOf(op);
-    if (idx > 0) {
-      const leftRaw = expr.slice(0, idx).trim();
-      const rightRaw = expr.slice(idx + op.length).trim();
-      if (leftRaw && rightRaw) {
-        const left = resolveOperand(state, leftRaw);
-        const right = resolveOperand(state, rightRaw);
-        switch (op) {
-          case '===':
-          case '==':
-            return left === right;
-          case '!==':
-          case '!=':
-            return left !== right;
-          case '>=':
-            return Number(left) >= Number(right);
-          case '<=':
-            return Number(left) <= Number(right);
-          case '>':
-            return Number(left) > Number(right);
-          case '<':
-            return Number(left) < Number(right);
-        }
-      }
+  // 1. Logical OR (||) - lowest precedence, evaluated first so that A || B && C splits into A and (B && C)
+  const orParts = splitTopLevel(expr, '||');
+  if (orParts && orParts.length > 1) {
+    let result = false;
+    for (const part of orParts) {
+      result = evaluateStateExpression(state, part);
+      if (result) return result;
     }
+    return result;
   }
 
+  // 2. Logical AND (&&) - higher precedence than ||
+  const andParts = splitTopLevel(expr, '&&');
+  if (andParts && andParts.length > 1) {
+    let result = true;
+    for (const part of andParts) {
+      result = evaluateStateExpression(state, part);
+      if (!result) return result;
+    }
+    return result;
+  }
+
+  // 3. Comparison operators (===, !==, ==, !=, >=, <=, >, <) outside quotes
+  const comp = findTopLevelComparison(expr);
+  if (comp && comp.left && comp.right) {
+    const left = resolveOperand(state, comp.left);
+    const right = resolveOperand(state, comp.right);
+    switch (comp.op) {
+      case '===':
+      case '==':
+        return left === right;
+      case '!==':
+      case '!=':
+        return left !== right;
+      case '>=':
+        return Number(left) >= Number(right);
+      case '<=':
+        return Number(left) <= Number(right);
+      case '>':
+        return Number(left) > Number(right);
+      case '<':
+        return Number(left) < Number(right);
+    }
+  }
+
+  // 4. Negations (!!, !)
   if (expr.startsWith('!!')) {
     return Boolean(evaluateStateExpression(state, expr.slice(2)));
   }
@@ -293,6 +439,7 @@ function evaluateStateExpression(state, rawExpr) {
     return !Boolean(evaluateStateExpression(state, expr.slice(1)));
   }
 
+  // 5. Literal token or property path lookup
   return resolveOperand(state, expr);
 }
 
@@ -360,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)) {
@@ -376,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);
@@ -415,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;
       },
@@ -462,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);
         }
@@ -587,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');
@@ -703,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;
@@ -804,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);
       }
@@ -977,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());
     }
@@ -1014,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]);
             }
           }
         });
@@ -1102,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);
@@ -1110,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));
@@ -1135,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));