@jxsuite/runtime 1.0.0 → 1.1.0

package/dist/runtime.js

@@ -80,8 +80,9 @@ class EffectScope {
       this._isPaused = true;
       let i, l;
       if (this.scopes) {
-        for (i = 0, l = this.scopes.length;i < l; i++) {
-          this.scopes[i].pause();
+        const scopes = this.scopes.slice();
+        for (i = 0, l = scopes.length;i < l; i++) {
+          scopes[i].pause();
         }
       }
       for (i = 0, l = this.effects.length;i < l; i++) {
@@ -95,12 +96,14 @@ class EffectScope {
         this._isPaused = false;
         let i, l;
         if (this.scopes) {
-          for (i = 0, l = this.scopes.length;i < l; i++) {
-            this.scopes[i].resume();
+          const scopes = this.scopes.slice();
+          for (i = 0, l = scopes.length;i < l; i++) {
+            scopes[i].resume();
           }
         }
-        for (i = 0, l = this.effects.length;i < l; i++) {
-          this.effects[i].resume();
+        const effects = this.effects.slice();
+        for (i = 0, l = effects.length;i < l; i++) {
+          effects[i].resume();
         }
       }
     }
@@ -154,8 +157,9 @@ class EffectScope {
       }
       this.cleanups.length = 0;
       if (this.scopes) {
-        for (i = 0, l = this.scopes.length;i < l; i++) {
-          this.scopes[i].stop(true);
+        const scopes = this.scopes.slice();
+        for (i = 0, l = scopes.length;i < l; i++) {
+          scopes[i].stop(true);
         }
         this.scopes.length = 0;
       }
@@ -1411,33 +1415,142 @@ var BINARY_OPS = new Set([
   ">",
   ">=",
   "&&",
-  "||"
+  "||",
+  "??"
 ]);
 var ASSIGNMENT_OPS = new Set(["=", "+=", "-=", "*=", "/="]);
 var ARRAY_METHOD_OPS = new Set(["push", "pop", "shift", "unshift", "splice"]);
 var AGGREGATE_OPS = new Set(["reduce", "map", "filter"]);
+var CONDITIONAL_OPS = new Set(["?:", "switch"]);
+var PURE_METHOD_OPS = new Set([
+  "includes",
+  "indexOf",
+  "lastIndexOf",
+  "join",
+  "slice",
+  "concat",
+  "at",
+  "flat",
+  "toSorted",
+  "toReversed",
+  "toSpliced",
+  "with",
+  "toUpperCase",
+  "toLowerCase",
+  "trim",
+  "trimStart",
+  "trimEnd",
+  "split",
+  "startsWith",
+  "endsWith",
+  "padStart",
+  "padEnd",
+  "replaceAll",
+  "repeat",
+  "charAt",
+  "normalize",
+  "toLocaleUpperCase",
+  "toLocaleLowerCase",
+  "toFixed",
+  "toPrecision",
+  "toLocaleString"
+]);
 var BLESSED_OPERATORS = new Set([
   ...MUTATING_OPS,
   ...UNARY_OPS,
   ...BINARY_OPS,
-  ...AGGREGATE_OPS
+  ...AGGREGATE_OPS,
+  ...CONDITIONAL_OPS,
+  ...PURE_METHOD_OPS,
+  "call"
+]);
+var BLESSED_GLOBALS = new Set([
+  "isNaN",
+  "isFinite",
+  "parseFloat",
+  "parseInt",
+  "encodeURIComponent",
+  "decodeURIComponent",
+  "structuredClone",
+  "Math/abs",
+  "Math/ceil",
+  "Math/floor",
+  "Math/round",
+  "Math/trunc",
+  "Math/sign",
+  "Math/sqrt",
+  "Math/cbrt",
+  "Math/pow",
+  "Math/exp",
+  "Math/log",
+  "Math/log2",
+  "Math/log10",
+  "Math/min",
+  "Math/max",
+  "Math/hypot",
+  "Number/isInteger",
+  "Number/isFinite",
+  "Number/isNaN",
+  "Number/parseFloat",
+  "Number/parseInt",
+  "JSON/parse",
+  "JSON/stringify",
+  "Object/keys",
+  "Object/values",
+  "Object/entries",
+  "Object/fromEntries",
+  "Array/from",
+  "Array/isArray",
+  "Array/of",
+  "String/fromCharCode",
+  "String/fromCodePoint",
+  "Intl/formatNumber",
+  "Intl/formatDate",
+  "Intl/formatRelativeTime"
 ]);
+var BLESSED_HELPERS = {
+  "Intl/formatDate": (value, locale, options) => new Intl.DateTimeFormat(locale, options).format(new Date(value)),
+  "Intl/formatNumber": (value, locale, options) => new Intl.NumberFormat(locale, options).format(value),
+  "Intl/formatRelativeTime": (value, unit, locale, options) => new Intl.RelativeTimeFormat(locale, options).format(value, unit)
+};
+function isBlessedGlobal(ref2) {
+  return ref2.startsWith("window#/") && BLESSED_GLOBALS.has(ref2.slice("window#/".length));
+}
 function isMutating(op) {
   return MUTATING_OPS.has(op);
 }
-function resolveOperand(operand, state, event, iterCtx) {
+var MAX_CALL_DEPTH = 64;
+var MAX_REPORT_DEPTH = 64;
+function subTrace(trace, seg) {
+  if (!trace) {
+    return;
+  }
+  const depth = (trace.depth ?? 0) + 1;
+  if (depth > MAX_REPORT_DEPTH) {
+    return;
+  }
+  return {
+    depth,
+    path: [...trace.path ?? [], ...Array.isArray(seg) ? seg : [seg]],
+    report: trace.report
+  };
+}
+function resolveOperand(operand, state, event, iterCtx, trace) {
   if (operand === null || operand === undefined) {
     return operand;
   }
   if (typeof operand === "object" && !Array.isArray(operand) && "operator" in operand) {
-    return evaluateExpression(operand, state, event, iterCtx);
+    return evaluateExpression(operand, state, event, iterCtx, trace);
   }
   if (typeof operand === "object" && !Array.isArray(operand) && "$ref" in operand) {
-    return resolveExprRef(operand.$ref, state, event, iterCtx);
+    const resolved = resolveExprRef(operand.$ref, state, event, iterCtx);
+    trace?.report(trace.path ?? [], resolved);
+    return resolved;
   }
   if (Array.isArray(operand)) {
-    return operand.map((o) => resolveOperand(o, state, event, iterCtx));
+    return operand.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, i)));
   }
+  trace?.report(trace.path ?? [], operand);
   return operand;
 }
 function resolveExprRef(ref2, state, event, iterCtx) {
@@ -1447,6 +1560,11 @@ function resolveExprRef(ref2, state, event, iterCtx) {
   if (ref2.startsWith("$reduce/")) {
     return iterCtx?.acc;
   }
+  if (ref2.startsWith("$args/")) {
+    const parts = ref2.slice("$args/".length).split("/");
+    const base = iterCtx?.args?.[parts[0]];
+    return parts.length > 1 ? getPath(base, parts.slice(1).join("/")) : base;
+  }
   if (ref2.startsWith("event#/")) {
     const path = ref2.slice("event#/".length);
     return getPath(event, path);
@@ -1524,13 +1642,18 @@ function resolveWritableRef(ref2, state, _event, iterCtx) {
   }
   return { key: ref2, obj: state };
 }
-function evaluateExpression(node, state, event, iterCtx) {
+function evaluateExpression(node, state, event, iterCtx, trace) {
+  const result = evaluateNode(node, state, event, iterCtx, trace);
+  trace?.report(trace.path ?? [], result);
+  return result;
+}
+function evaluateNode(node, state, event, iterCtx, trace) {
   const { operator, target, value, initial } = node;
   if (!BLESSED_OPERATORS.has(operator)) {
     throw new Error(`$expression: unknown operator "${operator}"`);
   }
   if (UNARY_OPS.has(operator) && !("value" in node)) {
-    const operand = resolveOperand(target, state, event, iterCtx);
+    const operand = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     if (operator === "!") {
       return !operand;
     }
@@ -1538,9 +1661,78 @@ function evaluateExpression(node, state, event, iterCtx) {
       return -operand;
     }
   }
+  if (operator === "call") {
+    const calleeRef = target?.$ref;
+    if (typeof calleeRef !== "string") {
+      throw new TypeError("$expression: call target must be a $ref pointer");
+    }
+    const callDepth = (iterCtx?.callDepth ?? 0) + 1;
+    if (callDepth > MAX_CALL_DEPTH) {
+      throw new Error(`$expression: call depth exceeded (${MAX_CALL_DEPTH})`);
+    }
+    const argValues = Array.isArray(value) ? value.map((o, i) => resolveOperand(o, state, event, iterCtx, subTrace(trace, ["value", i]))) : [];
+    if (calleeRef.startsWith("window#/")) {
+      if (!isBlessedGlobal(calleeRef)) {
+        throw new Error(`$expression: "${calleeRef}" is not a blessed pure global`);
+      }
+      const globalPath = calleeRef.slice("window#/".length);
+      const helper = BLESSED_HELPERS[globalPath];
+      if (helper) {
+        return helper(...argValues);
+      }
+      const fn = getPath(globalThis.window, globalPath);
+      const lastSlash = globalPath.lastIndexOf("/");
+      const thisArg = lastSlash === -1 ? globalThis.window : getPath(globalThis.window, globalPath.slice(0, lastSlash));
+      return fn.apply(thisArg, argValues);
+    }
+    const callee = resolveExprRef(calleeRef, state, event, iterCtx);
+    if (typeof callee === "function") {
+      return callee(...argValues);
+    }
+    if (callee && typeof callee === "object" && "$expression" in callee) {
+      const def2 = callee;
+      const args = {};
+      for (const [i, p] of (def2.parameters ?? []).entries()) {
+        const name = typeof p === "string" ? p : p?.name ?? "";
+        if (!name) {
+          continue;
+        }
+        args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+      }
+      return evaluateExpression(def2.$expression, state, event, { args, callDepth });
+    }
+    throw new TypeError(`$expression: call target "${calleeRef}" is not callable`);
+  }
+  if (CONDITIONAL_OPS.has(operator)) {
+    if (operator === "?:") {
+      const test = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+      if (trace) {
+        const consequent = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
+        const alternate = resolveOperand(initial, state, event, iterCtx, subTrace(trace, "initial"));
+        return test ? consequent : alternate;
+      }
+      return test ? resolveOperand(value, state, event, iterCtx) : resolveOperand(initial, state, event, iterCtx);
+    }
+    const discriminant = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const key = String(discriminant);
+    const cases = node.cases ?? {};
+    const matched = Object.hasOwn(cases, key);
+    if (trace) {
+      let result;
+      for (const [k, caseOperand] of Object.entries(cases)) {
+        const v = resolveOperand(caseOperand, state, event, iterCtx, subTrace(trace, ["cases", k]));
+        if (k === key) {
+          result = v;
+        }
+      }
+      const fallback = resolveOperand(node.default, state, event, iterCtx, subTrace(trace, "default"));
+      return matched ? result : fallback;
+    }
+    return matched ? resolveOperand(cases[key], state, event, iterCtx) : resolveOperand(node.default, state, event, iterCtx);
+  }
   if (BINARY_OPS.has(operator)) {
-    const left = resolveOperand(target, state, event, iterCtx);
-    const right = resolveOperand(value, state, event, iterCtx);
+    const left = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const right = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     switch (operator) {
       case "+": {
         return left + right;
@@ -1581,13 +1773,16 @@ function evaluateExpression(node, state, event, iterCtx) {
       case "||": {
         return left || right;
       }
+      case "??": {
+        return left ?? right;
+      }
       default: {
         break;
       }
     }
   }
   if (ASSIGNMENT_OPS.has(operator)) {
-    const rhs = resolveOperand(value, state, event, iterCtx);
+    const rhs = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
     const { obj, key } = resolveWritableRef(target.$ref, state, event, iterCtx);
     switch (operator) {
       case "=": {
@@ -1621,13 +1816,13 @@ function evaluateExpression(node, state, event, iterCtx) {
     return;
   }
   if (ARRAY_METHOD_OPS.has(operator)) {
-    const arr = resolveOperand(target, state, event, iterCtx);
+    const arr = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     switch (operator) {
       case "push": {
-        return arr.push(resolveOperand(value, state, event, iterCtx));
+        return arr.push(resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")));
       }
       case "unshift": {
-        return arr.unshift(resolveOperand(value, state, event, iterCtx));
+        return arr.unshift(resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")));
       }
       case "pop": {
         return arr.pop();
@@ -1636,7 +1831,7 @@ function evaluateExpression(node, state, event, iterCtx) {
         return arr.shift();
       }
       case "splice": {
-        const args = resolveOperand(value, state, event, iterCtx);
+        const args = resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"));
         return arr.splice(...args);
       }
       default: {
@@ -1644,32 +1839,29 @@ function evaluateExpression(node, state, event, iterCtx) {
       }
     }
   }
+  if (PURE_METHOD_OPS.has(operator)) {
+    const receiver = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
+    const args = value === undefined ? [] : Array.isArray(value) ? resolveOperand(value, state, event, iterCtx, subTrace(trace, "value")) : [resolveOperand(value, state, event, iterCtx, subTrace(trace, "value"))];
+    const method = receiver?.[operator];
+    if (typeof method !== "function") {
+      return;
+    }
+    return method.apply(receiver, args);
+  }
   if (AGGREGATE_OPS.has(operator)) {
-    const arr = resolveOperand(target, state, event, iterCtx);
+    const arr = resolveOperand(target, state, event, iterCtx, subTrace(trace, "target"));
     if (operator === "reduce") {
-      let acc = resolveOperand(initial, state, event, iterCtx);
+      let acc = resolveOperand(initial, state, event, iterCtx, subTrace(trace, "initial"));
       for (const [index, item] of arr.entries()) {
-        acc = evaluateExpression(value, state, event, {
-          acc,
-          index,
-          item
-        });
+        acc = evaluateExpression(value, state, event, { acc, index, item }, index === 0 ? subTrace(trace, "value") : undefined);
       }
       return acc;
     }
     if (operator === "map") {
-      return arr.map((item, index) => evaluateExpression(value, state, event, {
-        ...iterCtx,
-        index,
-        item
-      }));
+      return arr.map((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
     if (operator === "filter") {
-      return arr.filter((item, index) => evaluateExpression(value, state, event, {
-        ...iterCtx,
-        index,
-        item
-      }));
+      return arr.filter((item, index) => evaluateExpression(value, state, event, { ...iterCtx, index, item }, index === 0 ? subTrace(trace, "value") : undefined));
     }
   }
   return;
@@ -1681,6 +1873,9 @@ function getPath(obj, path) {
   }
   return current;
 }
+function evaluateOperand(operand, state, event, iterCtx) {
+  return resolveOperand(operand, state, event, iterCtx);
+}
 
 // ../schema/src/guards.ts
 function isJsonObject(value) {
@@ -1695,6 +1890,12 @@ function isFunctionDef(value) {
 function isExpressionDef(value) {
   return isJsonObject(value) && isJsonObject(value.$expression);
 }
+function isNamedFormulaDef(value) {
+  return isExpressionDef(value) && Array.isArray(value.parameters) && value.parameters.length > 0;
+}
+function hasStructuredBody(value) {
+  return isFunctionDef(value) && Array.isArray(value.body);
+}
 function isPrototypeDef(value) {
   return isJsonObject(value) && typeof value.$prototype === "string" && value.$prototype !== "Function";
 }
@@ -1727,6 +1928,74 @@ function paramNames(parameters) {
   return parameters.map((p) => typeof p === "string" ? p : p.name);
 }
 
+// src/statements.ts
+function statementKind(statement) {
+  if ("operator" in statement) {
+    return "expression";
+  }
+  if ("if" in statement) {
+    return "if";
+  }
+  if ("$switch" in statement) {
+    return "switch";
+  }
+  return "dispatch";
+}
+async function runStatements(statements, state, event, opts = {}) {
+  const iterCtx = opts.args ? { args: opts.args } : undefined;
+  for (const statement of statements) {
+    switch (statementKind(statement)) {
+      case "expression": {
+        const result = evaluateExpression(statement, state, event, iterCtx);
+        if (result && typeof result.then === "function") {
+          await result;
+        }
+        break;
+      }
+      case "if": {
+        const branch = statement;
+        const taken = evaluateOperand(branch.if, state, event, iterCtx) ? branch.then : branch.else;
+        if (Array.isArray(taken)) {
+          await runStatements(taken, state, event, opts);
+        }
+        break;
+      }
+      case "switch": {
+        const branch = statement;
+        const key = String(evaluateOperand(branch.$switch, state, event, iterCtx));
+        const cases = branch.cases ?? {};
+        const taken = Object.hasOwn(cases, key) ? cases[key] : branch.default;
+        if (Array.isArray(taken)) {
+          await runStatements(taken, state, event, opts);
+        }
+        break;
+      }
+      case "dispatch": {
+        const dispatch = statement;
+        const target = opts.target ?? event?.currentTarget;
+        if (!target) {
+          break;
+        }
+        const init = {};
+        if ("detail" in dispatch) {
+          init.detail = evaluateOperand(dispatch.detail, state, event, iterCtx);
+        }
+        if (dispatch.bubbles !== undefined) {
+          init.bubbles = dispatch.bubbles;
+        }
+        if (dispatch.composed !== undefined) {
+          init.composed = dispatch.composed;
+        }
+        target.dispatchEvent(new CustomEvent(dispatch.dispatchEvent, init));
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  }
+}
+
 // src/runtime.ts
 async function Jx(source, target = document.body, options) {
   const base = typeof source === "string" ? new URL(source, location.href).href : location.href;
@@ -1835,6 +2104,37 @@ function canvasAttrName(el, key) {
   }
   return key;
 }
+var _stampPropBindings = false;
+function setStampPropBindings(on) {
+  _stampPropBindings = on;
+}
+var PURE_STATE_TEMPLATE = /^\s*\$\{\s*state\.(\w+)\s*\}\s*$/;
+function boundPropKey(key, val, state) {
+  if (!_stampPropBindings || key !== "textContent") {
+    return null;
+  }
+  let sub = null;
+  if (isRefObj(val)) {
+    if (!val.$ref.startsWith("#/state/")) {
+      return null;
+    }
+    const rest = val.$ref.slice("#/state/".length);
+    sub = rest && !rest.includes("/") ? rest : null;
+  } else if (typeof val === "string") {
+    sub = PURE_STATE_TEMPLATE.exec(val)?.[1] ?? null;
+  }
+  if (!sub) {
+    return null;
+  }
+  const stored = toRaw(state)[sub];
+  if (isRef(stored) || typeof stored === "function") {
+    return null;
+  }
+  if (typeof stored === "object" && stored !== null) {
+    return null;
+  }
+  return sub;
+}
 async function buildScope(doc, parentScope = {}, base = location.href) {
   const raw = {};
   for (const [key, val] of Object.entries(parentScope)) {
@@ -1898,7 +2198,20 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
   for (const [key, def2] of Object.entries(defs)) {
     if (isExpressionDef(def2)) {
       const node = def2.$expression;
-      if (isMutating(node.operator)) {
+      if (isNamedFormulaDef(def2)) {
+        const params = def2.parameters;
+        state[key] = (...argValues) => {
+          const args = {};
+          for (const [i, p] of params.entries()) {
+            const name = typeof p === "string" ? p : p?.name ?? "";
+            if (!name) {
+              continue;
+            }
+            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+          }
+          return evaluateExpression(node, state, null, { args });
+        };
+      } else if (isMutating(node.operator)) {
         const handler = (s, event) => evaluateExpression(node, s, event);
         state[key] = handler;
       } else {
@@ -1907,7 +2220,28 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
     }
   }
   for (const [key, def2] of Object.entries(defs)) {
-    if (isFunctionDef(def2)) {
+    if (hasStructuredBody(def2)) {
+      const { body } = def2;
+      if (Array.isArray(def2.parameters) && def2.parameters.length > 0) {
+        const params = def2.parameters;
+        state[key] = (...argValues) => {
+          const args = {};
+          for (const [i, p] of params.entries()) {
+            const name = typeof p === "string" ? p : p?.name ?? "";
+            if (!name) {
+              continue;
+            }
+            args[name] = argValues[i] === undefined && typeof p === "object" && p !== null && "default" in p ? p.default : argValues[i];
+          }
+          return runStatements(body, state, null, { args });
+        };
+      } else {
+        const handler = (s, event) => {
+          runStatements(body, s, event ?? null);
+        };
+        state[key] = handler;
+      }
+    } else if (isFunctionDef(def2)) {
       state[key] = await resolveFunction(def2, state, key, base);
     }
   }
@@ -1958,7 +2292,7 @@ async function resolveFunction(def2, state, key, base) {
     return noop;
   }
   let fn;
-  if (def2.body) {
+  if (typeof def2.body === "string") {
     const params = resolveParamNames(def2);
     fn = new Function(...params, def2.body);
     Object.defineProperty(fn, "name", {
@@ -1996,7 +2330,7 @@ async function resolveFunction(def2, state, key, base) {
   const hasParams = (def2.parameters ?? def2.arguments ?? []).length > 0;
   let isComputed = false;
   if (!hasParams) {
-    if (def2.body) {
+    if (typeof def2.body === "string") {
       isComputed = /\breturn\b/.test(def2.body);
     } else if (fn) {
       isComputed = fn.length <= 1 && /\breturn\b/.test(fn.toString());
@@ -2122,7 +2456,15 @@ function applyProperties(el, def2, state) {
         }
         continue;
       }
-      if (isFunctionDef(val) && val.body) {
+      if (hasStructuredBody(val)) {
+        const { body } = val;
+        const scope = state;
+        el.addEventListener(key.slice(2), (e) => {
+          runStatements(body, scope, e);
+        });
+        continue;
+      }
+      if (isFunctionDef(val) && typeof val.body === "string") {
         const params = resolveParamNames(val);
         const fn = new Function(...params, val.body);
         const scope = state;
@@ -2141,6 +2483,10 @@ function applyProperties(el, def2, state) {
 }
 function bindProperty(el, key, val, state) {
   const target = el;
+  const boundProp = boundPropKey(key, val, state);
+  if (boundProp) {
+    el.dataset.jxBoundProp = boundProp;
+  }
   if (isRefObj(val)) {
     const refVal = val;
     if (key === "id") {
@@ -3207,6 +3553,7 @@ function distributeSlots(host, slottedChildren) {
 export {
   transposeCanvasUnits,
   toCSSText,
+  setStampPropBindings,
   setSkipServerFunctions,
   setSkipContentResolution,
   setRootMedia,
@@ -3231,5 +3578,5 @@ export {
   Jx
 };
 
-//# debugId=242E5668DE62643A64756E2164756E21
+//# debugId=B1BA44E09A6FC37E64756E2164756E21
 //# sourceMappingURL=runtime.js.map